来源 |
一、背景
作为后端开发，我们对模块化已经很熟悉了。 ES6的import和我们平时接触的nodejs中的require有什么区别？
我们也听说过CommonJS、CMD、AMD、ES6模块系统，它们之间有什么联系呢？
本文将对此类问题进行总结，以便我们对模块化有一个清晰的认识。
2、为什么需要模块化？ 1. 起源
一开始js并没有模块化的概念，就是把普通的脚本语言放在script标签里，做一些简单的校准，代码量也比较少。
随着ajax的出现，后端可以请求数据，做更多的事情，逻辑变得越来越复杂，就会出现很多问题。
1.1 全局变量冲突
由于你的代码都在一个作用域内，不同人定义的变量名可能会重复，从而导致覆盖。
var num = 1; // 一个人声明了...var num = 2; // 其他人又声明了1.2 依赖管理问题
比如我们引入了3个js文件，它们之间是直接依赖的，我们需要按照依赖关系从上到下进行排序。
<script src='./one.js'></script><script src='./two.js'></script><script src='./three.js'></script>如果文件超过十个，我们就需要整理出依赖关系，然后按顺序自动导入，这会让后续的代码越来越难以维护。
2. 初步解决方案
针对上述问题，虽然也有一些相应的解决方案。
2.1 命名空间
命名空间是将一组实体、变量、函数和对象封装在一个空间中的行为。 这里阐释了模块化思想的雏形，通过简单的命名空间进行“块”分割，凸显了分离与内聚的思想。 著名案例“YUI2”。
// 示例：const car = {name: '小汽车',start: () => {console.log('start')},stop: () => {console.log('stop')}}在里面的例子中，可以发现可能存在问题。 例如，如果我们更改汽车的名称，则原始名称将被修改。
car.name = '测试'console.log(car) // {name: '111', start: ƒ, stop: ƒ}2.2 闭包
再次完善模块化方案jquery取属性的值，借助封闭解决污染问题，变得更加纯粹的凝聚力
moduleA = function（） {var name = '小汽车';return {start: function (c){return name + '启动';};}}()里面的例子中函数内部的变量对外界是隐藏的，达到了封装的目的。 并且模块名称是全局暴露的，仍然存在命名冲突的问题。
以下效果基于 IIFE 和闭包实现：
// moduleA.js(function(global) {var name = '小汽车';function start() {};global.moduleA = { name, start };})(window)表达式内部的变量名不能从外部直接访问。
总结一下，那么模块化解决的问题有哪些：
三、主流模块化方案1.CommonJS
您可以点击CommonJS规范查看相关介绍。
1）每个文件都是一个模块，有自己的作用域。 文件中定义的变量、函数和类是私有的，对其他文件不可见。
2）CommonJS规范规定，在每个模块内部，module变量代表当前模块。 这个变量是一个对象，它的exports属性（即module.exports）是一个外部套接字。 加载模块，尽管模块的 module.exports 属性已加载。
3）require方法用于加载模块。
1.1 加载模块
var example = require('./example.js');var config = require('config.js');var http = require('http');1.2 外曝光模块
module.exports.example = function () {...}module.exports = function(x){console.log(x)}1.3 Node.js的模块化
说到CommonJS，就不得不提到Node.js。 Node.js 的出现让我们可以使用 JavaScript 来编写服务器端代码，并且 Node 应用程序由模块组成，采用 CommonJS 模块规范。 事实上，它并不完全符合CommonJS。 它实现了选择，并减少了一些自身的特性。
1）Node内部提供了Module创建功能。 所有模块都是 Module 的实例。 每个模块内部都有一个代表当前模块的模块对象。 包含以下属性：
2）Node使用CommonJS模块规范，使用外部require命令加载模块文件。
3）当模块第一次加载时，Node会缓存该模块。 加载模块后，直接从缓存中获取模块的 module.exports 属性。 所有缓存的模块都存储在 require.cache 中。
// a.jsvar name = 'Lucy'exports.name = name// b.jsvar a = require('a.js')console.log(a.name) // "Lucy"a.name = "hello";var b = require('./a.js')console.log(b.name) // "hello"第一次加载后name值发生了变化，而复制的name在第二次加载时又发生了变化，证明是从缓存中读取的。
如果你想删除模块的缓存，你可以这样做：
delete require.cache[moduleName];4）CommonJS模块的加载机制是输入是输出值的副本。 也就是说，一旦输出一个值，模块内部的变化就不会影响该值。 请看下面的例子。
// a.jsvar counter = 3exports.counter = counterexports.addCounter = function(a){counter++}// b.jsvar a = require('a.js')console.log(a.counter) // 3a.addCounter()console.log(a.age) // 3这个例子说明，a.js模块加载后，模块内部的变化不会影响a.counter。 这是因为 a.counter 是一个原始值并且将被缓存。 除非写成函数，否则可以获得内部变化后的值。
2.后端模块化
上面提到的CommonJS规范是基于node的，所以CommonJS都是针对服务端实现的。 为什么？
由于CommonJS规范是同步加载模块的，也就是说，只有加载完成后才会执行前面的操作。 由于Node.js主要用于服务器编程，模块文件通常已经存在于本地硬盘上，因此加载速度更快，而且不需要考虑异步加载的方法，因此CommonJS规范更适用。
如果是浏览器环境，则需要从服务器端加载该模块。 使用CommonJS，需要等待模块下载并运行后才能使用，这会阻塞前面代码的执行。 这时候就必须使用异步方式，所以浏览器端通常采用AMD规范，来解决异步加载的问题。
2.1AMD（AsynchronousModuleDefinition）和RequireJS
AMD是异步加载模块规范。
RequireJS 是一个实用程序库。 主要用于客户端的模块管理。 它允许将客户端代码分为模块进行异步或动态加载，从而提高代码的性能和可维护性。 其模块管理遵循AMD规范。
2.1.1 模块定义
1）独立模块（无需依赖任何其他模块）
//独立模块定义define({method1: function() {}method2: function() {}});//或者define(function(){return {method1: function() {},method2: function() {},}});2）非独立模块（需要依赖其他模块）
define(['module1', 'module2'], function(m1, m2){return {method: function() {m1.methodA();m2.methodB();}};});定义方法：
2.1.2 模块调用
require方法用于调用模块。 其参数与define方法类似。
require(['a', 'b'], function ( a, b ) {a.doSomething();});定义和调用模块的两种方式define和require也称为AMD模式。 它的模块定义非常清晰，不会污染全局环境jquery取属性的值，从而可以清晰地显示依赖关系。
2.1.3 require.js的配置方法
require方法本身也是一个对象，它有一个config方法，用于配置require.js的运行参数。
require.config({paths: {jquery: ['//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js','lib/jquery']}});参数对象包含：
2.1.3 CommonJS 与 AMD 的比较 2.1.4 运行时加载
简单来说，CommonJS 和 AMD 都只能在运行时确定一些东西，所以它是在运行时加载的。 例如下面的情况：
// CommonJS模块let { stat, exists, readFile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;里面的代码虽然整体加载了fs模块，但是生成了一个_fs的对象，然后从这个对象中读取了三种方式。 由于该对象仅在运行时可用，因此它成为运行时加载。
下面是AMD的反例：
// AMDdefine('a', function () {console.log('a 加载')return {run: function () { console.log('a 执行') }}})define('b', function () {console.log('b 加载')return {run: function () { console.log('b 执行') }}})//运行require(['a', 'b'], function (a, b) {console.log('main 执行')a.run()b.run()})// 运行结果：// a 加载// b 加载// main 执行// a 执行// b 执行我们可以看到，执行的时候，先加载了a和b，并且从main开始执行。 所以当需要一个模块的时候，会先加载该模块，然后返回一个对象，但是这个对象是作为一个整体加载的，也就是常说的后依赖。
2.2CMD（CommonModuleDefinition）和SeaJS
在Sea.js中，所有JavaScript模块都遵循CMD（CommonModuleDefinition）模块定义规范。
Sea.js 和 RequireJS 有什么区别？ 这是官方的区别。
RequireJS 符合 AMD（异步模块定义）规范，Sea.js 符合 CMD（通用模块定义）规范。 规格的不同导致两者的API不同。 Sea.js 与 CommonJSModules/1.1 和 NodeModules 规范更加一致。
下面简单对比一下AMD和CMD：
当 AMD 定义模块时，会指定所有依赖项。 依赖模块加载后，会进行反弹，并将参数传递给这个反弹方法：
define(['module1', 'module2'], function(m1, m2) {...});CMD规范中的模块就是一个文件，模块更接近Node对CommonJS规范的定义：
Define(factory);//factory可以是函数、对象或字符串。
当工厂是一个函数时，意味着模块被构造。 执行该构造方法即可获取模块提供的socket。 工厂方法执行时默认传入三个参数：require、exports 和 module：
define(function(require, exports, module) {// 模块代码});其中，require是一种接受模块标识符作为唯一参数来获取其他模块提供的套接字的技术。 当需要依赖某个模块时，可以随时调用require()来导入它。
define(function(require, exports) {// 获取模块 a 的接口var a = require('./a');// 调用模块 a 的方法a.doSomething();});下面演示CMD的执行
define('a', function (require, exports, module) {console.log('a 加载')exports.run = function () { console.log('a 执行') }})define('b', function (require, exports, module) {console.log('b 加载')exports.run = function () { console.log('b 执行') }})define('main', function (require, exports, module) {console.log('main 执行')var a = require('a')a.run()var b = require('b')b.run()})// main 执行// a 加载// a 执行// b 加载// b 执行看到执行结果，当我真正需要使用（依赖）该模块时，我就会执行该模块。 我觉得这和我们知道的好像是一样的，虽然执行顺序我也是这么认为的，而且看上面AMD的执行结果，是先把a和b都加载完之后，再执行main开始。
因此，相对于AMD的后依赖、早执行，CMD主张近依赖、延迟执行。
2.3 UMD（UniversalModuleDefinition）通用模块规范
可以看出，兼容模式虽然兼容了几种常见的模块定义方式。
(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined'? factory(require('lodash')) // node, commonJS: typeof define === 'function' && define.amd? define(['lodash'], factory) // amd cmd: (global = typeof globalThis !== 'undefined'? globalThis: global || self, factory(global.lodash));}(this, (function (lodash) { 'use strict';...})));2.4ES6模块
模块功能主要由两个命令组成：export和import。 export命令用于指定模块的外部socket，import命令用于导入其他模块提供的功能。
2.4.1 模块导入
模块是单个文件。 文件内部的所有变量都很难从外部获取。 如果希望外部读取模块内部的变量（函数或类），则必须使用export关键字来输出变量（函数或类）。
1）导入变量和函数
// a.js// 导出变量export var name = 'Michael';export var year = 2010;// 或者// 也可以这样导出var name = 'Michael';export { name, year };复制代码// 导出函数export function multiply(x, y) {return x * y;};2）使用as
一般情况下，export输出的变量是原来的名字，可以使用as关键字进行重命名。
function v1() { ... }function v2() { ... }export {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion};2.4.2 模块介绍
1）使用export命令定义模块的外部socket后，其他JS文件就可以通过import命令加载该模块。
// 一般用法import { name, year} from './a.js';// as 用法import { name as userName } from './a.js';注意：
import命令有抬高的作用，会抬高到整个模块的肚皮上，先执行。
下面的代码不会报错，因为import的执行早于foo的调用。 这些行为的本质是，导入命令是在编译阶段（前面比较 CommonJs 时提到的）、代码运行之前执行的。
foo();import { foo } from 'my_module';2）整体模块加载
//user.jsexport name = 'lili';export age = 18;//逐一加载import { age, name } from './user.js';//整体加载import * as user from './user.js';console.log(user.name);console.log(user.age);3) 导出默认命令
exportdefault命令用于指定模块的默认输出。 事实上，一个模块只能有一个默认输出，因此exportdefault命令只能使用一次。 因此，不需要加强import命令前面的括号，因为它只能对应exportdefault命令。
export default function foo() { // 输出// ...}import foo from 'foo'; // 输入注意：正是因为exportdefault命令只输出一个名为default的变量，所以它前面不能有变量声明语句。
// 正确var a = 1;export default a;// 错误// `export default a`的含义是将变量`a`的值赋给变量`default`。// 所以，这种写法会报错。export default var a = 1;2.4.3 ES6模块、CommonJS和AMD模块之间的区别
1）编译时加载和运行时加载
ES6模块的设计思想是尽可能静态，使得模块的依赖关系以及输入输出的变量只能在编译时确定。 所以ES6是在编译时加载的。 CommonJS 和 AMD 模块都只能在运行时确定这些事情。
例如，CommonJS 模块是对象，必须在输入时查找对象属性。
// CommonJS模块let { stat, exists, readFile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;// -----------------// ES6模块import { stat, exists, readFile } from 'fs';CommonJS和ES6模块加载的区别：
2) 价值副本和参考副本
1.3 Node.js模块化后面提到CommonJS是一个值拷贝。 模块加载并输出一个值后，模块内部的变化不会影响该值。 由于该值是原始类型值，因此它将被缓存。
ES6模块的运行机制与CommonJS不同。 JS引擎静态分析脚本时，遇到模块加载命令import时，会生成一个只读引用。 当脚本真正执行时，根据这个只读引用，去加载的模块中获取值。 换句话说，ES6的导入有点像Unix系统的“符号链接”。 如果原来的值发生变化，则import加载的值也会发生相应的变化。 因此，ES6 模块是动态引用的，但值不会被缓存，模块上的变量会绑定到它们所在的模块。
// a.jsexport let counter = 3;export function addCounter() {counter++;}// b.jsimport { counter, addCounter } from './a';console.log(counter); // 3addCounter();console.log(counter); // 4ES6模块输入的变量counter是活跃的，充分反映了其所在模块a.js内部的变化。
感谢您的阅读，祝您编程愉快！
发表评论