常用的前端開發(fā)設(shè)計模式是什么

小編給大家分享一下常用的前端開發(fā)設(shè)計模式是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

常用的前端開發(fā)設(shè)計模式有：模塊模式，構(gòu)造函數(shù)模式，工廠模式，混合模式，單例模式以及訂閱-發(fā)布模式。

前端開發(fā)設(shè)計模式

模塊模式:

在立即執(zhí)行函數(shù)表達式中定義的變量和方法在外界是訪問不到的,只能通過其向外部提供的接口,"有限制"地訪問.通過函數(shù)作用域解決了屬性和方法的封裝問題.

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提供的接口訪問相應(yīng)的變量
console.log(Person.getName()); // xin
console.log(Person.getAge()); // 22

構(gòu)造函數(shù)模式

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

混合模式

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"

工廠模式

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

單例模式

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

發(fā)布-訂閱模式

發(fā)布-訂閱模式又叫做觀察者模式,定義了對象之間一對多的依賴關(guān)系,當一個對象的狀態(tài)發(fā)生改變時,所有依賴與它的對象都將得到通知.

發(fā)布-訂閱模式廣泛應(yīng)用于異步編程之中,是一種替代回調(diào)函數(shù)的方案.多個事件處理函數(shù)可以訂閱同一個事件,當該事件發(fā)生后,與其相對應(yīng)的多個事件處理函數(shù)都會運行取代對象之間硬編碼的通知機制,一個對象不用再顯示的調(diào)用另外一個對象的某個接口,降低模塊之間的耦合程度,雖然不清楚彼此的細節(jié),但是不影響他們之間相互通信

應(yīng)用

DOM事件

DOM事件是一種典型的發(fā)布-訂閱模式,對一個dom節(jié)點的一個事件進行監(jiān)聽,當操作dom節(jié)點時,觸發(fā)相應(yīng)的事件,響應(yīng)函數(shù)執(zhí)行.事件函數(shù)對dom節(jié)點完全未知,不用去理會是什么事件,如何觸發(fā),執(zhí)行就好.

自定義事件

指定發(fā)布者"發(fā)布-訂閱"這種關(guān)系用一個對象表示,鍵表示事件名,值是一個由事件處理程序組成的數(shù)組,相當于訂閱者的花名冊發(fā)布消息后,遍歷緩存列表,依次執(zhí)行訂閱者的回調(diào)函數(shù)

var EventCenter = (function(){  
    //將所有的"發(fā)布-訂閱"關(guān)系放到events中    
    var events = {};
    //給事件綁定事件處理程序, 
    function on(evt, handler){
    //evt:事件名，handler:事件處理程序   
        events[evt] = events[evt]||[];
        events[evt].push({            
        handler:hander
        });
    }
    //發(fā)布消息(觸發(fā)事件),并執(zhí)行相應(yīng)的事件處理程序  
    function fire(evt,args){   
     //evt:事件名，args:給事件處理程序傳遞的參數(shù)       
    if(!events[evt]){            
    return;
        }
        //遍歷事件處理程序列表,執(zhí)行其中每一個事件處理程序        
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(args);
        }
    }
    //使用模塊模式的方式,向外界提供綁定事件處理程序和觸發(fā)事件的接口    
    return {        
    on: on,        
    fire: fire
    }
})();

實際應(yīng)用

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('change', function(val){    
console.log('change...  now val is ' + val);  
});
Event.on('click', function(val){    
console.log('click.... now val is '+ val);
})
Event.fire('change', 'xin');
Event.fire('click', 'xin');
Event.off('change');

看完了這篇文章，相信你對常用的前端開發(fā)設(shè)計模式是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！