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