模块化基本概念

1.什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

2.模块化的进化过程

全局function模式 : 将不同的功能封装成不同的全局函数

- 编码: 将不同的功能封装成不同的全局函数
- 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

namespace模式 : 简单对象封装

- 作用: 减少了全局变量，解决命名冲突
- 问题: 数据不安全(外部可以直接修改模块内部的数据)

javascript 复制代码

let myModule = {
  data: 'www.baidu.com',
  foo() {
    console.log(`foo() ${this.data}`)
  },
  bar() {
    console.log(`bar() ${this.data}`)
  }
}
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo() // foo() other data

这样的写法会暴露所有模块成员，内部状态可以被外部改写。

IIFE模式：匿名函数自调用(闭包)

- 作用: 数据是私有的, 外部只能通过暴露的方法操作
- 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
- 问题: 如果当前这个模块依赖另一个模块怎么办?

xml 复制代码

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
    myModule.foo()
    myModule.bar()
    console.log(myModule.data) //undefined 不能访问模块内部数据
    myModule.data = 'xxxx' //不是修改的模块内部的data
    myModule.foo() //没有改变
</script>

javascript 复制代码

// module.js文件
(function(window) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar } //ES6写法
})(window)

IIFE模式增强 : 引入依赖

- 这就是现代模块实现的基石

javascript 复制代码

// module.js文件
(function(window, $) {
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
    $('body').css('background', 'red')
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar }
})(window, jQuery)

xml 复制代码

 // index.html文件
  <!-- 引入的js必须有一定顺序 -->
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="module.js"></script>
  <script type="text/javascript">
    myModule.foo()
  </script>

上例子通过jquery方法将页面的背景颜色改成红色，所以必须先引入jQuery库，就把这个库当作参数传入。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

3. 模块化的好处

避免命名冲突(减少命名空间污染)
更好的分离, 按需加载
更高复用性
高可维护性

4. 引入多个

请求过多
首先我们要依赖多个模块，那样就会发送多个请求，导致请求过多
依赖模糊
我们不知道他们的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
难以维护
以上两种原因就导致了很难维护，很可能出现牵一发而动全身的情况导致项目出现严重的问题。模块化固然有多个好处，然而一个页面需要引入多个js文件，就会出现以上这些问题。而这些问题可以通过模块化规范来解决，下面介绍开发中最流行的commonjs, AMD, ES6, CMD规范。

模块化规范

名称	同步异步	规范文件	应用场景	加载速度	描述
CommonJS	同步	CommonJS	nodejs	平均加载速度最慢	最先版本的js模块化编程规范，同步下载全部依赖后才能继续向下执行。
AMD	异步	requireJS	依赖前置	平均加载速度最快	CommonJS的异步js加载模块解决方案，头部加载全部所需依赖。
CMD	异步	seaJS	就近加载	加载速度适中	CommonJS的异步js加载模块解决方案，使用依赖前就近加载所需依赖。

以上三种规范都是在解决如下问题：

模块化分装，避免污染全局变量
隐藏实现细节，避免从模块外部修改咱们没有暴露出来的变量、函数

AMD与CMD区别

注：加载模块都是异步的。 数组

在模块定义时对依赖的处理不一样

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require

对依赖模块的执行时机处理不一样

不过AMD依赖前置，js能够方便知道依赖模块是谁，当即加载
CMD就近依赖，须要使用把模块变为字符串解析一遍才知道依赖了那些模块

依赖前置

在解析和执行当前模块以前，模块做者必须指明当前模块所依赖的模块异步

就近依赖

能够把依赖写进你的代码中的任意一行async

1.CommonJS

(1)概述

Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。

(2)特点

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其在代码中出现的顺序。

(3)基本语法

暴露模块：module.exports = value或exports.xxx = value
引入模块：require(xxx),如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径

此处我们有个疑问：CommonJS暴露的模块到底是什么? CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

ini 复制代码

// example.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

上面代码通过module.exports输出变量x和函数addX。

javascript 复制代码

var example = require('./example.js');//如果参数字符串以"./"开头，则表示加载的是一个位于相对路径
console.log(example.x); // 5
console.log(example.addX(1)); // 6

require命令用于加载模块文件。require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。

(4)模块的加载机制

CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。这点与ES6模块化有重大差异（下文会介绍），请看下面这个例子：

ini 复制代码

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

上面代码输出内部变量counter和改写这个变量的内部方法incCounter。

ini 复制代码

// main.js
var counter = require('./lib').counter;
var incCounter = require('./lib').incCounter;

console.log(counter);  // 3
incCounter();
console.log(counter); // 3

上面代码说明，counter输出以后，lib.js模块内部的变化就影响不到counter了。这是因为counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

(5)服务器端实现

。。。

2.AMD

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。此外AMD规范比CommonJS规范在浏览器端实现要来着早。

(1)AMD规范基本语法

定义暴露模块:

javascript 复制代码

//定义没有依赖的模块
define(function(){
   return 模块
})

javascript 复制代码

//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
   return 模块
})

引入使用模块:

javascript 复制代码

require(['module1', 'module2'], function(m1, m2){
   使用m1/m2
})

(2)未使用AMD规范与使用require.js

通过比较两者的实现方法，来说明使用AMD规范的好处。

未使用AMD规范

javascript 复制代码

// dataService.js文件
(function (window) {
  let msg = 'www.baidu.com'
  function getMsg() {
    return msg.toUpperCase()
  }
  window.dataService = {getMsg}
})(window)

javascript 复制代码

// alerter.js文件
(function (window, dataService) {
  let name = 'Tom'
  function showMsg() {
    alert(dataService.getMsg() + ', ' + name)
  }
  window.alerter = {showMsg}
})(window, dataService)

scss 复制代码

// main.js文件
(function (alerter) {
  alerter.showMsg()
})(alerter)

scss 复制代码

// main.js文件
(function (alerter) {
  alerter.showMsg()
})(alerter)

xml 复制代码

// index.html文件
<div><h1>Modular Demo 1: 未使用AMD(require.js)</h1></div>
<script type="text/javascript" src="js/modules/dataService.js"></script>
<script type="text/javascript" src="js/modules/alerter.js"></script>
<script type="text/javascript" src="js/main.js"></script>

这种方式缺点很明显：首先会发送多个请求，其次引入的js文件顺序不能搞错，否则会报错！

使用require.js

RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。

AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

3.CMD

CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。

4.ES6模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

它们有两个重大差异：

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

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

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

ES6 模块的运行机制与 CommonJS 不一样。ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

(3) ES6-Babel-Browserify使用教程

简单来说就一句话：使用Babel将ES6编译为ES5代码，使用Browserify编译打包js。

总结

CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。
AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。
CMD规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。不过，依赖SPM 打包，模块的加载逻辑偏重
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

commonjs

nodejs里的规范，环境变量：

module
exports
require
global

每一个文件是一个模块，有自己的作用域。在文件内定义的变量、函数、类都是私有的，对其他文件不可见。

global是全局变量，多个文件内可以共同分享变量。

commonjs规定：

每个模块内部，module变量代表当前模块，该变量是一个对象。他有一个exports属性，这个属性是对外的接口。加载某一个模块，其实就是加载该模块的module.exports属性。

commonjs模块的特点：

所有代码运行在模块作用域内，不会污染全局变量
模块可以加载多次，但是只有第一次加载时运行一次。然后运行结果就被缓存下来，以后再加载，就是直接读取缓存的结果。

Module对象

猫救

node内部提供一个Module构建函数。每一个模块内部都有一个module对象，代表当前模块。它有以下属性：

id 模块标识符，通常是带有绝对路径的模块文件名
path 模块的文件名，绝对路径
exports 模块对外输出的值
parent 调用该模块的模块
children 该模块用到的其他模块
loaded 该模块是否已经加载完（在父模块中require一个子模块之后，子模块的loaded才变为true）

module.exports

表示对外输出的接口，其他文件加载该模块其实就是读取module.exports变量

exports

为了方便，Node为每一个模块提供了exports变量，指向module.exports。等同于

java 复制代码

var exports = module.exports

所以切记，不可以直接给exports赋值，这样就是切断了 exports和module.exports的联系。

ini 复制代码

exports = () => {}

只可以在exports上添加属性。如果该模块对外输出的是一个简单类型的值。那么不可以用exports去输出了，只能用```

ini 复制代码

module.exports = 'xx'

加载模式 - 同步/运行时加载

首先，commonjs加载模块的方式是同步的。在输入时先加载整个模块，生成一个对象。再从这个对象上读取方法，这种加载被成为运行时加载。只有对应子模块加载完成，才能执行后面的操作。为什么是同步的？因为Nodejs是用于服务端编程，模块文件存在于硬盘中，读取非常快。

加载时机

输入的值是被输出的值的拷贝。父模块引入了一个子模块，其实引入的是这个子模块输出的值的拷贝，一旦输出了这个值，模块内部的变化就影响不到这个值了。

AMD

非同步加载模块。浏览器环境要加载资源，需要从服务器端加载模块，依靠网络下载，时间比较长。所以需要采用非同步的模块。

AMD实现者 require.js

AMD相关的api define，用于定义模块，如果我们定义的模块本身也依赖其他模块，那么就需要把它放在数组中，作为第一个参数

javascript 复制代码

define(['xx/lib.js'], (lib) => {
  function foo(){
    lib.log('hello world!');
  }
  return {
    foo
  };
})

CMD

sea.js 都是非同步加载， AMD推崇的是前置依赖 ，先第一时间将前面数组内的模块都加载 CMD推崇的是就近依赖，延迟加载

UMD

是一种思想，兼容commonjs、AMD、CMD。

先判断是否支持Nodejs模块(exports是否存在)，如果存在就使用Nodehs模块。不支持的话，再判断是否支持AMD/CMD(判断define是否存在)。都不行就挂载在window全局对象上

javascript 复制代码

(function(t, e) {
  if (typeof module === 'object' && module.exports) { // Nodejs环境
    module.exports = e(require('react')) 
  } else if (typeof define === 'function' && define.amd) { // 浏览器环境
    define('react', e)
  } else { // 其他运行环境，比如小程序
    t.xx = e(t.React)  
  }
)(window, function () {})

ES6 Module

ES6 在语言标准层面上，实现了模块功能，而且实现的非常简单，宗旨是在浏览器和服务器通用的模块解决方案。其模块功能由两个命令组成：export 和 import。

ES6模块的特征：

import 是只读属性，不能赋值。相当于const
export/import 提升，import/export必须位于模块的顶级，不可以位于作用域内，其次对于模块内的import/export都会提升到模块的顶部。

ES6 Module 加载时机

import 是静态命令的方式，js引擎对脚本静态分析时，遇到模块加载命令import，会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被记载的那么模块中去取值。模块内部引用的变化会反应在外部。

在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为编译时加载。在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。

import和require都是被模块化使用

a. require是CommonJs的语法（AMD规范引入方式），CommonJs的模块是对象。

b. import是es6的一个语法标准（浏览器不支持，本质是使用node中的babel将es6转码为es5再执行，import会被转码为 require），es6模块不是对象

a. require是运行时加载整个模块（即模块中所有方法），生成一个对象，再从对象上读取它的方法（只有运行时才能得到这个对象,不能在编译时做到静态化），理论上可以用在代码的任何地方

b. import是编译时调用，确定模块的依赖关系，输入变量（es6模块不是对象，而是通过export命令指定输出代码，再通过 import输入，只加载import中导的方法，其他方法不加载），import具有提升效果，会提升到模块的头部（编译时执行）

export和import可以位于模块中的任何位置，但是必须是在模块顶层，如果在其他作用域内，会报错

es6这样的设计可以提高编译器效率，但没法实现运行时加载

a. require是赋值过程，把require的结果（对象，数字，函数等），默认是export的一个对象，赋给某个变量（复制或浅拷贝）

b. import是解构过程（需要谁，加载谁）

说一下前端模块化

模块化基本概念

1.什么是模块?

2.模块化的进化过程

3. 模块化的好处

4. 引入多个

模块化规范

AMD与CMD区别

在模块定义时对依赖的处理不一样

对依赖模块的执行时机处理不一样

依赖前置

就近依赖

1.CommonJS

(1)概述

(2)特点

(3)基本语法

(4)模块的加载机制

(5)服务器端实现

2.AMD

(1)AMD规范基本语法

(2)未使用AMD规范与使用require.js

AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

3.CMD

4.ES6模块化

(3) ES6-Babel-Browserify使用教程

总结

commonjs

Module对象

module.exports

exports

加载模式 - 同步/运行时加载

加载时机

AMD

CMD

UMD

ES6 Module

ES6 Module 加载时机

import和require都是被模块化使用