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) 

还有其他事情可以做，以延长你的插件的功能和基本插件可以建提供保留上下文的公共方法，但这对你的例子来说是过分的。