另一页

Object.create(null)与 {}的区别

Object.create(null)创建了一个没有原型的对象。而{}继承自Object。

继承Object即继承了hasOwnProperty等属性。

Vue组件的data属性为什么推荐用函数

第一层 官网推荐

因为官方文档上就是这么写的。

第二层 多组件共享引用

其实针对这个常见的问题,有很多人知道,如果同一份组件多次渲染,而JS传对象又只传引用,就会导致多组件使用同一份状态。

第三层 原因

上面的说法是对的。但是理论上使用导出的vue实例创建组件不会导致共享引用。一个文件直接export default一份对象字面量,看起来其他文件不会共享。但这只是看起来,实际上被编译成es5语法后,export default导出的对象直接变成普通对象,而非字面量。在es6环境,export deault对象字面量可能仍然是引用。

React焦点管理

最普通的场景

设置元素的ref,获取引用,调用focus()方法

在不同层级的组件间管理

父组件需要获得子组件的引用,需要传给子组件回调,让父组件能够获得引用。

有列表的场景

一种方法是将所有子组件的ref传给父组件,这样需要一个ref数组。由于数组可能动态变化,不能用useRef hook,只能在class组件内实现。数组变化更新ref。

也可以只创建一个ReactRef。渲染列表时,会被聚焦的那一项被赋予ref,由父组件管理这个引用。

更新状态后如何处理按钮事件

我想实现一个需求:编辑框聚焦时按钮显示“完成”,编辑框失焦时显示“新任务”。看起来很好实现,但面临尴尬的问题:当我点击“完成”时,编辑框已经失焦,其实此时应该显示“新任务”了。所以,真实的逻辑应该加上:如果失焦时按钮没有被点击,那么显示“新任务”,如果因为按钮被聚焦而导致编辑框失焦,那么应该显示“完成”直到鼠标松开。

沿着这个思路非常绕,我想了很久都不知道如何处理。稍微理了一下,决定按钮是否显示的条件,不只有编辑框是否聚集,还有“刚才编辑框是否聚焦”。怎么理解“刚才”呢?难道要通过时间来设计逻辑吗?

我想还是要借助一下时间的逻辑。即blur事件触发后,状态在一定时间后变为false,如果按下的是按钮,则终止这个过程,由按钮变更状态。

如何理解一定时间?它可以是较短的时间。但设想一下,即便是50ms,也意味着在50ms内焦点变化没有任何响应。如果50ms内再次聚焦,问题就大了,因为在focus时触发的状态变化其实被丢弃了,这个概念有点类似数据库的丢失修改。会导致即使处于编辑状态,状态也为“非编辑”。

尽管50ms内失焦再聚焦的概率比较小,我们仍然需要考虑,有没有更好的方案?时间维度上,0ms是最好的,逻辑维度上,Blur事件、Focus事件后立即检查是最好的。其实可以做到,只是我们不能为每个元素都绑定Focus,我们需要在Blur里设置Focus后才能执行的操作。了解过JS异步机制就会知道,点击按钮导致焦点转移,这个过程先运行Blur再运行Focus,但两个操作都被放进了异步队列中,如果我们在Blur中设置setTimeout(()=>{},0),最后的执行顺序是Blur-Focus-setTimeout。我们实现了Focus后立即执行一些操作,却不必为所有元素绑定focus。

剩下的问题是如何判断Focus的元素。这一点DOM提供了activeElement的API,我们只需要为按钮添加某个独特的DOM属性,用于判断就好了。

最后我们整理一下。编辑框聚焦时状态变为Editing,焦点转移时触发编辑框的Blur,然后触发activeEleemnt的Focus,之后执行Blur添加的异步操作,依据activeElement判断状态是否置为NonEditing。如果activeElement是按钮,则不改变状态,等按钮Click触发后再改变。

补充:为什么要这样做?如果不对按钮的Click做特殊处理,那么点按钮的时候“完成”立即变成“新任务”,导致触发的onClick事件不符合预期。

Slider/Fullpage实现

实现思路

A.监听滚动,用JS替换元素内容。好处是渲染区域和可视区域一样大,不会浪费资源,但翻页效果不好做。

B.监听滚动,用JS控制translate变化。可视区域下,所有页面都被渲染。

遇到的问题

1.wheel事件太频繁,一次操作只应触发一次。我没有用setTimeout+clear的防抖做法,而是直接比较时间戳,属于节流。但就效果来说,两种方式都有问题。

防抖的意思是,多次频繁操作只在最后一次操作后触发一次。但Chrome(Safari已做优化)中wheel事件可能会持续接近1s,这种延迟几乎不可接受。

节流的意思是允许多次操作的第一次操作立即执行,之后一段时间都不允许再执行。这么做的后果是,1s内我都不能再划动第二次,这也不是我想要的。

我想要的效果是,初次事件立即触发,之后的事件忽略,下一次滑动时也能立即触发。

为此我做了一些优化,比如规定一个合理的忽略时间,还有,防止连续两次方向相同的滚动(因为这样很容易误判),但允许方向相反的滚动。以及forceUpdate,避免setState异步行为的延迟。

这些优化背后有一个问题,即我无法判断,在相同方向滚动两次时,究竟是上一次滚动剩下的事件,还是新的事件?不能通过滚动的程度来判断,因为用户可能轻轻一划,也可能划得很快很远。

很快,我想到了,一直以来,我用了一个React组件的一个属性来存储时间,但每个子组件都可以有自己的计时器。组件一不能连续滑动,但不影响组件二上的滑动。

举个例子,从页面1切换到页面2后,页面1在1.5s内都不会触发新事件,被视为滞后的wheel事件。但页面2可以继续滑向页面1或页面3。

分别计时虽然一定程度上区分了上一次滚动的事件和新手势的事件,但不完美。1.5s内,我有可能两次触发相同方向的滚动。

吃过晚饭,有力气思考了。我没有必要拘泥于首次之后1.5s内不触发,我可以结合防抖和节流,第一次事件发生就执行,但每次事件都会延后下一次执行的时机。

滑动效果演示:简历

进度条

进度条能起到安慰的作用,用户更有耐心等待。网页加载的进度条通常也不会持续很长时间,因此没有必要根据网络请求判断进度,只需要做动画+onload时完成。

let style = document.createElement("style");
style.innerHTML = `        .progress-axdf{
    height:10px;width:100vw;background:rgb(255, 255, 176)
}
.progress-axdf::before{
    content: '';
    display: block;
    animation: progress-axdf;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    height: 10px;
    width: 0vw;
    background: rgb(135, 207, 255);
}
.progress-fin::before{
   animation: progress-fin;
   animation-duration: .6s;
   animation-fill-mode: forwards;
}
@keyframes progress-axdf {
    0%{
        width: 0;
    }
    100%{
        width: 80vw;
    }
}
@keyframes progress-fin {
    0%{
        width: 80vw;
    }
    100%{
        width: 100vw;
    }
}`;

document.querySelector("head").appendChild(style);
let el = document.createElement("div");
el.classList.add("progress-axdf");
let root = document.querySelector("html");
root.insertBefore(el, root.firstChild);
let finProgress = () => {
  el.classList.add("progress-fin");
};

演示:

12