前端常見的設計模式主要有以下幾種：
- 單例模式
- 工廠模式
- 策略模式
- 代理模式
- 觀察者模式
- 模塊模式
- 構造函數模式
- 混合模式
- 單例模式
這種設計模式的思想是確保一個類只有唯一實例，一般用於全局緩存，比如全局window，唯一登錄浮窗等。采用閉包的方式實現如下：
var single = (function(){
let instance;
function getInstance(){
// 如果該實例存在，則直接返回，否則就對其實例化
if( instance=== undefined ){
instance= new Construct();
}
return instance;
}
function Construct(){
// ... 生成單例的構造函數的代碼
}
return {
getInstance : getInstance
}
})();
- 工廠模式
工廠模式是創建對象的常用設計模式，為了不暴露創建對象的具體邏輯，將邏輯封裝在一個函數中，這個函數就稱為一個工廠。本質上是一個負責生產對象實例的工廠。工廠模式根據抽象程度的不同可以分為：簡單工廠，工廠方法和抽象工廠。通常用於根據權限生成角色的場景，抽象工廠方法的實現如下：
//安全模式創建的工廠方法函數
let UserFactory = function(role) {
if(this instanceof UserFactory) {
var s = new this[role]();
return s;
} else {
return new UserFactory(role);
}
}
//工廠方法函數的原型中設置所有對象的構造函數
UserFactory.prototype = {
SuperAdmin: function() {
this.name = "超級管理員",
this.viewPage = ['首頁', '通訊錄', '發現頁', '應用數據', '權限管理']
},
Admin: function() {
this.name = "管理員",
this.viewPage = ['首頁', '通訊錄', '發現頁', '應用數據']
},
NormalUser: function() {
this.name = '普通用戶',
this.viewPage = ['首頁', '通訊錄', '發現頁']
}
}
//調用
let superAdmin = UserFactory('SuperAdmin');
let admin = UserFactory('Admin')
let normalUser = UserFactory('NormalUser')
- 策略模式
策略模式的本意將算法的使用與算法的實現分離開來，避免多重判斷調用哪些算法。適用於有多個判斷分支的場景，如解決表單驗證的問題。你可以創建一個validator對象，有一個validate()方法。這個方法被調用時不用區分具體的表單類型，它總是會返回同樣的結果——一個沒有通過驗證的列表和錯誤信息。實現方式如下：
// 對於vip客戶
function vipPrice() {
this.discount = 0.5;
}
vipPrice.prototype.getPrice = function(price) {
return price * this.discount;
}
// 對於老客戶
function oldPrice() {
this.discount = 0.3;
}
oldPrice.prototype.getPrice = function(price) {
return price * this.discount;
}
// 對於普通客戶
function Price() {
this.discount = 1;
}
Price.prototype.getPrice = function(price) {
return price ;
}
// 上下文，對於客戶端的使用
function Context() {
this.name = '';
this.strategy = null;
this.price = 0;
}
Context.prototype.set = function(name, strategy, price) {
this.name = name;
this.strategy = strategy;
this.price = price;
}
Context.prototype.getResult = function() {
console.log(this.name + ' 的結賬價為: ' + this.strategy.getPrice(this.price));
}
var context = new Context();
var vip = new vipPrice();
context.set ('vip客戶', vip, 200);
context.getResult(); // vip客戶 的結賬價為: 100
var old = new oldPrice();
context.set ('老客戶', old, 200);
context.getResult(); // 老客戶 的結賬價為: 60
var Price = new Price();
context.set ('普通客戶', Price, 200);
context.getResult(); // 普通客戶 的結賬價為: 200
- 代理模式
代理模式是為其他對象提供一種代理，也就是當其他對象直接訪問該對象時，如果開銷較大，就可以通過這個代理層控制對該對象的訪問。常見的使用場景為懶加載，合並http請求和緩存。代理模式的實現如下：
(function(){
// 目標對象，是真正被代理的對象
function Subject(){}
Subject.prototype.request = function(){};
function Proxy(realSubject){
this.realSubject = realSubject;
}
Proxy.prototype.request = function(){
this.realSubject.request();
};
}());
- 觀察者模式
也叫發布訂閱模式，在這種模式中，一個訂閱者訂閱發布者，當一個特定的事件發生的時候，發布者會通知（調用）所有的訂閱者。實現代碼如下：
var EventCenter = (function(){
var events = {};
function on(event, handler){
events[event] = events[event] || [];
events[event].push({
handler: handler
});
}
function fire(event, args){
if (!events[event]) {return}
for (var i = 0; i < events[event].length; i++) {
events[event][i].handler(args);
}
}
function off(event){
delete events[event];
}
return {
on: on,
fire: fire,
off: off
}
})();
EventCenter.on('event', function(data){
console.log('event received...');
});
- 模塊模式
模塊模式可以指定類想暴露的屬性和方法，並且不會污染全局。采用閉包的形式，實現如下：
var Person = (function() {
var name = 'xxx'
function sayName() {
console.log(name)
}
return{
name: name,
sayName: sayName
}
})()
- 構造函數模式和混合模式
構造函數和混合模式就是js中繼承的兩種實現方式，前者通過構造函數的形式定義類，通過new新增實例。而后者是將構造函數的引用屬性和方法放到其原型上，子類是父類原型的一個實例。
供自己學習使用，來源：https://www.jianshu.com/p/4f3014fb8b8b