Выгрузить внешний файл .js - PullRequest
Новая
       1

Выгрузить внешний файл .js

3 голосов
/ 16 октября 2011

Я загружаю некоторые HTML и JS с помощью AJAX:

main-page.html загружает через AJAX страницу с именем page-to-load.html . 

<!-- main-page.html -->
<html>
...
<script>
$.ajax({ 
  type:"POST", 
  url:"page-to-load.html", 
  success:function(data) { 
    $("#some_id").html(data);
  }
});
</script>
...
</html>

page-to-load.html включает html и js-файл: 

<!-- page-to-load.html --->
<script src="scripts-for-this-html.js"></script>
<p>This is a HTML page working with above external .js file</p>

Как видите, я загружаю jsфайл, scripts-for-this-html.js

Это прекрасно работает.Проблема в том, что если я загрузил снова (я имею в виду, "#some_id" пуст и загрузил снова page-to-load.html ) весь сценарий ( scripts-for-this-html).js ) остается в памяти браузера (например, если у меня есть событие в этом файле .js, это событие повторяется столько раз, сколько я загрузил файл, даже если я удалил элемент script из DOM).

Есть ли способ получить эту работу?Я не хочу включать все файлы .js одновременно (их слишком много), я хочу загружать и выгружать их по требованию.

1 Ответ

3 голосов
/ 16 октября 2011

Выгрузка JavaScript теоретически может быть выполнена путем удаления тега сценария (как вы делаете с .html и удаления всех ссылок на любые объекты, связанные со сценарием. Это включает в себя удаление каждой ссылки и прослушивателя событий. Даже один оставленный может сохранить область действия этой переменной в памяти вызывает утечку.

Было бы разумно использовать регулярные выражения для удаления сценариев, если они уже загружены. (Благодарим @ JCOC611 за идею удаления тегов.) Что-то вроде: 

var usedScripts = {};

html = html.replace(/<script\s+src="([^"]+)"><\/script>/gi, function(str, file) {
    if(usedScripts[file]) {
        return "";
    } else {
        usedScripts[file] = true;
        return str;
    }
});

Если у вас ограниченное количество страниц, я предпочитаю иметь объект: 

{
    myPage: {
        html:   'myhtml.html',
        script: 'myscript.js'
    }
}

Затем есть функция загрузчика, которая одновременно загружает скрипт с document.createElement('script') и загружает страницу с HTML. Вы можете легко проверить, использовался ли этот скрипт, и пропустить загрузку.

...