2021SC@SDUSC
总述
上次我们对canvas的canvasPainter.js中的最后一部分做了分析总结，对于Quark Renderer渲染引擎来讲，它都是一个元素。那这些元素里有好多的属性，每个元素上面都有，比如说它当前的位置、缩放的状态、颜色、阴影、渐变等可视的属性。我们之前几次学习都是对canvas中的js文件进行了深度的解析，对于一些canvas中调用的其他文件也进行了学习。那么这次，我们对下一部分进行分析学习。
我们这次的学习部分是事件系统处理，事件系统也是比较有意思的一点，因为Canvas是一个很低级的很底层的API的接口，没有提供一些高层级的这种封装，那就意味着你要去做一些事件的时候就很麻烦，必须自己实现。通过对事件event包中的代码内容进行整体查看分析，可以得知整个Quark Renderer的事件系统是通过模拟DOM事件的设计来进行对事件的处理的。
对事件处理部分的分析
对Eventful.js 整体把控
事件系统里比较精华的部分就在Eventful.js的包里。所有跟事件相关的东西，都在该包中，负责对事件系统进行一些全局把控。该包中的函数也为不支持事件机制的类提供事件支持，其基本机制类似 W3C DOM 事件，需要事件机制的类可以 mixin 此类中的工具函数。
对具体方法分析
构造函数
首先是构造函数，需要参数，分别是一个对象，作为事件处理者，也就是当前事件处理函数执行时的作用域；还有一个函数，需要方法返回true才会执行；还有一个方法，该方法会在事件处理函数被调用之后执行；最后一个参数也是一个函数，该方法在添加或者删除事件监听的时候被调用。
let Eventful = function (eventProcessor) {
this._$handlers = {
};
this._$eventProcessor = eventProcessor;
this._$suspends = new Set();
};
该处理函数只会被调用一次，使用完然后就会被删除。该函数有四个参数，分别是event（事件名）、query（事件过滤条件）、handler（事件处理函数）、context（事件处理函数执行的上下文），在该函数中返回的值调用了on函数。下面我们分析on函数。
one: function (event, query, handler, context) {
return on(this, event, query, handler, context, true);
},
该方法的作用是绑定事件处理函数，传入四个参数，分别是事件名、条件过滤条件、事件处理函数、以及事件处理函数执行的上下文。返回时on函数。
on: function (event, query, handler, context) {
return on(this, event, query, handler, context, false);
},
on函数
在on函数中，我们看到他传入的值比one更多一个，是一个boolean值，表示是否只执行一次，我们传入的是true，其他参数都是一样的。在下面的函数代码中我们可以看到，有三个判断，分别对传入的参数进行了分析判断，第一个if是判断query是否为function，第二个参数是判断handler和event是否为不为null，第三个判断是对_h[event]进行判断，如果不存在就将该值设置为一个数组。
let _h = eventful._$handlers;
if (typeof query === 'function') {
context = handler;
handler = query;
query = null;
}
if (!handler || !event) {
return eventful;
}
if (!_h[event]) {
_h[event] = [];
}
在剩余部分中，对_h[event]进行遍历，判断他们的ctx和h是否对应context和handler，返回eventful。
然后定义一个wrap对象，将值都设置为在该方法中得到的参数。然后得到他们lastIndex和lastWrap，调用callListenerChanged函数，该函数主要对ventful._$eventProcessor.afterListenerChanged赋值为eventType
for (let i = 0; i < _h[event].length; i++) {
if (_h[event][i].ctx === context && _h[event][i].h === handler) {
return eventful;
}
}
let wrap = {
h: handler,
one: isOnce,
query: query,
ctx: context || eventful,
callAtLast: handler.qrEventfulCallAtLast,
};
let lastIndex = _h[event].length - 1;
let lastWrap = _h[event][lastIndex];
lastWrap && lastWrap.callAtLast ? _h[event].splice(lastIndex, 0, wrap) : _h[event].push(wrap);
callListenerChanged(eventful, event);
return eventful;
off函数
有on函数就会有off方法与之对应，该方法的作用就是解除事件处理函数，需要传入的参数有三个，分别是事件名，如果参数为null，所有事件监听器都会被删除；事件处理函数handle，如果参数为null，所有事件监听器都会被删除；最后一个参数就是上下文context，显示页面。
该函数的主要操作时分别对参数进行判断，是否为null，然后进行上述的操作，确定删除的事件处理函数，在方法体中，我们可以看到使用了for循环来进行对绑定事件的遍历，找出符合不移除的事件，移入新的list中，然后删除原来的事件队列。
off: function (event, handler, context) {
let _h = this._$handlers;
if (!event) {
this._$handlers = {
};
return this;
}
if (handler) {
if (_h[event]) {
let newList = [];
for (let i = 0, l = _h[event].length; i < l; i++) {
if (_h[event][i].ctx !== context && _h[event][i].h !== handler) {
newList.push(_h[event][i]);
}
}
_h[event] = newList;
}
if (_h[event] && _h[event].length === 0) {
delete _h[event];
}
} else {
delete _h[event];
}
callListenerChanged(this, event);
return this;
},
isSilene、suspend、resume方法
除了这些函数之外，还有一些其他的函数，负责对事件的触发等发挥作用，如isSilene、suspend、resume等。isSilent方阿飞的作用是判断是否绑定了事件处理函数，返回的是处理函数的长度，如果为0就是未绑定，也就是未绑定。suspend函数的作用是挂起一个事件，被挂起的事件的不会被触发，在鼠标和触摸屏交互的过程中，经常需要把某个事件临时挂起以避免误触。而resume方法的作用是恢复触发，与suspend方法相对应。
isSilent: function (event) {
let _h = this._$handlers;
return !_h[event] || !_h[event].length;
},
suspend: function (eventName) {
this._$suspends.add(eventName);
},
resume: function (eventName) {
this._$suspends.delete(eventName);
},
trigger方法
最后一个方法，该方法时trigger，该方法的作用时触发一个事件，主要是对传入的参数（事件名）进行处理,先判断是否存在该事件名，然后再找出该事件，接着通过switch进行匹配。
if (this._$suspends.has(eventName)) {
return;
}
let _h = this._$handlers[eventName];
let eventProcessor = this._$eventProcessor;
这是进行对查到的arglen进行长度匹配，从骨干网优化建议，对长度进行匹配。
let args = arguments;
let argLen = args.length;
switch (argLen) {
case 1:
hItem.h.call(hItem.ctx);
break;
case 2:
hItem.h.call(hItem.ctx, args[1]);
break;
case 3:
hItem.h.call(hItem.ctx, args[1], args[2]);
break;
case 4:
hItem.h.call(hItem.ctx, args[1], args[2], args[3]);
break;
case 5:
hItem.h.call(hItem.ctx, args[1], args[2], args[3], args[4]);
break;
default:
hItem.h.apply(hItem.ctx, args);
break;
}
总结
以上便是Eventful.js中的所有方法，再进行完整体分析后，我们从每个方法的实际作用展开的讨论，对于关键代码进行细节分析。总体而言，该js文件负责事件处理的核心，对于canvasRender的事件处理有着至关重要的作用。