Geass's Studio.

Geass's Studio.

Stay Hungry, Stay Foolish

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....
纯前端之LBS图片隐写
前言最近看到一个在图片里隐藏信息的东西,觉得挺有趣,就稍微去了解了下。查各种资料得知是一种叫隐写的技术,大多是借助后端完成。然后为了证明前端是无所不能的,对的。就用纯前端的方式写了个简单的 LBS 图片隐写工具。 好了,废话不多说,先丢上一些基本信息: github: 图片隐写 正文隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。一般用来传递一些隐秘信息或者起到数字签名的一些目的。本文中采用的 LBS 算法是隐写里的基本算法,鲁棒性较低,但作为一个玩具玩玩也是不错的。 LBS 算法LBS 全称为 least sign...
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...
基于 Symbol.toPrimitive 构建 sum 的柯里化函数
在 js 中,如何编写一个可无限调用的柯里化 sum 函数?(sum(1,2,3)(4)()(5))。在下文中,就让我们一起实现它。而在实现前,我们需要引入两个知识点:柯里化与 Symbol.toPrimitive。 柯里化首先,什么是柯里化?柯里化是函数式编程中的一个重要特性,是把接受多个参数的函数变换成接受部分参数的函数,并且返回接受余下的参数而且返回结果的新函数的技术。 例如: func(a, b, c, d) => func(a)(b)(c)(d) 就是一个函数的柯里化应用。柯里化函数的优点是可以很方便的基于现有的通用函数构建出一定特性的新函数。我们举一个简单的例子 123...
avatar
戯れ言
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视
FRIENDS