jquery外掛程式開發

標籤：

一.介紹 
外掛程式編寫的目的是給已經有的一系列方法或函數做一個封裝，以便在其他地方重複使用，方便後期維護。 
JQuery除了提供一個簡單、有效方式進行管理元素以及指令碼，它還還提供了例外一種機制：即給核心模組增加自己的方法和額外的功能。通過這種機制，Jquery允許我們自己建立屬於我們自己的外掛程式，提高我們在開發過程中的效率。 

1.1JQuery的外掛程式分為3中類型： 
（1）封裝對象方法的外掛程式（也就是對象層級的開發） 
這種類型的外掛程式是我們今天需要講的外掛程式。 
（2）封裝全域函數的外掛程式（類層級開發） 
指可以把獨立的函數添加到JQuery命名空間之下。 
添加一個全域函數，我們只需如下定義： 
jQuery.foo = function() { 
alert(‘This is a test. This is only a test.‘); 
}; 
當然 你也可以添加多個全域函數： 

.代碼如下:
jQuery.foo = function() { 
alert(‘This is a test. This is only a test.‘); 
}; 
jQuery.bar = function(param) { 
alert(‘This function takes a parameter, which is "‘ + param + ‘".‘); 
}; 

調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘); 
（3）選取器外掛程式 
1.2編寫JQuery外掛程式需要注意的地方： 
（1）外掛程式的推薦命名方法為：jquery.[外掛程式名].js 
（2）所有的對象方法都應當附加到JQuery.fn對象上面，而所有的全域函數都應當附加到JQuery對象本身上。 
（3）在外掛程式內部，this指向的是當前通過選取器擷取的JQuery對象，而不像一般方法那樣，內部的this指向的是DOM元素。 
（4）可以通過this.each 來遍曆所有的元素 
（5）所有方法或函數外掛程式，都應當以分號結尾，否則壓縮的時候可能會出現問題。為了更加保險寫，可以在外掛程式頭部添加一個分號（；），以免他們的不規範代碼給外掛程式帶來 影響。 
（6）外掛程式應該返回一個JQuery對象，以便保證外掛程式的可鏈式操作。 
（7）避免在外掛程式內部使用$作為JQuery對象的別名，而應當使用完整的JQuery來表示。這樣可以避免衝突。 
1.3JQuery外掛程式的機制 
JQuery提供了2個用於擴充JQuery功能的方法。即： 
①jQuery.fn.extend() 
②jQuery.extend() 
第一個就是我們前面說外掛程式類型的第一個中情況，第二個就是指後面的2種情況。 
jQuery.extend()在外掛程式中友一個很重要的功能是擴充已經有的object的對象。 
比如： 
var newSrc=$.extend(dest,src1,src2,src3...) 
它的含義是將src1,src2,src3...合并到dest中,傳回值為合并後的dest,由此可以看出該方法合并。 
樣本： 
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 
得到的結果是： 
result={name:"Jerry",age:21,sex:"Boy"} 
詳細的 可以查看：jQuery.extend 函數詳解 裡面對這個方法有很好的講解。

官網：JQuery.extend()與JQuery.fn.extend()
使用命名空間 
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變數名。但是仍然不可避免某些函數或變數名將於其他jQuery外掛程式衝突，因此我們習慣將一些方法封裝到另一個自訂的命名空間。 

.代碼如下:
jQuery.myPlugin = { 
foo:function() { 
alert(‘This is a test. This is only a test.‘); 
}, 
bar:function(param) { 
alert(‘This function takes a parameter, which is "‘ + param + ‘".‘); 
} 
}; 

採用命名空間的函數仍然是全域函數，調用時採用的方法： 

.代碼如下:
$.myPlugin.foo(); 
$.myPlugin.bar(‘baz‘); 

二.第一個Jquery外掛程式 
如果需要寫一個JQuery外掛程式，你需要在$.fn對象後面增加一個屬性名稱，這個屬性名稱 其實 就是你的外掛程式名。它的一般架構如下： 

.代碼如下:
(function( $ ) { 
$.fn.myPlugin = function() { 
// 這裡開始寫功能需求 
}; 
})( jQuery ); 

現在我們需要寫的外掛程式的功能很簡單，就是把一個對象給慢慢的隱藏起來。就是使用fadeOut()這個方法。 
OK，我們開啟 VS 2012.建立一個jscript檔案，並且命名為：MyPlugin.js，並在裡面添加如下代碼： 

.代碼如下:
(function ($) { 
$.fn.myPlugin = function () { 
this.fadeOut(‘normal‘); 
}; 
})(jQuery); 

怎麼用呢？很簡單。 
建立一個html頁面，把jquery檔案以及剛剛我們MyPlugin.js檔案匯入到本次頁面中。如下： 

.代碼如下:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="MyPlugin.js" type="text/javascript"></script> 
js代碼： 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btn1").click(function () { 
$("#div1").myPlugin(); 
}); 
}); 
</script> 

HTML代碼： 

.代碼如下:
<div id="div1" style="width: 400px; height: 30px; "> 
My God</div> 
<input id="btn1" type="button" value="button" onclick="MyClick()" /> 

好的，你現在點擊網頁上面的按鈕的時候，div就會緩緩的隱藏。。。因為我們設定的是normal嘛，裡面也可以設定一些值之類的。 
很興奮的是，既然這個有智能提示，如： 

 

吧！ 
三.外掛程式運用在多個元素控制項中。 
3.1 運用在多個元素控制項中 
在上面編寫JQuery外掛程式需要注意的地方的第四點，寫道 如果要遍曆 則可以用this.each方法。$("ID").each 可以遍曆jquery對象、數組以及集合。 
OK。知道了這樣子，那麼我們的新的代碼如下： 

.代碼如下:
(function ($) { 
$.fn.hoverElement = function () { 
this.each(function () { 
$(this).hover( 
function () { 
$(this).addClass("Add"); 
}, 
function () { 
$(this).removeClass("Remove"); 
} 
); 
}) 
} 
})(jQuery); 

上面主要用到.each()方法進行遍曆。代碼很簡單，就是把當前的對象的背景色css樣式在“Add”和“Remove”直接切換。 

HTML的代碼是： 

.代碼如下:
<div class="hoverText"> 
First Button.. 
</div> 
<div class="hoverText"> 
Second Button.. 
</div> 
<div class="hoverText"> 
Third Button.. 
</div> 

JS 代碼： 

.代碼如下:
<script type="text/javascript"> 
$(document).ready(function () { 
$(".hoverText").hoverElement(); 
}); 
</script> 

很簡單，不解釋。 
3.2 鏈式操作 
鏈式操作？都聽過吧。。。比如下面這一句話： 
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000); 
就是能在當前的元素後面通過“.” 來實施更多的操作。這個動作特別的瀟洒。 
那我們要怎麼才能實現這種效果呢？很簡單，我能只需要把對象回去就可以了。請注意上面的第六點：外掛程式應該返回一個JQuery對象，以便保證外掛程式的可鏈式操作。 
我們依舊看剛剛的例子： 

.代碼如下:
(function ($) { 
$.fn.hoverElement = function () { 
return this.each(function () { 
$(this).hover( 
function () { 
$(this).addClass("Add"); 
}, 
function () { 
$(this).removeClass("Remove"); 
} 
); 
}) 
} 
})(jQuery); 

代碼都一樣，唯一區別的是：this.each(function () { 這個前面加了一個 return。這樣就實現了我們的鏈式操作。 
然後 你這樣： 

.代碼如下:
$(document).ready(function () { 
$(".hoverText").hoverElement().css("color","yellow"); 
}); 

能看到 文字已經變成了yellow色的了。 

四 自訂自己的外掛程式 
對於一個商業外掛程式來說，自訂外掛程式的樣式是必不可少的。我們可以通過我們自己輸入不同的樣式，來改變開發人員的預設樣式。比如說最常見的 width、height、url、color等等。要是沒有這些自訂的東西，那開發人員開發的外掛程式的利用價值就大大的減小了。 
OK，下面的這個執行個體的意思是 當我們hover一個對象的時候，它能改變它的text、background、foreground三個屬性，也就是文本、背景色、前景色彩。使用者可以設定他自己想設定的值，而不是固定死的。當然，如果使用者沒有設定，我們會給他一個預設值。 
定義這類外掛程式的開發架構是： 
$.fn.YouPlugin = function (options) {...} 
為了防止一些偷懶的人，我們需要設定一些預設值，當它沒有設定的時候，我們就用這些預設值。 
var defaultVal = { 
Text: ‘Your mouse is over‘, 
ForeColor: ‘red‘, 
BackColor: ‘gray‘ 
}; 
那預設值和使用者傳進來的值是怎麼聯合在一起的呢？這個就需要我們在開篇的時候講到的$.extend()知識了。 
var obj = $.extend(defaultVal, options); 
這樣子的話，就把使用者自訂的值覆蓋了預設使用者的值。如果使用者沒定義值，就用系統自訂的。 
代碼如下： 

.代碼如下:
(function ($) { 
$.fn.textHover = function (options) {//options 經常用這個表示有許多個參數。 
var defaultVal = { 
Text: ‘Your mouse is over‘, 
ForeColor: ‘red‘, 
BackColor: ‘gray‘ 
}; 
　　　　　　//預設值 
var obj = $.extend(defaultVal, options); 
return this.each(function () { 
var selObject = $(this);//擷取當前對象 
var oldText = selObject.text();//擷取當前對象的text值 
var oldBgColor = selObject.css("background-color");//擷取當前對象的背景色 
var oldColor = selObject.css("color");//擷取當前對象的字型的顏色 
selObject.hover(function () {//定義一個hover方法。 
selObject.text(obj.Text);//進行賦值 
selObject.css("background-color", obj.BackColor);//進行賦值 
selObject.css("color", obj.ForeColor);//進行賦值 
}, 
function () { 
selObject.text(oldText); 
selObject.css("background-color", oldBgColor); 
selObject.css("color", oldColor); 
} 
); 
}); 
} 
})(jQuery); 

代碼也很簡單，上面都有些瞭解釋，此刻不在羅嗦。 
怎麼用呢？很簡單。 
HTML code： 

.代碼如下:
<div id="div1" class="textBar"> 
Mouse over here..... 
</div> 
<div id="div2" class="textBar"> 
Mouse over here..... 
</div> 

JS Code： 

.代碼如下:
$(document).ready(function () { 
$(‘#div1‘).textHover({ 
Text: ‘I am going to over..‘, 
ForeColor: ‘yellow‘, 
BackColor: ‘Red‘ 
}); 
$(‘#div2‘).textHover({ Text: ‘I am second div...‘ }); 
}); 

就能看到效果了。 
希望對你們有協助。

jquery外掛程式開發