如何使用Javascript手柄出口模块级的变量？

Question

在JavaScript的应用程序，我有被定义为一个模块的服务，例如在services/MyService.js。

再说说服务看起来像这样：

let lastUpdated;

function update() {
  lastUpdated = new Date();
}

lastUpdated = new Date();

export default {
  update,
  lastUpdated
}

另一个文件，index.js，进口这种服务：

import MyService from "./services";

console.log(MyService.lastUpdated);
setTimeout(() => {
  MyService.update();
  console.log(MyService.lastUpdated);
}, 1000)

我认为MyService.lastUpdated会在调用时MyService.update()改变，但事实并非如此。当变量是进口的，它是一个指向初始Date对象？如果是这样，我怎么可以更新它，这样的“活”的变量是访问其他地方？

Answer 1

export default { update, lastUpdated }出口对象具有属性update和lastUpdated。对于你问一下，对象的属性lastUpdated没有得到改变出于同样的原因，在下面的代码lastUpdated问题不得到改变：

let lastUpdated;
function update() {
  lastUpdated = new Date();
}
lastUpdated = new Date();
const MyService = {
  update,
  lastUpdated
};

console.log(MyService.lastUpdated);
setTimeout(() => {
  MyService.update();
  console.log(MyService.lastUpdated);
}, 1000)

你重新分配命名lastUpdated变量，但你从来没有突变所已出口对象，所以你看不到的变化，当你检查对象中的其它模块呼吁update后。

你可能会导出您变异，而不是一个对象：

// MyService.js
function update() {
  console.log("upd");
  obj.lastUpdated = new Date();
}
const obj = {
  update,
  lastUpdated: new Date()
};

export default obj;

另一种选择，虽然可能不推荐，会使用命名的出口，而不是对象的默认出口。重新分配一个模块在一个名为出口将导致在该出口在其他地方进口的变化：

// MyService.js
let lastUpdated;
function update() {
  console.log("upd");
  lastUpdated = new Date();
}
lastUpdated = new Date();
export { update, lastUpdated };

// index.js
import { update, lastUpdated } from "./MyService";
console.log(lastUpdated);
setTimeout(() => {
  update();
  console.log(lastUpdated);
}, 1500);

（重新分配命名出口通常会使代码更难理解，虽然和棉短绒有时禁止它）

Answer 2

该变量不能在这个意义上更新直播。你想要的是声明一个类有一个getter和setter的lastUpdated变量，如果你使用ES6：

export default class MyService {
    // Member
    constructor() {
        this.lastUpdated = new Date();
    }

    // Method
    update() {
        this.lastUpdated = new Date();
    }
}

然后，您可以使用MyService创建new MyService()类的新实例，然后访问lastUpdated变量，例如：

import MyService from "./services";

const myService = new MyService();

// Get current timestamp
console.log(myService.lastUpdated);

window.setTimeout(() => {
    // Update timestamp
    myService.update();

    // Get updated timestamp
    console.log(myService.lastUpdated);
}, 1000);