jQuery插件開發入門

Require.js中使用jQuery 插件請查看http://www.css88.com/archives/4826

擴展jQuery插件和方法的做用是很是強大的，它能夠節省大量開發時間。這篇文章將概述jQuery插件開發的基本知識，最佳作法和常見的陷阱。

入門

編寫一個jQuery插件開始於給jQuery.fn加入​​新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱：

1. jQuery.fn.myPlugin =function(){
2.  
3. //你本身的插件代碼
4.  
5. };

用戶很是喜歡的$符號哪裏去了？ 它仍然存在，可是，爲了不和其餘JavaScript庫衝突，咱們最好將jQuery傳遞給一個自我執行的封閉程序，jQuery在此程序中映射爲$符號，這樣能夠避免$號被其餘庫覆寫。

1. (function($){
2. $.fn.m​​yPlugin =function(){
3. //你本身的插件代碼
4. };
5. })(jQuery);

 

在這個封閉程序中，咱們能夠無限制的使用$符號來表示jQuery函數。

環境

如今，咱們能夠開始編寫實際的插件代碼。 可是，在這以前，咱們必須得對插件所處的環境有個概念。 在插件的範圍裏， this關鍵字表明瞭這個插件將要執行的jQuery對象， 這裏容易產生一個廣泛的誤區，由於在其餘包含callback的jQuery函數中，this關鍵字表明瞭原生的DOM元素。這經常會致使開發者誤將this關鍵字無謂的包在jQuery中，以下所示。

1. (function($){
2. $.fn.m​​yPlugin =function(){
3.  
4. //此處沒有必要將this包在$號中如$(this)，由於this已是一個jQuery對象。
5. //$(this)等同於 $($('#element'));
6.  
7. this.fadeIn('normal',function(){
8.  
9. //此處callback函數中this關鍵字表明一個DOM元素
10.  
11. });
12.  
13. };
14. })(jQuery);
15.  
16. $('#element').myPlugin();

 

 

基礎知識

如今，咱們理解了jQuery插件的基礎知識，讓咱們寫一個插件，作一些事情。

1. (function($){
2.  
3. $.fn.m​​axHeight =function(){
4.  
5. var max =0;
6.  
7. this.each(function(){
8. max =Math.max(max, $(this).height());
9. });
10.  
11. return max;
12. };
13. })(jQuery);
14.  
15. var tallest = $('div').maxHeight();//返回高度最大的div元素的高度

這是一個簡單的插件，利用.height()返回頁面中高度最大的div元素的高度。

維護Chainability

不少時候，一個插件的意圖僅僅是以某種方式修改收集的元素，並把它們傳遞給鏈中的下一個方法。 這是jQuery的設計之美，是jQuery如此受歡迎的緣由之一。 所以，要保持一個插件的chainability，你必須確保你的插件返回this關鍵字。

1. (function($){
2.  
3. $.fn.lockDimensions =function(type){
4.  
5. returnthis.each(function(){
6.  
7. var $this = $(this);
8.  
9. if(!type || type =='width'){
10. $this.width($this.width());
11. }
12.  
13. if(!type || type =='height'){
14. $this.height($this.height());
15. }
16.  
17. });
18.  
19. };
20. })(jQuery);
21.  
22. $('div').lockDimensions('width').CSS('color','red');

因爲插件返回this關鍵字，它保持了chainability，這樣jQuery收集的元素能夠繼續被jQuery方法如.css控制。 所以，若是你的插件不返回固有的價值，你應該老是在其做用範圍內返回this關鍵字。 此外，你可能會推斷出，傳遞給插件的參數將會在插件的做用範圍內被傳遞。 所以，在前面的例子，字符串’width’變成了插件的類型參數。

默認值和選項

對於比較複雜的和提供了許多選項可定製的的插件，最好有一個當插件被調用的時候能夠被拓展的默認設置(經過使用$.extend)。 所以，相對於調用一個有大量參數的插件，你能夠調用一個對象參數，包含你了你想覆寫的設置。

1. (function($){
2.  
3. $.fn.tooltip =function(options){
4.  
5. //建立一些默認值，拓展任何被提供的選項
6. var settings = $.extend({
7. 'location':'top',
8. 'background-color':'blue'
9. }, options);
10.  
11. returnthis.each(function(){
12.  
13. // Tooltip插件代碼
14.  
15. });
16.  
17. };
18. })(jQuery);
19.  
20. $('div').tooltip({
21. 'location':'left'
22. });

在這個例子中，調用tooltip插件時覆寫了默認設置中的location選項，background-color選項保持默認值，因此最終被調用的設定值爲：

1. {
2. 'location':'left',
3. 'background-color':'blue'
4. }

這是一個很靈活的方式，提供一個高度可配置的插件，而無需開發人員定義全部可用的選項。

命名空間

正確命名空間你的插件是插件開發的一個很是重要的一部分。 正確的命名空間，能夠保證你的插件將有一個很是低的機會被其餘插件或同一頁上的其餘代碼覆蓋。 命名空間也使得你的生活做爲一個插件開發人員更容易，由於它能夠幫助你更好地跟蹤你的方法，事件和數據。

插件方法

在任何狀況下，一個單獨的插件不該該在jQuery.fnjQuery.fn對象裏有多個命名空間。

1. (function($){
2.  
3. $.fn.tooltip =function(options){
4. // this
5. };
6. $.fn.tooltipShow =function(){
7. // is
8. };
9. $.fn.tooltipHide =function(){
10. // bad
11. };
12. $.fn.tooltipUpdate =function(content){
13. // !!!
14. };
15.  
16. })(jQuery);

這是不被鼓勵的，由於它$.fn使$.fn命名空間混亂。 爲了解決這個問題，你應該收集對象文本中的全部插件的方法，經過傳遞該方法的字符串名稱給插件以調用它們。

1. (function($){
2.  
3. var methods ={
4. init:function(options){
5. // this
6. },
7. show:function(){
8. // is
9. },
10. hide:function(){
11. // good
12. },
13. update:function(content){
14. // !!!
15. }
16. };
17.  
18. $.fn.tooltip =function(method){
19.  
20. // 方法調用
21. if(methods[method]){
22. return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
23. }elseif(typeof method ==='object'||!method){
24. return methods.init.apply(this, arguments);
25. }else{
26. $.error('Method'+ method +'does not exist on jQuery.tooltip');
27. }
28.  
29. };
30.  
31. })(jQuery);
32.  
33. //調用init方法
34. $('div').tooltip();
35.  
36. //調用init方法
37. $('div').tooltip({
38. foo:'bar'
39. });
40.  
41. // 調用hide方法
42. $('div').tooltip('hide');
43.  
44. //調用Update方法
45. $('div').tooltip('update','This is the new tooltip content!');

這種類型的插件架構容許您封裝全部的方法在父包中，經過傳遞該方法的字符串名稱和額外的此方法須要的參數來調用它們。 這種方法的封裝和架構類型是jQuery插件社區的標準，它被無數的插件在使用，包括jQueryUI中的插件和widgets。

事件

一個不爲人知bind方法的功能即容許綁定事件命名空間。 若是你的插件綁定一個事件，一個很好的作法是賦予此事件命名空間。 經過這種方式，當你在解除綁定的時候不會干擾其餘可能已經綁定的同一類型事件。   你能夠經過追加命名空間到你須要綁定的的事件經過 ‘.<namespace>’。

1. (function($){
2.  
3. var methods ={
4. init:function(options){
5.  
6. returnthis.each(function(){
7. $(window).bind('resize.tooltip', methods.reposition);
8. });
9.  
10. },
11. destroy:function(){
12.  
13. returnthis.each(function(){
14. $(window).unbind('.tooltip');
15. })
16.  
17. },
18. reposition:function(){
19. //...
20. },
21. show:function(){
22. //...
23. },
24. hide:function(){
25. //...
26. },
27. update:function(content){
28. //...
29. }
30. };
31.  
32. $.fn.tooltip =function(method){
33.  
34. if(methods[method]){
35. return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
36. }elseif(typeof method ==='object'||!method){
37. return methods.init.apply(this, arguments);
38. }else{
39. $.error('Method '+ method +' does not exist on jQuery.tooltip');
40. }
41. };
42.  
43. })(jQuery);
44.  
45. $('#fun').tooltip();
46. //一段時間以後... ...
47. $('#fun').tooltip('destroy');

在這個例子中，當tooltip經過init方法初始化時，它將reposition方法綁定到resize事件並給reposition非那方法賦予命名空間經過追加.tooltip。 稍後， 當開發人員須要銷燬tooltip的時候，咱們能夠同時解除其中reposition方法和resize事件的綁定，經過傳遞reposition的命名空間給插件。 這使咱們可以安全地解除事件的綁定並不會影響到此插件以外的綁定。

數據

一般在插件開發的時候，你可能須要記錄或者檢查你的插件是否已經被初始化給了一個元素。 使用jQuery的data方法是一個很好的基於元素的記錄變量的途徑。儘管如此，相對於記錄大量的不一樣名字的分離的data,  使用一個單獨的對象保存全部變量，並經過一個單獨的命名空間讀取這個對象不失爲一個更好的方法。

1. (function($){
2.  
3. var methods ={
4. init:function(options){
5.  
6. returnthis.each(function(){
7.  
8. var $this = $(this),
9. data = $this.data('tooltip'),
10. tooltip = $('<div />',{
11. text: $this.attr('title')
12. });
13.  
14. // If the plugin hasn't been initialized yet
15. if(!data){
16.  
17. /*
18. Do more setup stuff here
19. */
20.  
21. $(this).data('tooltip',{
22. target: $this,
23. tooltip: tooltip
24. });
25.  
26. }
27. });
28. },
29. destroy:function(){
30.  
31. returnthis.each(function(){
32.  
33. var $this = $(this),
34. data = $this.data('tooltip');
35.  
36. // Namespacing FTW
37. $(window).unbind('.tooltip');
38. data.tooltip.remove();
39. $this.removeData('tooltip');
40.  
41. })
42.  
43. },
44. reposition:function(){
45. // ...
46. },
47. show:function(){
48. // ...
49. },
50. hide:function(){
51. // ...
52. },
53. update:function(content){
54. // ...
55. }
56. };
57.  
58. $.fn.tooltip =function(method){
59.  
60. if(methods[method]){
61. return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
62. }elseif(typeof method ==='object'||!method){
63. return methods.init.apply(this, arguments);
64. }else{
65. $.error('Method '+ method +' does not exist on jQuery.tooltip');
66. }
67.  
68. };
69.  
70. })(jQuery);

將數據經過命名空間封裝在一個對象中，能夠更容易的從一個集中的位置讀取全部插件的屬性。

總結和最佳作法

編寫jQuery插件容許你作出庫，將最有用的功能集成到可重用的代碼，能夠節省開發者的時間，使開發更高效。 開發jQuery插件時，要牢記：

• 始終包裹在一個封閉的插件：
  1. (function($){
  2. /* plugin goes here */
  3. })(jQuery);
• 不要冗餘包裹this關鍵字在插件的功能範圍內
• 除非插件返回特定值，不然老是返回this關鍵字來維持chainability 。
• 傳遞一個可拓展的默認對象參數而不是大量的參數給插件。
• 不要在一個插件中屢次命名不一樣方法。
• 始終命名空間的方法，事件和數據。