经过前段时间的准备,笔者最近已经成功入职shopee。所以最近没有更新内容,之后稳定下来之后会继续进行输出
入职shopee之后,导师有给到一个entry task,这个任务是实现一个事件机制。实现addEventListener
,removeEventListener
,dispatchEvent
这三个方法。
要求是这个样子的:
加分项有个比较有意思的东西:尽可能保证一帧的时间(16ms)中所有事件的执行时间之和不超过 10ms(暂时无需考虑超过 10ms 的单个事件),需要把在这一帧来不及执行的事件放到下一帧执行(依旧需要按照优先级来执行)
W3C的事件模型是先捕获后冒泡
入参为dom节点,监听方法名,回调方法,其他配置可以用...opt接受。
实现思路
:
将注册的事件同一处理,创建weakmap对象,数据结构如下:
{
Dom:{
handleName(监听方法名):{
// 存放处理捕获和冒泡的数组
bubble:[{ // 冒泡数组
cb:()=>void // 事件触发回调
range:0 // 此事件优先级
once:false // 兼容opt的once参数
}],
capture:[] // 捕获数组,同上
}
}
}
方法内部还需要对原来的dom节点进行一次监听,用来在用户手动点击触发时的事件。这时候需要将此事件做一个缓存,以便在removeEventListener
的时候去取消监听
入参为dom节点,监听方法名,回调,是否采用捕获模型(可选,默认false)
实现思路:
首先是健壮性处理,然后对weakmap对象中对应节点的对应事件做删除处理。然后把在addEventListener
的时候添加的监听进行remove。
这个方法应该算是关键,他的入参是dom节点和监听方法名。
实现思路:
这里可以提供一下我的思路,大家也可以自己尝试写一下。
// 递归的去将当前节点和父节点存入数组
function recurrenceFindNodeList(
caps: callbackType[],
bubs: callbackType[],
node: nodeType,
handleName: string
) {
const parent: any = node.parentNode;
if (eventMap.has(parent)) {
const parentObj = eventMap.get(parent)[handleName];
caps = [...parentObj.capture, ...caps];
bubs = [...bubs, ...parentObj.bubble];
recurrenceFindNodeList(caps, bubs, parent, handleName);
}
return [...caps, ...bubs];
}
// 对于10ms 的实现
requestAnimationFrame(handler);
function handler(time: number) {
let taskFinishTime: number = window.performance.now();
while (taskFinishTime - time < 10) {
const nextTask = tasklist.shift();
if (nextTask?.cb) {
nextTask.cb();
}
taskFinishTime = window.performance.now();
}
if (tasklist.length > 0) {
requestAnimationFrame(handler);
}
}
shopee是一个非常年轻化的公司,在这里从技术角度说,可以学习到很多新技术,并参加他们的项目从0到1的过程,相信在这里的进步会很大。如果大家想了解虾皮欢迎加我微信:zhi794855679 。
愿不负努力,所愿皆所求。
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发...
简介: 6月4日,以“开启分布式云新时代”为主题2021云边协同大会在北京举行,本...
作者:Joe Seifi 译者:前端小智 移动: https://mp.weixin.qq.com/s/p5... 有梦...
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=属性值)格式...
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
前言 Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可...
本文没有咬文嚼字的地方,只是一个配色技巧的分享,十分简单,简单到流泪,但或...
1.先瞧瞧效果: 2.代码是这样的: img src=images/circle.png alt= id=circle/@m...
1、纯工具操作步骤,懂代码更容易 划线就是不符合国人的审美观念,看着就别扭,...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...