喜欢 JS Decorators 那点事

曾经一直在嵌入式数通领域混迹着,之后移民到新西兰发现这些都没有了用武之地。两个月前决定开始学习前端,看了很多新的知识点。当然JS 是不得不学的一个语言,今天就讲讲Decorators的运用。在这篇文字里,我将一点点的抽丝剥茧来阐述Decorators,以至于一点点的把它的美展现出来。

如果你有过Python 的深厚背景的话,这个语法和思想应该是一见如故的感觉。学起来相对会简单很多。但是对于我这种只有过C背景的菜鸟来说 相对有点难度。不过要感谢 w3Schools。很多的语言的网站开发的语言概述 我基本上都是从上面看的。查了一下 Decorators 应该是 Typescript 里面的概念。

我一开始直接学习的 是 RN,所以对 typescript 和 Angular2 并没有太大的感觉 。但是当我读了不少代码的时候 我慢慢的发现很多的库文件都开始用typescript来编写了。还是那么的优美  我感觉是时候要来学习他们了。上周五 我非常好奇的学习了这个在ES7里面的新功能 Decorators. 我发现我有点迷恋上了它。它性感迷人的以至于我们不得不想方设法的把它运用到个个地方.  因为没有发现好的文章去写它,所以我决定把我学习的历程写出来,希望对想学习的朋友们有所帮助。

首先:Decorators 到底是一个什么东西?

下图是我从网上查到的 Decorators pattern 的一些信息:


是不是有点抽象? 那我们来个具体的模型 :



WeaponAccessory 在这里就是一个 decorator.   他们给BaseWeapon 增加了额外的功. 如果还没有看明白 不用紧张 我第一遍也没看明白。 多看几遍就好了。这里我们先给Decorators下一个定义:  Decorators are functions that give additional super-powers to different function。从这个定义中我们获知: 1. Decorators 是功能  2. 这个功能是增强了额外的超能量 给被修饰的功能。想想也是  Decorators的中文意思 就是 修饰,装修的意思。装修一个东西 就是让这个东西更好看 更美丽 更实用。是吧?

一句话: 就把它认为是一个object的一次外包装。

1.  实际的 object 是被 wrapper 封装住的

2. 如果你想访问一个object ,那你一定要先访问 它的 封装wrapper

Decorators 让我们可以注释和更改类以及类的属性 再设计阶段 

请注意: Decorators 仅仅只是函数

其次:我们到底怎么运用它呢?

Decorators 是在ES7里面提出的一个功能点  在这里我们将使用Babel 和 Typescript 来实现的编译器来实现他们 (在本文中 我将用 Typescript )

1. 怎么设置?

在你的 tsconfig.json 这个文件里面, 你应该把  experimentalDecorators 和 emitDecoratorMetadata 设置为 true.

{"compilerOptions":{

"module":"commonjs",

"experimentalDecorators":true,

"emitDecoratorMetadata":true,

"target":"es2015"

},

"exclude":[

    "node_modules"]

}

2.  闭嘴,观察

为了让事情简单话,我一直遵循这一个学习方法那就是:少说多做.  我会不管三七二十一先不停的写代码,关注输出,然后再去思考 

function leDecorator(target, propertyKey: string, descriptor: PropertyDescriptor): any {

    var oldValue = descriptor.value;

    descriptor.value = function() {

      console.log(`Calling "${propertyKey}" with`, arguments,target);

      let value = oldValue.apply(null, [arguments[1], arguments[0]]);

      console.log(`Function is executed`);

      return value + "; This is awesome";

    };

    return descriptor;

  }

  class JSMeetup {

    speaker = "Ruban";

    //@leDecorator

    welcome(arg1, arg2) {

      console.log(`Arguments Received are ${arg1} ${arg2}`);

      return `${arg1} ${arg2}`;

    }

  }

  const meetup = new JSMeetup();

  console.log(meetup.welcome("World", "Hello"));

一旦你运行了上面的代码 他们的输出会是:  

Arguments Received are World Hello 

World Hello

现在把代码里面的// 去掉,再运行它结果会是: 

Calling "welcome" with { '0': 'World', '1': 'Hello' } JSMeetup {}

 Arguments Received are Hello World

 Function is executed Hello World; 

This is awesome

是不是觉得很神奇?你只是用Decorator 注释了一个函数,结果就截然不同了

这到底为什么呢? 让我们一起揭开他们的面纱吧。

 Decorators的类型:

1.方法修饰( Method Decorator  )

2. 属性修饰(Property Decorators )

3.  类修饰(Class Decorator)

4. 参数修饰(Parameter Decorator  )

好了 不要急, 让我们一个个的来揭示其中的奥妙吧。(为了方便下面标题只写英文)

Method Decorators 

Method Decorators是第一个我们将 要 一起学习的修饰类型. 我们将会学习到它的一些本质。通过使用Method Decorators 我们将会学会很好的掌控输入函数和输出函数. 

修饰签名(Decorator Signature)

MethodDecorator = <T>(target: Object, key: string, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | Void;

前件:

当我们学习写第一个Decorators,让我们一起学习一下基本知识:.

理解Decorators的参数

1. target -> 被修饰的对象

2. key -> 被修饰方法的名字

3  descriptor -> 给定的属性的标识符.  你可以看到这个属性标识符通过调用 这个函数: functionObject.getOwnPropertyDescriptor() 

Property Descriptors: 

看下面的输出结果 可以更好的有一个直观的概念:


着这里我们定义 一个object ,命名为o,其包含属性:  foo , bar 和 foobar.  然后我们打印每一个属性的 属性描述标识 用 Object.getOwnPropertyDescriptor().  在这里让我们快速过一下value , enumerable , configurable 和 writable 的意思.

value – > 实际的数值 或者函数 被这个object 属性拥有的

enumerable -> 是否这么属性可以被枚举。可能在便利的时候会被用到

configurable – >这个属性是否可以被配置

writable -> 这个属性是否可以被写入

正如我们所发现,所有的属性和方法都有他们自己独有的描述。Decorators会更改在这个描述去添加额外的功能。当我们知道了怎么更改和定义这些属性的时候,我们就可以用Decorators 去做一些改变了

实例( Method Decorator)

在下面的例子里,我们将去更改输入和输出的方法:

function leDecorator(target, propertyKey: string, descriptor: PropertyDescriptor): any {

    var oldValue = descriptor.value;

    descriptor.value = function() {

      console.log(`Calling "${propertyKey}" with`, arguments,target);

      // Executing the original function interchanging the arguments

      let value = oldValue.apply(null, [arguments[1], arguments[0]]);

      //returning a modified value

      return value + "; This is awesome";

    };

    return descriptor;

  }

  class JSMeetup {

    speaker = "Ruban";

    //@leDecorator

    welcome(arg1, arg2) {

      console.log(`Arguments Received are ${arg1}, ${arg2}`);

      return `${arg1} ${arg2}`;

    }

  }

  const meetup = new JSMeetup();

  console.log(meetup.welcome("World", "Hello"));

如果我们run 上面的代码(Decorators被注释掉的情况下), 输出如下:

Arguments Received are World, Hello

World Hello

但是当我们使用Decorators的时候(去掉//): 

Arguments Received are Hello, World

Hello World; This is awesome

到底发生了什么?

在这个修饰函数中,这个描述标识 包含了与它相关的特定的属性(前面我们讲过). 首先,我们把原始函数保存到一个变量中  (var oldValue = descriptor.value; ) . 然后,我们更改这个描述标识中的值,然后把它返回. 正如我们所见的更改函数,我们执行了原始函数但是更改了参数,同时返回了更改结果. 

是不是很神奇?

Decorators 包装了我们的方法. 通过使用Decorators, 我们基本上有能力掌控输入哈数和输出函数. 我们是不是很有魔法? 哈哈

需要深思的几点:

1. Decorators 被调用是Class 被声明的时候,而不是被实例化的时候。要是后者的话 那就是虚函数了  哈哈   C++的 

2. 函数Decorators 会返回一个值

3. 正如上面的例子,最好是先保存存在的标识值,然后返回一个新的。原因是当多Decorators的时候 其他的Decorators 有可能无法访问原始的东西

4. 不要使用箭头语法当设置标识里面的变量的时候

我们能用Decorators 做点什么呢?

1. 做Log

2. 格式化

3.  权限检测

4.  屏蔽复写的函数 

5. 打时间戳

6. 流量限制

哈哈 当然 可能还有很多其他的用法。我们可以继续追加。。。。。

在我们结束之前 我们再过一遍主题思想: 

Decorator Factory

我们可以通过使用 decorator factories 去定制化的实现我们想要的功能 :

function leDecoratorFactory(randomData: string) {

    return (target, propertyKey: string, descriptor: PropertyDescriptor): any => {

      var oldValue = descriptor.value;

      descriptor.value = function () {

        console.log(`Calling "${propertyKey}" with`, arguments, target);

        let value = oldValue.apply(null, [arguments[1], arguments[0]]);

        console.log(`Function is executed`);

        return value + "; This is awesome; " + randomData;

      }

      return descriptor;

    }

  }

  class JSMeetup {

    speaker = "Ruban";

    @leDecoratorFactory("Extra Data")

    welcome(arg1, arg2) {

      console.log(`Arguments Received are ${arg1} ${arg2}`);

      return `${arg1} ${arg2}`;

    }

  }

  const meetup = new JSMeetup();

  console.log(meetup.welcome("World", "Hello"));

上面的代码的输出如下:(仔细看看 和前一个例子有什么微小的差别,找到了吗? cheer!!!!!!!!!!!!)

Arguments Received are Hello World

Hello World; This is awesome; Extra Data

总结?

Decorator Factory 可以接受用户的参数并且返回一个修饰函数.

我们可以不用再去创建相同的修饰函数了

我们可以通过一个点去访问多个不同的Decorators

重点:

Decorators 是从上到下的评估

Decorators 是从下到上的执行

Property Decorators

Property decorators 和上面讲的方法修饰很相似. 我们可以通过她去从新定义 getters,setters, 还有其他的属性类似枚举,配置等

修饰签名:

PropertyDecorator = (target: Object, key: string) => void;

前提条件:

为了更好的礼节和写属性修饰,我们需要深入了解 Object.defineProperty



思考点:

1. 没有返回值

 2. defineProperty的使用

用途:

1. 更改数据

2. 验证合法性

3. 格式化

Class Decorators

Class Decorators 基本上是更改类的构造函数. 通过使用类修饰,我们可以更改或者添加新的属性,方法 到类里面去

修饰签名: 

ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction;

例子: 

function AwesomeMeetup<T extends { new (...args: any[]): {} }>(constructor: T) {

    return class extends constructor implements extra {

      speaker: string = "Ragularuban";

      extra = "Tadah!";

    }

  }

  //@AwesomeMeetup

  class JSMeetup {

    public speaker = "Ruban";

    constructor() {

    }

    greet() {

      return "Hi, I'm " + this.speaker;

    }

  }

  interface extra {

    extra: string;

  }

  const meetup = new JSMeetup() as JSMeetup & extra;

  console.log(meetup.greet());

  console.log(meetup.extra);

如果不开启修饰类的话 结果如下:

Hi, I’m Ruban

undefined

开启修饰类的结果如下:

Hi, I’m Ragularuban

Tadah!

由此可见类修饰接受一个参数,就是它自己. 我们可以通过它更改这个类 .

思考点:

当原始函数的构造函数被调用的时候 这个扩展类就会被调用

场景:

记录

任何你想更改的东西

Parameter Decorator:

到目前为止,我们可以认为参数修饰是被用作改变函数的参数。但是 还是有点小不同的  

它可以用来标记需要受注意的参数. 我们标记这些参数,然后用函数修饰去做动作.

修饰签名: 

ParameterDecorator = (target: Object, propertyKey: string, parameterIndex: number) => void;

例子:


function logParameter(target: any, key: string, index: number) {

    var metadataKey = `myMetaData`;

    if (Array.isArray(target[metadataKey])) {

      target[metadataKey].push(index);

    }

    else {

      target[metadataKey] = [index];

    }

  }

  function logMethod(target, key: string, descriptor: any): any {

    var originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {

      var metadataKey = `myMetaData`;

      var indices = target[metadataKey];

      console.log('indices', indices);

      for (var i = 0; i < args.length; i++) {

        if (indices.indexOf(i) !== -1) {

          console.log("Found a marked parameter at index" + i);

          args[i] = "Abrakadabra";

        }

      }

      var result = originalMethod.apply(this, args);

      return result;

    }

    return descriptor;

  }

  class JSMeetup {

    //@logMethod

    public saySomething(something: string, @logParameter somethingElse: string): string {

      return something + " : " + somethingElse;

    }

  }

  let meetup = new JSMeetup();

  console.log(meetup.saySomething("something", "Something Else"));

没有修饰的结果:

something : Something Else

修饰后的结果:

something : Abrakadabra

发生了什么?

Parameter Decorator 有三个参数(target, key,index).  在参数修饰中 , 我们基本上标记出参数再一个数组中 (myMetaData ). 

然后,我们使用函数修饰来读取这些标识的参数(in myMetaData),最后更改这些参数  

思考点:

没有返回值

通常不不能单独使用

使用:

依赖注入

标记参数然后进行判断合法性

好了 今天就到此结束了。

最后给几个不错的开源项目 拜读一下大师怎么具体使用的 :

Core Decorators

Lo-Dash Decorators

Routing Controllers

TypeDI – Dependency Injection based on Typescript and Decorators

TypeORM – ORM based on Typescript and Decorators

Class Validator

Class Transformer

由于是第一次写东西. 写的不好的地方 请多多指教。 希望对大家有帮助  

Fred  

奥克兰

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • 什么是ES6? ECMAScript 6.0 是继ECMAScript 5.1 之后 JavaScript 语...
    多多酱_DuoDuo_阅读 1,080评论 0 4
  • *node下用express框架,实现一个简单的mvc *构建工具:gulp / babel / webpack ...
    韩娜爱吃辣_前端程序媛阅读 1,081评论 0 1
  • 写在前面,因为function存在变量提升,所以修饰器是只能修饰类,而不能修饰函数 修饰器是一个函数,用来修改类的...
    ITtian阅读 1,900评论 0 3
  • 天使不会在同一个地方逗留太长时间,因为她有对翅膀.. 摘下翅膀的天使还是天使吗? 没有了翅膀,她不能飞翔. 人是只...
    江吴童阅读 680评论 0 4
  • 笔记 强中自有强中手,一山还比一山高。当我们放眼世界后,才看清自己的真正能力和位...
    笨笨姐妹阅读 132评论 0 0