问题描述

看下面的微信小游戏示例：

三个文件main.js add1.js global.js

main.js

import {glb} from './global.js'
import {add1} from './add1.js'

/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    console.log(glb);
    add1();
    console.log(glb);
  }
}

add1.js

import {glb} from './global.js'

function add1(){
  glb = glb+1;
}

export {add1};

global.js

var glb = 1;

export {glb};

main.js和add1.js都引用了global.js的变量glb。add1.js还给glb加1.结果调试报错：

根据javascript - Change the value of imported variable in ES6 - Stack Overflow的说法，import的结果是，引入的变量glb变为const类型。所以add1给glb加1是非法的。

解决方案

解决办法有两个：

方法1 把修改glb取值的函数也放到global.js里面

删去add1.js,留下另外两个文件

main.js

import {glb, add1} from './global.js'

/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    console.log(glb);
    add1();
    console.log(glb);
  }
}

global.js不仅输出glb，也要输出add1

var glb = 1;
function add1(){
  glb = glb+1;
}
export {glb, add1};

方法2 不要直接export 变量，而是export一个object，令变量成为其中成员

main.js

import {glb} from './global.js'
import {add1} from './add1.js'

/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    console.log(glb.obj1);
    add1();
    console.log(glb.obj1);
  }
}

add1.js

import {glb} from './global.js'

function add1(){
  glb.obj1 = glb.obj1+1;
}

export {add1};

global.js

var glb = {
  obj1: 1
}
export {glb};

输出：

0 条评论