2019-01-14ES6模块化，修饰器，generator

模块化

//导出语句，导出方法，方法，类
export let A=233;
export function test(){};
export class Hello{
    test(){
    console.log("hello");
    }
}
//在另一个页面中导入
import {A,test,Hello} from lesson17
import  *  as lesson from lesson17//也可另起别名全部导入，在逐步引入，然后通过lesson.A等进行访问

一下为命名变量后全部导出，再全部引入

let A=233;
function test(){};
class Hello{
    test(){
    console.log("hello");
    }
}

export default{A,test,Hello}
//在另一个页面中进行引入
import lesson form './class/lesson17'

修饰器Decorator(函数修改行为，修改类的行为)（限定范围为类）

//需要安装依赖
npm install babel--plugin-transform-decorators-legacy --save -dev
//然后修改babelrc文件，
//限制某个属性只读
{
    let readOnly = function (target.name,descriptor) {
    descriptor.writable=false;
    return descriptor
    };

    class Test{
    @readOnly
    time(){
    return '2019-1-14'
    }
    }
    let test =new Test();
    test.time=function(){
    console.log('rest time');
    console.log(test.time());
    }
}
//该属性只能进行显示，不能进行重新赋值

//增加静态属性
{
    let typeName=function(target.name,descriptor){
    target.myName='hello'
    }
    @typeName
    class Test{

    }
    console.log('类修饰符',Test.myName);
}
//输出hello成功添加

这种应用中可直接引入第三方的修饰库：core-decorators，npm install安装即可

应用案例一：广告点击显示，埋点

{
    let log = (type) =>{
    return function (target.name,decorator){
    let src_method=decorator.value;
    decorator.value=(...arg) => {
    src_method.apply(target.arg);
    console.log('log',${type});
    }
    }
    }
    //广告类
    class AD{
    @log('show');
    show(){
    console.info('AD is show');
    }
    @log('click');
    console.info('AD is click')
    }
    //实例化
    let ad =new AD();
    ad.show();
    ad.click();
}

采用这种方法的原因是代码的可复用性更好，推广度高

Generator

• next()用法
• yield用法

 //基本定义
 {
    let tell = function* (){
    yield 'a';
    yield 'b';
    yield 'c';
 }
 let k = tell();
 console.log(k.next());//a
 console.log(k.next());//b
 console.log(k.next());//c
 console.log(k.next());//unfined
 }

generator也可以输出interator的返回值

{
    let obj ={},
    obj[Symbol.interator]=function* (){
    yield 'a';
    yield 'b';
    yield 'c';
 }
 for (let value of obj){
 console.log('value',value);
}
//value 1
//value 2
//value 3
 }

什么情况下，Generator下使用能顾发挥优势？
状态机：状态之间进行转换a->b->c,c->a等

{
    let state= function* (){
    while(1){
    yiled 'A';
    yiled 'B';
    yiled 'C';

 }
 let status=new state();
 console.log(status.next());
 //最终输出结果为abcabc一直输出
 }
 }

generator 的语法糖

{
    let tell = async function (){
    await 'a';
    await 'b';
    await 'c';
 }
 let k = tell();
 console.log(k.next());//a
 console.log(k.next());//b
 console.log(k.next());//c
 console.log(k.next());//unfined
 }

Generator在什么场景下发挥优势？

• 抽奖次数限制

 {
    //抽检业务逻辑
    let draw = function (count){
    //可在此处实现具体的业务逻辑（如何实现随机抽取）
    console.info('剩余'${count}'次');
 }
 let residue=function*(count){
 while(count >0){
 count--;
 yield draw(count);//执行具体的抽奖逻辑
}

}
let star=residue(5);//实例化
let btn =document.createElement('button');
btn.id='start';
btn.textContext='抽奖'；
document.getElementById('start').addEventListener('click',function(){
    start.nest();//执行点击事件。执行抽奖逻辑
},false)
 }

使用这种方法比较安全，并且将业务逻辑与次数的判断分开

• 轮播，动态获取状态

{
    let ajax = function* (){
    yield new promise(function (resolve,reject){
    setTimeout(function(){
    resolve({code:0})
 },200)
 })
 }
 let pull = function(){
 let generator = ajax();
 let step=generator.next();
 step.value.then(function(d){
 if(d.code!=0){
 setTimeout(function(){
 console.log('wait');
 pull();
},1000);

}else{
    console.log(d);
}
})
}
pull();
 }
 //最红输出结果为code=0