JavaScript 的一些常用设计模式

原先有个功能是实现字符串反转(reverseString)，那么在不改变 reverseString 的现有逻辑，我们可以使用缓存代理模式实现性能的优化，当然也可以在值改变的时候去处理下其他逻辑，如 Vue computed 的用法。

function reverseString(str) { 
  return str 
    .split('') 
    .reverse() 
    .join('') 
} 
const reverseStringProxy = (function() { 
  const cached = {} 
  return function(str) { 
    if (cached[str]) { 
      return cached[str] 
    } 
    cached[str] = reverseString(str) 
    return cached[str] 
  } 
})() 

订阅发布模式

订阅发布使前端常用的数据通信方式、异步逻辑处理等等，如 React setState 和 Redux 就是订阅发布模式的。

但是要合理的使用订阅发布模式，否则会造成数据混乱，redux 的单向数据流思想可以避免数据流混乱的问题。

例子

class Event { 
  constructor() { 
    // 所有 eventType 监听器回调函数（数组） 
    this.listeners = {} 
  } 
  /** 
   * 订阅事件 
   * @param {String} eventType 事件类型 
   * @param {Function} listener 订阅后发布动作触发的回调函数，参数为发布的数据 
   */ 
  on(eventType, listener) { 
    if (!this.listeners[eventType]) { 
      this.listeners[eventType] = [] 
    } 
    this.listeners[eventType].push(listener) 
  } 
  /** 
   * 发布事件 
   * @param {String} eventType 事件类型 
   * @param {Any} data 发布的内容 
   */ 
  emit(eventType, data) { 
    const callbacks = this.listeners[eventType] 
    if (callbacks) { 
      callbacks.forEach((c) => { 
        c(data) 
      }) 
    } 
  } 
} 
 
const event = new Event() 
event.on('open', (data) => { 
  console.log(data) 
}) 
event.emit('open', { open: true }) 

观察者模式

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

Vue 的数据驱动就是使用观察者模式，mbox 也是使用观察者模式。

例子

模仿 Vue 数据驱动渲染模式(只是类似，简单的模仿)。

首先使用 setter 和 getter 监听到数据的变化：

const obj = { 
  data: { description: '' }, 
} 
 
Object.defineProperty(obj, 'description', { 
  get() { 
    return this.data.description 
  }, 
  set(val) { 
    this.data.description = val 
  }, 
}) 

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!