9.ES6自带的模块化
以前我们都是用seajs requireJs来实现模块化
ES6自带模块化：
1.如何定义(导出)模块(这里的模块可以是任何形式，如变量，函数，json等)
在a.js中定义模块：
const a=12;
export default a;
补充：如何导出多个小模块————以json的形式导出
const a=12;
const b=10;
export default {a,b};
导出多个后引用：
import c from './a.js';
console.log(c.a+c.b);
2.如何使用(引用)导出的模块：
注意：截止到目前为止，使用时在文件里必须引入traceur.js和bootstrap.js，并且type="module"
在es6-model.html中使用模块：
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
import modA from './a.js';
console.log(modA);
</script>
补充：1)在模块化中两个不同的模块定义相同的变量，常量，函数名是并不冲突的，因为他们属于不同的模块
2)不同模块之间也可以相互引用，并不影响
a.js中定义的模块：
const a=12;
export default a;
b.js中定义的模块：
const a=5;
export default a;
sum.js中定义的模块：(含不同模块之间的引用)
import a from './a.js';
import b from './b.js';
export default function sum(){ //这里是以函数的形式导出
return a+b;
}
es6-model.html中引用模块：
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
import sumMod from sum './sum.js';
console.log(sumMod);
</script>
---------------------------------------------------------------------------
10.ES6新增Promise：
在js中Promise其实就是一个对象，但是和我们平时的对象不同。
Promise对象，用来传递异步操作的数据(消息)
异步：多个操作可以同时进行
1)Promise对象的状态：
pending(等待，处理中)————>Resolve(完成)，又称fullFilled
————>Rejected(拒绝，失败)
补充：Promise状态只能从pending到Resolve，或者从pending到Rejected，不能同时存在两种状态
2)Promise对象的使用：
var pro=new Promise(function(resolve,reject){
//resolve————成功的时候执行
//reject————失败时执行
if(异步处理成功了){
resolve(成功数据); //异步请求成功了，把返回的成功数据拿出来，作为第一个then()方法成功函数的参数，
}else{
reject(失败原因); //异步请求成功了，把返回的成功数据拿出来，作为第一个then()方法失败函数的参数，
}
});
上面返回的pro就是一个Promise对象，它有一个有用的方法then()
pro.then(成功(resolve),失败(reject)){
}
示例1：模拟异步处理
<script type="text/javascript">
var pro=new Promise(function(resolve,reject){
resolve(1);
});
pro.then(function(value){
console.log(value);
return value+1; //pro.then()函数也有返回值，其返回值给下一次的pro.then()的参数value
},function(value){
console.log(value);
return value+2;
}).then(function(value){ //这里的value参数，是上一个then的返回值
console.log(value); //2
},function(value){
console.log(value);
});
</script>
示例2：node中的异步处理
在promise.js中编写以下代码：
//data.txt中数据为123456
const fs=require('fs');
fs.readFile('data.txt',function(err,data){
var pro=new Promise(function(resolve,reject){
if (err) {
reject(err);
}else{
resolve(data);
}
});
pro.then(function(value){
console.log(value.toString()); //123456
},function(value){
console.log(value);
});
});
在命令行中运行node promise.js 即可显示成功数据123456
示例3：ajax异步处理：
<input type="button" id="btn" value="按钮">
<div id="box"></div>
<script type="text/javascript">
//封装原生Ajax函数，详细请见AJAX目录里的“原生JS--Ajax”这篇博客
function ajax(url,fnSucc,fnFail){
//var oAjax=new XMLHttpRequest();
if (window.XMLHttpRequest) {
//非IE6
var oAjax=new XMLHttpRequest();
}else{
//IE6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
oAjax.open('GET',url,true);
oAjax.send();
oAjax.onreadystatechange=function(){
//oAjax.readyState--浏览器和服务器之间进行到哪一步了
if(oAjax.readyState==4){ //读取完成
if(oAjax.status==200){ //读取的结果是成功
fnSucc(oAjax.responseText); //成功时执行的函数
}else{
if(fnFaild){ //判断是否传入失败是的函数,即用户是否关心失败时的结果
fnFail(oAjax.responseText); //对失败的原因做出处理
}
}
}
}
}
window.onload=function(){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
oBtn.onclick=function(){
let mis=new Promise(function(resolve,reject){
ajax('data.txt',function(str){
resolve(str);
},function(str){
reject(str);
});
});
mis.then(function(value){
oBox.innerHTML=value;
},function(value){
oBox.innerHTML=value;
});
};
};
</script>
总结Promise对象上的其他方法：
1)pro.then()
2)pro.catch()————用来捕获错误
var pro=new Promise(function(resolve,reject){
resolve('成功了');
});
pro.then(function(value){
console.log(value);
throw '发生错误了';
}).catch(function(e){
comsole.log(e);
});
3)Promise.all()————全部，用于将多个Promise对象组合，包装成一个全新的Promise实例
用法：Promise.all([p1,p2,p3....]);
如果返回的所有的Promise对象都正确，才执行成功的代码
如果返回的Promise对象有一个错误，则执行失败的代码
应用：当做异步操作判断时，所有都返回时，才执行下面代码
var p1=Promise.resolve(3);
var p2=Promise.resolve(4);
var p3=Promise.reject(10);
Promise.all([p1,p2]).then(function(value){
console.log('成功了,'+value); //成功了,3,4
},function(value){
console.log('失败了,'+value);
});
Promise.all([p1,p2,p3]).then(function(value){
console.log('成功了,'+value);
},function(value){
console.log('失败了,'+value); //失败了,10
});
4)Promise.race()————返回一个Promise对象，调用最先能执行的Promise的结果,即哪个最先执行，使用哪个的结果
应用：我们在做异步程序的时候，有很多数据，哪个数据最快用哪个
var p1=new Promise(function(resolve,reject){
setTimeout(resolve,1000,'one');
});
var p2=new Promise(function(resolve,reject){
setTimeout(resolve,2000,'two');
});
Promise.race([p1,p2]).then(function(value){
console.log(value); //one
});
5)Promise.resolve()————生成一个成功的Promise对象，执行成功的代码
语法：
1.Promise.resolve(value);
value可以是字符串，数组，json等等
Promise.resolve([1,2,3]).then(function(value){
console.log(value);
console.log(value[0]);
},function(value){
console.log(value);
});
2.Promise.resolve(Promise);
var p1=Promise.resolve(3);
var p2=Promise.resolve(p1);
p2.then(function(value){
console.log(value); //3
});
6)Promise.reject()————生成一个失败的Promise对象，执行失败的代码
Promise.reject('这是失败的信息').then(function(value){
console.log(value);
},function(value){
console.log(value);
});
----------------------------------------------------------------------------------
11.ES6新增Generator ————生成器
是一个函数，这个函数可以遍历，
Generator就是一个状态机
语法：
function show(){ //普通的函数
}
function* show(){ //Generetor函数
yield xxx;
}
形式上：
1)function上有一个*号
2)函数内部使用yield语句
<script type="text/javascript">
function* show(){
yield 'hello';
yield 'world';
return 'ES6';
}
var res=show();
console.log(res.next()); //Object {value: "hello", done: false}
console.log(res.next()); //Object {value: "world", done: false}
console.log(res.next()); //Object {value: "ES6", done: true}
console.log(res.next()); //Object {value: undefined, done: true}
//在对象中Generator的用法
var json={
*show(){
yield 'a';
yield 'b';
return 'c';
}
}
var json=json.show();
console.log(json.next()); //{value: "a", done: false}
console.log(json.next()); //{value: "b", done: false}
console.log(json.next()); //{value: "c", done: true}
</script>
总结：每次都返回一个value和done的结果
value：表示按顺序yield后面的值
done：是一个布尔值，表示是否遍历结束
Generator在对象中的用法，没有function，直接 *函数名(){}
yield：是否有返回值：
yield语句本身没有返回值，或者每次都返回一个undefined
next()可以带参数,参数给了上一个yield的值，
for of 循环除了遍历Map对象，也可以循环Generator函数
function* fn(){
yield 1;
yield 2;
yield 3;
yield 4;
return 6;
}
for (let i of fn()){
alert(i); //1,2,3,4
}