Javascript命名空間和公共職能

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

該插件必須做一些事情對象，使之成爲訪問，對expample它返回：

$.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）來執行不同的操作。