萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 10條建議幫助你創建更好的jQuery插件

10條建議幫助你創建更好的jQuery插件

   本文總結了幫助你創建更好jQuery插件的10條建議。分享給大家供大家參考。具體說明如下:

  在開發過很多 jQuery 插件以後,我慢慢的摸索出了一套開發jQuery插件比較標准的結構和模式。這樣我就可以 copy & paste 大部分的代碼結構,只要專注最主要的邏輯代碼就行了。使用相同的設計模式和架構也讓修復bug或者二次開發更容易。一套經過驗證的架構可以保證我的插件不出大的問題,不論插件簡單還是復雜。我在這裡分享10條我總結的經驗。

  1. 把你的代碼全部放在閉包裡面

  這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。

  不過你的插件的代碼只為你自己的插件服務,所以不存在這個問題,你可以把所有的代碼都放在閉包裡面。

  而方法可能應該放在Prototype方法內部,。

  ?

1 2 3 (function($) { //code here })(jQuery);

  2. 提供插件的默認選項

  你的插件應該會有一些選項是可以讓開發者設置的,所以提供恢復默認選項是以有必要的。 你可以通過jQuery的extend功能來設置這些選項:

  ?

1 2 3 4 5 var defaultSettings = { mode : 'Pencil', lineWidthMin : '0', lineWidthMax : '10', lineWidth : '2' }; settings = $.extend({}, defaultSettings, settings || {});

  3. 使用返回一個元素

  JavaScript/jQuery有一個很好的特點就是可以進行方法級聯,所以我們不應該破壞這個特性,始終在方法中返回一個元素。我在我的每一個jQuery插件中都遵守這一條。

  ?

1 2 3 4 5 6 $.fn.wPaint = function(settings) { return this.each(function() { var elem = $(this); //run some code here } }

  4. 一次性代碼放在主循環以外

  這一條很重要,但是常常被忽略。簡單的講,如果你有一段代碼是一堆默認值,只需要被實例化一次,而不是每次調用你插件功能的時候都實例化,你應該把這段代碼放在插件方法的外面。這樣可以讓你的插件運行的更高效,節省內存。

  ?

1 2 3 4 5 6 7 8 9 10 11 12 var defaultSettings = { mode : 'Pencil', lineWidthMin : '0', lineWidthMax : '10', lineWidth : '2' }; settings = $.extend({}, defaultSettings, settings || {}); $.fn.wPaint = function(settings) { return this.each(function() { var elem = $(this); //run some code here } }

  你可以注意到,上面代碼中的“defaultSettings”是完全在插件方法外面的,由於這些代碼是在閉包裡面,我們不用擔心這些變量被重寫。

  5. 為什麼要設置 Class Prototyping

  作為你代碼的血與肉,方法和函數應該放在prototype函數內。有兩個原因:

  ◆ 它可以節省很多內存,因為可以不用重復創建這些方法。

  ◆ 引用一個現成的方法比重新創建一個好快很多。

  簡單的說,prototype就是擴展了一個對象,為它提供方法,而不用在每一個對象中實例化這些方法。這也讓你的代碼更有條理和高效。一旦你習慣這種開發方式,你會發現它在你將來的項目中為你節省了很多時間。

  6. 如何設置 Class Prototyping

  設置一個 prototype 方法有兩個部分。首先我們需要創建我們最初的類定義,在多數情況下這就意味著創建一個對象。這個定義包含了每一個對象實例都不同的部分。在我的Paint jQuery Plugin 插件中,我是這麼寫的:

  ?

1 2 3 4 5 6 7 function Canvas(settings) { this.settings = settings; this.draw = false; this.canvas = null; this.ctx = null; return this; }

  下面來添加全局的方法:

  ?

1 2 3 4 5 Canvas.prototype = { generate: function() { //generate code } }

  這裡的關鍵是要讓prototype的方法是通用的,但是數據是每個實例自己的,可以用“this”引用。

  7. 使用 “this” 對象

  通過使用“$this”,我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入 $this 引用。需要注意的是, $this 這個名字是可以改的,任意的變量名都可以。

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Canvas.prototype = { generate: function() { //some code var $this = this; var buton = //...some code button.click(function(){ //using this will not be found since it has it's own this //use $this instead. $this.someFunc($this); }); }, someFunc: function($this) { //won't know what "this" is. //use $this instead passed from the click event } }

  8. 在每一個對象中保存設置

  我一直在每一個對象中保存自己的設置,然後操作它自己的設置。這樣你就不用在不同的方法中傳遞很多參數。把這些變量放在對象中,也方便你在其他地方調用這些變量。

  ?

1 2 3 4 function Canvas(settings) { this.settings = settings; return this; }

  9. 分離你的Prototype方法邏輯

  這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候,你可以問你自己 “如果其他人要重寫這個方法的話,你的代碼是否能滿足他的需求?”或者“別人來寫這個方法有多困難?”。當然這是一個靈活性拿捏的問題。這裡列出了我的Color Picker jQuery Plugin 的方法,你可以參考一下:

  ?

1 2 3 4 5 6 7 8 generate() appendColors() colorSelect() colorHoverOn() colorHoverOff() appendToElement() showPalette() hidePalette()

  10. 提供 Setter/Getter 選項

  這一條不是必須的,但是我發現我所有的插件都包用到了這一條。因為它只需要一點點代碼,就能為別人提供一個他可能需要的功能。

  基本上,我們只要讓開發者能夠設置或者獲取元素已經存在的值:

  ?

1 2 var lineWidth = $("#container").wPaint("lineWidth"); $("#container").wPaint("lineWidth", "5&
copyright © 萬盛學電腦網 all rights reserved