jQuery的插件，扩展

发表于 | 更新于 | 分类于 |

在模块化编程中，对于组件的重复利用。可以减少代码量，提高工作效率。提高代码的易读性。
举个例子：就好比一个牛奶工厂，进去的是鲜牛奶，出来就是什么雪糕，酸奶，等奶制品。
模块化就好比牛奶工厂，当初费点力气建好，到后来就只需要鲜牛奶就能生产了工作。节约了时间。
当然在代码中那天要用到就直接把，编写好的js直接拿过来用。

前面说了这么多。

下面是一个图片预加载的jQuery插件
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

(function($) {                                                    //闭包区域，防止插件"污染"。$传递$让jQuery能用。
  function PreLoad(imgs, options) {                               //定义一个preLoad函数传递。imgs。options
    this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;       //判断imgs类型
    this.opts = $.extend({}, PreLoad.DEFAULTS, options);          //给opts赋一个PreLoad.DEFAULTS对象。
    //判断是否，有序加载，还是无序加载。
    if (this.opts.order === "ordered") {
      this._ordered()
    } else {
      this._unordered();
    }
  }       
  //默认参数
  PreLoad.DEFAULTS = {
    order: 'unordered',            		 	 //无序预加载
    each: null,                     		 //每张图片加载完毕后执行
    all: null                       		 //所有图片加载完后执行
  };
  PreLoad.prototype._unordered = function(){   //无序加载定义到prototype中。
    var imgs = this.imgs,
        opts = this.opts,
        count = 0,
        len = imgs.length;
    $.each(imgs, function(i, src) {
      if (typeof src != 'string') {
        return;
      }
      var imgObj = new Image();                   //实例化image对象。为了给imgObj添加’load’事件。
      $(imgObj).on('load error', function() {     //添加 error 不管图片是否加载完成都继续执行，反之。
        opts.each && opts.each(count);
        if (count >= len - 1) {
          opts.all && opts.all();
        }
        count++;
      });
      imgObj.src = src;
    });
  };
  PreLoad.prototype._ordered = function() {   //有序加载
    var opts = this.opts,
        imgs = this.imgs,
        len = imgs.length,
        count = 0;
        load();

        function load() {
          var imgObj = new Image();
          $(imgObj).on('load error', function() {   
              opts.each && opts.each(count);
              if (count >= len) {
                //所有图片已经加载完毕
                opts.all && opts.all();
              } else {
                load();
              }
              count++;
          });
          imgObj.src = imgs[count];
        }
  }
  $.extend({                             //把preload插件放入jQuery中
    preload: function(imgs, opts) {
      new PreLoad(imgs, opts);
    }
  });
})(jQuery);

关于jQuery.fn.extend()和jQuery.extend()

查询了一些资料：

用jQuery.extend()添加的插件。

1
2
3
4
5
6
7
8
9

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

结果:
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

用jQuery.fn.extend()添加的插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

结果:

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

用$.extend创建的插件不需调用一个元素可直接$.min(object)
反之$.fn.extend就需要用到$(Element).chenk(object)