[js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

jquery插件一般是这么干的： $.fn.插件名称 = function(){}， 把插件的名称加在.fn上，在源码里面实际上是扩展到构造函数的原型对象上，如果你没看过jquery的源代码，或者你曾经看过，但是不知道为什么把插件扩展到fn上，那么本篇文章就能解答你的疑惑。关于jquery插件开发方式，可以参考我的这篇文章：[js高手之路]jquery插件开发实战-选项卡详解

关于选项卡这个功能具体怎么做，不在这里详解，这个是入门级的功能，本文重在讨论插件开发的架构，扩展，以及参数设置。

如果你使用过jquery的选项卡插件，或者其他类型的插件，他们一般都是这么调用的：

$( ".tab" ).tabs( {} )

$(".tab").tabs( function(){} );

一种是传递参数定制插件行为

一种是传递函数定制插件行为

$(".tab") 选择到元素，然后返回的是jquery对象

tabs方法扩展在fn上就是扩展都jquery构造函数的原型对象上， 那么对象( $(".tab") )调用原型对象上的方法( tabs )当然就顺利成章了。

所以jquery插件扩展本质就是： 构造函数 + 原型对象扩展方法

定义一个构造+原型的方式，下面代码的原理，我在这篇文章有详细论述：[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

var G = function( selectors, context ){
        return new G.fn.init( selectors, context );
    }
    G.fn = G.prototype = {
        length : 0,
        constructor : G,
        size : function(){
            return this.length;
        },
        init : function( selector, context ){
            this.length = 0;
            context = context || document;
            if ( selector.indexOf( '#' ) == 0 ){
                this[0] = document.getElementById( selector.substring( 1 ) );
                this.length = 1;
            }else {
                var aNode = context.querySelectorAll( selector );
                for( var i = 0, len = aNode.length; i < len; i++ ) {
                    this[i] = aNode[i];
                }
                this.length = len;
            }
            this.selector = selector;
            this.context = context;
            return this;
        }
    }

    G.fn.init.prototype = G.fn;

接下来，我们还要添加一个插件扩展机制：

G.extend = G.fn.extend = function () {
        var i = 1,
            len = arguments.length,
            dst = arguments[0],
            j;
        if (dst.length === undefined) {
            dst.length = 0;
        }
        if (i == len) {
            dst = this;
            i--;
        }
        for (; i < len; i++) {
            for (j in arguments[i]) {
                dst[j] = arguments[i][j];
                dst.length++;
            }
        }
        return dst;
    };

在这篇文章：[js高手之路] 设计模式系列课程 - jQuery的extend插件机制 有详细的论述，extend插件扩展机制

像使用jquery一样暴露接口：

var $ = function( selectors, context ){
    return G( selectors, context );
}
window.$ = $;

这个插件的扩展机制和元素选择机制就完成了，如果要扩展插件，只要在

G.fn上扩展插件的名称即可，如:

G.fn.tabs = function( options ){
    options = options || {};
    var defaults = {
        contentClass : 'tab-content',
        navClass : 'tab-nav',
        activeClass : 'active',
        triggerElements : '*',
        activeIndex : 0,
        evType : 'click',
        effect : 'none'
    };

    var opt = G.extend( {}, defaults, options );
    return this;
}

这样，我们就在G的原型对象上扩展了一个tabs( 选项卡 )插件

options可以定制插件的行为：

contentClass : 'tab-content',     选项卡内容区域的class名称
navClass : 'tab-nav',             标签卡区域的class名称 
activeClass : 'active',           标签卡默认选择的class名称:active
triggerElements : '*',            标签卡默认触发元素
activeIndex : 0,                  默认选中第几个标签卡
evType : 'click',                 选项卡触发的事件类型
effect : 'none'                   是否有过渡特效：如透明度


var opt = G.extend( {}, defaults, options );

这一段是把定制的配置和默认配置合成到一个对象opt里面，后面的插件行为，就可以根据opt的配置进行定制，这是插件开发参数定制中，常用的一招。

这样做的好处，可以防止污染默认配置defaults

 var tabContent = this[0].querySelector( "." + opt.contentClass );
        var tabContentEle = tabContent.children;
        var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements );

        var _contentLen = tabContentEle.length;
        var _index = opt.activeIndex;

获取对应的元素。

有了选项卡的元素和配置，我们就开始做业务处理（为所有选项卡添加处理的事件，进行选项卡切换）

定义一个专门的对象_api = {}， 扩展业务api

G.fn.tabs = function( options ){
        options = options || {};
        var defaults = {
            contentClass : 'tab-content',
            navClass : 'tab-nav',
            activeClass : 'active',
            triggerElements : '*',
            activeIndex : 0,
            evType : 'click',
            effect : 'none'
        };

        var opt = G.extend( {}, defaults, options );

        var tabContent = this[0].querySelector( "." + opt.contentClass );
        var tabContentEle = tabContent.children;
        var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements );

        var _contentLen = tabContentEle.length;
        var _index = opt.activeIndex;

        var _api = {};

        _api.setIndex = function( index ){
            //当前标签加上active样式，其余标签删除active样式
            for ( var i = 0; i < _contentLen; i++ ) {
                if ( tabNavEle[i].classList.contains( 'active' ) ) {
                    tabNavEle[i].classList.remove('active');
                }
            }
            tabNavEle[index].classList.add( 'active' );
            switch ( opt.effect ){
                case 'fade':
                    break;
                default:
                    for ( var i = 0; i < _contentLen; i++ ) {
                        tabContentEle[i].style.display = 'none';
                    }
                    tabContentEle[index].style.display = 'block';
                    _index = index;
            }
        }

        _api.setIndex( _index ); //默认的选项卡

        //所有的标签绑定事件
        for( var i = 0, len = tabNavEle.length; i < len; i++ ) {
            tabNavEle[i].index = i;
            tabNavEle[i].addEventListener( opt.evType, function(){
                var i = this.index;
                _api.setIndex( i );
            }, false );
        }

        return this;
    }

完整的插件代码：

/**
 * Created by ghostwu(吴华).
 */
(function(){
    var G = function( selectors, context ){
        return new G.fn.init( selectors, context );
    }
    G.fn = G.prototype = {
        length : 0,
        constructor : G,
        size : function(){
            return this.length;
        },
        init : function( selector, context ){
            this.length = 0;
            context = context || document;
            if ( selector.indexOf( '#' ) == 0 ){
                this[0] = document.getElementById( selector.substring( 1 ) );
                this.length = 1;
            }else {
                var aNode = context.querySelectorAll( selector );
                for( var i = 0, len = aNode.length; i < len; i++ ) {
                    this[i] = aNode[i];
                }
                this.length = len;
            }
            this.selector = selector;
            this.context = context;
            return this;
        }
    }

    G.fn.init.prototype = G.fn;
    G.extend = G.fn.extend = function () {
        var i = 1,
            len = arguments.length,
            dst = arguments[0],
            j;
        if (dst.length === undefined) {
            dst.length = 0;
        }
        if (i == len) {
            dst = this;
            i--;
        }
        for (; i < len; i++) {
            for (j in arguments[i]) {
                dst[j] = arguments[i][j];
                dst.length++;
            }
        }
        return dst;
    };

    G.fn.tabs = function( options ){
        options = options || {};
        var defaults = {
            contentClass : 'tab-content',
            navClass : 'tab-nav',
            activeClass : 'active',
            triggerElements : '*',
            activeIndex : 0,
            evType : 'click',
            effect : 'none'
        };

        var opt = G.extend( {}, defaults, options );

        var tabContent = this[0].querySelector( "." + opt.contentClass );
        var tabContentEle = tabContent.children;
        var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements );

        var _contentLen = tabContentEle.length;
        var _index = opt.activeIndex;

        var _api = {};

        _api.setIndex = function( index ){
            //当前标签加上active样式，其余标签删除active样式
            for ( var i = 0; i < _contentLen; i++ ) {
                if ( tabNavEle[i].classList.contains( 'active' ) ) {
                    tabNavEle[i].classList.remove('active');
                }
            }
            tabNavEle[index].classList.add( 'active' );
            switch ( opt.effect ){
                case 'fade':
                    break;
                default:
                    for ( var i = 0; i < _contentLen; i++ ) {
                        tabContentEle[i].style.display = 'none';
                    }
                    tabContentEle[index].style.display = 'block';
                    _index = index;
            }
        }

        _api.setIndex( _index ); //默认的选项卡

        //所有的标签绑定事件
        for( var i = 0, len = tabNavEle.length; i < len; i++ ) {
            tabNavEle[i].index = i;
            tabNavEle[i].addEventListener( opt.evType, function(){
                var i = this.index;
                _api.setIndex( i );
            }, false );
        }

        return this;
    }

    var $ = function( selectors, context ){
        return G( selectors, context );
    }
    window.$ = $;
})();

选项卡布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <!--作者:ghostwu(吴华)-->
    <meta charset="UTF-8">
    <title>选项卡插件 - by ghostwu</title>
    <link rel="stylesheet" href="css/tab.css"/>
    <script src="./js/tab.js"></script>
    <script>
        window.onload = function () {
//            console.log( $(".tab1 .tab-nav li") );
//            $( ".tab1" ).tabs( { 'evType' : 'mouseenter' } );
            $( ".tab1" ).tabs();
        }
    </script>
</head>
<body>
<div class="main">
    <div class="tab tab1">
        <ul class="tab-nav">
            <li class="active"><a href="javascript:;">标签1</a></li>
            <li><a href="javascript:;">标签2</a></li>
            <li><a href="javascript:;">标签3</a></li>
            <li><a href="javascript:;">标签4</a></li>
        </ul>
        <div class="tab-content">
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </div>
    </div>
</div>
</body>
</html>

选项卡插件样式：

* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 14px;
    font-family: Tahoma, Verdana,"Microsoft Yahei";
}
a{
    text-decoration: none;
    color:#000;
}
ul,li{
    list-style-type: none;
}
img {
    border:none;
}
.main {
    width:960px;
    margin:20px auto;
}
.tab{
    margin: 0 auto 20px;
}
.tab1 .tab-nav{
    margin-bottom:8px;
}
.tab .tab-nav {
    overflow:hidden;
}
.tab1 .tab-nav .active{
    border-bottom:1px solid #000;
}
.tab1 .tab-nav li {
    float:left;
    margin:0 10px;
}
.tab1 .tab-nav li a {
    line-height:40px;
    display:block;
}
.tab1 .tab-content {
    height:250px;
    overflow:hidden;
}
.tab1 .tab-content p {
    height:250px;
    background:#eee;
}

最终效果：