How to write jQuery plugin?

什么是Tab?

jquery-plugin-1

看一下小灰灰的tab v1

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

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代码写的太随意,没有注意控制组件自身管控范围

不严谨是写代码的大忌

上一篇: 下一篇: