Мое «одностраничное приложение» состоит из кода в нескольких файлах с использованием «свободного расширенного модуля» шаблон, описанный Беном Черри. Вот два урезанных примера модулей.
Некоторые "данные" в одном модуле:
var application = (function ( App ){
App.usesvar = {
one: 'one',
two: 'two',
three: 'three'
}
return App;
}( application || {} ));
«Главный» модуль, который представляет приложение в целом и инициализирует приложение:
// the 'master' module
var application = (function ( App ){
console.log( 'Using `var` (should log "three"): ' + App.usesvar.three );
return App;
}( application || {} ));
Они работают так, как ожидалось. Сначала данные импортируются на страницу, и главный модуль может получить к ним доступ и распечатать ожидаемые значения.
Часть моего приложения не может быть построена таким образом. Вместо этого некоторый JavaScript генерируется на этапе сборки, и его вывод выглядит следующим образом:
this["application"] = this["application"] || {};
this["application"]["usesthis"] = this["application"]["usesthis"] || {};
this["application"]["usesthis"]["one"] = 'uno';
this["application"]["usesthis"]["two"] = 'dos';
this["application"]["usesthis"]["three"] = 'tres';
Обратите внимание, что он пытается использовать то же пространство имен application, что и предыдущий код, и поэтому usesthis должен быть виден «главному» модулю, как и usesvar из первого фрагмента.
Добавление console.log( 'Using `this` (should log "tres"): ' + App.usesthis.three ); в «главный» модуль регистрирует то, что вы ожидаете в Chrome, Safari Firefox (недавний) и IE10. В IE8 (я еще не тестировал IE9) этого не происходит. В IE8, «главный» модуль, не имеет доступа к свойствам, объявленным с использованием нотации `this['namespace']['property'].
В примерах предположим, что файлы загружаются в правильном порядке. Фактическое приложение также импортирует файлы в правильном порядке. Если пример JavaScript записан в теги <script></script> HTML-файла, а не импортирован, проблема все еще возникает.
Раскрытие информации: нотация this['foo']['bar'] генерируется прекомпилятором Handlebars.js, поэтому у меня нет большого контроля над стиль его вывода. Это проверенный в бою фрагмент кода, поэтому я ожидаю, что он должен работать в IE8 и прекрасно сочетаться с большинством другого кода. Я чувствую, что это не проблема Handlebars, а проблема области вокруг `var foo = (function bar(){}()); шаблон.
