前端常用設計模式

2021-10-23 18:07:22 字數 2755 閱讀 2871

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

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新增例項。而後者是將建構函式的引用屬性和方法放到其原型上,子類是父類原型的乙個例項。

前端常用設計模式

炒個冷飯,設計模式 前端常用設計模式 我們在面試的時候很多情況都需要手寫 所以我們寫都時候盡量用es6,且裡面要用設計模式。這樣評分可以達到優秀,如果只是手寫實現出功能那麼我們只能是及格 主要面試和別人競爭 游泳健身了解一下 github 哈哈哈哈哈?你走到一棟大樓面前 哇!鋼筋,水泥,木板。面向過...

前端常用設計模式

像流水線作業,產出一樣的產品。傳參進去,操作的具體邏輯封裝在乙個方法裡,最終返回乙個物件。將new操作單獨封裝,遇到new時,就要考慮是否用工廠模式 這個creator就是乙個工廠,裡面有create函式,工廠通過create函式建立product。這樣通過create已經把真正的建構函式封裝起來,...

前端開發設計模式

高階高階前端開發之路之設計模式,衝!記錄一些學的七七八八的程式設計思維,設計模式 vue router物件是放在vue的原型鏈上的 只有get沒有set vue.prototype.router router object.defineproperty vue.prototype router 總結...