前端学习(三十五）模块化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]
];
