本文实例讲述了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.
这个模式比较复杂，我们先介绍下组成：
访问者模式总结：
优点：
* 增加新的访问操作便捷，只需要加一个新的访问者类。
* 将有关原色对象的访问行为集合到一个访问者对象中，类的职责更清晰。
* 让用户在不修改现有元素层次结构的情况下，定义作用于该层次结构的操作。
缺点：
* 增加新的元素类很困难，在访问者模式下，每增加一个新的元素,对应要增加访问者中的操作。
* 破坏封装。访问者模式要求访问者对象访问并调用每一个元素对象的操作，这意味着元素必须暴露一些内部操作和内部状态。
适用场景：
* 一个对象结构包含多个类型的对象，希望对这些对象实施一些依赖其具体类型的操作。
* 需要对一个对象结构中的对象进行横多不同的并且不相关的操作，而且需要避免让这些操作污染这些对象的类。
* 对象结构中对象对应的类很少改变，但经常需要再次对象结构上定义新的操作。
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：测试上述代码运行效果。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论