同步动态加载JavaScript
同步动态加载JavaScript
提问于 2010-05-21 12:10:41
我使用的是module pattern，我想做的一件事是动态地包含一个外部JavaScript文件，执行该文件，然后在我的模块的return { }中使用该文件中的函数/变量。
我想不出怎么才能轻松做到这一点。有没有执行伪同步外部脚本加载的标准方法？
function myModule() {
var tag = document.createElement("script");
tag.type = "text/javascript";
tag.src = "http://some/script.js";
document.getElementsByTagName('head')[0].appendChild(tag);
//something should go here to ensure file is loaded before return is executed
return {
external: externalVariable
}
}回答 11
Stack Overflow用户
回答已采纳
发布于 2010-05-21 15:02:33
只有一种方法可以同步加载和执行脚本资源，那就是使用同步XHR
这是一个如何做到这一点的示例
// get some kind of XMLHttpRequest
var xhrObj = createXMLHTTPObject();
// open and send a synchronous request
xhrObj.open('GET', "script.js", false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);但是你一般不应该使用同步请求，因为这会阻塞其他所有东西。但话虽如此，当然也有一些场景适合这样做。
我可能会使用onload处理程序将包含的函数重构为异步模式。
Stack Overflow用户
发布于 2012-06-19 18:42:30
这是我用来在我的应用中加载多个文件的代码。
Utilities.require = function (file, callback) {
callback = callback ||
function () {};
var filenode;
var jsfile_extension = /(.js)$/i;
var cssfile_extension = /(.css)$/i;
if (jsfile_extension.test(file)) {
filenode = document.createElement('script');
filenode.src = file;
// IE
filenode.onreadystatechange = function () {
if (filenode.readyState === 'loaded' || filenode.readyState === 'complete') {
filenode.onreadystatechange = null;
callback();
}
};
// others
filenode.onload = function () {
callback();
};
document.head.appendChild(filenode);
} else if (cssfile_extension.test(file)) {
filenode = document.createElement('link');
filenode.rel = 'stylesheet';
filenode.type = 'text/css';
filenode.href = file;
document.head.appendChild(filenode);
callback();
} else {
console.log("Unknown file type to load.")
}
};
Utilities.requireFiles = function () {
var index = 0;
return function (files, callback) {
index += 1;
Utilities.require(files[index - 1], callBackCounter);
function callBackCounter() {
if (index === files.length) {
index = 0;
callback();
} else {
Utilities.requireFiles(files, callback);
}
};
};
}();并且此实用程序可用于
Utilities.requireFiles(["url1", "url2",....], function(){
//Call the init function in the loaded file.
})Stack Overflow用户
发布于 2016-08-08 22:36:26
我能想到的最类似Node.js的实现是能够同步加载JS文件，并将它们用作对象/模块
var scriptCache = [];
var paths = [];
function Import(path)
{
var index = 0;
if((index = paths.indexOf(path)) != -1) //If we already imported this module
{
return scriptCache [index];
}
var request, script, source;
var fullPath = window.location.protocol + '//' + window.location.host + '/' + path;
request = new XMLHttpRequest();
request.open('GET', fullPath, false);
request.send();
source = request.responseText;
var module = (function concealedEval() {
eval(source);
return exports;
})();
scriptCache.push(module);
paths.push(path);
return module;
}示例源代码(addobjects.js)：
function AddTwoObjects(a, b)
{
return a + b;
}
this.exports = AddTwoObjects;并像这样使用它：
var AddTwoObjects = Import('addobjects.js');
alert(AddTwoObjects(3, 4)); //7
//or even like this:
alert(Import('addobjects.js')(3, 4)); //7页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2879509
复制相关文章
相似问题
腾讯云开发者
