精华内容
下载资源
问答
  • ES7装饰器

    2020-04-28 17:34:04
    别的写的太好了,直接拿过来吧! ES7 Decorator 装饰器 | 淘宝前端团队 Decorators in ES7 代办: 搭建装饰器执行环境 装饰器代码调试 继续补充对装饰器的理解和使用场景 ...

    别的写的太好了,直接拿过来吧!
    ES7 Decorator 装饰器 | 淘宝前端团队
    Decorators in ES7

    代办:

    • 搭建装饰器执行环境
    • 装饰器代码调试
    • 继续补充对装饰器的理解和使用场景
    展开全文
  • ES7装饰器decorators解析

    2020-12-23 18:39:57
    ES7装饰器decorators解析 1,首先思考一个问题,在哪种情况下需要用到装饰器,装饰器的作用是什么? 我自己的答案:装饰器可以修改类里面的属性,或是新增类的属性。在需要就类原本的功能扩展新功能时会用到装饰器。...

    ES7装饰器decorators解析

    1,首先思考一个问题,在哪种情况下需要用到装饰器,装饰器的作用是什么?
    我自己的答案:装饰器可以修改类里面的属性,或是新增类的属性。在需要就类原本的功能扩展新功能时会用到装饰器。我当时理解到这里时不禁产生了一个疑问,如果只是这样,要加新功能直接在类上面加就是了,为什么还要弄个装饰器出来呢?解释是,自己定义的类,想怎么改属性当然就能怎么改了,但是继承的类呢,比如说有一个你自己写的react组件,它继承于component,你现在想修改它的componentUpdate生命周期方法,给它加上一些功能,并且不会影响到其他继承了这个类的实例,那么答案就很明显了,这就是装饰器的用处。

    2,装饰器用法

    2.1 装饰类

    第一步:全局定义一个方法

    function test(target) {
    	target.xx = '艾欧尼亚'
    }
    

    这里的target就是接收要修饰的对象的一个形参,也就是下面的类Lei
    第二步: 装饰一个类

    @test
    class Lei { 
    	xx = '芜湖'
    }
    console.log(Lei.xx) // '艾欧尼亚'
    

    这样,就修改了类的属性xx了。这种修饰写法等同于 test(Lei),函数调用完后会返回一个根据test(target)函数加工过的类Lei,这种有点类似于高阶组件的写法,高阶组件就是一个构造函数定义的组件,这个函数接收一个组件B作为参数,对这个组件做过某些处理后再返回一个包含组件B的类方式定义的组件出来。
    修饰的时候也可以传参,写法如下,后面提到的装饰类的属性要是要传参也可以这样写

    function test(xx) {
    	return function(target) {
    	  target.name = xx;
    	}
    }
    @test('幸运儿')
    class Lei { 
    	name = '倒霉蛋'
    }
    console.log(Lei.name ) // '幸运儿'
    
    2.2 装饰类的属性

    这里也分为两步,就一起写了

    function test(target, say, descriptor) {
    	// target参数代表类的原型对象,也就是Lei.prototype
    	// say参数代表要装饰的属性名
    	// descriptor参数是一个对象,如下
    	// {
    	// value: say函数的函数地址,也就是要装饰的属性的值
    	// enumerable: false 该属性是否允许枚举(就是被遍历到)
    	// configurable: true 该属性是控制descriptor能否被修改
    	// writable: true 该属性控制此属性的值是否可修改
    	//}
    	//在这里可以通过descriptor参数对say方法进行一些功能上的扩展,比如先将
    	//descriptor.value的值赋值给变量a,a此时就相当于函数say(),然后再将一个实现扩展功能的函数赋值
    	//给变量b,且在这个方法中调用a(), ps: 如果这个方法中需要修改this指向,可以用call或apply
    	// 这样做就可以保留原方法,且扩展新功能了
    	//最后再返回这个方法结合enumerable等属性的一个对象
    	return descriptor
    }
    
    class Lei { 
    	state = { xx: 'Hi' }
    	@test
    	say(this.state.xx) { }
    }
    

    3,装饰器原理
    基于es5的object.defineProperty方法,这个方法本来就是修改某个对象的某个属性的值,所以结合装饰器的功能,很好理解,但具体是基于这个方法做了怎样的处理实现了装饰器这种写法,就有待深究了。。。。
    ps: 注意es版本,低版本使用babel转义

    展开全文
  • ES7 装饰器使用示例

    2019-10-01 19:14:30
    ES7 装饰器使用示例 示例代码: // ts 装饰器 // 类装饰器 function aClass(target: any): void { // target 为当前装饰的类 target.prototype.name = '动态扩展的属性' target.prototype.run = () => { ...

    ES7 装饰器使用示例

    示例代码:

    // ts 装饰器
    
    // 类装饰器
    function aClass(target: any): void {
        // target 为当前装饰的类
        target.prototype.name = '动态扩展的属性'
        target.prototype.run = () => {
            console.log('2.动态扩展的方法')
        }
    }
    
    // 类装饰器(带参数)
    function bClass(name: string): Function {
        return function(target: any) {
            console.log('1.' + name)
            target.prototype.name = name
        }
    }
    
    // 类装饰器
    function cClass(target: any): any {
        return class extends target {
            url: string = '//proxy.xxx'
        }
    }
    
    // 属性装饰器
    function aProperty(params: any) {
        return function(target: any, attr: any) {
            // 执行在被装饰的类的构造方法之前
            target[attr] = params
        }
    }
    
    // 方法装饰器
    function get(params: any) {
        return function(target: any, methodName: any, desc: any) {
            var oMethod = desc.value
            desc.value = function(...args: any[]) {
                // ...something other
                return oMethod.apply(this, args)
            }
        }
    }
    
    // 方法参数装饰器(不常用)
    function logParams(params: any) {
        return function(target: any, methodName: any, paramsIndex: any) {
            target.fullUrl = params + ':' + target.url
        }
    }
    
    @aClass
    @bClass('工厂装饰器')
    @cClass
    class HttpClinet {
        @aProperty('//adapter.xxx')
        public url: string
        constructor() {
            this.url = '//api.xxx'
        }
        @get('//get')
        getUrl(@logParams('https') ...args: any) {
            console.log('3.' + JSON.stringify(args))
            return this.url
        }
    }
    
    const h: any = new HttpClinet()
    h.run()
    console.log('4.' + h.getUrl('http'))
    console.log('5.' + h.fullUrl)
    

    node 执行ts 转换后的代码,结果:

    1.工厂装饰器
    2.动态扩展的方法
    3.["http"]
    4.//proxy.xxx
    5.https://adapter.xxx
    

    至此,结束。

    展开全文
  • CoffeeScript 的 ES7 装饰器 为什么 和等库开始根据中提出的 API 使用装饰器,Babel 5+ 和 TypeScript 1.5 支持该 API 另一方面,CoffeeScript 似乎不会很快添加装饰器: es-decorate填补了语法空白,提供了一个...
  • node-router-decorator Node.js的简单路由器ES7装饰器。 该库是在ES7装饰器提案的基础上实现的。 只能与Babel等转译器一起使用。 安装npm install --save node-router-decorator用于Node.js的简单路由器ES7装饰器。 ...
  • Node.js的简单路由器ES7装饰器
  • es7装饰器小入门

    千次阅读 2018-01-14 23:09:54
    es7 装饰器 简单梳理安装npm i babel-plugin-transform-decorators-legacy babel-register --save-dev 安装: babel-plugin-transform-decorators-legacy babel-registertransform-decorators-legacy: 是第三方...

    es7 装饰器 简单梳理

    安装

    npm i babel-plugin-transform-decorators-legacy babel-register --save-dev
    安装:
    babel-plugin-transform-decorators-legacy 
    babel-register
    
    transform-decorators-legacy:
    是第三方插件,用于支持decorators
    
    babel-register:
    用于接入node api
    运行方法一:命令行操作
    
    babel --plugins transform-decorators-legacy input.js>input.es5.js
    然后直接运行es5的代码
    运行方法二:require hook
    
    require('babel-register')({
        plugins: ['transform-decorators-legacy']
    });
    require("./input.js")
    

    1.声明一个装饰器函数

     function decorate(target, key, descriptor) {
    	 const method = descriptor.value;
    	 let newCounr= 10;
    	 let ret;
    	 descriptor.value = (...args)=>{
    	 args[0] += newCounr;
    	 ret = method.apply(target, args);
    	 return ret;
    	 }
    	 return descriptor;
    }
    
    
    
    
    class Count{
    	 constructor(a= 1 ,b = 2,c = 3){
    	 this.init(a,b,c);
    	 }
    	@decorate
    	 init(a,b,c){
    	 this.a= a; 
    	 this.b= b; 
    	 this.c= c; 
    	 }
    	 toString(){
    	 return `a:${this.a},b:${this.b},c:${this.c}`;
    	 }
    }
    
    var count= new Count();
    
    // 假如不加 @decorate
    // 输出:console.log(`当前 ===> ${count}`);
    // 输出:当前===> a:1,b:2,c:3
    // 添加 @decorate
    // 输出:console.log(`当前 ===> ${count}`);
    // 输出:当前===> a:11,b:2,c:3
    装饰器函数参数固定为这个三个 参照object原型函数
    Object.defineProperty
    

    2.自身调用

    function newD(value){
    return function (target) {
            target.text = value;
        }
    }
    @newD("文本1")
    class Text1 { }
    
    @newD("文本2")
    class Text2 { }
    
    console.log(Text1.call);
    console.log(Text2.call);
    
    展开全文
  • 礼仪 基于Decorum ES7装饰器的验证框架的AngularJS指令。
  • 用于koa-router模型的ES7装饰器。 安装 $ npm i koa-router-decorators --save 用法 该库支持babel和typescript支持的。 与巴贝尔使用它,你应该启用实验es7.decorators通天功能描述。 与打字稿使用它,你应该启用...
  • 它使用 ES7 装饰器来注释类方法,因此需要一个支持类和装饰器的环境。 启用了的项目可以提供这一点。 安装 npm install [--save] es7-autobinder 应用程序接口 require("es7-autobinder").autobound 用于将方法...
  • 使用ES7装饰器进行Java语言方面的编程。 安装 npm install decorator-aop 用法 将类分配给方面。 @Aspect.target(Example) class ExampleAspect extends Aspect { } 连接点 使用以下装饰器在方面上注册连接点。 ...
  • ES7 装饰器导致React Context “失效”探究 前言 前段时间在工作中遇到使用ES7 装饰器对React Component进行封装后,导致封装后的高阶组件无法获取根组件的Context的问题。因此,对ES7 装饰器做了一些探究。 过程 1....
  • ES7装饰器语法

    2020-10-30 13:10:15
    ES7装饰器完全是在装饰器模式的基础上产生的,关于装饰器模式,可以点击这里先理解一波。 初识 下面直接看Demo 装饰Demo @testDec // testDec是一个函数 class Demo{ } function testDec(target){ //这里的...
  • ES7 装饰器导致React Context “失效”探究 前言 前段时间在工作中遇到使用ES7 装饰器对React Component进行封装后,导致封装后的高阶组件无法获取根组件的Context的问题。因此,对ES7 装饰器做了一些探究。 1....
  • 包装一个函数包装函数并返回一个能够装饰 ES6 类方法的 ES7 装饰器。 安装 npm install --save makedecorator 为什么? ES7 装饰器使用与Object.defineProperty 、 function(obj, prop, descriptor)相同的函数...
  • 在express中使用ES7装饰器构建路由 在Java的Spring框架中,我们经常会看到类似于@Controller这样的注解,这类代码能够极大的提高我们代码的可读性和复用性。而在Javascript的ES7提案中,有一种新的语法叫做decorator...
  • React 解决 使用ES7装饰器问题方法总结 方法一: 1.yarn eject or npm run eject 2.在package.json中添加 "babel": { "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }] ], "presets": ...
  • ES7装饰器小记

    2019-03-04 02:18:37
    Es7装饰器借鉴的Python decorator语法糖的写法。这篇写了很久了,也忘了当初是看的哪一位大佬写的demo例子,今天翻出来了老笔记,就决定搬上来先吧,顺便复习下。 引申 如何对装饰器进行封装?(实现的方式) ...
  • Angular 1.x的ES7装饰器。 帮你: 使用ES6模块时,避免Angular的依赖项注入。 使自定义指令声明非常简短且具有语义。 直接在类属性上声明可绑定对象。 非常适合ES7 / TypeScript应用程序。 本自述您已经使用...
  • es7-next-test es7和其他物品的测试 探索 特性装饰器 传播/静止参数(用于合并对象的ES7) 模板字符串 绑定运算符 解构 班级 ... 跑步 npm install babel-node index.js Babel配置在.babelrc定义
  • Koa / Express的路线装饰器 简化Koa和Express路线创建的。 使用这些装饰器,您可以像下面那样编写控制器,并填充所有路由。 考阿 import { controller , get , post } from 'route-decorators' @ controller ( '/...
  • 带有ES6,TypeScript,ES7装饰器和组件路由器的Angular 1(预览版) 设置 每个目录代表自己的项目,通过NPM和JSPM加载每个项目所需的库: npm install jspm install 更多的信息 可以在找到有关使用TypeScript或ES6...
  • 在学习ES7装饰器语法之前,需要先温习一下ES5的一些基础知识。 假设有对象如下:(便于理解) var person = { name: 'TOM' } 在ES5中,对象中的每个属性都有一个特性值来描述这个属性的特点,他们分别是: ...
  • 一个有用的ES7装饰器库。 安装 npm install adornment --save 菜单 描述符装饰器装饰器 方法装饰器 咖喱 咖喱权利 推迟 延迟(等待:数字) 油门(等待:数字) 去抖(等待:数字) 一次 之前(次:个数...
  • ES7 装饰器模式的配置

    2021-03-29 11:23:24
    装饰器模式简介 在使用 React 框架编程中,我们用高阶组件的时候,使用时往往需要用高阶组件函数包裹当前组件来导出的形式,过于麻烦。装饰器模式则优化了这一点,让我们在编程的过程中节省一点精力。 当我们使用了...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 265
精华内容 106
关键字:

es7装饰器