微信小程序装饰器模式实践

1,479 阅读3分钟

场景

应用中本身存在一个商品组件,如下:

显示商品的基础信息

变化

在应用开发的过程中,为商品 增加 了一个失效状态。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里面的内容,没有修改原组件,但是完美地实现需求,这就是《装饰器模式》的魅力吧!