前端模块化知识梳理-编程学习网

一、背景

作为前端开发，模块化我们已经耳熟能详，我们平时接触到的 ES6 的 import，nodejs中的require他们有啥区别？

我们也听过CommonJS、CMD、AMD、ES6模块系统，这些都有什么联系呢？

本文将对这些问题进行归纳总结，可以对模块化有个清晰的认识。

二、为何需要模块化？

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，会导致原有的name被更改

car.name = '测试'
console.log(car) // {name: '111', start: ƒ, stop: ƒ}

2.2 闭包

再次提升模块化的解决方案，利用闭包使污染的问题得到解决，更加纯粹的内聚

moduleA = function（） {
   var name = '小汽车';
   return {
      start: function (c){
         return name + '启动';
      };
   }
}()

上面示例中function内部的变量就对全局隐藏了，达到了封装的目的。但是模块名称暴露在全局，还是存在命名冲突的问题。

下面这个基于 IIFE 和闭包实现的效果：

// moduleA.js
(function(global) {
  var name = '小汽车';
  function start() {};
  global.moduleA = { name, start };
})(window)

上面表达式中的变量 name 不能直接从外部访问。

综上，所以模块化解决的问题有哪些：

解决命名污染，全局污染，变量冲突等问题
内聚私有，变量不能被外面访问到
怎么引入其它模块，怎样暴露出接口给其它模块
引入其他模块可能存在循环引用的问题

三、主流模块化解决方案

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的实例，每个模块内部，都有一个module对象，代表当前模块。包含以下属性：

module.id 模块的识别符，通常是带有绝对路径的模块文件名。
module.filename 模块的文件名，带有绝对路径。
module.loaded 返回一个布尔值，表示模块是否已经完成加载。
module.parent 返回一个对象，表示调用该模块的模块。
module.children 返回一个数组，表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值。

2）Node使用CommonJS模块规范，内置的require命令用于加载模块文件。

3）第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。所有缓存的模块保存在require.cache之中。

// a.js
var name = 'Lucy'
exports.name = name
// b.js
var 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.js
var counter = 3
exports.counter = counter
exports.addCounter = function(a){
    counter++
}
// b.js
var a = require('a.js')
console.log(a.counter) // 3
a.addCounter()
console.log(a.age) // 3

这个例子说明a.js模块加载以后，模块内部的变化就影响不到a.counter了。这是因为a.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

2.前端模块化

前面所说的CommonJS规范，都是基于node来说的，所以CommonJS都是针对服务端的实现。为什么呢？

因为CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。

如果是浏览器环境，要从服务器端加载模块，用CommonJS需要等模块下载完并运行后才能使用，将阻塞后面代码的执行，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范，解决异步加载的问题。

2.1 AMD（Asynchronous Module Definition）和 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();
        }
    };
});

define方法：

第一个参数是一个数组，它的成员是当前模块所依赖的模块
第二个参数是一个函数，当前面数组的所有成员加载成功后，它将被调用。它的参数与数组的成员一一对应，这个函数必须返回一个对象，供其他模块调用

2.1.2 模块调用

require方法用于调用模块。它的参数与define方法类似。

require(['a', 'b'], function ( a, b ) {
    a.doSomething();
});

define和require这两个定义模块、调用模块的方法，合称为AMD模式。它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。

2.1.3 require.js的config方法

require方法本身也是一个对象，它带有一个config方法，用来配置require.js运行参数。

require.config({
    paths: {
        jquery: [
            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
            'lib/jquery'
        ]
    }
});

参数对象包含：

paths 指定各个模块的位置
baseUrl 指定本地模块位置的基准目
shim 用来帮助require.js加载非AMD规范的库。

2.1.3 CommonJS 和AMD的对比

CommonJS一般用于服务端比如node，AMD一般用于浏览器环境，并且允许非同步加载模块，可以根据需要动态加载模块
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的例子：

// AMD
define('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开始执行。所以require一个模块的时候，模块会先被加载，并返回一个对象，并且这个对象是整体加载的，也就是常说的依赖前置。

2.2 CMD(Common Module Definition) 和 SeaJS

在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition）模块定义规范。

Sea.js和 RequireJS 区别在哪里呢？这里有个官方给出的区别。

RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

这里对AMD和CMD做个简单对比：

AMD 定义模块时，指定所有的依赖，依赖模块加载后会执行回调并通过参数传到这回调方法中：

define(['module1', 'module2'], function(m1, m2) {
       ...
    });

CMD规范中一个模块就是一个文件，模块更接近于Node对CommonJS规范的定义：

define(factory); // factory 可以是一个函数，也可以是一个对象或字符串。

factory 为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：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(Universal Module Definition) 通用模块规范

可以看到其实兼容模式是将几种常见模块定义方式都做了兼容处理。

(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.4 ES6 模块

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，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命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

// 一般用法
import { name, year} from './a.js';
// as 用法
import { name as userName } from './a.js';

注意：

import命令具有提升效果，会提升到整个模块的头部，首先执行。

下面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的（后面对比CommonJs时会讲到），在代码运行之前。

foo();
import { foo } from 'my_module';

2）整体模块加载

//user.js
export 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）export default 命令

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

export default function foo() { // 输出
  // ...
}
import foo from 'foo'; // 输入

注意：正是因为export default命令其实只是输出一个叫做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模块加载区别：

CommonJS 实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
ES6模块实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载 ”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

2）值拷贝和引用拷贝

前面 1.3 Node.js模块化提到了 CommonJS是值拷贝，模块加载完并输出一个值，模块内部的变化就影响不到这个值。因为这个值是一个原始类型的值，会被缓存。
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

// a.js
export let counter = 3;
export function addCounter() {
  counter++;
}
// b.js
import { counter, addCounter } from './a';
console.log(counter); // 3
addCounter();
console.log(counter); // 4

ES6 模块输入的变量counter是活的，完全反应其所在模块a.js内部的变化。

文章详情

前端模块化知识梳理

一、背景

二、为何需要模块化？

1. 起源

1.1 全局变量冲突

1.2 依赖关系管理麻烦

2. 早期解决方案

2.1 命名空间

2.2 闭包

三、主流模块化解决方案

1. CommonJS

1.1 加载模块

1.2 对外暴露模块

1.3 Node.js的模块化

2.前端模块化

2.1 AMD（Asynchronous Module Definition）和 RequireJS

2.2 CMD(Common Module Definition) 和 SeaJS

2.3 UMD(Universal Module Definition) 通用模块规范

2.4 ES6 模块

软考中级精品资料免费领

相关文章

猜你喜欢

前端模块化知识梳理

Web前端：Web前端必备：JavaScript基础知识梳理

前端浏览器缓存知识梳理

B 端软件：常见知识梳理

前端知识 | Flexbox布局模式

前端模块化的前世今生

分析web前端模块化

SQL关系模型的知识梳理总结

Android 内存优化知识点梳理总结

什么是前端模块化ESM？

好程序员Web前端培训入门之JS基础知识梳理汇总

前端必会的nodejs知识工具模块使用示例详解

MySQL DBA基本知识点梳理和查询优化

分析web前端模块化开发

vue前端信息详情页模板梳理详解

一些前端基础知识整理

软件架构之如何理解前后端分离与前端模块化

Python可视化matplotlib模块基础知识

Node模块化的知识点有哪些

全面梳理下CSS盒模型的相关知识点