模塊化：
把大系統(tǒng)，較復(fù)雜的功能，進(jìn)行切分。

CommonJs:
    NodeJS
AMD:
    requirejs
CMD:
    seajs

RequireJs:
一、安裝、下載
????官網(wǎng)： requirejs.org
????Npm: npm i requirejs
二、使用
????以前的開(kāi)發(fā)方式的問(wèn)題：
????????1）、js 是阻塞加載
????????2）、變量名沖突
????????3）、多個(gè)JS文件之間相互依賴（必須保證一個(gè)正確的順序）

1、簡(jiǎn)單示例
    require(['js/a1.js']);
        —— 不阻塞頁(yè)面渲染了
2、定義模塊：(AMD) define
    一個(gè)模塊就是一個(gè)JS文件。

    define(function(){
        //....
        return 模塊要返回(導(dǎo)出)的東西
    });
3、模塊的調(diào)用：require
    require([模塊1,模塊2...],function(mod1,mod2....){
        //所有模塊加載完成后要做的事情
    });

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

注意：引入模塊的路徑，是由html文件決定。

6、路徑問(wèn)題
    /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 擴(kuò)展名
    沒(méi)有baseUrl，可加可不加

    建議： 使用baseUrl， 不加 .js

    2) paths:
        類似于給某個(gè)模塊起別名

8、程序主入口
    <script src="require.js" data-main="js/main" ></script>

ES6:
????自己支持模塊化。

let
塊作用域
const
...:
????...args —— 用于擴(kuò)展函數(shù)參數(shù)
????？
()=>

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

``

?str.startsWith
str.endsWith

數(shù)組方法

ES6:
????let a = 12;

????瀏覽器對(duì)ES6的支持不完整。不同的瀏覽器支持的程度也不同。

????在不支持的情況下，要使用ES6，借助工具 —— 可以把 ES6的語(yǔ)法翻譯成ES5或以前的。

????工具：

    1）網(wǎng)頁(yè)
        http://babeljs.io/repl/

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

        用于 測(cè)試語(yǔ)法的正確性。
    2）本地環(huán)境
    babel
    traceur：
        瀏覽器端 直接使用 ES6語(yǔ)法，進(jìn)行翻譯的一個(gè)較方便的工具：
            traceur.js
            bootstrap.js  —— 和前端布局使用的bootstrap沒(méi)有任何關(guān)系
        <script src="js/traceur.js"></script>
        <script src="js/bootstrap.js"></script>
        <script type="module">

ES6模塊化：
????定義(導(dǎo)出)：

        1、
            export 定義
            export let a = 12;
            export let b = 5;
            export function show(){}

        2、
        let a = 12;
        export default {
            a
        }
    使用：
        1、import {a,b,show} from 'js/a.js'  //注意名字必須和導(dǎo)出的名字一致

        2、
            import modA from 'js/a.js'  //a.js 擴(kuò)展名  .js  不能省略

    在模塊中引用其它模塊：
        a.js
            import modA from './b.js'

node中引模塊：
????const express = require('express'); //node_modules
????自己定義的模塊，非系統(tǒng)模塊的引入：
????????const modA = requires('./modules/modA');

ES6常用補(bǔ)充：
????1、 ... 擴(kuò)展參數(shù) Rest Arguments

        1) function show(a,b,...arg){}
        2) 復(fù)制數(shù)組：  arr=[...arr2];
            a. 循環(huán)賦值
            b. ...
            c. arr2 = Array.from(arr);  //不支持ie

????2、字符串新增

        str.startsWith('字符串1') //判斷 str 是否以 字符串1 開(kāi)頭  —— true/false
        str.endsWith('字符串2') //判斷 str 是否以 字符串2 結(jié)尾 —— true/false

????3、Map

        一種新的數(shù)據(jù)結(jié)構(gòu)。也是一種 key/value的形式。 鍵/值 對(duì)。
        結(jié)構(gòu)：  []  {} 
        1)  let map = new Map();   // 得到一個(gè)Map 對(duì)象
        2) 增加一項(xiàng)
            map.set('key',value);
        3) 取一項(xiàng)
            map.get('key');
            //返回 key 對(duì)應(yīng)的value值
            //如果找不到，返回 undefined
        4) 刪一項(xiàng)
            map.delete('key');

????4、for ... of

        循環(huán)：
            for
            for...in
            while
        循環(huán)數(shù)組：
            for(let item in arr){
                item -> 數(shù)組的每一項(xiàng)
            }
        循環(huán)JSON:  不能
        循環(huán)Map:
            1) 
                for(let item of map){
                    item[0]  —— key
                    item[1] —— value
                }
                item 是數(shù)組
            2) 解構(gòu)賦值
                for(let [k,v] of map){
                    k —— key
                    v —— value
                }

                [k,v] = item;
            3) for(let item of map.entries()){}  //默認(rèn)值，如果用 map 和 map.nentries() 效果一樣
            4) for(let key of map.keys()){}
            5) for(let val of map.values()){}
        再循環(huán)數(shù)組：
            1)  for(let item of arr.entries()){}
                item ->  [下標(biāo),值]
            2) for(let key of arr.keys()){}
                key ->  數(shù)組下標(biāo)
            3) for(let v of arr.values()){}   ×

????5、箭頭函數(shù)的簡(jiǎn)寫(xiě)

        1） 如果函數(shù)體只有一句話，并且是return
            —— 可以把  return 和 {} 省略
        2） 如果函數(shù)參數(shù)只有一個(gè)
            —— 可以把 () 省略
            (a)=>{...}
            a=>{...}

????6、數(shù)組新方法

        數(shù)組方法：  push  pop shift unshift splice sort concat reverse join 
            indexOf
        ES6新增：
            1) map  —— 映射
                對(duì)數(shù)組中的每一項(xiàng)做相同的操作——產(chǎn)生一個(gè)新數(shù)組
                let arr2 = arr.map(function(item){
                    //alert(item);
                    return item + 1;
                });
                arr2 ——> arr 的每一項(xiàng)加1的結(jié)果
            2) forEach —— 循環(huán)
                arr.forEach(function(val,index){
                    val ——> 數(shù)組每一項(xiàng)的值
                    index ——> 數(shù)組的下標(biāo)
                });
            3) filter —— 過(guò)濾
                let arr2 = arr.filter(function(item){
                    return item > 5;   // 條件： true /false
                });
                arr2 ——> arr中值 大于5的
            4) reduce —— 匯總
                a.
                    arr.reduce(function(前一個(gè)，當(dāng)前，索引，自己){
                        前一個(gè)：第一次 是  第一個(gè)數(shù)
                            以后  是 undefined
                    });
                b.
                    arr.reduce(function(前一個(gè)，當(dāng)前，索引，自己){
                        return xxx;  //xxx 就是下一次的 前一個(gè)
                    });
                c.
                    arr.reduce(function(pre,cue,index,self){},前一個(gè));

                * reduce方法，如果給定前一個(gè)值，那么第一次的前一個(gè)就是給定值
                    如果沒(méi)有給定前一個(gè)值，那么把數(shù)組的第一項(xiàng)做為前一個(gè)
            應(yīng)用：
                1）數(shù)組求和
                    let sum = arr.reduce((pre,cur,index,self)=>{
                        return pre + cur;
                    });
                2）二維數(shù)組扁平化
                    let arr = [
                        [1,2],
                        [3,4],
                        [5,6]
                    ];