做有态度的前端团队

网易FEG前端团队

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还有其他新特性,目前还没有用到,特别提一下:importexports是不支持,因为这是后端Nodejs的。

ES6的使用必然是趋势,后面会整理更多关于ES6在小组中如何使用。

图册组件代码:http://git-wz.gz.netease.com/nie-js/nie-image-fall

手机阅读请扫描下方二维码: