WangF Blog

一生想做浪漫极客

setTimeout/setInterval 的趣事

setTimeout/setInterval 的趣事 前段时间面试,聊到了关于用计时器实现 countdown-timer 相关问题。以及 setInterval 内部的一些原理。 如果 setInterval 中 回调函数 执行时间较长,会发生什么? 我之前简单的了解过一点,关于 setTimeout、setInterval 仅仅是在相应的延迟后将 回调函数 推出任务队列而已,如果主...

编写自己的 Promise

编码实验室

编写自己的 Promise 目标 区别于传统的 callback 模式, Promise 给我们提供了思路, 让我们可以链式的形式编写异步代码, 使得我们摆脱了回调炼狱的问题. 本次实验室要实现的是 Promise 的简单版本, 支持链式调用, 静态方法 Promise.resolve() Promise.reject() 等 我们可以先把测试用例想好,所谓的测试驱动开发 TDD 。...

页面渲染相关的尝试与思考

script & link

页面渲染相关的尝试与思考 TL;DR 外部 css 的加载会阻塞 dom 的解析。 外部 js 的加载与 dom 解析是并行的(dom 解析至底部 script 之前,底部 script 就已经开始加载),script 存在预加载的行为,外部 js 的加载不会阻塞 dom 解析,但是当 dom 解析到外部 js 时,若此刻此 js 尚未被加载,则会阻塞...

event-loop 的本质

event-loop 的本质 通过上一篇我们知道了,event-loop 中不同异步形式的回调先后执行顺序有所不同。(setTimeout(cb) 要晚于 Promise.resolve().then(cb)执行)。原因其实网上已经有很多大神给出了答案。 结合下面 demo 来讲: setTimeout(() => { console.log('setTimeout') })...

异步的思考与尝试

异步的思考与尝试 event loop 说起异步,总是要提 event loop,我们常用、常提到的异步背后就是依靠的浏览器的 event loop,或者说是 javascript runtime event loop。 event loop 到底是如何作用于 javascript 的异步编程模式呢? 常见的异步 我们现在看看常见的异步: setTimeout ...

【记】那些易混淆的属性值

【记】那些易混淆的属性值 offsetXXX / scrollXXX / clientXXX scrollHeight(read-only): is a measurement of the height of an element’s content including content not visible on the screen due to overflow 元素...

vue 学习与总结 - 数据绑定的实现

数据绑定

vue 学习与总结 - vue 数据绑定 本文将从几个问题展开简单聊聊在学习 vue 数据绑定时遇到的问题。 isNaN()函数 与 Number.isNaN()函数 在阅读 vue observer 代码时,在阅读到这一行代码时,看到下面一段代码 if (newVal === value || (newVal !== newVal && value !== valu...

vue 学习与总结 - vdom 的实现

vdom

vue 学习与总结 - vdom 的实现 vdom 是 Virtual Dom 的缩写,旨在通过 javascript 模拟真实 Dom。 通过 javascript 模拟真实 Dom 树 为什么需要模拟真实的 Dom 呢? 请执行面的 demo。 const div = document.createElement('div') // Object.keys(div).f...

前后端分离之 Mock Server

前后端分离之 Mock Server 前后端分离 前后端分离说了好几年了,而今公司大多数项目也大多都采用 nodejs 来接管中间层,之前只负责模板层的前端又多了一项职责 – 负责 controller 层。这是好事还是坏事呢? 在我看来是好事,因为对于我而言,能做的事更多了。比如,我可以通过 nodejs 层更好的 mock 数据,不会再出现离开 php ,我编写的 smarty 模...

永远记不住的 slice & splice & substr & substring

嗨呀,今天又把 slice 、 splice、 substr、 substring 搞混了。好气 = =。 为了能不再搞混这几个方法,想了几个区分这几个方法的技巧。 Array 其中,对于数组而言,仅仅有 slice 以及 splice。 从字面意思可以看出: slice - 切片 splice - 接合 可见切片(slice)需要一...