«

JavaScript中的元数据怎么使用

时间:2024-6-25 14:54     作者:韩俊     分类: Javascript


本篇内容主要讲解“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
     API,
    Prop
     Decorator 能获取属性类型传至
    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")); // 方法装饰器

    标签: javascript

    热门推荐