Eine Einführung in JavaScript-Entwurfsmuster und -praktiken in Frameworks

Beim Schreiben von JS- und Assemblercode kann die Verwendung bestimmter Entwurfsmuster unseren Code eleganter und flexibler machen.

Als Nächstes gibt Ihnen der Autor eine kurze Einführung in die Verwendung von Entwurfsmustern in diesen Bibliotheken, Grammatiken und Frameworks durch die Kombination von subscribe mit redux, class in ES6, $dispatch in vue und on/off in jquery .

Durch Designmuster gelöste Probleme

Designmuster sind kein sehr mysteriöses Wissen. Viele Studenten haben beim Schreiben von JS-Code versehentlich viele Designmuster verwendet.

Der Autor glaubt, dass das Abstrahieren von Entwurfsmustern, um sie separat zu diskutieren, genauso ist wie das Abstrahieren von Blasen und das Sortieren von Algorithmen, um ein häufig verwendetes JS-Muster zu beschreiben.

Indem Sie diese Art von Muster studieren, lassen Sie das Muster unsere Codestruktur und unseren JS-Algorithmus leiten.

Ein Überblick über einige häufig verwendete Entwurfsmuster

Beobachter [Beobachtermodus]

Aktives Auslösen des Rückrufverhaltens der Beobachterwarteschlange und der HashMap gemäß Statusänderungen

Eine einfache Code-Praxis für Beobachtermuster

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

Veröffentlichen/Abonnieren [Abonnement-Veröffentlichungsmodus]

Speichern Sie die Themen-/Rückrufform von hashMap im gemeinsam genutzten Zugriffsbereich des Codemoduls.

Fügen Sie Ein/Aus/Trigger und andere Schnittstellen hinzu, um Aktionen wie Montage, Entfernung und Auslösung zu implementieren.

Eine einfache Code-Praxis zum Abonnement und Veröffentlichen

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 [Einzelfallmodus]

Es gibt nur eine Instanz des Konstruktors, und die interne Instanz wird normalerweise gespeichert Greifen Sie über einen Abschluss über die Schnittstelle auf die interne Instanz zu.

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

　 Decorator-Hybridmodus

Dieser Modus dient dazu, mehr Verhaltensweisen auf dem Originalobjekt zu dekorieren und den Variablennamen unverändert zu lassen. Wenn Sie @decorator oder Python und andere Sprachen von ES7 verwendet haben, sollten Sie mit Decorator vertraut sein.

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

　Mixin-Mischmodus

Dieser Modus ähnelt in gewisser Weise dem Dekorator, außer dass seine Funktion eher vertikal ist. Dabei handelt es sich um den Vorgang des Hinzufügens und Überschreibens von Objekten über den ursprünglichen Objekten. Im Vergleich zu Methoden wie Extens und Object.assign ist der Mixin-Modus ausdrucksvoller. Mixin-Muster können nicht verallgemeinert werden. Es kann verschiedene Mixin-Strategien geben, die auf unterschiedlichen Datentypen basieren.

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

auf häufig verwendete Frameworks, Grammatiken und Bibliotheken usw., um die Anwendung dieser Entwurfsmuster zu veranschaulichen.

Die Verwendung des Beobachtermodus in 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')

Die Praxis des Dekoratormodus in React-Redux

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