前端模块化总结

Posted 2021-09-07 Lingo

前言

以模块化的方式来开发可以提高代码复用率，并且可以更好地拆分组件，降低耦合度，提高可维护性。
目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。

模块化规范

1. CommonJS

• 模块的加载：用同步的形式加载文件。对于服务器端，模块文件都在本地磁盘，所以读取非常快，比较适合。对于浏览器端，要从服务器加载模块，但是限于网络原因，更适合异步的形式。

module.exports = value  //暴露模块
exports.xxx = value //暴露模块
require(xxx) //引入模块 如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径

• 加载原理：一个模块就相当于一个脚本文件，当第一次erquire会先执行完整个脚本文件，然后生成一个对象，对象的Id就是模块名，对象有个exports属性，是模块输出的接口。以后再执行require命令，不会再次执行这个脚本，而是到缓存中取值，也就是说CommonJS无论加载多少次，也不会再次执行该模块，而是到缓存中取值。
  注：浏览器需要从服务端下载这个模块文件，所以说如果用CommonJS的require方式加载模块，需要等代码模块下载完毕，并运行之后才能得到所需要的API。所以不推荐，因为会阻塞浏览器渲染页面。

  2. AMD

• 模块的加载：采用异步的形式。所有依赖此模块的语句都定义在一个回调函数中，等模块加载完毕才执行。

require.config()  //指定引用路径等
define()  //定义模块
require()  //加载模块。

3. CMD

• 模块的加载：异步加载，专门用于浏览器端，模块使用时才会加载。

4. ES6 Module

• ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

ES6与CommonJS模块的差异

1. CommonJS模块输出的是值的拷贝，ES6输出的是值的引用

• CommonJS模块输出的是值的拷贝，也就是说一旦输出这个值，模块内部的变化就影响不到这个值。
• ES6模块的运行机制不一样。JS引擎对脚本静态分析时，遇到import时，会生成一个只读引用，只有脚本真正执行的时候，再根据这个只读引用，到被加载的模块去取值。ES6模块是动态引用

2. CommonJS模块是运行时加载，ES6是编译时输出接口

• CommonJS加载的是一个对象（即module.exports属性) 该对象只有在脚本运行时才会生成，而ES6模块不是对象，他的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

CommonJS与AMD的对比

• CommonJS一般用于服务端，AMD一般用于浏览器客户端
• CommonJS和AMD都是运行时加载

参考资料：

1. https://juejin.cn/post/684490...
2. https://segmentfault.com/a/11...