JavaScript设计模式之装饰者模式介绍_javascript技巧

装饰者模式说明

说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向对象类里,一般以实现同一个接口(interface)来约束实现;装饰类的要有对被装饰类的引用,用于在装饰类的相应方法,调用相应被装饰类的方法,然后对其进行修饰;

场景举例:

1>. 比如我们生活中的穿衣服, 一件衬衣,一件西装外套,一条裤子,一条领带,一双漂亮的皮鞋; 每多穿一件,都是对前面一件或全身的装饰;

2>. 比如我们有个类下的功能方法,可能用于写日志,可能用于用户登陆这样的功能,也许写入日志前需要获取当前操作者信息,或是登录成功后,写入一条日志;写入日志之前的额外操作,它的总体来说也还是一个写日志的目的;登孙成功后写日志,它总体上也是一个登录过程的操作信息;

因此装饰者模式用于实现,两者相似操作的一种场景;就是装饰者对被装饰者功能对象的扩展,本质还是原方法相同的功能范围;

实例源码

1. 被装饰者类

复制代码 代码如下:

function Wear() {
   
}

Wear.prototype.Shirt = function() {
    //穿了件衬衫
  console.log('穿上衬衫');
}

2. 装饰者类

复制代码 代码如下:

function Decorator(wear) {
    this.wear = wear;
}

Decorator.prototype.Shirt = function() {
    this.wear.Shirt();
    //穿了件衬衫后,我又加上了领带
}

3. 使用方法

复制代码 代码如下:

var wear = new Wear();
var decorator = new Decorator(wear);
decorator.Shirt();

这样就实现了对 Wear 穿衬衫这个功能对象的动态扩展装饰,你也不必知道原被装饰方法是如何执行,只要知道它的功能是什么就可以,然后知道我们要对其辅加的额外功能是什么就可以;

其他说明

装饰者模式,真正提现了面向对象方法的:对扩展开放,对修改关闭的原则;所有想要的功能方法,都是在没有修改[被装饰类Wear]在扩展[装饰者这个类Decorator]的情况下进行的;

装饰者模式的一个主要特点,就是装饰者对被装饰者的引用,以实现对被装饰者的无修改装饰;

模拟下:先穿衬衫,再穿领带,再穿西装的场景: 上面的被装饰者不变了:

2. 装饰者类:

复制代码 代码如下:

function Decorator(wear) {
    this.wear = wear;
}
Decorator.prototype.Shirt = function() {
    this.wear.Shirt(); //这里只穿衬衫;
}

3. 创建类似继承 Decorator 子类的 穿领带类与穿西装类

复制代码 代码如下:

function Decorator_Tie(decorator) {
    this.decorator = decorator;
}   
Decorator_Tie.prototype.Shirt = function() {
    this.decorator.Shirt(); //穿上衬衫
    console.log('再戴上领带');
}

function Decorator_Western (decorator) {
    this.decorator =  decorator;
}
Decorator_Western.prototype.Shirt = function() {
    this.decorator.Shirt();
    console.log('再穿上西装');
}

使用方法:

复制代码 代码如下:

//先穿上衬衫
var wear = new Wear();
var decorator = new Decorator(wear);
//decorator.Shirt();
//再戴上领带
var tie = new Decorator_Tie(decorator);
//tie.Shirt();
//再穿上西装
var western = new Decorator_Western(tie);
western.Shirt();

这就是一个穿衣服装饰的模拟例子;

时间: 2024-07-31 18:02:31

JavaScript设计模式之装饰者模式介绍_javascript技巧的相关文章

JavaScript设计模式之工厂方法模式介绍_javascript技巧

1. 简单工厂模式 说明:就是创建一个工厂类,里面实现了所对同一个接口的实现类的创建. 但是好像JavaScript 好像没有 接口 这号东西,所以我们去掉接口这个层; 当然,我们这里的 实现类 下的成员变量,方法应该都是一样的: 例如:这时举短信发送跟邮件发送的例子; 1>. 邮件发送[实现]类 复制代码 代码如下: function MailSender() {     this.to = '';     this.title = '';     this.content = ''; } M

JavaScript设计模式之抽象工厂模式介绍_javascript技巧

抽象工厂模式说明 1. 工厂方法模式的问题: 在工厂方法模式里,创建类都需要通过 工厂类,如果要扩展程序,就必须修改工厂类,这违背了闭包原则,对扩展开放,对修改关闭:对于设计有一定的问题. 2. 如何解决:就要用到抽象工厂模式,就是对功能类单独创建工厂类,这样就不必修改之前的代码,又扩展了功能. 3. 工厂模式其实就是对 实现同一接口的 实现类 的 统一 工厂方式创建调用,但 javascript 没有接口这号东西,所以就去掉这一层 实现,但位功能类的成员及方法都应当一样; 抽象工厂源码例子 1

学习JavaScript设计模式之装饰者模式_javascript技巧

有时我们不希望某个类天生就非常庞大,一次性包含许多职责.那么我们就可以使用装饰着模式. 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象. 装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链. 一.不改动原函数的情况下,给该函数添加些额外的功能 1. 保存原引用 window.onload = function() { console.log(1); }; var _onload = window.onload ||

JavaScript设计模式之代理模式介绍_javascript技巧

代理模式说明 说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. 在动态面向对象语言里,代理模式即起到控制修饰被代理类的作用,也对被代理类起到了充分的隐藏保护作用:被代理类只到我们需要时,才被间接初始化调用: 场景描述: 很常见到的就是租房子的例子,房客要租房子,房东要把房子租出去,但是房客跟房东都没怎么有空找房子或在家等着有人看房子,就一同去找房屋中介.房东把

JavaScript中setter和getter方法介绍_javascript技巧

javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

JavaScript设计模式之建造者模式介绍_javascript技巧

建造者模式说明 1. 将一个复杂对象的 构造 与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式. 2. 面向对象语言中的说明,主要角色: 1>. Builder 这个接口类,定义这个建造者[工人],统一的可操作的行为方式,它表示一个复杂的结构对象; 2>. ConcreteBuilder 用于创建[实现] Builder 各种形态的实例对象,来表示 Builder 不同的表示; 3>. Director 这个指挥者 用于指导 Builder 实例的执行过程跟形式,用于

JavaScript设计模式之单件模式介绍_javascript技巧

单件模式说明 1. 说明:单件模式,就是静态化的访问中已经实例化的对象,这个对象只能通过一个唯一的入口访问,已经实例或待实例化的对象:面向对象语言如Java, .Net C#这样的服务端动态语言里,能保证类的操作有顺的进行,避免并行操作使数据发生混乱的情况: 2. 单件模式的好处: 1>. 减少 new 的操作,以免加快内存频繁操作,占用内存: 2>. 尽量减少大系统的对象的开销: 3>. 就是上面说的,可以保障某些类型的操作有顺序准确的操作,以免并行处理引起的数据异常现象: 当然上面说

JavaScript设计模式之外观模式介绍_javascript技巧

外观模式说明 说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到几个子接口或子系统,而我们的某个功能,可能只需要这向个多个子接口中的一个或几个组成的顺序封装.如果是业务功能直接对应子接口或子系统的,可能要求开发人员对内部需要相当的了解:你可能需要去了解业务流程是怎么走,他的顺序是什么,等等.这即需要开发员了解业务,也使得客户端编程变得相当的复杂: 这里如果有一层

Javascript oop设计模式 面向对象编程简单实例介绍_javascript技巧

Javascript oop设计模式 面向对象编程 最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword: