共计 1065 个字符,预计需要花费 3 分钟才能阅读完成。
前言
以模块化的形式来开发能够进步代码复用率,并且能够更好地拆分组件,升高耦合度,进步可维护性。
目前风行的 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 都是运行时加载
参考资料:
- https://juejin.cn/post/684490…
- https://segmentfault.com/a/11…
正文完
发表至: javascript
2021-06-15