【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

虽然现在有大量的插件可供我们选择使用,但实际开发过程中,使用别人的插件难免会带来问题,比如

  • 插件功能强大,代码行数也随着激增,但是我们只使用其中一小部分。
  • 使用别人的插件,很难看懂别人的代码,特别是压缩成min.js,为后期维护,需求变更等带来很严重问题。
  • 同样想在现有插件上做进一步开发也没那么容易。
  • 装逼

所以学习jQuery插件开发很有必要。

###自定义插件的类型

自定义插件的类型主要有两种(我猜的),分别是级别插件和对象级别插件。当然还有一种通过工厂模式生产的,基本上没人用,所以就不管了。

####1. 类级别插件

类级别插件比较简单,通过$.extend()直接给jQuery添加静态方法,通过$.extend()来扩展,调用方法形如

$.ajax(),$.trim(),$.each()等。

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$.extend({
pluginName: function(str) {
str = (str ? str : 'helloWorld');
alert(str);
}
})
$.pluginName();
$.pluginName('helkyle');
</script>

不出意外地话,窗口会弹出两个alert。类级别插件通常适合用来封装一下方法。更常见的jQuery插件是对象级别的插件。

####2.对象级别插件
对象级别插件调用方法为首先通过jquery选择器获取对象并为对象添加方法,然后把方法封装成一个插件,这种插件使用很广泛,使用简单。形如:

1
2
3
4
5
$("selector").pluginName({
option1: "option1",
option2: "option2",
...
});

插件大概长这样

1
2
3
$.fn.pluginName = function(options) {
you code...
}

我们的重点放在对象级别的插件开发,后面会补上一个完整的插件案例(如果可以的话)

###插件开发要点

  • 命名规则通常为jQuery.pluginName.js,压缩过后的文件为jQuery.pluginName.min.js。
  • 为了尽量避免其它代码冲突,通常把jQuery当成函数参数传递。

    1
    2
    3
    (function($) {
    your code...
    })(jQuery);
  • 通常会在插件开始前增加一个分号’;’,这样做的目的是避免其它文件最后的语句忘记添加’;’的时候报错。

    1
    2
    3
    ;(function($) {
    your code...
    })(jQuery);
  • 为了保证链式调用,我们需要插件本身放回一个jQuery对象。

    1
    2
    3
    4
    5
    ;(function($) {
    $.fn.pluginName = function(options) {
    return this...;
    }
    })(jQuery);
  • 又为了避免使用者调用的时候是使用类名.className(可能传过来一个集合),我们需要做多一步。

    1
    2
    3
    4
    5
    6
    7
    ;(function($) {
    $.fn.pluginName = function(options) {
    return this.each(function() {
    your code...
    });
    }
    })(jQuery);
  • 为了避免名称空间污染,通常表现为,你定义了一个全局变量,而别人在开发的时候也定义了一个相同名字的变量,一不小心就出大问题,所以插件改成带有匿名闭包的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ;(function($) {
    var Plugin = function(options) {
    }
    Plugin.prototype = {
    fun1: function() {
    },
    fun2: function() {
    }
    your code ...
    }
    $.fn.pluginName = function(options) {
    return this.each(function() {
    return new Plugin(options);
    });
    }
    })(jQuery);
  • 通常选择为插件配置默认参数,代码执行完,会把this.defaults 和 options合并,合并规则为options的参数会替换掉defaults中的值,如果只传部分值,则只替换部分,其余的使用defaults的值,最后合并完的结果并到匿名变量’{}‘,传给this.options,这样可以保证defaults的值不会被改动。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    ;(function($) {
    var Plugin = function(options) {
    this.defaults = {
    'color': 'red',
    'fontSize': '12px',
    'textDecoration': 'none'
    },
    this.options = $.extend({}, this.defaults, options)
    }
    Plugin.prototype = {
    fun1: function() {
    },
    fun2: function() {
    }
    your code ...
    }
    $.fn.pluginName = function(options) {
    return this.each(function() {
    return new Plugin(options);
    });
    }
    })(jQuery);

暂时先写这么多,因为怕自己会忘记所以写得比较啰嗦~~~

如需转载,请注明出处: http://w3ctrain.com / 2014/06/01/jQuery-plugin-develop1/