Шаблон jQuery plugin - лучшая практика, соглашение, производительность и влияние памяти

Я начал писать несколько плагинов jQuery и понял, что было бы неплохо настроить мою среду IDE с помощью шаблона плагина jQuery.

Я читал некоторые статьи и сообщения на этом сайте, связанные с соглашением плагинов, дизайном и т.д., и думал, что я попытаюсь объединить все это.

Ниже мой шаблон, я ищу его использовать часто, поэтому он был заинтересован в том, чтобы он в целом соответствовал соглашению по дизайну плагина jQuery и мог ли идея иметь несколько внутренних методов (или даже общий дизайн) повлиять на производительность и быть подверженными к проблемам памяти.

(function($)
{
    var PLUGIN_NAME = "myPlugin"; // TODO: Plugin name goes here.
    var DEFAULT_OPTIONS =
    {
        // TODO: Default options for plugin.
    };
    var pluginInstanceIdCount = 0;

    var I = function(/*HTMLElement*/ element)
    {
        return new Internal(element);
    };

    var Internal = function(/*HTMLElement*/ element)
    {
        this.$elem = $(element);
        this.elem = element;
        this.data = this.getData();

        // Shorthand accessors to data entries:
        this.id = this.data.id;
        this.options = this.data.options;
    };

    /**
     * Initialises the plugin.
     */
    Internal.prototype.init = function(/*Object*/ customOptions)
    {
        var data = this.getData();

        if (!data.initialised)
        {
            data.initialised = true;
            data.options = $.extend(DEFAULT_OPTIONS, customOptions);

            // TODO: Set default data plugin variables.
            // TODO: Call custom internal methods to intialise your plugin.
        }
    };

    /**
     * Returns the data for relevant for this plugin
     * while also setting the ID for this plugin instance
     * if this is a new instance.
     */
    Internal.prototype.getData = function()
    {
        if (!this.$elem.data(PLUGIN_NAME))
        {
            this.$elem.data(PLUGIN_NAME, {
                id : pluginInstanceIdCount++,
                initialised : false
            });
        }

        return this.$elem.data(PLUGIN_NAME);
    };

    // TODO: Add additional internal methods here, e.g. Internal.prototype.<myPrivMethod> = function(){...}

    /**
     * Returns the event namespace for this widget.
     * The returned namespace is unique for this widget
     * since it could bind listeners to other elements
     * on the page or the window.
     */
    Internal.prototype.getEventNs = function(/*boolean*/ includeDot)
    {
        return (includeDot !== false ? "." : "") + PLUGIN_NAME + "_" + this.id;
    };

    /**
     * Removes all event listeners, data and
     * HTML elements automatically created.
     */
    Internal.prototype.destroy = function()
    {
        this.$elem.unbind(this.getEventNs());
        this.$elem.removeData(PLUGIN_NAME);

        // TODO: Unbind listeners attached to other elements of the page and window.
    };

    var publicMethods =
    {
        init : function(/*Object*/ customOptions)
        {
            return this.each(function()
            {
                I(this).init(customOptions);
            });
        },

        destroy : function()
        {
            return this.each(function()
            {
                I(this).destroy();
            });
        }

        // TODO: Add additional public methods here.
    };

    $.fn[PLUGIN_NAME] = function(/*String|Object*/ methodOrOptions)
    {
        if (!methodOrOptions || typeof methodOrOptions == "object")
        {
            return publicMethods.init.call(this, methodOrOptions);
        }
        else if (publicMethods[methodOrOptions])
        {
            var args = Array.prototype.slice.call(arguments, 1);

            return publicMethods[methodOrOptions].apply(this, args);
        }
        else
        {
            $.error("Method '" + methodOrOptions + "' doesn't exist for " + PLUGIN_NAME + " plugin");
        }
    };
})(jQuery);

Спасибо заранее.

Ответ 1

[Изменить] 7 месяцев спустя

Цитата из проекта github

jQuery не годится, а плагины jQuery - это не как модульный код.

Серьезно "плагины jQuery" не являются звуковой архитектурой. Написание кода с жесткой зависимостью от jQuery также глупо.

[Оригинал]

Поскольку я дал критику в отношении этого шаблона, я предложу альтернативу.

Чтобы сделать жизнь проще, это зависит от jQuery 1.6+ и ES5 (используйте ES5 Shim).

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

Ссылки:

Сравнение:

Я реорганизовал шаблон так, чтобы он разделился на шаблон (85%) и код леса (15%). Цель состоит в том, что вам нужно только отредактировать код леса, и вы можете оставить шаблонный шаблон без изменений. Для этого я использовал

  • inheritance var self = Object.create(Base) Вместо того, чтобы редактировать класс Internal, который у вас есть, вы должны отредактировать подкласс. Все ваши шаблоны/функции по умолчанию должны быть в базовом классе (называемом Base в моем коде).
  • convention self[PLUGIN_NAME] = main; По соглашению плагин, определенный в jQuery, по умолчанию определяет метод define на self[PLUGIN_NAME]. Это считается модулем плагина main и для ясности имеет отдельный внешний метод.
  • Патч обезьяны $.fn.bind = function _bind ... Использование патчей для обезьян означает, что пространство имен событий выполняется автоматически для вас под капотом. Эта функциональность бесплатна и не требует затрат на чтение (вызывается getEventNS все время).

Методы OO

Лучше придерживаться надлежащего JavaScript OO, а не классической эмуляции OO. Для этого вы должны использовать Object.create. (ES5 просто использует прокладку для обновления старых браузеров).

var Base = (function _Base() {
    var self = Object.create({}); 
    /* ... */
    return self;
})();

var Wrap = (function _Wrap() {
    var self = Object.create(Base);
    /* ...  */
    return self;
})();

var w = Object.create(Wrap);

Это отличается от стандартных new и .prototype основанных на OO людей. Этот подход предпочтителен, поскольку он повторно раскрывает концепцию о том, что в JavaScript есть только объекты и это прототипный подход OO.

[getEventNS]

Как упоминалось, этот метод был реорганизован путем переопределения .bind и .unbind для автоматического ввода пространств имен. Эти методы перезаписываются в частной версии jQuery $.sub(). Переписанные методы ведут себя так же, как это делает пространство имен. Он namespaces события уникально основаны на плагине и экземпляре оболочки плагина вокруг HTMLElement (используя .ns.

[getData]

Этот метод был заменен на метод .data, который имеет тот же API, что и jQuery.fn.data. Тот факт, что он тот же API упрощает его использование, в основном представляет собой тонкую оболочку вокруг jQuery.fn.data с пространством имен. Это позволяет вам устанавливать данные пары ключ/значение, которые немедленно сохраняются только для этого плагина. Несколько плагинов могут использовать этот метод параллельно без конфликтов.

[publicMethods]

Объект publicMethods заменен любым способом, который определен на Wrap, автоматически публичным. Вы можете вызвать любой метод на обернутом объекте напрямую, но на самом деле у вас нет доступа к обернутому объекту.

[$.fn[PLUGIN_NAME]]

Это было реорганизовано, поэтому оно предоставляет более стандартизованный API. Это api

$(selector).PLUGIN_NAME("methodName", {/* object hash */}); // OR
$(selector).PLUGIN_NAME({/* object hash */}); // methodName defaults to PLUGIN_NAME

элементы в селекторе автоматически завертываются в объект Wrap, метод вызывается или каждый выбранный элемент из селектора, а возвращаемое значение всегда равно $.Deferred.

Это стандартизирует API и возвращаемый тип. Затем вы можете вызвать .then по возвращенному отсроченному, чтобы получить фактические данные, о которых вы заботитесь. Использование отложенных здесь очень мощно для абстрагирования от того, является ли плагин синхронным или асинхронным.

_create

Добавлена ​​функция создания кеширования. Это вызвано, чтобы превратить HTMLElement в обернутый элемент, и каждый элемент HTMLE будет только один раз обернут. Это кэширование дает вам значительное сокращение памяти.

$.PLUGIN_NAME

Добавлен еще один общедоступный метод для плагина (всего два!).

$.PLUGIN_NAME(elem, "methodName", {/* options */});
$.PLUGIN_NAME([elem, elem2, ...], "methodName", {/* options */});
$.PLUGIN_NAME("methodName", { 
  elem: elem, /* [elem, elem2, ...] */
  cb: function() { /* success callback */ }
  /* further options */
});

Все параметры являются необязательными. elem по умолчанию <body>, "methodName" по умолчанию "PLUGIN_NAME" и {/* options */} по умолчанию {}.

Этот API очень гибкий (с 14 перегрузками методов!) и достаточно стандартным, чтобы привыкнуть к синтаксису для каждого метода, который будет выставлять ваш плагин.

Публичная экспозиция

Объекты Wrap, create и $ отображаются глобально. Это позволит пользователям расширенного плагина максимально использовать ваш плагин. Они могут использовать create и модифицированный subbed $ в своей разработке, а также патч обезьяны Wrap. Это позволяет, например, подключаться к вашим методам плагинов. Все три из них отмечены знаком _ перед их именем, поэтому они являются внутренними, и их использование нарушает гарантию, что ваш плагин работает.

Внутренний объект defaults также отображается как $.PLUGIN_NAME.global. Это позволяет пользователям переопределять ваши значения по умолчанию и устанавливать глобальный плагин defaults. В этой настройке плагина все хеши передаются в методы, поскольку объекты объединяются со значениями по умолчанию, поэтому это позволяет пользователям устанавливать глобальные значения по умолчанию для всех ваших методов.

Фактический код

(function($, jQuery, window, document, undefined) {
    var PLUGIN_NAME = "Identity";
    // default options hash.
    var defaults = {
        // TODO: Add defaults
    };

    // -------------------------------
    // -------- BOILERPLATE ----------
    // -------------------------------

    var toString = Object.prototype.toString,
        // uid for elements
        uuid = 0,
        Wrap, Base, create, main;

    (function _boilerplate() {
        // over-ride bind so it uses a namespace by default
        // namespace is PLUGIN_NAME_<uid>
        $.fn.bind = function  _bind(type, data, fn, nsKey) {
            if (typeof type === "object") {
                for (var key in type) {
                    nsKey = key + this.data(PLUGIN_NAME)._ns;
                    this.bind(nsKey, data, type[key], fn);
                }
                return this;
            }

            nsKey = type + this.data(PLUGIN_NAME)._ns;
            return jQuery.fn.bind.call(this, nsKey, data, fn);
        };

        // override unbind so it uses a namespace by default.
        // add new override. .unbind() with 0 arguments unbinds all methods
        // for that element for this plugin. i.e. calls .unbind(_ns)
        $.fn.unbind = function _unbind(type, fn, nsKey) {
            // Handle object literals
            if ( typeof type === "object" && !type.preventDefault ) {
                for ( var key in type ) {
                    nsKey = key + this.data(PLUGIN_NAME)._ns;
                    this.unbind(nsKey, type[key]);
                }
            } else if (arguments.length === 0) {
                return jQuery.fn.unbind.call(this, this.data(PLUGIN_NAME)._ns);
            } else {
                nsKey = type + this.data(PLUGIN_NAME)._ns;
                return jQuery.fn.unbind.call(this, nsKey, fn);    
            }
            return this;
        };

        // Creates a new Wrapped element. This is cached. One wrapped element 
        // per HTMLElement. Uses data-PLUGIN_NAME-cache as key and 
        // creates one if not exists.
        create = (function _cache_create() {
            function _factory(elem) {
                return Object.create(Wrap, {
                    "elem": {value: elem},
                    "$elem": {value: $(elem)},
                    "uid": {value: ++uuid}
                });
            }
            var uid = 0;
            var cache = {};

            return function _cache(elem) {
                var key = "";
                for (var k in cache) {
                    if (cache[k].elem == elem) {
                        key = k;
                        break;
                    }
                }
                if (key === "") {
                    cache[PLUGIN_NAME + "_" + ++uid] = _factory(elem);
                    key = PLUGIN_NAME + "_" + uid;
                } 
                return cache[key]._init();
            };
        }());

        // Base object which every Wrap inherits from
        Base = (function _Base() {
            var self = Object.create({});
            // destroy method. unbinds, removes data
            self.destroy = function _destroy() {
                if (this._alive) {
                    this.$elem.unbind();
                    this.$elem.removeData(PLUGIN_NAME);
                    this._alive = false;    
                }
            };

            // initializes the namespace and stores it on the elem.
            self._init = function _init() {
                if (!this._alive) {
                    this._ns = "." + PLUGIN_NAME + "_" + this.uid;
                    this.data("_ns", this._ns);    
                    this._alive = true;
                }
                return this;
            };

            // returns data thats stored on the elem under the plugin.
            self.data = function _data(name, value) {
                var $elem = this.$elem, data;
                if (name === undefined) {
                    return $elem.data(PLUGIN_NAME);
                } else if (typeof name === "object") {
                    data = $elem.data(PLUGIN_NAME) || {};
                    for (var k in name) {
                        data[k] = name[k];
                    }
                    $elem.data(PLUGIN_NAME, data);
                } else if (arguments.length === 1) {
                    return ($elem.data(PLUGIN_NAME) || {})[name];
                } else  {
                    data = $elem.data(PLUGIN_NAME) || {};
                    data[name] = value;
                    $elem.data(PLUGIN_NAME, data);
                }
            };
                return self;
        })();

        // Call methods directly. $.PLUGIN_NAME(elem, "method", option_hash)
        var methods = jQuery[PLUGIN_NAME] = function _methods(elem, op, hash) {
            if (typeof elem === "string") {
                hash = op || {};
                op = elem;
                elem = hash.elem;
            } else if ((elem && elem.nodeType) || Array.isArray(elem)) {
                if (typeof op !== "string") {
                    hash = op;
                    op = null;
                }
            } else {
                hash = elem || {};
                elem = hash.elem;
            }

            hash = hash || {}
            op = op || PLUGIN_NAME;
            elem = elem || document.body;
            if (Array.isArray(elem)) {
                var defs = elem.map(function(val) {
                    return create(val)[op](hash);    
                });
            } else {
                var defs = [create(elem)[op](hash)];    
            }

            return $.when.apply($, defs).then(hash.cb);
        };

        // expose publicly.
        Object.defineProperties(methods, {
            "_Wrap": {
                "get": function() { return Wrap; },
                "set": function(v) { Wrap = v; }
            },
            "_create":{
                value: create
            },
            "_$": {
                value: $    
            },
            "global": {
                "get": function() { return defaults; },
                "set": function(v) { defaults = v; }
             }
        });

        // main plugin. $(selector).PLUGIN_NAME("method", option_hash)
        jQuery.fn[PLUGIN_NAME] = function _main(op, hash) {
            if (typeof op === "object" || !op) {
                hash = op;
                op = null;
            }
            op = op || PLUGIN_NAME;
            hash = hash || {};

            // map the elements to deferreds.
            var defs = this.map(function _map() {
                return create(this)[op](hash);
            }).toArray();

            // call the cb when were done and return the deffered.
            return $.when.apply($, defs).then(hash.cb);

        };
    }());

    // -------------------------------
    // --------- YOUR CODE -----------
    // -------------------------------

    main = function _main(options) {
        this.options = options = $.extend(true, defaults, options); 
        var def = $.Deferred();

        // Identity returns this & the $elem.
        // TODO: Replace with custom logic
        def.resolve([this, this.elem]);

        return def;
    }

    Wrap = (function() {
        var self = Object.create(Base);

        var $destroy = self.destroy;
        self.destroy = function _destroy() {
            delete this.options;
            // custom destruction logic
            // remove elements and other events / data not stored on .$elem

            $destroy.apply(this, arguments);
        };

        // set the main PLUGIN_NAME method to be main.
        self[PLUGIN_NAME] = main;

        // TODO: Add custom logic for public methods

        return self;
    }());

})(jQuery.sub(), jQuery, this, document);

Как видно, код, который вы должны изменить, находится ниже строки YOUR CODE. Объект Wrap действует аналогично вашему объекту Internal.

Функция main - это основная функция, вызываемая с помощью $.PLUGIN_NAME() или $(selector).PLUGIN_NAME() и должна содержать основную логику.

Ответ 2

В то время как назад я создал генератор плагина на основе статьи в блоге, которую я прочитал: http://jsfiddle.net/KeesCBakker/QkPBF/. Это может быть полезно. Это довольно простой и прямой. Любые комментарии были бы очень желанными.

Вы можете разветкить свой собственный генератор и изменить его на свои нужды.

Ps. Это сгенерированное тело:

(function($){

    //My description
    function MyPluginClassName(el, options) {

        //Defaults:
        this.defaults = {
            defaultStringSetting: 'Hello World',
            defaultIntSetting: 1
        };

        //Extending options:
        this.opts = $.extend({}, this.defaults, options);

        //Privates:
        this.$el = $(el);
    }

    // Separate functionality from object creation
    MyPluginClassName.prototype = {

        init: function() {
            var _this = this;
        },

        //My method description
        myMethod: function() {
            var _this = this;
        }
    };

    // The actual plugin
    $.fn.myPluginClassName = function(options) {
        if(this.length) {
            this.each(function() {
                var rev = new MyPluginClassName(this, options);
                rev.init();
                $(this).data('myPluginClassName', rev);
            });
        }
    };
})(jQuery);

Ответ 3

Я прибегаю к поиску и приземляюсь здесь, поэтому я должен опубликовать некоторые идеи: сначала я согласен с @Рейносом.

Самый код, который пытается построить плагин jQuery на самом деле... не является плагином! Это просто объект, хранящийся в памяти, на который ссылается свойство данных элемента node/. Это потому, что jQuery следует рассматривать и использовать в качестве инструмента рядом с библиотекой классов (для устранения несоответствий js из архитектуры OO) для создания лучшего кода и да, это совсем не плохо!

Если вам не нравится классическое поведение OO, придерживайтесь прототипной библиотеки, например clone.

Итак, какие наши варианты действительно?

  • используйте JQueryUI/Widget или аналогичную библиотеку, которая скрывает технические и обеспечивает абстракцию
  • не использовать их из-за сложностей, кривой обучения, а бог знает о будущих изменениях.
  • не используйте их, потому что вы хотите настаивать на модульном дизайне, создавать небольшие увеличения позже
  • не использовать их, потому что вам может понадобиться портирование/подключение вашего кода с различными библиотеками.

Предположим, что проблемы рассмотрены в следующем сценарии (см. сложности из этого вопроса: Какой шаблон дизайна плагина jQuery следует использовать?):

мы имеем узлы A, B и C, которые хранят ссылку на объект в свойстве data

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

Что мы будем делать? См. Рисунок:

classes : |  A        B         C
------------------case 1----------
members   |  |        |         |
  of      |  v        v         v
an object | var a=new A, b=new B,  c=new C
  at      |     B extends A
node X :  |  a, b, c : private
------------------case 2---------
members   |  |        |         |
  of      |  v        v         v
an object | var aa=new A, bb=new B, cc=new C
  at      |     BB extends AA
node Y :  |  aa, bb, cc : public
-------------------case 3--------
members   |  |        |         |
  of      |  v        v         v
an object | var d= D.getInstance() (private),
  at      |     e= E.getInstance() (public)
node Z :  |     D, E : Singletons

как вы можете видеть, каждый node относится к объекту - к подходу jQuery - но эти объекты сильно меняются; они содержат свойства объекта с различными данными, хранящимися в или даже синглтонами, которые должны быть... единичными в памяти, такими как прототипные функции объектов. Мы не хотим, чтобы каждая объектная функция, относящаяся к class A, была повторно дублирована в памяти в каждом объекте node!

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

(function($, window, document, undefined){
   var x = '...', y = '...', z = '...',
       container, $container, options;
   var myPlugin = (function(){ //<----the game is lost!
      var defaults = {

      };
      function init(elem, options) {
         container = elem;
         $container = $(elem);
         options = $.extend({}, defaults, options);
      }
      return {
         pluginName: 'superPlugin',
         init: function(elem, options) {
            init(elem, options);
         }
      };
   })();
   //extend jquery
   $.fn.superPlugin = function(options) {
      return this.each(function() {
         var obj = Object.create(myPlugin); //<---lose, lose, lose!
         obj.init(this, options);
         $(this).data(obj.pluginName, obj);
      });
   };

}(jQuery, window, document));

Я смотрел несколько слайдов по адресу: http://www.slideshare.net/benalman/jquery-plugin-creation от Ben Alman, где он ссылается на слайд 13 на литералы объектов как синглтоны, и это просто сбивает меня с толку: это то, что делает этот вышеприведенный плагин, он создает один синглтон с без каких-либо возможностей, чтобы изменить его внутреннее состояние!!!

Кроме того, в части jQuery он хранит общую ссылку для каждого node!

В моем решении используется factory, чтобы сохранить внутреннее состояние и вернуть объект, а также его можно расширить с помощью библиотеки class и разделить на разные файлы:

;(function($, window, document, undefined){
   var myPluginFactory = function(elem, options){
   ........
   var modelState = {
      options: null //collects data from user + default
   };
   ........
   function modeler(elem){
      modelState.options.a = new $$.A(elem.href);
      modelState.options.b = $$.B.getInstance();
   };
   ........
   return {
         pluginName: 'myPlugin',
         init: function(elem, options) {
            init(elem, options);
         },
         get_a: function(){return modelState.options.a.href;},
         get_b: function(){return modelState.options.b.toString();}
      };
   };
   //extend jquery
   $.fn.myPlugin = function(options) {
      return this.each(function() {
         var plugin = myPluginFactory(this, options);
         $(this).data(plugin.pluginName, plugin);
      });
   };
}(jQuery, window, document));

Мой проект: https://github.com/centurianii/jsplugin

Смотрите: http://jsfiddle.net/centurianii/s4J2H/1/

Ответ 4

Как насчет чего-то подобного? Это гораздо более ясно, но снова было бы приятно услышать от вас, если вы можете улучшить без лишних излишних излишней простоты.

//jQuery plugin Templet
(function($){
    $.myPlugin = function(options) { //or use "$.fn.myPlugin" or "$.myPlugin" to call it globaly directly from $.myPlugin();
        var defaults = {
            target: ".box",
            buttons: "li a"             
        };

        options = $.extend(defaults, options);

        function logic(){
            //... code goes here
        }

        //DEFINE WHEN TO RUN THIS PLUGIN
        $(window).on('load resize', function () { //load and resize as example ... use what ever you like
            logic();
        });

        // RETURN OBJECT FOR CHAINING
        // return this;

        // OR FOR FOR MULTIPLE OBJECTS
        // return this.each(function() {
        //    // Your code ...
        // });

    };
})(jQuery);


// USE EXAMPLE with default settings
$.myPlugin(); // or run plugin with default settings like so.

// USE EXAMPLE with overwriten settings
var options = {
    target: "div.box", // define custom options
    buttons: ".something li a" // define custom options
}     
$.myPlugin(options); //or run plugin with overwriten default settings