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();

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

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

代理模式的利弊

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容