What are the commonly used front-end development design patterns?

Front-end development design patterns include: 1. Module pattern; 2. Constructor pattern; 3. Factory pattern; 4. Mixed pattern; 5. Singleton pattern; 6. Subscription-publish pattern, etc.

Commonly used front-end development design patterns include: module pattern, constructor pattern, factory pattern, hybrid pattern, singleton pattern and subscription-publish pattern.

Front-end development design mode

Module mode:

Execute the function immediately The variables and methods defined in the expression are not accessible to the outside world and can only be accessed "with restrictions" through the interface it provides to the outside world. The encapsulation problem of attributes and methods is solved through function scope.

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

Constructor Pattern

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

Mixed Mode

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"

Factory Pattern

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

Single instance mode

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

Publish-subscribe mode

The publish-subscribe mode is also called the observer mode, which defines one-to-many relationships between objects. Dependency, when the state of an object changes, all objects that depend on it will be notified.

The publish-subscribe model is widely used in asynchronous programming and is an alternative to callback functions. Multiple event handling functions can subscribe to the same event. When the event occurs, the corresponding multiple event handling functions will run to replace the hard-coded notification mechanism between objects. One object no longer has to explicitly call a certain function of another object. An interface reduces the degree of coupling between modules. Although the details of each other are not clear, it does not affect their mutual communication

Application

DOM events

DOM event is a typical publish-subscribe model, which monitors an event of a dom node. When the dom node is operated, the corresponding event is triggered and the response function is executed. The event function executes the dom node The node is completely unknown, so you don’t need to worry about what event it is, how to trigger it, just execute it.

Custom event

Specify the publisher "publish-subscribe" relationship Represented by an object, the key represents the event name, and the value is an array composed of event handlers, which is equivalent to the subscriber's roster. After publishing the message, the cache list is traversed and the subscriber's callback function is executed in sequence

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

Practical Application

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

The above is the detailed content of What are the commonly used front-end development design patterns?. For more information, please follow other related articles on the PHP Chinese website!