Question

我目前正在开发一个相当复杂的jQuery插件。我正在设计一个可扩展的。我遇到的困境是如何为我的用户提供可用的API。

我可以提出两种方法：

通过全局范围内的对象提供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);

不幸的是，由于我对标准$().plugin('method')架构表示不满，因此必须使用jQuery方法处理某些事情而将API变量用于其他事情。

通过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

你总是可以这样做

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命名空间下注册插件，在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');

感谢大家的帮助！

jQuery插件 - 提供API

2 个答案: