<html>
<!-- ... (other page content) ... -->
<script src="common.js"></script>
<script src="homepage.js"></script>
</html>
在我网站的每个页面上，我都有一个通用的.js文件，用于每个页面上总是需要的东西。然后我有一个专门为那个页面的js文件
我的问题是在common.js文件中声明的变量也需要在第二个js文件中访问，但我遇到了一些问题，因为脚本没有等待要声明的数据变量，并且不允许在脚本的顶层使用await。
// common.js
let data;
async function get_data() {
data = await fetch('/get-data').then(res => res.json())
console.log(data) // works!!!
}
get_data();
console.log(data) // does not work!!!
// homepage.js
console.log(data) // does not work!!!
所以我要问的是我如何才能使两个不工作的console.log(data)调用工作!
创建一个解析为data的全局Promise，然后在需要使用该Promise时调用.then。
// common.js
window.dataProm = fetch('/get-data').then(res => res.json());
dataProm
.then((data) => {
console.log(data);
})
// .catch(handleErrors);
// homepage.js
dataProm
.then((data) => {
console.log(data);
})
// .catch(handleErrors);
将结果赋值给全局作用域的变量
// common.js
async function get_data() {
const res = await fetch('/get-data');
if (!res.ok) {
throw res;
}
return res.json(); // return the data
}
// Assign to a variable
const dataPromise = get_data();
dataPromise.then(console.log);
// homepage.js
dataPromise.then(console.log); // why does everyone log everything ¯_(ツ)_/¯
不依赖于window的三(3)个节点javascript解决方案
这里有一些可行的方法。一个是global变量，另一个是通过classes和/或将函数/类的实例传递给各自的文件。但总的来说，我认为你要找的是其他语言中的static关键字。它在JavaScript中也存在。
Static关键字这种方法的好处是，您不必创建类的新实例并将其作为引用传递(参见最后一个示例)。
本质上，在任何想要获得共享资源值的地方。只需导入common文件并使用getStaticProperty方法(在本例中)。
common.js
export default class Common {
static staticProperty = 0;
static getStaticProperty() {
return this.staticProperty;
}
static setStaticProperty(val) {
this.staticProperty = val;
}
}
a.js
import Common from './common';
export default function a() {
Common.setStaticProperty(321); // here we set the value
}
研究
import Common from './common';
export default function b() {
console.log(Common.getStaticProperty()); // prints 321
}
index.js
import a from './a';
import b from './b';
a();
b();
完整的演示在这里
全局变量common.js
let globalValue = 0;
function setSharedValue(val) {
globalValue = val;
}
function getSharedValue() {
console.log('global value', globalValue);
}
export { setSharedValue, getSharedValue };
a.js
import { getSharedValue, setSharedValue } from './common';
function runA() {
setSharedValue(3); // here we set the value to '3'
getSharedValue(); // prints 3
}
export default runA;
研究
import { getSharedValue } from './common';
function runB() {
console.log('from B');
getSharedValue(); // also prints 3
}
export default runB;
index.js
import a from './a';
import b from './b';
a(); // 3
b(); // from b, 3
完整的演示在这里
类(和通过引用传递)
common.js
export default class Common {
constructor() { // redundant
this.sharedValue = 0;
}
getSharedValue() {
return this.sharedValue;
}
setSharedValue(value) {
this.sharedValue = value;
}
}
a.js
export default function A(commonInstance) {
const sharedValue = commonInstance.getSharedValue();
console.log('shared value', sharedValue);
}
index.js
import Common from './common';
import A from './a';
const shared = new Common();
shared.setSharedValue(55); // set the common value to 55.
A(shared); // prints 55
完整的演示在这里
总之，你可以将这些方法应用到变量、函数和类中，以便在不同的javascript文件中获得共享变量。