談談javascript插件的寫法

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

 

所需技能：
    1.面向對象用法
    2.閉包的理解
    3.變量作用域的理解

以一個tab選項卡的為例:

第一步:

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

html結構:

<ul id="tab_nav">
    <li class="current">新聞</li>
    <li>生活</li>
    <li>體育</li>
    <li>抽獎</li>
</ul>
<div id="tabs">
    <div class="tab_items">
        新聞
    </div>
    <div class="tab_items off">
        生活
    </div>
    <div class="tab_items off">
        體育
    </div>
    <div class="tab_items off">
        抽獎
    </div>
</div>

 

第二步:

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

 

　　

　　

第三步:

     寫js代碼了.

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

 

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

 

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

 

 js代碼:

    function Tab(){
        this.init.apply(this, arguments); //用init函數初始化對象屬性
    }
    
    Tab.prototype = {
       init: function(ela, elb, paramObj){
       //默認參數設置, 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下過濾注釋節點
        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函數, 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函數, 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){ //選項卡實現
        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});

 

怎么樣，很簡單吧，只要思路打開了，就很容易實現了。還有很多其他的方式，有興趣的大家自己研究研究。