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

Question

Сайт jQuery перечисляет базовый синтаксис плагина для jQuery следующим образом:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's 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, потому что это не похоже наэто следует за любым синтаксисом, который я видел раньше.Итак, вот мой список вопросов:

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

    (the_function)( jQuery );
   

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

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

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

Answer 1

function(x){ 
    x...
}

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

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

function($){ 
    $...
}

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

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

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

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

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

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

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

ПОЧЕМУ?

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

ПОЧЕМУ НЕ ПРОСТО НАПИСАТЬ $ = jQuery?

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

Answer 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 Самостоятельно выполняемые функции

Answer 3

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

Пример:

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

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

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

Answer 4

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

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

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

Answer 5

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

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

Нет гарантии, что глобальная переменная $ доступна . По умолчанию 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 затем передается этой анонимной функции, которая безопасно именуется как локальная переменная $ внутри функции.

Answer 6

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

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

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

Answer 7

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

(function(foo){

  foo.fn.myPlugin = function() {


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


    });

  };
})( jQuery );