Une introduction aux modèles de conception et aux pratiques JavaScript dans les frameworks

Dans le processus d'écriture du code JS et assembleur, l'utilisation de certains modèles de conception peut rendre notre code plus élégant et flexible.

Ensuite, l'auteur vous donnera une brève introduction à l'utilisation des modèles de conception dans ces bibliothèques, grammaires et frameworks en combinant abonnement avec redux, classe dans ES6, $dispatch dans vue et on/off dans jquery .

Problèmes résolus par les modèles de conception

Les modèles de conception ne sont pas des connaissances très mystérieuses. De nombreux étudiants ont utilisé par inadvertance de nombreux modèles de conception lors de l'écriture du code JS.

L'auteur estime qu'abstraire des modèles de conception pour les discuter séparément revient à abstraire des bulles et à trier des algorithmes, afin de décrire un modèle JS couramment utilisé.

En étudiant ce type de modèle, laissez le modèle guider notre structure de code et notre algorithme JS.

Un aperçu de certains modèles de conception couramment utilisés

Observer [Mode Observateur]

Déclenchez activement le comportement de rappel de la file d'attente de l'observateur et du hashMap en fonction des changements d'état

Une simple pratique de code de modèle d'observateur

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

publier/s'abonner [Mode de publication par abonnement]

Stockez le formulaire de sujet/de rappel de hashMap dans l'espace d'accès partagé du module de code.

Ajoutez on/off/trigger et d'autres interfaces pour mettre en œuvre des actions telles que le montage, le retrait et le déclenchement.

Une pratique simple de publication de code par abonnement

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 [mode cas unique]

Il n'y a qu'une seule instance du constructeur, et l'instance interne est généralement stockée via une fermeture, accédez à l'instance interne via l'interface.

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

　 mode hybride décorateur

Ce mode permet de décorer plus de comportements sur l'objet d'origine et de garder le nom de la variable inchangé. Si vous avez utilisé @decorator ou python d'ES7 et d'autres langages, vous devriez être familier avec 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});

　mode de fusion mixin

Ce mode est un peu similaire au décorateur, sauf que sa fonction est plus verticale. C'est l'acte d'ajouter et d'écraser des objets par-dessus les objets d'origine. Comparé aux méthodes telles que extends et Object.assign, le mode mixin est plus expressif. Les modèles de mixin ne peuvent pas être généralisés. Il peut y avoir différentes stratégies de mixin basées sur différents types de données, telles que vue.mixin

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

L'auteur présentera de nombreux modèles de conception pour le moment. sur les frameworks, grammaires et bibliothèques couramment utilisés, etc. pour illustrer l'application de ces modèles de conception.

L'utilisation du mode observateur dans 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')

La pratique du mode décorateur dans React-Redux

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