Что делает функция function ($) {$ (function() {})} (window.jQuery)?

Я использую twitter bootstrap для создания сайта и пытаюсь инициализировать всплывающие подсказки. Помимо добавления чего-то вроде:

 $("[rel=tooltip]").tooltip()

в application.js, если я не сохраню, следующий фрагмент кода, используемый в документах начальной загрузки, мои всплывающие подсказки не инициализируются.

!function ($) {

  $(function(){  

  })

}(window.jQuery)

Что делает вышеуказанный код?

Ответ 1

Давайте объясним, нарушив код

function () {
}()

Или часто записывается как

(function () {
})()

Является функцией self-invoking anonymous, также известной как Immediately-Вызываемые функциональные выражения (IIFE). Который немедленно выполняет анонимную функцию inline.

Подробнее об этом читайте в Объясните синтаксис инкапсулированной анонимной функции.

Анонимные функции являются мощной функцией и имеют такие преимущества, как область видимости ( "межстрочный интервал между переменными" ), см. Какова цель функции самоисполнения в javascript?.

Теперь они используют

function ($) {

}(window.jQuery)

Теперь пропустите !.

Итак, они передают, window.jQuery в эту функцию в качестве аргумента и принимают как $.

Что это делает, это сделать $ псевдоним window.jQuery (оригинальный объект jQuery) и, следовательно, гарантировать, что $ всегда будет ссылаться на jQuery object внутри этого closure, независимо от того, имеет ли другая библиотека что ($) снаружи.

Итак, код, который вы пишете внутри этого закрытия, используя $, всегда будет работать.

Еще одно преимущество заключается в том, что $ приходит как аргумент в анонимной функции, которая приближает его к scope chain, и поэтому для интерпретатора JS требуется меньше времени, чтобы найти объект $ в закрытии, чем он если бы мы использовали глобальный $.

$(function(){  

})

Этот готовый блок документа jQuery, как вы уже могли знать, который гарантирует, что код внутри этой функции будет работать, когда dom is ready, и, следовательно, все event binding's будут работать правильно.

Подробнее на http://api.jquery.com/ready/

И что это такое ! было хорошо объяснено здесь или Что делает восклицательный знак перед функцией?

Короче:

Чтобы продемонстрировать преимущества !, рассмотрим случай,

(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

Если вы введете вышеуказанный код в console, вы получите два предупреждения, но тогда вы получите эту ошибку

TypeError: undefined is not a function

Почему это происходит? Пусть моделирует, как JS-двигатели выполняют вышеупомянутый блок кода. Он выполняет эту анонимную функцию function() {alert('first');}() показывает предупреждение и по мере того как он возвращает ничего undefined возвращается внутри (). То же самое происходит и для второй функции. Итак, после выполнения этого блока у него получилось что-то вроде

(undefined)(undefined)

и поскольку его синтаксис подобен функции self-invoking anonymous, он пытается вызвать эту функцию, но первая, (undefined) не является функцией. Таким образом, вы получаете ошибку undefined is not a function. ! исправляет этот тип или ошибки. Что происходит с !. Я цитирую строки из приведенной выше ссылки ответа.

Когда вы используете!, функция становится единственным операндом унарного (логический) оператор NOT.

Это заставляет функцию оцениваться как выражение, которое позволяет его немедленно вызывать inline.

и это решает вышеупомянутую проблему, мы можем переписать вышеупомянутый блок, используя ! как

!(function() {
    alert('first');
}())


!(function() {
    alert('second');
}())

Для вашего случая вы можете просто поместить свой код всплывающей подсказки внутри готового блока документа, например,

$(function(){  
    $("[rel=tooltip]").tooltip();  
});

и он будет работать нормально.

И если вы просто используете $("[rel=tooltip]").tooltip() без doc ready block, тогда есть шанс, когда этот код будет запущен, в DOM еще нет элемента с rel=tooltip. Таким образом, $("[rel=tooltip]") вернет пустой набор и tooltip не будет работать.

Пример разметки, когда он не будет работать без doc ready block,

.
.
.
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
</script>
.
.
.
.
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>

В качестве браузеров, последовательно интерпретирует разметку, он будет выполнять код js, как только он встретится с ним как. И когда он выполняет блок JS здесь, он еще не проанализировал теги a rel="tooltip", поскольку он появляется после блока JS. Поэтому они не находятся в DOM в этот момент.

Итак, для вышеуказанного случая $("[rel=tooltip]") пуст и, следовательно, всплывающая подсказка не будет работать. Поэтому всегда безопасно помещать весь ваш JS-код внутри блока document ready, например

$(function){
    // put all your JS code here
});

Надеюсь, что все это имеет смысл для вас сейчас.