jQuery插件-提供一个API

jQuery Plugin - Providing an API

本文关键字：一个 API 插件 jQuery      更新时间：2023-09-26

我目前正在开发一个相当复杂的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);

    不幸的是，因为我实现了标准的$().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对象到我的插件功能。我正在寻找一种方法来保持它单独模块化，但直观地可用于使用/扩展。

你可以这样做

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

或者把多余的东西放在你赋值给plugin.api的对象中。

不管你怎么做，你都要担心设置会相互渗透。由于无论您选择如何设置，所有内容都将使用相同的函数，因此您将需要一种方法来保持插件的调用彼此分离。例如，可以使用this.selector(在您的插件函数中)作为属性关联数组的键。我通常建议.data()将设置附加到单个元素，但如果相同的元素获得两次插件调用，那就没有多大帮助了。

我最终决定使用的方法是在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');

谢谢大家的帮助!

相关文章：