boycgit - JSCON-简时空

javascript

图算法 -只需“五步” ，获取两节点间的所有路径（非递归方式）

在图论中，获取两点之间所有的路径的问题大部分采用递归来实现。而在 JS 中用递归算法很容易会让调用栈溢出，本文提供一种利用双栈（stack）数据结构来非递归实现，以便于在生产环境使用。

javascript

在 ts + Jest 单元测试中 debugging

本文简要介绍了如何在 Jest 单元测试中利用 Chrome Node DevTools 来辅助调试

杂事

快速定制 Ant Design 主题 CSS 文件

作为前端流行库，Antd 却只提供了 LESS 样式定制的功能。本文介绍了一种定制生成 Antd 主题 CSS 样式文件的方法，简单易操作且灵活度高。

Webpack

Webpack 技巧 - 联合 alias 和 mainFields 提高多库联调效率

使用 Webpack 开发大型工程时，在联调功能模块时除了 npm link 之外，还可使用 resolve.alias 和 resolve.mainFields 来指定具体源码位置

javascript

速查手册 - TypeScript 高级类型 cheat sheet

本文罗列了 TypeScript 常用的高阶类型，包含官方、以及常用的非官方的高级类型声明，该手册直接硬啃的话有些枯燥，适合平时快速查阅，使用 `Ctrl+F` 来查找关键词来定位即可。

javascript

理解 React Hooks 的 Capture Value 特性

本文以简单的示例帮助用户理解 React hooks 中的 Capture Value 特性

经验总结

Webpack 踩坑记 - 配置 externals 和 output

webpack 很强大，但学习成本也跟着上去了，其中一件让人头疼的是输出时的配置，特别容易让人迷惑；本文总结了自己开发库时依赖共同第三方包时的 externals 和 output 配置项。

经验总结

【经验总结】charles + SwitchyOmega 代理 https

为了能让 Charles 代理 HTTPS，之前到网上看了很多教程，曾经自己捣鼓过，不过一直都没能成功，索性就不弄了。这两天为了debug，不得不代理 https 的请求，经过半天的折腾竟然成功了。为了让以后自己不那么费劲，就写了这篇文章总结。

数据结构

前端学数据结构 - 堆（Heap）

前端学数据结构系列 - 堆（heap）。本文收集了堆的参考文章、代码实现和实际应用等等，通过本文能基本掌握堆这类数据结构

算法

算法 - 调度场算法（Shunting Yard Algorithm）

有一种中缀转后缀的算法称为调度场算法（Shunting Yard Algorithm）。算法核心就在于用栈暂存符号以备“调度”，比较新符号和栈顶原有的符号，选择其中更容易结合的（根据优先级、结合方向）出栈，其算法思想和树的后续遍历一致

Node.js

Node.js - 200 多行代码实现 Websocket 协议

最近正在研究 Websocket 相关的知识，想着如何能自己实现 Websocket 协议。到网上搜罗了一番资料后用 Node.js 实现该协议，本文会从知识储备、具体代码分析以及注意事项角度去讲解如何用 Node.js 实现一个简单的 Websocket 服务，除去注释语句和 console 语句后，大约 200 行代码左右。本文记录了实现过程中的经验和总结。

数据结构

前端学数据结构 - 栈（Stack）和队列（Queue）

前端学数据结构系列 - 栈和队列。本文收集了队列相关的参考文章、代码实现和实际应用等等，通过本文能基本掌握栈和队列这两类数据结构

数据结构

前端学数据结构 - 链表（Linked List）

前端学数据结构系列 - 链表。本文收集了链表相关的参考文章、链表类型、代码实现和实际应用等等，通过本文能基本掌握链表这一数据结构

教程

【资源集合】 ES6 元编程（Proxy & Reflect & Symbol）

本文总结了自己学习 ES6 元编程相关知识（Symbols & Proxy & Reflect）的理解、教程文档和代码片段，所以本文并非是一篇传统意义上的教程，更类似于 github awesome 这样列表文章。由于教程文档和代码片段将随着学习的进行将增多，所以后续还会不定期更新。

AE

AE教程 - 字幕追踪

我随手拍了一段直升飞机的视频，想要新增的文字可以跟随运动。本文基于 AE CC 2018 软件，完成此项教程大致需要 10 分钟

mobx

【用故事解读 MobX 源码（五）】 Observable

网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。本人在找文章时对此深有体会，故将以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解 MobX 源码；本文分析源码中有关 Observable 的执行逻辑

mobx

【用故事解读 MobX 源码（四）】装饰器和 Enhancer

网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。本人在找文章时对此深有体会，故将以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解 MobX 源码；本文分析源码中有关装饰器与 enhancer 的执行逻辑

mobx

【用故事解读 MobX源码（三）】 shouldCompute

网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。本人在找文章时对此深有体会，故将以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解 MobX 源码；本文分析 shouldCompute 源码的执行逻辑

mobx

【用故事解读 MobX源码（二）】 computed

网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。本人在找文章时对此深有体会，故将以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解 MobX 源码。本文分析 computed 源码运行逻辑。

javascript

【用故事解读 MobX源码（一）】 autorun

网上已有很多关于 MobX 源码解读的文章，但大多阅读成本甚高。本人在找文章时对此深有体会，故将以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解 MobX 源码；本文分析 autorun 源码的执行逻辑

javascript

ES7 decorator 装饰者模式

装饰者模式 1、装饰模式设计模式大家都有了解，网上有很多系列教程，比如 JS设计模式等等。这里只分享装饰者模式以及在如何使用 ES7 的 decorator 概念 1.1、装饰模式 v.s. 适配器模式装饰模式和适配器模式都是“包装模式”(Wrapper Pattern)，它们都是通过封装其他对象达到设计的目的的，但是它们的形态有很大区别。适配器模式我们使用的场景比较多，比如连接不同数据库的情况，你需要包装现有的模块接口，从而使之适配数据库 —— 好比你手机使用转接口来适配插座那样；装饰模式不一样，

Webpack

Webpack 源码（二）—— 如何阅读源码

本文以一个公司（Company）来类比，方便去理解 Compiler 、Compilation 、Module 等关键对象，阅读源码的过程其实可以认为是了解对象的方法和属性的过程；本文不对 Webpack 流程再做重复的描述，而是从另外一个角度补充分析 Webpack 源码。

源码分析

Webpack 源码（一）—— Tapable 和事件流

Webpack 可以认为是一种基于事件流的编程范例，内部的工作流程都是基于插件机制串接起来，而将这些插件粘合起来的就是webpack自己写的基础类 Tapable；本文详细分析了该类的，为洞察 Webpack 源码结构打下基础

Webpack

Webpack实战 - 使用动态 entry 改善调试体验

使用 Webpack 开发多页面系统时，会受到页面数量影响，可采用动态 entry 的方式优化；动态 entry 实施的过程是借鉴 webpack 自身的 SingleEntryPlugin 插件进行的，在可靠性方面有很大的保障

javascript

视差卷轴特效

搜索关键词：parallax scrolling tutorial 前景移动越快，越远的层移动越慢。这种效果叫做__“视觉卷轴/滚动”（parallax scrolling）__ 纯CSS视差特效效果图：当你手动拖动浏览器的窗口改变其大小，你会发现前景（小草）、中景（山）和背景（白云）的移动速度不一样，小草移动要快一些从而导致了视觉差。这里的关键是：背景图片按百分比铺设，背景的百分比铺设是非常有用的，见【CSS】响应式sprites 图像层使用position:absolute叠加 HTML： <div