JS模块化的发展历程,CommonJS、AMD、CMD、UMD、ES6模块化

你应该听过 CommonJS、AMD、CMD、UMD、JS 模块化等等,这篇文章讲的就是这些名称都是什么意思,为什么会出现JS模块化,以及他们分别是如何实现JS模块化的。

最早,我们就是直接在 script 标签里写 JS 代码的

function add(a, b) {

console.log(a + b)

}

add(1, 2)

这时候就有几个问题,一个是代码复用,一个是全局作用域污染,还有就是可维护性问题。

随着代码的增加,这些问题越来越严重。所以首先出现了命名空间和匿名闭包 IIFE 模式,对代码进行封装,并通过提供外部方法来对它们进行访问。

var namespace = {}

namespace.add = function(a, b) {

console.log(a + b)

}

namespace.add(1, 2)

// IIEF

var utils = (function() {

var module = {}

module.multiply = function(a, b) {

console.log(a * b)

}

return module

}())

utils.multiply(1,2)

大多数流行的 JS 库,都使用这种模式,比如 jQuery,所有的函数都在一个全局对象 $ 中。然而,这还是至少需要一个全局变量,而且开发人员需要知道正确的依赖顺序,比如需要控制在 jQuery 加载完成后才能运行带有 $ 的代码。

CommonJS

09年 CommonJS(或者称作 CJS)规范推出,在 NodeJS 中实现。主要方法是 exports 和 require。

// utils.js 文件

function add(a, b) {

console.log(a + b)

}

module.exports.add = add

// main.js 文件

var add = require('./utils').add

add(1, 2)

CJS 出来以后,服务端的模块概念已经形成,很自然地,大家就想要客户端模块。但是 CJS 是同步的,服务端读取本地硬盘可以很快同步加载完成,但是浏览器同步读取服务器端的模块可能需要很长的时间,浏览器将会处于”假死”状态。所以出现异步加载 js 文件的 AMD。

AMD

AMD 是异步模块定义(Asynchronous Module Definition)。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

//utils.js

define([], function() {

return {

add: function(a, b) {

console.log(a + b)

}

}

})

// main.js 文件

require(['./utils'], function(utils) {

utils.add(1, 2)

})

AMD 依赖 RequireJS,例如多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载,就是RequireJS解决的问题。引用模块的时候,将模块名放在数组中作为 reqiure() 的第一参数。如果定义的模块本身也依赖其他模块,同样将依赖模块放在 define() 的第一参数的数组中。

CMD

CMD(Common Module Definition)是玉伯在开发 SeaJS的时候提出来的,SeaJS 要解决的问题和 RequireJS 一样。不同于 AMD 的依赖前置,CMD 是就近依赖。

// AMD

require(['./utils', 'a', 'b'], function(utils) {

console.log(1)

// 还没有用到 utils a b 等模块,但是 AMD 已经初始化了所有模块

console.log(2)

utils.add(1, 2)

})

//CMD

define(function(require, exports, module){

console.log(1)

if(false) {

var utils = require('./utils') // 需要时再 require,不执行就不会加载

utils.add(1, 2)

}

})

但是在 AMD 也是支持依赖就近,也就是 CMD 这样的写法的,所以,RequireJS 中,以上两种方式都能执行。不过,RequireJS 官方文档中,默认都是采用依赖前置的写法。

UMD

再说 UMD,通用模块定义(Universal Module Definition),比如你写了一段代码或者写了一个库,在服务器端和浏览器端都会用到,难道要维护 CJS 和 AMD 两套代码吗,这时候,UMD 就来了。它其实就是帮你判断应该用 AMD 还是 commonJS,是哪个就用哪个方式来定义模块,都不是的话就挂到全局对象上。

// utils.js 文件同上

(function(root, factory) {

if (typeof define === 'function' && define.amd) {

//AMD

define(['utils'], factory)

} else if (typeof exports === 'object') {

//CommonJS

var utils = require('utils')

module.exports = factory(utils)

} else {

root.result = factory(root.utils)

}

}(this, function(utils) {

utils.add(1, 2)

}))

ES6

最后 ES6(ES2015)自带的模块化,这个大家应该就比较熟悉了,使用 import 和 export 关键字来导入和导出模块。不熟悉 ES6 的赶快去阮老师那里补课。

export const utils = {

add: function(a, b) {

console.log(a + b)

}

}

// main.js 文件

import { utils } from "./utils"

utils.add(1, 2)

这里再说一下 CommonJS 和 ES6 的区别,第一个

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

CommonJS 模块输出的是一个值的拷贝,一旦输出一个值,模块内部的变化就影响不到这个值。比如

// utils.js 文件

var count = 0

function add(a, b) {

console.log(a + b)

count++

}

module.exports = {add, count}

// main.js 文件

var utils = require('./utils')

utils.add(1, 2)

console.log(utils.count) // 0

虽然执行 add 函数使模块中的 count++ 但是引入 utils.count 时就是 0,模块内部改变并不会导致引入的值的变化。

ES6 模块输出的是值的引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。到上面代码最后一行时候才会去模块中读取 utils.count 的值,这时候的输出就是 1 了,大家可以试一下。

第二个区别是

CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

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

尾声

我们在开发过程中可能对模块化如何实现的关注比较少,因为各种工具都可以帮我们转换成各种需要的模块化方式,比如 TS 可以生成各种模块加载系统使用的代码。不过,看完这篇文章有没有搞清楚 JS 模块化呢。

参考https://juejin.im/post/5b5069f56fb9a04fb136de33https://www.html.cn/archives/7628https://es6.ruanyifeng.com/#docs/module-loaderhttps://juejin.im/post/5e3985396fb9a07cde64c489https://typescript.bootcss.com/modules.htmlhttps://juejin.im/post/5c17ad756fb9a049ff4e0a62

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200406A0NXYU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券