Как динамически загружать файлы Javascript и использовать их сразу? - PullRequest
Новая
       11

Как динамически загружать файлы Javascript и использовать их сразу?

3 голосов
/ 25 мая 2009

Я использую JQuery для динамического добавления тегов сценария на вкладку тела веб-страницы. Я получил что-то вроде: 

function addJS(url) {
  $("body").append('<script type="text/javascript" src='+url+'></script>'); 
}

Я так добавляю несколько скриптов и сразу пытаюсь их использовать. E.G:

lib.js 

function core() {...}
alert("I'am here !");

init.js 

addJS("lib.js");
c = new core();

test.html 

<html>
  <head>
    <title>test</title>        
    <script type="text/javascript" src="init.js"></script> 
  </head>
  <body>
     Hello
  </body>
</html>

При загрузке test.html всплывает «Я здесь», а затем выдается ошибка «Ядро не определено». Конечно, объединение обоих файлов JS сделает их безупречными.

Я просто не понимаю o_O.

EDIT

Я упростил этот пример, но ответ Джеффа заставил меня понять, что это была ошибка. Итак, вот некоторые детали:

init.js не находится в заголовке test.html, когда он перезагружается, потому что я внедряю его с помощью кода, извлеченного из букмарклета.

Итак, настоящий процесс выполнения выглядит следующим образом:

перезагрузите test.html> запустите букмарклет> jquery и файл init.js вставлен> lib.js вставлен

Извините за путаницу.

РЕДАКТИРОВАТЬ 2

Теперь у меня есть решение моей проблемы (это было быстро :-)), но я все еще заинтересован в ответе на мой вопрос. Почему это идет не так?

Ответы [ 5 ]

5 голосов
/ 25 мая 2009

jQuery имеет эту функциональность, встроенную в getScript .

3 голосов
/ 25 мая 2009

Появляется ошибка «ядро не определено», поскольку сценарии загружаются асинхронно. Это означает, что ваш браузер начнет загрузку lib.js в фоновом режиме и продолжит выполнение init.js, а затем столкнется с «new core ()» до завершения загрузки lib.js.

Функция getScript имеет обратный вызов, который будет запущен после завершения загрузки скрипта: 

$.getScript('lib.js', function() {
    var c = new core();
});
1 голос
/ 25 мая 2009

В ответ на причину сбоя кода: добавление тега сценария в тело не блокирует дальнейшее выполнение сценария. Ваш код добавляет его, что запускает процесс загрузки браузера. Тем временем ваш скрипт пытается вызвать core(), которого не существует, потому что lib.js не завершил загрузку. JQuery работает, потому что ждет завершения загрузки скрипта, прежде чем выполнять функцию обратного вызова.

1 голос
/ 25 мая 2009

IMO, добавление тега скрипта в конец документа для загрузки скрипта довольно неприглядно. Причина:

  1. вы доверяете браузеру автоматически загружать скрипт и загружать его.
  2. У вас нет возможности узнать, загружается ли скрипт, загружен ли он или произошла ошибка (возможно, 404?)

Подходящим способом было бы использовать $ .getScript () или для более тонкого элемента управления получить файл сценария с помощью $ .ajax () и использовать eval ().

Однако у второго метода есть некоторые проблемы: если вы вызвали eval () внутри функции, то скрипт не будет доступен вне ее! Это требует обходных путей ...

но зачем? используйте $ .getScript () и покончим с этим:)

ура, мл.

1 голос
/ 25 мая 2009

Обратите внимание, что ваша функция addJS добавляется в конец элемента body.

Поскольку браузеры будут запускать сценарии в том виде, в каком они отображаются в источнике HTML, 

c = new core()

будет запущен до загрузки вашего скрипта lib.js (в конце элемента body).

Я бы порекомендовал переместить c = new core (); в $ (документ) .ready (function () {...}); или в элемент скрипта ПОСЛЕ тега body.

...