设计模式概念-----与装饰者模式

最新推荐文章于 2021-02-19 20:51:16 发布

shuimoY

最新推荐文章于 2021-02-19 20:51:16 发布

阅读量186

点赞数

设计模式主要是基于以下的面向对象设计原则。

对接口编程而不是对实现编程。

优先使用对象组合而不是继承。

设计模式的六大原则

1、开闭原则（Open Close Principle）

开闭原则的意思是：对扩展开放，对修改关闭。在程序需要进行拓展的时候，不能去修改原有的代码，实现一个热插拔的效果。简言之，是为了使程序的扩展性好，易于维护和升级。想要达到这样的效果，我们需要使用接口和抽象类，后面的具体设计中我们会提到这点。

2、里氏代换原则（Liskov Substitution Principle）

里氏代换原则是面向对象设计的基本原则之一。里氏代换原则中说，任何基类可以出现的地方，子类一定可以出现。LSP 是继承复用的基石，只有当派生类可以替换掉基类，且软件单位的功能不受到影响时，基类才能真正被复用，而派生类也能够在基类的基础上增加新的行为。里氏代换原则是对开闭原则的补充。实现开闭原则的关键步骤就是抽象化，而基类与子类的继承关系就是抽象化的具体实现，所以里氏代换原则是对实现抽象化的具体步骤的规范。

3、依赖倒转原则（Dependence Inversion Principle）

这个原则是开闭原则的基础，具体内容：针对接口编程，依赖于抽象而不依赖于具体。

4、接口隔离原则（Interface Segregation Principle）

这个原则的意思是：使用多个隔离的接口，比使用单个接口要好。它还有另外一个意思是：降低类之间的耦合度。由此可见，其实设计模式就是从大型软件架构出发、便于升级和维护的软件设计思想，它强调降低依赖，降低耦合。

5、迪米特法则，又称最少知道原则（Demeter Principle）

最少知道原则是指：一个实体应当尽量少地与其他实体之间发生相互作用，使得系统功能模块相对独立。

6、合成复用原则（Composite Reuse Principle）

合成复用原则是指：尽量使用合成/聚合的方式，而不是使用继承。

什么是装饰者模式

今天我们来讲另外一个非常实用的设计模式：装饰者模式。这个名字听上去有些莫名其妙，不着急，我们先来记住它的一个别名：包装器模式。

我们记着这两个名字来开始今天的文章。

首先还是上《设计模式》一书中的经典定义：

动态地给一个对象添加一些额外的职责。
就增加功能来说，装饰者模式相比生成子类更为灵活。

我们来分析一下这个定义。

给对象添加一些新的职责，我们很容易想到创建子类来继承父类，然后在子类上增加额外的职责。

那什么是动态地呢？应该就是说这些新添加的职责在类一开始创建的时候我们并不知道，而是在使用过程根据需要而添加的。

相比生成子类更为灵活,这句话让装饰者模式和子类继承赤裸裸的刀兵相见了。没有对比就没有伤害，那我们就用例子来验证这句话。

传统面向对象的实现

我们假设你是以为已经走上人生巅峰的汽车生产商，你的公司生产各种用途的汽车，某一天一个客户下单了四种汽车，分别是家用轿车、SUV、旅行车和跑车。我们很轻松地像下面这样进行交付了。

var Car = function(){}

Car.prototype.start = function(){
    console.log("轰轰轰，启动正常!")
}

var Sedan = new car();// 小轿车
var Suv = new Car();// SUV
var Wagon=new Car();// 旅行车
var Roadster=new Car();// 跑车
//是不是又学会了几个英文单词？

过了几天客户找来了，说最近人们爱上了西藏自驾游，人们都希望能够选装一些方便越野和载物的功能，比如加装雪地胎、行李箱，升高底盘。

有经验的你满口答应下来，这个简单，于是你交付了下面的代码：

//SUV
Suv.prototype.changeTire = function(){
    console.log("我换了雪地胎");
} 
Suv.prototype.addHeight = function(){
     console.log("我升高了底盘");
}
Suv.prototype.addBox = function(){
    console.log("我安装了行李箱");
}
//Wagon
Wagon.prototype.changeTire = function(){
    console.log("我换了雪地胎");
} 
Wagon.prototype.addHeight = function(){
     console.log("我升高了底盘");
}
Wagon.prototype.addBox = function(){
    console.log("我安装了行李箱");
}
//Sedan
Sedan.prototype.changeTire = function(){
    console.log("我换了雪地胎");
} 
Sedan.prototype.addHeight = function(){
     console.log("我升高了底盘");
}
Sedan.prototype.addBox = function(){
    console.log("我安装了行李箱");
}

// 使用
var suv = new Suv();
suv.changeTire();
suv.addHeight();
suv.addBox();
suv.start();
...

你增加了多少种特性？3x3=9种。

你又问，我直接把这三个特性加在Car上不行吗？就不用这么麻烦了。

当然不行，因为我们还有一种车：Roadster跑车。

你能想象法拉利换了雪地胎背上行李箱升高底盘是个什么死样子吗？这么干的人肯定疯了。

如果我们把特性一股脑加在Car上，就避免不了这种情况的发生。

这个时候，就体现出子类继承的不灵活之处。

下面，装饰者模式就要正式登场了。

var Car=function (){}

Car.prototype.start=function(){
    console.log("轰轰轰，启动正常！")
}

// 创建装饰类（包装类）

var ChangeTireDec=function(car){
    this.car=car;
}
var AddHeightDec=function(car){
    this.car=car;
}
var AddBoxDec=function(car){
    this.car=car;
}

// 装饰类具有和Car同样的特性，只不过额外执行了一些其他的操作

ChangeTireDec.prototype.start=function(){
    console.log("我换了雪地胎");
    this.car.start();
}

AddHeightDec.prototype.start=function(car){
    console.log("我升高了底盘");
    this.car.start();
}
AddBoxDec.prototype.start=function(car){
    console.log("我安装了行李箱");
    this.car.start();
}

// 使用
var suv=new Suv();

suv=new ChangeTireDec(suv);
suv=new AddHeightDec(suv);
suv=new AddBoxDec(suv);

suv.start();

上面的代码你增加了几种特性？只有三种！而且不管你是给SUV还是Wagon还是Sedan加装，都不需要再增加特性的代码。

这，就是装饰者模式的优势所在。

现在我们再回过头来看看GoF的定义：

动态地给一个对象添加一些额外的职责。
就增加功能来说，装饰者模式相比生成子类更为灵活。

怎么样，是不是如同1+1=2一样简单了？现在你应该也明白了为什么装饰者模式又叫座包装器模式了。因为它将类的原有特性包装起来，添加其他的特性，就像一个箱子一样。而且实现过程中，还满足了封闭-开放原则。

JavaScript的实现

上面的例子中，我们是模拟了传统的面向对象语言来解释什么是装饰者模式。我们都知道，要动态改变JavaScript对象非常容易，可以向操作变量一个操作对象，我们再来改写下上面的例子，让它更javasripty

var car = {
    start: function(){
        console.log("轰轰轰，正常启动！");
    }
}

var ChangeTireDec = function(){
        console.log("我换了雪地胎");
}
var AddHeightDec = function(){
    console.log("我升高了底盘");
}
var AddBoxDec = function(){
     console.log("我安装了行李箱");
}

var start1 = car.start;
car.start=function(){
    ChangeTireDec();
    start1();
}

var start2=car.start;
car.start = function(){
    AddHeightDec();
    start2();
}

var start3=car.start();
car.start = function(){
    AddBoxDec();
    start3();
}

// 执行

car.start();