function Input(inputDom) {
this.visitiors = {
'click': [],
'change': [],
'special': []
};
this.inputDom = inputDom
}
首先定义一个元素用于初始化数据结构.
Input.prototype.on = function (eventType, callback) {
if (typeof this.visitiors[eventType] !== 'undefined') {
this.visitiors[eventType].push(callback)
}
};
Input.prototype.off = function (eventType,callback) {
var visitors = this.visitiors[eventType];
if(typeof visitors !== 'undefined'){
var index = visitors.indexOf(callback);
if(index > 0){
visitors.splice(index,1)
}
}
};
第二步:对外暴露一个添加访问者的接口以及删除访问者的接口.
Input.prototype.trigger = function (eventType,event) {
var visitor = this.visitiors[eventType];
var eventFormat = processEvent(event);
if(typeof visitor !== 'undefined'){
for(var i = 0;i<visitor.length;i++){
visitor[i](eventFormat)
}
}
}
第三步,定义方法,通过这个方法input就可以和访问者建立起了关系,或者说访问者已经dnalf向接收者订阅了消息,一旦接受者收到了消息会向它的访问者一一传递.
接下的是使用方式了:
let a = new Input(this.p)
console.log(a)
a.on('click',function () {
console.log(333)
});
a.trigger('click')
在这里实例化了一个Input,然后在click上加一个方法,紧接着调用了trigger方法,这样就可以触发在Input上通过访问者模式添加的函数了:a.on('click',function(){}).这个便是我对访问者模式的理解.
还有off的方法,并不是很清楚,如果有大神指导一下就好了,学前端都是靠的自学!