Question

我正在编写一个jQuery插件，允许在指定的表单中初始化多个单个文件上传字段（使用Fine Uploader）。

最终我希望表单知道它附加了这些单个上传器，因此我可以在手动启动文件上传和提交表单之前运行一些验证等。

我理想的初始化代码如下所示：

var form = $("form");
form.uploader();
form.addUploader({
  element: '.uploader_one'
});
form.addUploader({
  element: '.uploader_two'
});

到目前为止，为实现这一目标而编写的插件看起来像是：

(function($) {

    var Uploader = function(form){
       addUploader = function() {
          // Initialize Fine Uploader
       }

       $(form).submit(function(e) {
         // Run validations, then process uploaders
         $(this).submit();
       } 
    }

    $.fn.uploader = function(options) {
       var uploader = new Uploader(this);
    };

})(jQuery);

除了addUploader函数不可公开访问外，其中大部分都有效。

我可能会以错误的方式解决这个问题吗？任何帮助将不胜感激！

Answer 1

您需要使addUploader成为对象的成员才能通过对象访问它（而不是作为与对象断开的全局变量）：

 this.addUploader = function() {

该插件必须对该对象执行某些操作才能使其可访问，以便进行示例返回：

$.fn.uploader = function(options) {
  return new Uploader(this);
};

现在您可以从插件中获取对象并使用它：

var form = $("form");
var upl = form.uploader();
upl.addUploader({
  element: '.uploader_one'
});
upl.addUploader({
  element: '.uploader_two'
});

Answer 2

您应该遵循开发插件的一般做法。您的插件的建议结构类似于：

(function($) {
    var methods = {
        init: function (options) {
            var data = $(this).data("uploader-plugin");
            if (!data) {
                $(this).on("submit", function (e) {

                });
                $(this).data("uploader-plugin", new Uploader(options));
            }
        },
        add: function (options) {
            // Use `options.element`
            $(this).data("uploader-plugin").elements.push(options.element);
            console.log($(this).data("uploader-plugin"));
        }
    };

    var Uploader = function (opts) {
        this.whatever = opts.a;
        this.elements = [];
    };

    $.fn.uploader = function(method) {
        var args = arguments;
        return this.each(function () {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(args, 1));
            } else if (typeof method === "object" || !method) {
                return methods.init.apply(this, args);
            } else {
                $.error("Method " +  method + " does not exist on jQuery.uploader");
            }
        });
    };
})(jQuery);

DEMO： http://jsfiddle.net/WyGqc/

你会这样称呼它：

var form = $("form");
form.uploader({
    a: "whatever";
});
form.uploader("add", {
    element: ".uploader_one"
});

它实际上将它应用于原始选择器中的所有选定元素，并继续链接。它也遵循插件使用的常规惯例 - 意思是，您使用不同的参数调用插件名称（uploader）来执行不同的操作。

Javascript命名空间和公共函数

2 个答案: