前言
最近在折騰jQuery插件，寫成插件的目的就是為了實現功能與項目相分離，使得這個代碼在下一個項目中能直接引用不出錯。這使得我們在寫插件的時候，就得考慮清楚，怎么寫才能使得插件能夠通用、靈活度高、可配置、兼容性好、易用性高、耦合度低等。
接下來就對以下幾種寫法進行分析，前兩個是jQuery插件，后面2個是以對象的形式開發，都類似。而且寫法也很多，我們要懂得這樣寫的利弊。另一篇基礎文章：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
67
68
69
70
71
72
73
74
75
76
77
78
|
(function($, window){
// 初始態定義
var _oDialogCollections = {};
// 插件定義
$.fn.MNDialog = function (_aoConfig) {
// 默認參數，可被重寫
var defaults = {
// string
sId : "",
// num
nWidth : 400,
// bollean
bDisplayHeader : true,
// object
oContentHtml : "",
// function
fCloseCallback : null
};
var _oSelf = this,
$this = $(this);
// 插件配置
this.oConfig = $.extend(defaults, _aoConfig);
// 初始化函數
var _init = function () {
if (_oDialogCollections) {
// 對於已初始化的處理
// 如果此時已經存在彈框，則remove掉再添加新的彈框
}
// 初始化彈出框數據
_initData();
// 事件綁定
_loadEvent();
// 加載內容
_loadContent();
}
// 私有函數
var _initData = function () {};
var _loadEvent = function () {};
var _loadContent = function () {
// 內容（分字符和函數兩種，字符為靜態模板，函數為異步請求后組裝的模板，會延遲，所以特殊處理）
if($.isFunction(_oSelf.oConfig.oContentHtml)) {
_oSelf.oConfig.oContentHtml.call(_oSelf, function(oCallbackHtml) {
// 便於傳帶參函數進來並且執行
_oSelf.html(oCallbackHtml);
// 有回調函數則執行
_oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
});
} else if ($.type(_oSelf.oConfig.oContentHtml) === "string") {
_oSelf.html(_oSelf.oConfig.oContentHtml);
_oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
} else {
console.log("彈出框的內容格式不對，應為function或者string。");
}
};
// 內部使用參數
var _oEventAlias = {
click : 'D_ck',
dblclick : 'D_dbl'
};
// 提供外部函數
this.close = function () {
_close();
}
// 啟動插件
_init();
// 鏈式調用
return this;
};
// 插件結束
})(jQuery, window);
|
調用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var MNDialog = $("#header").MNDialog({
sId : "#footer", //覆蓋默認值
fCloseCallback : dialog,//回調函數
oContentHtml : function(_aoCallback){
_aoCallback(_oEditGrpDlgView.el);
}
}
});
// 調用提供的函數
MNDialog.close;
function dialog(){
}
|
點評
1. 自調用匿名函數
|
1
2
3
|
(function($, window) {
// jquery code
})(jQuery, window);
|
用處：通過定義一個匿名函數，創建了一個“私有”的命名空間，該命名空間的變量和方法，不會破壞全局的命名空間。這點非常有用也是一個JS框架必須支持的功能，jQuery被應用在成千上萬的JavaScript程序中，必須確保jQuery創建的變量不能和導入他的程序所使用的變量發生沖突。
2. 匿名函數為什么要傳入window
通過傳入window變量，使得window由全局變量變為局部變量，當在jQuery代碼塊中訪問window時，不需要將作用域鏈回退到頂層作用域，這樣可以更快的訪問window；這還不是關鍵所在，更重要的是，將window作為參數傳入，可以在壓縮代碼時進行優化，看看jquery.min.js：
|
1
|
(function(a,b){})(jQuery, window); // jQuery被優化為a, window 被優化為 b
|
3. 全局變量this定義
|
1
2
|
var _oSelf = this,
$this = $(this);
|
使得在插件的函數內可以使用指向插件的this
4. 插件配置
|
1
|
this.oConfig = $.extend(defaults, _aoConfig);
|
設置默認參數，同時也可以再插件定義時傳入參數覆蓋默認值
5. 初始化函數
一般的插件會有init初始化函數並在插件的尾部初始化
6. 私有函數、公有函數
私有函數：插件內使用，函數名使用”_”作為前綴標識
共有函數：可在插件外使用，函數名使用”this.”作為前綴標識，作為插件的一個方法供外部使用
7. return this
最后返回jQuery對象，便於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
|
(function($){
$.fn.addrInput = function(_aoOptions){
var _oSelf = this;
_oSelf.sVersion = 'version-1.0.0';
_oSelf.oConfig = {
nInputLimitNum : 9
};
// 插件配置
$.extend(_oSelf.oConfig, _aoOptions);
// 調用這個對象的方法，傳遞this
$.fn.addrInput._initUI.call(_oSelf, event);
$.fn.addrInput._initEvents.call(_oSelf);
// 提供外部函數
this.close = function () {
_close();
}
//返回jQuery對象，便於Jquery的鏈式操作
return _oSelf;
}
$.fn.addrInput._initUI = function(event){
var _oSelf = this,
_oTarget = $(event.currentTarget);
}
$.fn.addrInput._initEvents = function(){}
})(window.jQuery);
|
點評
1. 美觀
插件的方法寫在外部，並通過在插件主體傳遞this的方式調用
2. 定義插件版本號
不過在這里還是沒有用到
3. 關於call
這里的第一個參數為傳遞this，后面的均為參數
語法：
|
1
|
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
|
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。
4. 關於”this”
在插件的方法中，可能有用到指向插件的this、和指向事件觸發的this，所以事件觸發的this用event來獲取:event.cuerrntTarget
- event.currentTarget：指向事件所綁定的元素，按照事件冒泡的方式，向上找到元素
- event.target：始終指向事件發生時的元素
如：
html代碼
|
1
2
3
|
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
|
js代碼
|
1
2
3
4
5
6
7
8
9
10
|
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
|
結果輸出
|
1
2
3
4
5
6
|
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper"><a href="#" id="inner">click here!</a></div>
<a href="#" id="inner">click here!</a>
|
寫法三（原生寫法）
主體結構
|
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
|
var MemberCard = function(_aoOption){
// 配置（默認是從外面傳進來）
_aoOption || (_aoOption = {}) ;
// 初始化函數
_init(this);
}
var _init = function(_aoSelf) {
// 函數執行
_initData(_aoSelf);
// 調用對象的私有方法
_aoSelf._timedHide();
}
var _initData = function ( _aoSelf ) {}
// 私有方法
MemberCard.prototype._timedHide = function(_aoOptions) {
var _oSelf = this;
clearTimeout(this.iHideTimer);
// 使用underscore.js的extend方法來實現屬性覆蓋
var oDefault = extend( { nHideTime: 300 }, _aoOptions );
_oSelf.iHideTimer = setTimeout( function(){
// 調用對象的共有方法
_oSelf.hide();
}, oDefault.nHideTime);
}
// 公有方法
MemberCard.prototype.hide = function(_aoOptions) {}
|
使用
|
1
2
|
var oColleagueCard = new MemberCard({ nHideTime: 200 });
oColleagueCard.hide();
|
點評
1. 關於屬性覆蓋(對象深拷貝)
原生函數實現方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function getType(o){
return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}
function extend(destination,source){
for(var p in source){
if(getType(source[p])=="array"||getType(source[p])=="object"){
destination[p]=getType(source[p])=="array"?[]:{};
arguments.callee(destination[p],source[p]);
}else{
destination[p]=source[p];
}
}
}
|
demo：
|
1
2
3
4
5
6
|
var test={a:"ss",b:[1,2,3],c:{d:"css",e:"cdd"}};
var test1={};
extend(test1,test);
test1.b[0]="change"; //改變test1的b屬性對象的第0個數組元素
alert(test.b[0]); //不影響test，返回1
alert(test1.b[0]); //返回change
|
基於jQuery的實現方法
|
1
|
jQuery.extend([deep], target, object1, [objectN]);
|
用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
如果不指定target，則給jQuery命名空間本身進行擴展。這有助於插件作者為jQuery增加新方法。 如果第一個參數設置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象。否則的話，副本會與原對象共享結構。 未定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。
demo:
|
1
2
|
var options = {id: "nav", class: "header"}
var config = $.extend({id: "navi"}, options); //config={id: "nav", class: "header"}
|
2. 關於this
這個對象的所有方法的this都指向這個對象，所以就不需要重新指定
寫法四
主體結構
|
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
|
function EditorUtil() {
this._editorContent = $( '#editor_content' );
this._picBtn = $( '#project_pic' );
this.ieBookmark = null;
}
EditorUtil.prototype = {
consturctor: EditorUtil,
noteBookmark: function() {
},
htmlReplace: function( text ) {
if( typeof text === 'string' ) {
return text.replace( /[<>"&]/g, function( match, pos, originalText ) {
switch( match ) {
case '<':
return '<';
case '>':
return '>';
case '&':
return '&';
case '"':
return '"';
}
});
}
return '';
},
init: function() {
this._memBtn.bind( 'click', function( event ) {
$(".error_content").hide();
return false;
});
}
};
// 初始化富文本編輯器
var editor = new EditorUtil();
editor.init();
|
點評
寫法四和寫法三其實都差不多，但是你們有沒有看出其中的不一樣呢？
1. 兩種都是利用原型鏈給對象添加方法
寫法三：
|
1
2
|
MemberCard.prototype._timedHide
MemberCard.prototype.hide
|
寫法四：
|
1
2
3
4
5
|
EditorUtil.prototype = {
consturctor: EditorUtil,
noteBookmark: function(){},
htmlReplace: function(){}
}
|
細看寫法四利用“對象直接量”的寫法給EditorUtil對象添加方法，和寫法三的區別在於寫法四這樣寫會造成consturctor屬性的改變
constructor屬性：始終指向創建當前對象的構造函數
每個函數都有一個默認的屬性prototype，而這個prototype的constructor默認指向這個函數。如下例所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function Person(name) {
this.name = name;
};
Person.prototype.getName = function() {
return this.name;
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
// 將上兩行代碼合並就得到如下結果
console.log(p.constructor.prototype.constructor === Person); // true
|
當時當我們重新定義函數的prototype時（注意：和上例的區別，這里不是修改而是覆蓋），constructor屬性的行為就有點奇怪了，如下示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function Person(name) {
this.name = name;
};
Person.prototype = {
getName: function() {
return this.name;
}
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // false
console.log(Person.prototype.constructor === Person); // false
console.log(p.constructor.prototype.constructor === Person); // false
|
為什么呢？
原來是因為覆蓋Person.prototype時，等價於進行如下代碼操作：
|
1
2
3
4
5
|
Person.prototype = new Object({
getName: function() {
return this.name;
}
});
|
而constructor屬性始終指向創建自身的構造函數，所以此時Person.prototype.constructor === Object，即是：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function Person(name) {
this.name = name;
};
Person.prototype = {
getName: function() {
return this.name;
}
};
var p = new Person("ZhangSan");
console.log(p.constructor === Object); // true
console.log(Person.prototype.constructor === Object); // true
console.log(p.constructor.prototype.constructor === Object); // true
|
怎么修正這種問題呢？方法也很簡單，重新覆蓋Person.prototype.constructor即可：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function Person(name) {
this.name = name;
};
Person.prototype = new Object({
getName: function() {
return this.name;
}
});
Person.prototype.constructor = Person;
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
console.log(p.constructor.prototype.constructor === Person); // true
|
一個最近寫的拖拽排序的demo（慣例F12查看代碼吧）：http://xuanfengge.com/demo/201401/dragSort/