jQuery 插件 - 提供 API

Question

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

我可以想出两种方法：

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

   这是我目前正在使用的方法。我这样做类似于：

   (函数 ($, win, 未定义) {
       //主要插件功能
       function pluginStuff() { /*...包括方法调用逻辑...*/ }
   
       //使用jQuery注册函数
       $.fn.extend({ 插件:pluginStuff });
   
       //注册全局API变量
       win.PluginAPI = { extendsMe: {}, getVar: function() {} };
   })(jQuery, 窗口);
   

   不幸的是，由于我实现了标准 $().plugin('method') 架构，因此对于某些事物必须使用 jQuery 方法，而对于其他事物则必须使用 API 变量，这有点奇怪。

2. 通过放置在 jQuery 中的对象提供 API

   我也尝试过这个方法，但它的最佳实践是只占用 jQueries fn 范围中的一个槽，以免挤占 jQuery 变量。在此方法中，我会将 api 变量放入 $.fn 而不是 window 中：

   //用jQuery注册函数
   $.fn.extend({ 插件:pluginStuff });
   
   //注册全局API变量
   $.fn.PluginAPI = { extendsMe: {}, getVar: function() {} };
   

   我宁愿不打破这个约定并占用两个位置。

---

现在我写了这篇文章，我可以看到第三个选项，我将 jQuery 的 fn 范围中的插件插槽分配为一个对象：

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

但是如果用户必须执行 $( '#elm').Plugin.plugin({ setting: 'value' }) 创建插件的新实例？

任何帮助或指示将非常感激。

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

Answer 1

您始终可以这样做

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

$.fn.Plugin = plugin;

，或者将额外的内容粘贴到分配给 plugin.api 的对象中。

但无论如何，你都必须担心设置会相互渗透。由于所有内容都将使用相同的函数，因此无论您选择如何设置它，您都需要一种方法来保持插件的调用彼此分开。例如，也许使用诸如 this.selector （在您的插件函数中）之类的东西作为属性关联数组的键。我通常建议使用 .data() 将设置附加到各个元素，但如果同一个元素被两次调用插件，那么这并没有多大帮助。

Answer 2

我最终决定使用的方法是将插件注册在 fn 命名空间下，并将 api 变量注册在 jQuery $ 命名空间下。由于方法和选项集在插件的实例上运行，$.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');

感谢大家的帮助！