Плагин 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);
   

   К сожалению, поскольку я использую стандартную архитектуру $().plugin('method'), немного странно использовать метод jQuery для одних вещей и переменную API для других.

2. Предоставление API через объект, помещенный в jQuery

   Я также играл с этим методом, но лучше всего использовать только один слот в области видимости jQueries fn, так какне переполнять переменную jQuery.В этом методе я бы поместил свою переменную API в $.fn вместо window:

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

   Я бы не стал нарушать это соглашение и занял бы два места.

---

Теперь, когда я пишу это, я вижу третий вариант, где я назначаю слот моих плагинов в области видимости fn jQuery для объекта:

$.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');

Спасибо за помощь всем!