Quels sont les modèles de conception de développement front-end couramment utilisés ?

Les modèles de conception de développement front-end comprennent : 1. Modèle de module ; 2. Modèle de constructeur ; 3. Modèle d'usine 4. Modèle mixte 5. Modèle de publication par abonnement ;

Les modèles de conception de développement front-end couramment utilisés comprennent : le modèle de module, le modèle de constructeur, le modèle d'usine, le modèle hybride, le modèle singleton et le modèle d'abonnement-publication.

Mode de conception de développement front-end

Mode module :

Exécuter le fonction immédiatement Les variables et méthodes définies dans l'expression ne sont pas accessibles au monde extérieur et ne sont accessibles que "avec restrictions" via l'interface qu'elle fournit au monde extérieur. Le problème d'encapsulation des attributs et des méthodes est résolu grâce à la portée de la fonction.

var Person = (function(){    
var name = "xin";    
var age = 22;    
function getName(){        
return name;
    }    
function getAge(){        
return age;
    }    
return {        
getName: getName,        
getAge: getAge
    }
})();
console.log(age); // 报错:age未定义
console.log(name); // 报错:name未定义
console.log(Person.age); // undefined
console.log(Person.name); // undefined只能通过Person提供的接口访问相应的变量
console.log(Person.getName()); // xin
console.log(Person.getAge()); // 22

Modèle constructeur

function Person(name,age){    
this.name = name;    
this.age = age;
}
Person.prototype = {    
constructor: Person;
    printName: function(){        
console.log(this.name);
    },    printAge: function(){        
console.log(this.age);
    }
}var person = new Person('xin', 22);
person.printName(); // xin
person.printAge(); // 22

Mode mixte

function Person(name,age){    
this.name = name;    
this.age = age;
};
Person.prototype.printName = function(){    
console.log(this.name);
}function Student(name,age){
    //继承 Person 的属性
    Person.call(this,name,age);
}function create(prototype){    
function F(){};
    F.prototype = prototype;    
    return new F();
}
//让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法
Student.prototype = create(Person.prototype);
Student.prototype.printAge = function(){    
console.log(this.age);
}var student = new Student('xin',22);
student.printName(); // "xin"

Modèle d'usine

function Person(name, age){    
var person = new Object();
    person.name = name;
    person.age = age;
    person.printName = function(){        
    console.log(this.name);
    };
    person.printAge = function(){        
    console.log(this.age);
    }    
    return person;
}
var person = Person('xin',22);

Modèle Singleton

var Singleton = (function (){    
var instance;    
function init(){        
return {
        };
    }    return {        
    getInstance: function(){            
    if(!instance){
               instace = init();
            }            return instance;
        }
    };
})();

Modèle de publication-abonnement

Le modèle de publication-abonnement est également appelé Observer Modèle , définit une relation de dépendance un-à-plusieurs entre les objets. Lorsque l'état d'un objet change, tous les objets dépendants et ses objets seront informés.

Le modèle de publication-abonnement est largement utilisé dans la programmation asynchrone. une solution pour remplacer la fonction de rappel. Plusieurs fonctions de gestion d'événements peuvent s'abonner au même événement. Lorsque l'événement se produit, plusieurs fonctions de gestion d'événements correspondant s'exécuteront pour remplacer le mécanisme de notification codé en dur entre les objets. pour appeler explicitement une interface d'un autre objet, réduisant le degré de couplage entre les modules. Bien que les détails les uns des autres ne soient pas clairs, cela n'affecte pas la communication entre eux

Application

Événement DOM

L'événement DOM est un mode de publication-abonnement typique, qui surveille un événement d'un nœud dom lorsque le nœud dom est exploité, l'événement correspondant est déclenché. Les événements et les fonctions de réponse sont exécutés. La fonction d'événement est complètement inconnue du nœud DOM. Vous n'avez pas à vous soucier de la nature de l'événement ni de la façon de le déclencher, exécutez-le simplement

Personnalisé. event

spécifié La relation « publication-abonnement » de l'éditeur est représentée par un objet, la clé représente le nom de l'événement et la valeur est un tableau composé de gestionnaires d'événements, qui est équivalent à la liste de l'abonné . Après la publication du message, la liste de cache est parcourue et les abonnés sont exécutés en séquence. La fonction de rappel

var EventCenter = (function(){  
    //将所有的"发布-订阅"关系放到events中    
    var events = {};
    //给事件绑定事件处理程序, 
    function on(evt, handler){
    //evt:事件名，handler:事件处理程序   
        events[evt] = events[evt]||[];
        events[evt].push({            
        handler:hander
        });
    }
    //发布消息(触发事件),并执行相应的事件处理程序  
    function fire(evt,args){   
     //evt:事件名，args:给事件处理程序传递的参数       
    if(!events[evt]){            
    return;
        }
        //遍历事件处理程序列表,执行其中每一个事件处理程序        
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
    }
    //使用模块模式的方式,向外界提供绑定事件处理程序和触发事件的接口    
    return {        
    on: on,        
    fire: fire
    }
})();

Application pratique

.

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!