如何可靠,动态地加载JavaScript文件?这将用于实现模块或组件,该模块或组件在“初始化”时将根据需要动态加载所有需要的JavaScript库脚本。
使用该组件的客户端不需要加载<script>实现该组件的所有库脚本文件(并将标记手动插入其网页),只需加载“主”组件脚本文件即可。
<script>
主流JavaScript库如何做到这一点(原型,jQuery等)? 这些工具是否将多个JavaScript文件合并到脚本文件的单个可再发行“构建”版本中?还是对附属的“库”脚本进行动态加载?
这个问题的补充: 动态加载的JavaScript文件加载后,是否可以处理事件? 原型具有document.observe文档范围的事件。例:
document.observe
document.observe("dom:loaded", function() { // initially hide all containers for tab content $$('div.tabcontent').invoke('hide'); });
脚本元素有哪些可用事件?
您可以编写动态脚本标签使用Prototype:
new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});
这里的问题是我们不知道外部脚本文件何时完全加载。
我们经常希望我们的依赖代码在下一行,并且喜欢编写如下代码:
if (iNeedSomeMore) { Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod(); myFancyMethod(); // cool, no need for callbacks! }
有一种聪明的方法可以注入脚本依赖项,而无需回调。您只需要通过 同步AJAX请求 提取脚本并在全局级别评估脚本。
如果您使用原型,则Script.load方法如下所示:
var Script = { _loadedScripts: [], include: function(script) { // include script only once if (this._loadedScripts.include(script)) { return false; } // request file synchronous var code = new Ajax.Request(script, { asynchronous: false, method: "GET", evalJS: false, evalJSON: false }).transport.responseText; // eval code on global level if (Prototype.Browser.IE) { window.execScript(code); } else if (Prototype.Browser.WebKit) { $$("head").first().insert(Object.extend( new Element("script", { type: "text/javascript" }), { text: code } )); } else { window.eval(code); } // remember included script this._loadedScripts.push(script); } };