Ethanzyc-CSDN博客

原创 Vue 中文本内容超出规定行数后展开收起的处理

Vue 中文本内容超出规定行数后展开收起的处理文字比较难解释，直接看图应该就懂是要做什么了。需求工作中遇到的，需求就是超过四行得有个展开按钮，点击展开显示所有内容，不超过四行的话就不需要这个按钮并显示所有内容。思路首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM ...

2018-08-22 11:34:52 26275 10

原创 Promise / generator / async / await 整理

Promise主要是用来解决异步操作。同步：串行简单，方便异步：并行性能高，体验好这是 promise 的基本用法let p = new Promise((resolve, reject) => { $.ajax({ url: '1.txt', dataType: 'json', success(json){ ...

2018-09-18 11:38:57 256

原创 ES6 中的面向对象

面向对象ES6 之前的传统的对象看这篇吧——js 笔记，ES6出来之后，官方提供了面向对象的写法。看代码吧class Person{ constructor(name,age,address) { this.name = name; this.age = age; this.address = address; } introduce() { co...

2018-09-18 11:37:00 3423 1

原创 ES6 Json 以及字符串相关新特性（字符串模板）

json省略 function在 json 中，我们可以这样写一个方法let json = { a:1, b:100, add: function() { console.log(this.a+this.b); }}json.add(); // 101现在，我们可以把 function 省略了，效果是一样的let a = 1;let js...

2018-09-12 20:23:35 1881

原创 ES6 数组新特性（map，filter，forEach，reduce，array.from）

map：原来数组有多少个，map 处理之后还是那么多个。参数：item，index，arraylet arr = [12,35,56,79,56];let arr1 = arr.map(item =&gt; item%2 === 0 ? '偶' : '奇');let arr2 = arr.map((item,index) =&gt; index + ':' + item);consol...

2018-09-11 22:56:09 1708

原创 ES6 函数（箭头函数、默认参数、函数展开）

箭头函数// 传统let plus = function(a,b) { return a+b}// 箭头函数let arrPlus = (a,b) => a+b// 传统function plus1(a,b) { return a+b;}let a = plus(1,5)let b = plus1(1,6)let c = arrPlus(1,7)...

2018-09-11 16:57:04 568

原创解构赋值

解构赋值正常我们是这样定义一个数组，然后这样输出：let arr = [1, 3, 5];console.log(arr[0],arr[1],arr[2]); // 1 3 5但利用解构赋值也可以这样写：let [a, b, c] = [1, 3, 5];console.log(a,b,c); // 1 3 5前后解构如果不一致会输出这样的结果：let...

2018-08-23 10:27:38 615

原创拆分 v-model

拆分 v-modelimport Vue from 'vue'const component = { props: ['valueOfSon'], template: ` <div> <input type="text" @input="handleInput" :value=valueOfSon> </div>...

2018-08-22 11:37:44 1374

原创 js 中的工厂模式与构造函数模式

创建对象工厂模式function createNewObject(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job o.sayName = function() { console.log(name); } return o;};l...

2018-08-22 11:37:03 596

原创 JavaScript 笔记03（创建对象/原型模式/js 继承/BOM）

js 笔记3 接笔记213.创建对象工厂模式function createNewObject(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job o.sayName = function() { console.log(name)...

2018-08-22 11:36:18 147

原创 JavaScript 笔记02（js 循环 / 函数参数 / js 中复制值 / 检测类型 / 数组常用 api ）

JavaScript 笔记02 接笔记015.for / forEach / for-in / for-of不多 bb，直接看代码。// 循环数组let array = ['a', 'b', 'c'];// 普通 for 循环for (let index = 0; index < array.length; index++) { const ele...

2018-08-22 11:33:35 158

原创 Flex 布局

Flex 布局本文参考了阮一峰老师的Flex 布局教程：语法篇和Flex 布局教程：实例篇，感谢注意点：行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: f...

2018-08-22 11:32:49 156

原创 JavaScript 笔记01（变量提升、数据类型）

1.变量提升参考这篇，变量声明就是变量和函数声明会被移到当前作用域作用域是肯定要重点看的，高级设计这本书里我记得讲的比较详细，我就不找那种整理的文章了，等看到了再一步步把他弄透的最顶部，然后只在编译时执行变量和函数声明，并不会执行赋值，其实上面那个链接里看几个例子就懂了，然后 let 和 const 不存在变量提升现象。举个例子：a = 9;var a;console.log(...

2018-08-22 11:29:36 128

原创 Require JS 特性

Require JS 特性module 被执行的时候加载，加载用会留下缓存，供之后使用一旦出现某个模块被循环使用（A 模块中调用了 B，B 中又调用了 A），就输出已经执行的部分，还未执行的部分不会输出。我们来看个例子：这是 module A：modAmodule.exports.test = 'A';const modB = require('./modB');...

2018-08-22 11:28:57 134

原创关于 CSS

css: cascading style sheet 层叠样式表各种选择器以及不同选择器的搭配，其中最常用的还是类选择器, 不过工作中用的 less, 那些搭配其实也用不太到, 说到 less , 当时直接上手就用了, 也没好好看下, 等有时间了去看下 less 文档, 看看有没有什么知识点遗漏的(肯定会有)继承性层叠性!important 提升权重, 尽量不用一个查看...

2018-08-22 11:21:11 158

原创关于 HTTP

html 骨架<!DOCTYPE...><html> <head> </head> <body> </body></html>html:负责语义，结构css:负责样式js:负责交互其实想看的就是这些，当你知道他比较本质的东西，很多时候就好做决定了

2018-08-22 11:19:30 100

原创微信小程序学习--组件--视图容器

view 组件除了公共属性，view 组件还有以下四个属性scroll-view 滚动视图容器可以在页面中形成一个可以滚动的视图区域，帮助开发者实现页面部分内容的滑动展示。 scroll-view 中不能使用 textarea、map、canvas、video 组件。属性： 1.滑动方向设置：scroll-x （允许横向滚动）和 scroll-y （允许...

2018-05-31 23:26:00 1142

原创微信小程序学习--基础--CommonJs 模块化

由于小程序内部是采用 CommonJs 进行模块的管理与处理，所以我们自己封装模块时，也要遵循 CommonJs 规范。定义模块小程序帮我们完成了 define 的调用，我们只需编写模块内部的代码。在模块内部使用 module.exports 对外提供接口define(function(require,exports,module){ // 这里是模块的代码})调用模块调...

2018-05-31 21:25:37 3472

原创微信小程序学习--基础--JavaScript 闭包

首先得明确两点，关于JavaScript：局部变量不能在外部（公共区域）被读取函数内部可以直接读取全局变量（这点与 Java 等语言不同）function f1(){ var n=999;}alert(n); // error但有时候我们需要在外部读取局部变量，可以这样来做function f1(){　　　　var n=999;　　　　function f2(){　　　　　　al...

2018-05-31 20:57:29 2236

原创微信小程序学习--基础--尺寸单位 rpx

rpx （responsive pixel）：是 WXSS 中引入新的尺寸单位，可以适配不同宽度的屏幕，规定屏幕宽为750rpx。相对px能保证在不同尺寸的手机屏幕内相对位置不偏移。rpx 与 px 之间的换算：换算基准：以375个物理像素为基准，即在一个宽度为375物理像素的屏幕下，1rpx=1px...

2018-05-30 22:08:35 1446

原创微信小程序学习--基础--盒子模型Flexbox

主要包括 Flex 容器属性和 Flex 项目属性Flex 容器属性 flex-direction:项目元素排列的方向 row：项目从左向右排列 row-reverse：项目从右向左排列 column：纵向对齐排列，从上到下 column-reverse：反转纵向对齐排列，从下到上flex-wrap:项目元素排列的方式 nowrap：项目元素不会溢出，也不会自动...

2018-05-30 21:41:51 5365

原创微信小程序学习--基础--选择器权重/优先级

element 元素选择器--1.class 类选择器-----10id 选择器---------100style 内联样式-----1000!important--------∞比如 view .name 的权重为1+100=101

2018-05-30 07:17:33 2607

原创微信小程序学习--基础--模板引用

话不多说，直接看代码<template name="msgItem"> <view> <text>{{index}}:{{msg}}</text> <text> Time:{{time}}&l

2018-05-29 22:56:53 234

原创微信小程序学习--基础--条件渲染

在组件中加入 wx:if 来控制组件的显示与隐藏。当值为 true 时，对应组件会进行渲染，false 时则不渲染。需要进行多重判断时，<view wx:if="{{num>5}}"> 1</view><view wx:elif="{{num<2}}"> 2</view><view wx:el

2018-05-29 22:39:38 207

原创微信小程序学习--基础--列表渲染

列表渲染是指将一个数组中的所有数据依次展示在页面中。<view wx:for="{{array}}"> {{index}}:{{item.message}}</view>

2018-05-29 22:25:10 305

原创微信小程序学习--基础--数据绑定

从今天开始学习小程序，博客主要目的是帮助自己整理记忆，干货不多，写的也可能不全，有问题可以一起在评论区交流。WXML 的数据对应 Page 中的 data采用 Mustache 语法（双大括号 {{}} ）内容绑定，简单，不细说组件属性绑定实现动态属性，用法同内容绑定双大括号里可以放：三元运算符，算术运算，字符串运算，读取对象或数组内部的数据 ...

2018-05-29 21:50:57 241

keep moving