关于换工作

发表于 2021-01-05

今天看到一个公众号的文章，搜到了关于是否该换工作的判断标准，做下记录

消耗感

第一个是消耗感，什么意思呢？

就是你在你现在的公司一直在用已经熟练的技能、方法被动地完成事情，不再有新的思考和成长，也就是“吃老本”。

持续吃老本是一个危险信号，这就说明你处在营养流失阶段，一点点被消耗。如果你经常有这种感觉，那这个地方已经不适合你了，你需要新的领域施展拳脚～

盖洛普的12个问题

第二个是盖洛普的12个问题。这12个问题可以用来测试你对当前工作环境的满意度。12 个问题如下：

我知道公司对我的工作要求吗？
我有做好我的工作所需要的材料和设备吗？
在工作中，我每天都有机会做我最擅长做的事吗？
在过去的七天里，我因工作出色而受到表扬吗？
我觉得我的主管或同事关心我的个人情况吗？
工作单位有人鼓励我的发展吗？
在工作中，我觉得我的意见受到重视吗？
公司的使命目标使我觉得我的工作重要吗？
我的同事们致力于高质量的工作吗？
我在工作单位有一个最要好的朋友吗？
在过去的六个月内，工作单位有人和我谈及我的进步吗？
过去一年里，我在工作中有机会学习和成长吗？

如果有超过一半的答案都是笃定的no，说明这份工作对你的成长帮助微乎其微，而且你已然毫无眷恋，完全可以跳槽。

原文地址：https://mp.weixin.qq.com/s/--CS5PWfSEBO6RZl6lV6-Q

Cannot read property 'range' of null

发表于 2021-01-05

Cannot read property ‘range’ of null

引用问题：

https://github.com/babel/babel-eslint/issues/681
https://github.com/babel/babel-eslint/issues/530

这个问题有点烦，在 mono repo 中新增了一个 package 后，eslint 开始抛出这个异常。

按上面的问题描述，大概就是一些版本不一致导致的问题。
尝试了升级eslint、babel eslint等相关版本，clean && install 了无数次，一会儿好一会坏…

解决

最后用这个方案解决了。
https://github.com/babel/babel-eslint/issues/530#issuecomment-438635426

1
2
3

yarn clean
删除所用 lock 文件
yarn install

手写Promise

发表于 2020-09-12

在前面的文章说了要来手写promise，这里整理下实现思路。

概述

class内使用这些属性或者方法描述

promiseState 保存当前状态 pending fulfilled rejected
promiseResult 保存执行结果
promiseFulfillReactions 保存pending之前注册的成功回调方法
promiseRejectReactions 保存pending之前注册的失败回调方法
onFulfilled promise then onFulfilled 方法
onRejected promise then onRejected 方法

Promise A+ 规范参见这里：https://promisesaplus.com/#point-49

有些规范内提到的场景并未实现，比如对 thenable 的支持等，实现的部分包含如下所列出

异步执行回调

Promise的规范并没有要求一定要使用微任务，浏览器原生都是基于微任务这里也做类似实现，首先需要实现一个微任务管理器来管理微任务，像Vue nextTick 那样。

微任务有浏览器中的各类 Observer (MutationObserver InterSectionObserver PerformanceObserver) 和 Promise 的回调，以及Node中的 process.nextTick

实现 nextTick 大致可以两种：

一种就是像 Vue nextTick 会将当前事件循环中加入的所有 fn 保存在一个队列，然后在一个微任务中执行清空一起洗澡，比如下图：

阅读全文 »

hack Vue AsyncComponent 兼容VueRouter 组件内hook

发表于 2020-08-29

知识点

Vue支持对异步组件的加载状态处理，参见这里 Vue异步组件处理加载状态

背景

其实我们大部分使用场景都是结合路由异步加载一起使用，然后可能会导致 Vue组件内的路由钩子无法触发，以前遇到时用了别的方案绕过去了，现在有其它同事也遇到类似问题那就兼容一下

原因是因为：路由组件钩子是触发在路由所指向的跟组件上，所以你触发不到了..，解决方案就是在中间 functional 组件把钩子转发到实际的视图组件。

阅读全文 »

window scroll 事件

发表于 2020-08-14

scroll 事件最熟悉不过的，我自己其实一直有一些疑问：

scroll 事件不支持冒泡，那 window 上的 scroll 事件又是如何捕获到的？
为何可以对 document 添加 scroll 事件，怎么又冒泡到了 window 上？
window scrollTop 的值到底在 html 还是 body 上？
…

原本想找到一些官方的规范或者说明文档，但是并没有 …
以下所有测试都是在 DOCTYPE 声明为 html5 的情况下，旧的不在关注

Scroll Bubbles

关于 Scroll 事件冒泡机制这里先做个说明：

Element 元素 scroll 事件确实 不冒泡 传播事件，也就是我们的日常体验，比如一个div元素内的滚动事件你无法去委托事件。
Ducument 文档 scroll 事件是 冒泡事件，所以在window上去监听 scroll 事件，event target 为 document

这里要注意的就是 Ducument文档 的scroll事件是支持冒泡的，可以在测试Demo 中代码运行。

阅读全文 »

基于JSON Schema的前端可视化活动编辑器

发表于 2020-07-27

先看效果，为一个可视化活动编辑器。

vue-editor

演示地址：https://form.lljj.me/vue-editor.html#/editor
项目地址：https://github.com/lljj-x/vue-json-schema-form/

基于 JSON Schema 开箱即用的简单活动可视化编辑器。

背景

在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。

参考资料：https://github.com/CntChen/cntchen.github.io/issues/15

JSON Schema 主要运用在如下几点：

基于 JSON Schema 来动态生成数据配置表单和数据校验
结合发布流程同步 JSON Schema 到后端系统做接口数据校验
活动版块对应一个 JSON Schema 和一份视图 View组件 即可

阅读全文 »

一道面试题联想到请求拦截器和取消请求的实现

发表于 2020-07-19

背景

来自一道同事的面试题，如下：

有一个函数数组，里面可能是同步，也可能是异步的 Promise，怎么保持顺序执行并且让前一个函数的返回值作为后一个函数执行的参数。

理解了下就是一个异步函数数组要顺序执行，当时想了下答案，基于 Promise 的链式调用，所以没直接递归而是通过 while 循环来实现，代码大致如下：

// 任务列表
const fnList = [
    () => 1,
    p => Promise.resolve(p + 1),
    p => p + 2,
    p => Promise.resolve(p + 3),
    p => Promise.resolve(p + 4),
    p => p + 5,
    p => p
];

let preResult;
while (fnList.length > 0) {
    const curFn = fnList.shift();
    if (preResult) {
        preResult = preResult.then((res) => {
            console.log(res);
            return curFn(res);
        });
    } else {
        // 首次调用无参数
        preResult = Promise.resolve(curFn());
    }
}