(17.06.02)模块化定义、RequireJs下载/安装、ES6语法翻译成ES5、ES6模块化、ES6常用补充

模块化：
把大系统，较复杂的功能，进行切分。

CommonJs:
    NodeJS
AMD:
    requirejs
CMD:
    seajs

---

RequireJs:
一、安装、下载
    官网： requirejs.org
    Npm: npm i requirejs
二、使用
    以前的开发方式的问题：
        1）、js 是阻塞加载
        2）、变量名冲突
        3）、多个JS文件之间相互依赖（必须保证一个正确的顺序）

1、简单示例
    require(['js/a1.js']);
        —— 不阻塞页面渲染了
2、定义模块：(AMD) define
    一个模块就是一个JS文件。

    define(function(){
        //....
        return 模块要返回(导出)的东西
    });
3、模块的调用：require
    require([模块1,模块2...],function(mod1,mod2....){
        //所有模块加载完成后要做的事情
    });

4、模块返回值：可以是任何东西
    define(function(){
        return {
            a,
            show(){}
        }
    });
5、在一个模块里可以引入其它模块
    define(['想引入的模块1','想引入的模块2'...],function(mod1,mod2){
        mod1 -> 想引入的模块1
        ...
    });

注意：引入模块的路径，是由html文件决定。

6、路径问题
    /1.html
    /html/2.html
    /js/
        a1.js
        a2.js  (依赖a1.js)
    1) 1.html
        require(['js/a2.js']);
        a2.js :
            define(['a1.js']);  ×
            define(['js/a1.js']) √
    2)2.html
        require(['../js/a2.js']);
        a2.js:
            define(['js/a1.js'])   ×
            define(['../js/a1.js'])  √
        奇怪的事：
            使用  define(['../js/a1.js'])  √
            1.html 能正常使用
7、配置
    1) baseUrl

    require.config({
        baseUrl:  // 用于指定模块的根目录
    });

    /1.thml
        baseUrl: 'js2'
    /html/2.html
        baseUrl:'../js2'

    有baseUrl ，不能加 .js 扩展名
    没有baseUrl，可加可不加

    建议： 使用baseUrl， 不加 .js

    2) paths:
        类似于给某个模块起别名

8、程序主入口
    

---

ES6:
    自己支持模块化。

let
块作用域
const
...:
    ...args —— 用于扩展函数参数
    ？
()=>

?let map = new Map();
map.set
map.get
map.delete

``

?str.startsWith
str.endsWith

数组方法

---

ES6:
    let a = 12;

    浏览器对ES6的支持不完整。不同的浏览器支持的程度也不同。

    在不支持的情况下，要使用ES6，借助工具 —— 可以把 ES6的语法翻译成ES5或以前的。

    工具：

    1）网页
        http://babeljs.io/repl/

        https://google.github.io/traceur-compiler/demo/repl.html#let%20a%20%20%3D%2012%3B%0A

        用于 测试语法的正确性。
    2）本地环境
    babel
    traceur：
        浏览器端 直接使用 ES6语法，进行翻译的一个较方便的工具：
            traceur.js
            bootstrap.js  —— 和前端布局使用的bootstrap没有任何关系