设计模式之装饰者模式-TS中装饰器介绍

news2024/10/7 17:30:10

装饰器的基本介绍

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。
装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入

装饰器分类

装饰器大体上分为：

  1. 方法装饰器
  2. 类装饰器
  3. 属性装饰器
  4. 参数装饰器
  5. 访问器装饰器（get & set）

在很多后端框架中都使用了一种anotation风格的编程方式，比如NestJS。让人编写代码时感觉非常的优雅简洁。
另外我们也可以使用装饰器来实现AOP(Aspect Oriented Program)编程

AOP:
在运行时，动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程。
一般而言，我们管切入到指定类指定方法的代码片段称为切面，而切入到哪些类、哪些方法则叫切入点

求值顺序

而这些装饰器一般求值也会有特定的顺序：

  1. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
  2. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。
  3. 参数装饰器应用到构造函数。
  4. 类装饰器应用到类

多个装饰器执行顺序

在TypeScript里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：

  1. 由上至下依次对装饰器表达式求值。
  2. 求值的结果会被当作函数，由下至上依次调用。

比如我们使用装饰器工厂：

const log = (level) => {
  console.log('log函数被调用');
  return (target, name, descriptor) => {
    console.log('log函数返回装饰器函数被调用：', level);
    // 缓存之前的值
    const oldValue = descriptor.value;
    // 复写原来的老值
    descriptor.value = (...args) => {
      // 使用原来的函数调用
      return oldValue.apply(null, args)
    }
  }
}
const log2 = (level) => {
  console.log('log2函数被调用');
  return (target, name, descriptor) => {
    console.log('log2函数返回装饰器函数被调用：', level);
    // 缓存之前的值
    const oldValue = descriptor.value;
    // 复写原来的老值
    descriptor.value = (...args) => {
      // 使用原来的函数调用
      return oldValue.apply(null, args)
    }
  }
}
class Maths {
  @log(111)
  @log2(222)
  add (num1: number, num2: number) {
    return num1 + num2
  }
}
const math = new Maths()
console.log(math.add(2, 3));

执行结果如下所示：
在这里插入图片描述

准备环境

我们先准备一个TS的基本环境。创建一个新的文件夹。

  1. npm i typescript --save-dev 安装ts依赖
  2. npm i ts-node --save-dev一个在node中写ts的工具包
  3. npx tsc --init 初始化一个ts项目
  4. 打开"experimentalDecorators": true, 属性，因为装饰器属于一个实验性的属性
  5. npx ts-node index.ts来编译执行写的ts文件

为了避免ts的类型检查也可以把"strict": false,设为false或者关闭该属性

在这里插入图片描述
在这里插入图片描述

方法装饰器

定义

方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 它会被应用到方法的
属性描述符上，可以用来监视，修改或者替换方法定义

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 成员的属性描述符。

日志修饰器和切面AOP

比如我们看下面代码，有一个Maths类，里面有各种算术函数，比如说add函数用来计算入参的值，但现在希望在计算和的时候，也打印出相关的日志，此时我们就可以给这个add函数加上一个装饰器，用来修改原本方法的功能，整体代码如下所示：

/**
 * 装饰器
 * @param target 这里就是Maths的示例
 * @param name 成员的名称
 * @param descriptor 成员属性描述符
 */
const log = (target, name, descriptor) => {
  console.log('target：', target);
  console.log('name：', name);
  console.log('descriptor：', descriptor);
}

class Maths {
  // @log是一个装饰器函数，用来修饰add函数
  @log
  add (num1: number, num2: number) {
    return num1 + num2
  }
}

const math = new Maths()

console.log(math.add(2, 3));

执行效果如下：
在这里插入图片描述

属性描述符

通过上面我们可以看到，前两个参数比较容易理解，分别表示对应的构造函数/实例，或者是成员名称，第三个descriptor成员描述符有下面几个属性

  1. value：该成员名称对应的值，这里就是add函数定义
  2. writable：是否可写
  3. enumerable：是否可枚举
  4. configurable：是否可配置

我们可以通过value来复写原本的函数功能，代码如下：

/**
 * 装饰器
 * @param target 这里就是Maths的示例
 * @param name 成员的名称
 * @param descriptor 成员属性描述符
 */
const log = (target, name, descriptor) => {
  // 缓存之前的值
  const oldValue = descriptor.value;
  // 复写原来的老值
  descriptor.value = (...args) => {
    console.log(`${name}被调用，入参为: ${args}`);
    // 使用原来的函数调用
    return oldValue.apply(null, args)
  }
}

class Maths {
  // @log是一个装饰器函数，用来修饰add函数
  @log
  add (num1: number, num2: number) {
    return num1 + num2
  }
}

const math = new Maths()
console.log(math.add(2, 3));

执行效果如下所示：
在这里插入图片描述

接受参数

很多时候，我们需要在修饰器方法中传入一些参数，此时我们一般可以通过升阶，即将原本的装饰器函数升成高阶函数，返回一个函数，返回的函数才是真正的装饰器函数。这样参数就可以通过高阶函数的特点进行传递了。比如上面的例子，我们需要在@log函数中传入一些参数，我们可以这么修改：

/**
 * 装饰器
 * @param target 这里就是Maths的示例
 * @param name 成员的名称
 * @param descriptor 成员属性描述符
 */
const log = (level) => (target, name, descriptor) => {
  console.log('入参：', level);
  // 缓存之前的值
  const oldValue = descriptor.value;
  // 复写原来的老值
  descriptor.value = (...args) => {
    console.log(`${name}被调用，入参为: ${args}`);
    // 使用原来的函数调用
    return oldValue.apply(null, args)
  }
}

class Maths {
  // @log是一个装饰器函数，用来修饰add函数
  @log('ERROR')
  add (num1: number, num2: number) {
    return num1 + num2
  }
}

const math = new Maths()
console.log(math.add(2, 3));

执行效果如下：
在这里插入图片描述

多个装饰器执行

比如例子中的add方法中接受两个修饰器log和log2，执行效果如下
在这里插入图片描述

类装饰器

定义

类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义
类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

基本使用

比如看一个demo，我们给上面例子中的Maths增加一个类修饰器annotationClass，在修饰器中接受到的target就是这个类本身

const annotationClass = (target) => {
  console.log(`target: ${target}`);
}

@annotationClass
class Maths {
  add (num1: number, num2: number) {
    return num1 + num2
  }
}
const math = new Maths()
console.log(math.add(2, 3));

执行效果如下：
在这里插入图片描述

接受参数

同理，如果需要传递参数的话，我们一般可以将原本的修饰器函数升阶，升为高阶函数，函数本身接受若干参数，再返回一个函数用于做修饰器函数，如下所示：

const annotationClass = (...params) => (target) => {
  console.log(`接受的参数: ${params}`);
  console.log(`target: ${target}`);
}

@annotationClass('name')
class Maths {
  add (num1: number, num2: number) {
    return num1 + num2
  }
}

const math = new Maths()
console.log(math.add(2, 3));

执行效果如下所示：
在这里插入图片描述

多个装饰器组合执行

如果一个类有多个装饰器，比如下面的代码：
在这里插入图片描述

参数装饰器

定义

参数装饰器声明在一个参数声明之前（紧靠着参数声明）。 参数装饰器应用于类构造函数或方法声明。 参数装饰器不能用在声明文件（.d.ts），重载或其它外部上下文（比如declare的类）里。
参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 参数在函数参数列表中的索引。

注意 
参数装饰器只能用来监视一个方法的参数是否被传入。
参数装饰器的返回值会被忽略。

基本使用

我们把上面的demo修改一下，Math中的add函数需要的两个参数都添加一下参数装饰器。

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  console.log(`target`, target);
  console.log(`propertyKey`, propertyKey);
  console.log(`parameterIndex`, parameterIndex);
}

class Maths {
  @validate
  add(
    @required num1: number, 
    @required num2: number
  ) {
    return num1 + num2
  }
}
const math = new Maths()
console.log(math.add(2,3));

执行效果如下：
在这里插入图片描述

实现一个接口的参数校验（参数装饰器和方法装饰器）

在我们了解了方法装饰器和参数装饰器之后，我们可以组合这两个装饰器来实现一个简单的函数的入参校验。
比如在上面的例子中add函数接受两个参数num1和num2，这两个参数都是必填的

实现

基本思路其实主要就是下面三步：

  1. 在参数装饰器执行时收集当前函数中那些参数需要验证，并记录下这些参数的位置（需要验证的参数前都会加装饰器）
  2. 在方法装饰器执行时，拿到步骤1收集的需要验证的参数位置，然后判断当前入参是否传入了参数
  3. 如果验证失败，则抛出对应的错误，如果成功，则接着执行原逻辑即可

基于上面的想法，代码实现如下：

// 用于存储需要传入的参数位置
let requiredParamsIndexList = []

// 使用required装饰器收集必传参数的所在位置
const required = (target, name, paramIndex) => {
  requiredParamsIndexList.push(paramIndex)
}

// 验证参数装饰器
const validate = (target, name, descriptor) => {
  // 保留老函数
  let method = descriptor.value;
  descriptor.value = (...args) => {
    if (requiredParamsIndexList.length) {
      // 如果有需要验证必传的参数
      for (const paramsIndex of requiredParamsIndexList) {
        if (!args[paramsIndex]) {
          throw new Error(`${name}函数，第${paramsIndex + 1}参数未传`)
        }
      }
    }
    // 验证完之后，执行原本的逻辑
    return method.apply(target, args)
  }

}

class Maths {

  @validate
  add(
    @required num1?: number,
    @required num2?: number
  ) {
    return num1 + num2
  }
}

const math = new Maths()
console.log(math.add(2, 3));

执行效果如下：
在这里插入图片描述

优化一下

上面的实现，我们是使用了一个全局的变量requiredParamsIndexList来存储需要验证的参数位置，我们可以借助reflect-metadata这个工具来优化一下
安装依赖 npm i reflect-metadata --save：这是一个工具库，主要用来添加和读取元数据，可以简单理解一个数据仓库，用来存取上面说的需要验证的参数位置

具体实现如下：

// 引入该工具
import "reflect-metadata";
// 唯一值Symbol
const requiredMetadataKey = Symbol("required");

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<Function>) {
  // 保存老方法
  let method = descriptor.value;
  // 重写原method的方法
  descriptor.value = function (...args) {
      // 读取需要验证的参数索引信息（增加的逻辑）
      let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
      if (requiredParameters) {
          for (let parameterIndex of requiredParameters) {
              // 验证当前参数位置的索引是否存在，如果undefined那就证明当前需要验证required的参数未传
              if (!args[parameterIndex]) {
                  // 验证的参数没有，抛错
                  throw new Error(`${propertyName}函数第${parameterIndex + 1}参数未传`);
              }
          }
      }
      // 验证完参数之后，再执行之前的方法逻辑
      return method.apply(this, args);
  }
}

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  // 收集需要验证的参数索引
  let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
  // 将当前需要验证required的参数索引添加至existingRequiredParameters中
  existingRequiredParameters.push(parameterIndex);
  // 将更新后需要验证required的参数索引信息添加
  Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

class Maths {
  @validate
  add(
    @required num1: number, 
    // num2加了require是验证必须传入的，加?是为了通过ts的验证
    @required num2?: number
  ) {
    return num1 + num2
  }
}
const math = new Maths()
console.log(math.add(2));

代码执行效果如下所示：
在这里插入图片描述

属性装饰器

定义

属性装饰器声明在一个属性声明之前（紧靠着属性声明）。 属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如declare的类）里。
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。

注意  属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。
因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且没办法监视或修改一个属性的初始化方法。返回值也会被忽略。
因此，属性描述符只能用来监视类中是否声明了某个名字的属性。

基本使用

我们把上面的代码修改一下，给version属性增加一个装饰器，代码如下：

const log = (target, name) => {
  console.log('log属性装饰器函数被调用');
  console.log('target:', target)
  console.log('name:', name)
}

class Maths {
  @log
  private _version: number;
  constructor(version : number) {
    this._version = version
  }
}
const math = new Maths(1)

执行效果如下所示：
在这里插入图片描述

访问器装饰器

定义

访问器装饰器声明在一个访问器的声明之前（紧靠着访问器声明）。 访问器装饰器应用于访问器的属性描述符并且可以用来监视，修改或替换一个访问器的定义。 访问器装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如declare的类）里。

注意 
TypeScript不允许同时装饰一个成员的get和set访问器。取而代之的是，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的

访问器装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 成员的属性描述符。

基本使用

上面的示例，增加一个访问器 get version用户获取这个Math的工具函数的版本。
在这里插入图片描述

参考资料

Decorators

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/726709.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LoRA原理解析

LoRA原理解析

文章目录 前言现有方案存在的问题Adapter TuningPrefix Tuning LoRA总结 前言 随着模型规模的不断扩大&#xff0c;微调模型的所有参数&#xff08;所谓full fine-tuning&#xff09;的可行性变得越来越低。以GPT-3的175B参数为例&#xff0c;每增加一个新领域就需要完整微调一…
阅读更多...
界面组件DevExpress ASP.NET Core v23.1新版亮点 - 增强的数据可视化

界面组件DevExpress ASP.NET Core v23.1新版亮点 - 增强的数据可视化

DevExpress ASP.NET Core Controls使用强大的混合方法&#xff0c;结合现代企业Web开发工具所期望的所有功能。该套件通过ASP.NET Razor标记和服务器端ASP.NET Core Web API的生产力和简便性&#xff0c;提供客户端JavaScript的性能和灵活性。ThemeBuilder工具和集成的Material…
阅读更多...
纯LiDAR Odometry——LinK3D论文详解

纯LiDAR Odometry——LinK3D论文详解

先说总结 总体思路是&#xff1a;针对输入来的点云&#xff0c;对每一个scan进行edge特征点的提取&#xff0c;因为提取的特征点因为噪声等原因导致特征点不鲁棒&#xff0c;所以又对特征点通过聚类的方法进行了特征增强&#xff0c;对增加后的特征投影到平面上&#xff0c;分别…
阅读更多...
无线通信模块|wifi模块、BLE蓝牙模块、wifi蓝牙二合一模块科普介绍

无线通信模块|wifi模块、BLE蓝牙模块、wifi蓝牙二合一模块科普介绍

物联网技术能够帮助智能家居环境中的门厅场景、客厅场景、厨房场景、卧室场景以及阳台场景的智能化管理。现如今智能家居和智能应用之间的配合离不开物联网模块的帮助。没有WiFi模块智能家居就不能很好的工作&#xff0c;甚至不能很好的进行数据的交换。现阶段的物联网智能家居…
阅读更多...
程序员必须知道的加密、解密和签名算法

程序员必须知道的加密、解密和签名算法

1. 对称加密 对称加密&#xff0c;加密和解密使用相同的秘钥&#xff0c;加密速度快、效率高。常见的有 DES&#xff08;淘汰&#xff09;、3DES&#xff08;淘汰&#xff09;、AES&#xff08;用于替代 DES&#xff0c;是目前常用的&#xff09;等。 加密解密 1.1. DES&#…
阅读更多...
建造者模式：详解构造函数、set方法、建造者模式三种对象创建方式

建造者模式：详解构造函数、set方法、建造者模式三种对象创建方式

思考&#xff1a; 为什么需要建造者模式 与工厂模式有何区别&#xff1f; 为什么需要建造者模式&#xff1f; 平时常常使用new关键字来创建对象&#xff0c;什么时候new对象时候不适用了呢&#xff1f;可能是创建对象时候可能是构造函数中传入太多的内容吧。 下面通过一个例子…
阅读更多...
基于Java电脑硬件库存管理系统设计实现(源码+lw+部署文档+讲解等)

基于Java电脑硬件库存管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…
阅读更多...
Linux下从CPU/内存/IO三个方面来分析系统性能

Linux下从CPU/内存/IO三个方面来分析系统性能

在实际生产环境中是否遇到如下问题&#xff1f; 系统平均负载过高。 CPU使用率过高。 硬盘利用率已经饱和&#xff0c;IO存在瓶颈。 首先明确一下进程的常见6种状态 R运行状态&#xff08;running&#xff09;&#xff1a;并不意味着进程一定在运行中&#xff0c;它表明进程要…
阅读更多...
钉钉聊天对话框和截图经常发生白屏

钉钉聊天对话框和截图经常发生白屏

环境&#xff1a; 7.0.30-rel6019102 Win10专业版 L盾加密环境 问题描述&#xff1a; 钉钉聊天对话框和截图经常发生白屏 解决方案&#xff1a; 1.【电脑端钉钉】- 左上角【头像】-【设置】-【高级】- 下拉【网络检测】- 点击【开始检测】 如果变红说明网络有问题&#x…
阅读更多...
redis安装后启动报redis-server.exe redis.windows.conf

redis安装后启动报redis-server.exe redis.windows.conf

文章目录 1. 报错的内容2. 解决方法&#xff1a;&#xff08;亲测有效&#xff09; 1. 报错的内容 redis安装后启动报redis-server.exe redis.windows.conf 完整报错如下&#xff1a; 2. 解决方法&#xff1a;&#xff08;亲测有效&#xff09; 先使用命令切换到redis安装目…
阅读更多...
Redis常用命令操作

Redis常用命令操作

#linux是redis-cli #普通环境 redis-cli.exe -h host -p port -a password #集群环境&#xff0c;否则报&#xff1a;(error) MOVED 6918 127.0.0.1:6381 redis-cli.exe -c -h host -p port -a password#参数说明 #host&#xff1a;远程redis服务器host #port&#xff1a;远程r…
阅读更多...
开发人员必备：9个令人惊叹的CSS网格生成器推荐！

开发人员必备：9个令人惊叹的CSS网格生成器推荐！

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势&#xff0c;学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验ChatGpt plus版本的&#xff0c;我们出的钱 体验地…
阅读更多...
【分布式应用】zabbix 二：自定义监控、自动发现与自动注册

【分布式应用】zabbix 二：自定义监控、自动发现与自动注册

目录 一、添加zabbix客户端主机1.1环境设置1.2配置zabbix-angent1.3在 Web 页面中添加 agent 主机 二 、自定义监控内容2.1客户端自定义key2.2在Web页面创建自定义监控模板 三、zabbix自动发现四、zabbix自动注册 一、添加zabbix客户端主机 1.1环境设置 systemctl disable --…
阅读更多...
2490. 回环句

2490. 回环句

句子 是由单个空格分隔的一组单词&#xff0c;且不含前导或尾随空格。 例如&#xff0c;"Hello World"、"HELLO"、"hello world hello world" 都是符合要求的句子。 单词 仅 由大写和小写英文字母组成。且大写和小写字母会视作不同字符。 如果…
阅读更多...
查询例题（三道）

查询例题（三道）

一、 写法一&#xff1a; 写法二&#xff1a; 二、 1、内连接&#xff1a; 一个部门下有哪些人&#xff0c;找的相关联的数据 2、左外连接&#xff1a; 以部门表为基准&#xff0c;部门下面没有人&#xff0c;但是也会查询出来 3、右外连接&#xff1a; 以员工表为基准&#…
阅读更多...
【Spring 丨数据绑定】

【Spring 丨数据绑定】

数据绑定 概述Databinder核心属性绑定参数绑定元数据绑定验证 概述 Spring 数据绑定(Data Binding)的作用是将用户的输入动态绑定到应用程序的领域模型JavaBean(或用于处理用户输入的任何对象)。 也就是说&#xff0c;Spring数据绑定机制是将属性值设置到目标对象中。如下图所示…
阅读更多...
Bug小能手系列(python)_9: 使用sklearn库报错 module ‘numpy‘ has no attribute ‘int‘

Bug小能手系列(python)_9: 使用sklearn库报错 module ‘numpy‘ has no attribute ‘int‘

AttributeError: module numpy has no attribute int. 0. 错误介绍1. 环境介绍2. 问题分析3. 解决方法3.1 调用解决3.2 库包中存在报错 4. 总结 首先&#xff0c;对于自己使用代码dtypenp.int报错的情况&#xff0c;建议直接修改为np.int_即可解决&#xff0c;也不用向下看了&a…
阅读更多...
Python3安装教程在Unix/Linux操作系统

Python3安装教程在Unix/Linux操作系统

在Linux操作系统上安装Python3教程&#xff0c;先下载Python3安装包&#xff1a; Python3下载&#xff1a;https://www.python.org/downloads/source/ 选择适用于 Unix/Linux 的源码压缩包。下载及解压压缩包 Python-3.x.x.tgz&#xff0c;3.x.x 为你下载的对应版本号。如果你…
阅读更多...
triton客户端使用

triton客户端使用

model_analyzer 简介&#xff1a; Triton Model Analyzer is a CLI tool which can help you find a more optimal configuration, on a given piece of hardware, for single, multiple, ensemble, or BLS models running on a Triton Inference Server. Model Analyzer wil…
阅读更多...
SSM框架训练 实现各个功能时遇到的常见问题

SSM框架训练 实现各个功能时遇到的常见问题

快速复制当前代码到下一行&#xff1a;ctrlD 格式化代码&#xff08;快速整理代码&#xff09;&#xff1a;ctrilaltL 一步一步来&#xff0c;后续会不停添加功能。 先创建项目结构&#xff1a;搭建框架 (36条消息) SSM框架模板&#xff08;高配&#xff1a;一次性配完所有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023