jQuery - 創建插件的正確方法

Question

我試圖將我的一些代碼轉換爲可重用的插件。 很多時候我用來自Ajax請求的動態選項填充選擇。

我已經成功地這樣創造的東西：

$.fn.fillSelect = function fillSelect(options) { 
var self = this; 
options = $.extend({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "Data.asmx/StatusList", 
    dataType: "json", 
    async: true, 
    success: function(data) { 
     var list = ""; 
     $.each(data.d, function(i) { 
      list += '<option value=' 
          + data.d[i].ID + '>' 
          + data.d[i].Nazwa 
          + '</option>'; 
     }); 
     self.filter("select").each(function() { 
      $(this).empty(); 
      $(this).append(list); 
      //use selectmenu 
      if ($.ui.selectmenu) $(this).selectmenu(); 
     }); 
    }//, 
    //error: function(result) { 
    // alert("Error loading data!"); 
    //} 
}, options); 
$.ajax(options); 
return self; 
} 

這背後的想法是能夠以一個請求，以填補多個選擇具有相同的數據多次。
我有Ajax請求的默認選項，但我想添加一些更多的選項。
例如：
清除 - 如果我想要新的選項替換現有的或追加的填充確定。

另外我想添加一些回調函數，我可以作爲參數傳遞。 例如，如果服務器請求失敗，我想指定一個函數，在發生此錯誤後將調用 - 例如顯示警報或禁用我的選擇。

我的問題是我應該如何改變我的插件或我應該使用哪種模式（模板）？

我發現的每一個樣板文件都是用來創建插件，它們會保留在選定的項目中，以便稍後可以調用該插件的方法。

我需要一個簡單的插件，允許用戶填寫選擇，然後將結束它的生命:)

我主要的想法是做只有一個請求到服務器的所有元素。

---

這裏的jsfiddle演示：http://jsfiddle.net/JC7vX/2/

Answer 1

這是我的版本答案http://jsfiddle.net/Misiu/ncWEw/

我的插件看起來像這樣：

(function($) { 
$.fn.ajaxSelect = function(options) { 
    var $this = this; 
    //options 
    var settings = $.extend({}, defaults, options); 
    //disable select 
    if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) { 
     $this.selectmenu('disable'); 
    } 
    //ajax call 
    $.ajax({ 
     type: settings.type, 
     contentType: settings.contentType, 
     url: settings.url, 
     dataType: settings.dataType, 
     data: settings.data 
    }).done(function(data) { 
     var n = data.d || data; 
     var list = ""; 
     $.each(n, function(i) { 
      list += '<option value=' + n[i].Id + '>' + n[i].Nazwa + '</option>'; 
     }); 
     $this.filter("select").each(function() { 
      $(this).empty(); 
      $(this).append(list); 
      if ($.ui.selectmenu && settings.selectmenu) { 
       $this.selectmenu(); 
      } 
      settings.success.call(this); 
     }); 
    }).fail(function() { 
     settings.error.call(this); 
    }); 

    return this; 
}; 

var defaults = { 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: '/echo/json/', 
    dataType: 'json', 
    data: null, 
    async: true, 
    selectmenu: true, 
    disableOnLoad: true, 
    success: function() {}, 
    error: function() {} 
}; 
})(jQuery); 

我明白，這是很簡單的，但它有我需要的所有功能：
- 您可以一次選擇多個元素
-它只篩選您選擇的項目
- 它只向服務器發出一個請求
- 首先它建立選項字符串，然後將其追加而不是循環
添加項目 - 您可以指定2個回調：一個錯誤和第二個成功

而且這是我的第一個插件，所以有很多的地方改進。

正如總是意見和提示，歡迎！

Answer 2

如下

(function ($){ 
    $.fn.yourPlugin = function (options){ 
     // this ensures that function chaining can continue 
     return this.each(function(){ 
      // merge defaults and user defined options 
      var params = $.extend({},defaultOptions,options); 
      // your plugin code 
     }); 
    } 

    /* these options will help define the standard functionality of the plugin, 
    * and also serves as a nice reference 
    */ 
    var defaultOptions = { 
     someProperty : true 
    } 
})(jQuery) 

還有其他事情可以做，以延長你的插件的功能和基本插件可以建提供保留上下文的公共方法，但這對你的例子來說是過分的。