JS模块化的杂七杂八

时间  2019-11-24
标签 模块化 杂七杂八 栏目 JavaScript 繁體版
原文   原文链接

本文首先会先按照时间顺序初步介绍 CommonJS、 AMD、 CMD、 UMD、 ES6 Module，而后针对 CommonJS和 ES6 Module进行深刻阐述

1、初步介绍

在日常开发的过程当中，全部的这些代码都是由一个个的模块构成的，咱们能够在npm上下载咱们须要的包，而后组装在咱们的项目中，就好像组装模块同样，随着mvvm框架的普及，主流的开发方式都变成了模块化。在以前，js模块化仍是经过命名空间来实现的，再后来产生了一个模块化规范（CommonJs），CommonJs是诞生于node社区，但它只能在服务端运行，在浏览器端仍是用不了，因而，社区便出了AMD规范，国内又出了CMD，后来又出了UMD，其实这三个规范都是为了帮助模块化开发。目前比较流行的是ES6 Module规范。html

CommonJS

CommonJS规范的特色：前端

  • 一个文件即一个模块。文件中定义的变量、函数、类都是私有的，外界没法访问模块内的内容node

  • 经过module.exports暴露模块内的常量、函数、文件、模块等webpack

  • module.exports导出模块，输出的是值的拷贝;模块导入的也是输出值的拷贝git

    • 也就是说，一旦输出这个值，这个值在模块内部的变化是监听不到的（可对比ES6）

  • 使用require引入模块es6

  • 同步加载：github

    • 模块是同步加载的，即只有加载完成，才能执行后面的操做；
    • 由于CommonJS是运行在Nodejs服务端的，Node.js是同步模块加载，所以CommonJS是用同步的方式加载模块，对服务端来讲require()是本地加载，正由于全部文件都在本地，读取速度很快，同步加载不会形成什么很差的影响，可是在浏览器端，由于网络的缘由，同步加载就会在必定程度限制资源的加载速度

  • 模块是运行时加载(运行时加载)web

    • CommonJS规范中，require()是用来加载一个模块，那require这语句作了什么事？npm

      运行文件时，Node发现文件中使用require加载一个A模块，Node首先会执行整个A模块，而后在内存中生成一个对象，该对象就是A模块的一个表达载体，接着从该对象的exports属性中取出A模块输出的各个接口，供当前文件使用api

      {
   id: '',  // 惟一的模块名
   exports: {  // 包含模块输出的各个接口
      ...
   },
   loaded: true,  // 模块的脚本是否执行完毕
   ...
}
复制代码

      若在文件中再次使用require加载A模块，Node也不会重复执行A模块，而是直接在内存中找到A模块的表达对象，取出exports属性的值。也就是说不管经过require加载多少次相同的模块，都只会在第一次加载中运行，日后都是从对象中取出exports属性的值（除非手动清除系统缓存）

而后能够看一下CommonJS规范的代码

var foo = require('./foo') // 引入模块
var foo = require('event').some // 引入模块的某个属性

function fn() {
  console.log('fn')
}
module.exports.fn = fn // 经过module.exports将fn函数暴露出去
// exports.fn = fn // 或者经过exports暴露出去
复制代码

AMD（Async Module Definition ）

AMD是异步模块加载机制，做者以RequireJS实现了AMD规范，因此提及AMD规范就能想到RequireJS,它的特色：

  • 使用define定义模块: define能够传入三个参数，分别是模块名(string)、依赖模块（array）、回调函数（function）

    • 第一个参数是模块名，字符串类型，可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。若是存在，那么模块标识必须为顶层的或者一个绝对的标识

    • 第二个参数是依赖模块，数组类型，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量

    • 第三个参数是一个须要进行实例化的函数或者一个对象

      // 定义无依赖的模块
define({
  fn1: function(a){
    return a
  },
  arr1: []
})

// 定义有依赖的模块
define(["a"], function(a){
  return {
    fn1: function(){
      return a.num
    }
  }
})

// 具名模块
define("foo", [ "a", "b"], function(a, b){
    ...
});
复制代码

  • 使用require引入模块:

  • 异步加载模块：模块的加载不影响它后面语句的运行，全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行

  • 依赖前置，提早执行：

    • 在define方法里传入的依赖模块(数组)，会在一开始就下载并执行
    • RequireJS从2.0开始，也改为能够延迟执行，只是写法上和提早执行有些不一样。虽然 AMD也支持CMD写法，但依赖前置是官方文档的默认模块定义写法

而后能够看一下AMD规范的代码

// src/foo.js
// 会在声明并初始化要用到的全部模块(a和b)，无论后续是否用到
// 参数1 "foo" 是模块名
// 参数2 ["a", "b"] 是依赖的模块名
// 参数3 function(){} 是回调函数
define("foo", ["a", "b"], function (a, b) { // 定义foo.js模块
    const NUM = 2
    const fn = function () {
      console.log('foo')
    }
    return {
        NUM: NUM,
        fn: fn
    }
})


// app.js
require.config({ // 经过require.config()设置每一个模块路径和引用名
  baseUrl: "src",
  paths: {
    "foo": "foo", // 实际路径为src/foo.js, 指定foo.js的引用名为foo
  }
})

// 加载foo.js模块
// 加载模块时要将模块名（也能够是文件路径）放在[]中做为reqiure()的第一参数，
require(["foo"],function(foo){
  console.log(foo)
})
复制代码

CMD

CMD是通用模块定义，CMD是SeaJS在推广过程当中生产的对模块定义的规范，SeaJS的做者就是大名鼎鼎的玉伯，它的特色：

  • 一个文件为一个模块
  • 使用define定义模块
  • 使用require引入模块
  • 依赖就近，延迟执行： 只有执行到require()时，依赖模块才执行。

AMD和CMD其实不少地方类似，可是它们最大区别是执行方式的不一样，在执行过程当中，通过AMD编译后，全部require引入的模块都被前置了，CMD虽然也会将require的代码下载下来，可是它不会去执行，直到代码运行到那个模块的依赖才会去执行对应模块

/** AMD写法 **/
define(['./a','./b'], function (a, b) {
    //依赖一开始就写好，等于在最前面声明并初始化了要用到的全部模块
    a.test() // 即使没用到某个模块 b，但 b 仍是提早执行了
})
 
/** CMD写法 **/
define(function (requie, exports, module) {
    if (false) {
        var b = require('./b') //依赖能够在须要时申明
        b.doSomething()
    }
    exports.fn = function() {
      console.log('fn')
    };
})
复制代码

👇是sea.js的使用demo

//a.js
define(function (require, export, module)) {
  // 经过require引入依赖
  var foo = require('./foo')
  const NUM = 2
  // 经过export或者经过module.exports暴露接口
  exports.num = NUM
  // module.exports.num = NUM
}


//b.js
// 加载模块
// 数组中声明须要加载的模块，能够是模块名、js文件路径
seajs.use(['./a'], function(a) {
  a.fn();
});
复制代码

UMD

在webpack打包过程当中就有UMD这个选项，UMD实际上是一个通用解决方案，它自己不是什么新的规范，就好似一个判断条件同样。在模块定义中，它主要作了三件事

  • 先判断是否支持AMD。若是是则使用AMD，不然执行下一步
  • 而后判断是否支持CommonJs。若是是则使用CommonJs，不然执行下一步
  • 若是都不是，则定义为全局变量
(function (root, fac) {
  if (typeof define === 'function' && define.amd) { // 若是define这个方法被定义，且define.amd是否存在，说明是AMD
    define([], fac) // 以AMD的规范去定义模块
  } else if (typeof exports === 'object'){ // exports为一个对象，这个就是判断是否在node环境中，知足Commonjs规范
    module.exports = fac() // 以commonjs的规范去暴露接口
  } else {
    root.some = fac() // 暴露给浏览器的全局环境，root其实就是window
  }
})
复制代码

ESM（ES6 Module）

ES6 在语言标准的层面上，实现了模块功能，并且实现得至关简单，旨在成为浏览器和服务器通用的模块解决方案。webpack3原生支持

  • 一个文件为一个模块

  • 使用export暴露模块内的常量、函数、文件、模块等，暴露的是对值的引用

    • ES6 Module暴露出去的是一种静态定义（引用）

  • export命令规定的是对外的接口，必须与模块内部的变量创建一一对应关系。

  • 使用import引入模块

    • ES6 Module模块对导出模块，变量，对象是动态引用，遇到模块加载命令import时不会去执行模块，只是生成一个指向被加载模块的引用，不存在缓存值的问题。
    • 引用带来的一个特色是，不会缓存运行结果，而是动态地去被加载的模块取值，也就是模块暴露的内容发生变化时，经过import引入的值自己也会相应的变化（在后面循环加载章节会详细阐述）

  • 模块是编译时输出接口（编译时加载）

    • ES6 Module暴露出去的是一种静态定义（引用），在代码静态解析阶段就会生成

import/export 最终都是编译为 require/exports 来执行的

// foo.js 暴露接口
export const NUM = 12
function fn() {
  console.log('fn')
}
export { fn }
export default class myClass {...} // 默认暴露


// app.js 引入模块
import myClass, { fn, NUM } from 'other_module'
复制代码

目前webpack支持AMD（requireJS）、ES6 Module（官方推荐）、CommonJS

require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出

2、理解CommonJS中的exports、module.exports

CommonJS规范中认为一个文件即一个模块

CommonJS是运行在Nodejs服务端的，Node为每一个模块都建立一个module对象以表明当前模块，初始值为{}，该对象的exports属性（即module.exports）是对外的接口，当经过**require加载某个文件时，其实就是加载该文件的module.exports**。下面代码经过module.exports输出变量el和函数fn1。

// foo1.js
const el = 5
const fn1 = function (val) {
  return `val: ${val}`
}
module.exports.el = el
module.exports.fn1 = fn1
复制代码
// index.js
var foo1 = require('./foo1') // 加载模块

console.log(foo1) // { a: 5, fn1: [Function: fn1] }
console.log(foo1.el) // 5
console.log(foo1.fn1(4)) // val: 4
复制代码

前面说了，require加载某个文件时，其实就是加载该文件的module.exports，那exports对象是什么？

为了方便，Node为每一个模块提供一个exports对象，并让exports对象指向module.exports，如此一来，exports和module.exports都指向同一块内存区域，这样咱们就能够直接在exports对象上添加变量、函数、类等，以表示对外输出的接口，如同添加在module.exports同样。其做用就像👇这行代码同样,

var exports = module.exports; 
复制代码

来看一下经过exports暴露接口的代码：

// foo1.js
const el = 5
const fn1 = function (val) {
  return `val: ${val}`
}
// 与module.exports上方写法相同效果
exports.el = el
exports.fn1 = fn1
复制代码

可是须要注意的是，不能直接将exports变量指向一个值(直接被覆盖取值 例如：export = xxx)，由于这样等于切断了exports与module.exports的联系；也不能修改module.exports值，这样也会让exports切断联系

掏个🌰感觉下这句话的意思

// index.js
var foo1 = require('./foo1');
console.log(foo1)

// fool1.js 
// eg1： 在第一次赋值以后，若是单独修改module.exports指向，export仍是停留在上一次赋值的值,而且此时经过exports暴露任何变量、函数等是没有用的，由于export已经不指向module.exports了
var exports = module.exports = {a: 1}
module.exports = {a: 2} // 此时exports值为{a: 1}
const el = 5
exports.el = el // index.js输出的值：{a: 2}

// fool1.js 
// eg2：修改exports值，一样致使export断开与module.exports的联系
var exports = module.exports
const el = 5
exports = {} // export指向新的对象
exports.el = el // index.js输出的值：{}，由于module.exports默认是{}
复制代码

从上面能够看出，require永远只会导出module.exports的内容，exports就好似一个代驾，当断开与module.exports的联系，他就没用了，它的做用就是方便用户使用module.exports这个对象

总结一下exports和 module.exports的区别了：

  • module.exports 初始值为一个空对象 {}
  • exports是指向的 module.exports的引用
  • require()返回的值是被加载文件的module.exports

若是有人有疑问，既然是引用关系，为啥修改exports不会同时修改module.exports的值？能够看看👇代码理解下引用的意思

var a = {name: 'one'}
var b = a
console.log(a) // {name: 'one'}
console.log(b) // {name: 'one'}

b.name = 'two'
console.log(a) // {name: 'two'}
console.log(b) // {name: 'two'}

var b = {name: 'three'}
console.log(a) // {name: 'two'}
console.log(b) // {name: 'three'}
复制代码

a 是一个对象，b 是对 a 的引用，即 a 和 b 指向同一块内存，因此前两个输出同样。当对 b 做修改时，即 a 和 b 指向同一块内存地址的内容发生了改变，因此 a 也会体现出来，因此第三四个输出同样。当 b 被覆盖时，b 指向了一块新的内存，a 仍是指向原来的内存，因此最后两个输出不同。

3、理解ES6 Module的export、export default

ES6 module是经过export和export default来暴露接口，那它们的联系和区别是什么？

先说明export和export default的区别：

  • 在一个文件或模块中，export能够有多个，export default仅有一个

  • 经过export方式导出，在导入时要加{ }，export default则不须要

  • export可直接导出变量表达式，export default不可

// foo.js
// export导出
export const NUM1 = 1 // 直接导出
function fn () {
  console.log('res')
}
const NUM2 = 2
export { fn, NUM2 } // 间接导出

// export default导出
export default function fn1 () { // 直接导出
  console.log('res1')
}
// const NUM2 = 2
// export default NUM2 // 间接导出
// export defult const NUM2 = 2 // export default不可导出变量表达式
复制代码
// index.js
import { NUM1, fn, NUM2 } from './foo' // 导出了export
import fn1 from './foo'  // 导出了export default
// import fn1, { NUM1, fn, NUM2 } from './foo' // 等价于上面两行

import * as all from './foo' // 将export和export default暴露出的接口都用对象all表示

fn1() // res1
fn() // res
console.log(NUM1) // 1
console.log(NUM2) // 2

console.log(all.NUM) // 1
console.log(all.default) // res1 export default暴露出来的在all的default属性里
复制代码

另外提一下，暴露的方式还有一些拓展的写法

// 第二种方式:先定义，后暴露
const NUM = 12
function fn() {...}

export { NUM, fn } // 暴露上面定义的NUM变量和fn函数
export { NUM as NUM_NEW, fn as fn1 } // 以NUM_NEW代替NUM，被暴露出去；fn同理，import也要用NUM_NEW和fn1来引入

// 能够将其余模块的内容引入进来，而后再暴露出去，做一个中转站
export {foo, bar} from 'other_module' // 引入foo和bar接口，并将其暴露出去
export * from 'src/other_module' // 表示先引入other_module模块的全部接口，而后所有暴露出去
export {foo as foo1, bar} from 'other_module' // 也能够进行重命名，将foo以foo1的名字暴露出去
复制代码

4、CommonJS和ES6 Module应对”循环加载“

“循环加载”指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本

// a.js
var b = require('b');

// b.js
var a = require('a');
复制代码

循环加载最容易发生的状况就是递归加载，致使无限循环，可是复杂项目中模块众多，模块互相依赖的状况也时常发生，所以，主流的两个模块规范CommonJS和ES6 Module也给出了各自的解决方案

CommonJS的循环加载

前面讨论过CommonJS的加载原理，require第一次加载模块会生成一个对象，此后重复加载该模块都是从对象中的exports属性中取值。针对循环加载

👉CommonJS的方案是：一旦出现某个模块被“循环加载”，就只输出已经执行的部分，没有执行的部分不会输出。

结合🌰进行理解，下面🌰来自于Node官方文档

//main.js
var a = require('./a.js');
var b = require('./b.js');

console.log('在main.js中，a.done = %j, b.done = %j', a.done, b.done);
复制代码
//a.js
exports.done = false;

var b = require('./b.js');
console.log('在a.js中，b.done = %j', b.done);

exports.done = true;
console.log('a.js执行完毕！')
复制代码
//b.js
exports.done = false;

var a = require('./a.js');
console.log('在b.js中，a.done = %j', a.done);

exports.done = true;
console.log('b.js执行完毕！')
复制代码
node main.js // 运行main.js

输出结果：
在b.js中，a.done = false
b.js执行完毕！
在a.js中，b.done = true
a.js执行完毕！
在main.js中，a.done = true, b.done = true
复制代码
  • 执行过程以下：
    • 首先加载a模块，a模块暴露done=false，而后在a模块中加载b模块，b模块暴露done=false，而后加载a模块，此时发生循环加载
    • 此时，系统不会去继续从新加载a模块，而是从以前加载a模块时建立的对象中取值，而其中的值也仅仅是已经执行完的部分，系统从对象的exports属性中取值，done=false，而后继续往下执行，输出在b.js中，a.done = false,而后输出b.js执行完毕！
    • b模块执行结束后，a模块就能够继续执行了，此时b模块的done=true，所以输出在a.js中，b.done = true，而后输出a.js执行完毕！
    • 此时a，b都执行结束，且都在内存建立对应的对象，在main.js中加载a、b模块，则直接从对象中获取exports属性

ES6 Module的循环加载

前面介绍了ES6 Module两个特色：

一、使用export暴露接口，暴露的是对值的引用

二、使用import动态引入模块，遇到import时不会去执行模块，只是生成一个指向被加载模块的引用，等到真的须要用到模块时，再到模块里面去取值。

举个🌰，例子来源于阮一峰

// a.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

// b.js
import {foo} from './m1.js';
console.log(foo);
setTimeout(() => console.log(foo), 500);

// 执行b.js，输出为：
bar
baz
复制代码

从结果能够看出，a.js的变量foo，在刚加载时等于bar，过了500毫秒，又变为等于baz，b.js一开始获取到foo的值时bar，500毫秒后获取的值时baz，这就说明ES6 Module 不会去缓存运行结果，而是动态地去取被加载模块暴露的值，由于import生成的引用，其实就是一个地址引用，指向那块数据的内存

👉ES6 Module不会关心import是否发生”循环加载“，由于它仅仅生成一个引用，须要开发者本身保证，在文件中真正使用被加载模块时，引用是能够取到值

也就是说，在文件中使用import加载A模块时，仅仅是生成一个引用（相似指针），该引用指向的是A模块暴露接口的地址，所以，开发者必须保证在真正使用A模块时，是能够取到A模块的值，不然就会报错

// a.js
import {resB} from './b'
console.log('a')
export const resA = 2

// b.js
import {resA} from './a'
console.log('b')
export const resB = 3
console.log(resA)

// 输出结果
b
undefined
a
复制代码

上述代码，a.js加载b.js，b.js又加载a.js，构成了循环加载。按照CommonJS规范，上面的代码是无法执行的。a先加载b，而后b又加载a，这时a尚未任何执行结果，因此输出结果为null，即对于b.js来讲，变量resA的值等于null，后面的foo()就会报错。

让咱们一行行来看，ES6 循环加载是怎么处理的。首先，执行a.js之后，引擎发现它加载了b.js，所以会优先执行b.js，而后再执行a.js。接着，执行b.js的时候，已知它从a.js输入了resA接口，这时不会去执行a.js，而是认为这个接口已经存在了，继续往下执行，执行到console.log(resA)时，发现这个接口没有定义，而后输出undefined。接着继续执行a.js，输出a

补充知识点：在代码运行前，函数声明和变量定义一般会被解释器移动到其所在做用域的最顶部。若是把函数写成函数表达式，就不具备提高做用了

那如何解决这个问题？能够利用函数提高来解决，在a.js中经过函数包裹NUM常量，而后将该值进行返回，因为函数会被提高，因此当b.js执行resA()的时候，a.js的resA已经被声明了，此时执行console.log(resA())就能获得正常的结果

// a.js
import {resB} from './b'
console.log('a')
function resA() {
  const NUM = 2
  return NUM
}
export { resA }

// b.js
import {resA} from './a'
console.log('b')
export const Foo2 = 3
console.log(resA())

// 输出结果
b
2
a
复制代码

5、CommonJS与ES6 Module的差别

  • CommonJS暴露出的是一个值的拷贝，一旦暴露接口，这个接口在模块内部的变化是监听不到的；ES6 Module暴露的是内容的引用，模块内部被暴露的接口改变会影响引用的改变
  • 若遇到重复加载的状况，CommonJS会直接从第一次加载时生成对象的exports属性中取值；ES6 Module则会经过引用找到模块暴露接口的内存位置，并从中取值
  • 若出现循环加载状况，CommonJS只输出已经执行的部分，还未执行的部分不会输出；ES6 Module须要开发者本身保证，真正取值的时候可以取到值
  • CommonJS是加载时执行，若出现循环加载状况，则从已执行的内容中取值；ES6 Module是动态引用，加载模块时不执行代码，只是生成一个指向被加载模块的引用
  • CommonJS模块是运行时加载，ES6 Module模块是编译时输出接口
  • CommonJS是加载整个模块，ES6 Module能够按需加载部分接口

但愿看完本篇文章能对你有所帮助，

文中若有错误，欢迎在评论区指正，若是这篇文章帮助到了你，欢迎点赞和关注。

参考资料 📖

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程