JavaScript 设计模式入门和框架中的实践-tutorial js-php.cn

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

黄舟

Lepaskan： 2017-02-07 14:09:44

asal

1025 orang telah melayarinya

　在编写JS和组装代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。

　　下面笔者就结合诸如redux的subsscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。

　设计模式解决的问题

　　设计模式并不是很玄乎的知识，很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。

　　笔者认为把设计模式单独抽象出来探讨，就和算法中抽象出来冒泡、排序一样，是为了描述一种常用的JS pattern。

　　通过研习这类pattern，让模式来指导我们的代码结构及JS算法。

　一些常用的设计模式概述

　　observer [观察者模式]

　　根据状态的变化主动触发观察者队列、hashMap的回调行为

　　一个简单的观察者模式代码实践

class StateTracker{
    constructor(){
         this.observers = [];
         this.internamState= 10;
     }
     // 改变内部状态，触发状态的观察者列表
     change(val){
         this.internamState= val;
         this.observers.forEach(observer=>observer(val));
     }
     registerObserver(ObserverFn){
       this.obserers.push(ObserverFn)
    }
 }

Salin selepas log masuk

　　publish/subscribe [订阅发布模式]

　　在代码模块的共享访问空间存储hashMap的topic/callback形式。

　　添加on/off/trigger等接口实现挂载、移除、触发等动作。

　　一个简单的订阅发布模式代码实践

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

Salin selepas log masuk

　　singleton[单例模式]

　　构造函数的实例只有一个，一般是通过闭包存储内部实例，通过接口访问内部实例。

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

Salin selepas log masuk

　　decorator混合模式

　　这个模式就是在原有的对象上面装饰更多行为，并且保持变量名不变。用过ES7的@decorator或者python等语言的，应该对decorator不陌生的。

function decorator(sourceObj,decortorFn){
    decortorFn(sourceObj);
    return sourceObj
}
 var d = {a:1};
 // d变为了{a:1,b:1}
 d = decorator(d,(d)=>{d.b=1});

Salin selepas log masuk

　　mixin混合模式

　　这个模式和decorator有点类似，只是它的功能更加垂直。就是在原有的对象上面增加、覆盖对象的行为。相比于extends、Object.assign等方法，mixin模式更富有表现力。mixin模式不能一概而论，可能依据不同的数据类型有不同的mixin策略，比如vue.mixin

class StateTracker{
   constructor(){
       this.raw = {
           a:1,
            b:2
         }
     }
   mixin(obj){
        Object.assign(this.raw,obj)
   }
}

Salin selepas log masuk

　　笔者就暂时先介绍这么多设计模式，下面就针对常用的框架、语法、库等来说明这些设计模式的应用。

　observer模式在redux中的使用

var store = createStore(reducer,initialState);//注册redux store，存储在 nextListeners数组
var test = store.subscribe(()=>{console.log(&#39;我注册了！&#39;)});// 取消注册监听 test.unsubscribe();
　publish/subscribe在jquery中的使用
$(document).on(&#39;hello&#39;,()=>{console.log(&#39;hello&#39;)})$(document).trigger(&#39;hello&#39;);$(document).off(&#39;hello&#39;)

Salin selepas log masuk

　decorator模式在react-redux中的实践

//装饰器
@connect(state=>state)
class Container extends Component{
  render(){
     return JSON.stringify(this.props)   
   }
}

Salin selepas log masuk