ES6在新图册组件中的应用
ES7都来了，然而我们连ES6都很少用到，基于ES6的不成熟，以及浏览器支持程度问题，导致大家都比较少使用得上它。不过目前日渐更新的浏览器，已经大面积支持ES6的新特性了，即使不支持，也可以使用Babel来进行转换为ES5来执行。此次就运用到Babel来编译，已集成到前端发布工具中，添加即可使用。
1、类定义
以前的做法：
1 2 3 | function ImageFall(param){}ImageFall.prototype = {} |
怎么看，都不像一个类，怪别扭
1 2 3 4 | class ImageFall{ //构造函数 constructor(param){}} |
参照其它语言，用class来定义类，constructor为构造函数，即new ImageFall的时候默认调用，看着清爽多了
2、字符串模板
以前的做法：
1 2 3 4 | listHtml += '<li class="item">\ <img data-src="'+item.thumb+'" data-index="'+index+'" />\ <span>'+item.desc+'</span>\ </li>'; |
各种变量、单引号、双引号，还有结尾的反斜杠，混乱而且容易出错，如果想写点逻辑就跟麻烦了
1 2 3 4 | listHtml += `<li class="item"> <img data-src="${item.thumb}" data-index="${index}" /> <span>${item.desc}</span> </li>`; |
ES6的写法，采用反单引号代替引号，所以内容就不需要纠结单引号双引号切换问题，末尾也不需要使用+或者\连接起来，遇到变量也不需要刻意使用引号隔开，直接使用${变量}即可。
3、箭头函数
以前的做法：
1 2 3 4 5 6 7 8 9 | var that = this;//图片点击事件this.container.bind("click",function(e){ if(e.target.tagName.toLowerCase() != "img")return true; that.showBigImage($(e.target).data("index"));}); |
可以看出，需要刻意将this保存起来，否则在回调事件中的this是指向了this.container这个对象了，看着别扭，写着也别扭
1 2 3 4 5 6 7 | //图片点击事件this.container.bind("click",(e)=>{ if(e.target.tagName.toLowerCase() != "img")return true; this.showBigImage($(e.target).data("index"));}); |
改为箭头函数后，函数内作用域不变，可以沿用外层的this，而且可以不写function这个关键字。箭头函数的其他地方运用。
1 2 | this.info.colList = new Array(11);this.info.colList = this.info.colList.join("0,").split(",").map((col)=>+col); |
这个看着很奇怪，就是创建一个长度11的空数组，然后join完变成一个长度为11的0,字符串，再用分隔符转为数组，这些都不是重点。重点是最后的map((col)=>+col)，箭头函数的简洁，遍历数组，将字符串转为数字，col是回调函数的行参
还有这样的：
1 2 3 4 5 6 | //图片加载img.onload = ()=>{}//计时器setTimeout(()=>{},1000); |
4、数组拆分
以前的做法：
1 2 | var arr = [2,3,4];Math.max.apply(arr); |
利用apply来替换max方法的内部this指向来达到数组获取最大值方式，不过这个方式在IE低版本是会报错，所以一般都是乖乖写个for循环之类的
1 2 | var arr = [2,3,4];Math.max(...arr); |
这个写法，看起来简单多了，其实是ES6的方式，利用...运算符可以将后面的数组拆分成对应的列表出来，最终会是如下：
1 2 | var arr = [2,3,4];Math.max(2,3,4); |
5、静态工具方法
以前的方式
1 2 3 | var ImageFallProcess = { move : function(){}}; |
最简单的方式，就是定义个json的对象了
1 2 3 4 | class ImageFallProcess{ static move(){}} |
同样都能使用ImageFallProcess.move调用，而且也是单例模式
6、解构赋值
以前做法
1 2 3 4 5 | function getImgSize(param){ var img = param.img, maxWidth = param.maxWidth, maxHeight = param.maxHeight;} |
获取对象变量值，需要像上面那样麻烦，多几个就更头疼
1 2 3 | getImgSize(param){ let {img,maxWidth,maxHeight} = param;} |
ES6新方式，可以将对象中跟左侧变量名相同的进行赋值，简洁省力
PS：后记
ES6还有其他新特性，目前还没有用到，特别提一下：import和exports是不支持，因为这是后端Nodejs的。
ES6的使用必然是趋势，后面会整理更多关于ES6在小组中如何使用。
手机阅读请扫描下方二维码：
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
12345678
czycocvtbwjsgepwnfhl
12345678
12345678
12345678
1
1
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1