本文实例讲述了javascript设计模式 – 访问者模式原理与用法。分享给大家供大家参考，具体如下：介绍：访问者模式比较复杂，它包含访问者和被访问元素两个主要组成部分，这些被访问的元素通常具有不同的类型，且不同的访问者可以对他们进行不同的访问操作。访问者模式的主要目的是将数据结构与数据操作相分离。介绍：定义：提供一个作用于某对象结构中的个元素的操作表示，它使得可以再不改变各元素的类的前提下定义作用于这些元素的新操作。访问者模式是一种对象行为型模式定义：场景：使用PC结构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.


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.

这个模式比较复杂，我们先介绍下组成：

ComputerPartDisplayVisitor称为访问者，它为对象结构中的每一个具体元素例如Keyboard，Mouse等声明一个访问操作。当访问Keyboard时就会输出Displaying Keyboard。

Keyboard，Monitor，Mouse称为元素，他们包含一个accept方法，用来触发传递进来的访问者

Computer称为对象结构，它是一个元素的集合。parts数组用于存放元素对象，以供不同访问者访问。_acceptAll方法用来遍历内部元素。

访问者通过accept访问元素内部，元素内部也可以通过参数调用访问者的visit方法。这种调用机制称为双重分派。
ComputerPartDisplayVisitor称为访问者，它为对象结构中的每一个具体元素例如Keyboard，Mouse等声明一个访问操作。当访问Keyboard时就会输出Displaying Keyboard。Keyboard，Monitor，Mouse称为元素，他们包含一个accept方法，用来触发传递进来的访问者Computer称为对象结构，它是一个元素的集合。parts数组用于存放元素对象，以供不同访问者访问。_acceptAll方法用来遍历内部元素。访问者通过accept访问元素内部，元素内部也可以通过参数调用访问者的visit方法。这种调用机制称为双重分派。访问者模式总结：访问者模式总结：优点：
* 增加新的访问操作便捷，只需要加一个新的访问者类。
* 将有关原色对象的访问行为集合到一个访问者对象中，类的职责更清晰。
* 让用户在不修改现有元素层次结构的情况下，定义作用于该层次结构的操作。优点：
缺点：
* 增加新的元素类很困难，在访问者模式下，每增加一个新的元素,对应要增加访问者中的操作。
* 破坏封装。访问者模式要求访问者对象访问并调用每一个元素对象的操作，这意味着元素必须暴露一些内部操作和内部状态。缺点：适用场景：
* 一个对象结构包含多个类型的对象，希望对这些对象实施一些依赖其具体类型的操作。
* 需要对一个对象结构中的对象进行横多不同的并且不相关的操作，而且需要避免让这些操作污染这些对象的类。
* 对象结构中对象对应的类很少改变，但经常需要再次对象结构上定义新的操作。适用场景：感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。