Skip to main content

模块化

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);
0%