再和“面向对象”谈恋爱 – 对象简介（一）
再和“面向对象”谈恋爱 – 对象相干观点（二）
再和“面向对象”谈恋爱 – 面向对象编程观点（三）
再和“面向对象”谈恋爱 – class（四）
再和“面向对象”谈恋爱 – 继续（五）
再和“面向对象”谈恋爱 – super（六）

经由过程前面的六篇文章已把ES6的面向对象跟大伙说清楚了，人人最体贴的应该是来个例子实战一下，别忧郁自行车都邑有。那这篇文章通篇就是实战，我就以一个“图片预加载组件”为例子，一步一步拿前面说的东西来实战一下。

例子的结果图：

完成体式格局

//html
<div class="progress">
    <span>0/0</span>
    <div class="bar"></div>
</div>


//javascript
const span=document.querySelector("span"),
    bar=document.querySelector(".bar");

const loader=new ImgLoader({
    resources:[
        'http://p2.qhimg.com/t01ed1438874f940dc0.jpg',
        'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg',
        'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg',
        'http://p7.qhimg.com/t01cfec6d87cde457c5.jpg',
        'http://p9.qhimg.com/t01943ced462da67833.jpg',
        'http://p0.qhimg.com/t01943ced462da67833.jpg',
        'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg',
        'http://p8.qhimg.com/t010f1e8badf1134376.jpg',
        'http://p8.qhimg.com/t01cf37ea915533a032.jpg',
        'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg',
        'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg'
    ],
    start(total){
        console.log(`最先加载: ${total}张图片`);
    },
    progress(current,total){
        console.log(`加载第${current}个`);
        const percent=current/total*100;
        bar.style.width=percent+'%';
        span.innerHTML=current+'/'+total;
    },
    complete(total){
        console.log(`加载终了: ${total}张图片`);
    }
});
loader.start();

申明

1. 进度条的色彩为div.bar，不停修正宽度的百分比就可以到达结果
2. 组件的名称为ImgLoader，它须要吸收一个对象为参数
3. resources为图片地点，是个数组
4. start为最先加载前的事宜，吸收一个参数为加载图片的总数
5. progress为正在加载事宜，吸收两个参数，一个为当前正在加载图片的索引，一个为加载图片的总数
6. complete为加载完成事宜，一切图片加载完成今后触发，吸收一个参数，加载图片的总数

完成步骤

1、团体构造

(function(){
    class ImgLoader{
        constructor(config){
        }
    }
    window.ImgLoader=ImgLoader;
})();

组件通常会以模块的情势去写，放到一个自实行的函数内里，末了把组件做为window对象的一个属性暴露出去，如许能保证在任何一个作用域中都能取到ImgLoader
在new一个实例的时刻须要传一个对象做为参数，所以在constructor要领里须要给一个形参叫config，

2、处置惩罚参数

(function(){
    class ImgLoader{
        constructor(config){
            //声明一个默许参数
            this.option={
                resources:[],
                start:null,
                progress:null,
                complete:null,
            }
            
            if(config){
                //走这里申明用户传参数了，那就拿用户传的覆蓋掉默许的
                for(let v in config){
                    this.option[v]=config[v]
                }
            }else{
                //走这里申明用户一个参数都没有传，那就给个正告
                alert('参数毛病！');
                return;
            }
            
            this.total=this.option.resources.length||0;    //加载的图片总数（||运算符是为了保证有个数值）
            this.currentIndex=0;    //当前正在加载的是哪个图片
        }
    }
    window.ImgLoader=ImgLoader;
})()

this.option为声明一个默许参数。它的范例为对象，它内里放的就是用户new时刻传入的参数。它的意义在于：组件里的参数平常分为必选与可选参数，必选参数以用户传入的为准。而可选参数要看用户有无传入，假如用户传了，那取用户传入的值；假如用户没有传，那取组件里的默许值。

在组件里，凡是要用到参数的处所，一概取this.option的值。再一最先的时刻拿用户传入的参数config替换掉this.option。如许既能保证用户传的参数能被组件使用到，而且能保证用户没有传参的话，能用this.option里的值替代。

3、增加要领

(function(){
    class ImgLoader{
        constructor(config){
            //声明一个默许参数
            this.option={
                resources:[],
                start:null,
                progress:null,
                complete:null,
            }
            
            if(config){
                //走这里申明用户传参数了，那就拿用户传的覆蓋掉默许的
                for(let v in config){
                    this.option[v]=config[v]
                }
            }else{
                //走这里申明用户一个参数都没有传，那就给个正告
                alert('参数毛病！');
                return;
            }
            
            this.total=this.option.resources.length||0;    //加载的图片总数（||运算符是为了保证有个数值）
            this.currentIndex=0;    //当前正在加载的是哪个图片
        }
        
        isFn(f){    //检测用户传的事宜是不是为函数
            return typeof f==='function';
        }
        start(){
            for(let i=0;i<this.option.resources.length;i++){
                const img=new Image();
                img.onload=()=>this.loaded();
                img.onerror=()=>this.loaded();
                img.src=this.option.resources[i];
            }
            
            //先检测用户传的start是不是为函数，是函数了就挪用用户传的strar要领，而且把图片总量看成参数传进去
            if(this.isFn(this.option.start)){
                this.option.start(this.total);
            }
        }
        loaded(){
            //当一张图片加载完成后，就会挪用这个要领，也就代表如今加载胜利了一张了
            if(this.isFn(this.option.progress)){
                //this.currentIndex++;
                this.option.progress(++this.currentIndex,this.total);
            }
            
            //一切图片加载完成
            if(this.currentIndex===this.total){
                if(this.isFn(this.option.complete)){
                    this.option.complete(this.total);
                }
            }
        }
    }
    
    window.ImgLoader=ImgLoader;
})()

isFn()要领是为了检测用户传入的参数是不是为function，由于star、progress、complete三个参数是函数，请求用户传入的必须为function范例。

start()为实例要领，该要领是映照用户传的start()参数。这个事宜为加载前的事宜，怎样完成这个事宜就须要用到Image对象身上的onload事宜。假如用户传入的start()要领在onload事宜发作前实行，不就代表加载前的事宜吗？代码中img的onload与onerror事宜都指向了loaded要领，这里我并没有对加载失利做零丁处置惩罚，一致指向了加载胜利后要实行的函数。

loaded()为实例要领，该要领当=img.onload发作时被挪用，每一张图片只需加载胜利都邑挪用此要领，所以它映照的是用户传入的progress()参数。this.currentIndex代表如今已加载图片的数目，在代码中用了前自增运算符，关于前自增与后自增的细致用法请参考我的视频课程。

用户的参数里另有一个complete()参数，这个参数代表的是一切图片悉数加载完成后触发的事宜。那怎样推断一切的图片都加载完成了呢？症结的东西就是this.currentIndex，这个值在加载完成一张图片后就会+1，那假如它的值==一切图片的数目时就代表一切图片都已加载胜利了。

源码下载

至此“再和“面向对象”谈恋爱”系列文章已悉数更新终了！写文章不容易，且行且珍爱！