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)

坚持原创技术分享,您的支持将鼓励我继续创作!