设计模式(5)——迭代器模式&状态模式&其他设计模式

2020-09-15 本文已影响0人 zzyo96

一、装饰器模式

介绍

顺序访问一个集合
使用者无需知道集合的内部结构（封装）

image.png

二、状态模式

介绍

一个对象又状态变化（如收藏/取消收藏）
每次状态变化都会触发一个逻辑
不能总是用If...else来控制，尤其在比较的多的情况下

image.png

一个切换红黄绿灯的例子

image.png

场景一有限状态机

image.png

import StateMachine from 'javascript-state-machine'
import $ from 'jquery'
console.log(StateMachine,333)

//初始化状态机模型
let fsm = new StateMachine({
  init:'收藏',
  transitions:[
    {
      name:'doStore',
      from:'收藏',
      to:'取消收藏'
    },
    {
      name:'deleteStore',
      from:'取消收藏',
      to:'收藏'
    }
  ],
  methods:{
  //  监听执行收藏
    onDoStore:function () {
      alert('收藏成功')
      updateText()
    },
  //  监听执行取消收藏
    onDeleteStore:function(){
      alert('取消收藏成功')
      updateText()
    }
  }
})

let $btn = $('#btn1')

$btn.click(function(){
  if(fsm.is('收藏')){
    fsm.doStore()
  }else{
    fsm.deleteStore()
  }
})

//更新按钮的文案
function updateText(){
  $btn.text(fsm.state)
}

//初始化文案
updateText()