JavaScript 类函数

Question

我为 jQuery 框架编写了一个 JS“类”，如下所示:

(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 中添加一个监听器，并假设我必须添加其他类(比如说 Messages 和 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);