Question

我写了一篇JS＆＃34;班级＆＃34;对于像这样的jQuery框架：

(function($) {
    $.fn.dynamic = function() {
        return this.each(function() {
            $(this).on("submit", function(e) {
                var form = $(e.target);

                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success : function(data, textStatus, jqXHR) {
                        // Do something
                    },
                    error : function(data, textStatus, jqXHR) {
                        // Do something
                    }
                });

                e.preventDefault();
                return false;
            });
        });
    });
})(jQuery);

在我的成功/错误功能中我想做出动作（显示/隐藏自动加载器，显示消息，......）

我认为最好的方法是举例：

form.trigger("formSubmitted", [data, true/false]);

然后和听众一起做我必须做的事。

是否可以在我的类dynaform中添加一个监听器，并假设我必须使用其他类（让我们说消息和ProgressOverlay），如何调用这些类方法以及如何管理错误（想象一下那些类在另一个无法加载的文件或其他人中

Answer 1

首先，您需要在函数中接受一些参数。

为此，您需要在存储参数默认值的对象中定义回调：

this.defaultOptions = {
    onSuccess: function(data, textStatus, jqXHR) {},
    onError: function(data, textStatus, jqXHR) {}
};

然后您需要将默认选项与要传递的选项合并：

var settings = $.extend({}, this.defaultOptions, options);

然后，如果您愿意，请致电您的回调：

settings.onSuccess.call(undefined, data, textStatus, jqXHR);

然后你只需要像这样调用你的插件：

$('form').dynamic({
    onSuccess: function(data, textStatus, jqXHR){
        ...
    },
    onError: function(data, textStatus, jqXHR){
        ...
    }
});

以下是完整代码：

(function($) {
  $.fn.dynamic = function(options) { // Notice the added parameter here

    //Here are the defined callbacks
    this.defaultOptions = {
      onSuccess: function(data, textStatus, jqXHR) {},
      onError: function(data, textStatus, jqXHR) {}
    };

    //Merge your options with the predefined ones
    var settings = $.extend({}, this.defaultOptions, options);

    return this.each(function() {
      $(this).on("submit", function(e) {
        var form = $(e.target);

        $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          success: function(data, textStatus, jqXHR) {
            settings.onSuccess.call(undefined, data, textStatus, jqXHR); //Call your onSuccess callback here
          },
          error: function(data, textStatus, jqXHR) {
            settings.onError.call(undefined, data, textStatus, jqXHR); //Call your onError callback here
          }
        });

        e.preventDefault();
        return false;
      });
    });
  };
})(jQuery);

Javascript类函数

1 个答案: