создать и расширить плагин jquery

Question

Я просмотрел различные темы, опубликованные в stackoverflow и других форумах, в которых объясняется, как писать и расширять плагин jquery.

Я написал следующий пример кода для проверки моего понимания

(function( $ ) {
  $.fn.myPlugin = function() {

    this.firstAPI(param)
    {
        alert(param);
     };
     return this;
  };
})( jQuery );

Теперь я расширяю плагин.

function($) {
    var extensionMethods = {
            secondAPI: function(param){
            alert(param);
        }
    };

    $.extend(true, $[fn][myPlugin].prototype, extensionMethods);

})(jQuery);

Теперь я обращаюсь к плагину $().myPlugin().firstAPI("Hello"), который успешно вызывает API и показывает сообщение с предупреждением. Но я не могу получить доступ к secondAPI по $().myPlugin().secondAPI("Hello"). $().myPlugin() объект не имеет secondAPI.

Кроме того, я заметил одну вещь, объект myPlugin инициализируется каждый раз, когда я вызываю API для объекта $().myPlugin(). Я также попытался передать элемент DOM $('#divid') и затем вызвать. Не удалось и в этом сценарии.

Answer 1

Полагаю, это неправильный способ расширения плагина. Прочитайте это http://docs.jquery.com/Plugins/Authoring

Когда вы используете $.extend(true, $['fn']['myPlugin'].prototype, extensionMethods);, вы пропустили кавычки, я полагаю, вы фактически добавляете функцию в область закрытия myPlugin, которую нельзя назвать $ (). MyPlugin (). Function () ;, если вы используете $.extend($.fn.myPlugin, extensionMethods);, он добавит метод в контекст myPlugin, но фактически не расширит его.

Читать это https://github.com/mhuggins/jquery-ui-autocomplete-hints/blob/master/jquery.autocomplete.js

Answer 2

РЕДАКТИРОВАТЬ: на основе предоставленных ссылок.

Причина, по которой ваш secondAPI метод не работает, заключается в том, что $.fn.myPlugin является объектом Function, поэтому наследуется от этой цепочки прототипов. Чтобы создать экземпляр объекта, который наследуется от прототипа $.fn.myPlugin, вам нужно использовать оператор new, чтобы сначала создать новый объект $.fn.myPlugin.

Похоже, что используемый вами метод основан на фабрике виджетов jQuery. Посмотрите на источник для виджета jQuery UI (в частности, метод $.widget), а затем на источник чего-то, что использует фабрику виджетов jQuery UI.

Во-первых, виджет принимает в качестве второго аргумента конструктор объекта, который вы хотите расширить. Затем он создает объект этого типа с помощью оператора new, а затем расширяет этот объект с помощью метода, который вы показали. После этого он создает логику вашего плагина, используя метод $.widget.bridge, чтобы вы могли использовать плагин обычным способом, т.е. $(element).myPlugin();. Затем вы можете вызывать любые функции, используя $(element).myPlugin("apiMethod");

Я предлагаю вам прочитать источник и документацию, чтобы понять, что происходит. Тогда для вас может быть хорошей идеей использовать Widget Factory для своих собственных плагинов. Это действительно хорошая работа, которая избавляет вас от необходимости кодировать часть расширения ваших собственных плагинов.