前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript 面向对象编程设计模式之访问者模式

javascript 面向对象编程设计模式之访问者模式

作者头像
杭州前端工程师
发布2018-06-15 11:48:20
5950
发布2018-06-15 11:48:20
举报
文章被收录于专栏:前端大白专栏前端大白专栏
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的方法,并不是很清楚,如果有大神指导一下就好了,学前端都是靠的自学!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档