TS学习总结

电玩女神 2022-12-27 08:55 244阅读 0赞

## （1）编译开发TS可以使用 ##

![在这里插入图片描述][20201209202825845.png]

## （2）数据类型 ##

数据类型主要作用是：方便数据维护和数据校验；

布尔类型 boolean
    数字类型 number
    字符串类型 string
    数组类型 array
    元组类型 tuple
    枚举类型 enum
    任意类型 any
    null 和 undefined
    void类型
    never类型

**数组的三种写法：**

var arr:number[] = [11,22,33];
    console.log(arr);

var arr:Arrary<number> =[11,22,33];
    console.log(arr);

var arr:any[] =['1yhuyhub1',22,33,true];
    console.log(arr);

**元祖类型**  
![在这里插入图片描述][20201209203832303.png]

var arr:[string,number] =['1yhuyhub1',22];
    console.log(arr);

![在这里插入图片描述][20201209203936673.png]  
**枚举类型**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

enum Flag = { success =11; error=2}
    let s:Flag = Flag.success;
    console.log(s); //11

enum Color = { blue,red,success =1; error=2}
    let c:Color = Color.blue;
    console.log(c); //1

没有类型如果没有赋值，则打印的就是下标；

**任意类型**  
任意类型可以解决很多问题，比如处理元素节点；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]  
如上图，如果使用Object类型会报错，使用any类型就不会报错了～  
![在这里插入图片描述][20201209205015107.png]  
**null 和 undefined**  
`null` 和 `undefined`是其他类型（never）的子类型；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]  
正确的使用方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 3]  
如果没有值的话，可以同时定义一个当前类型和其他的`null`或者`undefined`类型  
![在这里插入图片描述][20201209205402285.png]  
如上图，定义未赋值 或者 定义赋值都不会报错；

**void类型**

void表示没有任何类型，一般用于定义方法的时候没有返回值  
![在这里插入图片描述][2020120920575590.png]  
有返回值的话，要指定返回值类型

function run():number{ 
      return 123
    }
    run()

**never类型**  
`never`类型表示的是那些永不存在的值的类型。 例如， `never`类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 `never`类型，当它们被永不为真的类型保护所约束时。

`never`类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是`never`的子类型或可以赋值给`never`类型（除了`never`本身之外）。 即使 `any`也不可以赋值给`never`。

var a:never;
    a=(()=>{ 
      throw new Error('错误');
    })()

## （3）ts函数 ##

**原始ES5写法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 4]  
**TS 写法：声明 和 匿名函数两种**

函数声明

function run():string{ 
     return 'ni shi haoren'
    }

匿名函数

var fun2 = function():string{ 
     return 'ni shi haoren'
    }

定义传参

function run(name:string,age:number):string{ 
     return `${ name}---${ age}`
    }
    run('zhangsan',34);
    
    //-----或者-------
    
    var func2 = function(name:string,age:number):string{ 
     return `${ name}---${ age}`
    }
    run2('zhangsan',34);
    
    // -------没有返回值的函数-----
    
    function run(name:string,age:number):void{ 
     console.log(`${ name}---${ age}`) 
    }

**TS中的形参**

*  可以选参数 ES5 中的形参和实参可以不一致，但是在ts中必须一样；
 *  如果不一样就需要配置可选参数；
 *  可选参数必须配置到最后；

function getInfo(name:string,age?:number):string{ 
       if(age){ 
         return `${ name}---${ age}`
       }else{ 
         return `${ name}---`
       }
    }
    getInfo('zhansan',9999);

可选参数后面使用问号表示；

**默认参数**

function getInfo(name:string,age:number=20):string{ 
       if(age){ 
         return `${ name}---${ age}`
       }else{ 
         return `${ name}---`
       }
    }
    getInfo('zhansan',9999);

**剩余参数**

举例说明  
![在这里插入图片描述][2020120921193922.png]  
使用剩余参数后

function sum(...result:number[]):number{ 
       let sum = 0;
       for(let i=0;i<result.length;i++){ 
         sum+=result[i];
       }
       return sum;
    }
    sum(1，2，3，4);

如果使用多个参数，且包含剩余参数的函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 5]  
剩余参数必须放到最后面；

**ts函数重载**

`Java`中的方法重载，指的是两个或者两个以上同名的函数，但是它们的参数是不一样的，这时候就会出现函数重载；

`typescript`中的重载，通过一个函数提供多个函数类型定义来实现重载；

`ES5`中出现同名的方法，下面的会替换上面的方法；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 6]  
TS中的实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 7]  
也存在参数可选的情况下重载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 8]  
箭头函数  
![在这里插入图片描述][20201209213951612.png]  
箭头函数的this，始终指向上下文的实例；

## （4）类 ##

**ES5的类**

function Person{ 
       this.name = 'zhansan';
       this.age = 20;
    }
    var p = new Person();
    console.log(p.name);

**ES5构造函数 和 原型链 里面增加方法**

如上图：原型链上面的方法可以背实例共享，但是构造函数的不会；

**ES5增加静态方法**

function Person{ 
       this.name = 'zhansan';
       this.age = 20;
       this.run = function(){ 
         console.log(this.name);
       }
    }
    Person.getInfo = function(){ 
     console.log("23456789);
    };
    // 使用静态方法
    Person.getInfo();

## （5）继承 ##

**ES5继承----对象冒充继承**

function Person{ 
       this.name = 'zhansan';
       this.age = 20;
       this.run = function(){ 
         console.log(this.name);
       }
    }
    Person.prototype.sex = 'man';
    Person.prototype.work = function(){ 
     console.log(this.name + "在工作");
    }
    
    //定义一个其他方法
    function Dog(){ 
      Person.call(this);
    }
    
    //使用继承的方法
    var p = new Dog();
    p.run();
    // p.work(); 不可以

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 9]

继承的实现： 对象冒充可以继承构造函数里面的属性和方法，但是不能继承 原型链的方法；

**ES5继承----原型链继承**

function Person{ 
       this.name = 'zhansan';
       this.age = 20;
       this.run = function(){ 
         console.log(this.name);
       }
    }
    Person.prototype.sex = 'man';
    Person.prototype.work = function(){ 
     console.log(this.name + "在工作");
    }
    
    //定义一个其他方法
    function Dog(){ 
      console.log('我是好人’);
    }
    
    //使用继承的方法
    Dog.prototype = new Person();
    var dog = new Dog();
    dog.work();
    dog.run();

原型链的问题：实例化的时候 没法给父类传参；

**ES5继承----原型链+构造函数 继承**

function Person{ 
       this.name = 'zhansan';
       this.age = 20;
       this.run = function(){ 
         console.log(this.name);
       }
    }
    Person.prototype.sex = 'man';
    Person.prototype.work = function(){ 
     console.log(this.name + "在工作");
    }
    
    //定义一个其他方法
    function Dog(name, age){ 
       Person.call(this,name,age);
    }
    
    //使用继承的方法
    Dog.prototype = new Person();
    var dog = new Dog('zhangsan',89);
    dog.work();
    dog.run();

组合继承可以实现上面两种方式都使用的功能；

**TS里面定义类**

class Person{ 
        name:string;
        construct(n:string){  // 实例化的时候会触发construct
           this.name = n;
        }
        run():void{ 
          console.log(this.name);
        }
    }
    var p = new Person('zhansan');
    p.run();

**TS里面的继承**

ts中如何实现继承 （extends / super）

class Person{ 
        name:string;
        construct(n:string){  // 实例化的时候会触发construct
           this.name = n;
        }
        run():void{ 
          console.log(this.name);
        }
    }
    
    class Dog extends Person{ 
      construct(n:string){  
          super(name); //构造函数和super都要有；super 相当于 调用父类的构造函数
       }
    }
    var p = new Dog('zhansan');
    p.run();

继承这里明显的ts比js要简单；

## （6）类里面的修饰符 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 10]  
**举例：`private`的使用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 11]  
子类 和 类外部 都无法使用，只能在当前类 内部使用；

**举例：`private`的使用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 12]

## （7）静态属性 与 静态方法 ##

**ES5的 静态属性 和 静态方法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 13]  
静态属性 和 静态方法都是直接绑定在函数上面的，实例属性和实例方法都是在函数内部的；

**TS的 静态属性 和 静态方法**

class Person{ 
      public name:string;
      public age:number = 20;
      constructor(name:string){ 
        this.name = name;
      }
      run(){   // 实例方法
        console.log(this.name + "123456");
      }
      work(){  // 实例方法
        console.log(this.name+"098765");
      }
      static print(){  // 静态方法
        console.log(this.name+"098765-"+ this.age);
      }
    }
    var p = new Person();
    p.run(); // 使用实例方法
    Person.print();  //使用静态方法

1- 实例方法 必须在外部实例化以后才能使用；  
2- 实例方法 前面加上static 就会变成静态方法；  
3- 静态方法不能使用基本属性，只能使用静态属性；

**多态**  
父类定义一个方法不去实现，让继承它的子类去实现，每个子类都有不同的表现；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 14]

## （8）抽象方法 ##

（1）抽象类  
标准：一个类要求它的字类必须包含指定方法，它是提供其他类继承的基类，不能被直接实例化。

*定义抽象类：*

abstract class Animal { 
      abstract eat():any ;
    }
    
    let a=new Animal();  // 报错：无法创建抽象类的实例

（2）抽象方法

抽象方法在子类里面必须实现

// 父类
    abstract class Animal { 
      public name: string;
      constructor(name: string) { 
        this.name = name;
      }
    
      abstract eat(): any;
    }
    // 子类Dog
    class Dog extends Animal { 
      constructor(name: string) { 
        super(name);
      }
      // 抽象类的子类必须实现抽象类里面的抽象方法
      eat() { 
        console.log(this.name + '在吃肉');
      }
    }
    let d = new Dog('达摩');
    d.eat();
    
    // 子类Cat
    class Cat extends Animal {        
      constructor(name: string) { 
        super(name);
      }
    }

子类Cat不实现eat()方法，会报错：非抽象类“Cat”不会实现继承自“Animal”类的抽象成员“eat”，即子类Cat不会自动继承父类的方法

*注意点：*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 15]

## （9）接口 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 16]  
另一个我觉得还不错的解释；  
![在这里插入图片描述][20201210214536233.png]  
**定义方法：**

function print():void{ 
     console.log('12345678');
    }
    print();

**定义方法（参数限定）：**

function print(label:string):void{ 
     console.log('12345678');
    }
    print();

**定义方法（JSON参数限定）：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 17]

**接口实现：**

作用：对批量方法传入参数进行约束；

interface FullName{ 
      first:string, // 接口属性
      second:string
    }
    function name(name:FullName){  
      console.log(name.first + ''----"+ name.second);
    }
    
    // name('23456'); 错误写法
    var obj = {   //必须传入 first,second
      age:20,
      first:'zhangsan',
      second:'siwu'
    }
    
    name(obj);

传入的对象必须包含接口需要实现的参数；

**接口批量实现：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 18]

**接口可选参数：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 20]

1、实现接口的参数的顺序可以不同，但是必须要有；  
2、可选的参数后面带一个问号，表示参数可以传可以不传；

**模拟ajax**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 21]

定义一个接口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 22]

实现这个接口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 23]

调用接口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 24]

## （9）函数型接口 ##

作用：对方法传入的参数，以及返回值进行约束；

interface encrypt{ 
     (key:string,value:string):string
    }
    var md5:encrypt = function(key:string,value:string):string{ 
     return key+value
    }
    md5('name','zhangsan');

举例: 两种加密方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 25]

## （10）可索引接口 ##

可索引接口，是数组，对象的约束（不常用）

**索引必须是number**

interface User{ 
     [index:number]:string
    }
    var arr:User = ['aa','bb'];
    console.log(arr[0]);

**索引必须是string**

interface User{ 
     [index:string]:string
    }
    var arr:User = { name:'zhangsan'};

## （11）类类型接口 ##

对类的约束 和 抽象类有点像  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 26]  
方法必须实现，但是参数也可以不传；

## （12）接口拓展 ##

接口可以继承接口

interface Animal{ 
      eat():void;
    }
    interface Dog entends Animal{ 
      work():void;
    }
    class Preson implements Dog{ 
      public name:string;
      construtor(name:string){ 
         this.name = name;
      }
      eat(){ 
      }
      work(){ 
      }
    }

**实现一个继承类和继承接口同步的**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 27]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 28]

## （13）泛型函数 ##

**泛型：** 可以支持不特定的数据类型； 要求：传入的参数和返回的参数一致；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 29]

举例：只能返回string类型  
![在这里插入图片描述][20201219130800200.png]  
方法一：  
使用any可以实现，但是相当于放弃了类型检查；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 30]  
上面可以返回 string，和 number；

第二种：使用泛型  
传入的参数和返回的参数一致；

// T表示范型，具体是什么类型是调用这个方法的时候决定的
    function getData<T>(value:T):T{ 
       return value;
    }
    getData<number>(123);

这里 可以使用`T` 也可以使用别的字符串，但是必须保证三个`一致`；

**返回类型可以是任意类型实现**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 31]  
将返回值的类型设置成any即可；

## （14）泛型类 ##

举例：比如有一个算法，需要同时支持返回数字和返回字符串两种类型，就可以通过范型类来实现；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 32]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 33]  
如上面所示只能返回一种类型；

**使用范型类**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 34]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 35]

## （15）泛型接口 ##

先看看函数类型接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 36]

**第一种：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 37]  
**第二种：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 38]

本人更喜欢第一种模式；

## （16）泛型类 ##

**使用JS写法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 39]  
**使用普通类**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 40]

**使用范型类**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 41]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 42]

## （17）TS模块 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 43]

举例实现：  
**1、创建数据库**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 44]  
也可以使用另一种暴露方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 45]

**2、调用数据库的内容**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 46]

## （18）命名空间 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 47]  
命名空间里面的方法要使用，必须暴露出去；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 48]  
调用命名空间的方法  
![在这里插入图片描述][20201219134035482.png]  
访问多个命名空间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 49]

## （19）装饰器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 50]

## （20）类装饰器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 51]

传递的参数params就是当前的类；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 52]

如上图：举例拓展一个属性，在这类的基础上拓展一个apiUrl属性；还可以拓展方法，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 53]  
**拓展类传递参数：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 54]  
如上图所以：`target`代表要装饰的类，`params`代表装饰器传递的参数；

**在装饰器里面拓展原始类的属性**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 55]

**类装饰器的构造函数**  
![在这里插入图片描述][20201219135030333.png]  
修改构造函数 的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 56]  
如果`loginClass`爆红 是因为`getData()`没有重载；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 57]

## （21）属性装饰器 ##

![在这里插入图片描述][20201219135339965.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 58]  
**修改属性的值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 59]

## （22）方法修饰器 ##

![在这里插入图片描述][20201219135506201.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 60]

**举例测试拓展类**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 61]  
修改当前方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 62]

## （23）方法参数修饰器 ##

![在这里插入图片描述][20201219135918643.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 63]

[20201209202825845.png]: /images/20221120/4b5d951945a44d22a0cebc5513db6fb3.png
[20201209203832303.png]: /images/20221120/e929c6f34ac2483b9194d0a0d6cd86a0.png
[20201209203936673.png]: /images/20221120/1d3064a54888450abd74f1879333902d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221120/6a53fa69221f46c1aea6aee091cc96f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]: /images/20221120/60437b998d594f22b2f8183ceba2777d.png
[20201209205015107.png]: /images/20221120/d1e48bfb5c5c400db69befc1772342c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]: /images/20221120/1a95bf9ad28e4fbea13baf12be4f77a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 3]: /images/20221120/e07fd5089e2040a1ba487cdb7edf877d.png
[20201209205402285.png]: /images/20221120/cd073bbfb1324fada72ae8ead4e8e125.png
[2020120920575590.png]: /images/20221120/f275c47b2bff4e22a619c8ca856fda35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 4]: /images/20221120/e92e2efe796c4a278f71e3cd9fbfdf4d.png
[2020120921193922.png]: /images/20221120/75b71c8299a348f4973553a89f34c730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 5]: /images/20221120/552e467a9d43416690a033dccd3fb77a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 6]: /images/20221120/8255a3002d9141a1902aa132a049d6d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 7]: /images/20221120/c65a2e92dcf94b96b75022f542b8ba89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 8]: /images/20221120/ad7fd6cfd5854fa5b6d7477bae384d96.png
[20201209213951612.png]: /images/20221120/a4d6f290f598452c83bc1e1e4f990e7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 9]: /images/20221120/cfc215fdc53141a3945db1aaed7af765.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 10]: /images/20221120/e88d178caaeb4dffb33b5f04df3f2f8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 11]: /images/20221120/341b67d9eb894e37bfd53a824d839ed0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 12]: /images/20221120/b3d9159ffe5040b4a64f0a537ea30109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 13]: /images/20221120/2d98ed3fee5d4761aed6cf842b56d64f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 14]: /images/20221120/0350ebd3eb4044b28efce67c74a99cc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 15]: /images/20221120/f7e8c4e5da344765a7a3cfa4885c81fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 16]: /images/20221120/61749607a5b947ef91cef3d9327c5da7.png
[20201210214536233.png]: /images/20221120/3ec1be46325b4c01bfa1ec9b833cf45b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 17]: /images/20221120/9d6e2e8e95fa41338b56149f5caea5a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 18]: /images/20221120/8090cb0ccd7e4ee4b1f070ffc73ff661.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 19]: /images/20221120/30d935efe5474c95ac21f90567cfa23c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 20]: /images/20221120/b74940f2249c47779ee6fb507613b780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 21]: /images/20221120/b97a691c52cf45d6a3fb67048fbe5c01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 22]: /images/20221120/cd1757a2b63c4d5faba42bf28e26df57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 23]: /images/20221120/9af2c7491f5e45a2a02dfc04ca128684.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 24]: /images/20221120/aee3eeaa08a74733b0f0494aa838752b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 25]: /images/20221120/5420cbf877fa43b3b683d5a8d41cd2c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 26]: /images/20221120/c6022025b35a4272b314987b319527e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 27]: /images/20221120/c0d450c6e88b4c16bf8c762a1031969d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 28]: /images/20221120/99eb51aed6af429eb3ec20eef4a79cc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 29]: /images/20221120/bf75c065fc38463ab2bb3acc1a751ace.png
[20201219130800200.png]: /images/20221120/86782bfb2d45420f9172f968226a710d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 30]: /images/20221120/73ad211bfef34b44bf697dcd1e69d031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 31]: /images/20221120/e1f1aa35d77949e9a7a7fa42bb7e9281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 32]: /images/20221120/c5c152a3862d46e180970c6eded2271e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 33]: /images/20221120/4a5245905f75439ba56f7306bc12771f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 34]: /images/20221120/ba6204621b124d8c81f13788304e6a16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 35]: /images/20221120/562067e7db074fb6900bb7f4138d67f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 36]: /images/20221120/800f8f3ec3f54260bf90f27386ec42e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 37]: /images/20221120/d98bfcf612ee4633a6bffd1ed5509a6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 38]: /images/20221120/16fb1e3c450f4761a4f0f2e27ea35d40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 39]: /images/20221120/9076a57d7d5e4ca99283d392432bc5c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 40]: /images/20221120/d920b9bf67884da5b46632be433807e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 41]: /images/20221120/5d737f4d35df4356afd19741c90fef95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 42]: /images/20221120/aee8e78909e247ff900baea1f1be4886.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 43]: /images/20221120/4fbe46ea3e4d44558d451fe933991735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 44]: /images/20221120/72c127fede5742788fc45721b29e8a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 45]: /images/20221120/bf0f377e36014915b46eb36bdb2991e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 46]: /images/20221120/ffddbff9ff8a4d6895d5e5c47bbaee55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 47]: /images/20221120/cdc621bbf16f4b43a22bd1b285fdbd4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 48]: /images/20221120/c8b965a28bd14a5e8cc9fbef5069938c.png
[20201219134035482.png]: /images/20221120/ff1877b29c654129b1c8cd8014420f72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 49]: /images/20221120/6174418bd834460888b3cf5bc6fc3a6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 50]: /images/20221120/9e610884aa1b4b328222728fe9cc7655.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 51]: /images/20221120/84e6784909e54a4a86c683f3e0355c3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 52]: /images/20221120/c79f307ce12f47b7b60c0d2100baa3b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 53]: /images/20221120/b6af9f5c361c487097d50232cdd7b9cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 54]: /images/20221120/9f7104bd891f404ea58d6f93351b6e13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 55]: /images/20221120/a598ea85a8964e8cac79a174c7040de5.png
[20201219135030333.png]: /images/20221120/c371a362553341a58896cc7124b8617b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 56]: /images/20221120/cc9cc842f6aa4053a91692647b2fa146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 57]: /images/20221120/6afceaf3d7504200bc980d4bb2c83a57.png
[20201219135339965.png]: /images/20221120/9d770e8feb514fb78fe0c1cb0aeb1f2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 58]: /images/20221120/c7b509771e16496e94fc39717211a4c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 59]: /images/20221120/320ed1187846429c89f1d81a7c468ea9.png
[20201219135506201.png]: /images/20221120/e909d96dccc14d958fc4506b47145979.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 60]: /images/20221120/93ef79c39b22451cbf15d3f7505df26c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 61]: /images/20221120/9f81c7f8118645f2a9e933a6d14f0c97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 62]: /images/20221120/c5b6112fed544884bdd916f5399d3146.png
[20201219135918643.png]: /images/20221120/3af153718b6e49b784a9977a3ba456f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 63]: /images/20221120/72c25812727e4a97820569a5e28795ad.png