module.exports,exports,require()和export,export default,import


module.exports,exports是CommonJs模块规范

/*module.js*/
module.exports.x = x
module.exports.y = y
module.exports.z = z
//也可以用,因为有一句隐藏的代码var exports = module.exports,感觉是语法糖
exports.x = x
exports.y = y
exports.z = z
//也可以
module.exports = {  x, y, z }

/*main.js*/
//导入
let {x, y, z} = require('./module.js')

export,export default是ES Module模块规范
export,export default可以混合使用,export可以出现若干次,export default只能出现一次

/*module.js*/
//样式1
export const x = ''
export const y = ''
export const z = ''
//样式2
const x = '', y = '', z = ''
export { x, y, z }
funtion add() {}
export default {  x, y, z, add  }   

/*main.js*/
//导入,对于export的必须用{},而且是可选择性的导入:
import { x, y } from './module.js'
//对于export default则必须全部导入,也就不需要{}了
import all from './module.js'

//混合型
import {default, x, y, z} from './module.js' //第一个是export default的内容
或者
import default, {x, y, z} from './module.js'
取*/别名,default改名为all
import {default as all , x, y, z} from './module.js'
也可以汇总
import * as all from './module.js'

require()和import的区别

require支持动态的导入,import只能静态的导入
eg:
if (true) {
  require('./modele.js') //可以按条件引入
}
但import不行,import只能放在文件最前面

警告:如对象等,存在栈中的数据被导入后,被更改,原模块中的也会改

导出
/*module.js*/
let a = {
  name: 'LLC'
}
setTimeout(() => {
  console.log(A.name)  //'ZTQ'
}, 1000)
exports.A = a  (or: export {a})
导入
/*main.js*/
let { A } = require('./module')  (or: import { A } from './module')
//改名字
A.name = 'ZTQ'