Я хотел бы понять синтаксис плагина jQuery

На сайте jQuery указан основной синтаксис плагина для jQuery:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

Я просто хотел бы понять, что происходит там с точки зрения Javascript, потому что это не похоже на какой-либо синтаксис, который я видел раньше. Итак, вот мой список вопросов:

  • Если вы замените функцию ($)... на переменную, скажем, "the_function", синтаксис выглядит следующим образом:

     (the_function)( jQuery );

    Что такое "(jQuery)"; делать? Нужны ли скобки вокруг функции? Почему они там? Есть ли другой код, который вы можете дать, который схож?

  • Он начинается с функции ($). Так что это создание функции, которая, насколько я могу судить, никогда не будет запущена, с параметром $, который уже определен? Что там происходит?

Спасибо за помощь!

ОТВЕТЫ

Ответ 1

function(x){ 
    x...
}

- это просто функция без имени, которая принимает один аргумент "x" и делает вещи с x.

Вместо "x", который является общим именем переменной, вы можете использовать $, который является менее распространенным именем переменной, но все еще законным.

function($){ 
    $...
}

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

(function($){
    $....
})

Чтобы вызвать функцию, вы поместите() после нее список аргументов. Например, если бы мы хотели вызвать эту функцию, проходящую через 3 для значения $, мы сделали бы это:

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

Просто для ударов, позвоните в эту функцию и передайте jQuery как переменную:

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

Это создает новую функцию, которая принимает один аргумент, а затем вызывает эту функцию, передавая в jQuery значение.

Почему?

  • Поскольку запись jQuery каждый раз, когда вы хотите что-то делать с jQuery, утомительно.

ЗАЧЕМ НЕ ТОЛЬКО ПИСАТЬ $ = jQuery?

  • Потому что кто-то другой мог бы определить $для обозначения чего-то другого. Это гарантирует, что любые другие значения $будут затенены этим.

Ответ 2

(function( $ ){

})( jQuery );

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

Вы также можете написать любой символ вместо $:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Здесь j автоматически догонит jQuery, указанный в конце (jQuery). Или вы можете полностью исключить аргумент, но тогда вам придется использовать jQuery ключевое слово вокруг, а не $, не опасаясь столкновения. Итак, $ заключен в аргумент для коротких рук, так что вы можете писать $ вместо jQuery внутри этой функции.

Если вы даже посмотрите исходный код jQuery, вы увидите, что все обернуто между:

(function( window, undefined ) {
  // jQuery code
})(window);

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

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

Интересно, что я ответил на аналогичный вопрос:

Синтаксис функции закрытия JavaScript/jQuery

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

Функции самозавершения Javascript

Ответ 3

Синтаксис основного плагина позволяет использовать $ для обозначения jQuery в теле вашего плагина независимо от идентификации $ во время загрузки плагина. Это предотвращает конфликты имен с другими библиотеками, в первую очередь Prototype.

Синтаксис определяет функцию, которая принимает параметр, известный как $, поэтому вы можете ссылаться на него как $ в теле функции, а затем сразу вызывает эту функцию, вставляя jQuery в качестве аргумента.

Это также помогает не загрязнять глобальное пространство имен (поэтому объявление var myvar = 123; в вашем модуле плагина не будет определять window.myvar), но основная якобы цель - позволить вам использовать $, где $ может с тех пор были переопределены.

Ответ 4

Вы имеете дело с самоназывающей анонимной функцией. Это как "лучшая практика", чтобы обернуть плагин jQuery внутри такой функции, чтобы убедиться, что знак $ привязан к объекту jQuery.

Пример:

(function(foo) {
    alert(foo);
}('BAR'));

Это будет предупреждать BAR при вводе в блок <script>. Параметр BAR передается функции, которая сама вызывает.

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

Ответ 5

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

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Ответ 6

Чтобы найти ясное объяснение этого и других современных трюков и обычных практик javascript, я рекомендую прочитать Javascript Garden.

http://bonsaiden.github.com/JavaScript-Garden/

Это особенно полезно, поскольку многие из этих шаблонов широко используются во многих библиотеках, но не объясняются.

Ответ 7

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

Итак, это создает функцию, которая, насколько я могу судить, никогда не будет запущена, с параметром $, который уже определен?

Нет гарантии, что глобальная переменная $ доступна. По умолчанию jQuery создает две переменные в глобальной области: $ и jQuery (где эти два являются псевдонимами для одного и того же объекта). Однако jQuery также можно запустить в режиме noConflict:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Когда вы вызываете jQuery.noConflict(), глобальная переменная $ устанавливается на все, что было до того, как была включена библиотека jQuery. Это позволяет использовать jQuery с другими библиотеками Javascript, которые также используют $ как глобальную переменную.

Если вы написали плагин, на котором $ был псевдонимом для jQuery, ваш плагин не будет работать для пользователей, работающих в режиме noConflict.

Как уже объяснили другие, код, который вы отправили, создает анонимную функцию, которая вызывается немедленно. Затем глобальная переменная jQuery передается этой анонимной функции, которая безопасно псевдонижается как локальная переменная $ внутри функции.