插件顧名思義就是能在一個頁面多處使用, 各自按自己的參數(shù)配置運行, 并且相互不會沖突.
會寫javascript插件是進階js高級的必經之路, 也是自己所學知識的一個典型的綜合運用. 如果你還沒頭緒, 無從下手的話, 不用著急, 今天我們就一起來探討一下插件的一般寫法.
所需技能：

1.面向對象用法
2.閉包的理解
3.變量作用域的理解

以一個tab選項卡的為例:

第一步:

  我們需要寫html結構, 假設結構如下:

html結構:


    
新聞
    
生活
    
體育
    
抽獎


    

        新聞
    
    

        生活
    
    

        體育
    
    

        抽獎
    

第二步:

 寫css代碼, 這個在這里就省去了, 具體大家自己可以去寫下, 簡單. 具體看截圖.
 

第三步:

 寫js代碼了.

 大概就分為這三步, 其中第三步是核心. 當然前兩步也是很重要的, 結構的好壞會直接影響你的js實現(xiàn)方式.

主結構:
           
            //構造函數(shù), 以后每一個tab選項卡的實例都是由他來實例化的.
            function Tab(){
                //some code
            }
            //對象原型, 這里主要是一些功能方法.
            Tab.prototype = {
                //some code
            
            }
            
            用法:
            new Tab("tab_nav", "tabs", {可選參數(shù)}); //實例一個選項卡, 傳入一些參數(shù), 實現(xiàn)一些效果
            new Tab("tab_nav2", "tabs2", {可選參數(shù)}); //實例第二個選項卡, 傳入一些參數(shù), 實現(xiàn)一些效果
            ...
復制代碼
 

以上就是tab選項卡插件的主結構, 下面我們來具體實現(xiàn).

 

復制代碼
 js代碼:

    function Tab(){
        this.init.apply(this, arguments); //用init函數(shù)初始化對象屬性
    }
    
    Tab.prototype = {
       init: function(ela, elb, paramObj){
       //默認參數(shù)設置, triggerClass:當前選項的class名字, type:鼠標事件, delay:這個主要針對mouseover快速劃過去的一個延時處理
        this.defaultOptions = {
            triggerClass    : "current",
            type            : "mouseover",
            delay           : 150
        };
        
        this.options        = this.extend(this.defaultOptions, paramObj || {});
        this.oa             = document.getElementById(ela);
        this.ob             = document.getElementById(elb);
        this.triggerItem    = this.oa.children;
        this.listItem        = this.ob.children;
        this.tLen            = this.triggerItem.length;
        this.arr            = [];
        this.timer            = null;
        this.isIE             = !-[1,]; //判斷IE瀏覽器
        var self = this;
        this.options.delay = this.options.type === "click" ? 0 : this.options.delay; //當type為click時, 就無延時, 反之則延時
        //ie下過濾注釋節(jié)點
        if(this.isIE){
            for(var i = 0, len = this.listItem.length; i < len; i++){
                if(this.listItem[i].nodeType === 1){
                    this.arr.push(this.listItem[i]);
                }
            }
        }
        for(var i = 0; i < this.tLen; i++){
            this.triggerItem[i]["on" + this.options.type] = this.change(i); //綁定事件
            this.triggerItem[i].onmouseout = function(){clearTimeout(self.timer); self.timer = null;}; //綁定事件
        }
    },
    extend: function(source, target){ //屬性合并處理
        for(var p in target){
            if(target.hasOwnProperty(p)){
                source[p] = target[p];
            }
        }
        return source;
    },
    trim: function(str){
        return str.replace(/^s+/g, "").replace(/s+$/g, "");
    },
    addClass: function(el, name){ //定義添加class函數(shù), addClass(元素對象, class名字)
        var arr = [],
                str = el.className,
                arr = str.split(/s+/),
                len = arr.length,
                name = this.trim(name);
        for(var i = 0; i < len; i++){
            if(arr[i] === name){
                return;
            }
        }
        arr.splice(len, 1, name);
        el.className = this.trim(arr.join(" "));
        el = null;
    },
    removeClass: function(el, name){ //定義移除class函數(shù), removeClass(元素對象, class名字)
        var arr = [],
                str = el.className,
                arr = str.split(/s+/),
                len = arr.length,
                name = this.trim(name);
        for(var i = 0; i < len; i++){
            if(arr[i] === name){
                arr.splice(i,1);
                el.className=arr.join(" ");
                return;
            }
        }
    },
    change: function(d){ //選項卡實現(xiàn)
        var self = this;
        return function(){
            self.timer = setTimeout(function(){
                for(var i = 0; i < self.tLen; i++){
                    if(i === d){
                        self.addClass(self.triggerItem[d], self.options.triggerClass);
                        self.isIE ? self.arr[d].style.display = "block" : self.listItem[d].style.display = "block";
                    }
                    else{
                        self.removeClass(self.triggerItem[i], self.options.triggerClass);
                        self.isIE ? self.arr[i].style.display = "none" : self.listItem[i].style.display = "none";
                    }
                }
            }, self.options.delay);
        }
    }
  }
復制代碼
用法:
    new Tab("tab_nav", "tabs", {type:"click"});
    new Tab("tab_nav2", "tabs2", {triggerClass:"trigger"});
    new Tab("tab_nav3", "tabs3", {type:"mouseover", delay:200});

怎么樣，很簡單吧，只要思路打開了，就很容易實現(xiàn)了。還有很多其他的方式，有興趣的大家自己研究研究。
轉自http://www.cnblogs.com/tinkbe...