前端学习(三十五）模块化es6（笔记）

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、程序主入口
    <script src="require.js" data-main="js/main" ></script>

==========================
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没有任何关系
            <script src="js/traceur.js"></script>
            <script src="js/bootstrap.js"></script>
            <script type="module">
============================================
ES6模块化：
    定义(导出)：
        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'  //注意名字必须和导出的名字一致

2、
            import modA from 'js/a.js'  //a.js 扩展名  .js  不能省略

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

==========================

node中引模块：
    const express = require('express');  //node_modules
    自己定义的模块，非系统模块的引入：
        const modA = requires('./modules/modA');
==========================
ES6常用补充：
    1、  ...   扩展参数  Rest Arguments
        1) function show(a,b,...arg){}
        2) 复制数组：  arr=[...arr2];
            a. 循环赋值
            b. ...
            c. arr2 = Array.from(arr);  //不支持ie
    2、字符串新增
        str.startsWith('字符串1') //判断 str 是否以 字符串1 开头  —— true/false
        str.endsWith('字符串2') //判断 str 是否以 字符串2 结尾 —— true/false
    3、Map
        一种新的数据结构。也是一种 key/value的形式。 键/值 对。
        结构：  []  {}
        1)  let map = new Map();   // 得到一个Map 对象
        2) 增加一项
            map.set('key',value);
        3) 取一项
            map.get('key');
            //返回 key 对应的value值
            //如果找不到，返回 undefined
        4) 删一项
            map.delete('key');
    4、for ... of
        循环：
            for
            for...in
            while
        循环数组：
            for(let item in arr){
                item -> 数组的每一项
            }
        循环JSON:  不能
        循环Map:
            1)
                for(let item of map){
                    item[0]  —— key
                    item[1] —— value
                }
                item 是数组
            2) 解构赋值
                for(let [k,v] of map){
                    k —— key
                    v —— value
                }

[k,v] = item;
            3) for(let item of map.entries()){}  //默认值，如果用 map 和 map.nentries() 效果一样
            4) for(let key of map.keys()){}
            5) for(let val of map.values()){}
        再循环数组：
            1)  for(let item of arr.entries()){}
                item ->  [下标,值]
            2) for(let key of arr.keys()){}
                key ->  数组下标
            3) for(let v of arr.values()){}   ×
                
    5、箭头函数的简写
        1） 如果函数体只有一句话，并且是return
            —— 可以把  return 和 {} 省略
        2） 如果函数参数只有一个
            —— 可以把 () 省略
            (a)=>{...}
            a=>{...}
    6、数组新方法
        数组方法：  push  pop shift unshift splice sort concat reverse join
            indexOf
        ES6新增：
            1) map  —— 映射
                对数组中的每一项做相同的操作——产生一个新数组
                let arr2 = arr.map(function(item){
                    //alert(item);
                    return item + 1;
                });
                arr2 ——> arr 的每一项加1的结果
            2) forEach —— 循环
                arr.forEach(function(val,index){
                    val ——> 数组每一项的值
                    index ——> 数组的下标
                });
            3) filter —— 过滤
                let arr2 = arr.filter(function(item){
                    return item > 5;   // 条件： true /false
                });
                arr2 ——> arr中值 大于5的
            4) reduce —— 汇总
                a.
                    arr.reduce(function(前一个，当前，索引，自己){
                        前一个：第一次 是  第一个数
                            以后  是 undefined
                    });
                b.
                    arr.reduce(function(前一个，当前，索引，自己){
                        return xxx;  //xxx 就是下一次的 前一个
                    });
                c.
                    arr.reduce(function(pre,cue,index,self){},前一个);

* reduce方法，如果给定前一个值，那么第一次的前一个就是给定值
                    如果没有给定前一个值，那么把数组的第一项做为前一个
            应用：
                1）数组求和
                    let sum = arr.reduce((pre,cur,index,self)=>{
                        return pre + cur;
                    });
                2）二维数组扁平化
                    let arr = [
                        [1,2],
                        [3,4],
                        [5,6]
                    ];