前端常用設計模式

前端常見的設計模式主要有以下幾種：

1. 單例模式

2. 工廠模式

3. 策略模式

4. **模式

5. 觀察者模式

6. 模組模式

7. 建構函式模式

8. 混合模式

這種設計模式的思想是確保乙個類只有唯一例項，一般用於全域性快取，比如全域性window，唯一登入浮窗等。採用閉包的方式實現如下：

var single = (function()
return instance;
}function construct()
return 
})();

工廠模式是建立物件的常用設計模式，為了不暴露建立物件的具體邏輯，將邏輯封裝在乙個函式中，這個函式就稱為乙個工廠。本質上是乙個負責生產物件例項的工廠。工廠模式根據抽象程度的不同可以分為：簡單工廠，工廠方法和抽象工廠。通常用於根據許可權生成角色的場景，抽象工廠方法的實現如下：

//安全模式建立的工廠方法函式

let use***ctory = function(role)  else 
}//工廠方法函式的原型中設定所有物件的建構函式
use***ctory.prototype = ,
admin: function() ,
normaluser: function() 
}//呼叫
let superadmin = use***ctory('superadmin');
let admin = use***ctory('admin') 
let normaluser = use***ctory('normaluser')

策略模式的本意將演算法的使用與演算法的實現分離開來，避免多重判斷呼叫哪些演算法。適用於有多個判斷分支的場景，如解決表單驗證的問題。你可以建立乙個validator物件，有乙個validate()方法。這個方法被呼叫時不用區分具體的表單型別，它總是會返回同樣的結果——乙個沒有通過驗證的列表和錯誤資訊。實現方式如下：

// 對於vip客戶
function vipprice() 
vipprice.prototype.getprice = function(price) 
// 對於老客戶
function oldprice() 
oldprice.prototype.getprice = function(price) 
// 對於普通客戶
function price() 
price.prototype.getprice = function(price) 
// 上下文，對於客戶端的使用
function context() 
context.prototype.set = function(name, strategy, price) 
context.prototype.getresult = function() 
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()
subject.prototype.request = function(){};
function proxy(realsubject)
proxy.prototype.request = function();
}());

也叫發布訂閱模式，在這種模式中，乙個訂閱者訂閱發布者，當乙個特定的事件發生的時候，發布者會通知（呼叫）所有的訂閱者。實現**如下：

var eventcenter = (function();
function on(event, handler));
}function fire(event, args)
for (var i = 0; i < events[event].length; i++) 
}function off(event)
return 
})();
eventcenter.on('event', function(data));

模組模式可以指定類想暴露的屬性和方法，並且不會汙染全域性。採用閉包的形式，實現如下：

var person = (function() 
return
})()

建構函式和混合模式就是js中繼承的兩種實現方式，前者通過建構函式的形式定義類，通過new新增例項。而後者是將建構函式的引用屬性和方法放到其原型上，子類是父類原型的乙個例項。

前端常用設計模式

前端常用設計模式

前端常用設計模式

前端開發設計模式

相關推薦