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