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

Question 1

На сайте 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, потому что не похоже, что он следует какому-либо синтаксису, который я видел раньше в JS. Итак, вот мой список вопросов:

Если вы замените функцию ($) ... переменной, скажем "the_function", синтаксис будет выглядеть следующим образом:
```
 (the_function)( jQuery );
```
Что такое "(jQuery);" делаешь? Действительно ли нужны круглые скобки вокруг the_function? Почему они там? Есть ли другой похожий фрагмент кода?
Он начинается с функции ($). Итак, он создает функцию, которая, насколько я могу судить, никогда не будет запущена, с параметром $, который уже определен? Что там происходит?

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

Question 2

function(x){ 
    x...
}

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

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

function($){ 
    $...
}

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

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

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

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

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

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

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

ЗАЧЕМ?

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

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

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

Question 3

(function( $ ){

})( jQuery );

Это самоисполняющаяся анонимная функция, которая использует $аргумент in, чтобы вы могли использовать it ( $) вместо 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

Question 4

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

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

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

Question 5

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

Пример:

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

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

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

Question 6

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

(function(foo){

  foo.fn.myPlugin = function() {


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


    });

  };
})( jQuery );

Question 7

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

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

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

Question 8

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

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

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

На сайте 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, потому что не похоже, что он следует какому-либо синтаксису, который я видел раньше в JS. Итак, вот мой список вопросов:

Если вы замените функцию ($) ... переменной, скажем "the_function", синтаксис будет выглядеть следующим образом:
```
 (the_function)( jQuery );
```
Что такое "(jQuery);" делаешь? Действительно ли нужны круглые скобки вокруг the_function? Почему они там? Есть ли другой похожий фрагмент кода?
Он начинается с функции ($). Итак, он создает функцию, которая, насколько я могу судить, никогда не будет запущена, с параметром $, который уже определен? Что там происходит?

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

Answer 2

function(x){ 
    x...
}

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

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

function($){ 
    $...
}

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

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

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

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

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

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

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

ЗАЧЕМ?

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

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

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

Answer 3

20

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

Pointy

Answer 4

16

(function(){})()известен как IIFE (выражение немедленного вызова функции) . Пусть это будет известно , что вы можете использовать другие символы , чтобы заставить парсер рассматривать функцию как выражение , например , как +,!,-,~(и другие) , как это: !function($){}(jQuery). А для еще большего удовольствия вы можете ~~+-!function($){}(jQuery):!

Дэвид Мердок

Answer 5

(функция ($, победа, док) {$ ....}) (jQuery, окно, документ); Я бы тоже это добавил ... Это помогло мне лучше понять. в этом куске кода jQuery ---> $; и окно ---> выиграть; затем документ ---> док ... :) спасибо ...

Haranadh 03

Answer 6

Я столкнулся с образцом кода, который, по моему мнению, не охвачен в приведенном выше списке: $ (function () {.....} (jQuery)); (Взято отсюда: docs.microsoft.com/en-us/aspnet/core/mvc/models/… ). Здесь я не понимаю, как используется $. Это не похоже ни на селектор jQuery $ (...), ни на короткий синтаксис для события «документ готов», потому что функция ничего не возвращает. Я также не кажется префиксом для обработки функции как выражения, потому что он находится вне фигурных скобок. Более того, вызов функции выполняется ВНУТРИ фигурных скобок, поэтому мы вызываем объявление.

Сечь

Answer 7

(function( $ ){

})( jQuery );

Это самоисполняющаяся анонимная функция, которая использует $аргумент in, чтобы вы могли использовать it ( $) вместо 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 8

Итак, если бы у меня был объект с именем my_object, и я сделал бы это: (function (mo) {mo.doSomething ()}) (my_object), тогда он запустил бы my_object.doSomething ()?

Итан

Answer 9

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

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

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

Answer 10

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

Пример:

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

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

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

Answer 11

1

Я все это понимаю. Я хочу знать, почему / как синтаксис скобок работает для создания самоисполняющейся функции? Это просто особенность языка? Как это работает?

плоть

Answer 12

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

(function(foo){

  foo.fn.myPlugin = function() {


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


    });

  };
})( jQuery );

Answer 13

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

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

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

Answer 14

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

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

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

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

Ответы: