編寫優秀jQuery外掛程式的10個技巧

標籤：

本文和大家分享的主要是jQuery 外掛程式的編寫技巧，一起來看看吧，希望對大家 學習jquery有所協助。 1. 把你的代碼全部放在 閉包 裡面這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。不過你的外掛程式的代碼只為你自己的外掛程式服務，所以不存在這個問題，你可以把所有的代碼都放在閉包裡面。而方法可能應該放在Prototype 方法內部。( function($)  {//code here})( jQuery); 2. 提供外掛程式的預設選項你的外掛程式應該會有一些選項是可以讓開發人員設定的，所以提供恢複預設選項是以有必要的。  你可以通過jQuery 的 extend 功能來設定這些選項：var defaultSettings = {      mode            : ’Pencil’,lineWidthMin    : ’0’,lineWidthMax    : ’10’,lineWidth       : ’2’ };settings = $.extend({}, defaultSettings, settings || {}); 3. 使用返回一個元素JavaScript/jQuery 有一個很好的特點就是可以進行方法級聯，所以我們不應該破壞這個特性，始終在方法中返回一個元素。我在我的每一個 jQuery 外掛程式中都遵守這一條。$.fn.wPaint =  function(settings)  {return  this.each( function()  {var elem = $( this);//run some code here}} 4. 一次性代碼放在主迴圈以外這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆預設值，只需要被執行個體化一次，而不是每次調用你外掛程式功能的時候都執行個體化，你應該把這段代碼放在外掛程式方法的外面。這樣可以讓你的外掛程式啟動並執行更高效，節省記憶體。你可以注意到，上面代碼中的“defaultSettings” 是完全在外掛程式方法外面的，由於這些代碼是在閉包裡面，我們不用擔心這些變數被重寫。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}} 5. 為什麼要設定 Class Prototyping作為你代碼的血與肉，方法和函數應該放在prototype 函數內。有兩個原因：·  它可以節省很多記憶體，因為可以不用重複建立這些方法。·  引用一個現成的方法比重新建立一個好快很多。簡單的說，prototype 就是擴充了一個對象，為它提供方法，而不用在每一個對象中執行個體化這些方法。這也讓你的代碼更有條理和高效。一旦你習慣這種開發方式，你會發現它在你將來的項目中為你節省了很多時間。 6. 如何設定 Class Prototyping設定一個 prototype  方法有兩個部分。首先我們需要建立我們最初的類定義，在多數情況下這就意味著建立一個對象。這個定義包含了每一個對象執行個體都不同的部分。在我的 Paint jQuery Plugin  外掛程式中，我是這麼寫的：function Canvas(settings)  {this.settings = settings;this.draw = false;this.canvas = null;this.ctx = null;return  this;  }下面來添加全域的方法：Canvas.prototype =  {generate:  function() {//generate code}}這裡的關鍵是要讓prototype 的方法是通用的，但是資料是每個執行個體自己的，可以用 “this” 引用。 7. 使用 “this” 對象通過使用“$this” ，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入  $this  引用。需要注意的是，  $this  這個名字是可以改的，任意的變數名都可以。Canvas.prototype =  {generate: function()   {//some codevar $this = this;var buton = //...some codebutton.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. 在每一個對象中儲存設定我一直在每一個對象中儲存自己的設定，然後操作它自己的設定。這樣你就不用在不同的方法中傳遞很多參數。把這些變數放在對象中，也方便你在其他地方調用這些變數。function Canvas(settings)  {this.settings = settings;return  this;} 9. 分離你的Prototype方法邏輯這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候，你可以問你自己 “ 如果其他人要重寫這個方法的話，你的代碼是否能滿足他的需求 ?” 或者 “ 別人來寫這個方法有多困難 ?” 。當然這是一個靈活性拿捏的問題。這裡列出了我的 Color Picker jQuery Plugin  的方法，你可以參考一下：generate()appendColors()colorSelect()colorHoverOn()colorHoverOff()appendToElement()showPalette()hidePalette() 10. 提供 Setter/Getter 選項這一條不是必須的，但是我發現我所有的外掛程式都包用到了這一條。因為它只需要一點點代碼，就能為別人提供一個他可能需要的功能。基本上，我們只要讓開發人員能夠設定或者擷取元素已經存在的值： var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");總結：以上十條基 本上覆蓋了 jQuery 外掛程式開發  的核心，並且可以作為開發的模板。有一套基本的代碼可以極大的縮短你的開發時 間，並且能夠讓你設計外掛程式架構的時候更自信。來源： 極客頭條

編寫優秀jQuery外掛程式的10個技巧