Разработка плагина jQuery: как правильно использовать цепочку?

Я пытаюсь сделать простой плагин jQuery. Я хотел бы назвать его методами, связанными следующим образом:

$("#div").myPlugin({
    /* options */
}).add(".span", {
    /* options */
}).add(".span", {
    /* options */
}).run();

Я нашел несколько основных руководств для таких вызовов:

$("#div").myPlugin("add", "foo");

or

container = $("#div").myPlugin();
container.myPlugin.add("foo");
container.myPlugin.run();

но это не то, что я хочу. Базовые туториалы почти везде одинаковые, и я не знаю, зачем мне гуглить.

В руководстве по jQuery показано, как поддерживать цепочку.

Единственный способ, который я знаю, это написать плагин для каждого метода, но мне это кажется грязным.

jQuery.fn.myPlugin = function(); // returns this
jQuery.fn.myPluginAdd = function(); // returns this
jQUery.fn.myPluginRun = function();
$("#div").myPlugin().myPluginAdd("item1").myPluginRun();

Заранее спасибо!


plugins jquery method-chaining jquery-plugins
person Mr. B.    schedule 11.01.2013    source источник
comment
Связность означает, что область плагинов возвращает элемент this, что позволяет вам связать другие плагины или так называемые методы jQuery с нужным (this) элементом (селектором элементов). Если бы мы знали, чего вы пытаетесь достичь (в базовом примере), это сделало бы ваш вопрос более ясным.   -  person Roko C. Buljan    schedule 11.01.2013
comment
@roXon Я знаю о цепочке в целом, но не знаю, как это сделать при разработке плагинов jQuery. Я упомянул свою цель выше в первых строках кода. Я должен вернуть это в каждом методе, но не знаю, как и где разместить общедоступные методы. Это просто синтаксис-проблема, в общем я знаю что делать. Но спасибо за ваш ответ!   -  person Mr. B.    schedule 11.01.2013

Ответы (2)


arrow_upward
1
arrow_downward

Как вы сказали, «это кажется мне грязным», это именно то, о чем вы упомянули на странице jQuery:

Ни при каких обстоятельствах один плагин не должен требовать более одного пространства имен в объекте jQuery.fn.

(function( $ ){

  $.fn.tooltip = function( options ) { 
    // THIS
  };
  $.fn.tooltipShow = function( ) {
    // IS
  };
  $.fn.tooltipHide = function( ) { 
    // BAD
  };
  $.fn.tooltipUpdate = function( content ) { 
    // !!!  
  };

})( jQuery );

Цепность - это все о том, что вы возвращаете. Если вы хотите связать методы из вашего плагина, вам придется вернуть объект, содержащий ваши методы. Скрипт: http://jsfiddle.net/ma4nj/

Как видите, при первом вызове yourPlugin() возвращается объект, содержащий методы вашего плагина. Таким образом, вы можете связать yourPlugin с другими методами класса Methods.

Если вы посмотрите на функцию add(), вы увидите, что я снова вернул экземпляр, так что здесь ничего нового, как я только что объяснил, я сделал это, чтобы методы можно было объединить в цепочку.

Попробуйте, попробуйте добавить свои собственные методы. Имейте в виду, что с помощью этой техники вы не сможете связать методы своих плагинов с методами jQuery. На самом деле вы можете, если добавите в плагин метод для отключения цепочки плагинов, например: http://jsfiddle.net/ma4nj/1/

Вероятно, есть лучший способ сделать то, что я сделал, но я надеюсь, что это все равно поможет.

person wakooka    schedule 11.01.2013
comment
Это именно то, что я хотел. Большое спасибо! :-) - person Mr. B.; 11.01.2013

arrow_upward
1
arrow_downward

Bombastic, для плагина есть лучший учебник, доступный в сети, ниже:

https://tutsplus.com/author/jeffreyway/?q=true&filter_topic=35

Я видел его видео с плагином jquery. Действительно приятно видеть и учиться у него.

person Sangeeta    schedule 11.01.2013