es6学习第3天，...的几种用法 vue-lazyload图片懒加载 Promise校验

1，箭头函数 

只有一条语句的时候 不用加花括号 

function(a){return a+b} 相当于 a=>a+b

有多个参数的时候 要加上圆括号

(a,b)=>a+b

有多条语句的时候 要加上花括号

(a,b)=>{

a=c;

return a+b

}

2，... 的用法 

3，...和参数放到一起的时候 表示将未知个数的参数 放到数组 m 中

f(...m){

for(var k of m){

console.log(k)

}

}

4，... 和数组放到一起的时候 表示将数组解构 不再组合成数组

[a,b]    ...[a,b] 解构计算后 输出 a b

arr1=[1,2,3] arr2=[4,5,6]

arr3=[...arr1,...arr2] 

arr1和 arr2 被解构了 

arr3变成了 [1,2,3,4,5,6]

5，... 放到数组里面 还可以将未知个数个 元素 构一个数组结构

[1,...y]=[1,2,3,4,5,6]

y 经过 ... 计算的结果为 [2,3,4,5,6]

6，xy=[..."asd"] 

"asd" 被 ... 拆解 

xy结果为[a,s,d]

7，[x,y,z]="asd"

x 输出 为 "a"

y 输出为 "s"

z 输出为 "d"

8，Promise 对象 可以解决多层回掉的问题 

比如要按顺序校验多次 每次校验成功之后在进行下一类校验 比较繁琐 通过 Promise 对象可以用 线性 的语法就能实现 多级 的校验 

//第一层登录校验

let checkLogin=function(){

return new Promise(function(resolve,reject){

let flag=document.cookie.indexOf("userId")>-1?true:false;

if(flag){

resolve(

//传入一个对象

{

status:0,

result:true

}

)

}else{

reject("传入一个标识错误信息");

}

})

}

//第二层校验

let getUserInfo=()=>{

//第二个 promise对象

return new Promise((resolve,reject)=>{

let userInfo={

userId:"456"

}

//放入一个对象

resolve(userInfo);

})

}

//执行校验并拿到校验结果

checkLogin().then((res)=>{

//res 就是我们前面放进去的那些个对象 这里就可以使用了

if(res.status==0){

console.log("yse");

//第二次校验开始

return getUserInfo();

}

}).catch((error)=>{

console.log("no")

}).then((res2)=>{

//拿到了第二次校验 我们放进去的对象

console.log(res2.userId)

})

9，可以把多个 Promise 对象合并到一批 通过解构来获取每个 Promise 的结果

Promise.all([checkLogin(),getUserInfo()]).then([res1,res2])=>{

//同时拿到了所有校验的结果 可以做更多的事情

console.log(res1.result+"   "+res2.userId)

}

10，ES6中新增的组件化的新 模式 export导出 import 导入

一般是使用 export default 来导出 引入的时候 直接 import 就可以

如果直接 export 导出自定的格式的话 在import 引入的时候 也要使用相对应的格式来接收 否则导入失败

util文件中 export let f1=(a,b)=>{return a+b} export let f2=(a,b)=>{return a-b}

外部某个平级文件中 import {f1,f2} from './util' 然后就可以使用 f1(1,2) f2(2,1) 来计算了

import 可以用在异步的动态导入 这样就不用在打包的时候 把后面 才需要用到的文件也打包 而是等用到的时候再去加载  可以提高起步的速度 减小一开始加载的文件的大小

11，目前有 4 种模块化开发 的概念 

ES5 中就已经提出的有 3种 分别是 AMD CMD CommonJs

ES6 中 又新增一种 就是 export/import 概念

AMD 有一个实现 就是 RequireJs 主要是异步的模块加载 是依赖前置的 

CMD 有一个淘宝的实现 SeaJs 主要是用于同步的模块加载 是就近依赖的 现在 RequireJs 也实现了一部分 CMD

CommonJs 是用在后端的 前端不支持这种规范 modules.esports 可以用来输出匿名的组件 exports.name 用来输出具名的组件

ES6 新增的模块化概念就是 export 倒出组件 import 引入 组件

12，一个vue 实例可以通过 el:'#id' 来绑定 元素 也可以通过 .$mount("#id") 来将前面的一堆配置挂载到元素上  .$mount("#id") 是早期的方法了

13，给实例指定一个模板 可以用 template:'<App/>' 也可以用 render:(h)=>{return h(App)} 前面的方法 实际上是把后面的这个早期用的方法封装了而已 本质是一样的

14，src/assecs 目录是用来放组件的图片资源的 这个里面的图片会在需要的时候压缩成  base64的格式

static 目录 则是用来放页面的图片的 不会被压缩的

15，页面是很少复用的 组件是用来被复用的

16，在定义组件的时候 用单词首字母大写的方式 AaaBbb

使用组件的时候 要用小写 <aaa-bbb></aaa-bbb>

因为W3C要求元素标签要用小写字母

17，可以给谷歌装 VUE 插件 可以看到页面中的组件层

18，可以用虚拟的 mock 数据来测试接口

19，json 语法中 不能多逗号 也不能漏逗号 不能写注释

20，在使用了指令之后 比如 v-bind :xxx=" 那么这个里面就是一个js的环境了 使用js的语法就行 "

21，vue-lazyload 图片懒加载插件 使用之后 将 img 标签中的 v-bind:src="xxx" 替换成 v-lazy:src="xxx" 即可使用 

可以设置 加载过程中的过渡图片

可以根据当前的图片元素的位置来计算是否要加载图片