jQuery插件 - 提供API

Question

我目前正在开发一个相当复杂的jQuery插件。一个我设计的可扩展的。我的困惑是如何准确地向用户提供可用的API。

有两种方法，我可以想出：

1. 提供通过对象的API在全球范围内

   这是我目前使用的方法。我这样做是与此类似：

   (function ($, win, undefined) { 
       //main plugin functionality 
       function pluginStuff() { /*...including method calling logic...*/ } 
   
       //register function with jQuery 
       $.fn.extend({ Plugin: pluginStuff }); 
   
       //register global API variable 
       win.PluginAPI = { extendMe: {}, getVar: function() {} }; 
   })(jQuery, window); 
   

   不幸的是，因为我impliment标准$().plugin('method')架构其有点陌生，不得不使用一些事情jQuery的方法和对他人的API变量。

2. 提供经由放置在jQuery的

   对象本人用这种方法玩弄以及，但其最好的做法API来仅占据在jQueries fn范围的单个槽，不人群jQuery的变量。在这种方法中，我会把我的API变量的$.fn代替window：

   //register function with jQuery 
   $.fn.extend({ Plugin: pluginStuff }); 
   
   //register global API variable 
   $.fn.PluginAPI = { extendMe: {}, getVar: function() {} }; 
   

   我宁可不要打破了这个惯例，并采取了两个地方。

---

现在，我写这篇文章，我可以看到我给你我的插件插槽jQuery的fn范围第三种选择是一个对象：

$.fn.Plugin = { plugin: pluginStuff, api: { extendMe: {}, getVar: function() {} } }; 

但如何好评会变成这样如果用户必须执行$('#elm').Plugin.plugin({ setting: 'value' })才能创建插件的新实例？

任何帮助或指针将大大赞赏。

请注意：我不是在寻找一种方法将API对象合并到我的插件功能中。我正在寻找一种方法来保持它单独模块化，但直观地可用于使用/扩展。

Answer 1

我最终决定使用的方法是在fn命名空间下注册插件，并在jQuery $命名空间下注册api变量。由于方法和选项集合在插件$.fn的实例上运行是最佳选择。

但是，API是全局的，并且不会链接到单个实例。在这种情况下$.fn不太适合。我结束了使用类似于这样：

(function ($, win, undefined) { 
    //main plugin functionality 
    function pluginStuff() { /*...including method calling logic...*/ } 

    //register function with jQuery 
    $.fn.Plugin = pluginStuff; 

    //register global API variable 
    $.Plugin = { extendMe: {}, getVar: function() {} }; 
})(jQuery, window); 

现在你可以创建一个使用像预期的那样插件对象：

$('#elm').Plugin(); 
$('#elm').Plugin('option', 'something', 'value'); 
$('#elm').Plugin('method'); 

，你可以轻松地扩展并访问API：

$.extend($.Plugin.extendMe, { 
    moreStuff: {} 
}); 
$.Plugin.getVar('var'); 

感谢大家的帮助！

Answer 2

你总是可以做到像

var plugin = function plugin() { /* do the main stuff */ }; 
// api stuff here 
plugin.getVar = function() { }; 
plugin.extendMe = {}; 

$.fn.Plugin = plugin; 

还是坚持多余的东西在分配给plugin.api的对象。不管怎么样，你将不得不担心一些关于相互渗透的设置。由于一切都将使用相同的功能，无论您选择如何设置它，您都需要一种方法来保持插件的调用彼此分离。例如，可以使用类似this.selector（在您的插件函数中）作为关联属性的关键字。我通常会推荐.data()将设置附加到单个元素上，但是如果同一元素获取要求它的插件两次，这并没有多大帮助。