前人总结的代码最佳实践。
设计模式是一套被反复使用、多人知晓的、经过分类的、代码设计经验的总结。
工程师基础（内力，决定走多远）
算法和数据结构、设计模式、网络协议（TCP/IP 通信 缓存）、操作系统、计算机组成、数据库（和数据结构也息息相关，红黑树）、编译原理（vue的compile模块）
class Event{ constructor(){ this.callbacks = {} } $on(name, fn){ // 监听 // if(!this.callbacks[name]){ // this.callbacks[name] = [] // } // this.callbacks[name].push(fn) // 上述代码的简写 (this.callbacks[name] || (this.callbacks[name]=[])).push(fn) } $emit(name, arg){ const cbs = this.callbacks[name] if(cbs){ cbs.forEach(c=>{ c.call(this, arg) }) } } $off(name){ this.callbacks[name] = null } } let event = new Event() event.$on(‘event1‘, arg => { console.log(‘event1触发‘, arg) }) event.$on(‘event1‘, arg => { console.log(‘又一个event1触发‘, arg) }) event.$on(‘event2‘, arg => { console.log(‘event2触发‘, arg) }) event.$emit(‘event1‘, ‘myArg‘) event.$emit(‘event2‘, ‘myArg2‘) event.$off(‘event1‘) event.$emit(‘event1‘, ‘myArg‘)
定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。
适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次，实现起来也很简单，用一个变量缓存即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .modal{ position: fixed; border: 2px solid red; width: 300px; height: 300px; top: 30%; left: 50%; margin-left: -150px; text-align: center; padding: 20px; } </style> </head> <body> <div id="model-btn">点我</div> <script> function getSingle(fn){ // 使用闭包存储期望的单例实例 // 把函数fn变成单例 let result return function(){ return result || (result=fn.apply(this, arguments)) } } function createModalLayer(){ console.log(‘新建弹窗‘) // 期望弹窗是全局唯一的 let div = document.createElement(‘div‘) div.innerHTML = ‘我是一个弹窗‘ div.className = ‘modal‘ div.style.display = ‘none‘ div.addEventListener(‘click‘, function(){ div.style.display = ‘none‘ }, false) document.body.appendChild(div) return div } // 只需要对原本的函数包一层，就变成单例了 createModalLayer = getSingle(createModalLayer) document.getElementById(‘model-btn‘).addEventListener(‘click‘, function(){ // 新建一个弹窗 const modalLayer = createModalLayer() // 修改弹窗的内容 modalLayer.style.display = ‘block‘ modalLayer.innerHTML = ‘登录‘ + new Date() }, false) </script> </body> </html>
// 判断绩效：绩效S为4倍工资，A为3倍工资，B为2倍工资 function calculate(level, salary){ if(level===‘S‘){ return salary*4 } if(level===‘A‘){ return salary*3 } if(level===‘B‘){ return salary*2 } return salary }
上述代码如果想加入新的条件，比如： SS绩效 5倍工资
就得多加一条 if 判断
if(level===‘SS‘){ return salary*5 }
这种我们称为面条代码，不好维护而且阅读起来比较困难
将至改造成策略模式（策略 + 使用）
// 新的策略，就扩展这个对象---这里可以使用配置 {"S":4, "A":3, "B":2} ，也可以是接口返回 const policy = { ‘S‘: function(salary){ return salary * 4 }, ‘A‘: function(salary){ return salary * 3 }, ‘B‘: function(salary){ return salary * 2 } } // 使用层(业务层) function calculate(level, salary){ return policy[level] ? policy[level](salary) : salary }
1
原文：https://www.cnblogs.com/haishen/p/12022568.html