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

1.面向?qū)ο笥梅?2.閉包的理解
3.變量作用域的理解

以一個(gè)tab選項(xiàng)卡的為例:

第一步:

  我們需要寫html結(jié)構(gòu), 假設(shè)結(jié)構(gòu)如下:

html結(jié)構(gòu):


    
新聞
    
生活
    
體育
    
抽獎(jiǎng)


    

        新聞
    
    

        生活
    
    

        體育
    
    

        抽獎(jiǎng)
    

第二步:

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

第三步:

 寫js代碼了.

 大概就分為這三步, 其中第三步是核心. 當(dāng)然前兩步也是很重要的, 結(jié)構(gòu)的好壞會(huì)直接影響你的js實(shí)現(xiàn)方式.

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

以上就是tab選項(xiàng)卡插件的主結(jié)構(gòu), 下面我們來具體實(shí)現(xiàn).

 

復(fù)制代碼
 js代碼:

    function Tab(){
        this.init.apply(this, arguments); //用init函數(shù)初始化對象屬性
    }
    
    Tab.prototype = {
       init: function(ela, elb, paramObj){
       //默認(rèn)參數(shù)設(shè)置, triggerClass:當(dāng)前選項(xiàng)的class名字, type:鼠標(biāo)事件, delay:這個(gè)主要針對mouseover快速劃過去的一個(gè)延時(shí)處理
        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; //當(dāng)type為click時(shí), 就無延時(shí), 反之則延時(shí)
        //ie下過濾注釋節(jié)點(diǎn)
        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àng)卡實(shí)現(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);
        }
    }
  }
復(fù)制代碼
用法:
    new Tab("tab_nav", "tabs", {type:"click"});
    new Tab("tab_nav2", "tabs2", {triggerClass:"trigger"});
    new Tab("tab_nav3", "tabs3", {type:"mouseover", delay:200});

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