Ответ 1
Как сказал Russ Cam, вы избегаете загрязнения глобального пространства имен, что очень важно в эти дни для объединения скриптов из нескольких мест (TinyMCE и т.д.).
Как сказал Алекс Секстон, он также создает хорошую организацию кода.
Если вы используете эту технику, я бы предложил использовать шаблон модуля. Это все еще использует объектные литералы, но как возвращаемое значение из функции определения области видимости:
var MyThingy = (function() {
function doSomethingCool() {
...
}
function internalSomething() {
....
}
function anotherNiftyThing() {
// Note that within the scoping function, functions can
// call each other direct.
doSomethingCool();
internalSomething();
}
return {
doSomethingCool: doSomethingCool,
anotherNiftyThing: anotherNiftyThing
};
})();
Внешнее использование:
MyThingy.doSomethingCool();
Функция определения области охвата охватывает все ваши функции, а затем вы вызываете ее немедленно и сохраняете ее возвращаемое значение. Преимущества:
- Функции объявляются нормально и, следовательно, имеют имена. (Принимая во внимание, что в формате
{name: function() { ... }}
все ваши функции анонимны, хотя свойства, ссылающиеся на них, имеют имена.) Инструменты справки по именам помогают вам, от отображения стеков вызовов в отладчике, сообщать вам, какая функция выбрала исключение. (Обновление в 2015 году: последняя спецификация JavaScript, ECMAScript 6-е издание, определяет большое количество способов, с помощью которых движок JavaScript должен вызывать имя функции. Один из них - это когда функция назначается свойству, как в нашем примере{name: function() { ... }}
. двигатели реализуют ES6, эта причина исчезнет.) - Предоставляет вам свободу использования частных функций, используемых только вашим модулем (например, мой
internalSomething
выше). Никакой другой код на странице не может вызвать эти функции; они действительно частные. Только те, которые вы экспортируете в конце, в операторе return, видны вне функции обзора. - Легко возвращать разные функции в зависимости от среды, если реализация просто полностью изменяется (например, материал IE-vs-W3C, SVG или Canvas и т.д.).
Пример возврата различных функций:
var MyUtils = (function() {
function hookViaAttach(element, eventName, handler) {
element.attachEvent('on' + eventName, handler);
}
function hookViaListener(element, eventName, handler) {
element.addEventListener(eventName, handler, false);
}
return {
hook: window.attachEvent ? hookViaAttach : hookViaListener
};
})();
MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */);