模块化

CommonJS

导出与导入

1、正常导出导入（modul.exports、require）

• 导出模块：test.js

  let 自定义变量='test';
  module.exports=

2、require模块引入与处理

3、require动态加载

4、exports和module.exports

commonjs实现原理

require文件加载流程

require加载原理

EsModule

导出与导入

1、正常导出导入（export、import）

• 导出模块：test.js

  const 导出变量1='test1';
  const 导出变量2='test2';
  export {导出变量1,导出变量2}
  export const 导出方法名=funtion(){}

• 导入模块：main.js

  import { 导出变量1 , 导出变量2 , 导出方法名 } from './a.js'

2、默认导出（export default）

• 导出模块：test.js

  const 导出变量1='test1';
  const 导出变量2='test2';
  const 导出方法名=funtion(){}
  
  export default {
    导出变量1,
    导出变量2,
    导出方法名,
    //可以是函数，属性方法，或者对象。
  }

• 导入模块：main.js

  import 自定义导出模块名称 from './test.js';
  console.log(自定义导出模块名称)
  /*
   {
   	导出变量1:'test1',
  	导出变量2:'test2',
    导出方法名:Funtion,
   }
   */

3、混合导入｜导出

• 导出模块：test.js

  export const 导出变量1='test1';
  export const 导出变量2='test2';
  
  export default const 导出方法名=funtion(){}

• 导入模块：main.js

  场景一：默认导出改名导出，导出变量改名导出

  import 自定义默认导出名,{导出变量1,导出变量2 as 自定义导出变量2} from 'test.js'
  console.log({
    导出变量1,//test1
    自定义默认导出名,//Funtion
    自定义导出变量2,//'test2'
  })

  场景二：*导出所有非默认导出

  import 自定义默认导出名,* as 自定义导出对象名 from 'test.js'
  console.log({
    自定义默认导出名,//Funtion
    自定义导出对象名,//{导出变量1:'test1',导出变量2:'test2'}
  })

4、重命名导入

• 导入文件：main.js

  import {  
    //通过关键词 as 实现对导出变量的重命名
    导出变量1 as 重命名导出变量1 , 
    导出变量2 as 重命名导出变量2 , 
    导出方法名 as 重命名导出方法名, 
  } from 'test.js'

5、重定向导出

• 通过export直接导出

  //方式一：完整导出
  export * from 'module';
  
  //方式二：逐个暴露
  export {导出变量1,导出变量2,...,导出变量n} from 'module';
  
  //方式三：重命名后暴露
  export {
  	导出变量1 as 重命名导出变量1,
    导出变量2 as 重命名导出变量2,
    ...,
    导出变量n
  } from 'module';

6、无需导入模块，只运行模块

• 执行 module 不导出值 多次调用 module 只运行一次。

  import 'module'

7、动态导入

• import('module') ，动态导入返回一个 Promise。为了支持这种方式，需要在 webpack 中做相应的配置处理。

  const promiseObj=import('module');

ES6 module特性

1、静态语法

• import , export 不能放在块级作用域或条件语句中

  【原因】：

  • ES6 module 的引入和导出是静态的，import 会自动提升到代码的顶层

• import的导入名不能为字符串或在判断语句

2、执行特性

• 导入执行顺序：子 -> 父。（采用深度优先遍历）

3、导出绑定

• 不能修改import导入的属性， 被导入的变量是只读的，可以理解为 const 装饰，无法被赋值。

4、import()动态引入

• 可以看似请求返回，其中返回对象中default对应导出的export defualt，__esModule 为 es module 的标识。
• 使用场景
  • 条件加载
  • 路由懒加载
  • React中动态加载

5、tree shaking 实现

• Webpack中不会打包未引入的方法。

立即执行函数

Q：如何使用？

• A：

  (function(...args){   
    //code body
  })(...args);