JavaScript の設計パターンとフレームワークでの実践方法の紹介

JS およびアセンブリ コードを記述するプロセスで、特定のデザイン パターンを使用すると、コードをよりエレガントで柔軟にすることができます。

次に著者は、reduxとsubscribe、ES6のclass、vueの$dispatch、jqueryのon/offを組み合わせたこれらのライブラリ、文法、フレームワークのデザインパターンの使い方を簡単に紹介します。

デザインパターンによって解決される問題

デザインパターンは、あまり謎めいた知識ではありませんが、多くの学生が JS コードを作成する際に、うっかり多くのデザインパターンを使用したことがあります。

デザインパターンを抽象化して個別に議論するのは、よく使われるJSパターンを記述するためにアルゴリズムのバブリングやソートを抽象化するのと同じだと著者は考えています。

このタイプのパターンを研究することで、そのパターンがコード構造と 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)
    }
 }

パブリッシュ/サブスクライブ[サブスクライブ]リリースモード】

コードモジュールの共有アクセス空間にhashMapのトピック/コールバック形式を格納します。

オン/オフ/トリガーやその他のインターフェイスを追加して、マウント、削除、トリガーなどのアクションを実装します。

簡単なサブスクリプション・パブリッシュ・モードのコード練習

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

singleton [single case mode]

コンストラクターのインスタンスは 1 つだけあり、通常、内部インスタンスはクロージャーを介して保存され、内部インスタンスはインターフェースを介してアクセスされます。

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

デコレーターハイブリッドモード

このモードは、元のオブジェクトにさらに多くのビヘイビアーを装飾し、変数名を変更しないようにします。 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});

ミックスインブレンディングモード

このモードは、機能がより垂直であることを除いて、デコレーターにいくらか似ています。 これは、元のオブジェクトの上にオブジェクトを追加および上書きする行為です。 extends や Object.assign などのメソッドと比較して、ミックスイン モードはより表現力豊かです。ミックスイン パターンは一般化できません。vue.mixin

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

など、さまざまなデータ タイプに基づいて異なるミックスイン戦略が存在する可能性があります。次に、これらのデザイン パターンをベースに説明します。一般的に使用されるフレームワーク、文法、ライブラリなど。 アプリケーション。

reduxでのオブザーバーモードの使い方

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

react-reduxでのデコレーターモードの実践

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