如何在JavaScript ES5中使用exports导出单个可变计数器变量

问题原因 #

你的代码核心问题出在解构赋值的特性上：counter是number类型的基础值，执行var { counter } = require("./functions")时是值拷贝，相当于你在main.js里创建了一个独立的本地变量counter，初始值为0。后续functions模块里修改的是exports.counter，和你本地的counter没有任何关联，所以打印出来永远是初始值0。

另外你代码里还有一处小错误：window.onload = main();会立即执行main函数，而不是等页面加载完成后执行，需要改成window.onload = main;。

解决方案（满足直接使用counter、不需要加前缀的要求） #

不需要改动functions.js，仅修改main.js即可：我们通过定义访问器属性的方式，让直接调用counter时自动读取模块导出的最新值，不需要加任何前缀。

修改后完整代码 #

main.js

var funcModule = require("./functions");
var myFirstFunction = funcModule.myFirstFunction;
var mySecondFunction = funcModule.mySecondFunction;
// 定义counter访问器，实现无前缀直接使用
Object.defineProperty(this, "counter", {
  get: function() {
    return funcModule.counter;
  }
});

function main() {
    console.log("main");
    myFirstFunction();
    mySecondFunction();
    console.log("counter = " + counter);
}

window.onload = main;

functions.js（无需改动，保持你的原有写法即可）

exports.counter = 0;

function myFirstFunction() {
    console.log("my first function");
    exports.counter++;
}

function mySecondFunction() {
    console.log("my second function");
    exports.counter++;
}

exports.myFirstFunction = myFirstFunction;
exports.mySecondFunction = mySecondFunction;

修改后运行输出就会符合预期：

main
my first function
my second function
counter = 2

内容的提问来源于stack exchange，提问作者8Observer8