写在开头。经过一段时间的准备，笔者最近成功入驻了shopee。所以最近没更新内容，等稳定了之后，再继续输出，写一下入职后要做的事情。加入shopee后，导师给了一个入门任务。这个任务就是实现一个事件机制。实现addEventListener、removeEventListener、dispatchEvent这三个方法。需求是这样的：兼容W3C的事件冒泡和事件捕获模型（addEventListener的useCapture参数）每个事件都会有一个优先级（开发者设置，最高为0，数字越大优先级越低，如果不设置，默认为0），如果有多个事件需要同时执行，则按照优先级从高到低执行；如果多个事件具有相同的优先级，则首先定义的事件将首先执行。当事件冒泡/捕获模型冲突时，优先保证事件冒泡/捕获的执行顺序。您需要将代码编写为TypeScript模块。导入方法和API请参考文档。如果多次为同一个元素绑定同一个同类型的Listener，该事件只会在满足条件时触发一次，事件触发的优先级以最终注册的优先级为准。加成项还有一个比较有意思的地方：尽量保证一帧时间（16ms）内所有事件的执行时间总和不超过10ms（暂且不考虑单个事件超过10ms），需要执行本帧来不及执行的事件，事件放在下一帧执行（仍需按优先级执行）。我的想法W3C事件模型是先捕获再冒泡。对于addEventListener：入参为dom节点、监听方法名、回调方法。可以使用其他配置...选择接受。实现思路：同样处理注册的事件，创建一个weakmap对象，数据结构如下：{//冒泡数组cb:()=>void//事件触发回调range:0//本次事件优先级once:false//兼容opt的once参数}],capture:[]//捕获数组，同上above}}}方法也需要监听一次原始dom节点，当用户手动点击时触发事件。这时候就需要对这个事件做一个缓存，这样在removeEventListener的时候就可以取消监听了。对于removeEventListener：入参为dom节点、监听方法名、回调、是否使用捕获模型（可选，默认false）。实现思路：首先是健壮的属性处理，然后删除weakmap对象中对应节点的对应事件。然后移除addEventListener时添加的监听器。对于dispatchEvent：这个方法应该算是key，它的入参是dom节点和监听方法的名字。实现思路：先进行健壮性处理，然后将当前节点和父节点的捕获数组和冒泡数组递归存入数组。依次调用数组中的回调。10ms的实现，使用的API是requestAnimationFrame。rAF传入一个回调，在回调中可以获取一个时间参数。time参数表示当前按requestAnimationFrame()排序的回调函数被触发的时间。同一帧中的多个回调每个都会收到相同的时间戳，即使在计算前一个回调的工作量期间已经消耗了一些时间。时间戳是以毫秒为单位的十进制数，最小精度为1毫秒（1000微秒）（--来自MDN）。然后将运行performance.now()得到的时间戳与当前rAF回调接收到的时间进行比较。如果在10ms以内，可以继续从数组中取事件调用。反之，放在下一帧执行一次。如果有一次参数，则将当前对象引用设置为空对象。在这里我可以提供我的想法，你可以尝试自己写。//将当前节点和父节点递归存储到数组中if(eventMap.has(parent)){constparentObj=eventMap.get(parent)[handleName];上限=[...parentObj.capture,...上限];bubs=[...bubs,...parentObj.bubble];recurrenceFindNodeList(caps,bubs,parent,handleName);}return[...caps,...bubs];}//对于10ms实现requestAnimationFrame(handler);functionhandler(time:number){lettaskFinishTime:number=window.performance.now();while(taskFinishTime-time<10){constnextTask=tasklist.shift();如果(nextTask?.cb){nextTask.cb();}taskFinishTime=window.performance.now();}if(tasklist.length>0){requestAnimationFrame(handler);}}写在最后shopee是一家很年轻的公司。从技术角度来说，可以学到很多新技术，参与到他们项目从0到1的过程中，相信这里的进步会很大。如果你想了解更多关于Shopee的信息，请加我微信：zhi794855679。愿意努力工作，得到自己想要的。
