前端模块化总结

前言

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

模块化规范

1. CommonJS

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

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

注：浏览器须要从服务端下载这个模块文件，因此说若是用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...