javascript - jQuery $.getScript() 脚本积累？

Question

我在“页面”中替换来自 MySQL 的 div 的 html 内容(通过 php)，有时但并不总是从 MySQL 插入任何 javascript使用 $.getScript() 获取该内容所需的内容。

一切正常。当用户点击下一页时，它会从MySQL获取新的html和javascript，但在很多页之后，它积累了许多脚本，这对我来说似乎是一个坏主意，因为我不这样做不希望脚本不再需要到处 float 。如果用户单击“上一页”按钮，它们可以重新加载(然后会发生什么 - 同一脚本的多个实例？)。

这些脚本获取包含大约 100 个元素的数据数组的音频内容 (ion.sound)。似乎没有办法删除这些脚本并释放内存。

我担心最终的性能问题。或者这是完全错误的做法？

任何帮助表示赞赏。

Answer 1

这可能不适用于 getScript 功能。原因是，一般来说，项目在加载后会添加到全局命名空间中。对此已经有一个很好的讨论question

根据这些建议，您可以加载脚本，并将差异保存在全局命名空间内，并且当您删除脚本时，只需再次从全局命名空间中删除这些对象即可。

此处的示例在单击按钮时加载 jQuery，然后检查对全局窗口对象进行了哪些更改，并在删除时再次从窗口对象中删除这些项目。

const jQueryId = "#jQuery-loaded-js-id";

function addJQuery( cb ) {
  if (document.querySelector(jQueryId)) {
    console.info('JQuery already loaded');
    return;
  }
  var scriptElem = document.createElement('script');
  scriptElem.id = jQueryId.substr(1);
  scriptElem.addEventListener('load', function( windowKeys, e ) {
    console.log( 'jQuery loaded' );
    // get the difference of keys between before load and after load
    // this will only work if no other scripts were loaded in between
    // which would mean, scripts should only be loaded one at the time
    var newKeys = Object.keys( window );
    var diff = newKeys.reduce( (set, item) => {
      if (windowKeys.indexOf(item) === -1) {
        set.push( item );
      }
      return set;
    }, []);
    scriptElem.dataset.globalKeys = diff;
  }.bind(this, Object.keys(window)) );
  scriptElem.src = 'https://code.jquery.com/jquery-2.2.4.min.js';
  document.body.appendChild( scriptElem );
}

function isJQueryAvailable() {
  // checks if jQuery exists
  alert( !!(window.jQuery || window.$) );
}

function removeJQuery() {
  var elem;
  if (!( elem = document.querySelector(jQueryId) )) {
    console.info('not available');
    return;
  }
  document.body.removeChild(elem);
  // removes any of the global keys added to the DOM
  var keys = elem.dataset.globalKeys.split(',');
  for (let i = 0; i < keys.length; i++) {
    delete window[keys[i]];
  }
  console.info('JQuery removed');
}

<button type="button" onclick="addJQuery()">Get JQuery</button>
<button type="button" onclick="isJQueryAvailable()">Does JQuery Exist?</button>
<button type="button" onclick="removeJQuery()">Remove JQuery</button>

该示例实际上不应该是您需要实现的内容，因为它过度简化了脚本加载时可能发生的情况。也许您需要考虑一种更加基于模块的方法，您加载的脚本有一种处置自身的方法。我只是给你一个潜在方法的例子