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