本篇内容主要讲解“JavaScript中的元数据怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript中的元数据怎么使用”吧!

在

ES6

ES6

Proxy

Reflect

API

元数据

什么是元数据

元数据是指附加在对象、类、方法、属性、参数上的数据,它可以用来帮助实现某种业务功能需要用到的数据。

元数据的使用

Reflect-metadata-

ES7

Typescript

1.5+

npm i reflect-metadata --save

紧接着你要在

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

defineMetadata() 和 getMetadata()

该方法是一个函数重载,它既可以接收三个参数,也可以是四个参数,具体定义如下所示:

function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;

function defineMetadata(metadataKey: any, metadataValue: any, target: Object, propertyKey: string | symbol): void;

它们的参数分别是:

• metadataKey

  : 用于存储和检索元数据的键;

• metadataValue

  : 元数据的值;

• target

  : 要在其上定义元数据的目标对象;

• propertyKey

  : 目标对象上的属性;

有存值的就有取值的,这个方法也是一个函数重载,它的具体定义如下所示:

function getMetadata(metadataKey: any, target: Object, propertyKey: string | symbol): any;

function getOwnMetadata(metadataKey: any, target: Object): any;

它的具体使用如下所示:

import "reflect-metadata";

const moment = { address: "广州" };

Reflect.defineMetadata("method", "hi,叼毛,你上班是不是在摸鱼", moment);
console.log(Reflect.getMetadata("method", moment)); // hi,叼毛,你上班是不是在摸鱼

Reflect.defineMetadata("method", "hi,靓仔,买菜吗", moment, moment.address);
console.log(Reflect.getMetadata("method", moment, moment.address)); // hi,靓仔,买菜吗

metadata()

Reflect.metadata(...)

function metadata(
  metadataKey: any,
  metadataValue: any
): {
  (target: Function): void;
  (target: Object, propertyKey: string | symbol): void;
};

Reflect.metadata

Decorator

import "reflect-metadata";

@Reflect.metadata("inClass", "哇哈哈哈哈")
class Test {
  @Reflect.metadata("inMethod", "我要喝喜之郎,我要当太空人")
  public hello(): string {
    return "hello world";
  }
}

console.log(Reflect.getMetadata("inClass", Test)); // 哇哈哈哈哈
console.log(Reflect.getMetadata("inMethod", new Test(), "hello")); // 我要喝喜之郎,我要当太空人

在这里可能会有人就好奇了,这里面的方法怎么和上面的不一样啊,上面的是

defineMetadata(...)

metadata(...)

答案是

defineMetadata(...)

获取类型信息并赋值

我们可以通过

Reflect.getMetadata

import "reflect-metadata";

function Prop(): PropertyDecorator {
  return (target, key: string) => {
    const type = Reflect.getMetadata("design:type", target, key);
    console.log(`${key} type: ${type.name}`);
    target[key] = "moment";
  };
}

class SomeClass {
  @Prop()
  public nickname!: string;
}

console.log(new SomeClass().nickname); // moment

例如在

vue-property-decorator

Reflect.getMetadata

Prop

Vue

import { Vue, Component, PropSync } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string
}

这样的写法就等同于以下代码所示:

export default {
  props: {
    name: {
      type: String,
    },
  },
  computed: {
    syncedName: {
      get() {
        return this.name
      },
      set(value) {
        this.$emit('update:name', value)
      },
    },
  },
}

除了能获取属性类型以外,通过

Reflect.getMetadata("design:paramtypes", target, key)

Reflect.getMetadata("design:returntype", target, key)

import "reflect-metadata";

function Func(): PropertyDecorator {
  return (target, key: string) => {
    console.log(Reflect.getMetadata("design:paramtypes", target, key)); // 函数参数类型
    console.log(Reflect.getMetadata("design:returntype", target, key)); // 返回值类型
  };
}

class SomeClass {
  @Func()
  moment(value: boolean): string {
    return " ";
  }
}

自定义 metadataKey

除了能获取类型信息外,常用与自定义

metadataKey

import "reflect-metadata";

function classDecorator(): ClassDecorator {
  return (target) => {
    Reflect.defineMetadata("class", "类装饰器", target);
  };
}

function methodDecorator(): MethodDecorator {
  return (target, key, descriptor) => {
    Reflect.defineMetadata("method", "方法装饰器", target, key);
  };
}

@classDecorator()
class SomeClass {
  @methodDecorator()
  someMethod() {}
}

console.log(Reflect.getMetadata("class", SomeClass)); // 类装饰器
console.log(Reflect.getMetadata("method", new SomeClass(), "someMethod")); // 方法装饰器