How to write jQuery plugin?

什么是Tab？

jquery-plugin-1

看一下小灰灰的tab v1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0; 
        padding: 0;
        list-style: none;
    }
    #tab {
        width: 600px;
        height: 300px;
        border: 1px solid #ccc;
    }
    #tab > div{
        display: none;
    }
    #tab_btn {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
    #tab_btn li {
        float: left;
        width: 200px;
        text-align: center;;
    }
    #tab_btn li.on{
        background: #ccc;
    }
    </style>
</head>
<body>
    <div id="tab">
        <ul id="tab_btn">
            <li class="on">选项卡一</li>
            <li>选项卡二</li>
            <li>选项卡三</li>
        </ul>

        <div style="display:block">我是第一个内容</div>
        <div>我是第二个内容</div>
        <div>我是第三个内容</div>
    </div>
    <script src="../lib/jquery-1.10.2.min.js"></script>
    <script>
    $('#tab_btn li').on('mouseover', function (){
        $('#tab_btn li').removeClass('on');
        $(this).addClass('on');

        $('#tab div').hide();
        $('#tab div').eq($(this).index()).show();
    })
    </script>
</body>
</html>

它有几个明显问题

样式与js代码没有和html分离
tab功能实现里，但无法复用，因为他用的是id方式
tab的骨架html模板也不合理

狮子的故事

曾经有一个小伙伴，写下来这样的代码


    选项卡一
    选项卡二
    选项卡三

然后我在读css代码的时候，发现

.lion {
    ...
}

我看了很久，lion是狮子的意思，那这里呢？

后来才明白，原来是li on的意思，也就是选中的tab的状态是on。

命名是非常容易闹笑话的，其实，这里用active更合适

看一下小灰灰的tab v2

提取css和js的部分不是本章重点，下面比较一下重构后的tab骨架结构

之前的tab骨架


    
        选项卡一
        选项卡二
        选项卡三
    

    我是第一个内容
    我是第二个内容
    我是第三个内容

重构后的代码

这样的代码结构是不是更为清晰呢？

重构行内样式

还有点小瑕疵，下面代码用了行内样式


    我是第一个内容

修改如下

// html

    我是第一个内容


// css
.tab_content .active{
    display:block;
}

把行内样式抽象成状态，继而让代码更具可读性

v2的js

结构改了，js也一定做了修改，tab.js具体内容如下：

;$(function(){
    $('.tab_header li').on('mouseover', function (){
        $('.tab_header li').removeClass('active');
        $(this).addClass('active');

        $('.tab_content div').hide();
        $('.tab_content div').eq($(this).index()).show();
    })
});

点评

v2的js只是根据tab的骨架接口修改而进行了简单修改，主要是dom selector的修改

没有什么特别值得说明的。

让我们看看一个页面多个tab，它如何？

详见 jQuery.tab_more.html

出现的问题是在第二个tab上滑动的时候，更新的是第一个tab content，这是为什么呢？

答：js代码写的太随意，没有注意控制组件自身管控范围

不严谨是写代码的大忌

上一篇: jQuery支持2种插件方式下一篇: 开始写第一个插件

目录