js|js 模块化 commonJs AMD CMD ES Module js模块化commonJsAMDCMDESModule

什么是模块化呢? 事实上模块化开发最终的目的是将程序划分成一个个小的结构；
这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
也可以通过某种方式，导入另外结构中的变量、函数、对象等；
** 上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；**
无论你多么喜欢JavaScript，以及它现在发展的有多好，我们都需要承认在Brendan Eich用了10天写出JavaScript的时候，
它都有很多的缺陷：
比如var定义的变量作用域问题；
比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；
比如JavaScript没有模块化的问题；
所以 js 并不是一个完美的语言，他需要被优化，需要模块化来帮助开发者解决问题于是利用函数调用表达式实现简单的模块化，即：
** IIFE (Immediately Invoked Function Expression) **

// aaa.js var aaa = (function(){ var name = "123" return { name } })// bbb.js console.log(aaa.name)// 123

通过这种方式实现了简单的模块化，但是依然存在着诸多问题，比如模块变量名冲突，比如需要在入口文件将所有的js文件全部引入，不能做到按需引入，所以就需要一个规范，JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，如 commonJs
commonJs 我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。

Node是CommonJS在服务器端一个具有代表性的实现；
Browserify是CommonJS在浏览器中的一种实现；
webpack打包工具具备对CommonJS的支持和转换；

** 所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：**

在Node中每一个js文件都是一个单独的模块；
这个模块中包括CommonJS规范的核心变量：exports、module.exports、require；
CommonJS仅支持在服务端使用；

require("") 是同步加载，代码执行中需要先加载require中的包，再去执行后面的代码，因为服务端读取的是本地的资源，所以同步加载的影响并不明显，如果在前端使用的话，加载异步模块就会耗费大量加载时间，造成后面代码无法执行，进而系统卡死；所以为了解能在前端也使用这个规范，AMD 应运而生，
AMD 【js|js 模块化 commonJs AMD CMD ES Module】CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，这里加载是异步的，不会阻塞后面的代码执行，加载成功之后的回调函数中执行相应的逻辑，这样，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范，require.js和curl.js。

实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护。

define(['aaa','bbb'],function(aaa,bbb){...});

** AMD 特点 **
对于依赖的模块，AMD推崇依赖前置，提前执行。也就是说，在define方法里传入的依赖模块(数组)，会在一开始就下载并执行，也称之为运行时执行；
CMD CMD规范，全称”Common Module Definition”，称为通用模块加载规范。一般也是用在浏览器端。浏览器端异步加载库 Sea.js 实现的就是CMD规范。
AMD/CMD区别，虽然都是并行加载js文件，但还是有所区别，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
** CMD 特点 **
对于依赖的模块，CMD推崇依赖就近，延迟执行。也就是说，只有到require时依赖模块才执行。
ES Module JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ES推出了自己的模块化系统ES Module。
ES Module和CommonJS的模块化有一些不同之处：一方面它使用了import和export关键字；另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

ES Module模块采用export和import关键字来实现模块化：
export负责将模块内的内容导出；
import负责从其他模块导入内容；
采用ES Module将自动采用严格模式：use strict；

如果你不熟悉严格模式可以简单看一下MDN上的解析；
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

/** 定义模块 math.js **/ var basicNum = 0; var add = function (a, b) { return a + b; }; export { basicNum, add }; /** 引用模块 **/ import { basicNum, add } from './math'; function test(ele) { ele.textContent = add(99 + basicNum); }

ES Module 与 CommonJS特点比较 CommonJS模块是运行时加载，ES6 Module是编译时输出接口；
CommonJS加载的是整个模块，将所有的接口全部加载进来，ES6 Module可以单独加载其中的某个接口；
CommonJS输出是值的拷贝，ES6 Module输出的是值的引用，被输出模块的内部的改变会影响引用的改变；
CommonJS this指向当前模块，ES6 Module this指向undefined;