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)

您可以采取其他措施来扩展插件的功能，并提供保留上下文的公共方法，但这对您的示例来说太过分了。

Answer 2

这是我的答案版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个回调：一个用于错误，第二个用于成功

这是我的第一个插件，因此有很多需要改进的地方。

一如既往的评论和提示是受欢迎的！

jQuery - 创建插件的正确方法

2 个答案: