场景
应用中本身存在一个商品组件,如下:
显示商品的基础信息变化
在应用开发的过程中,为商品 增加 了一个失效状态。UI设计图如下:
设计思路
从需求和UI上来看,新增的失效状态,对原组件的功能做了增加而不是修改,不影响原组件的功能,适用于装饰器模式。
装饰器模式
装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。
这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能。
我们通过下面的实例来演示装饰器模式的用法。其中,我们将把一个形状装饰上不同的颜色,同时又不改变形状类。
介绍
意图:动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为灵活。
主要解决:一般的,我们为了扩展一个类经常使用继承方式实现,由于继承为类引入静态特征,并且随着扩展功能的增多,子类会很膨胀。
何时使用:在不想增加很多子类的情况下扩展类。
如何解决:将具体功能职责划分,同时继承装饰者模式。
应用实例: 1、孙悟空有 72 变,当他变成"庙宇"后,他的根本还是一只猴子,但是他又有了庙宇的功能。 2、不论一幅画有没有画框都可以挂在墙上,但是通常都是有画框的,并且实际上是画框被挂在墙上。在挂在墙上之前,画可以被蒙上玻璃,装到框子里;这时画、玻璃和画框形成了一个物体。
优点:装饰类和被装饰类可以独立发展,不会相互耦合,装饰模式是继承的一个替代模式,装饰模式可以动态扩展一个实现类的功能。
缺点:多层装饰比较复杂。
使用场景: 1、扩展一个类的功能。 2、动态增加功能,动态撤销。
注意事项:可代替继承。
原组件代码
index.wxml
<view style="border: 1rpx solid red; padding: 10rpx;">
<image src="{{goods.url}}"></image>
<view>名称:{{goods.name}}</view>
<view>规格:{{goods.sku}}</view>
<view wx:if="{{type === 'member'}}">价格:{{goods.price * 0.7}}元</view>
<view wx:elif="{{type === 'activity'}}">价格:{{goods.price * 0.8}}元</view>
<view wx:else>价格:{{goods.price}}元</view>
</view>
装饰器代码
index.wxml
<view class="container">
<view class="wrapper" wx:if="{{wrapped}}">
<view style="color:{{title.color}};font-size:{{title.fontSize}};">{{title.text}}</view>
</view>
<slot />
</view>
index.js
// components/decorator/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
wrapped: {
type: Boolean,
value: true
},
title: {
type: Object,
value: {
text: '已抢光',
color: 'white',
fontSize: '26rpx'
}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
具体代码看demo
demo地址
通过动态地传入属性,来控制deractor里面的内容,没有修改原组件,但是完美地实现需求,这就是《装饰器模式》的魅力吧!