資訊專欄INFORMATION COLUMN
摘要：今天寫一個簡單的選項卡插件，這個我也是看別人博文學(xué)習(xí)實現(xiàn)的，然后加一些自己的理解。一實現(xiàn)效果雖說有點簡陋，但是可以看到在文件中，引入我們寫的插件后，實現(xiàn)選項卡切換，就只需一行代碼就可以實現(xiàn)了。
一.實現(xiàn)效果估計大概兩三個月沒有這類的關(guān)于前端的文章了，一來是覺得自己太菜，二來也是因為自己的懶散，渾渾噩噩的消耗時間卻沒有收獲什么成果。今天因為和一些同學(xué)的聊天，突然自己的心情很低落，有一種看不到未來在哪的感覺，所以強(qiáng)行讓自己學(xué)習(xí)，去看js插件怎么寫。今天寫一個簡單的選項卡插件，這個我也是看別人博文學(xué)習(xí)實現(xiàn)的，然后加一些自己的理解。
雖說有點簡陋，但是可以看到在html文件中，引入我們寫的tab.js插件后，實現(xiàn)選項卡切換，就只需一行代碼就可以實現(xiàn)了。
先整體看下結(jié)構(gòu)大概是怎樣
//一開始當(dāng)然是創(chuàng)建一個構(gòu)造函數(shù)tab
function Tab(){
//里面只有一行代碼，就是調(diào)用自身的初始化方法
this.init.apply(this,arguments);
}
//需要的屬性和方法全部寫在prototype里面
Tab.prototype = {
//屬性
//some code
//方法
//some code
}
三.一些方法的實現(xiàn)
我們在這里沒有使用閉包然后立即執(zhí)行，所以才需要一個初始化函數(shù)將屬性都初始化，在init中：
init:function(ela,elb,paramObj){
//一般在插件中都會有個配置對象，并且有默認(rèn)值
this.defaultOptions = {
curClass:"current",
type:"mouseover",
delay:150
}
//然后我們會去檢測用戶有沒有傳入配置參數(shù)，有的話就要使用用戶的配置，這里使用到一個extend方法
this.options = this.extend(this.defaultOptions, paramObj || {})
}
extend實際是一個對象拓展方法，將b對象的屬性覆蓋到a對象中，在JQ里直接寫好了這種方法，但js里沒有，需要我們自己去模擬，我們將這個方法寫在init外面
extend:function(a,b){
for(var i in b){
//這個是檢測for循環(huán)到的屬性是不是b自身的
if(b.hasOwnProperty(i)){
a[i] = b[i]
}
}
return a;
}
后面init里就是一些基本的屬性，比如獲取導(dǎo)航欄的DOM，內(nèi)容塊的DOM，以及他們的子元素還有子元素的個數(shù)，后面遍歷會用到，具體可在文章附的源碼里去看。最后我們要在init中給每個導(dǎo)航綁定事件，一個是觸發(fā)，一個是取消，取消自然就是onmouseout，觸發(fā)的話可以傳入?yún)?shù)來制定，使用中括號可以解決這個問題
