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

[Edit] 7 месяцев

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

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

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

[оригинальный]

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

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

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

ссылки:

• Github
• документация
• тесты подтверждено, чтобы пройти в FF4, Chrome и IE9 (IE8 & OP11 умирает. известный ошибка).
• Аннотированный Исходный Код
• плагин PlaceKitten example

для сравнения:

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

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

методы ОО

лучше придерживаться правильного 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 на основе ОО люди привыкли. Этот подход предпочтителен, потому что он подкрепляет концепцию, что в JavaScript есть только объекты, и это прототипический подход OO.

[getEventNs]

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

[getData]

этот метод был заменен на a .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 в завернутый элемент и каждый HTMLElement будут обернуты только один раз. Это кэширование дает вам значительное сокращение памяти.

$.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 перегрузками метода!) и достаточно стандартный, чтобы привыкнуть к syntnax для каждого метода, который ваш плагин будет выставлять.

общественного воздействия

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

внутренние defaults объект также отображается как $.PLUGIN_NAME.global. Это позволяет пользователям переопределить настройки по умолчанию и установить плагин 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 объект действует аналогично вашему