模块化

一、什么是模块化
是一种项目的构架模式， 这种构架模式让JS代码重用性变得非常高，让项目构架的一些复杂问题全部得以解决。 例如，多个script标签不会再出现了，我们只要用一个script标签进行引入就可以了。

为了减少系统耦合度，提高内聚，减少资源依赖
便于维护，功能复用性更强
解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题

二、模块化规范
模块化有三个规范，AMD规范和CMD规范，当然还有针对于ndoejs后台的commonJS规范

AMD 异步模块定义=>主要负责前端的模块化实现=>require.js
    依赖前置 => 如果你有，我就加载

CMD 需求加载，创始人是玉伯，=> seajs

CommonJs => NodeJs规范 => 用来写后台的
这些规范目标一致都是为项目实现模块化，期中有遵循AMD规范的 require.js 和遵循CMD规范的sea.js。

先说这两种规范的不同：
1.首先对于依赖：
    AMD提前执行(不管有没有用，先加载过来)   //特点 : 前期消耗网络资源大， 但是后期运行效率高.
    CMD需求执行(有用我再去加载)           //特点:整个自选消耗曲线比较平缓。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

3. AMD 的 API 默认是一个当多个用。比如，require 分全局 require 和局部 require，都叫 require。

http://www.ruanyifeng.com/blog/2012/11/require_js.html?bsh_bid=230697246

三、AMD模块化

定义模块defined()：(module.js)
    defined(["otherModule"],function(){
        ...
        ...
        return {};
    })

加载模块require()：(main.js)
    require(["module"],function(moduleObj){
        //模块加载完成后执行
        ...
    })

四、ES6模块化
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

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

ES6模块的使用：
使用export规定模块的对外接口，使用import用于输入其他模块提供的功能
     
定义模块export语法：（module.js文件）
    export var a = 10;
    
    var b = 20;
    export {b};
    
    var c = "admin"
    export {c as name};

    ||

    export {a,b,c};
    export {a as num1, b as num2, c as name};
    export default {num1:a, num2:b, name:c}

加载模块import语法：（main.js文件）
    import {a} from "./module.js";
    import {b} from "./module.js";
    import {c} from "./module.js";
    import {a,b,c} from "./module.js";
    import {num1,num2,num3} from "./module.js”;
    ||
    import {num1 as n1, num2 as n2, num3 as n3} from "./module.js";
    import obj from "./module.js";


注意：1.export和import关键字，只能存在于顶层作用域内，不能存在局部或块级作用域
     2.在ES6的模块化中，所有语法自动处在严格模式下
     3.export是声明关键字，声明一个对外接口
     4.export声明的接口必须和模块内部的变量建立一一对应的关系
     5.export声明的接口与对应的值是动态绑定，即可以拿到模块内部实时修改的值
     5.export和import时，都可以使用as关键字，重命名接口
     6.使用default关键字，设置默认接口，一个模块中只允许出现一次default
     7.import在使用接口时，必须将接口放在花括号内，除非export暴露接口时使用了default关键字
     8.import加载的接口是只读的，不允许被修改，如果接口是对象，可以修改属性
     9.import具有提升效果
     10.由于import是静态执行，所以不能使用表达式和变量
     11.当import后没有接收接口，会执行整个模块文件
     12.可以使用通配符*加载整个模块的接口（需要配合as使用），返回一个模块对象
     13.ES6的模块化不是对象，而是通过export输出对应的代码，再通过import输入
     14.import加载模块的输入接口是静态加载，指定接口的情况下，只加载接口部分