溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

再和“面向?qū)ο蟆闭剳賽?- 圖片預(yù)加載組件(七)

發(fā)布時(shí)間:2020-07-13 17:53:53 來源:網(wǎng)絡(luò) 閱讀:3006 作者:陳學(xué)輝 欄目:web開發(fā)

再和“面向?qū)ο蟆闭剳賽?- 對(duì)象簡(jiǎn)介(一)
再和“面向?qū)ο蟆闭剳賽?- 對(duì)象相關(guān)概念(二)
再和“面向?qū)ο蟆闭剳賽?- 面向?qū)ο缶幊谈拍睿ㄈ?br/>再和“面向?qū)ο蟆闭剳賽?- class(四)
再和“面向?qū)ο蟆闭剳賽?- 繼承(五)
再和“面向?qū)ο蟆闭剳賽?- super(六)

通過前面的六篇文章已經(jīng)把ES6的面向?qū)ο蟾蠡镎f清楚了,大家最關(guān)心的應(yīng)該是來個(gè)例子實(shí)戰(zhàn)一下,別擔(dān)心自行車都會(huì)有。那這篇文章通篇就是實(shí)戰(zhàn),我就以一個(gè)“圖片預(yù)加載組件”為例子,一步一步拿前面說的東西來實(shí)戰(zhàn)一下。

組件的效果圖:

再和“面向?qū)ο蟆闭剳賽?- 圖片預(yù)加載組件(七)

實(shí)現(xiàn)方式

<!--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}個(gè)`);
        const percent=current/total*100;
        bar.style.width=percent+'%';
        span.innerHTML=current+'/'+total;
    },
    complete(total){
        console.log(`加載完畢: ${total}張圖片`);
    }
});
loader.start();

說明

  1. 進(jìn)度條的顏色為div.bar,不斷修改寬度的百分比就能達(dá)到效果
  2. 組件的名稱為ImgLoader,它需要接收一個(gè)對(duì)象為參數(shù)
  3. resources為圖片地址,是個(gè)數(shù)組
  4. start為開始加載前的事件,接收一個(gè)參數(shù)為加載圖片的總數(shù)
  5. progress為正在加載事件,接收兩個(gè)參數(shù),一個(gè)為當(dāng)前正在加載圖片的索引,一個(gè)為加載圖片的總數(shù)
  6. complete為加載完成事件,所有圖片加載完成以后觸發(fā),接收一個(gè)參數(shù),加載圖片的總數(shù)

實(shí)現(xiàn)步驟

1、整體結(jié)構(gòu)

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

組件通常會(huì)以模塊的形式去寫,放到一個(gè)自執(zhí)行的函數(shù)里面,最后把組件做為window對(duì)象的一個(gè)屬性暴露出去,這樣能保證在任何一個(gè)作用域中都能取到ImgLoader
new一個(gè)實(shí)例的時(shí)候需要傳一個(gè)對(duì)象做為參數(shù),所以在constructor方法里需要給一個(gè)形參叫config,

2、處理參數(shù)

(function(){
    class ImgLoader{
        constructor(config){
            //聲明一個(gè)默認(rèn)參數(shù)
            this.option={
                resources:[],
                start:null,
                progress:null,
                complete:null,
            }

            if(config){
                //走這里說明用戶傳參數(shù)了,那就拿用戶傳的覆蓋掉默認(rèn)的
                for(let v in config){
                    this.option[v]=config[v]
                }
            }else{
                //走這里說明用戶一個(gè)參數(shù)都沒有傳,那就給個(gè)警告
                alert('參數(shù)錯(cuò)誤!');
                return;
            }

            this.total=this.option.resources.length||0; //加載的圖片總數(shù)(||運(yùn)算符是為了保證有個(gè)數(shù)值)
            this.currentIndex=0;    //當(dāng)前正在加載的是哪一個(gè)圖片
        }
    }
    window.ImgLoader=ImgLoader;
})()

this.option為聲明一個(gè)默認(rèn)參數(shù)。它的類型為對(duì)象,它里面放的就是用戶new時(shí)候傳入的參數(shù)。它的意義在于:組件里的參數(shù)一般分為必選與可選參數(shù),必選參數(shù)以用戶傳入的為準(zhǔn)。而可選參數(shù)要看用戶有沒有傳入,如果用戶傳了,那取用戶傳入的值;如果用戶沒有傳,那取組件里的默認(rèn)值。

在組件里,但凡要用到參數(shù)的地方,一律取this.option的值。再一開始的時(shí)候拿用戶傳入的參數(shù)config替換掉this.option。這樣既能保證用戶傳的參數(shù)能被組件使用到,并且能保證用戶沒有傳參的話,能用this.option里的值代替。

3、添加方法

(function(){
    class ImgLoader{
        constructor(config){
            //聲明一個(gè)默認(rèn)參數(shù)
            this.option={
                resources:[],
                start:null,
                progress:null,
                complete:null,
            }

            if(config){
                //走這里說明用戶傳參數(shù)了,那就拿用戶傳的覆蓋掉默認(rèn)的
                for(let v in config){
                    this.option[v]=config[v]
                }
            }else{
                //走這里說明用戶一個(gè)參數(shù)都沒有傳,那就給個(gè)警告
                alert('參數(shù)錯(cuò)誤!');
                return;
            }

            this.total=this.option.resources.length||0; //加載的圖片總數(shù)(||運(yùn)算符是為了保證有個(gè)數(shù)值)
            this.currentIndex=0;    //當(dāng)前正在加載的是哪一個(gè)圖片
        }

        isFn(f){    //檢測(cè)用戶傳的事件是否為函數(shù)
            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];
            }

            //先檢測(cè)用戶傳的start是否為函數(shù),是函數(shù)了就調(diào)用用戶傳的strar方法,并且把圖片總量當(dāng)作參數(shù)傳進(jìn)去
            if(this.isFn(this.option.start)){
                this.option.start(this.total);
            }
        }
        loaded(){
            //當(dāng)一張圖片加載完成后,就會(huì)調(diào)用這個(gè)方法,也就代表現(xiàn)在加載成功了一張了
            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()方法是為了檢測(cè)用戶傳入的參數(shù)是否為function,因?yàn)?code>star、progresscomplete三個(gè)參數(shù)是函數(shù),要求用戶傳入的必需為function類型。

start()為實(shí)例方法,該方法是映射用戶傳的start()參數(shù)。這個(gè)事件為加載前的事件,如何實(shí)現(xiàn)這個(gè)事件就需要用到Image對(duì)象身上的onload事件。如果用戶傳入的start()方法在onload事件發(fā)生前執(zhí)行,不就代表加載前的事件嗎?代碼中imgonloadonerror事件都指向了loaded方法,這里我并沒有對(duì)加載失敗做單獨(dú)處理,統(tǒng)一指向了加載成功后要執(zhí)行的函數(shù)。

loaded()為實(shí)例方法,該方法當(dāng)=img.onload發(fā)生時(shí)被調(diào)用,每一張圖片只要加載成功都會(huì)調(diào)用此方法,所以它映射的是用戶傳入的progress()參數(shù)。this.currentIndex代表現(xiàn)在已加載圖片的數(shù)量,在代碼中用了前自增運(yùn)算符,關(guān)于前自增與后自增的詳細(xì)用法請(qǐng)參考我的視頻課程。

用戶的參數(shù)里還有一個(gè)complete()參數(shù),這個(gè)參數(shù)代表的是所有圖片全部加載完成后觸發(fā)的事件。那如何判斷所有的圖片都加載完成了呢?關(guān)鍵的東西就是this.currentIndex,這個(gè)值在加載完成一張圖片后就會(huì)+1,那如果它的值==所有圖片的數(shù)量時(shí)就代表所有圖片都已經(jīng)加載成功了。

×××

至此“再和“面向?qū)ο蟆闭剳賽邸?/strong>系列文章已經(jīng)全部更新完畢!寫文章不易,且行且珍惜!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI