Создание глобальных переменных автоматически считается плохой практикой, потому что может быть трудно определить, глядя на какой-то код, нарочно ли он, или вы забыли где-то объявить переменную. Автоматическое создание глобальных переменных, подобных этой , не работает в строгом режиме ES5 и может быть прекращено в будущих версиях ECMAScript.
В браузере Глобальная область действия JavaScript на самом деле window
. Когда вы ссылаетесь на document
, вы получаете window.document
. Для создания глобальной переменной в браузере рекомендуется добавить ее в window
(global
в Node.js). Вот пример из jQuery :
window.jQuery = window.$ = jQuery;
Некоторые свойства в window
(следовательно, некоторые глобальные переменные) доступны только для чтения, их нельзя перезаписать. window.document
- единица (протестировано в Chrome, все зависит от браузера и может измениться):
window.document; // → Document
window.document = 'foo'; // → "foo" // It worked!
window.document; // → Document // Hmm, no it didn’t
Оказывается, большинство браузеров создают свойства для window
(отсюда глобальные переменные) для каждого идентификатора в документе. Многие браузеры не делают их доступными только для чтения, вы можете перезаписать их своими собственными, но Internet Explorer делает это.
Это еще одна причина, по которой глобальные переменные в JavaScript могут быть опасными - один из ваших идентификаторов может соответствовать свойству window
только для чтения (сегодня или в каком-либо будущем браузере).
На верхнем уровне (не внутри функции), var
объявляет глобальные переменные. Указание var document = 'foo'
на верхнем уровне не приведет к ошибке, но document
все равно будет Document
, а не "foo"
.
Кроме того, новые браузеры (которые поддерживают ES5) позволяют создавать собственные глобальные переменные только для чтения с Object.defineProperty
:
Object.defineProperty(window, 'foo', { value: 'bar', writable: false });
foo = 'baz';
foo; // → "bar"
У меня есть три варианта для вас.
Продолжайте использовать глобальные переменные для своих элементов, но оставляйте их в покое, если они уже существуют (создавая их явно в window
, чтобы код был ясным и классным с ES5):
if ( ! window.randomDiv) {
window.randomDiv = document.getElementById('randomDiv');
}
Создайте объект на window
для использования в качестве собственного пространства имен вашего приложения, которое не будет мешать другим библиотекам или браузеру. Это распространено и считается довольно хорошей практикой, особенно если к нему нужно обращаться через файлы JavaScript:
// Early in your code…
window.Fantabulum = {};
// Later on…
Fantabulum.randomDiv = document.getElementById("randomDiv");
Избегайте создания глобалов. Убедитесь, что код вашего приложения находится внутри функции (это должно быть уже так, чтобы ваши другие переменные не были глобальными и не имели таких же ограничений!), И объявите переменные для ваших элементов:
(function(){
var randomDiv = document.getElementById("randomDiv");
})();