Подробно объясните этот код ColorBox

Question

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

publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) { 
    // do stuff... 
}; 

Другие государственные методы затем определены такие как:

publicMethod.remove = function() { 
    // do more stuff 
}; 

На практике, я знаю, что эти функции, то можно назвать $ .colorbox() и $ .colorbox.remove(), но я немного смущен действительным синтаксисом. В частности, что происходит, когда он назначает «$ .fn [colorbox]» и «$ [colorbox]» to publicMethod?

У вас есть какие-либо комментарии к этому коду? Это хороший дизайн? Есть ли другие шаблоны, которые вы бы порекомендовали?

Answer 1

В JavaScript каждый объект является ассоциативным массивом в одно и то же время, свойства объекта также являются ключами массива. Это означает, что obj.prop = 1 и obj["prop"] = 1 - это точно то же самое. Кроме того, методы - это просто свойства, которые имеют функцию как свое значение. Таким образом, $["colorbox"] = function() {...} создает анонимную функцию и назначает ее как свойство colorbox объекта $ ($ - это имя переменной в JavaScript), тогда эта функция становится методом $.colorbox(). Обратите внимание, что я использовал строку "colorbox", ваш пример кода имеет ее без кавычек, но это будет интерпретироваться как имя переменной, поэтому переменная colorbox со значением "colorbox", вероятно, используется там.

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

Answer 2

В соответствии с руководством по использованию JavaScript в Mozilla квадратные скобки используются в качестве аксессуаров для доступа в этом случае. См. https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects

Answer 3

Автор и автор Colorbox, и я хотел сказать, что Владимир в точности прав. Я использовал обозначение в виде скобок, чтобы переменная (colorbox) могла быть сокращена при запуске с помощью минитератора, поскольку одна и та же строка использовалась повторно в источнике.

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

Так что $ .colorbox, $ .fn.colorbox и publicMethod указывают на один и тот же объект. Когда новое свойство добавляется в publicMethod (т.е. publicMethod.remove = function() {};), $ .fn.colorbox также получает свойство как ссылку на тот же объект.

$ .fn.pluginName - это соглашение для плагинов jQuery, а $ .colorbox - это просто псевдоним для этого. publicMethod был сокращением для $ .fn.colorbox, используемого в плагине, который был бы сокращен, когда скрипт был передан через minifier.