Geass's Studio.

Geass's Studio.

Stay Hungry, Stay Foolish

从0到1实现useAxios
本文首发于 知乎专栏:饿了么大前端 在 React 发布 16.8.0 版本后,Hooks 功能正式启用。这一改变让函数式组件获得了质的飞跃,拥有了如同类组件般处理各种副作用的能力。而自定义 Hooks 的能力,进一步让我们通过 Hooks 封装,进行能力的抽象复用。 今天笔者将带领大家从 0 到 1 实现一个常用的数据请求 Hook —— useAxios。 该 Hook 将具有以下能力: 全局配置 手动请求控制 请求状态管理 请求取消 为什么要用 Hook为了说明使用 Hook 的优点,我们通过简单的一个 demo 进行对比。 不使用 Hook: 12345678910111...
浅谈微前端
微前端与微服务在这两三年里,移动应用出现了一种趋势,用户不想装那么多应用了。而往往一家大的商业公司,会提供一系列的应用。这些应用也从某种程度上,反应了这家公司的组织架构。然而,在用户的眼里他们就是一家公司,他们就只应该有一个产品。相似的,这种趋势也在桌面 Web 出现。聚合成为了一个技术趋势,体现在前端的聚合就是微服务化架构。对于后端服务而言,微服务提供了数据业务解耦的能力,降低了彼此依赖。而在前端微服务化上,则是恰恰与之相反的,人们更想要的结果是聚合,尤其是那些 To B(to Bussiness)的应用。 微服务是运行在各自系统上,控制各自对应的数据库,通过网络进行交互的后端服务。 ...
vue中keep-alive源码解析
本文所论述内容为 vue 2.6.8 版本。 keep-alivekeep-alive 是 vue 提供的一个组件级缓存的方案,作为一个不渲染真实 dom 节点的组件,keep-alive 将缓存其第一个子元素。从而保证页面跳转返回时保留页面原有的状态。 源码实现因为 keep-alive 内部涉及诸如 actived 等生命周期,我们暂不展开细讲,仅简单介绍该组件所做的一些事。该部分源码位于 [vue/src/core/components/keep-alive.js](https://github.com/vuejs/vue/blob/dev/src/core/components/...
从0到1实现Promise
Promise 是什么在实现 Promise 之前,我们首先要了解两点: Promise 是什么 官方的 Promise 有哪些东西 对于第一个问题,在 MDN 的解释,简的来说 Promise 就是一个为了解决异步调用问题,让使用者能以同步方式抽象处理异步调用的代理对象。通常会将其与 callback 的回调地狱进行对比,这里我们给出一个简单的小例子。 1234567891011121314// 使用回调asyncFunc((err, res) => { // ... otherAsyncFunc((err2, res2) => { // ...
AutoFill导致Chrome的compositionend事件不触发
问题Chrome 75.0.3770.100 版本,在 IME(input method editor) 模式 )下,输入内容触发 autofill 面板展示,选择任意一项,然后继续输入完毕。此时 compositionEnd 事件不触发。 在 Vue 组件库 ElementUI 的 2.12.0 版本前,在 IME 模式下通过检测 compositionend 事件设置输入完毕,从而触发正式 input 事件。因为此问题将导致 input 事件无法正确触发bug。 重现链接:传送门 123456789101112131415161718192021// element-ui 2.12....
Web 可访问性浅谈
最近,在处理一个 ElementUI 的 PR 时,有幸接触到关于可访问性的知识。在学习之余,也将之记录下来作为沉淀。 前言可访问性(Accessibility),简称 a11y,目的是为了使你的产品能够被更多人所正常使用。 在大多数人理解中(包括之前的笔者),可访问性主要是解决一些身体上不便的用户使用产品的问题。但广义上而言,可访问性也包含了移动端等各种设备,或者网络缓慢的产品使用人群等。 国内因为互联网目前处于高速发展中,更注重的是功能的快速迭代和市场的竞争。而可访问性实际解决的是小众人群的需求,在当前的发展环境中,属于 ROI(投入产出比)较小的部分,因此大多数公司和产品在该方面投...
React源码Scheduler(三)React的调度算法实现
本文源码基于 React 16.8.6 (March 27, 2019),仅记录一些个人阅读源码的分享与体会。 欢迎大家交流和探讨 React 源码 Scheduler(一)浏览器的调度 React 源码 Scheduler (二) React 的调度流程 React 源码 Scheduler(三)React的调度算法实现 前言在上两节中,笔者介绍了在浏览器中存在的 requestAnimationFrame 和 requestIdleCallback 两种调度方法及在 React 中一个任务的调度流程。同时,读者也了解了 React 团队采用了 requestIdleCallbac...
React 源码Scheduler(二)React的调度流程
本文源码基于 React 16.8.6 (March 27, 2019),仅记录一些个人阅读源码的分享与体会。 React 源码 Scheduler(一)浏览器的调度 React 源码 Scheduler (二) React 的调度流程 React 源码 Scheduler (三) React 的调度算法实现 欢迎大家交流和探讨 前言在上一节中,笔者介绍了浏览器中调度算法的种类,并基于此实现了一个简单的时间分片调度。 React 的调度流程借鉴了浏览器中 requestIdleCallback 的模式,实现了时间片的分割与超时任务的调度管理功能。 同时,作为跨平台框架的 React,...
React 源码 Scheduler(一)浏览器的调度
本文源码基于 React 16.8.6 (March 27, 2019),仅记录一些个人阅读源码的分享与体会。 欢迎大家交流和探讨 React 源码 Scheduler(一)浏览器的调度 React 源码 Scheduler (二) React 的调度流程 React 源码 Scheduler (三) React 的调度算法实现 背景Schedule 即任务的调度,我们知道 JavaScript 是单线程运行的。因此,浏览器无法同时相应 JS 任务与用户的 UI 操作,如此在执行 UI 操作的时候,便会带给用户一定卡顿感,也就是我们所谓的「丢帧」。 对此情况,React 采用的是时间...
Trie 树与不可变数据结构
本文首发于知乎专栏:饿了么前端 不可变对象什么是不可变对象不可变对象是指数据在创建之后它的状态(成员变量、属性等的值)就无法更改,每次的修改实际上是创建了一个新对象,是一种只读不写的数据结构。与之相对的则为可变对象。 让我们通过一个简单的例子认识下不可变对象: 12345678'use strict'let immutableObj = Object.freeze({ a: 1 })immutableObj.a = 2; // throw TypeError: Cannot assign to read only property 'a' of object 'c...
avatar
戯れ言
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视
FRIENDS