懒加载javascript
延迟加载js或ondemand加载这三种方式之间的基本区别是什么？为什么？
脚本1：
$.getScript = function(url, callback, cache){ $.ajax({ type: "GET", url: url, success: callback, dataType: "script", cache: cache }); }; SCRIPT2：
function require(file, callback) { var script = document.getElementsByTagName('script')[0], newjs = document.createElement('script'); // IE newjs.onreadystatechange = function () { if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') { callback(); } }; // others newjs.onload = function () { callback(); }; newjs.src = file; script.parentNode.insertBefore(newjs, script); } document.getElementById('id').onclick = function () { require('ondemand.js', function () { extraFunction('loaded from the parent page'); document.body.appendChild(document.createTextNode('done!')); }); };
script3：
$L = function (c, d) { for (var b = c.length, e = b, f = function () { if (!(this.readyState && this.readyState !== "complete" && this.readyState !== "loaded")) { this.onload = this.onreadystatechange = null; --e || d() } }, g = document.getElementsByTagName("head")[0], i = function (h) { var a = document.createElement("script"); a.async = true; a.src = h; a.onload = a.onreadystatechange = f; g.appendChild(a) }; b;) i(c[--b]) };
- 使用ajax加载脚本。 更具体地说，它使用XHR加载一些js并将其提供给浏览器。 没有阻止。 它仍然执行相同的原始政策。
- 通过创建
元素修改标头以注入新的.js文件。 这也不会阻止浏览器页面加载。 - 和＃2一样，但它似乎支持一系列脚本。 它还将async设置为true，这不会导致阻塞。 for循环更令人困惑，因为它创建了更多的匿名方法。
-
似乎用XmlHttpRequest和
eval()来检索脚本。 如果脚本未托管在同一协议/域/端口上，则此操作无效。 -
3.似乎都做同样的事情：他们创建一个
元素，在其上绑定onload事件并将其插入页面。 加载后，脚本将由浏览器执行，并触发onload事件。
- 通过ajax获取脚本，
eval()获取内容 - 将
script元素插入head元素并在加载后报告 - 与（2）相同但是接受和脚本URL的数组，并且更复杂地编写
（2）和（3）都使用onreadystatechange钩子，它可能与旧浏览器不兼容（例如，Firefox 3.x及以下版本不支持它）。
（1）可能是最强大的，兼容性方面，因为它只需要XHR。 但是如果你在代码中遇到错误，那么浏览器的控制台可能不是很有帮助，因为错误只发生在“eval’d代码”而不是特定的文件/行中。 也就是说，延迟加载通常是一种优化，因此您可以在调试时正常包含脚本，或者使用任何其他两种方法。
你应该尝试这个名为head.js的新库
他们有一些有趣的想法和apis ..希望它有所帮助。
或者你可以做的是使用普通的xhr请求获取你的脚本文件名并使用这样的方法插入到dom中..我也添加了removeScript部分。
addScript = function(file) { var headID = document.getElementsByTagName("head")[0]; var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.src = file; headID.appendChild(newScript); }; removeScript = function(file) { var headID = document.getElementsByTagName("head")[0].children; for(var i in headID) if(headID[i].tagName == "SCRIPT") if(headID[i].getAttribute('src') == file) headID[i].parentNode.removeChild(headID[i]); }
如果您正在使用像jquery这样的库，您不必担心任何事情，您可以从服务器获取html或脚本标记，并使用.html（）api将其插入到dom中