2019年02月_前端瓶子君

12月 09月 08月 07月 02月 01月

原创 ES6 之 Proxy

Proxy，代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。Proxy 对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。1. Proxy 定义var proxy = new Proxy(target, handler)new Proxy()表示生成一个 Proxy 实例target：目标对象handler：一个对象，其...

2019-02-14 14:32:30 511

在JS中，我们可以使用 setTimeout 和 setIntarval 实现动画，但是 H5 的出现，让我们又多了两种实现动画的方式，分别是 CSS 动画（transition、animation）和 H5的canvas 实现。除此以外，H5还提供了一个专门用于请求动画的API，让 DOM 动画、canvas动画、svg动画、webGL动画等有一个专门的刷新机制。1. 是什么requestA...

2019-02-13 15:12:28 757

原创 JS异步解决方案的发展历程以及优缺点

JS 异步已经告一段落了，这里来一波小总结1. 回调函数（callback）setTimeout(() => { // callback 函数体}, 1000)缺点：回调地狱，不能用 try catch 捕获错误，不能 return回调地狱的根本问题在于：缺乏顺序性：回调地狱导致的调试困难，和大脑的思维方式不符嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，...

2019-02-13 11:12:53 2871

原创数组扁平化、去重、排序

看一道面试题：已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组答案：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11,...

2019-02-12 09:37:49 357

原创 JS 基础之异步（六）：co 函数库

co 函数库是 TJ 大神基于ES6 generator 的异步解决方案。要理解 co ，你必须首先理解 ES6 generator，可以看我之前的文章JS 基础之异步（五）：Generator，这里不在赘述。co 现在已经不怎么使用了，一些老版本的库里可能使用它，我是在看 koa 源码的时候看到它的。co 最大的好处在于通过它可以把异步的流程以同步的方式书写出来，并且可以使用 try/cat...

2019-02-12 08:54:06 2588

原创深入 setState 机制

React 是通过管理状态来实现对组件的管理，即使用 this.state 获取 state，通过 this.setState() 来更新 state，当使用 this.setState() 时，React 会调用 render 方法来重新渲染 UI。首先看一个例子：class Example extends React.Component { constructor() { su...

2019-02-11 14:23:06 1654

原创深度优先遍历与广度优先遍历

图图是一种复杂的非线性结构，它由边（边Edge）和点（顶点Vertex）组成。一条边连接的两个点称为相邻顶点。G = (V, E)图分为：有向图无向图本文探讨的是无向图图的表示图的表示一般有以下两种：邻接矩阵：使用二维数组来表示点与点之间是否有边，如 arr[i][j] = 1表示节点 i 与节点 j 之间有边，arr[i][j] = 0表示节点 i 与节点 j 之间没有...

2019-02-05 19:14:33 406

原创 Set、WeakSet、Map及WeakMap

Set 和 Map 主要的应用场景在于数据重组和数据储存Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构1. 集合（Set）ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。Set 本身是一种构造函数，用来生成 Set 数据结构。new Set([iterable])举个例子：const s = new Set()[1, 2,...

2019-02-03 22:53:10 925

原创 JS 基础之异步（五）：Generator

接着上一部分继续了解JS 基础之异步（四）：Generator（生成器、迭代器源码实现）Generator函数function *会定义一个生成器函数，并返回一个Generator（生成器）对象，其内部可以通过 yield 暂停代码，通过调用 next 恢复执行。调用一个生成器对象并不会马上执行里面的代码语句，而是返回一个这个生成器的迭代器（iterator）对象。当这个迭代器对象的next...

2019-02-01 17:33:07 548

原创深入diff 算法

深入diff 算法diff 作为 Virtual DOM 的加速器，其算法上的改进优化是React页面渲染的基础和性能保障，本节从源码入手，深入剖析diff算法。React 中醉值得称道的莫过于Virtual DOM与diff的完美结合，尤其是其高效的diff算法，可以帮助我们在页面蔌渲染的时候，计算出Virtual DOM真正变化的部分，并只针对该部分进行的原生DOM操作，而不是渲染整个页面...

2019-02-01 15:33:17 19581 7