枫之谷

给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践

2020-06-16T21:04:10.000Z

Web Worker 介绍

众所周知，JavaScript 这门语言的一大特点就是单线程，即同一时间只能同步处理一件事情，这也是这门语言衍生出的 nodeJS 被后端开发诟病的的一点。

然而，JavaScript 在设计之初，其实是故意被设计成单线程语言的，这是由于它当时的主要用途的决定的。

JavaScript 最初的设计初衷是完成页面与用户的交互，操作 DOM 或者 BOM 元素，此时如果一味地追求效率使用多线程的话，会带来资源抢占，数据同步等等问题，因此必须规定，同一时间只有一个线程能直接操作页面元素，以保证系统的稳定性以及安全性。

尽管如此，但是 JavaScript 并不是只能线性处理任务。JS 拥有消息队列和事件循环机制，通过异步处理消息的能力来实现并发。在高 I/O 型并发事务处理的过程中，由于不需要手动生成与销毁线程以及占用额外管理线程的空间，性能表现及为优异。因此，nodeJS 作为 JavaScript 在服务端的探索者，在处理高并发网络请求的优势极为明显。

尽管 JavaScript 通过异步机制完美解决了高 I/O 性能的问题，但 JavaScript 单线程执行的本质还是没有变的。因此缺点就显而易见了，那就是处理 CPU 密集型的事务时没有办法充分调动现代多核心多线程机器的运算资源。

在现代大型前端项目中，随着代码的复杂程度越来越高，本地的计算型事务也在变得繁重，而运行在单线程下 JavaScript 项目必定会忙于处理计算而无暇顾及用户接下来的频繁操作，造成卡顿等不太好的用户体验，更严重的情况是，当计算型事务过多时还有可能因为资源被占满带来网页无响应的卡死现象。因此，Web 项目的本地多线程运算能力势在必行，由此，Web Worker 应运而生了。

React16.8 useHook 特性

2020-01-21T18:19:28.000Z

React16.8 迎来了大众期盼已久的函数式编程利器：useHook特性。它能大大增强函数式组件的能力，使得立即执行的、没有生命周期与 state 等等类组件特性的函数式组件拥有相同的能力。

useHook的原理实际上是利用了 JavaScript 的闭包机制，因此在多次执行函数的同时记住一些状态。

useHook拥有多种函数，我们也可以自定义自己的 hook。在这里主要来说说其中最常用的几种，简述他们的大致原理，以及使用时的注意事项。

React15 与 React16 生命周期区别与使用方式

2019-12-21T17:38:35.000Z

为什么要变更生命周期

因为 React16 框架使用了全新的Fiber架构，这其中有一个特性叫做async rendering，render 过程可中断，因此，render 函数之前的所有生命周期函数都有可能被多次执行，如果在这些函数中存在异步请求的话将会造成许多无用的请求被调用。

涉及到的生命周期函数一共有 4 个：

componentWillMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

设计模式的 js 实现 (4)--代理模式

2019-10-07T16:42:54.000Z

了解设计模式是学习一切软件架构设计的基础，大到一个项目的整体框架设计，小到一个功能函数的优化，都有着重要意义。《代码大全》中将设计模式共分为了 23 类，分别为：创建型模式（5 种）：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式（7 种）：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行为型模式（11 种）：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。接下来我将针对其中常用的几种设计模式进行解读与实现，供大家参考。

设计模式的 js 实现 (3)--观察者模式

2019-09-26T10:35:19.000Z

设计模式的 js 实现 (2)--装饰器模式

2019-09-23T11:07:08.000Z

设计模式的 js 实现 (1)--单例模式

2019-09-20T16:58:52.000Z

利用 React 高阶组件实现一个面包屑导航

2018-11-12T11:51:01.000Z

什么是 React 高阶组件

React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件，并返回处理完成后的 React 组件。React 高阶组件在 React 生态中使用的非常频繁，比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的。

css 的垂直居中方法

2018-03-14T16:51:25.000Z

CSS 是每一个前端工程师都绕不过去的坎，熟练运用 CSS 后，实现同样一种效果我们可以有很多种写法，但由于兼容问题，通常简洁的写法并不能实现全平台统一效果，复杂的写法对性能又不太友好，导致我们在编写 CSS 过程中有很多需要注意的点，要踩很多的坑，因此用一个笔记来集中记录一下方法。

git 常用命令笔记

2018-01-03T16:53:25.000Z

git 是现如今最火的版本控制工具，尽管已经使用了 GitHub 数年的时间了，但一直没有对 git 命令以及作用进行深入的分析和学习，对 git 的使用还仅停留在 add、commit、push、clone 上，这根本算不得掌握 git。因此，这次一得出空来就开始从头恶补 git 知识了，分享出来与大家一同学习进步。

React 原理深入 (1)--virtual DOM

2017-12-17T16:02:34.000Z

工欲善其事，必先利其器。想要用好 react 这个前端 View 层大杀器，深入理解其工作原理必不可少。理解一个框架是如何让某种操作得到优化的至关重要，知其然也要知其所以然，它有助于我们对这个框架的正确高效的使用，这是一个前端工程师成长的必经路程。

Redux 深入理解 (4)

2017-12-04T15:22:30.000Z

这一节主要来讲讲 Redux 在 React 项目中的具体使用。

将学的新知识新组件集成进项目里是初学者最大的障碍，这也是我最初学习 Redux 的时候很难有进展的原因。Redux 的源码体积很小，加起来连 1k 行都不到，利用的原理在之前已经说过，也很好理解，但由于 Redux 只是 Flux 对 React 的一种优化，但并不只是服务于 React，如果你愿意，在 Vue 中使用 Redux 也是完全可行的，毕竟状态管理的思想还是不会变的嘛。

因此我们需要一个 Redux 与 React 之间的连接件来方便我们的搭建，这就是React-redux。也是我们将 Redux 合并进 React 最后也是最大的难点。

Redux 深入理解 (3)

2017-12-03T13:00:52.000Z

上一节说到，reducer 是一个纯函数。那么纯函数具体的定义是什么呢？阮一峰老师是这样说的：

纯函数是函数式编程的概念，必须遵守以下一些约束。

不得改写参数

不能调用系统 I/O 的 API

不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

Redux 深入理解 (2)

2017-12-01T12:44:56.000Z

在理解了 redux 的作用原理后，我们来看看 redux 的基本概念。

state

state：state 是状态管理的根本。在 redux 中，有唯一的状态树 state，为整个应用共享。本质上是一个普通对象。处于程序逻辑中，无法直接调用。

store

store：store 是 state 的管理者，一个应用同样只有唯一的 store，管理着唯一的 state。store 包含下列四个函数：

getState() ：用于获取整个 state

dispatch(action) ：View 触发 action 改变 state 的唯一途径，请注意我用了唯一这个词

subscribe(listener) ：可以理解成是 DOM 中的 addEventListener ，也就是我在上一篇里说过的发布订阅模式中的订阅方法，在 redux 的使用中，这个方法通常不需要手动使用，一般会放在 setState 方法中。

replaceReducer(nextReducer) ：这个不太常用，一般在 Webpack Code-Splitting 按需加载的时候用获取 state 的方式：

Redux 深入理解 (1)

2017-11-30T11:10:37.000Z

学习 react 的过程中，redux 的熟练掌握是一个绕不开并且很难绕过去的坎。接触 react 已经有一段时间了，甚至连一些小项目都用 react 做了不少了，但 redux 的使用上还是有诸多不理解不熟练的地方。正好有很长一段时间没有更过博客了，就从这里着手，增强一下自己的理解。

MongoDB 极简实践入门

2017-09-17T17:13:38.000Z

为什么用 MongoDB

传统的计算机应用大多使用关系型数据库来存储数据，比如大家可能熟悉的 MySql, Sqlite 等等，它的特点是数据以表格 (table) 的形式储存起来的。数据库由一张张排列整齐的表格构成，就好像一个 Excel 表单一样，每个表格会有若干列，比如一个学生信息表，可能包含学号、姓名、性别、入学年份、高考成绩、籍贯等等。而表格的每一排，则是一个个学生的具体信息。在企业级应用和前互联网时代，关系型数据库几乎是不二选择。关系型数据库的特点是有整齐划一的组织，很方便对数据进行描述、插入、搜索。

github 建立 repository 并上传工程的方法

2017-07-02T23:46:32.000Z

这不是什么新知识了，自从我用 github 以来一直就是这么用着的，但是最近有一段时间没上传过自己的 project 了，竟然手生了忘了怎么做了。想了想还是记录下来比较好，也给大家分享分享。

由于是给自己做的备忘，怎么注册 github 之类的新手问题我就不说了，不懂的朋友可以自行去百度相关问题，很多的。

在 Linux 下 nodejs 的安装方法大全

2017-06-11T01:06:46.000Z

这段时间为了上线测试很多 nodejs 代码的部署，开始鼓捣云服务器。由于不是很懂运维知识，首先在安装上就踩了很多大坑，于是决定记录下来做个备忘。

Flex 布局体验

2017-05-25T14:17:25.000Z

还在为各种布局的 hack 方法犯愁么？还在想着网上流传的各类垂直居中存在的各种奇怪 bug 而影响工作体验么？还在为找不到一个合适自己的规范而疯狂造轮子么？现在，一个全新的布局解决方案规范已经展现在我们面前，它就是 flex 布局。只要 998，各类布局完美解决方案带回家！

解决 github+Hexo 的博客多终端同步问题

2017-05-12T15:51:06.000Z

解决 github + Hexo 的博客多终端同步的思路是将博文内容相关文件放在 Github 项目中 master 中，将 Hexo 配置写博客用的相关文件放在 Github 项目的 hexo 分支上，这个是关键，多终端的同步只需要对分支 hexo 进行操作。