JavaScript设计模式（一）：面向对象编程 - 继承

秒速五厘米 2024-04-03 10:57 29阅读 0赞

#### JavaScript设计模式 - 面向对象编程 ####

*  灵活的语言-JavaScript
 *   *  用对象收编变量
     *  对象的另一种形式(函数对象)
     *  真假对象(闭包和类)
     *  一个检测类
     *  函数的祖先
 *  写的都是看到的-面向对象编程
 *   *  创建一个类（三种方式）
     *  类的属性和方法
     *  通过闭包来实现类的静态变量定义，使之更像一个整体
     *  忘记 \`new\` 怎么办？
     *  子类的原型对象-类式继承
     *  创建即继承-构造函数继承
     *  将优点为我所用-组合继承
     *  洁净的继承者-原型式继承
     *  如虎添翼-寄生式继承（对原型式继承的增强）
     *  终极继承者-寄生组合式继承（\`寄生式继承\`和\`构造函数继承\`的组合）
     *  老师不止一位-多继承
     *  多种调用方式-多态

## 灵活的语言-JavaScript ##

> 实现一个验证表单的功能，需要验证用户名、邮箱、密码

### 用对象收编变量 ###

let CheckObject = {
        
        checkName: function () {
        
            // 验证姓名
        },
        checkEmail: function () {
        
            // 验证邮箱
        },
        checkPassword: function () {
        
            // 验证密码
        },
    }

### 对象的另一种形式(函数对象) ###

*  缺点：
    
     *  对象类不能复制一份（或者说这个对象类在用new关键字创建新的对象时，新创建的对象是不能继承这些方法的）

let CheckObject = function () {
        
    };
    CheckObject.checkName = function () {
        
        // 验证姓名
    }
    CheckObject.checkEmail = function () {
        
        // 验证邮箱
    }
    CheckObject.checkPassword = function () {
        
        // 验证密码
    }

### 真假对象(闭包和类) ###

***实现复制功能，人手一份***

// 闭包 - 内部函数返回到外部
    let CheckObject = function () {
        
        return {
        
            checkName: function () {
        
                // 验证姓名
            },
            checkEmail: function () {
        
                // 验证邮箱
            },
            checkPassword: function () {
        
                // 验证密码
            },
        }
    }
    let a = CheckObject();
    a.checkName();

// 类 - 对象的实例化
    let CheckObject = function () {
        
        this.checkName = function () {
        
            // 验证姓名
        }
        this.checkEmail = function () {
        
            // 验证邮箱
        }
        this.checkPassword = function () {
        
            // 验证密码
        }
    }
    let a = new CheckObject();
    a.checkName();

### 一个检测类 ###

*  以上方法通过new关键字创建对象时，新创建额对象都会对类的this上的属性进行复制，所以这些新创建的对象都会有自己的一套方法，但缺点是消耗大，因为每次都需要复制一套方法

***将方法创建在类的原型上，这样调用的方法就都会是同一个，减小消耗***

### 函数的祖先 ###

***抽象出一个可以添加方法功能的方法***

Function.prototype.addMethod = function (name, fn) {
        
        this[name] = fn;
    }
    
    let methods = function () {
        
    }; // 或者 let methods = new Function();
    
    methods.addMethod('checkName', function () {
        
        // 验证姓名
    });
    methods.addMethod('checkEmail', function () {
        
        // 验证邮箱
    });
    methods.addMethod('checkPassword', function () {
        
        // 验证密码
    });

***链式添加方法功能并链式调用(以下两个方法只能为自身添加方法)***

![在这里插入图片描述][13890de7602b4b648bbfd205c3d6038f.png_pic_center]

// 链式添加-方式一 （链式调用）
    Function.prototype.addMethod = function (name, fn) {
        
        this[name] = fn;
    }
    
    let methods = function () {
        
    }; // 或者 let methods = new Function();
    
    methods.addMethod('checkName', function () {
        
        // 验证姓名
        console.log('验证姓名');
        return this;
    });
    methods.addMethod('checkEmail', function () {
        
        // 验证邮箱
        console.log('验证邮箱');
        return this;
    });
    methods.addMethod('checkPassword', function () {
        
        // 验证密码
        console.log('验证密码');
        return this;
    });
    methods.checkName().checkEmail().checkPassword(); // 验证姓名 验证邮箱 验证密码

// 链式添加-方式二 （方式一的改进版本） 存在消耗问题
    Function.prototype.addMethod = function (name, fn) {
        
        this[name] = fn;
        return this;
    }
    
    let methods = function () {
        
    }; // 或者 let methods = new Function();
    
    methods.addMethod('checkName', function () {
        
        // 验证姓名
        console.log('验证姓名');
        return this;
    }).addMethod('checkEmail', function () {
        
        // 验证邮箱
        console.log('验证邮箱');
        return this;
    }).addMethod('checkPassword', function () {
        
        // 验证密码
        console.log('验证密码');
        return this;
    });
    methods.checkName().checkEmail().checkPassword(); // 验证姓名 验证邮箱 验证密码

***改进：在原型上添加方法功能的方法***

![在这里插入图片描述][4d1782e68b5e49d494d3d47f1b158e34.png_pic_center]

// 链式添加-方式三 （方式二的改进版本） 减小消耗
    Function.prototype.addMethod = function (name, fn) {
        
        this.prototype[name] = fn;
        return this;
    }
    
    let Methods = function () {
        
    }; // 或者 let methods = new Function();
    
    Methods.addMethod('checkName', function () {
        
    // 验证姓名
        console.log('验证姓名');
        return this;
    }).addMethod('checkEmail', function () {
        
    // 验证邮箱
        console.log('验证邮箱');
        return this;
    }).addMethod('checkPassword', function () {
        
    // 验证密码
        console.log('验证密码');
        return this;
    });
    
    let m = new Methods();
    m.checkName().checkEmail().checkPassword(); // 验证姓名 验证邮箱 验证密码

## 写的都是看到的-面向对象编程 ##

### 创建一个类（三种方式） ###

***方式一：函数this创建方式***

![在这里插入图片描述][002384821862403690be53a18a08f4cb.png_pic_center]

// 1.函数this创建方式
    function Book(id, bookName, price) {
        
        this.id = id;
        this.bookName = bookName;
        this.price = price;
    }
    
    let book = new Book('abc', 'JS设计模式', 123.12);
    console.log(book);

***方式二：class-this创建方式***

![在这里插入图片描述][2fd67d35d3454e4eac3fbc828d14b5dc.png_pic_center]

// 2.class-this创建方式
    class Book {
        
        constructor(id, bookName, price) {
        
            this.id = id;
            this.bookName = bookName;
            this.price = price;
        }
    }
    
    let book = new Book('abc', 'JS设计模式', 123.12);
    console.log(book);

***方式三：原型创建方式 (`setBookInfo`方法在原型上)***

![在这里插入图片描述][5fa05811f426424d8c8cbc84e8ba7d01.png_pic_center]

// 3.原型创建方式 setBookInfo方法在原型上
    let Book = function () {
        
    };
    Book.prototype.setBookInfo = function (id, bookName, price) {
        
        this.id = id;
        this.bookName = bookName;
        this.price = price;
    }
    let book = new Book();
    book.setBookInfo('abc', 'JS设计模式', 123.12);
    console.log(book);

***图解***

![在这里插入图片描述][f7bc4adfba4649b0bc8431a7b3d1ff1d.png_pic_center]

### 类的属性和方法 ###

*  属性和方法
    
     *  `私有属性`
     *  `私有方法`
     *  `特权方法`
     *  `对象公有属性`
     *  `对象公有方法`
     *  `构造器`
     *  `类静态公有属性`
     *  `类静态公有方法`

![在这里插入图片描述][160f37bc2d5c43e4806f215df7e377b8.png_pic_center]

***在类的外部通过`.语法`定义的属性和方法和在类的外部通过`prototype`定义的属性和方法的区别：***

*  区别：
    
     *  在类的外部通过`.语法`定义的属性和方法：
        
         *  不可通过 `this` 或者 `new` 的实例对象进行访问;
         *  可通过类进行调用 `Person.say1();`;
     *  在类的外部通过`prototype`定义的属性和方法：
        
         *  可通过 `this` 或者 `new` 的实例对象进行访问;
         *  不可通过类进行调用 `Person.say2(); // Error`;
         *  可通过 `Person.prototype.方法` 进行调用;

### 通过闭包来实现类的静态变量定义，使之更像一个整体 ###

![在这里插入图片描述][87c6cc344f854ac684a23d95cf6c5b9a.png_pic_center]

// 利用闭包实现
    let Book = (function () {
        
    
        // 静态私有变量
        let bookNum = 0;
    
        // 静态私有方法
        let checkBook = function (name) {
        
        };
    
        // 创建类
        function _book(newId, newName, newPrice) {
        
    
            // 私有变量
            let name, price;
    
            // 私有方法
            function checkID(id) {
        
            }
    
            // 特权方法
            this.getName = () => name;
            this.getPrice = () => price;
            this.setName = function (n) {
        
                name = n;
            };
            this.setPrice = function (p) {
        
                price = p;
            };
    
            // 公有属性
            this.id = newId;
            name = newName;
            price = newPrice;
    
            // 公有方法
            this.copy = function () {
        
            };
    
            bookNum++;
    
            if (bookNum > 100) {
        
                throw new Error('我们仅出版100本书！！！');
            }
    
            // 构造器
            this.setName(name);
            this.setPrice(price);
        }
    
        // 构造原型
        _book.prototype = {
        
            // 静态公有属性
            isJSBook: true,
            // 静态公有方法
            display() {
        
            },
        };
    
        // 返回类
        return _book;
    
    })();
    
    
    let book = new Book('abc', 'JS设计模式', '12.34');
    
    console.log('Book', {
        Book});
    
    console.log('book', book);
    book.getName(); // 'JS设计模式'
    book.getPrice(); // '12.34'

### 忘记 `new` 怎么办？ ###

let Book = function (id, bookName, price) {
        
        this.id = id;
        this.bookName = bookName;
        this.price = price;
    }
    let book = Book('abc', '《JS设计模式》', 12.34);
    console.log(book);               // undefined
    console.log(window.id);          // abc              this指向了window
    console.log(window.bookName);    // 《JS设计模式》     this指向了window
    console.log(window.price);       // 12.34            this指向了window

***解决办法：***

### 子类的原型对象-类式继承 ###

![在这里插入图片描述][c0eb6ea2240d4ecaab0f8d47bb7196f3.png_pic_center]

![在这里插入图片描述][5d8c46398ae145c6a97501d545303525.png_pic_center]

// 父类
    function SuperClass() {
        
        this.superValue = true;
    }
    
    // 为父类添加共有方法
    SuperClass.prototype.getSuperValue = function () {
        
        return this.superValue;
    };
    
    // 子类
    function SubClass() {
        
        this.subValue = false;
    }
    
    // 继承父类
    SubClass.prototype = new SuperClass();
    // 为子类添加共有方法
    SubClass.prototype.getSubValue = function () {
        
        return this.subValue;
    };
    
    let superClass = new SuperClass();
    let subClass = new SubClass();
    
    console.log(superClass, subClass);

*  `instanceof` 通过判断对象的 `prototype链` 来确定这个对象是否是某个类的实例，并不是表示两者的继承关系
 *  所有对象都是 `Object` 的实例

console.log(superClass instanceof SuperClass);          // true
    console.log(subClass instanceof SubClass);              // true
    
    console.log(subClass instanceof SuperClass);            // true
    console.log(SubClass instanceof SuperClass);            // false
    
    console.log(SubClass.prototype instanceof SuperClass);  // true		契合以上判断条件
    console.log(SubClass instanceof Object);  				// true		契合以上判断条件

***类式继承的缺点：***

// 父类
    function Father() {
        
        this.str = 'Lee';
        this.data = ['Lee'];
    }
    
    // 子类
    function Son() {
        
    }
    
    // 继承父类
    Son.prototype = new Father();
    
    let instance1 = new Son();
    let instance2 = new Son();
    
    console.log(instance1.data, instance2.data);  // ['Lee'] ['Lee']
    
    instance1.str = 'Tom';
    instance1.data.push(18);
    
    console.log(instance1.str, instance2.str);    // Tom Lee
    console.log(instance1.data, instance2.data);  // (2)['Lee', 18] (2)['Lee', 18]

1.  当一个```子类的实例``更改```子类原型`从父类构造函数`中`继承来的共有属性`就会直接`影响到其他子类`
    
     *  比如： `修改 instance1 原型上继承来自父类的引用类型的值时， instance2 获取到的值也被改变了`
2.  无法在实例化子类的同时向父类传递参数
    
     *  比如： `new Son(参数);` 的时候没发把参数传递给父类，因为子类实现的继承是靠其原型等于父类的实例化实现的

### 创建即继承-构造函数继承 ###

***利用 `call` 改变函数作用环境***

![在这里插入图片描述][dc3e590c345a4681b98b88c716fedd42.png_pic_center]

// 父类
    function Father(id) {
        
        // 值类型公有属性
        this.id = id;
        // 引用类型公有属性
        this.data = ['Lee', 'Tom'];
    }
    
    // 父类原型方法
    Father.prototype.showData = function () {
        
        console.log(this.data);
    }
    
    // 子类
    function Son(id) {
        
        // 继承父类
        Father.call(this, id);
    }
    
    let instance1 = new Son('id-001');
    let instance2 = new Son('id-002');
    
    instance1.data.push('张三');
    
    instance1.id;       // 'id-001'
    instance1.data;     // ['Lee', 'Tom', '张三']
    
    instance2.id;       // 'id-002'
    instance2.data;     // ['Lee', 'Tom']
    
    instance1.showData(); // Error TypeError: instance1.showData is not a function
    instance2.showData(); // Error TypeError: instance2.showData is not a function

***构造函数继承缺点：***

*  无法调用父类原型上的属性和方法（无法继承来自原型上的属性和方法）
    
     *  比如： `instance1.showData();` 和 `instance2.showData();` 会报错

### 将优点为我所用-组合继承 ###

![在这里插入图片描述][59b2f769eaa040eea36fb307e9dd3ddd.png_pic_center]

// 父类
    function Father(fatherName) {
        
        // 值类型公有属性
        this.fatherName = fatherName;
        // 引用类型公有属性
        this.friends = ['Lee', 'Tom'];
    }
    
    Father.prototype.getFatherName = function () {
        
        console.log(this.fatherName);
    };
    
    // 子类
    function Son(fatherName, myName) {
        
        // 构造函数式继承类
        Father.call(this, fatherName);
        // 子类中的公有属性
        this.myName = myName;
    }
    
    // 类式继承 - 子类继承父类
    Son.prototype = new Father();
    
    Son.prototype.getMyName = function () {
        
        console.log(this.myName);
    };
    
    console.log({
        Father}, {
        Son});
    
    let son = new Son('汤姆', 'Tom');
    
    console.log(son);

***组合 类式和构造函数式 继承的缺点：***

*  父类的构造函数执行了两遍
    
     *  使用构造函数式继承时执行了一次父类的构造函数
     *  实现子类原型的类式继承时又调用了一遍父类的构造函数

### 洁净的继承者-原型式继承 ###

![在这里插入图片描述][5be44c9656514c25ae69c38cf00938ac.png_pic_center]

// 原型式继承
    function inheritObject(o) {
        
        // 声明一个 过渡函数对象
        function F() {
         }
        // 过渡对象 的 原型 继承 父对象
        F.prototype = o;
        // 返回过度对象的一个实例，该实例的原型继承了父对象
        return new F();
    }
    
    let friends = ['Lee', 'Tom'];
    
    let obj1 = inheritObject({
         getName() {
         console.log('obj1', this.name); } });
    obj1.name = 'Lee';
    obj1.friends = friends;
    
    let obj2 = inheritObject({
         getName() {
         console.log('obj2', this.name); } });
    obj2.name = 'Tom';
    obj2.friends = friends;

***原型式继承的缺点：***

![在这里插入图片描述][956d1519557c456db9c2c7834730f1a5.png_pic_center]

obj1.friends.push('张三'); // friends.push('张三');
    console.log('【obj1】', obj1, '【obj2】', obj2);

*  当一个```子类的实例``更改```子类`从父类构造函数`中`继承来的共有属性`就会直接`影响到其他子类的实例`
    
     *  比如： `修改 obj1 上继承来自父类的引用类型的值时， obj2 获取到的值也被改变了`

### 如虎添翼-寄生式继承（对原型式继承的增强） ###

***`其实寄生式继承就是对原型继承的第二次封装，并且在这第二次封装过程中对继承的对象进行了拓展，这样新创建的对象不仅仅有父类中的属性和方法而且还添加新的属性和方法`***

![在这里插入图片描述][b34a9956794140fbb6cfc0563ce961a5.png_pic_center]

// 基类
    let userInfo = {
         name: 'Lee', age: 18 };
    let friends = ['Lee', 'Tom'];
    
    // 原型式继承
    function inheritObject(o) {
        
        // 声明一个 过渡函数对象
        function F() {
         }
        // 过渡对象 的 原型 继承 父对象
        F.prototype = o;
        // 返回过度对象的一个实例，该实例的原型继承了父对象
        return new F();
    }
    
    function createObj(obj) {
        
        // 原型式继承
        let o = inheritObject(obj);
        // 拓展新对象
        o.friends = friends;
        o.getName = function () {
        
            console.log(this.name);
        }
        // 返回拓展后的新对象
        return o;
    }
    
    let obj1 = createObj(userInfo);
    let obj2 = createObj(userInfo);
    
    obj1.friends.push('张三');
    
    console.log('【obj1】', obj1, '【obj2】', obj2);

***寄生式继承缺点：***

*  与原型式继承相同

### 终极继承者-寄生组合式继承（`寄生式继承`和`构造函数继承`的组合） ###

***解决了`子类实例化` `修改` 了 `公有属性` `影响` 到 `其他实例化的对象` 的问题***

![在这里插入图片描述][ed9c14ea85d64f16b9fb52342815aa58.png_pic_center]

// 原型式继承
    function inheritObject(o) {
        
        // 声明一个 过渡函数对象
        function F() {
         }
        // 过渡对象 的 原型 继承 父对象
        F.prototype = o;
        // 返回过度对象的一个实例，该实例的原型继承了父对象
        return new F();
    }
    
    /**
     * 寄生组合式继承 - 寄生式继承，继承原型
     * @param {class} sonClass 子类
     * @param {class} fatherClass 父类
     */
    function inheritPrototype(sonClass, fatherClass) {
        
        // 赋值一份父类的原型副本保存在变量中
        let p = inheritObject(fatherClass.prototype);
        // 修正因为重写子类原型导致子类的constructor属性被修改
        p.constructor = sonClass;
        // 设置子类的原型
        sonClass.prototype = p;
    }
    
    // 父类
    function Father(fatherName) {
        
        this.fatherName = fatherName;
        this.friends = ['Lee', 'Tom'];
    }
    
    Father.prototype.getFatherName = function () {
        
        console.log(this.fatherName);
    }
    
    // 子类
    function Son(fatherName, sonName) {
        
        Father.call(this, fatherName);
        this.sonName = sonName;
    }
    
    // 寄生式继承父类原型
    inheritPrototype(Son, Father);
    
    Son.prototype.getSonName = function () {
        
        console.log(this.sonName);
    }
    
    let son1 = new Son('汤姆', 'Tom');
    let son2 = new Son('张三', 'ZhangSan');
    
    son1.getFatherName();   // 汤姆
    son1.getSonName();      // Tom
    
    son1.friends.push('张三');
    
    console.log('【son1】', son1, '【son2】', son2);

***原理图***

![在这里插入图片描述][6a75ab9c758f465394c9a68b747482ac.png_pic_center]

### 老师不止一位-多继承 ###

***单继承***

![在这里插入图片描述][06686373aed340cda92d8ecc9b580741.png_pic_center]

// 单继承 属性复制继承（此示例使用的是浅克隆）
    var extend = function (target, source) {
        
        // 遍历源对象中的属性
        for (var property in source) {
        
            // 将源对象中的属性复制到目标对象中
            target[property] = source[property];
        }
        // 返回目标对象
        return target;
    };
    
    var father = {
        
        money: 1E10,
        friends: ['Lee', 'Tom']
    }
    var son = {
        
        name: '张三'
    }
    
    // son 继承 father
    extend(son, father);
    
    son.friends.push('Lucy');
    
    son.money = 10;
    
    son.name = '小明';

***多继承 (方式一)***

![在这里插入图片描述][80f5583cdb2945dc9f00135679a05d28.png_pic_center]

// 多继承 属性复制　　
    var mix = function () {
        
        var i = 1,                      // 从第二个参数起为被继承的对象
            len = arguments.length,     // 获取参数长度
            target = arguments[0],      // 第一个对象为目标对象
            arg;                        // 缓存参数对象
        // 遍历被继承的对象
        for (; i < len; i++) {
        
            // 缓存当前对象
            arg = arguments[i];
            // 遍历被继承对象中的属性
            for (var property in arg) {
        
                // 将被继承对象中的属性复制到目标对象中
                target[property] = arg[property];
            }
        }
    
        // 返回目标对象
        return target;
    };
    
    let parent1 = {
         money: 1E10 };
    let parent2 = {
         friends: ['Lee', 'Tom'] };
    let parent3 = {
         hobbies: ['躺着'] };
    let son = {
         name: '小明' };
    
    mix(son, parent1, parent2, parent3);
    
    console.log(son);

***多继承 (方式二)***

![在这里插入图片描述][480fb626a6df4231b24edf5469023fd3.png_pic_center]

Object.prototype.mix = function () {
        
        var i = 0,                      // 从第一个参数起为被继承的对象
            len = arguments.length,     // 获取参数长度
            arg;                        // 缓存参数对象
        // 遍历被继承的对象
        for (; i < len; i++) {
        
            // 缓存当前对象
            arg = arguments[i];
            // 遍历被继承对象中的属性
            for (var property in arg) {
        
                // 将被继承对象中的属性复制到目标对象中
                this[property] = arg[property];
            }
        }
    }
    
    let parent1 = {
         money: 1E10 };
    let parent2 = {
         friends: ['Lee', 'Tom'] };
    let parent3 = {
         hobbies: ['躺着'] };
    let son = {
         name: '小明' };
    son.mix(parent1, parent2, parent3);
    console.log(son);

### 多种调用方式-多态 ###

***多态，就是同一个方法多种调用方式***

[13890de7602b4b648bbfd205c3d6038f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0d5cbceec59646ba991bc8eee7566f19.png
[4d1782e68b5e49d494d3d47f1b158e34.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c02bfceb9712472284966d5db35b3f79.png
[002384821862403690be53a18a08f4cb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2c3a83e4f990403bb783e8c80f26cdb0.png
[2fd67d35d3454e4eac3fbc828d14b5dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a0b47b680d56475fb12e6c17f10cf3f2.png
[5fa05811f426424d8c8cbc84e8ba7d01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0e2faf6996e4486484639adf96136a31.png
[f7bc4adfba4649b0bc8431a7b3d1ff1d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/473ca7e1aeb44febaf1e858c441a6a87.png
[160f37bc2d5c43e4806f215df7e377b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f3c9e54d275f44e8a5c3bf51799bcf0b.png
[87c6cc344f854ac684a23d95cf6c5b9a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c8784bd5168c4012b073004f13d328de.png
[c0eb6ea2240d4ecaab0f8d47bb7196f3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2e2d910cb32b4ae9a7a6e06a6cd8ca9f.png
[5d8c46398ae145c6a97501d545303525.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1448ee4f4363466093ab6efa5469aa3d.png
[dc3e590c345a4681b98b88c716fedd42.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7a3ae71f38d6412e80d8b8a8c3bf4d65.png
[59b2f769eaa040eea36fb307e9dd3ddd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8ed7c5db19bb41d7942b807a241e848a.png
[5be44c9656514c25ae69c38cf00938ac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1df6738830624220af3edbc9c5c707ef.png
[956d1519557c456db9c2c7834730f1a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3563943c897c4b26827a56c0de6ad621.png
[b34a9956794140fbb6cfc0563ce961a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cce8ef4ad54740898635b5161d5868c4.png
[ed9c14ea85d64f16b9fb52342815aa58.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a7dac67c0b4c415486d102794cbd2f80.png
[6a75ab9c758f465394c9a68b747482ac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/439809d4391a4db58ad2da32a437ce25.png
[06686373aed340cda92d8ecc9b580741.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d9c4574eb1334c6dafb7b1cba758a500.png
[80f5583cdb2945dc9f00135679a05d28.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2cf36ac7e12e4f29802be6174d19b639.png
[480fb626a6df4231b24edf5469023fd3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/33508079ddc947ecb7849426f8449fc3.png