今越星礼
有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于 Chai 就有一个[非常棒的PR](https://github.com/chaijs/chai/pull/922), 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位). 合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 `Errors` 对象及其相关属性之后, 能有助于你更充分地利用 `Errors`. ## (函数的)调用栈是怎么工作的 在谈论错误之前, 先要了解下(函数的)调用栈的原理: **当有一个函数被调用的时候, 它就被压入到堆栈的顶部, 该函数运行完成之后, 又会从堆栈的顶部被移除.** 堆栈的数据结构就是**后进先出**, 以 LIFO (last in,...
>基于 [Lazy Loading Images and Video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) 一文翻译，略有删减 对于一个网站的有效载荷而言，[图片](http://beta.httparchive.org/reports/state-of-images?start=earliest&end=latest)和[视频](http://beta.httparchive.org/reports/page-weight#bytesVideo)是非常重要的一部分内容。然而，项目的利益相关者并不愿意从已有的应用中削减媒体资源，当项目所有相关人想提高网站性能但却无法就如何实现目标达成一致时，这种障碍是非常令人沮丧的。幸运的是，懒加载(Lazy Loading)是一种可以降低初始页面负载和加载时间的解决方案，但它并不会减少内容的加载。 ## 什么是懒加载 懒加载是一种在页面加载时，延迟加载非关键资源的技术，而这些非关键资源会在需要的时候才会被加载。对于图片而言，"非关键"资源即"屏幕外"(off-screen)的资源。如果你使用了 Lighthouse 并检查其提供的一些改善机会，就有可能从[Offscreen Images audit](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images)方面看到一些指导：  > Lighthouse 进行性能审计的一个方面就是确定屏幕外的图片资源(off screen images)，这些图片资源都可以用于懒加载。 或许你已经在某些网站中看到到懒加载的实践，其过程大概如下： * 你访问一个页面，并滚动页面去阅读内容 * 在某一时刻，一个占位的图片滚动到了视口中 *...
在前端框架 React、Vue.js 和 Angular 三足鼎立的年代, Vue.js 因其易用、易学、学习成本低等特点已经成为了广大前端er的新宠, 而其对应的路由 [vue-router](https://github.com/vuejs/vue-router) 也是简单好用, 功能强大. 本文将结合 [Vue.js](https://github.com/vuejs/vue) 来分析 `vue-router` 的整体流程. >本文分析的 vue-router 的版本为 2.6.0, vue 的版本为 2.3.3. ## 目录结构 [email protected] 的整体目录结构如下: ``` |——vue-router |——build...
## 前言 第一次接触 React Native 是在四年前实习的时候，当时在项目中使用的 RN 版本是 `0.28.x`，间隔四年之后，再次在项目中使用 RN 时版本已是 `0.57.x`。在撰写本文时，RN 的版本是 `0.60.4`，所以，本文将以 `0.60.4` 版本为基础，简要分析 RN 应用在 **Android 平台上的启动流程**。 ## Hello World 用 RN 来写一个 Hello World 应用非常简单。通过 RN...
大多数情况下，在 React Native 中创建动画是推荐使用 [Animated API](https://facebook.github.io/react-native/docs/animated.html) 的，其提供了三个主要的方法用于创建动画： 1. **Animated.timing()** -- 推动一个值按照一个过渡曲线而随时间变化。`Easing` 模块定义了很多缓冲曲线函数。 2. **Animated.decay()** -- 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。 3. **Animated.spring()** -- 产生一个基于 [Rebound](http://facebook.github.io/rebound/) 和 [Origami](https://facebook.github.io/origami/) 实现的Spring动画。它会在 `toValue` 值更新的同时跟踪当前的速度状态，以确保动画连贯。 >译者注：React Native(0.37) 目前只支持Animated.Text/Animated.View/Animated.Image 以我的经验来看，**Animated.timing()**...
之前大致分析过了 [vue-cli 源码](https://github.com/dwqs/blog/issues/56) 和 [vue-router 源码](https://github.com/dwqs/blog/issues/53), 这两个工具也是 [vue](https://github.com/vuejs/vue) 生态中比较重要的组件. 而最近因为业务上的需要, 接触到了 [vuex](https://github.com/vuejs/vuex) 的一些组件源码. `vuex` 集中于MVC模式中的Model层, 规定所有的数据操作必须通过 `action` - `mutation` - `state change` 的流程来进行, 再结合 `vue` 的数据视图双向绑定特性来实现页面的展示更新:  现在就具体来分析一下其流程. > 写本文时,...
### 前言 > 本文源码分析基于 v9.20.1 以及本文 demo 的测试环境：Macbook Pro(Core i7 2.2G, 16G), Chrome 69，React 16.4.1 在[上一篇](https://github.com/dwqs/blog/issues/72)文章中，我简单分析了 `react-virtualized` 的 List 组件是怎么实现虚拟列表的，在文章的最后，留下了一个问题：怎么尽量避免元素内容重叠的问题？本篇将进行简单分析。 `react-virtualized` 的 List 组件虽然存在上述所说的问题，但是它还是可以通过和其它组件的组合来做的更好，**尽量避免在渲染图文场景下的元素内容重叠问题。** 在 [Rendering large lists with React...
## 组件拆分 在 [关于Redux的一些总结(一)：Action & 中间件 & 异步](https://github.com/dwqs/blog/issues/35) 一文中，有提到可以根据 reducer 对组件进行拆分，而不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要的（最小）属性。 在常规的组件开发方式中，组件自身的数据和状态是耦合的，这种方式虽能简化开发流程，在短期内能提高开发效率，但只适用于小型且复杂度不高的SPA 应用开发，而对于复杂的 SPA 应用来说，这种开发方式不具备良好的扩展性。以开发一个评论组件 Comment 为例，常规的开发方式如下： ``` class CommentList extends Component { constructor(){ super(); this.state...
从作用域链谈闭包
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 ## 神马是闭包 关于闭包的概念，是婆说婆有理。因而，我就翻阅了红皮书(p178)上对于闭包的陈述： > 闭包是指有权访问另外一个函数作用域中的变量的函数 这概念有点绕，拆分一下。从概念上说，闭包有两个特点： 1、函数 2、能访问另外一个函数作用域中的变量 在ES 6之前，Javascript只有函数作用域的概念，没有块级作用域（但catch捕获的异常 只能在catch块中访问）的概念（IIFE可以创建局部作用域）。每个函数作用域都是封闭的，即外部是访问不到函数作用域中的变量。 ``` function getName() { var name = "美女的名字"; console.log(name); //"美女的名字" } function displayName() { console.log(name); //报错 } ```...
[`vue-cli`](https://github.com/vuejs/vue-cli) 是 [vuejs](https://github.com/vuejs/vue) 官方提供的基于 vuejs 的项目脚手架工具, 可以很快的帮助 vuejs 开发者搭建一个 startup 项目, 免去环境配置的繁琐, 开箱即用. 今天就来看下 `vue-cli` 的实现. >vue-cli 的版本是 2.8.2 ## vue-init `vue init` 是基于第三方模板生成项目的命令. 先看下其整体流程:  首先, `vue cli` 获取到输入的参数:...