小游戏触摸事件的详解和几种实现方法优劣分析（下）

[CoderMing]

上一篇我们写了小游戏触摸事件的官方接口的一些坑，那今天我们来讲讲使用小游戏的触摸事件的几种方式。

我们要实现什么？

我们知道，小游戏在每一帧渲染之前，都要进行一次状态更新。在本小游戏中，就是在update函数中定义的。每次渲染之前检测现在的gameStatus，然后根据游戏逻辑对相应的数据进行更新。
那么问题就来了，我们应该如何在每次渲染的时候能获取到逻辑事件的值呢？
我这儿想到了三个方法：

一. 直接和渲染方法分离，每次触发事件后自行更新dataBus

简直是太直白了！就是和平常切图一样，直接监听个事件就开始用。太好写了～
但是，要是这么简单，这个世界就太美好了😂这个方法弊端也非常明显：

1. 性能问题
   首先我们每16ms都会调用upadte函数和渲染函数，如果要在每次触发事件的时候再调用一个逻辑函数，给js引擎执行队列的压力是很大的。就算我们采用函数截流，防抖等方法，也会带来很多不必要的开销。
2. 数据不同步的问题
   我们每次渲染页面的时候，都是根据渲染时的dataBus状态来决定的。所以我们要做到所有状态改变都在渲染前完成，渲染时dataBus固定不变。那如果我在渲染的过程中触发了事件监听函数，那么就可能会出现dataBus被改变的情况。当然js引擎是单线程的，一般情况下不会在渲染中途执行。但我们要知道，代码结构只要出现了异步操作，就会出现问题。
3. 不好做点击检测。因为游戏状态的不同，导致了需要检测的元素不一样。这样子的话，就会重复地做很多无用功。我们所希望的是一个游戏状态用一个逻辑函数处理。
   总结：这种方法简单粗暴，适用于一些简单的游戏。稍微复杂的就不要去使用了

二. 每次监听事件后，将数值传入dataBus，然后再逻辑中处理。

这就是本小游戏的实现方法。

如图，我们定义了游戏所需的所有逻辑处理函数，并在触发他们的时候将Touch值传入dataBus。然后我们就可以在逻辑处理函数中从dataBus中取出使用了～就像样：

我们来分析一下这样做的优点：

1. 解决了数据不同步的问题
   很好理解。在这个方法中，点击事件只做了将Touch对象实例传入dataBus的功能。其余一切的逻辑处理都放在了逻辑函数中。
2. 好做检测。因为不同的页面逻辑函数也不一样，这样我们可以针对地在页面做所需要的检测。
   但这样，还有没有不足的地方？答案肯定是有的。
3. 需要每次执行完函数后就移除touch对象实例
   。
   因为有很多情况下，点击检测的各个像素区域是有重叠的。所以我们需要在每次触发点击事件后就去除touch实例对象。这是不可避免的。所以就会出现：
   
   （去除为对象的目的是为了避免获取属性的时候报错）
4. 仍然还是给js引擎队列添加了很多负担。
   我们仍然是在每次触发的时候都执行一遍逻辑函数，所以队列的压力还是有的。

后续考虑的优化方法

针对上面的一些问题，我的思考是：

1. 封装对应的逻辑处理函数
   我们知道，在以前AngularJS（1.x）中，我们每次改变完值都得手动触发一次脏检测。但其实我们可以封装一个函数，自动在执行完后去除Touch对象实例。
2. 函数截流
   老套方法了，更多信息可以搜事件处理优化，最近在看underscore的源码，里面函数截流和防抖写得非常好（虽然我还没看到hhhh）

（全文完）

[fuxingZhang]

写的好