JavaScript模块化

一、现况

①JavaScript天生不支持模块化，PHP中可以可以直接require和include引入文件，nodejs里采用require、exports

②在浏览器里也可以和nodejs中的模块一样来编程，script标签可以用来加载，但是必须考虑加载的顺序问题，可以使用一些第三方库，比如require.js（AMD）和sea.js（CMD）

③无论是CommonJS、AMD、CMD、UMD、EcmaScript6 Modules 官方规范，都是为了解决JavaScript的模块化问题，CommonJS、AMD、CMD都是第三方开发出来的

④EcmaScript6 Modules是EcmaScript在2015年发布的EcmaScript 2016官方标准里对JavaScript模块化的支持，也就是说天生就支持了，虽然标准已经发布，但是很多JavaScript运行还不支持

⑤webpack也是为了解决JavaScript的模块化问题，webpack对于CommonJS、AMD、CMD、EcmaScript6 Modules都支持，也是发展相对较快的原因

二、ES6的模块规范

①导出 import（require），导出export（module.exports)

②导出默认成员

// 默认成员只能导出一个，否则报错
export default 成员

③加载默认成员

// 如果没有default 成员，则加载到的就是undefined
import xxx from '模块标识'

④导出多个成员

// export 必须引用到内部的一个成员
export const a = 123
export const b = 456
export function fn ( ) {
      console.log( ' fn ' )        
}

⑤如果觉得上面的方式比较麻烦，可以使用以下的方式来导出多个成员

const a = 123
const b = 456
function fn ( ) {
      console.log( ' fn ' )        
}
// 注意:这不是对象的简写方式，这是导出的特殊语法，
// 这种方式也不是覆盖，后面还可以持续导出
export{
    a,
    b,
    fn
}

//可以继续增加导出的成员
export function add(x,y) {
    return x + y
}
// 最终导出的实际上是 a,b,fn,add

⑥按需加载指定的多个成员

import {a,b,fn} from '模块标识'

⑦一次性加载所有的导出成员

import * as xxx from '模块标识'

一、现况

二、ES6的模块规范

猜你喜欢