HUANG QING BLOG

天行健，君子以自强不息。地势坤，君子以厚德载物。

Stylus

富于表现力、动态的、健壮的 CSS

网站链接 GitHub 中文文档 stylus 中文版参考文档 Installation $ npm install stylus -g Watch and compile a stylus file from command line with stylus -w style.styl -o style.css You can also try all stylus ...

Posted by huangqing on May 30, 2019

React 事件机制

React 事件概念一、合成事件 react 基于 vitrual dom 实现了 syntheticEvent （合成事件），react 事件处理器接收到一个 syntheticEvent 对象，syntheticEvent 和原生浏览器事件一样拥有同样的接口，也支持事件冒泡机制。可以通过 stopPropgation 和 preventDefault 中断。如果需要访问原生事件对...

Posted by huangqing on May 29, 2019

React diff

传统 diff 算法计算一棵树形结构转换成另一棵树形结构的最少操作，是一个复杂且值得研究的问题。传统 diff 算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。O(n^3) 到底有多可怕，这意味着如果要展示1000个节点，就要依次执行上十亿次的比较。这种指数型的性能消耗对于前端渲染场景来说代价太高了！现今的 CPU 每秒钟能执行大约...

Posted by huangqing on May 29, 2019

React虚拟DOM的渲染过程和特性

React 的虚拟DOM和Diff算法是 React 的非常重要的核心特性。原文链接开发中的常见问题: 为何必须引用 React 自定义的 React 组件为何必须大写 React 如何防止 XSS React 的 Diff 算法和其他的 Diff 算法有何区别 key 在 React 中的作用如何写出高性能的 React 组件虚拟 DOM 在原...

Posted by huangqing on May 29, 2019

前端工程师的自检清单（2019）

JavaScript基础前端工程师吃饭的家伙，深度、广度一样都不能差。变量和类型 JavaScript规定了几种语言类型 JavaScript对象的底层数据结构是什么 Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol JavaScript中的变量在内存中的具体存储形式 ...

Posted by huangqing on May 26, 2019

深入探究 Function & Object 鸡蛋问题

引言这篇文章深入探究下 Function.__proto__ === Function.prototype 引起的鸡生蛋蛋生鸡问题，并在这个过程中深入了解 Object.prototype. Function.prototype. function Object . function Function 之间的关系。 Object.prototype Object.prototype ...

Posted by huangqing on May 24, 2019

JS 中原型和原型链

首先要搞明白几个概念：函数（function）函数对象(function object) 本地对象(native object) 内置对象(build-in object) 宿主对象(host object) 函数 function foo() {} var foo = function() {}; 前者为函数声明，后者为函数表达式。typeof foo 的结果都是 ...

Posted by huangqing on May 23, 2019

JS实现继承的几种方式

JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？ JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下： // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ ...

Posted by huangqing on May 17, 2019

DOM操作成本为什么高

操作 DOM 具体的成本，说到底是造成浏览器回流 reflow 和重绘 reflow，从而消耗 GPU 资源。什么是 DOM Document Object Model 文档对象模型什么是DOM?可能很多人第一反应就是div、p、span等html标签（至少我是），但要知道，DOM是Model，是Object Model，对象模型，是为 HTML（and XML）提供的 A...

Posted by huangqing on May 8, 2019

JS ES6函数式编程

柯里化 FP

第一章函数式编程主要基于数学函数和它的思想。 1.1 函数与js方法：函数是一段可以通过其名称被调用的代码，可以传递参数并返回值。方法是一段必须通过其名称及其关联对象的名称被调用的代码。 //函数 var func = (a)=>{return a} func(5) //用其名称调用 //方法 var obj = {simple:(a)=>{return a}} obj...

Posted by huangqing on April 4, 2019