最近挺多人寫jQuery的，都是關於jQuery擴展方面的，使用方面的講的比較多，但是關於詳細的一個基礎的過程講的比較少一點，做web開發的基本上都會用到jQuery，本人就根據jQuery的使用經驗講講插件開發。jQuery插件開發兩種方式：一種是類擴展的方式開發插件，jQuery添加新的全局函數(jQuery的全局函數是屬於jQuery命名空間的函數)，如果將jQuery看成一個類，那么就相當於給jQuery類本身添加方法。第二種是對象擴展的方式開發插件，即jQuery對象添加方法。
類擴展的插件
類擴展的插件開發最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類擴展的插件開發可以采用如下幾種形式進行擴展：
1.添加全局函數
|
1
2
3
|
$.ltrim = function( str ) {
return
str.replace( /^\s+/,
""
);
};
|
調用方式
|
1
2
|
var
str=
" 去除左空格 "
;
console.log(
"去除前:"
+str.length+
"去除后:"
+$.ltrim(str).length);
|
2.添加多個全局函數
|
1
2
3
4
5
6
7
|
$.ltrim = function( str ) {
return
str.replace( /^\s+/,
""
);
};
$.rtrim = function( str ) {
return
str.replace( /\s+$/,
""
);
};
|
上面那種如果你寫的全局函數比較少的情況下使用挺好，如果多的話建議使用 使用$.extend(object)
|
1
2
3
4
5
6
7
8
|
$.extend({
ltrim:function( str ) {
return
str.replace( /^\s+/,
""
);
},
rtrim:function( str ) {
return
str.replace( /\s+$/,
""
);
}
});
|
3.獨立的命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變量名。但是仍然不可避免某些函數或變量名將於其他jQuery插件沖突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。
|
1
2
3
4
5
6
7
8
|
$.myPlugin={
ltrim:function( str ) {
return
str.replace( /^\s+/,
""
);
},
rtrim:function( str ) {
return
str.replace( /\s+$/,
""
);
}
};
|
使用獨立的插件名，可以避免命名空間內函數的沖突，調用方式:
|
1
2
|
var
str=
" 去除左空格 "
;
console.log(
"調用前:"
+str.length+
"調用后:"
+$.myPlugin.ltrim(str).length);
|
對象擴展的插件
1.添加一個對象擴展方法
|
1
2
3
4
5
6
|
$.fn.changeColor=
function
() {
this
.css(
"color"
,
"red"
);
};
$.fn.changeFont=
function
() {
this
.css(
"font-size"
,
"24px"
);
};
|
調用方式:
|
1
2
3
|
$(
function
() {
$(
"a"
).showColor();<br> $(
"div"
).changeFont();
});
|
2.添加多個對象擴展方法
|
1
2
3
4
5
6
7
8
|
(
function
($){
$.fn.changeColor=
function
() {
this
.css(
"color"
,
"red"
);
};
$.fn.changeFont=
function
() {
this
.css(
"font-size"
,
"24px"
);
};
})(jQuery);
|
兼容寫法(防止前面的函數漏寫了；):
|
1
2
3
4
5
6
7
8
|
;(
function
($){
$.fn.changeColor=
function
() {
this
.css(
"color"
,
"red"
);
};
$.fn.changeFont=
function
() {
this
.css(
"font-size"
,
"24px"
);
};
})(jQuery);
|
上面都定義了一個jQuery函數,形參是$，函數定義完成之后,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起沖突.
3. 使用$.fn.extend(object)
題外話，查看jQuery源碼(版本1.11.1)可以看到:
|
1
2
3
4
5
6
|
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
......................
},
|
jQuery是一個封裝得非常好的類，比如語句$("a") 會生成一個 jQuery類的實例。jQuery.fn.extend(object)實際上是對jQuery.prototype進得擴展，就是為jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。
|
1
2
3
4
5
6
7
8
|
$.fn.extend({
changeColor:
function
() {
this
.css(
"color"
,
"red"
);
},
changeFont:
function
() {
this
.css(
"font-size"
,
"24px"
);
}
});
|
介紹了基本是關於對象擴展的基礎的用法，下面開發一個簡單的類似於代碼高亮的功能，如下:
|
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
|
(
function
($) {
$.fn.highlight =
function
(options) {
//插件參數的可控制性，外界可以修改默認參數
var
defaults=$.extend($.fn.highlight.defaults, options );
//遍歷函數，然后根據參數改變樣式
return
this
.each(
function
() {
var
elem = $(
this
);
var
markup = elem.html();
markup = $.fn.highlight.format( markup );
elem.html(markup);
elem.css({
color: defaults.color,
fontSize:defaults.fontSize,
backgroundColor: defaults.backgroundColor
});
});
};
//參數默認值
$.fn.highlight.defaults={
color:
"#556b2f"
,
backgroundColor:
"white"
,
fontSize:
"48px"
};
//格式化字體
$.fn.highlight.format =
function
( txt ) {
return
"<strong>"
+ txt +
"</strong>"
;
};
})(jQuery);
$(
function
() {
//調用插件
$(
"a"
).highlight({color:
"red"
,fontSize:
"24px"
});
});
|
小結
jQuery這兩種插件開發的使用，需要根據開發過程中的具體情況而定，第一種類擴展的方法類似於C#添加一個靜態方法，第二種對象擴展主要是根據自己的實際業務而確定的，你的網站有些地方常用的功能肯定可以自己寫成一個插件，比如說圖片的查看，側邊欄的點擊，有的時候你同樣可以研究網上別人寫的插件，也可以學到不少東西.