這篇文章主要講解了“web前端需要了解的設(shè)計(jì)模式有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web前端需要了解的設(shè)計(jì)模式有哪些”吧！

10年積累的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有安寧免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

什么是設(shè)計(jì)模式?

設(shè)計(jì)模式是對(duì)軟件設(shè)計(jì)開(kāi)發(fā)過(guò)程中反復(fù)出現(xiàn)的某類(lèi)問(wèn)題的通用解決方案。設(shè)計(jì)模式更多的是指導(dǎo)思想和方法論，而不是現(xiàn)成的代碼，當(dāng)然每種設(shè)計(jì)模式都有每種語(yǔ)言中的具體實(shí)現(xiàn)方式。學(xué)習(xí)設(shè)計(jì)模式更多的是理解各種模式的內(nèi)在思想和解決的問(wèn)題，畢竟這是前人無(wú)數(shù)經(jīng)驗(yàn)總結(jié)成的優(yōu)秀實(shí)踐，而代碼實(shí)現(xiàn)則是對(duì)加深理解的輔助。

設(shè)計(jì)模式的類(lèi)型

設(shè)計(jì)模式可以分為三大類(lèi)：

1. 結(jié)構(gòu)型模式(Structural Patterns)： 通過(guò)識(shí)別系統(tǒng)中組件間的簡(jiǎn)單關(guān)系來(lái)簡(jiǎn)化系統(tǒng)的設(shè)計(jì)。

2. 創(chuàng)建型模式(Creational Patterns)：  處理對(duì)象的創(chuàng)建，根據(jù)實(shí)際情況使用合適的方式創(chuàng)建對(duì)象。常規(guī)的對(duì)象創(chuàng)建方式可能會(huì)導(dǎo)致設(shè)計(jì)上的問(wèn)題，或增加設(shè)計(jì)的復(fù)雜度。創(chuàng)建型模式通過(guò)以某種方式控制對(duì)象的創(chuàng)建來(lái)解決問(wèn)題。

3. 行為型模式(Behavioral Patterns)： 用于識(shí)別對(duì)象之間常見(jiàn)的交互模式并加以實(shí)現(xiàn)，如此，增加了這些交互的靈活性。

以上定義非常的抽象和晦澀，對(duì)于我們初學(xué)者并沒(méi)有太多幫助，要了解這些設(shè)計(jì)模式真正的作用和價(jià)值還是需要通過(guò)實(shí)踐去加以理解。

一. 結(jié)構(gòu)型模式(Structural Patterns)

1. 外觀模式(Facade Pattern)

外觀模式是最常見(jiàn)的設(shè)計(jì)模式之一，它為子系統(tǒng)中的一組接口提供一個(gè)統(tǒng)一的高層接口，使子系統(tǒng)更容易使用。簡(jiǎn)而言之外觀設(shè)計(jì)模式就是把多個(gè)子系統(tǒng)中復(fù)雜邏輯進(jìn)行抽象，從而提供一個(gè)更統(tǒng)一、更簡(jiǎn)潔、更易用的API。很多我們常用的框架和庫(kù)基本都遵循了外觀設(shè)計(jì)模式，比如JQuery就把復(fù)雜的原生DOM操作進(jìn)行了抽象和封裝，并消除了瀏覽器之間的兼容問(wèn)題，從而提供了一個(gè)更高級(jí)更易用的版本。其實(shí)在平時(shí)工作中我們也會(huì)經(jīng)常用到外觀模式進(jìn)行開(kāi)發(fā)，只是我們不自知而已。

比如，我們可以應(yīng)用外觀模式封裝一個(gè)統(tǒng)一的DOM元素事件綁定/取消方法，用于兼容不同版本的瀏覽器和更方便的調(diào)用：

// 綁定事件 function addEvent(element, event, handler) {   if (element.addEventListener) {     element.addEventListener(event, handler, false);   } else if (element.attachEvent) {     element.attachEvent('on' + event, handler);   } else {     element['on' + event] = fn;   } }  // 取消綁定 function removeEvent(element, event, handler) {   if (element.removeEventListener) {     element.removeEventListener(event, handler, false);   } else if (element.detachEvent) {     element.detachEvent('on' + event, handler);   } else {     element['on' + event] = null;   } }

2. 代理模式(Proxy Pattern)

首先，一切皆可代理，不管是在實(shí)現(xiàn)世界還是計(jì)算機(jī)世界。現(xiàn)實(shí)世界中買(mǎi)房有中介、打官司有律師、投資有經(jīng)紀(jì)人，他們都是代理，由他們幫你處理由于你缺少時(shí)間或者專(zhuān)業(yè)技能而無(wú)法完成的事務(wù)。類(lèi)比到計(jì)算機(jī)領(lǐng)域，代理也是一樣的作用，當(dāng)訪問(wèn)一個(gè)對(duì)象本身的代價(jià)太高(比如太占內(nèi)存、初始化時(shí)間太長(zhǎng)等)或者需要增加額外的邏輯又不修改對(duì)象本身時(shí)便可以使用代理。ES6中也增加了  Proxy 的功能。

歸納一下，代理模式可以解決以下的問(wèn)題：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 增加對(duì)一個(gè)對(duì)象的訪問(wèn)控制

3. 當(dāng)訪問(wèn)一個(gè)對(duì)象的過(guò)程中需要增加額外的邏輯

要實(shí)現(xiàn)代理模式需要三部分：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. Real Subject：真實(shí)對(duì)象

3. Proxy：代理對(duì)象

4. Subject接口：Real Subject 和 Proxy都需要實(shí)現(xiàn)的接口，這樣Proxy才能被當(dāng)成Real Subject的“替身”使用

比如有一個(gè)股票價(jià)格查詢(xún)接口，調(diào)用這個(gè)接口需要比較久的時(shí)間(用 setTimeout 模擬2s的調(diào)用時(shí)間)：

StockPriceAPI：

function StockPriceAPI() {   // Subject Interface實(shí)現(xiàn)   this.getValue = function (stock, callback) {     console.log('Calling external API ... ');     setTimeout(() => {       switch (stock) {         case 'GOOGL':           callback('$1265.23');           break;         case 'AAPL':           callback('$287.05');           break;         case 'MSFT':           callback('$173.70');           break;         default:           callback('');       }     }, 2000);   } }

我們不希望每次都去請(qǐng)求遠(yuǎn)程接口，而是增加緩存機(jī)制，當(dāng)有緩存的時(shí)候就直接從緩存中獲取，否則再去請(qǐng)求遠(yuǎn)程接口。我們可以通過(guò)一個(gè)proxy來(lái)實(shí)現(xiàn)：

StockPriceAPIProxy：

function StockPriceAPIProxy() {   // 緩存對(duì)象   this.cache = {};   // 真實(shí)API對(duì)象   this.realAPI = new StockPriceAPI();   // Subject Interface實(shí)現(xiàn)   this.getValue = function (stock, callback) {     const cachedPrice = this.cache[stock];     if (cachedPrice) {       console.log('Got price from cache');       callback(cachedPrice);     } else {       this.realAPI.getValue(stock, (price) => {         this.cache[stock] = price;         callback(price);       });     }   } }

注意，Proxy需要和真實(shí)對(duì)象一樣實(shí)現(xiàn) getValue() 方法，getValue()就屬于 Subject 接口。

測(cè)試一下：

const api = new StockPriceAPIProxy(); api.getValue('GOOGL', (price) => { console.log(price) }); api.getValue('AAPL', (price) => { console.log(price) }); api.getValue('MSFT', (price) => { console.log(price) });  setTimeout(() => {   api.getValue('GOOGL', (price) => { console.log(price) });   api.getValue('AAPL', (price) => { console.log(price) });   api.getValue('MSFT', (price) => { console.log(price) }); }, 3000)

輸出：

Calling external API ...  Calling external API ...  Calling external API ...  $1265.23 $287.05 $173.70 Got price from cache $1265.23 Got price from cache $287.05 Got price from cache $173.70

二. 創(chuàng)建型模式(Creational Patterns)

1. 工廠模式(Factory Pattern)

現(xiàn)實(shí)生活中的工廠按照既定程序制造產(chǎn)品，隨著生產(chǎn)原料和流程不同生產(chǎn)出來(lái)的產(chǎn)品也會(huì)有區(qū)別。應(yīng)用到軟件工程的領(lǐng)域，工廠可以看成是一個(gè)制造其他對(duì)象的對(duì)象，制造出的對(duì)象也會(huì)隨著傳入工廠對(duì)象參數(shù)的不同而有所區(qū)別。

什么場(chǎng)景適合應(yīng)用工廠模式而不是直接 new  一個(gè)對(duì)象呢?當(dāng)構(gòu)造函數(shù)過(guò)多不方便管理，且需要?jiǎng)?chuàng)建的對(duì)象之間存在某些關(guān)聯(lián)(有同一個(gè)父類(lèi)、實(shí)現(xiàn)同一個(gè)接口等)時(shí)，不妨使用工廠模式。工廠模式提供一種集中化、統(tǒng)一化的方式，避免了分散創(chuàng)建對(duì)象導(dǎo)致的代碼重復(fù)、靈活性差的問(wèn)題。

以上圖為例，我們構(gòu)造一個(gè)簡(jiǎn)單的汽車(chē)工廠來(lái)生產(chǎn)汽車(chē)：

// 汽車(chē)構(gòu)造函數(shù) function SuzukiCar(color) {   this.color = color;   this.brand = 'Suzuki'; }  // 汽車(chē)構(gòu)造函數(shù) function HondaCar(color) {   this.color = color;   this.brand = 'Honda'; }  // 汽車(chē)構(gòu)造函數(shù) function BMWCar(color) {   this.color = color;   this.brand = 'BMW'; }  // 汽車(chē)品牌枚舉 const BRANDS = {   suzuki: 1,   honda: 2,   bmw: 3 }  /**  * 汽車(chē)工廠  */ function CarFactory() {   this.create = function (brand, color) {     switch (brand) {       case BRANDS.suzuki:         return new SuzukiCar(color);       case BRANDS.honda:         return new HondaCar(color);       case BRANDS.bmw:         return new BMWCar(color);       default:         break;     }   } }

測(cè)試一下：

const carFactory = new CarFactory(); const cars = [];  cars.push(carFactory.create(BRANDS.suzuki, 'brown')); cars.push(carFactory.create(BRANDS.honda, 'grey')); cars.push(carFactory.create(BRANDS.bmw, 'red'));  function say() {   console.log(`Hi, I am a ${this.color} ${this.brand} car`); }  for (const car of cars) {   say.call(car); }

輸出：

Hi, I am a brown Suzuki car Hi, I am a grey Honda car Hi, I am a red BMW car

使用工廠模式之后，不再需要重復(fù)引入一個(gè)個(gè)構(gòu)造函數(shù)，只需要引入工廠對(duì)象就可以方便的創(chuàng)建各類(lèi)對(duì)象。

2. 單例模式(Singleton Pattern)

顧名思義，單例模式中Class的實(shí)例個(gè)數(shù)最多為1。當(dāng)需要一個(gè)對(duì)象去貫穿整個(gè)系統(tǒng)執(zhí)行某些任務(wù)時(shí)，單例模式就派上了用場(chǎng)。而除此之外的場(chǎng)景盡量避免單例模式的使用，因?yàn)閱卫Ｊ綍?huì)引入全局狀態(tài)，而一個(gè)健康的系統(tǒng)應(yīng)該避免引入過(guò)多的全局狀態(tài)。

實(shí)現(xiàn)單例模式需要解決以下幾個(gè)問(wèn)題：

1. 如何確定Class只有一個(gè)實(shí)例?

2. 如何簡(jiǎn)便的訪問(wèn)Class的唯一實(shí)例?

3. Class如何控制實(shí)例化的過(guò)程?

4. 如何將Class的實(shí)例個(gè)數(shù)限制為1?

我們一般通過(guò)實(shí)現(xiàn)以下兩點(diǎn)來(lái)解決上述問(wèn)題：

1. 隱藏Class的構(gòu)造函數(shù)，避免多次實(shí)例化

2. 通過(guò)暴露一個(gè) getInstance() 方法來(lái)創(chuàng)建/獲取唯一實(shí)例

Javascript中單例模式可以通過(guò)以下方式實(shí)現(xiàn)：

// 單例構(gòu)造器 const FooServiceSingleton = (function () {   // 隱藏的Class的構(gòu)造函數(shù)   function FooService() {}    // 未初始化的單例對(duì)象   let fooService;    return {     // 創(chuàng)建/獲取單例對(duì)象的函數(shù)     getInstance: function () {       if (!fooService) {         fooService = new FooService();       }       return fooService;     }   } })();

實(shí)現(xiàn)的關(guān)鍵點(diǎn)有：1. 使用 IIFE創(chuàng)建局部作用域并即時(shí)執(zhí)行;2. getInstance() 為一個(gè) 閉包  ，使用閉包保存局部作用域中的單例對(duì)象并返回。

我們可以驗(yàn)證下單例對(duì)象是否創(chuàng)建成功：

const fooService1 = FooServiceSingleton.getInstance(); const fooService2 = FooServiceSingleton.getInstance();  console.log(fooService1 === fooService2); // true

三. 行為型模式(Behavioral Patterns)

1. 策略模式(Strategy Pattern)

策略模式簡(jiǎn)單描述就是：對(duì)象有某個(gè)行為，但是在不同的場(chǎng)景中，該行為有不同的實(shí)現(xiàn)算法。比如每個(gè)人都要“交個(gè)人所得稅”，但是“在美國(guó)交個(gè)人所得稅”和“在中國(guó)交個(gè)人所得稅”就有不同的算稅方法。最常見(jiàn)的使用策略模式的場(chǎng)景如登錄鑒權(quán)，鑒權(quán)算法取決于用戶(hù)的登錄方式是手機(jī)、郵箱或者第三方的微信登錄等等，而且登錄方式也只有在運(yùn)行時(shí)才能獲取，獲取到登錄方式后再動(dòng)態(tài)的配置鑒權(quán)策略。所有這些策略應(yīng)該實(shí)現(xiàn)統(tǒng)一的接口，或者說(shuō)有統(tǒng)一的行為模式。Node  生態(tài)里著名的鑒權(quán)庫(kù) Passport.js API的設(shè)計(jì)就應(yīng)用了策略模式。

還是以登錄鑒權(quán)的例子我們仿照 passport.js 的思路通過(guò)代碼來(lái)理解策略模式：

/**  * 登錄控制器  */ function LoginController() {   this.strategy = undefined;   this.setStrategy = function (strategy) {     this.strategy = strategy;     this.login = this.strategy.login;   } }  /**  * 用戶(hù)名、密碼登錄策略  */ function LocalStragegy() {   this.login = ({ username, password }) => {     console.log(username, password);     // authenticating with username and password...    } }  /**  * 手機(jī)號(hào)、驗(yàn)證碼登錄策略  */ function PhoneStragety() {   this.login = ({ phone, verifyCode }) => {     console.log(phone, verifyCode);     // authenticating with hone and verifyCode...    } }  /**  * 第三方社交登錄策略  */ function SocialStragety() {   this.login = ({ id, secret }) => {     console.log(id, secret);     // authenticating with id and secret...    } }  const loginController = new LoginController();  // 調(diào)用用戶(hù)名、密碼登錄接口，使用LocalStrategy app.use('/login/local', function (req, res) {   loginController.setStrategy(new LocalStragegy());   loginController.login(req.body); });  // 調(diào)用手機(jī)、驗(yàn)證碼登錄接口，使用PhoneStrategy app.use('/login/phone', function (req, res) {   loginController.setStrategy(new PhoneStragety());   loginController.login(req.body); });  // 調(diào)用社交登錄接口，使用SocialStrategy app.use('/login/social', function (req, res) {   loginController.setStrategy(new SocialStragety());   loginController.login(req.body); });

從以上示例可以得出使用策略模式有以下優(yōu)勢(shì)：

1. 方便在運(yùn)行時(shí)切換算法和策略

2. 代碼更簡(jiǎn)潔，避免使用大量的條件判斷

3. 關(guān)注分離，每個(gè)strategy類(lèi)控制自己的算法邏輯，strategy和其使用者之間也相互獨(dú)立

2. 迭代器模式(Iterator Pattern)

ES6中的迭代器 Iterator  相信大家都不陌生，迭代器用于遍歷容器(集合)并訪問(wèn)容器中的元素，而且無(wú)論容器的數(shù)據(jù)結(jié)構(gòu)是什么(Array、Set、Map等)，迭代器的接口都應(yīng)該是一樣的，都需要遵循  迭代器協(xié)議。

迭代器模式解決了以下問(wèn)題：

1. 提供一致的遍歷各種數(shù)據(jù)結(jié)構(gòu)的方式，而不用了解數(shù)據(jù)的內(nèi)部結(jié)構(gòu)

2. 提供遍歷容器(集合)的能力而無(wú)需改變?nèi)萜鞯慕涌?/p>

一個(gè)迭代器通常需要實(shí)現(xiàn)以下接口：

• hasNext()：判斷迭代是否結(jié)束，返回Boolean

• next()：查找并返回下一個(gè)元素

為Javascript的數(shù)組實(shí)現(xiàn)一個(gè)迭代器可以這么寫(xiě)：

const item = [1, 'red', false, 3.14];  function Iterator(items) {   this.items = items;   this.index = 0; }  Iterator.prototype = {   hasNext: function () {     return this.index < this.items.length;   },   next: function () {     return this.items[this.index++];   } }

驗(yàn)證一下迭代器是否工作：

const iterator = new Iterator(item);    while(iterator.hasNext()){    console.log(iterator.next());  }

輸出：

1, red, false, 3.14

ES6提供了更簡(jiǎn)單的迭代循環(huán)語(yǔ)法 for...of，使用該語(yǔ)法的前提是操作對(duì)象需要實(shí)現(xiàn) 可迭代協(xié)議(The iterable  protocol)，簡(jiǎn)單說(shuō)就是該對(duì)象有個(gè)Key為 Symbol.iterator 的方法，該方法返回一個(gè)iterator對(duì)象。

比如我們實(shí)現(xiàn)一個(gè) Range 類(lèi)用于在某個(gè)數(shù)字區(qū)間進(jìn)行迭代：

function Range(start, end) {   return {     [Symbol.iterator]: function () {       return {         next() {           if (start < end) {             return { value: start++, done: false };           }           return { done: true, value: end };         }       }     }   } }

驗(yàn)證一下：

for (num of Range(1, 5)) {   console.log(num); }

輸出：

1, 2, 3, 4

3. 觀察者模式(Observer Pattern)

觀察者模式又稱(chēng)發(fā)布訂閱模式(Publish/Subscribe  Pattern)，是我們經(jīng)常接觸到的設(shè)計(jì)模式，日常生活中的應(yīng)用也比比皆是，比如你訂閱了某個(gè)博主的頻道，當(dāng)有內(nèi)容更新時(shí)會(huì)收到推送;又比如JavaScript中的事件訂閱響應(yīng)機(jī)制。觀察者模式的思想用一句話描述就是：被觀察對(duì)象(subject)維護(hù)一組觀察者(observer)，當(dāng)被觀察對(duì)象狀態(tài)改變時(shí)，通過(guò)調(diào)用觀察者的某個(gè)方法將這些變化通知到觀察者。

比如給DOM元素綁定事件的 addEventListener() 方法：

target.addEventListener(type, listener [, options]);

Target就是被觀察對(duì)象Subject，listener就是觀察者Observer。

觀察者模式中Subject對(duì)象一般需要實(shí)現(xiàn)以下API：

• subscribe(): 接收一個(gè)觀察者observer對(duì)象，使其訂閱自己

• unsubscribe(): 接收一個(gè)觀察者observer對(duì)象，使其取消訂閱自己

• fire(): 觸發(fā)事件，通知到所有觀察者

用JavaScript手動(dòng)實(shí)現(xiàn)觀察者模式：

// 被觀察者 function Subject() {   this.observers = []; }  Subject.prototype = {   // 訂閱   subscribe: function (observer) {     this.observers.push(observer);   },   // 取消訂閱   unsubscribe: function (observerToRemove) {     this.observers = this.observers.filter(observer => {       return observer !== observerToRemove;     })   },   // 事件觸發(fā)   fire: function () {     this.observers.forEach(observer => {       observer.call();     });   } }

驗(yàn)證一下訂閱是否成功：

const subject = new Subject();  function observer1() {   console.log('Observer 1 Firing!'); }   function observer2() {   console.log('Observer 2 Firing!'); }  subject.subscribe(observer1); subject.subscribe(observer2); subject.fire();

輸出：

Observer 1 Firing!  Observer 2 Firing!

驗(yàn)證一下取消訂閱是否成功：

subject.unsubscribe(observer2); subject.fire();

輸出：

Observer 1 Firing!

4. 中介者模式(Mediator Pattern)

在中介者模式中，中介者(Mediator)包裝了一系列對(duì)象相互作用的方式，使得這些對(duì)象不必直接相互作用，而是由中介者協(xié)調(diào)它們之間的交互，從而使它們可以松散偶合。當(dāng)某些對(duì)象之間的作用發(fā)生改變時(shí)，不會(huì)立即影響其他的一些對(duì)象之間的作用，保證這些作用可以彼此獨(dú)立的變化。

中介者模式和觀察者模式有一定的相似性，都是一對(duì)多的關(guān)系，也都是集中式通信，不同的是中介者模式是處理同級(jí)對(duì)象之間的交互，而觀察者模式是處理Observer和Subject之間的交互。中介者模式有些像婚戀中介，相親對(duì)象剛開(kāi)始并不能直接交流，而是要通過(guò)中介去篩選匹配再?zèng)Q定誰(shuí)和誰(shuí)見(jiàn)面。中介者模式比較常見(jiàn)的應(yīng)用比如聊天室，聊天室里面的人之間并不能直接對(duì)話，而是通過(guò)聊天室這一媒介進(jìn)行轉(zhuǎn)發(fā)。一個(gè)簡(jiǎn)易的聊天室模型可以實(shí)現(xiàn)如下：

聊天室成員類(lèi)：

function Member(name) {   this.name = name;   this.chatroom = null; }  Member.prototype = {   // 發(fā)送消息   send: function (message, toMember) {     this.chatroom.send(message, this, toMember);   },   // 接收消息   receive: function (message, fromMember) {     console.log(`${fromMember.name} to ${this.name}: ${message}`);   } }

聊天室類(lèi)：

function Chatroom() {   this.members = {}; }  Chatroom.prototype = {   // 增加成員   addMember: function (member) {     this.members[member.name] = member;     member.chatroom = this;   },   // 發(fā)送消息   send: function (message, fromMember, toMember) {     toMember.receive(message, fromMember);   } }

測(cè)試一下：

const chatroom = new Chatroom(); const bruce = new Member('bruce'); const frank = new Member('frank');  chatroom.addMember(bruce); chatroom.addMember(frank);  bruce.send('Hey frank', frank);

輸出：

bruce to frank: hello frank

這只是一個(gè)最簡(jiǎn)單的聊天室模型，真正的聊天室還可以加入更多的功能，比如敏感信息攔截、一對(duì)多聊天、廣播等。得益于中介者模式，Member不需要處理和聊天相關(guān)的復(fù)雜邏輯，而是全部交給Chatroom，有效的實(shí)現(xiàn)了關(guān)注分離。

5. 訪問(wèn)者模式(Visitor Pattern)

訪問(wèn)者模式是一種將算法與對(duì)象結(jié)構(gòu)分離的設(shè)計(jì)模式，通俗點(diǎn)講就是：訪問(wèn)者模式讓我們能夠在不改變一個(gè)對(duì)象結(jié)構(gòu)的前提下能夠給該對(duì)象增加新的邏輯，新增的邏輯保存在一個(gè)獨(dú)立的訪問(wèn)者對(duì)象中。訪問(wèn)者模式常用于拓展一些第三方的庫(kù)和工具。

訪問(wèn)者模式的實(shí)現(xiàn)有以下幾個(gè)要素：

1. Visitor Object：訪問(wèn)者對(duì)象，擁有一個(gè) visit() 方法

2. Receiving Object：接收對(duì)象，擁有一個(gè) accept() 方法

3. visit(receivingObj)：用于Visitor接收一個(gè)Receiving Object

4. accept(visitor)：用于Receving Object接收一個(gè)Visitor，并通過(guò)調(diào)用Visitor的 visit()  為其提供獲取Receiving Object數(shù)據(jù)的能力

簡(jiǎn)單的代碼實(shí)現(xiàn)如下：

Receiving Object：

function Employee(name, salary) {   this.name = name;   this.salary = salary; }  Employee.prototype = {   getSalary: function () {     return this.salary;   },   setSalary: function (salary) {     this.salary = salary;   },   accept: function (visitor) {     visitor.visit(this);   } }

Visitor Object：

function Visitor() { }  Visitor.prototype = {   visit: function (employee) {     employee.setSalary(employee.getSalary() * 2);   } }

驗(yàn)證一下：

const employee = new Employee('bruce', 1000); const visitor = new Visitor(); employee.accept(visitor);  console.log(employee.getSalary());

輸出：

2000

感謝各位的閱讀，以上就是“web前端需要了解的設(shè)計(jì)模式有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web前端需要了解的設(shè)計(jì)模式有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

新聞標(biāo)題：web前端需要了解的設(shè)計(jì)模式有哪些
文章出自：http://chinadenli.net/article36/ppsdsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)