在JavaScript中连接来自多个外部js文件的具有不同数组的相同变量
在JavaScript中连接来自多个外部js文件的具有不同数组的相同变量
提问于 2018-06-05 04:22:31
我已经制作了一个离线web应用程序：
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<style><!-- some style here --></style>
<script>
var rqid = location.hash.replace('#','');
var js = Math.ceil(rqid / 100);
var id = rqid - ((js - 1) * 100) - 1;
var tg = document.createElement('script')
tg.src = js + '.js'
tg.type = 'text/javascript'
document.head.appendChild(tg);
window.onload = function load() {
var body='<h1>' + title[id] + '</h1> <article>' + content[id] + '</article>';
document.getElementById("body").innerHTML = body;}
</script>
</head>
<body id='body'>
</body>
</html>上面是简化的article.html文件，它显示了存储在外部.js文件中的文章，每个文件都有两个变量。
1.js包含
title = ['title of article1','title of article2',...,'title of article100'];
content = ['content of article1','content of article2',...,'content of article100'];2.js包含
title = ['title of article101','title of article102',...,'title of article200'];
content = ['content of article101','content of article102',...,'content of article200'];例如，article.html#1将1.js加载到html中，然后显示article1，而article.html#101加载2.js并显示article101。
它工作得很好，但我为这个应用程序编写的搜索引擎有一个问题。搜索引擎代码相当庞大。在这里共享是不可能的。
问题在于.js文件中的相同变量，这些变量被一个接一个地覆盖。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>因此，搜索只在3.js中完成。
问题是:是否有可能在这些.js文件中动态连接标题/内容数组，并具有如下所示的统一标题/内容变量，以便可以在所有文章中执行搜索？
title = ['title of article1',...,'title of article200'];
content = ['content of article1',...,'content of article200'];如果不可能，只需说 no ，但请不要建议重构存储的数据。
我要补充的是，速度/性能不是问题，以防它会很慢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-05 04:37:59
当在多个文件中使用全局变量时，使用某种全局变量结构总是一个好主意，这样可以更明确地说明数据实际上是全局的，并且不太可能导致范围污染问题。
在本例中，您可以创建一个名为"globals“的基本对象，它将具有title和content属性，就像处理全局变量一样。事实上，在默认情况下，这些变量实际上位于window对象上，所以它的工作方式完全相同--只是不是说window.title，而是可以说globals.title，等等。唯一的区别是，在默认作用域中，变量永远不会被意外访问。
window.globals = {};
// file1
(function () {
var title = ['title of article1','title of article2','title of article100'];
var content = ['content of article1','content of article2','content of article100'];
globals.title = globals.title ? globals.title.concat(title) : title;
globals.content = globals.content ? globals.content.concat(content) : content;
})();
// file2
(function () {
var title = ['title of article101','title of article102','title of article200'];
var content = ['content of article101','content of article102','content of article200'];
globals.title = globals.title ? globals.title.concat(title) : title;
globals.content = globals.content ? globals.content.concat(content) : content;
})();
// file3
(function () {
var title = ['title of article201','title of article202','title of article300'];
var content = ['content of article201','content of article202','content of article300'];
globals.title = globals.title ? globals.title.concat(title) : title;
globals.content = globals.content ? globals.content.concat(content) : content;
})();
// final results
console.log(globals.title);
console.log(globals.content);
Stack Overflow用户
发布于 2018-06-05 05:07:12
下面是一个简单的示例，说明如何在不重新构造1.js 2.js的情况下完成此操作。
为了这个例子的目的，我创建了一个伪装的fetch，它可以获取1.js，& 2.js，如果你有任何真实的网址要测试，我们应该能够用一个真实的网址替换fetch模拟。
const pretenddata = {
"1.js":
`title = ['title of article1','title of article2','title of article100'];
content = ['content of article1','content of article2','content of article100']`,
"2.js": `title = ['title of article101','title of article102','title of article200'];
content = ['content of article101','content of article102','content of article200'];`
};
//lets create a pretend fetch..
function fetch(url) {
function astext() {
return new Promise((resolve) => {
resolve(pretenddata[url]);
});
}
return new Promise((resolve) => {
resolve({text: astext});
});
}
async function test() {
var combined_title = [];
var combined_content = [];
async function getData(url) {
const r = await(await fetch(url)).text();
var d = new Function(`${r}; return [title, content]`)();
combined_title = combined_title.concat(d[0]);
combined_content = combined_content.concat(d[1]);
}
await Promise.all([
getData("1.js"),
getData("2.js")
]);
console.log(combined_title);
console.log(combined_content);
}
test();
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50688219
复制相关文章
相似问题