Question

我在“页面”中替换来自MySQL（通过php）的div的html内容，有时但不总是从MySQL插入使用{内容所需的任何javascript {1}}。

一切正常。当用户点击$.getScript()时，它会从next page获取新的html和javascript但是在很多页面之后它累积了许多脚本，这对我来说似乎是一个坏主意，因为我不希望脚本不再需要浮动周围。如果用户单击“上一页”按钮（当时会发生什么 - 同一脚本的多个实例？），则可以重新加载它们。

这些脚本使用数据数组~100个元素获取音频内容（MySQL）。似乎没有办法删除这些脚本并释放内存。

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

任何帮助表示赞赏。

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>

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

Answer 2

在调用$ .getScript（）之后脚本似乎不会挂起，因为它会加载脚本然后执行它。我提出了一个简单的机制来计算脚本，数字因页面而异，但不会累积 - 我想。无论如何，我都会犯错误。

jQuery $ .getScript（）脚本累积？

2 个答案: