Typescript 代理模式（Proxy）

标签： 前端 设计模式 代理模式 typescript proxy

---

请仔细阅读下面代码，理解其中的设计理念。

proxy.jpg

代理模式

代理模式: 代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。

实际场景

实体创建比较费时：在等待期间给出提示；
本体创建出来占用内存过大： 等到用到这个实体的时候再去创建。
系统的权限控制： 用来过滤请求

代理模式的结构

• 抽象角色：通过接口或抽象类声明真实角色实现的业务方法。
• 代理角色：实现抽象角色，是真实角色的代理，通过真实角色的业务逻辑方法来实现抽象方法，并可以附加自己的操作。
• 真实角色：实现抽象角色，定义真实角色所要实现的业务逻辑，供代理角色调用

代理模式的例子

现在我们要创建一个图书管理系统。

• 管理系统初始化时间较长。
• 普通用户只能查找，管理员可以添加和删除。

管理系统接口

/* i-book-library.ts */
export default interface IBookLibrary {
    getBook: (bookName: string) => any;
    addBook: (bookName: string) => any;
    removeBook: (bookName: string) => any;
}

真实角色实现接口

/* book-library.ts */
import IBookLibrary from './i-book-library';

export default class BookLibrary implements IBookLibrary{
    // 实例可能占用内存较多
    private static bookList: string[];

    constructor() {
        if (!BookLibrary.bookList) {
            BookLibrary.bookList = [];
            // 创建实例时间长
            const time = Date.now() + 10000;
            while (Date.now() < time) {};
            BookLibrary.bookList.push('Harry Potter');
            BookLibrary.bookList.push('Animal Spirits');
            BookLibrary.bookList.push('Tuesdays with Morrie');
        }
    }

    public getBook(bookName: string) {
        const index = BookLibrary.bookList.findIndex(book => book === bookName);
        if (index !== -1) {
            return BookLibrary.bookList[index];
        } else {
            throw new Error(`can not find ${bookName}`);
        }
    }

    public addBook(bookName: string) {
        const index = BookLibrary.bookList.findIndex(book => book === bookName);
        if (index !== -1) {
            throw new Error(`already has ${bookName}`);
        } else {
            BookLibrary.bookList.push(bookName);
        }
    }

    public removeBook(bookName: string) {
        const index = BookLibrary.bookList.findIndex(book => book === bookName);
        if (index !== -1) {
            BookLibrary.bookList.splice(index, 1);
        } else {
            throw new Error(`can not find ${bookName}`);
        }
    }
}

代理角色

import BookLibrary from './book-library';
import IBookLibrary from './i-book-library';

export default class BookProxy implements IBookLibrary {
    private readonly bookLibrary: BookLibrary;
    private readonly isAdmin: boolean;

    constructor(isAdmin?: boolean) {
        this.isAdmin = isAdmin;
        // 给出提示消息
        console.log('正在创建中，请等待');
        this.bookLibrary = new BookLibrary();
        console.log('创建完成');
    }

    public getBook(bookName: string) {
        return this.bookLibrary.getBook(bookName);
    }

    public addBook(bookName: string) {
        if (!this.isAdmin) {
            throw new Error('Sorry, you have no right to operate');
        }
        return this.bookLibrary.addBook(bookName);
    }

    public removeBook(bookName: string) {
        if (!this.isAdmin) {
            throw new Error('Sorry, you have no right to operate');
        }
        return this.bookLibrary.removeBook(bookName);
    }
}

客户端调用

/* client.ts */
import BookProxy from './book-proxy';

export default class Client {
    public static userTest() {
        const proxy = new BookProxy();
        return proxy.getBook('Animal Spirits');
    }

    public static adminTest() {
        const proxy = new BookProxy(true);
        proxy.getBook('Animal Spirits');
        proxy.addBook('Lord of the flies');
    }
}
//Client.userTest();

Client.adminTest();

代理模式和装饰者模式的区别

代理模式和装饰者模式都是对真实对象进行修饰。
代理模式一般不会添加额外的方法，最多会加一些权限校验的方法。而装饰者模式就是为了对真实对象扩展而存在的。

代理模式的利弊

利：代理模式可以推迟大内存对象的创建到其他元素加载完毕之后，这往往能给用户带来一种速度大幅提升的感觉。
在较长时间的操作增加“正在加载等提示”。将权限系统的权限判断和实际操作分离开。
弊：将大对象推迟创建后，用户在第一次使用时会感觉很慢而大吃一惊。在不恰当的场合使用会增加无谓的复杂性，还不如直接访问本体轻松。