Объясните этот код 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]" для publicMethod?

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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