Modèles de conception courants dans JS

Dans les applications à grande échelle d'une seule page, lorsque la complexité atteint un certain niveau, il n'existe pas de modèle de conception approprié pour le découplage et le développement ultérieur sera difficile à démarrer.
Le design pattern existe précisément pour le découplage.

Modèle Singleton

Le cœur du modèle singleton est de garantir qu'il n'y a qu'une seule instance et de fournir un accès global.

Caractéristiques

Satisfaire au « principe de responsabilité unique » : utilisez le mode proxy, ne déterminez pas si le singleton a été créé dans le constructeur ;

Satisfaire le principe de paresse

Application

La fenêtre de connexion apparaît.

Instance

 var getSingle = function (fn) {
    var res;
    return function() {
        return res || (res = fn.apply(this, arguments));
    }
}

var createPopup() {
    var p = document.createElement('p');
    p.innerHTML = "Login window";
    p.style.display = "none"; 
    document.body.appendChild(p);
    return p;
}

var createLoginPopup = getSingle(createPopup);            
//create popup p here by using a given function, 满足两个原则 

document.getElementById("loginBt").onclick = function() {
    var popup = createLoginPopup();
    pop.style.display = "block";
}

Mode Constructeur

/**
 * 构造一个动物的函数 
 */
function Animal(name, color){
    this.name = name;
    this.color = color;
    this.getName = function(){
        return this.name;
    }
}
// 实例一个对象
var cat = new Animal('猫', '白色');
console.log( cat.getName() );

Mode Prototype

function Person(){  
}

Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
    alert(this.name);  
}

var person1 = new Person();
var person2 = new Person();
 
//测试代码
alert(person1.name);   // bill
alert(person2.name);    // bill
person1.sayName();    //bill
person2.sayName();    //bill

person1.name = "666";

alert(person1.name);   // 666
alert(person2.name);    // bill
person1.sayName();    //666
person2.sayName();    //bill

Mode Mixte

/**
 * 混合模式 = 原型模式 + 构造函数模式
 */
function Animal(name, color){
    this.name = name;
    this.color = color;

    console.log( this.name  +  this.color)
}
Animal.prototype.getInfo = function(){
    console.log('名称：'+ this.name);
}

function largeCat(name, color){
    Animal.call(null, name, color);

    this.color = color;
}

largeCat.prototype = create(Animal.prototype);
function create (parentObj){
    function F(){}
    F.prototype = parentObj;
    return new F();
};

largeCat.prototype.getColor = function(){
    return this.color;
}
var cat = new largeCat("Persian", "白色");
console.log( cat )

Usine pattern

Factory : La fonction génère l'objet b en interne et le renvoie.

1. 
function a(name){
  var b = new object();
    b.name = name;
    b.say = function(){
        alert(this.name);
    }   
       return b    
}
2. 
function Animal(opts){
    var obj = new Object();
    obj.name = opts.name;
    obj.color = opts.color;
    obj.getInfo = function(){
        return '名称：'+obj.name +'， 颜色：'+ obj.color;
    }
    return obj;
}
var cat = Animal({name: '波斯猫', color: '白色'});
cat.getInfo();

Modèle d'usine simple

L'idée d'un modèle d'usine simple est de créer des objets et d'instancier différentes classes, il vous suffit de créer un objet, puis d'utiliser un grand nombre de ; méthodes et propriétés de cet objet, et enfin renvoyer l'objet

//basketball base class  
var Baseketball = function(){  
  this.intro = 'baseketball is hotting at unitedstates';  
}  
Baseketball.prototype = {  
  getMember : function(){\  
    console.log('each team needs five players');  
  },  
  getBallSize : function(){  
    console.log('basketball is big');  
  }  
}  
//football base class   
var Football = function(){  
  this.intro = 'football is popular at all of the world';  
}  
Football = function(){  
  getMember = function(){  
  
  },  
  getBallSize = function(){  
  
  }  
}  
//sport factory  
var SportsFactory = function(name){  
  switch(name){  
    case 'NBA':  
      return new Baseketball();  
    case 'wordCup':  
      return new Football();  
  }  
}  
  
//when you want football   
var football = SportsFactory('wordCup');  
console.log(football);  
console.log(football.intro);  
football.getMember();

Modèle d'itérateur

Modèle de décorateur

Modèle de stratégie

Définir des algorithmes mutuellement remplaçables et les encapsuler.

Caractéristiques

1. Conforme au principe ouvert-fermé : Lorsque vous souhaitez modifier l'algorithme utilisé, vous n'avez pas besoin d'approfondir la fonction pour le modifier , il vous suffit de modifier la classe de stratégie ;

2. Séparer la mise en œuvre et l'utilisation de l'algorithme pour améliorer la réutilisabilité de l'algorithme ;

3. Évitez les multiples instructions de sélection conditionnelle par combinaison, délégation et polymorphisme ;

Appliquez l'animation

pour obtenir différents effets d'assouplissement.

Généralement divisé en deux parties : type de stratégie et type d'environnement. La classe de stratégie est utilisée pour encapsuler divers algorithmes et est responsable du processus de calcul spécifique ; la classe d'environnement est chargée de recevoir les demandes des utilisateurs et de confier les demandes à une certaine classe de stratégie. Étant donné que les algorithmes et les résultats de calcul implémentés par chaque classe de stratégie sont différents, mais que la méthode d'appel de la classe de stratégie par la classe d'environnement est la même, cela reflète un polymorphisme. Pour implémenter différents algorithmes, il suffit de remplacer la classe de stratégie par la classe d'environnement.

En js, nous n'avons pas besoin de construire une classe de stratégie et pouvons directement utiliser des fonctions comme objets de stratégie.

Exemple

var strategies = {
    "s1": function() {
        //algo 1
    },
    "s2": function() {
        //algo 2
    }, 
    "s3": function() {
        //algo 3
    }
 }
 
 var someContext =  new SomeConext();
 someContext.start("s1");  //using s1 to calculate
 //someContext.add("s1");  or add s1 as a rule for validation

Le mode apparence

peut également être traduit par mode façade. Il fournit une interface cohérente pour un ensemble d'interfaces dans un sous-système. Le modèle Facade définit une interface de haut niveau qui rend ce sous-système plus facile à utiliser. Une fois le rôle d'apparence introduit, l'utilisateur n'a plus qu'à interagir directement avec le rôle d'apparence, et la relation complexe entre l'utilisateur et le sous-système est réalisée par le rôle d'apparence, réduisant ainsi le couplage du système.
Par exemple, si vous voulez regarder un film à la maison, vous devez allumer la chaîne stéréo, puis allumer le projecteur, puis allumer le lecteur, etc. Après avoir présenté le personnage d'apparence, il vous suffit d'appeler le Méthode « Ouvrir un périphérique vidéo ». Le rôle d'apparence encapsule des opérations telles que l'ouverture du projecteur, offrant aux utilisateurs une méthode plus facile à utiliser.

Fonction

1. Simplifier les interfaces complexes

2. Dissocier et protéger les utilisateurs de l'accès direct aux sous-systèmes

Exemple

Formellement, le mode d'apparence en JavaScript ressemble à ceci : L'événement est placé dans le rôle d'apparence :

function a(x){
   // do something
}
function b(y){
   // do something
}
function ab( x, y ){
    a(x);
    b(y);
}

L'application du mode d'apparence en JavaScript peut être principalement divisé en deux catégories.Un certain morceau de code apparaît à plusieurs reprises.Par exemple, l'appel de la fonction a apparaît essentiellement avant l'appel de la fonction b.Vous pouvez alors envisager d'envelopper ce code avec des rôles d'apparence pour optimiser la structure. Une autre façon consiste à placer les API incompatibles avec certains navigateurs dans l'apparence pour jugement. La meilleure façon de résoudre ces problèmes est de centraliser toutes les différences entre navigateurs dans une instance de modèle d'apparence pour fournir une interface externe.

var N = window.N || {};

N.tools = {
    stopPropagation : function( e ){
        if( e.stopPropagation ){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    },

    preventDefault : function( e ){
        if( e.preventDefault ){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    },
    
    stopEvent : function( e ){
        N.tools.stopPropagation( e );
        N.tools.preventDefault( e );
    }

Modèle de proxy

Définition du modèle de proxy : Fournissez un proxy pour d'autres objets afin de contrôler l'accès à cet objet. Dans certains cas, un objet ne convient pas ou ne peut pas référencer directement un autre objet, et un objet proxy peut servir d'intermédiaire entre le client et l'objet cible.

Proxy virtuel

Le proxy virtuel retarde la création et l'exécution de certains objets coûteux jusqu'à ce qu'ils soient vraiment nécessaires

Chargement paresseux des images

Fusionner Requêtes http

//图片加载
let imageEle = (function(){
    let node = document.createElement('img');
    document.body.appendChild(node);
    return {
        setSrc:function(src){
            node.src = src;
        }
    }
})();

//代理对象
let proxy = (function(){
    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };
    return {
        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();

proxy.setSrc('example.png');

S'il existe une fonction qui nécessite des opérations de requête fréquentes, ce qui est relativement coûteux, vous pouvez collecter les données de la requête sur une période de temps via une fonction proxy et les envoyer immédiatement

Cache Proxy

//上传请求
let upload = function(ids){
    $.ajax({
        data: {
            id:ids
        }
    })
}

//代理合并请求
let proxy = (function(){
    let cache = [],
        timer = null;
    return function(id){
        cache[cache.length] = id;
        if(timer) return false;
        timer = setTimeout(function(){
            upload(cache.join(','));
            clearTimeout(timer);
            timer = null;
            cache = [];
        },2000);
    }    
})();
// 绑定点击事件
let checkbox = document.getElementsByTagName( "input" );
for(var i= 0, c; c = checkbox[i++];){
    c.onclick = function(){
        if(this.checked === true){
            proxy(this.id);
        }
    }
}

Cache Proxy peut fournir un stockage temporaire pour certains résultats d'opérations coûteuses. Lors de l'opération suivante, si les paramètres transmis sont cohérents avec les précédents, les résultats de l'opération précédemment stockés peuvent être directement renvoyés.

Avantages et inconvénients

//计算乘积
let mult = function(){
    let result = 1;
    for(let i = 0,len = arguments.length;i < len;i++){
        result*= arguments[i];
    }
    return result;
}

//缓存代理
let proxy = (function(){
    let cache = {};
    reutrn function(){
        let args = Array.prototype.join.call(arguments,',');
        if(args in cache){
            return cache[args];
        }
        return cache[args] = mult.apply(this,arguments);
    }
})();

1. Avantages : Le mode proxy peut séparer l'objet proxy de l'objet appelé, réduisant ainsi le couplage du système. Le mode proxy joue un rôle intermédiaire entre le client et l'objet cible, ce qui peut protéger l'objet cible. L'objet proxy peut également effectuer d'autres opérations avant d'appeler l'objet cible.

2. Inconvénients : Augmente la complexité du système

Mode observateur

Mode module

Recommandations associées :

/**
 * 模块模式 = 封装大部分代码，只暴露必需接口
 */
var Car = (function(){
    var name = '法拉利';
    function sayName(){
        console.log( name );
    }
    function getColor(name){
        console.log( name );
    }
    return {
        name: sayName,
        color: getColor
    }
})();
Car.name();
Car.color('红色');

Explication détaillée du modèle de conception de combinaison js

Explication détaillée de l'exemple de modèle de localisateur de service du modèle de conception PHP

Explication détaillée du modèle de délégation du modèle de conception PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!