Was sind die am häufigsten verwendeten Entwurfsmuster für die Front-End-Entwicklung?

Front-End-Entwicklungsmuster: 1. Modulmuster; 3. Fabrikmuster; 6. Abonnement-Veröffentlichungsmuster;

Zu den häufig verwendeten Entwurfsmustern für die Front-End-Entwicklung gehören: Modulmuster, Konstruktormuster, Fabrikmuster, Hybridmuster, Singleton-Muster und Abonnement-Veröffentlichungsmuster.

Front-End-Entwicklungsdesignmodus

Modulmodus:

Führen Sie die aus Funktion sofort Die im Ausdruck definierten Variablen und Methoden sind für die Außenwelt nicht zugänglich und können nur „mit Einschränkungen“ über die Schnittstelle zur Außenwelt aufgerufen werden. Das Kapselungsproblem von Attributen und Methoden wird durch den Funktionsumfang gelöst.

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

Konstruktormuster

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

Gemischter Modus

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"

Werksmuster

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

Singleton-Muster

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

Publish-Subscribe-Muster

Publish-Subscribe-Muster, auch Observer-Muster genannt, definiert eine Eins-zu-viele-Beziehung Abhängigkeit zwischen Objekten: Wenn sich der Status eines Objekts ändert, werden alle davon abhängigen Objekte benachrichtigt.

Das Publish-Subscribe-Modell wird häufig in der asynchronen Programmierung verwendet und ist eine Alternative zur Mehrfachereignisbehandlung Funktionen können dasselbe Ereignis abonnieren. Die entsprechenden Mehrfachereignisverarbeitungsfunktionen werden ausgeführt, um den fest codierten Benachrichtigungsmechanismus zwischen Objekten zu ersetzen. Eine Schnittstelle muss nicht mehr explizit aufgerufen werden Der Grad der Kopplung zwischen Modulen ist zwar nicht klar, hat jedoch keinen Einfluss auf die Kommunikation zwischen ihnen

Anwendung

DOM-Ereignisse

DOM-Ereignis ist ein typisches Publish-Subscribe-Modell, das ein Ereignis eines Dom-Knotens überwacht, das entsprechende Ereignis auslöst und die Ereignisfunktion ausführt Der Dom-Knoten ist völlig unbekannt, Sie müssen sich also keine Gedanken darüber machen, um welches Ereignis es sich handelt und wie Sie es auslösen. Führen Sie es einfach aus

Benutzerdefiniertes Ereignis

Geben Sie die „Publish-Subscribe“-Beziehung des Herausgebers an. Der Schlüssel stellt den Ereignisnamen dar und der Wert ist ein Array aus Ereignishandlern, das der Liste des Abonnenten entspricht. Nach der Veröffentlichung der Nachricht ist die Cache-Liste durchlaufen und die Rückruffunktion des Teilnehmers wird nacheinander ausgeführt

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

Praktische Anwendung

var Event = (function(){  
    var events = {};    
    function on(evt, handler){
        events[evt] = events[evt]||[];
        events[evt].push({            
        handler:handler
        });
    }    function fire(evt,args){        
    if(!events[evt]){            
    return;
        }        
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
    }    function off(evt){        
    delete events[evt];
    }    return {        
    on: on,        
    fire: fire,        
    off: off
    }
})();
Event.on(&#39;change&#39;, function(val){    
console.log(&#39;change...  now val is &#39; + val);  
});
Event.on(&#39;click&#39;, function(val){    
console.log(&#39;click.... now val is &#39;+ val);
})
Event.fire(&#39;change&#39;, &#39;xin&#39;);
Event.fire(&#39;click&#39;, &#39;xin&#39;);
Event.off(&#39;change&#39;);

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten Entwurfsmuster für die Front-End-Entwicklung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!