本文實(shí)例講述了javascript設(shè)計模式 ? 訪問者模式原理與用法。分享給大家供大家參考，具體如下：

介紹：訪問者模式比較復(fù)雜，它包含訪問者和被訪問元素兩個主要組成部分，這些被訪問的元素通常具有不同的類型，且不同的訪問者可以對他們進(jìn)行不同的訪問操作。訪問者模式的主要目的是將數(shù)據(jù)結(jié)構(gòu)與數(shù)據(jù)操作相分離。

定義：提供一個作用于某對象結(jié)構(gòu)中的個元素的操作表示，它使得可以再不改變各元素的類的前提下定義作用于這些元素的新操作。訪問者模式是一種對象行為型模式

場景：使用PC結(jié)構(gòu)demo來解釋下訪問者模式

示例：

var Keyboard = function(){ this.accept = function(computerPartVisitor){ computerPartVisitor.visit(this); }} var Monitor = function(){ this.accept = function(computerPartVisitor){ computerPartVisitor.visit(this); }} var Mouse = function(){ this.accept = function(computerPartVisitor){ computerPartVisitor.visit(this); }} var Computer = function(){ var parts = [new Keyboard(), new Monitor(), new Mouse()]; this.accept = function(computerPartVisitor){ computerPartVisitor.visit(this); _acceptAll(computerPartVisitor); } var _acceptAll = function(computerPartVisitor){ parts.map(function(item){ item.accept(computerPartVisitor) }); }} var ComputerPartDisplayVisitor = function(){ this.visit = function(item){ if(item.constructor == Keyboard){ console.log('Displaying Keyboard.'); }else if(item.constructor == Monitor){ console.log('Displaying Monitor.'); }else if(item.constructor == Mouse){ console.log('Displaying Mouse.'); }else if(item.constructor == Computer){ console.log('Displaying Computer.'); }else{ console.log('Error'); } }} var computer = new Computer();computer.accept(new ComputerPartDisplayVisitor());// Displaying Computer.// Displaying Keyboard.// Displaying Monitor.// Displaying Mouse.

這個模式比較復(fù)雜，我們先介紹下組成：

ComputerPartDisplayVisitor稱為訪問者，它為對象結(jié)構(gòu)中的每一個具體元素例如Keyboard，Mouse等聲明一個訪問操作。當(dāng)訪問Keyboard時就會輸出Displaying Keyboard。 Keyboard，Monitor，Mouse稱為元素，他們包含一個accept方法，用來觸發(fā)傳遞進(jìn)來的訪問者 Computer稱為對象結(jié)構(gòu)，它是一個元素的集合。parts數(shù)組用于存放元素對象，以供不同訪問者訪問。_acceptAll方法用來遍歷內(nèi)部元素。 訪問者通過accept訪問元素內(nèi)部，元素內(nèi)部也可以通過參數(shù)調(diào)用訪問者的visit方法。這種調(diào)用機(jī)制稱為雙重分派。

訪問者模式總結(jié)：

優(yōu)點(diǎn)：* 增加新的訪問操作便捷，只需要加一個新的訪問者類。* 將有關(guān)原色對象的訪問行為集合到一個訪問者對象中，類的職責(zé)更清晰。* 讓用戶在不修改現(xiàn)有元素層次結(jié)構(gòu)的情況下，定義作用于該層次結(jié)構(gòu)的操作。

缺點(diǎn)：* 增加新的元素類很困難，在訪問者模式下，每增加一個新的元素,對應(yīng)要增加訪問者中的操作。* 破壞封裝。訪問者模式要求訪問者對象訪問并調(diào)用每一個元素對象的操作，這意味著元素必須暴露一些內(nèi)部操作和內(nèi)部狀態(tài)。

適用場景：* 一個對象結(jié)構(gòu)包含多個類型的對象，希望對這些對象實(shí)施一些依賴其具體類型的操作。* 需要對一個對象結(jié)構(gòu)中的對象進(jìn)行橫多不同的并且不相關(guān)的操作，而且需要避免讓這些操作污染這些對象的類。* 對象結(jié)構(gòu)中對象對應(yīng)的類很少改變，但經(jīng)常需要再次對象結(jié)構(gòu)上定義新的操作。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。