Переменная Javascript недоступна во внешнем файле

Question

Это что-то с javascript; или это что-то еще, что я делаю неправильно.

file1.js

var collection = new Object(); 
collection.foo = new Array(1, 2, 3); 

файл 2.js

var someClass = new Class({ 
    bar : function() { 
     alert(collection.foo.length); 
    } 
}); 

index.html

<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript"> 
var x = new someClass(); 
x.bar(); //cannot find collection 
</script> 

Так что я попробовал другой подход:

file1.js

collection.foo = new Array(1, 2, 3); 

файл 2.js

var someClass = new Class({ 
    bar : function() { 
     alert(collection.foo.length); 
    } 
}); 

index.html

<script type="text/javascript"> 
var collection = new Object(); 
</script> 
<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript"> 
var x = new someClass(); 
x.bar(); //cannot find collection.foo 
</script> 

Я использую Mootools (где объект класса происходит от), если вы думаете, что имеет значение.

Обновление: Я упростил его для публикации примера, но x.bar() является частью события click для другого метода. Но после некоторого тестирования alert() я обнаружил, что файл1 фактически не выполняется. Фактически это файл .axd, отправляемый с текстом/javascript contenttype, поэтому я не уверен, почему - мне придется расследовать завтра.

И да, теги будут внизу. file1 - это раздражающий большой файл javascript, поэтому он отделен - цель состоит в том, чтобы кэшировать на клиенте столько, сколько возможно по-человечески. Это файл .axd, потому что он сгенерирован из базы данных (данные Ref), и я устанавливаю значения expires, compression, contenttype и cachability явно.

Обновление: После более вопиющего, я понял, что произошла ошибка в данных, сгенерированных, что firebug не ловил; и это была всего лишь ошибка, а не какая-то глубокая техническая проблема. Как таковой; закрытие.

Answer 1

Ваш источник file1 завернутый в (несколько стандартном шаблоне)

(function() { 


})(); 

, который делает то, что он намерен в этом случае, что делать переменные локальными?

EDIT: ли добавление пробела между < сценария > и </скрипт > помощи?У меня были некоторые проблемы, когда пустые теги были проигнорированы, но я не уверен, что это применимо в этом случае.

Answer 2

Что такое «класс»? Поддерживает ли javascript создание класса с помощью ключевого слова Class?

Answer 3

Это может быть порядок, в котором выполняются файлы. Браузер будет запускать файлы в том порядке, в котором они загружаются, а не обязательно в том порядке, в котором они были включены. Простой способ проверить, если это так, - добавить строку отладки в каждый файл.

file1.js

alert("Loading File 1"); 
var collection = new Object(); 
collection.foo = new Array(1, 2, 3); 

file2.js

alert("Loading File 2"); 
// ... your code. 

Если он показывает файл 2 до файла 1 то это ваша проблема. Я не уверен в надежном методе, чтобы избежать этого, но то, что я делаю, это использовать скрипт для упаковки всего моего javascript в один большой файл - таким образом вы точно знаете порядок, в котором все будет загружаться, несмотря ни на что.

Answer 4

JS-файлы блокируют другие загрузки и вызывают задержки загрузки для пользователей. По этой причине лучше всего придерживаться тегов скриптов в нижней части страницы, когда сможете. См. here в разделе «Скрипты внизу», или here.

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

Есть ли причина, по которой эти файлы не могут быть объединены? Можете ли вы обернуть встроенный скрипт (пример 1 - index.HTML) в funciton и связать эту функцию с событием onload()?