看看用TypeScript怎样实现常见的设计模式,顺便复习一下。

学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想记住就好。

这里尽量用原创的,实际中能碰到的例子来说明模式的特点和用处。

装饰模式 Decorator

特点:在不改变接口的情况下,装饰器通过组合方式引用对象,并由此在保持对象原有功能的基础上给对象加上新功能。

用处:当需要不影响现有类并增加新的功能时,可以考虑装饰模式,它可以动态透明的给对象增加功能。

注意:与继承的优劣。

下面用TypeScript简单实现一下装饰模式:

现在有一辆小轿车,加速到100km/h需要10秒:

interface Movable{
accelerate();
} class Car implements Movable{
accelerate(){
console.log('加速到100km/h需要10秒');
}
}

现在想改装下,提高加速度,加个涡轮增压器。

class TurboCharger{
use(){
console.log('使用涡轮增压');
}
} class RefittedCar implements Movable{
construct(private car: Car){
} turboCharger = new TurboCharger(); accelerate(){
this.car.accelerate();
this.turboCharger.use();
console.log('加速到100km/h需要5秒');
}
} let refitterCar: Movable = new RefittedCar(new Car()); refitterCar.accelerate(); //输出:
加速到100km/h需要10秒
使用涡轮增压
加速到100km/h需要5秒

这样改装后的车用的还是原来的接口,但新对象却可以在保持原对象的功能基础上添加新的加速功能。

代码实现的特点主要还是在于使用同样接口,并在新对象里有对原对象的引用,这样才能使用原对象的功能。

上面的功能其实通过继承也很容易做到:

class TurboCharger{
use(){
console.log('使用涡轮增压');
}
} class RefittedCar extends Car{
turboCharger = new TurboCharger(); accelerate(){
super.accelerate();
this.turboCharger.use();
console.log('加速到100km/h需要5秒');
}
} let refitterCar: Movable = new RefittedCar();
refitterCar.accelerate(); //输出同样是:
加速到100km/h需要10秒
使用涡轮增压
加速到100km/h需要5秒

用哪个好呢?对比看下各自的优缺点:(装饰器用的是组合)

继承的优点是 直观,容易理解,缺点是继承链太长的话将很难维护,并且耦合度较高,相对死板,不够灵活。

组合的优点是 灵活,但如果装饰器本身也比较多且复杂时,代码的复杂度也会增加不少。

就我个人来说在这种场景下还是用组合比较舒服,不是很喜欢在已经使用的类上继承出子类。

接上面的例子,有个皮卡也要增加加速功能,继承的话又得再实现一个皮卡子类,而用装饰模式的话使用时传进来就好了,本身不需要做任何更改。

当然,如果是从新设计,改下接口的话可能会选继承,毕竟直观很多,以后的需求有改动时再重构就好了,代码保持简单,怎么简单怎么来,所谓组合优于继承也要根据实际情况来定夺。

代理模式 Proxy

特点:在对象前面加了一层,外部需要通过这层代理来操作原对象,代理可以加一些控制来过滤或简化操作。

用处:当对象不希望被外部直接访问时可以考虑代理模式,典型的有远程代理、保护代理、透明代理、虚拟代理等。

注意:与外观、装饰器模式的区别。

远程代理:在Visual Studio里很容易用到,Web Reference,直接把web service当本地引用使用。

保护代理:通常用来对一个对象做权限控制。

虚拟代理:做web页面时对图像经常使用虚拟代理,看不到的图像先用个统一的图像替代,页面滑到哪就加载到哪,省资源。

下面用TypeScript简单实现一下远程代理模式:

数据接口:

interface DataService{
getData(): string | Promise<string>;
}

在server端的远程服务:

class RemoteService implements DataService{
getData(): string{
return 'get remote data';
}
}

假设一个Reqeuster类,可以取server端数据:

class Requester{
Request(): Promise<string>{
return Promise.resolve(new RemoteService().getData()); //这里本来应该从网络取,现在只是演示一下
}
}

本地代理:

class DataProxy implements DataService{

    async getData(): string{
return await new Requester().Request();
}
} function isPromise(p: string | Promise<string>): p is Promise<string> { //用来判断是否是promise
return (<Promise<string>>p).then !== undefined;
} let dataService: DataService = new DataProxy();
let data = dataService.getData(); if(isPromise(data)){
data.then(o=>console.log(o));
} else {
console.log(data);
} //输出
get remote data

DataProxy和远程的RemoteService使用同样的接口,client像调用本地功能一样通过DataProxy使用远程功能。

代理模式与外观模式的差别在于:

代理和被代理使用同一抽象,并且代理着重于访问控制。

外观则着重于简化原本复杂的操作,并在此基础上提取新抽象。

代理模式与装饰器模式的差别在于:

代理的目的一般不是为了增加新功能而在于访问控制,同时代理通常是自己来创建被代理对象。

装饰器则着重于增加新功能,且被装饰对象通常是作为引用传给装饰器的。

TypeScript设计模式之装饰、代理的更多相关文章

  1. 用过滤器和装饰者设计模式(静态代理)解决getParameter乱码问题

    post的乱码问题比较好解决,这里主要是对get请求的乱码做处理 解决思路:增强request对象的getParameter方法,使之 getParameter  直接获取到的就是解决乱码后的数据 有 ...

  2. Java 设计模式泛谈&装饰者模式和单例模式

    设计模式(Design Pattern) 1.是一套被反复使用.多人知晓的,经过分类编目 的 代码设计经验总结.使用设计模式是为了可重用代码,让代码更容易维护以及扩展. 2.简单的讲:所谓模式就是得到 ...

  3. Java设计模式之《代理模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6525527.html 代理模式算是我接触较早的模式,代理就是中介,中间人.法律上也有代理, ...

  4. Java设计模式系列-装饰器模式

    原创文章,转载请标注出处:<Java设计模式系列-装饰器模式> 一.概述 装饰器模式作用是针对目标方法进行增强,提供新的功能或者额外的功能. 不同于适配器模式和桥接模式,装饰器模式涉及的是 ...

  5. python设计模式之装饰器详解(三)

    python的装饰器使用是python语言一个非常重要的部分,装饰器是程序设计模式中装饰模式的具体化,python提供了特殊的语法糖可以非常方便的实现装饰模式. 系列文章 python设计模式之单例模 ...

  6. Java设计模式 - - 单例模式 装饰者模式

    Java设计模式 单例模式 装饰者模式 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 静态代理模式:https://www.cnblogs.com/StanleyBlogs/p/1 ...

  7. Java设计模式:Proxy(代理)模式

    概念定义 代理模式是一种使用代理对象来执行目标对象的方法并在代理对象中增强目标对象方法的一种设计模式. 使用代理模式的原因有: 中介隔离作用:在某些情况下,一个客户类不想或者不能直接引用一个委托对象, ...

  8. C#中的 Attribute 与 Python/TypeScript 中的装饰器是同个东西吗

    前言 最近成功把「前端带师」带入C#的坑(实际是前端带师开始从cocos转unity游戏开发了) 某天,「前端带师」看到这段代码后问了个问题:[这个是装饰器]? [HttpGet] public Re ...

  9. 实践GoF的23种设计模式:装饰者模式

    摘要:装饰者模式通过组合的方式,提供了能够动态地给对象/模块扩展新功能的能力.理论上,只要没有限制,它可以一直把功能叠加下去,具有很高的灵活性. 本文分享自华为云社区<[Go实现]实践GoF的2 ...

随机推荐

  1. java常用设计模式三:原型模式

    在说原型模式之前先说一下浅拷贝和深拷贝的概念 一.浅拷贝和深拷贝 1.浅拷贝 在java中,对象创建后需要有一个引用变量来指向该对象实际的地址空间,也就是说引用变量与对象实体是两个不同的数据体.在Ob ...

  2. vue中moudles的作用及使用方法

    1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个 ...

  3. 解决Linux下IDEA无法使用ibus输入法的问题和tip乱码

    一:可以先按网上的配置/etc/profile里的输入法的一些参数,我是先配置了这些参数的,但是输入法还是没用,后来一直没管它了,今天用了一些方式可以了但不敢保证不需要先配置那些参数: 二:情况:开启 ...

  4. sas和ssd盘写入数据效率对比

    表结构如下: CREATE TABLE `tab_AAA` (  `id` bigint(20) NOT NULL AUTO_INCREMENT ,  `customer_no` varchar(32 ...

  5. Gym-101102-K-Topological Sort

    K. Topological Sort 题面 Consider a directed graph G of N nodes and all edges (u→v) such that u < v ...

  6. 11-DOM介绍

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  7. Apache 2.4.28的安装

    Apache 2.4.28的安装 1.安装Apache 1.1下载Apache网址:http://httpd.apache.org/ [root@localhost ~]# mkdir -p /roo ...

  8. 20171123IdleHandler

    在Android中,我们可以处理Message,这个Message我们可以立即执行也可以delay 一定时间执行.Handler线程在执行完所有的Message消息,它会wait,进行阻塞,知道有心的 ...

  9. Matlab绘图添加直角坐标轴

    绘制y=x^2,并添加直角坐标轴. clear;clc;close all %% 绘制方程 x = -10:0.01:10; figure; y = x.^2-30; plot(x,y,'k','li ...

  10. 利用putty在window下控制linux的terminal、ftp传输

    google搜索putty,可能要FQ才能进入官方网站下载. 首先将虚拟机下的linux的网络适配器设置成桥接模式,并且将linux系统的firewall和iptables(防火墙关闭). firew ...