JS设计模式入门和框架中的实践

   <p>在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。</p>    <p>下面笔者就结合诸如redux的subscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。</p>    <h2>设计模式解决的问题</h2>    <p>设计模式并不是很玄乎的知识，很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。</p>    <p>笔者认为把设计模式单独抽象出来探讨，就和算法中抽象出来冒泡、排序一样，是为了描述一种常用的JS pattern。</p>    <p>通过研习这类pattern，让模式来指导我们的代码结构及JS算法。</p>    <h2>一些常用的设计模式概述</h2>    <p>1、observer [观察者模式]</p>    <p>根据状态的变化主动触发观察者队列、hashMap的回调行为</p>    <p>一个简单的观察者模式代码实践</p>    <pre>  <code class="language-java">class StateTracker{          constructor(){              this.observers = [];              this.internalState= 10;          }          // 改变内部状态，触发状态的观察者列表          change(val){              this.internalState= val;              this.observers.forEach(observer=>observer(val));          }// 注册观察者          registerObserver(ObserverFn){              this.obserers.push(ObserverFn)          }      }</code></pre>    <p>2、publish/subscribe [订阅发布模式]</p>    <p>在代码模块的共享访问空间存储hashMap的topic/callback形式。</p>    <p>添加on/off/trigger等接口实现挂载、移除、触发等动作。</p>    <p>一个简单的订阅发布模式代码实践</p>    <pre>  <code class="language-java">class PubSubHandler{          constructor(){              this.eventPool = {};          }          //移除          off(topicName){              delete this.observers[topicName]          }          //发布          trigger(topicName,...args){              this.eventPool[topicName] &&               this.eventPool[topicName].forEach(callback=>callback(...args));          }          //订阅          on(topicName,callback){              let topic = this.eventPool[topicName] ;              if(!topic){                  this.eventPool[topicName] =[]              }              this.eventPool[topicName].push(callback)          }      }</code></pre>    <p>3、singleton[单例模式]</p>    <p>一个简单的单例模式代码实践</p>    <pre>  <code class="language-java">var singleton = ()=>{          var instance;          var createInstance = ()=>{              this.a = 1;              this.b = 2;          }// 单例模式方法入口          return {              getInstance:()=>{                  if(!instance){                      instance = createInstance();                  }                  return instance;              }          }      }      var test = singleton();      test.getInstance() == test.getInstance() //true</code></pre>    <p>4、decorator装饰者模式</p>    <p>这个模式就是在原有的对象上面装饰更多行为，并且保持变量名不变。</p>    <p>用过ES7的@decorator或者python等语言的，应该对decorator不陌生的。</p>    <p>一个简单的装饰者模式代码实践</p>    <pre>  <code class="language-java">function decorator(sourceObj,decortorFn){          decortorFn(sourceObj);          return sourceObj      }      var d = {a:1};      // d变为了{a:1,b:1}      d = decorator(d,(d)=>{d.b=1});</code></pre>    <p>5、mixin混合模式</p>    <p>这个模式和decorator有点类似，只是它的功能更加垂直。</p>    <p>就是在原有的对象上面增加、覆盖对象的行为。</p>    <p>相比于extends、Object.assign等方法，mixin模式更富有表现力。</p>    <p>mixin模式不能一概而论，可能依据不同的数据类型有不同的mixin策略，比如vue.mixin</p>    <p>一个简单的混合模式代码实践</p>    <pre>  <code class="language-java">class StateTracker{          constructor(){              this.raw = {                  a:1,                  b:2              }          }// 混合模式方法入口          mixin(obj){              Object.assign(this.raw,obj)          }      }</code></pre>    <p>下面就针对常用的框架、语法、库等来说明这些设计模式的应用。</p>    <h2>observer模式在redux中的使用示例代码</h2>    <pre>  <code class="language-java">var store = createStore(reducer,initialState);      //注册redux store，存储在 nextListeners数组      var test = store.subscribe(()=>{console.log('我注册了！')});      // 取消注册监听      test.unsubscribe();</code></pre>    <h2>publish/subscribe在jquery中的使用示例代码</h2>    <pre>  <code class="language-java">$(document).on('hello',()=>{console.log('hello')})      $(document).trigger('hello');      $(document).off('hello')</code></pre>    <h2>decorator模式在react-redux中的实践</h2>    <pre>  <code class="language-java">//装饰器      @connect(state=>state)      class Container extends Component{          render(){              return JSON.stringify(this.props)             }      }</code></pre>    <h2>总结</h2>    <p>关于设计模式在前端框架或库的实践，我这边写的是比较简略的， 可能没有写过相关代码的同学不是特别好理解，有相关疑问的同学可以在文末直接提问。</p>    <p>希望本文能够对大家学习和了解设计模式的概念有所了解</p>    <p>本文首发于笔者的 <a href="/misc/goto?guid=4959756384493290024" rel="nofollow,noindex">github blog</a></p>    <p><a href="/misc/goto?guid=4959756384586197685" rel="nofollow,noindex">github设计模式教程代码地址</a></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000012814591</p>    <p> </p>