JavaScript设计模式--外观、享元、策略

$\bullet$ 外观模式

$\ast$ 目标

隐藏子模块交互关系

$\ast$ 应用场景

组件库

$\ast$ 代码示例

一个通用组件往往由不同的子组件拼装而成，例如table，它至少需要包含tr、td、th等基础元素，如果还需要多选全选能力，那就还需要用到checkbox元素，如果要增加操作列，那可能还需要button。将这些元素进行组合后对外提供的table就是外观的具象化，我们只需要拿table使用即可

$\bullet$ 策略模式

$\ast$ 目标

优化if...else或switch...case（并非剔除）

$\ast$ 应用场景

表单校验

$\ast$ 代码示例

现在会员制度大行其道，干个啥都要开会员，不同的会员购买同一件商品时所享受的折扣可能还不一样

（一般来说，当用户登录后，是会在token中保存用户的身份信息的，这种是可以直接通过set的方式直接设置并委托给指定的策略对象处理。但是这并不是说就直接剔除了if...else，更多的是为了抽离if.else下的算法逻辑）

$\bullet$ 享元模式

$\ast$ 目标

共享数据，降低内存占用

$\ast$ 应用场景

文件上传

$\ast$ 代码示例

对于new操作而言，每次创建的都是一个新的引用

那么对于一个ul列表来说，大概是这样的

这将会在内存中创建20个不同的内存地址，但是实际上，每一个列表行的元素类型都是li，只有其内容是不一样的

根据享元模式定义，可以将元素类型划分为内部状态，而li的内容则作为外部状态根据场景变化

（内部状态的组合决定了系统中对象的个数，在该示例中内部状态有ul和li，故node实例也为两个）

最后编辑于：2021.12.22 21:13:41