模块化编程

前言：一直想写模块化编程相关的，一直搁置着，因为我也搞不是很明白。今天好好的把它梳理一下。
主要包括es6，CommonJS，AMD。

1. js模块化

为了建立一个模块化的规范制度、模块加载方式。在JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范，AMD（Asynchronous Module Definition）、CMD（Common Module Definition）、ES6模块化编程。
模块化的理解：
将一个复杂的程序根据规范进行封装成模块，然后通过其他地方与它有联系，向外部暴露接口（方法）进行调用，方便编程，程序化思想。

2. CommonJS模块化规范

2.1 概述

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

2.2 特点

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

2.3 基本语法

（1）暴露模块：

module.exports = value或exports.xxx = value

（2）引入模块：

require(xxx); //如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径

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

2.4 实例

//该文件时index.js，将下面两个函数进行封装；
const max=(x,y)=>{
   let m=x;
   if(m<y){  m=y; }
   return m;
}
const isLeapyear=(year)=>{
	if(year%4 === 0 && year % 100===0){
		console.log(`${year}是闰年`)
	}else{
		console.log(`${year}不是是闰年`)
	}
}
// 将两个函数暴露出去
module.exports={max, isLeapyear }

在另一个文件中引用封装好的两个函数

const main=require('./index.js');
let m1=main.max(56,89);
console.log("max="+m1);
let isleap=main.isLeapyear(2012);

3. ES6 模块化规范

JS一直没有模块体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼接起来。比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import。在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS、AMD两种。ES6在语言标准的层面上实现了模块功能。
ES6模块化的设计思想就是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

3.1 es6模块化语法

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
模块默认输出, 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率比 CommonJS 模块的加载方式高.

3.2 export 命令

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件，文件内部的所有变量外部都无法获取。如果希望外部能够读取内部的某个变量，就必须使用export输出变量。

export var firstName='Nike';
export var lastName = 'Jackson';
export var year = 1958;

上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量。
export的写法，除了像上面这样，还有另外一种。

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在var语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。
export命令除了输出变量，还可以输出函数或类（class）。

export function multiply(x, y) {
  return x * y;
};

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错
export 1;

// 报错
var m = 1;
export m;

//正确写法
// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

3.3 import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import {myMethod} from 'util';

上面代码中，util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。

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

foo();  //不会报错，正常执行
 
import { foo } from 'my_module';

3.4 export default 命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件，export-default.js，默认输出一个函数。
其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

export default命令用在非匿名函数前，也是可以的。

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

3.5 ES6 模块化实例

// 该文件是index.js,将下面两个函数进行封装
const  max=(x,y)=>{
	let m=x;
	if(m<y){
		m=y;
	}
	return m;
}
const isLeapyear=(year)=>{
	if(year%4 === 0 && year % 100===0){
		console.log(`${year}是闰年`)
	}else{
		console.log(`${year}不是是闰年`)
	}
}

//通过将两个函数暴露出去，注意看这里es6的暴露方法不一样

exports {max,sLeapyear}

在另一个文件中使用

 import {max,isLeapyear} from '/index.js'
 
let m1=max(56,89);  //这里将不是通过main.max来取得这个函数
console.log(`max=${m1}`);
let isleap=isLeapyear(2012);

4. AMD

基于commonJS规范的nodeJS出来以后，服务端的模块概念已经形成，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上面的代码，如果在浏览器中运行，会有一个很大的问题

var math = require('math');
math.add(2, 3);

第二行math.add(2, 3)，在第一行require(‘math’)之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
　　require([‘math’], function (math) {
　　　　math.add(2, 3);
　　});
主要有两个Javascript库实现了AMD规范：require.js和curl.js。

总结

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

import和require的区别

（1）遵循规范不同
import是es6模块化编程的语法标准，与export default和export配合使用
require是node中模块引入的方式，与module.export配合使用
（2）调用时间不同
require是运行时调用，理论上可以运行在代码的任何地方
import是编译时调用，所以必须放在文件的开头

在一个模块中，export default可以和export结合使用， 后者可以向外暴露多个成员，而前者只能向外暴露一个。
用export向外暴露的成员，只能通过{XXx}来接收，这种形式叫做按需导出

——————————————————————————————

参考文献：

(https://blog.csdn.net/Berlin_Rome/article/details/90666923)[https://blog.csdn.net/Berlin_Rome/article/details/90666923]
(https://segmentfault.com/a/1190000018759284?utm_source=tag-newest)[https://segmentfault.com/a/1190000018759284?utm_source=tag-newest]
(https://github.com/ruanyf/es6tutorial/blob/d7a3efd7b784496eed5af8579d28abe08680d1ee/docs/module.md)[https://github.com/ruanyf/es6tutorial/blob/d7a3efd7b784496eed5af8579d28abe08680d1ee/docs/module.md]