es6 中的模块化

模块化

背景

1. 在es6提出模块化之前，社区提出了 CommonJS 和 AMD , CommonJS 对应服务器端， AMD 对应客户端。

区别

1. es提出的module 是在 编译时（静态）执行

2. CommonJS 和 AMD 是在运行时（动态）执行

3. module 会更好，运行的时候会更快

语法

1. 导出的方式有：

   • export

   • export default

   • 两者的区别是：

     export 可以导出单个，也可以导出列表

     一个文件只能使用一次 export default

     export default 只能导出一个变量或一个函数， 优点是可以随意命名

     二者的相同点：

     都能导出变量、函数、模块、文件

     const name = "测试";
     function request () {
       .....
     }
     export default request;   // 默认导出 （一个文件中，只能出现一次）
     export { request, name };  //导出列表
     export let like = "吃喝玩乐";   // 导出单个
     export function likeFn () {		 // 导出单个
       console.log(like);
     }
     

2. 导入的方式：

   • import

     • 后面直接加变量的，是对应 export default 的形式

     • 后面加对象的， 是对应 export 的形式

       import req from './request.js';  // export default 的导出形式
       import { request as req } from './request.js';   // export 的导出形式 
       import from './util.js';  // 虽然没有导入任何变量，但是 util.js 中的会运行 
       

   "as" 可以 对 “导出” 和 “导入” 的变量进行重命名。