模块化开发 - ES Modules

目前流的模块化规范：

服务端：CommonJS in Node.js
浏览器端：ES Modules in Browers

ES Modules

基本特性

1. 自动采用严格模式，忽略 'use strict'
2. 每个 ESM 模块都是单独的私有作用域
3. ESM 是通过 CORS 去请求外部 JS 模块的
4. ESM 的 script 标签会延迟执行脚本

导入导出

# 使用 ES Modules 导入导出模块成员的固定语法
# ES Modules 中木块成员私有化，给外部使用 应该导出：export
# 导出的成员是一个只读的引用

//////////// modules.js //////////// 
var foo = 'FOO'

function say() {
    console.log('say hello');
}

function tips() {
    alert('alert hello')
}

// 使用 export 关键字导出模块给外部使用
// 常规导出固定语法（不是js中对象字面量对象语法）
export { foo, say, tips }  // 使用 export 关键字导出模块给外部使用

// 导出重命名语法
export { 
    foo as fooName, 
    say as sayFun,
    tips as tipsAlert
}  

//////////// app.js ////////////

// 导入外部模块语法： 关键字 import（不是ES6中的解构语法）
import { fooName, sayFun, tipsAlert } from './modules.js'
console.log(fooName)
sayFun()
tipsAlert()

ES Modules 模块成员导入导出时注意事项：

1. 导入、导出使用的是ESM的固定语法
2. 导出的如果是变量的话，导出的就是变量值得内存地址，不是复制了一份值给外部
3. 导入外部的模块是只读的，不能被修改