Что означает этот синтаксис JavaScript / jQuery?

Question

Что означает следующий синтаксис?

(function($){
    $.fn.columnize = function(options) {
    ...

Что такое function($)?

Что такое $.fn. …?

Answer 1

Это соглашение используется при написании плагинов, чтобы гарантировать отсутствие конфликта с другими библиотеками Javascript, использующими нотацию $, в то же время гарантируя, что автор плагина по-прежнему может использовать это примечание:

(function($){
    ...
})(jQuery); 

Автор объявляет анонимную функцию с одним параметром ($), затем немедленно вызывает ее и передает ей объект jQuery. Это гарантирует, что функция вызывается и что все в ней определено.

Более длинная запись может быть:

function MyDefs($){
    ...
}
MyDefs(jQuery);

Хотя это создаст переменную MyDefs в глобальном пространстве имен. Шаблон анонимной функции оставляет глобальное пространство имен пустым, избегая конфликтов.

Answer 2

Он объявляет функцию columnize как плагин jQuery, позволяющий использовать его на таких элементах, как этот $('.someSelector').columnize().Вы можете узнать больше об авторизации здесь .

Answer 3

Это, вероятно, расширение jQuery, которое в основном проходит (jQuery) в конце, как

(function($){
    //$ is jQuery here

    //added columnize function to existing jQuery object
    $.fn.columnize = function(options) {

    }

})(jQuery);

Answer 4

function($) {...} определяет анонимную функцию с формальным параметром с именем $.$.fn относится к свойству с именем fn объекта, на который ссылается переменная $.

Answer 5

Не смущайтесь $. На самом деле, $ является допустимым именем переменной в JavaScript (как и все переменные, содержащие $, source (PDF) ).

Итак, первая строка может быть перефразирована как

(function (someVariable) {

, что может выглядеть более распространенным. В остальном, да, это образец прокси, и ответ Джеймса Уайзмана объясняет, что происходит.

Answer 6

Я только что нашел это ... Это шаблон прокси?

Шаблон прокси

Объединение вышеизложенных знаний дает вам, как разработчику JavaScript, достаточно сил. Один из способов объединить это - внедрить шаблон прокси в JavaScript, включив основы аспектно-ориентированного программирования (AOP):

(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log(this, arguments);
    return proxied.apply(this, arguments);
  };
})();

Вышеприведенное оборачивает свой код в функцию, чтобы скрыть переменную «прокси». Это сохраняет setArray-метод jQuery в замыкании и перезаписывает его. Затем прокси регистрирует все вызовы метода и делегирует вызов оригиналу. Использование apply (this, arguments) гарантирует, что вызывающая сторона не сможет заметить разницу между оригинальным и проксируемым методом.