jQuery $.getScript()脚本累积？

Question

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

这一切都工作正常。如果用户点击“上一页”按钮，它们可以被重新加载(然后会发生什么-同一脚本的多个实例？)。

这些脚本获得包含大约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>

​

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

Answer 2

在调用$.getScript()之后，脚本似乎不会挂起，因为它加载脚本然后执行它。我放了一个简单的机制来计算脚本，每个页面的数量不同，但不是累积的-我想。无论如何，我都会犯错误。