如今做web開發，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內置web項目裏了。至於使用jquery好處這裏就不再贅述了，用過的都知道。今天我們來討論下jquery的插件機制，jquery有着成千上萬的第 三方插件，有時我們寫好了一個獨立的功能，也想將其與jquery結合起來，可以用jquery鏈式調用，這就要擴展jquery，寫成插件形式了，如下 面就是一個簡單擴展Jquery對象的demo：
|
1
2
3
4
5
6
7
8
9
10
11
|
(function
($) {
$.fn.extend({
"bold":
function
() {
return
this.css({
fontWeight: "bold"
});
}
});
})(jQuery);
|
調用方式：
這是一個非常簡單的擴展。接下來我們一步步來解析上面的代碼。
一、jquery的插件機制
爲了方便用戶創建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一個重載。
jQuery.extend(object) ,一個參數的用於擴展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數，或者叫靜態方法，例如jQuery內置的 ajax方法都是用jQuery.ajax()這樣調用的，有點像 "類名.方法名" 靜態方法的調用方式。下面我們也來寫個jQuery.extend(object)的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
jQuery.extend({
"minValue":
function
(a, b) {
return
a < b ? a : b;
},
"maxValue":
function
(a, b) {
return
a > b ? a : b;
}
});
var
i = 100; j = 101;
var
min_v = $.minValue(i, j);
var
max_v = $.maxValue(i, j);
|
重載版本：
jQuery.extend([deep], target, object1, [objectN])
用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
如果不指定target，則給jQuery命名空間本身進行擴展。這有助於插件作者爲jQuery增加新方法。
如果第一個參數設置爲true，則jQuery返回一個深層次的副本，遞歸地複製找到的任何對象。否則的話，副本會與原對象共享結構。
未定義的屬性將不會被複制，然而從對象的原型繼承的屬性將會被複制。
參數：
deep: 可選。如果設爲true，則遞歸合併。
target: 待修改對象。
object1: 待合併到第一個對象的對象。
objectN: 可選。待合併到第一個對象的對象。
示例1：
合併 settings 和 options，修改並返回 settings。
|
1
2
3
|
var
settings = { validate: false,
limit: 5, name: "foo"
};
var
options = { validate: true,
name: "bar"
};
jQuery.extend(settings,
options);
|
結果：
|
1
|
settings
== { validate: true,
limit: 5, name: "bar"
}
|
示例2：
合併 defaults 和 options, 不修改 defaults。
|
1
2
3
4
|
var
empty = {};
var
defaults = { validate: false,
limit: 5, name: "foo"
};
var
options = { validate: true,
name: "bar"
};
var
settings = jQuery.extend(empty, defaults, options);
|
結果：
|
1
2
|
settings
== { validate: true,
limit: 5, name: "bar"
}
empty
== { validate: true,
limit: 5, name: "bar"
}
|
這個重載的方法，我們一般用來在編寫插件時用自定義插件參數去覆蓋插件的默認參數。
jQuery.fn.extend(object)擴展 jQuery 元素集來提供新的方法（通常用來製作插件）。
首先我們來看fn 是什麼東西呢。查看jQuery代碼，就不難發現。
|
1
2
3
|
jQuery.fn
= jQuery.prototype = {
init:
function(
selector, context ) {.....};
};
|
原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我 們知道擴展原型上的方法，就相當於爲對象添加"成員方法"，類的"成員方法"要類的對象才能調用，所以使用 jQuery.fn.extend(object)擴展的方法， jQuery類的實例可以使用這個"成員函數"。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要區分開來。
二、自執行的匿名函數/閉包
1. 什麼是自執行的匿名函數?
它是指形如這樣的函數:
2. 疑問 爲什麼(function {// code})();可以被執行, 而function {// code}();卻會報錯?
3. 分析
(1). 首先, 要清楚兩者的區別:
(function {// code})是表達式, function {// code}是函數聲明.
(2). 其次, js"預編譯"的特點:
js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表式.
(3). 當js執行到function() {//code}();時, 由於function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;
當js執行到(function {// code})();時, 由於(function {// code})是表達式, js會去對它求解得到返回值, 由於返回值是一 個函數, 故而遇到();時, 便會被執行.
另外， 函數轉換爲表達式的方法並不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
例如：
bootstrap 框架中的插件寫法：
和
|
1
2
3
|
(function($){
})(jQuery);
|
是一回事。
匿名函數最大的用途是創建閉包（這是JavaScript語言的特性之一），並且還可以構建命名空間，以減少全局變量的使用。
例如：
|
1
2
3
4
5
|
var
a=1;
(function()(){
var
a=100;
})();
alert(a);
|
三、一步一步封裝JQuery插件
接下來我們一起來寫個高亮的jqury插件
1.定一個閉包區域，防止插件"污染"
|
1
2
3
|
(function
($) {
})(window.jQuery);
|
2.jQuery.fn.extend(object)擴展jquery 方法，製作插件
|
1
2
3
4
5
6
7
8
|
(function
($) {
$.fn.extend({
"highLight":function(options){
}
});
})(window.jQuery);
|
3.給插件默認參數，實現 插件的功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
(function
($) {
$.fn.extend({
"highLight":
function
(options) {
var
opts = $.extend({}, defaluts, options);
this.each(function
() {
var
$this
= $(this);
$this.css({
backgroundColor:
opts.background,
color:
opts.foreground
});
});
}
});
var
defaluts = {
foreground:
'red',
background:
'yellow'
};
})(window.jQuery);
|
到這一步，高亮插件基本功能已經具備了。調用代碼如下：
|
1
2
3
|
$(function
() {
$("p").highLight();
});
|
這裏只能 直接調用，不能鏈式調用。我們知道jQuey是可以鏈式調用的，就是可以在一個jQuery對象上調用多個方法，如：
|
1
|
$('#id').css({marginTop:'100px'}).addAttr("title","測試");
|
但是我們上面的插件，就不能這樣鏈式調用了。比如：
|
1
|
$("p").highLight().css({marginTop:'100px'});
|
將會報找不到css方法，原因在與我的自定義插件在完成功能後，沒有將 jQuery對象給返回出來。接下來，return jQuery對象，讓我們的插件也支持鏈式調用。（其實很簡單，就是執行完我們插件代碼的時候將jQuery對像return 出來，和上面的代碼沒啥區別）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
(function
($) {
$.fn.extend({
"highLight":
function
(options) {
var
opts = $.extend({}, defaluts, options);
return
this.each(function
() {
var
$this
= $(this);
$this.css({
backgroundColor:
opts.background,
color:
opts.foreground
});
});
}
});
var
defaluts = {
foreground:
'red',
background:
'yellow'
};
})(window.jQuery);
|
4.暴露公共方法 給別人來擴展你的插件（如果有需求的話）
比如的高亮插件有一個format方法來格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用着根據自己的需求來重寫該format方法，從而是高亮文本可以呈現不同的格式。
|
1
2
3
4
|
$.fn.highLight.format
= function
(str) {
return
"<strong>"
+ str + "</strong>";
}
|
5.插件私有方法
有些時候，我們的插件需要一些私有方法，不能被外界訪問。例如 我們插件裏面需要有個方法 來檢測用戶調用插件時傳入的參數是否符合規範。
6.其他的一些設置，如：爲你的插件加入元數據插件的支持將使其變得更強大。
完整的高亮插件代碼如下：
|
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
|
(function
($) {
$.fn.extend({
"highLight":
function
(options) {
if
(!isValid(options))
return
this;
var
opts = $.extend({}, defaluts, options);
return
this.each(function
() {
var
$this
= $(this);
$this.css({
backgroundColor:
opts.background,
color:
opts.foreground
});
var
markup = $this.html();
markup
= $.fn.highLight.format(markup);
$this.html(markup);
});
}
});
var
defaluts = {
foreground:
'red',
background:
'yellow'
};
$.fn.highLight.format
= function
(str) {
return
"<strong>"
+ str + "</strong>";
}
function
isValid(options) {
return
!options || (options && typeof
options === "object")
? true
: false;
}
})(window.jQuery);
|
調用：
|
1
2
3
4
5
6
7
8
|
$.fn.highLight.format
= function
(txt) {
return
"<em>"
+ txt + "</em>"
}
$(function
() {
$("p").highLight({
foreground: 'orange',
background: '#ccc'
});
});
|
