Quark-Renderer----第十篇

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 ==&#