es6之decorator

来源：互联网发布：淘宝的追加评论在哪里编辑：程序博客网时间：2024/06/08 06:29

定义：decorator是一个函数，修改行为，修改类的行为，只在类的范畴内有用

扩展：

第三方库修饰器的js库：core-decorators; npm install core-decorators

就不用自己手动的写readonly,typename等，只需要import引入就可以使用

//以下为代码实例

{
    console.log("decorator行为");
    //只读属性，将time变为只读属性
    let readonly=function(target,name,descriptor){
        descriptor.writable=false;
        return descriptor
    }
    class Test{
        @readonly  //第一种用法：在类的里面使用，引入修饰器，修改time（）的行为
        time(){
            return "2017-03-11"
        }
    }
    let test=new Test();
  //  test.time="reset time";      //修饰器设置的只读属性，不能进行修改会报错
    console.log(test.time());
}
 
{
    let typename=function(target,name,descriptor){
        target.myname="hello"
    }
    @typename//第二种用法：在类的外面使用
    class Test{
 
    }
    console.log("类修饰符",Test.myname);
}


//埋点，做日志统计
letlog=(type)=>{
return function(target,name,descriptor){
letsrc_method=descriptor.value;
descriptor.value=(...arg)=>{
src_method.apply(target,arg);
console.info(`log${type}`);//实现埋点，真实的业务中直接换成一个接口就可以了
}
}
};
classAD{
@log('show')
show(){
console.log('adisshow');
};
@log('click')
click(){
console.log('adisclick');
}
}
letad=newAD();
ad.show();
ad.click();

%%%埋点分析，是网站分析的一种常用的数据采集方法。数据埋点分为初级、中级、高级三种方式。数据埋点是一种良好的私有化部署数据采集方式。
数据埋点分为初级、中级、高级三种方式，分别为：
初级：在产品、服务转化关键点植入统计代码，据其独立ID确保数据采集不重复（如购买按钮点击率）；
中级：植入多段代码，追踪用户在平台每个界面上的系列行为，事件之间相互独立（如打开商品详情页——选择商品型号——加入购物车——下订单——购买完成）；
高级：联合公司工程、ETL采集分析用户全量行为，建立用户画像，还原用户行为模型，作为产品分析、优化的基础。

阅读全文

0 0