Hammer.js分析(二)——manager.js

简介: “Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性。manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会先做大致的流程分析,具体分析会在接下来的文章中详谈。

“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性。

manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会先做大致的流程分析,具体分析会在接下来的文章中详谈。


一、Manager构造函数


初始化流程如下所示:


29.jpg

对应的函数代码如下所示:

function Manager(element, options) {
  this.options = assign({}, Hammer.defaults, options || {});//拷贝设置
  this.options.inputTarget = this.options.inputTarget || element;//目标元素
  this.handlers = {};//事件组,例如自定义的tap事件等
  this.session = {};//全局属性缓存,例如当前Recognizer对象
  this.recognizers = [];//当前绑定的Recognizer对象数组,通过add方法添加
  this.element = element;
  this.input = createInputInstance(this);//根据特性初始化相关的input子类 此函数在input.js中
  this.touchAction = new TouchAction(this, this.options.touchAction);
  toggleCssProps(this, true);//执行Hammer中的cssProps设置
  //初始化需要执行的识别器
  each(this.options.recognizers, function(item) {
    var recognizer = this.add(new(item[0])(item[1]));
    item[2] && recognizer.recognizeWith(item[2]);
    item[3] && recognizer.requireFailure(item[3]);
  }, this);
}


二、Manager对象中的函数


1)set(options)


修改Manager对象的相关参数,可以在需要的时候更新touchAction的值。

如果改动了“inputTarget”参数,input对象就要重新初始化。


mc.set({ touchAction: TOUCH_ACTION_PAN_X, inputTarget: null });


2)get(Recognizer|String)、add(Recognizer) 和 remove(Recognizer|String)


get:通过事件名(tap、pinch等)获取recognizers数组中相应的识别器,如果传入的是识别器则直接返回这个识别器

add:添加识别器到recognizers数组中。会做判断其是否存在,如果存在就先移除,然后再做添加,并执行touchAction对象的update方法,上面有讲到。

remove:先通过get方法获取到相应的识别器,再判断是否存在,最后recognizers数组做splice操作,并执行touchAction对象的update方法。

 

3)on(events, handler) 和 off(events, [handler])


on:绑定事件,通过空格隔开,可以绑定多个事件,splitStr就是通过空格字符串的函数。事件都会push到handlers[event]数组中,key就是事件名

off:移除绑定了的事件,会判断是否传入了handler,没有就直接delete,有的话还要搜索下是否在handlers[event]数组中,有就做splice

 

4)recognize(inputData)


执行recognizers数组。input.js中的inputHandler函数会调用这个方法,inputData是自定义事件对象,内容如下:


30.jpg


方法的大致流程如下:


31.jpg



下面的代码涉及了多处Recognizer中概念,下面的代码就先看个大致过程:


recognize: function(inputData) {
  var session = this.session;//全局缓存,在Input对象中会用到
  if (session.stopped) {//在stop方法中可以设置,有两个选项
    return;
  }
  // 执行CSS属性“touch-action”的 polyfill
  this.touchAction.preventDefaults(inputData);
  var recognizer;
  var recognizers = this.recognizers;//在Hammer或外面调用add添加的识别器数组
  // 每个识别器有四个状态:BEGAN, CHANGED, ENDED 和 RECOGNIZED
  // 如果curRecognizer还没设置就是 `null`
  var curRecognizer = session.curRecognizer;
  // 如果是一个新的或当前识别器的状态为RECOGNIZED,就重置为null
  if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
    curRecognizer = session.curRecognizer = null;
  }
  var i = 0;
  while (i < recognizers.length) {
    recognizer = recognizers[i];
    // 满足下面的条件就执行识别器的recognize方法,否则重置
    // 1.   缓存的stopped不能是FORCED_STOP状态
    // 2.   curRecognizer还未设置或curRecognizer与循环中的recognizer相同
    // 3.   recognizer设置了可以与curRecognizer同时执行,这里有个识别器recognizeWith的概念后面会讲到
    if (session.stopped !== FORCED_STOP && ( // 1
        !curRecognizer || recognizer == curRecognizer || // 2
        recognizer.canRecognizeWith(curRecognizer))) { // 3
      recognizer.recognize(inputData);
    } else {
      recognizer.reset();
    }
    // curRecognizer为空,并且recognizer的状态是STATE_BEGAN、STATE_CHANGED和STATE_ENDED中的一个
    if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
      curRecognizer = session.curRecognizer = recognizer;//设置curRecognizer与session.curRecognizer
    }
    i++;
  }
}

在上面的代码中会涉及到recoginzer.js中的“recognizeWith”,这里简单介绍下“recognizeWith”和“requireFailure”。

1)recognizeWith:其实就是让几个事件同时触发,例如旋转的时候还要做放大。

2)requireFailure:正好相反,例如双击的时候不触犯单机的事件。

相关文章
|
3月前
|
Web App开发 监控 JavaScript
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具,可以有效地监控和分析JavaScript内存使用情况,及时发现和解决内存泄漏、过度内存消耗等问题,从而提高JavaScript应用程序的性能和稳定性。在实际开发中,可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
|
3月前
|
JavaScript 前端开发 API
Vue.js与Angular的优劣分析
Vue.js和Angular都是非常流行的JavaScript框架,它们在构建现代Web应用程序方面各有优劣
122 64
|
3月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
75 3
|
3月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
99 4
|
3月前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
120 4
|
3月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
508 9
|
3月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
98 1
|
3月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
116 1
|
4月前
|
数据采集 JSON 前端开发
JavaScript逆向爬虫实战分析
JavaScript逆向爬虫实战分析
65 4
|
4月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
56 0

热门文章

最新文章