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