How to write jQuery plugin?

开始写第一个插件

代码位于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应用此插件,以便写更少代码,完成更多功能

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

上一篇: 最后文章