一、模块化的来源
    随着ie6推出，浏览器有了js引擎，js代码量越来越多。为了适应大型项目并解决重复代码。
    （1）以页面为参考，将公用的js代码放进单独js文件，这样还有两个问题
    a.js文件的引入是阻塞的，前面js文件代码执行后，才能引入右面的文件，因此必须遵守引入顺序。
    b.全局污染 es5中可以用IIFE，返回一个闭包，立即执行函数来解决，

    1. //圆括号可以调用表达式，如果是函数声明，则会报错,可以将函数声明用圆括号包起来。
    2. //立即执行函数前后最好都打上分号，以免后面遇到圆括号当成表达式调用了报错
    3. var moduleA = (function(module){
    4.     let obj = {}
    5.   return obj
    6. })(moduleB);
    8. //将moduleB注入到moduleA中，作为函数中临时变量，很多jquery插件也是这么做的
    9. ;(function($){})(Jquery)
    11. //这样做依然没有解决引入顺序的问题

    image.png
    （2）nodeJs中产生了commonJS，实现了js的模块化。实现了js文件之间的模块化。html只需引入单个整合完成的js文件即可。
    a.导出：module.exports =
    b.引入：let module = require(‘./moduleA.js’)
    require后，会创建一个模块化实例，而且具有缓存机制，如果模块有变化，才会重新require，就算写再多个require也不会重复引入。
    引入生成的module是立即执行函数，并不是全局变量。

    （3）用户端也可以用的模块化 - AMD规范 - requireJs

    1. //现在html中配置各模块的路径，然后引入
    2. require.config({
    3.     paths:{
    4.     'moduleA' : './moduleA.js',
    5.     'moduleB' : './moduleB.js'
    6. })
    7. require(['moduleA','moduleB'],function(moduleA,moduleB){
    8.     console.log(moduleA.a, moduleB.b)
    9. })

    image.png
    特点：异步加载模块，前置依赖，所有模块加载后，才会执行回调函数

    （4）CMD 依赖前置
    需要的时候就用引入

    （5）es6中引入的标准模块化
    export 导出
    import 引入
    （6）commonJs、AMD和es6模块化比较
    a.commonJs、AMD是运行时加载,CommonJs的模块是一个对象
    b.es6模块是编译时加载或静态加载，es6模块可以在编译时完成加载，比CommonJs加载效率高，也可以在编译时进行’静态优化‘。es6的模块是通过export指定的代码，再通过import引入