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 
  }, 
}) 

（编辑：湖南网）

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