求關注

前端常見的設計模式主要有以下幾種：1. 單例模式2. 工廠模式3. 策略模式4. 代理模式5. 觀察者模式6. 模塊模式7. 構造函數模式8. 混合模式

• 單例模式
  這種設計模式的思想是確保一個類只有唯一實例，一般用于全局緩存，比如全局window，唯一登錄浮窗等。采用閉包的方式實現如下：

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

//安全模式創建的工廠方法函數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客戶 的結賬價為: 100var old = new oldPrice();context.set ('老客戶', old, 200);context.getResult(); // 老客戶 的結賬價為: 60var 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新增實例。而后者是將構造函數的引用屬性和方法放到其原型上，子類是父類原型的一個實例。

總結

以上是生活随笔為你收集整理的原型模式的应用场景_前端常用设计模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。