【前端工程】Javascript之模块化

什么是模块化

模块总类

• commonjs

  require/module.export

• amd
• cmd
• umd
• system

模块与命名空间

模块具有其自己的作用域，并且只有导出的声明才会在模块外部可见。 记住这点，命名空间在使用模块时几乎没什么价值。

模块对比

Es6模块化

导出模块: export,只能导出一个接口，不能直接导出一个变量。
导入模块: import。

1、导出导入单个变量

导出：

 a)  export var a = 1
 b)  var a = 1
      export {a}  

导入：

  import {a} from '文件名'

2、导出导入多个变量

导出:

var firstName \= 'Michael'; 
var lastName \= 'Jackson'; 
var year \= 1958; 
export { firstName, lastName, year };

导入:

 import {firstName, lastName, year} from '文件名'
 
 import * as all from '文件名' 
 
 all.firstName //'Michael'

3、导出导入函数  
导出

export function a () { 
  return 1 
} 
或 
function a () {  
  return 1 
} 
export {a}

导入

import {a} from 'index.js' a()

default默认导出

export default function () { 
    return 2 
}

//默认导出函数时，导入时可以取任意名字读取函数
import fun from '文件名' 
fun() //2

持续更新...

参考资料：

模块化发展历程
 模块化历史
 模块化指北