再和“面向?qū)ο蟆闭剳賽?- 對象簡介(一)
再和“面向?qū)ο蟆闭剳賽?- 對象相關(guān)概念(二)
再和“面向?qū)ο蟆闭剳賽?- 面向?qū)ο缶幊谈拍睿ㄈ?br/>再和“面向?qū)ο蟆闭剳賽?- class(四)
再和“面向?qū)ο蟆闭剳賽?- 繼承(五)
再和“面向?qū)ο蟆闭剳賽?- super(六)
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),邳州企業(yè)網(wǎng)站建設(shè),邳州品牌網(wǎng)站建設(shè),網(wǎng)站定制,邳州網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,邳州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
通過前面的六篇文章已經(jīng)把ES6的面向?qū)ο蟾蠡镎f清楚了,大家最關(guān)心的應(yīng)該是來個例子實戰(zhàn)一下,別擔(dān)心自行車都會有。那這篇文章通篇就是實戰(zhàn),我就以一個“圖片預(yù)加載組件”為例子,一步一步拿前面說的東西來實戰(zhà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}個`);
const percent=current/total*100;
bar.style.width=percent+'%';
span.innerHTML=current+'/'+total;
},
complete(total){
console.log(`加載完畢: ${total}張圖片`);
}
});
loader.start();
- 進度條的顏色為
div.bar
,不斷修改寬度的百分比就能達(dá)到效果- 組件的名稱為
ImgLoader
,它需要接收一個對象為參數(shù)resources
為圖片地址,是個數(shù)組start
為開始加載前的事件,接收一個參數(shù)為加載圖片的總數(shù)progress
為正在加載事件,接收兩個參數(shù),一個為當(dāng)前正在加載圖片的索引,一個為加載圖片的總數(shù)complete
為加載完成事件,所有圖片加載完成以后觸發(fā),接收一個參數(shù),加載圖片的總數(shù)
(function(){
class ImgLoader{
constructor(config){
}
}
window.ImgLoader=ImgLoader;
})();
組件通常會以模塊的形式去寫,放到一個自執(zhí)行的函數(shù)里面,最后把組件做為window
對象的一個屬性暴露出去,這樣能保證在任何一個作用域中都能取到ImgLoader
在new
一個實例的時候需要傳一個對象做為參數(shù),所以在constructor
方法里需要給一個形參叫config
,
(function(){
class ImgLoader{
constructor(config){
//聲明一個默認(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{
//走這里說明用戶一個參數(shù)都沒有傳,那就給個警告
alert('參數(shù)錯誤!');
return;
}
this.total=this.option.resources.length||0; //加載的圖片總數(shù)(||運算符是為了保證有個數(shù)值)
this.currentIndex=0; //當(dāng)前正在加載的是哪一個圖片
}
}
window.ImgLoader=ImgLoader;
})()
this.option
為聲明一個默認(rèn)參數(shù)。它的類型為對象,它里面放的就是用戶new
時候傳入的參數(shù)。它的意義在于:組件里的參數(shù)一般分為必選與可選參數(shù),必選參數(shù)以用戶傳入的為準(zhǔn)。而可選參數(shù)要看用戶有沒有傳入,如果用戶傳了,那取用戶傳入的值;如果用戶沒有傳,那取組件里的默認(rèn)值。
在組件里,但凡要用到參數(shù)的地方,一律取this.option
的值。再一開始的時候拿用戶傳入的參數(shù)config
替換掉this.option
。這樣既能保證用戶傳的參數(shù)能被組件使用到,并且能保證用戶沒有傳參的話,能用this.option
里的值代替。
(function(){
class ImgLoader{
constructor(config){
//聲明一個默認(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{
//走這里說明用戶一個參數(shù)都沒有傳,那就給個警告
alert('參數(shù)錯誤!');
return;
}
this.total=this.option.resources.length||0; //加載的圖片總數(shù)(||運算符是為了保證有個數(shù)值)
this.currentIndex=0; //當(dāng)前正在加載的是哪一個圖片
}
isFn(f){ //檢測用戶傳的事件是否為函數(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];
}
//先檢測用戶傳的start是否為函數(shù),是函數(shù)了就調(diào)用用戶傳的strar方法,并且把圖片總量當(dāng)作參數(shù)傳進去
if(this.isFn(this.option.start)){
this.option.start(this.total);
}
}
loaded(){
//當(dāng)一張圖片加載完成后,就會調(diào)用這個方法,也就代表現(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()
方法是為了檢測用戶傳入的參數(shù)是否為function
,因為star
、progress
、complete
三個參數(shù)是函數(shù),要求用戶傳入的必需為function
類型。
start()
為實例方法,該方法是映射用戶傳的start()
參數(shù)。這個事件為加載前的事件,如何實現(xiàn)這個事件就需要用到Image
對象身上的onload
事件。如果用戶傳入的start()
方法在onload
事件發(fā)生前執(zhí)行,不就代表加載前的事件嗎?代碼中img
的onload
與onerror
事件都指向了loaded
方法,這里我并沒有對加載失敗做單獨處理,統(tǒng)一指向了加載成功后要執(zhí)行的函數(shù)。
loaded()
為實例方法,該方法當(dāng)=img.onload
發(fā)生時被調(diào)用,每一張圖片只要加載成功都會調(diào)用此方法,所以它映射的是用戶傳入的progress()
參數(shù)。this.currentIndex
代表現(xiàn)在已加載圖片的數(shù)量,在代碼中用了前自增運算符,關(guān)于前自增與后自增的詳細(xì)用法請參考我的視頻課程。
用戶的參數(shù)里還有一個complete()
參數(shù),這個參數(shù)代表的是所有圖片全部加載完成后觸發(fā)的事件。那如何判斷所有的圖片都加載完成了呢?關(guān)鍵的東西就是this.currentIndex
,這個值在加載完成一張圖片后就會+1,那如果它的值==所有圖片的數(shù)量時就代表所有圖片都已經(jīng)加載成功了。
×××
至此“再和“面向?qū)ο蟆闭剳賽邸?/strong>系列文章已經(jīng)全部更新完畢!寫文章不易,且行且珍惜!
文章題目:再和“面向?qū)ο蟆闭剳賽?圖片預(yù)加載組件(七)
標(biāo)題來源:http://muchs.cn/article46/jpejeg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計公司、品牌網(wǎng)站設(shè)計、靜態(tài)網(wǎng)站、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)