$ (Функция () {...}); вложено в (function () {...}) ();

Question

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

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

Я понимаю использование самоисполняющейся функции в нашем модульном шаблоне, но меня смущает вложение другой функции. Кто-нибудь может объяснить цель этого вообще?

Спасибо!

Answer 1

Такие вещи можно использовать для принудительной инкапсуляции в JavaScript.

В JavaScript переменные имеют функциональную область видимости:

var a = 10;
function() {
    var a = 20;
    alert(a); // output is 20
}
alert(a); // output is 10

Это иногда используется для инкапсуляции или скрытия информации . Например, рассмотрим следующий javascript, который подсчитывает, сколько раз была нажата кнопка:

<script type="text/javascript">
var count = 0;
var button = document.getElementById("MyButton");
button.onclick = function() { count++ };
</script>

Поскольку она отсутствует в функции, переменная count доступна и может быть сброшена так же просто, как:

count = 0; // oh no! now we don't know how many times it was clicked

Чтобы предотвратить это, код должен быть в самовыполняющейся функции:

<script type="text/javascript">
(function() {
    var count = 0;
    var button = document.getElementById("MyButton");
    button.onclick = function() { count++ };
}());
</script>

Теперь переменная count благополучно спрятана в области этой самовыполняющейся функции; никто не может изменить его значение ... ну или прочитать его ... но это всего лишь пример.

Если в этом есть какой-то смысл, вы можете прочитать о замыканиях .

Answer 2

$(function () { ... }); - это короткая рука для привязки к document.ready.Это способ убедиться, что DOM загружен до начала изменений.

Answer 3

Ну, я могу дать некоторое представление, но я не могу понять его назначение

Внутренняя функция (показанная ниже) такая же, как $(document).ready() Ссылка на jQuery.ready ()

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

Внешняя функция - просто замыкание для выполнения функции $(document).ready(), но цель в этом примере кажется бесполезной.