前端应该知道的设计模式之-行为型

一、策略模式-适用于逻辑条件分支较多时(场景:商品活动定价，包含类型：预售价 - pre 大促价 - onSale 返场价 - back 尝鲜价 - fresh)

（1）if else 分支实现

// 按照不同活动类型计算商品价格
function calcPrice(tag, originPrice) {
  // 预热价：满 100 - 20，不满 100 打 9 折
  if(tag === 'pre') {
    if(originPrice >= 100) {
      return originPrice - 20
    } 
    return originPrice * 0.9
  }

  // 大促价：满 100 - 30，不满 100 打 8 折
  if(tag === 'onSale') {
    if(originPrice >= 100) {
      return originPrice - 30
    } 
    return originPrice * 0.8
  }

  // 返场价： 满 200 - 50，不叠加
  if(tag === 'back') {
    if(originPrice >= 200) {
      return originPrice - 50
    }
    return originPrice
  }

  // 尝鲜价：直接打 5 折
  if(tag === 'fresh') {
     return originPrice * 0.5
  }
}

*思考：一个 function 里面，处理了四坨逻辑导致：函数的逻辑太胖。

*缺点：

（1）违背了“单一功能”原则

• 若其中一行代码出了 Bug，那整个逻辑都会崩坏；
• 出了 Bug 很难定位到底是哪个代码块；
• 单个能力很难被抽离复用
• …

（2）违背了“开放封闭”原则

• 若需要再添加一种活动类型：满100 - 50，则必须要动原有逻辑体。

（2）单一功能改造：分离出运算模块

// 预热价
function prePrice(originPrice) {
  if(originPrice >= 100) {
    return originPrice - 20
  } 
  return originPrice * 0.9
}

// 大促价
function onSalePrice(originPrice) {
  if(originPrice >= 100) {
    return originPrice - 30
  } 
  return originPrice * 0.8
}

// 返场价
function backPrice(originPrice) {
  if(originPrice >= 200) {
    return originPrice - 50
  }
  return originPrice
}

// 尝鲜价
function freshPrice(originPrice) {
  return originPrice * 0.5
}

// 新人价
function newUserPrice(originPrice) {
  if(originPrice >= 100) {
    return originPrice - 50
  }
  return originPrice
}

function calcPrice(tag, originPrice) {
  // 处理预热价
  if(tag === 'pre') {
    return prePrice(originPrice)
  }
  // 处理大促价
  if(tag === 'onSale') {
    return onSalePrice(originPrice)
  }

  // 处理返场价
  if(tag === 'back') {
    return backPrice(originPrice)
  }

  // 处理尝鲜价
  if(tag === 'fresh') {
     return freshPrice(originPrice)
  }

  // 处理新人价
  if(tag === 'newUser') {
     return newUserPrice(originPrice)
  }
}

*优点：符合“单一功能“原则；各运算模块独立出来，更便于定位问题和功能复用；

*缺点：不符合"对扩展开放，对修改封闭"的原则，不便于继续进行扩展。

（3）扩展性改造：使用对象映射收敛

// 价格处理器，将各种活动类型封装到对象中
const priceProcessor = {
  pre(originPrice) {
    if (originPrice >= 100) {
      return originPrice - 20;
    }
    return originPrice * 0.9;
  },
  onSale(originPrice) {
    if (originPrice >= 100) {
      return originPrice - 30;
    }
    return originPrice * 0.8;
  },
  back(originPrice) {
    if (originPrice >= 200) {
      return originPrice - 50;
    }
    return originPrice;
  },
  fresh(originPrice) {
    return originPrice * 0.5;
  },
};

function calcPrice(tag, originPrice) {
    return priceProcessor[tag](originPrice)
}

*思考：

满足“单一职责”可以提升逻辑的纯粹性，有助于代码复用、问题范围收敛、问题定位；

满足“开放闭合原则”，在增强代码稳定性的同时也提升了扩展性。

二、观察者模式（发布-订阅模式）

（1）定义：观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。其中一定存在两个角色：发布者、订阅者，其中发布者负责消息发布，订阅者负责消息订阅。

（2）创建发布者、订阅者基础类

// 创建一个发布者类
class Publisher{
    constructor() {
        this.observers = []
        console.log('Publisher created')
    }
    // 添加订阅者
    add(observer) {
        this.observers.push(observer)
        console.log('publisher add')
    }
    // 移除订阅者
    remove(observer) {
        this.observers.forEach((item, i) => {
            if(item === observer) {
                this.observers.splice(i, 1)
            }
        })
    }

    // 通知所有订阅者
    notify() {
        this.observers.forEach((observer) => {
        	// 调用订阅者update方法，传入发布者
            observer.update(this)
        })
        console.log('publisher notify')
    }
}

// 创建订阅者类
class Observer{
	constructor() {
		console.log('observer created')
	}
	update() {
		console.log('observer update')
	}
}

（3）使用发布者、订阅者基类，创建一个产品经理和开发团队的类,切合两者之间的沟通场景

// 产品经理发布者
class PrdPublisher extends Publisher{
    constructor() {
        super()
        // 初始化需求文档状态
        this.prdState = null
        // 初始化订阅者
        this.obervers = []
    }
    
    // 获取需求文档的状态
    getState() {
    	return this.prdState
    }
    
    // 修改需求文档的状态
    setState(state) {
    	this.prdState = state
    	// 需求更新了，通知开发者们
    	this.notify()
    }
}

// 开发人员订阅者
class DeveloperObserver extends Observer {
	constructor() {
		super()
		// 初始化需求文档
		this.prdState = {}
		console.log('DeveloperObserver created')
	}
	// 重写订阅的方法
	update(publisher) {
		this.prdState = publisher.getDate()
		// 调用工作函数
		this.work()
	}
	// 处理业务
	work() {
		const prd = this.prdState
		console.log('996不能财富自由，但也不要选择躺平', prd)
	}
}

（4）干活了

// 创建两个开发者实例
const developerA = new DeveloperObserver()
const developerB = new DeveloperObserver()

// 创建产品经理实例
const liuqian = new PrdPublisher()

// 需求文档
const prd = {}

// 产品经理拉群
liuqian.add(developerA)
liuqian.add(developerB)

// 产品经理发布需求信息
liuqian.setState(prd)

三、Vue响应式原理

（1）vue响应式系统流程图

*阐释：

（1）在 Vue 中，每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖。

（2）当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

（2）vue实现响应式的主要角色

• observer（监听器）：承担数据的监听和发布任务。

• watcher（订阅者）：observer将数据发布给watcher，一个真正的订阅者，订阅到数据变化后就去更新视图。

• complie（编译器）：扫描和解析每个old ast节点元素、初始化指令、订阅者创建的“脏活”。

• 过程：

  

（3）源码

// observe方法遍历并包装对象属性
function observe(target) {
    // 若target是一个对象，则遍历它
    if(target && typeof target === 'object') {
        Object.keys(target).forEach((key)=> {
            // defineReactive方法会给目标属性装上“监听器”
            defineReactive(target, key, target[key])
        })
    }
}

// 定义defineReactive方法
function defineReactive(target, key, val) {
    // 属性值也可能是object类型，这种情况下需要调用observe进行递归遍历
    observe(val)
    // 为当前属性安装监听器
    Object.defineProperty(target, key, {
         // 可枚举
        enumerable: true,
        // 不可配置
        configurable: false, 
        get: function () {
            return val;
        },
        // 监听器函数
        set: function (value) {
            console.log(`${target}属性的${key}属性从${val}值变成了了${value}`)
            val = value
        }
    });
}

​ // 定义订阅者类Dep
​ class Dep {
​ constructor() {
​ // 初始化订阅队列
​ this.subs = []
​ }
​
​ // 增加订阅者
​ addSub(sub) {
​ this.subs.push(sub)
​ }
​
​ // 通知订阅者（是不是所有的代码都似曾相识？）
​ notify() {
​ this.subs.forEach((sub)=>{
​ sub.update()
​ })
​ }
​ }
​

// 重写defineReactive的setter
function defineReactive(target, key, val) {
    const dep = new Dep()
    // 监听当前属性
    observe(val)
    Object.defineProperty(target, key, {
        set: (value) => {
            // 通知所有订阅者
            dep.notify()
        }
    })
}

四、迭代器模式（场景：应对ES6之前遍历类数组; 类似vue-router路由守卫场景中，满某个条件就触发下一步操作）

（1）集合类型数据结构

• ES6之前：Array（数组）、Object（对象）
• ES6之后：Array（数组）、Object（对象）、Map、Set

*注意：

（1）以上四种数据结构各自有着自己特别的内部实现，但为了以同样的一套规则去遍历它们，所以ES6同时推出了一套统一的接口机制——迭代器（Iterator）。

（2）ES6约定，任何数据结构只要具备Symbol.iterator属性，就可以被遍历。说白了就是被for…of…循环和迭代器的next方法遍历。 其实，for…of…的底层就是对next方法的反复调用。

（2）ES6

function *iteratorGenerator() {    yield '川建国'    yield '拜登'    yield '川建国'}const iterator = iteratorGenerator()iterator.next() {done: false, value:'川建国'}iterator.next()iterator.next()

（3）手动构建一个迭代器

function iteratorGenerator(list) {    // 异常处理省略    let idx = 0    const len = list.length    return {        next: () => {            const done = idx >= len            const value = !done ? list[idx++] : undefined            return {                value,                done            }        }    }}const  iterator = iteratorGenerator(['川建国', '拜登', '川建国'])iterator.next()iterator.next()iterator.next()

*思考：

（1）设计模式不需要生搬硬套，更重要的是有优化、重构代码的思维；

（2）在组件及较为复杂业务场景的开发时，合理使用设计模式可以显著提升需求实现的效率、质量。