开始写第一个插件

代码位于plugin_first

plugin_first

让我们动手改造一下tab.js吧：

代码

;(function($) { 

    $.fn.tab = function(options) {
        // 将defaults 和 options 参数合并到{}
        var opts = $.extend({},$.fn.tab.defaults,options);

        return this.each(function() {
            var obj = $(this);

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

                $(obj).find('.tab_content div').hide();
                $(obj).find('.tab_content div').eq($(this).index()).show();
            })      
        });
        // each end
    }

    //定义默认
    $.fn.tab.defaults = {

    };

})(jQuery);

这段代码除了套用jQuery plugin模板外，就是几处select变成基于obj的查找的selector，其他与之前无异。

是不是很简单？

解释一下配置项

// 将defaults 和 options 参数合并到{}
var opts = $.extend({},$.fn.tab.defaults,options);

缓存this

// 将defaults 和 options 参数合并到{}
var obj = $(this);

调用方式

<script>
    $(function(){
        $('.tab').tab();
    });
</script>

是不是更简单？

jQuery plugin template

;(function($) { 

    $.fn.XXXXXX = function(options) {
        // 将defaults 和 options 参数合并到{}
        var opts = $.extend({},$.fn.XXXXXX.defaults,options);

        return this.each(function() {
            var obj = $(this);

            ...
        });
        // each end
    }

    //定义默认
    $.fn.XXXXXX.defaults = {

    };

})(jQuery);

插件特点

1、有默认项

$.fn.XXXXXX.defaults

2、基于selector

return this.each(function() {
    var obj = $(this);

    ...
});

解读：

• 有默认项，是约定大约配置，让用户用的时候如果没有个性化需求，可以很简单，安装插件的默认配置走，如果有个性化需求，修改配置项，同样很简单
• 基于selector意味着你可以复用，给tag或class应用此插件，以便写更少代码，完成更多功能

亲，你明白插件的好处了么？如果没明白继续往下看