我已经制作了一个离线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 ,但请不要建议重构存储的数据。
我要补充的是,速度/性能不是问题,以防它会很慢。
发布于 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);
发布于 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();
https://stackoverflow.com/questions/50688219
复制相似问题