上一篇文中完成的封裝，還存在一個小問題，就是該輪播對象不能在同一頁面中重復使用，本文將通過組合使用javascript的構(gòu)造函數(shù)和原型模式創(chuàng)建對象來解決這個問題。
沒有看過上一篇文章的朋友可以點此查看上一篇文章 (jQuery圖片輪播實現(xiàn)并封裝(一))
首先回顧一下，上文的問題所在，上文中的carsouel對象是采用字面量的方式來定義的，這樣carsouel本就是一個實例，想要使用在多處時，這個對象的方法會發(fā)生沖突，最終只會執(zhí)行最后的那一個。而通過采用構(gòu)造函數(shù)的方式來定義對象carsouel，每次需要使用時只需要用new操作符來實例化一個新對象，頁面中需要幾處輪播就實例化幾個對象，這樣就可以滿足需求。所以，將代碼改成以下形式。
function Carousel(){ this.now = 0; //當前顯示的圖片索引 this.hasStarted = false； //是否開始輪播 this.interval = null； //定時器 this.liItems = null； //要輪播的li元素集合 this.len = 0; //liItems的長度 this.aBox : null; //包含指示器的dom對象 this.bBox : null; //包含前后按鈕的dom對象 /** * 初始化及控制函數(shù) * @param bannnerBox string 包含整個輪播圖盒子的id或class * @param aBox string 包含指示器的盒子的id或class * @param btnBox string 包含前后按鈕的盒子的id或class */ this.startPlay = function(bannnerBox,aBox,btnBox) { //初始化對象參數(shù) var that = this; this.liItems = $(bannnerBox).find('ul').find('li'); this.len = this.liItems.length; this.aBox = $(bannnerBox).find(aBox); this.bBox = $(bannnerBox).find(btnBox); //讓第一張圖片顯示，根據(jù)輪播圖數(shù)量動態(tài)創(chuàng)建指示器，并讓第一個指示器處于激活狀態(tài)，隱藏前后按鈕 this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0}); var aDom = ''; for (var i = 0; i < this.len; i++){ aDom += '<a></a>'; } $(aDom).appendTo(this.aBox); this.aBox.find('a:first').addClass("indicator-active"); this.bBox.hide(); //鼠標移入banner圖時，停止輪播并顯示前后按鈕，移出時開始輪播并隱藏前后按鈕 $(bannnerBox).hover(function (){ that.stop(); that.bBox.fadeIn(200); }, function (){ that.start(); that.bBox.fadeOut(200); }); //鼠標移入指示器時，顯示對應圖片，移出時繼續(xù)播放 this.aBox.find('a').hover(function (){ that.stop(); var out = that.aBox.find('a').filter('.indicator-active').index(); that.now = $(this).index(); if(out!=that.now) { that.play(out, that.now) } }, function (){ that.start(); }); //點擊左右按鈕時顯示上一張或下一張 $(btnBox).find('a:first').click(function(){that.next()}); $(btnBox).find('a:last').click(function(){that.prev()}); //開始輪播 this.start() }; //前一張函數(shù) this.prev = function (){ var out = this.now; this.now = (--this.now + this.len) % this.len; this.play(out, this.now); }; //后一張函數(shù) this.next = function (){ var out = this.now; this.now = ++this.now % this.len; this.play(out, this.now); }; /** * 播放函數(shù) * @param out number 要消失的圖片的索引值 * @param now number 接下來要輪播的圖的索引值 */ this.play = function (out, now){ this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500); this.aBox.find('a').removeClass('imgnum-active').eq(now).addClass('indicator-active'); }; //開始函數(shù) this.start = function(){ if(!this.hasStarted) { this.hasStarted = true; var that = this; this.interval = setInterval(function(){ that.next(); },2000); } }; //停止函數(shù) this.stop = function (){ clearInterval(this.interval); this.hasStarted = false; }};調(diào)用時采用new操作符，如下：
var banner1 = new Carousel(); var banner2 = new Carousel(); var banner3 = new carousel(); banner1.startPlay('#J_bg_ban1','#J_bg_indicator1','#J_bg_btn1'); banner2.startPlay('#J_bg_ban2','#J_sm_indicator2','#J_bg_btn2'); banner3.startPlay('#J_bg_ban3','#J_sm_indicator3','#J_bg_btn3');上述方法可實現(xiàn)需求，但是仔細分析發(fā)現(xiàn)，這與上一篇文中使用extend復制對象的方法幾乎是一樣的，這里的new操作符實際上也是將構(gòu)造函數(shù)完全復制了一份出來作為一個新的對象，那就和上文中提到的方法存在共同的缺點，那就是內(nèi)部函數(shù)不能復用，每次執(zhí)行用new操作符來實例化，都會創(chuàng)建新的內(nèi)部函數(shù)，這也是單獨使用構(gòu)造函數(shù)來自定義對象的缺點。
在Carousel對象內(nèi)的next函數(shù)，prev函數(shù)，strat函數(shù)，stop函數(shù)其實都是可以共用的，多個輪播件共用這些函數(shù)是完全沒有問題的，而初始化函數(shù)和play函數(shù)需要作為私有函數(shù)來調(diào)用。單獨使用構(gòu)造函數(shù)創(chuàng)建的對象，當使用new操作符創(chuàng)建新實例的時候，初始化方法和play方法會被重新在每個實例上創(chuàng)建一遍，這正是我們想要的結(jié)果，而next方法、prev方法、start方法、stop方法這些可共用的方法也會被重新創(chuàng)建，而創(chuàng)造多個完成一樣任務的方法是完全沒有必要的，所以需要將這些共有的方法提出來，讓所有Carousel對象的實例都可以公用，這樣就可以解決函數(shù)復用的問題。
通過將這些共用的方法寫在Carousel的原型對象上，在創(chuàng)建Carousel新實例的時候就可以通過原型鏈來共享這些方法，這樣這些公用函數(shù)也就得到了復用，代碼如下：
function Carousel(){ this.now = 0; //當前顯示的圖片索引 this.hasStarted= false; //是否開始輪播 this.interval = null; //定時器 this.liItems = null; //要輪播的li元素集合 this.len = 0; //liItems的長度 this.aBox = null; //包含指示器的dom對象 this.bBox = null; //包含前后按鈕的dom對象 /** * 初始化及控制函數(shù) * @param bannnerBox string 包含整個輪播圖盒子的id或class * @param aBox string 包含指示器的盒子的id或class * @param btnBox string 包含前后按鈕的盒子的id或class */ this.startPlay = function(bannnerBox,aBox,btnBox) { //初始化對象參數(shù) var that = this; this.liItems = $(bannnerBox).find('ul').find('li'); this.len = this.liItems.length; this.aBox = $(bannnerBox).find(aBox); this.bBox = $(bannnerBox).find(btnBox); //讓第一張圖片顯示，根據(jù)輪播圖數(shù)量動態(tài)創(chuàng)建指示器，并讓第一個指示器處于激活狀態(tài)，隱藏前后按鈕 this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0}); var aDom = ''; for (var i = 0; i < this.len; i++){ aDom += '<a></a>'; } $(aDom).appendTo(this.aBox); this.aBox.find('a:first').addClass("imgnum-active"); this.bBox.hide(); //鼠標移入banner圖時，停止輪播并顯示前后按鈕，移出時開始輪播并隱藏前后按鈕 $(bannnerBox).hover(function (){ that.stop(); that.bBox.fadeIn(200); }, function (){ that.start(); that.bBox.fadeOut(200); }); //鼠標移入指示器時，顯示對應圖片，移出時繼續(xù)播放 this.aBox.find('a').hover(function (){ that.stop(); var out = that.aBox.find('a').filter('.indicator-active').index(); that.now = $(this).index(); if(out!=that.now) { that.play(out,that.now) } }, function (){ that.start(); }); //點擊左右按鈕時顯示上一張或下一張 $(btnBox).find('a:first').click(function(){that.next()}); $(btnBox).find('a:last').click(function(){that.prev()}); //開始輪播 this.start() }; /** * 播放函數(shù) * @param out number 要消失的圖片的索引值 * @param now number 接下來要輪播的圖的索引值 */ this.play = function (out,now){ this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500); this.aBox.find('a').removeClass('imgnum-active').eq(now).addClass('indicator-active'); };}Carousel.prototype = { //前一張函數(shù) prev : function (){ var out = this.now; this.now = (--this.now + this.len) % this.len; this.play(out,this.now) }, //后一張函數(shù) next : function (){ var out = this.now; this.now = ++this.now % this.len; this.play(out,this.now); }, //開始函數(shù) start : function(){ if(!this.hasStarted) { this.hasStarted = true; var that = this; this.interval = setInterval(function(){ that.next(); },2000); } }, //停止函數(shù) stop : function (){ clearInterval(this.interval); this.hasStarted = false; }};在這里用字面量重寫了Carousel對象的原型對象，將next方法，perv方法，start方法和stop方法寫進了Carousel的原型對象中，這樣每次實例化的對象就可以共用這些方法。當然，實例化的方法也是使用new操作符。
這種組合使用構(gòu)造函數(shù)和原型的模式，是創(chuàng)建自定義類型最常用的方法，至此我們就完成了這個簡單輪播對象的封裝。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
