Как создать плагин jQuery с методами?

Передача значением отправляет КОПИЮ данных, хранивших в переменной, которую Вы определяете, передача ссылкой отправляет прямую ссылку к самой переменной. Таким образом, если Вы передаете переменную ссылкой и затем заменяете переменную в блоке, Вы передали его в, исходная переменная будет заменена. Если Вы просто передадите значением, исходная переменная не будет в состоянии быть замененной блоком, в который Вы передали его, но Вы получите копию того, что это содержало во время вызова.

188
задан Yuval Karmi 18 November 2013 в 17:42
поделиться

3 ответа

Как насчет этого подхода:

jQuery.fn.messagePlugin = function(){
    var selectedObjects = this;
    return {
             saySomething : function(message){
                              $(selectedObjects).each(function(){
                                $(this).html(message);
                              });
                              return selectedObjects; // Preserve the jQuery chainability 
                            },
             anotherAction : function(){
                               //...
                               return selectedObjects;
                             }
           };
}
// Usage:
$('p').messagePlugin().saySomething('I am a Paragraph').css('color', 'red');

Выбранные объекты сохраняются в закрытии messagePlugin, и эта функция возвращает объект, который содержит функции, связанные с плагином, в каждой функции, которую вы можете выполнять желаемые действия с текущими выбранными объектами.

Вы можете протестировать и поиграть с кодом здесь .

Изменить: Обновленный код, чтобы сохранить возможности цепочки jQuery.

35
ответ дан 23 November 2019 в 05:42
поделиться

Вот шаблон, который я использовал для создания плагинов с дополнительными методами. Вы могли бы использовать его как:

$('selector').myplugin( { key: 'value' } );

или, чтобы вызвать метод напрямую,

$('selector').myplugin( 'mymethod1', 'argument' );

Пример:

;(function($) {

    $.fn.extend({
        myplugin: function(options,arg) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.myplugin.defaults, options );
            }

            // this creates a plugin for each element in
            // the selector or runs the function once per
            // selector.  To have it do so for just the
            // first element (once), return false after
            // creating the plugin to stop the each iteration 
            this.each(function() {
                new $.myplugin(this, options, arg );
            });
            return;
        }
    });

    $.myplugin = function( elem, options, arg ) {

        if (options && typeof(options) == 'string') {
           if (options == 'mymethod1') {
               myplugin_method1( arg );
           }
           else if (options == 'mymethod2') {
               myplugin_method2( arg );
           }
           return;
        }

        ...normal plugin actions...

        function myplugin_method1(arg)
        {
            ...do method1 with this and arg
        }

        function myplugin_method2(arg)
        {
            ...do method2 with this and arg
        }

    };

    $.myplugin.defaults = {
       ...
    };

})(jQuery);
56
ответ дан 23 November 2019 в 05:42
поделиться

Более простой подход заключается в использовании вложенных функций. Тогда их можно соединить в цепочку объектно-ориентированным способом. Пример:

jQuery.fn.MyPlugin = function()
{
  var _this = this;
  var a = 1;

  jQuery.fn.MyPlugin.DoSomething = function()
  {
    var b = a;
    var c = 2;

    jQuery.fn.MyPlugin.DoSomething.DoEvenMore = function()
    {
      var d = a;
      var e = c;
      var f = 3;
      return _this;
    };

    return _this;
  };

  return this;
};

А вот как ее вызвать:

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();

Будьте осторожны. Вы не можете вызвать вложенную функцию, пока она не создана. Поэтому вы не можете сделать следующее:

var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin.DoSomething.DoEvenMore();
pluginContainer.MyPlugin.DoSomething();

Функция DoEvenMore даже не существует, потому что функция DoSomething еще не была запущена, что необходимо для создания функции DoEvenMore. Для большинства плагинов jQuery действительно достаточно одного уровня вложенных функций, а не двух, как я показал здесь.
Просто убедитесь, что при создании вложенных функций вы определяете эти функции в начале их родительской функции до того, как будет выполнен любой другой код в родительской функции.

Наконец, обратите внимание, что член "this" хранится в переменной под названием "_this". Для вложенных функций вы должны возвращать "_this", если вам нужна ссылка на экземпляр в вызывающем клиенте. Вы не можете просто вернуть "this" во вложенной функции, потому что в этом случае будет возвращена ссылка на функцию, а не на экземпляр jQuery. Возвращение ссылки jQuery позволяет вам цепочку внутренних методов jQuery при возврате.

13
ответ дан 23 November 2019 в 05:42
поделиться
Другие вопросы по тегам:

Похожие вопросы: