es module 和 commonjs 模块化实践

es module 和 commonjs 模块化实践

1、当export default 导出的值是基本数据类型时，其值是不能被同步修改的。

举个例子，我们新建文件：

base.js

let name = 'Joker';
export const fn = (value) => {
  name = value;
}
export default name;

change.js

import name, { fn } from './base.js'
fn('other');
console.log(name) // Joker

export default {}

main.js

import change from './change.js'
import name from './base.js'
console.log(name) // Joker

入口文件为main.js，文件的加载顺序为main.js => chenge.js => base.js

代码的执行顺序为 base.js => change.js => main.js

export default 的值无法被修改

2、当export default 导出的值是对象时，其属性是可以被同步修改的。

举个例子，我们新建文件：

base.js

const obj = {
  name: 'Joker'
};
export const fn = (value) => {
  obj.name = value;
}
export default obj;

change.js

import obj, {fn} from './base';
fn('other');
console.log(obj.name) // other

export default {}

main.js

import change from './change.js'

import obj from './base'
console.log(obj.name) // other

代码的执行顺序为 base.js => change.js => main.js

3、export 导出的基本数据类型和引用类型都能被同步修改。

base.js

export let name = 'Joker';
export const obj = {
  name: 'Joker'
}
export const fn = (value) => {
  name = value;
  obj.name = value
}

change.js

import {name, fn, obj} from './base';
fn('other');
console.log(name, obj.name) // other other

export default {}

main.js

import change from './change.js'

import {name, obj} from './base'
console.log(name, obj.name) // other other

代码的执行顺序为 base.js => change.js => main.js

4、commonjs 中 exports导出的基本数据类型是不能被同步修改的, 引用类型的属性是可以被同步修改的。

base.js

let name = 'Joker';
const obj = {
  name: 'Joker'
}
let user = 12;

exports.name = name;
exports.obj = obj;
exports.fn = (value) => {
  name = value;
  obj.name = value;
  user = value;
}

change.js

const {fn, name, obj} = require('./base');
fn('other');
console.log(name, obj.name)

main.js

const { name, obj } = require('./base')
console.log(name, obj.name)

代码的执行顺序为 base.js => change.js => main.js

change.js中的输出结果为 Joker other

main.js中的输出结果为 Joker other

5、modue.exports 导出的基本数据类型是无法被同步修改的

base.js

var name = 'Joker'
module.exports = name;

change.js

let name = require('./base');
name = 'other'
console.log(name)

main.js

const name = require('./base');
console.log(name)

change.js中打印的内容为other， 而main.js 中打印的内容为Joker，所以common.js导出的基本数据类型无法被同步修改。

6、modue.exports 导出的引用类型的属性是可以被同步修改的

base.js

var obj = {
  name: 'Joker'
}
module.exports = obj;

change.js

const obj = require('./base');
obj.name = 'other'
console.log(obj.name)

main.js

const obj = require('./base');
console.log(obj.name)

输入结果都为other

总结：

es module无法同步修改：

• export default 导出的基本类型 和 引用类型

es module可同步修改：

• export default 导出的引用类型的属性
• export 导出的基本类型和引用类型

commonjs 无法同步修改：

• exports 导出的基本数据类型 和  引用类型
• modue.exports 导出的基本数据类型 和  引用类型

commonjs可同步修改：

• exports 导出的引用类型的属性
• modue.exports 导出的引用类型的属性