谈谈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});

 

怎么样，很简单吧，只要思路打开了，就很容易实现了。还有很多其他的方式，有兴趣的大家自己研究研究。