Plugin

Jest中Mock网络请求 最近需要将一个比较老的库修改为TS并进行单元测试，修改为TS还能会一点，单元测试纯粹是现学现卖了，初学Jest框架，觉得在单元测试中比较麻烦的就是测试网络请求，所以记录一下Mock掉Axios发起网络请求的一些方式。初学两天的小白，如有问题还请指出。 描述 文中提到的示例

初探webpack之编写loader loader加载器是webpack的核心之一，其用于将不同类型的文件转换为webpack可识别的模块，即用于把模块原内容按照需求转换成新内容，用以加载非js模块，通过配合扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果，从而完成一次完整的

Git常用命令 Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目，Git擅长的是程序代码的版本化管理，对程序源代码进行差异化的版本管理，代码库占极少的空间，可以说Git是目前世界上最先进的分布式版本控制系统。 工作位置 Workspace：工作区。 Index/Stage：

初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活，以适应各种应用场景，当然也大大增加了webpack的复杂性，在webpack运行的生命周期中会广播出许多事件，plugin可以hook这些事件，在合适的时机通过webpack提供的API改变其在处理过程中的输出

基于slate构建文档编辑器 slate.js是一个完全可定制的框架，用于构建富文本编辑器，在这里我们使用slate.js构建专注于文档编辑的富文本编辑器。 描述 Github ｜ Editor DEMO 富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。现在有很多开箱即用的富文本编辑器，例

在这里我们先来聊聊我们究竟应该如何操作剪贴板，也就是我们在浏览器的复制粘贴事件，并且在此基础上聊聊我们在Canvas图形编辑器中应该如何控制焦点以及进行复制粘贴行为。

Canvas图形编辑器-数据结构与History(undo/redo)，本文是之前基于Canvas实现的简历编辑器后续，主要是介绍了对数据结构的设计以及`History`能力的实现。

概一个月前，我发现掘金老是给我推荐Canvas相关的内容，比如很多 小游戏、流程编辑器、图片编辑器 等等各种各样的项目，于是我也通过手写Canvas引擎实现了简历编辑器。

初探富文本之富文本概述 富文本编辑器通常指的是可以对文字、图片等进行编辑的产品，具有所见即所得的能力。对于Input、Textarea之类标签，他们是支持内容编辑的，但并不支持带格式的文本或者是图片的插入等功能，所以对于这类的需求就需要富文本编辑器来实现。现在的富文本编辑器也已经不仅限于文字和图片，

初探富文本之CRDT协同算法 CRDT的英文全称是Conflict-free Replicated Data Type，最初是由协同文本编辑和移动计算而发展的，现在还被用作在线聊天系统、音频分发平台等等。当前CRDT算法在富文本编辑器领域的协同依旧是典型的场景，常用于作为实现文档协同的底层算法，支持

之前我们介绍了Chrome扩展的实现，本篇文章作为上篇文章的延续，介绍了轻量级Web脚本的实现，以油猴脚本的基准构成 - 脚本管理器的核心实现 - 脚本工程化打包 - 解除网站复制限制脚本实例展开。

从油猴脚本管理器的角度审视Chrome扩展 在之前一段时间，我需要借助Chrome扩展来完成一个需求，当时还在使用油猴脚本与浏览器扩展之间调研了一波，而此时恰好我又有一些做的还可以的油猴脚本TKScr

在前一段时间，我想在手机上向电脑发送文件，因为要发送的文件比较多，所以我想直接通过USB连到电脑上传输，之后发现手机竟然无法被电脑识别，于是便仿照AirDrop借助浏览器实现了局域网的文件传输能力。

初探webpack之单应用多端构建 在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大

初探富文本之编辑器引擎 在前文中我们介绍了富文本的基础概念，以及富文本的基本发展历程，那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器，其能满足绝大部份使用场景，由此也诞生了非常多优秀的开源富文本引擎，这其中有仅提供引擎的编辑器例如Slate.js

初探富文本之CRDT协同实例 在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如aut

# 从零实现的Chrome扩展 `Chrome`扩展是一种可以在`Chrome`浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的`TamperMonkey`、`Proxy SwitchyOmega`、`AdGuard`等等，这些拓展都是可以通过`WebExtensions API`来修改

# 基于drawio构建流程图编辑器 `drawio`是一款非常强大的开源在线的流程图编辑器，支持绘制各种形式的图表，提供了`Web`端与客户端支持，同时也支持多种资源类型的导出。 ## 描述 在我们平时写论文、文档时，为了更好地阐述具体的步骤和流程，我们经常会有绘制流程图的需求，这时我们可能会想到

初探富文本之OT协同算法 OT的英文全称是Operational Transformation，是一种处理协同编辑的算法。当前OT算法用的比较多的地方就是富文本编辑器领域了，常用于作为实现文档协同的底层算法，支持多个用户同时编辑文档，不会因为用户并发修改导致冲突，而导致结果不一致甚至数据丢失的问题。

初探富文本之OT协同实例 在前边初探富文本之OT协同算法一文中我们探讨了为什么需要协同、为什么仅有原子化的操作并不能实现协同、为什么要有操作变换、如何进行操作变换、什么时候能够应用操作、服务端如何进行协同调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如ot.js、