JS自定义事件之选项卡

自定义事件是一种处理与DOM产生交互的代码逻辑片段之间耦合的很好的架构方法。

一个简单的jQuery插件——选项卡

让ul列表来响应点击事件。当用户点击一个列表项时，给这个列表项添加一个名为active的类，同时将其他列表项中的active类移除：

<ul id="tabs">
    <li data-tab="users">users</li>
    <li data-tab="groups">groups</li>
</ul>
<div id="tabsContent">
    <div data-tab="users">uuuuuuuuuu</div>
    <div data-tab="groups">ggggggggg</div>
</div>

一般处理方式

jQuery.fn.tabs = function(control) {
    var $tabs = $(this),
        $control = $(control);

    $tabs.find('li').click(function() {
        // 从列表项中删除和添加active类
        $tabs.find('li').removeClass('active');
        this.className = 'active';

        // 对应内容的显示
        var tabName = $(this).attr('data-tab');
        $control.find('[data-tab]').hide();
        $control.find('[data-tab="' + tabName +'"]').show();
    });
    
    // 初始化状态
    $tabs.find('li:first').addClass('active');                // 选中选项卡
    $control.find('>[data-tab]').hide().first().show();        // 只显示第一个div

    return this;
};

现在看上去插件没有什么问题。但可以做下列优化：我们给所有的列表项都添加了click事件回调，可以用事件委托来优化它；点击事件回调的实现很臃肿，很难一眼看出发生了什么；最后，如果另一个开发者想要扩展这个插件，他很可能会将其重写。

优化后的代码

使用自定义事件让代码变得更加整洁。

在点击选项卡时触发一个change.tabs事件，并绑定若干回调方法来适当修改active类。

// 自定义事件tabs.change
// 缓存选项卡元素，减少DOM直接查找
jQuery.fn.tabs2 = function(control) {
    var $tabs = $(this),
        $control = $(control),
        $lis = $tabs.find('li');

    // 利用事件委托，监听单击选项卡事件
    $tabs.on('li', 'click', function() {
        // 单击的选项卡的data-tab属性值
        // var tabName = $(this).attr('data-tab');
        var tabName = this.getAttribute('data-tab');        // 自定义属性需要用getAttribute()获取
        // 在单击时触发自定义事件
        $tabs.trigger('change.tabs', tabName);
    });

    // 绑定自定义事件
    // 解耦回调函数，易扩展
    $tabs.bind('change.tabs', function(e, tabName) {
        $lis.removeClass('active').filter('[data-tab="'+ tabName +'"]').addClass('active');
    });

    $tabs.bind('tabs.change', function(e, tabName) {
        $control.find('>[data-tab]').hide();
        $control.find('>[data-tab="'+ tabName +'"]').show();
    });

    // 初始化状态
    var firstName = $lis.first().attr('data-tab');
    $tabs.trigger('tabs.change', firstName);

    return this;
};