javascript - 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 请求的默认选项，但我想为其添加更多选项。
例如:
clear - fill 确定我是否需要新选项来替换现有选项或追加。

我还想向我的函数添加一些回调，我可以将其作为参数传递。 例如，如果服务器请求将失败，我想指定一个将在发生此错误后调用的函数 - 例如显示警报或禁用我的选择。

我的问题是我应该如何更改我的插件或我应该使用哪种模式(样板)？

我发现的每个样板都是用于创建将“留在”所选项目内的插件，以便以后可以调用该插件的方法。

我需要一个简单的插件，允许用户填写选择，然后它就会结束它的生命:)

我的主要想法是对所有元素只向服务器发出一个请求。

---

这是 jsfiddle 演示:http://jsfiddle.net/JC7vX/2/

Answer 1

一个基本的插件可以如下构建

(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)

您还可以做其他事情来扩展插件的功能并提供保留上下文的公共(public)方法，但这对您的示例来说太过分了。