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

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的方法,并不是很清楚,如果有大神指导一下就好了,学前端都是靠的自学!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FSociety

Python网易云音乐爬虫进阶篇

年前写过一篇爬网易云音乐评论的文章,爬不了多久又回被封,所以爬下来那么点根本做不了什么分析,后面就再改了下,加入了多线程,一次性爬一个歌手最热门50首歌曲的评论...

1352
来自专栏Kubernetes

Kubernetes GC in v1.3

本文是对kubernetes GC proposal的解读分析,是对GC in kubernetes v1.3的内部结构剖析,并记录了其中一些关键点,以便日后能...

2775
来自专栏数据结构与算法

洛谷P2939 [USACO09FEB]改造路Revamping Trails(最短路)

题目描述 Farmer John dutifully checks on the cows every day. He traverses some of th...

3716
来自专栏jouypub

Spring Task中cron表达式详解

_{秒}:取值范围(0-59),不允许为空值,若值不合法,调度器将抛出SchedulerException异常

540
来自专栏林冠宏的技术文章

PHP 获取 特定时间范围 类

目录 前序   用途   功能及事项   使用方法   代码及注释 前序:   总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,...

75310
来自专栏WindCoder

java基于SSM的Quartz计划任务配置

想找下Quartz的资料看下,某度,随之眼瞎,你们copy就算了,就不能用心点么,连个代码高亮都不忍心加,实在没心情看下去,但还是要忍一下,待我整理完整,再也不...

471
来自专栏我杨某人的青春满是悔恨

走进 RxSwift 之冷暖自知

前段时间身体跟心态都出了点问题,博客也很久没更新了。细心的朋友可能发现我的个人介绍换了,由原先高冷装逼的“谢绝转载”变为略显矫情的“人生谁能不迷茫”了。不知道大...

771
来自专栏天天P图攻城狮

从源码角度剖析Android系统EGL及GL线程

从事 OpenGL ES 相关开发的技术人员,常常会对一些问题感到困惑,例如GL线程究竟是什么?为什么在这个 GL 线程申请的 texture 不能在另外一个 ...

1.2K11
来自专栏熊二哥

Java基础组件快速入门

最近需要上线很多新的JAVA项目,然而很多JAVA的相关库都不太熟悉,项目实现起来遇到了不小阻力,熬了好几天夜。现在手头的工作基本完成了,因此打算好好来归纳下j...

2086
来自专栏技术小讲堂

iBatis.Net(5):Data Map(了解)

总算,总算,能写点示例啦,呵呵,其实前面的几篇,我感觉自己写的也很生硬,没有Demo理解起来是很困难,很多名词,反正我初次接触iBatis的时候,是一点也不理解...

3196

扫码关注云+社区