Самостоятельно ссылающееся Anonymouse функции с параметром документа

Question

Я пытаюсь понять разницу между:

(function(document) { 
    //do stuff with document 
})(document); 

и

(function() { 
    //do stuff with document 
})(); 

Я не уверен, почему соглашение, как представляется, пройти document, а иногда window тоже функция? Это связано с областью?

Answer 1

Есть несколько причин для этого:

1. Использование меньшего количества глобальных переменных Вводя функцию с глобальной переменной она будет зависеть от единственного аргумента, а не глобальная переменная, которая может быть использована несколько раз ,

2. Создание локальной сферы IIFE способ создать новую область, объявив функцию и немедленно ссылающейся на него. См. this question для получения дополнительной информации.

3. Лучше преуменьшать

Например, если вы Минимизировать ваш пример будет меняться от этого:

(function(document) { 
    //do stuff with document 
})(document); 

Для этого:

(function(a) { 
    //do stuff with a 
})(document); 

Обратите внимание на a, который короче, чем ваш document.

Edit: Исправлена ​​опечаток

Answer 2

Это особенно удобно, если вы используете компрессор/uglifier, такой как UglifyJS. Затем он заменяет document словами a, что делает ваш код короче.

Так что-то вроде

(function(document, window){ 
    var body = document.body; 
    var foo = document.querySelector('foo'); 
    var bar = document.querySelector('bar'); 
})(document, window); 

становится

(function(a, b){ 
    var c = a.body; 
    var d = a.querySelector('foo'); 
    var e = a.querySelector('bar'); 
})(document, window); 

Если вы не размещал документ и окно в функции он будет просто продолжать говорить документ;

(function(){ 
    var c = document.body; 
    var d = document.querySelector('foo'); 
    var e = document.querySelector('bar'); 
})(); 

Answer 3

Функциональное выражение с немедленным вызовом (IIFE) создает новую локальную область. Как и любая функция, вы можете передавать аргументы, когда вы его вызываете. document и window являются глобальными в JavaScript web api и становятся доступными при запуске js в браузере. Передавая их в IIFE, вы можете получить к ним доступ, как вы хотите внутри из-за объема. Например:

(function(w, d) { 
    console.log(w); // window 
    console.log(d); // document 
})(window, document); 

console.log(w); // Uncaught ReferenceError: w is not defined 
console.log(a); // Uncaught ReferenceError: a is not defined 

Причина w и a не определены во втором наборе console.log х потому, что они имеют локальную область действия к IIFE.