Файлы Javascript дублируются в навигации ajax - PullRequest
Новая
       19

Файлы Javascript дублируются в навигации ajax

5 голосов
/ 02 июля 2019

У меня проблемы с навигацией AJAX, проблема в том, что загруженные файлы javascript остаются в браузере после загрузки нового контента, даже если их больше нет в DOM, и они отображаются как VM файлы в консоли браузера и выполнение кода внутри него.Я не хочу, чтобы это произошло, потому что файл javascript, который он должен был заменить, когда новый контент приходит через AJAX.

Моя структура DOM выглядит следующим образом: 

<body>
    <header></header>

    <main id="contentToBeReplaced">

        <p>New content with its own js</p>
        <script>
            var script = "js/new.js";
            $.getScript(script);
        </script>
    </main>

    <footer></footer>

    <script src="js/main.js"></script>
</body>

Каждый разстраница загружается со своим собственным файлом javascript, появляется новый файл VM, в котором хранятся все старые файлы, и это проблема:
enter image description here

Итак, в чем проблема?и как я могу это исправить?Мне нужно предотвратить дублирование файлов и удалить файл js при загрузке нового файла.

Ответы [ 4 ]

2 голосов
/ 11 июля 2019

Каждая уникальная запись в глобальном контексте выполнения Javascript может представлять только один объект или переменную. Повторная загрузка одной и той же функции в глобальный контекст заменяет код функции снова и снова.

Вы должны управлять сценариями, загружаемыми с отложенной загрузкой, таким образом, чтобы они представляли одну и ту же запись в вашем глобальном контексте (или в используемой вами среде)

Посмотрите на следующие примеры js-кодов, которые считаются лениво загруженными в два разных времени 

//script 1

var dynFun = function() {
                console.log('Loaded early');
             {



//script 2
var dynFun = function() {
                console.log('Loaded late');
             {

Теперь, если вы загрузите скрипт и выполните dynFun(), он выйдет из системы "Loaded early". Теперь, в этот момент, если вы загрузите второй скрипт и снова выполните dynFun(), он выйдет из системы "Loaded late".

Однако, если каждая из этих функций запускает автоматические процессы, такие как setTimeout, они будут продолжать функционировать, пока страница не будет закрыта.

В таких случаях ваши динамические сценарии должны сначала выполнить некоторую очистку. 

var timeTracker;   //This is global

var dynFun = function() {
                  if (timeTracker)
                      clearTimeout(timeTracker)

                   timeTracker = setTimeout(someFn, 1000)   
             {

Помните - вы не можете решить, как освободить память на таких языках, как JS. Вы можете обмануть только процесс очистки, манипулируя ссылками на объекты.

0 голосов
/ 12 июля 2019

После многих исследований я смог решить проблему.Насколько я знаю, не существует абсолютно никакого способа "unload" файлов javascript без обновления страницы или программной очистки кэша памяти браузера.
Поскольку большая часть моего кода в этих динамических файлах javascript связана с функциями событий, я былпривязка событий к document вместо каждого элемента с таким синтаксисом: 

$(document).on("click", "#myElement", function () {

});

По этой причине каждый раз, когда файл javascript загружался, события связывались снова и снова и выполнялись несколько раз из * 1007.*.Когда вы удаляете элемент из DOM, его связанное событие также удаляется, если только оно не привязано к document, как у меня.Поэтому я изменил метод on(), чтобы привязать событие непосредственно к элементу: 

$("#myElement").on("click", function() {

});

После этого изменения моя проблема исчезла, поскольку часть HTML, которую я заменяю на AJAX, удаляет эти элементы с events, без необходимости использования off() для ручного удаления связанных событий, также основные функции, которые будут выполняться на нескольких страницах, должны быть размещены в основной js.
Однако, @ CharlieH делаетХороший момент в его ответе.

0 голосов
/ 07 июля 2019

Добавьте 'use strict'; в верхней части вашего файла JavaScript, он включит более строгий режим анализа JavaScript, который предотвращает случайные глобальные переменные.если это не поможет, вы можете прочитать больше о «сборщике мусора» в этой статье «4 типа утечек памяти в JavaScript и как их избавить»

0 голосов
/ 05 июля 2019

Добавьте это в начале файла "new.js", чтобы отслеживать этот файл в Chrome Dev Tools: 

//# sourceURL=new.js
...