- 博客(450)
- 收藏
- 关注
RSS订阅原创 Canvas图形编辑器-数据结构与History(undo/redo)
本文我们介绍总结了我们的图形编辑器中数据结构的设计以及History模块的实现，虽然暂时不涉及到Canvas本身，但是这都是作为编辑器本身的基础能力，也是通用的能力可以学习。后边我们可以介绍的能力还有很多，例如复制粘贴模块、画布分层、时间管理、无限画布、按需绘制、性能优化、焦点控制、参考线、富文本、快捷键、层级控制、渲染顺序、事件模拟、PDF排版等等，整体来说还是比较有意思的，欢迎关注我并留意后续的文章。
2024-04-15 10:30:41
498
原创 基于Canvas实现的简历编辑器
这次对于Canvas的体验让我感觉还是不错的，后边我也会写一些在实现的时候碰到的问题以及如何解决问题的文章，不过我目前的主业还是还是写富文本编辑器，富文本编辑器也是天坑中的一员，后边也可能会先写编辑器相关的文章。
2024-04-15 10:28:43
825
原创 基于OT与CRDT协同算法的文档划词评论能力实现
当我们实现在线文档平台时，划词评论的功能是非常必要的，特别是在重文档管理流程的在线文档产品中，文档反馈是非常重要的一环，这样可以帮助文档维护者提高文档质量。而即使是单纯的将划词评论作为讨论区，也是非常有用的，尤其是在文档并不那么完善的情况下，对接产品系统的时候可以得到文档之外的输入。那么本文将通过引入协同算法来解决冲突，从而实现在线文档的划词评论能力。我们即将要聊的OT与CRDT。
2024-04-10 09:14:11
735
原创 深入在线文档系统的 MarkDown/Word/PDF 导出能力设计
当我们实现在线文档的系统时，通常需要考虑到文档的导出能力，特别是对于私有化部署的复杂ToB产品来说，文档的私有化版本交付能力就显得非常重要，此外成熟的在线文档系统还有很多复杂的场景，都需要我们提供文档导出的能力。那么本文就以Quill富文本编辑器引擎为基础，探讨文档导出为MarkDownWordPDF插件化设计实现。文章中我们即将要聊到的每个转换器设计都有相关示例，在实现DEMO的过程中也是踩了很多坑，给予的示例可以完成纯前端的数据转换，也可以通过Node来实现，还是比较有参考价值的。Markdown。
2024-03-27 08:58:47
1424
原创 毕业半年多了，回顾从大学到现在搞过的很有意思的开源项目
感觉还是做了一些比较有意思的项目的，我个人觉得如果是搞技术的话，保持对技术的好奇心是一件很重要的事，能用技术来解决平时遇到的问题也是非常重要的一点，昨天听群友说他做了个项目用算法来下棋，面试官问他这个项目有什么用，我觉得这就是个很有意思的项目，过年回家的时候跟大爷下棋能跟大爷下的有来有回可不是有用吗，提供情绪价值也是很重要的。再说回来我做的这些项目，最开始我的目的就非常简单，我觉得这件事有意思我就去做了，并且在做的过程中不断解决了很多问题，并且也不断提升了技术水平，还能写很多博客，何乐而不为。
2024-03-11 09:00:00
639
1
原创 初探富文本之富文本diff算法与文档对比视图的实现
当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力，并且这是这是整个文档管理流程中的重要环节，那么在这个环节中通常就需要文档的diff能力，这样我们就可以知道文档的变更情况，例如文档草稿与线上文档的差异、私有化版本A与版本B之间的差异等等，本文就以Quill富文本编辑器引擎为基础，探讨文档diff算法的实现。
2024-02-21 09:00:08
308
原创 仿照AirDrop(隔空投送)优雅地在局域网中传输文件
webrtc是一项实时通讯技术，允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流、音频流、文件等等任意数据的传输，WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，可以创建点对点的数据分享和电话会议等。
2024-01-01 10:15:47
1077
原创 初探webpack之单应用多端构建
在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度绑定在webpack中的方法，我们也可以借助其他的构建工具来实现，比如rollupviterspack等等。
2023-12-02 12:15:42
1072
原创 从零实现的浏览器Web脚本
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于React组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在，在富文本文档中的实现效果可以参考。
2023-11-03 20:25:19
442
原创 初探富文本之React实时预览
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于React组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在，在富文本文档中的实现效果可以参考。
2023-10-15 13:27:56
769
原创 ReactPortals传送门
提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器，例如对话框、浮动工具栏、提示信息等。
2023-09-29 10:13:57
691
原创 SVG与foreignObject元素
可缩放矢量图形基于标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，能够优雅而简洁地渲染不同大小的图形，并和、、等其他网络标准无缝衔接。图像及其相关行为被定义于文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑。是可缩放矢量图形的缩写，其是一种用于描述二维矢量图形的可扩展标记语言标准，与基于像素的图像格式(如和)不同，使用数学方程和几何描述来定义图像，这使得其能够无损地缩放和调整大小，而不会失真或模糊。图像由基本形状(如
2023-08-11 21:33:04
657
原创 从零实现的Chrome扩展
Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的AdGuard等等，这些拓展都是可以通过来修改、增强浏览器的能力，用来提供一些浏览器本体没有的功能，从而实现一些有趣的事情。
2023-07-16 16:22:48
1444
原创 基于drawio构建流程图编辑器
drawio是一款非常强大的开源在线的流程图编辑器，支持绘制各种形式的图表，提供了Web端与客户端支持，同时也支持多种资源类型的导出。
2023-06-24 11:15:05
1841
原创 React闭包陷阱
是React 16.8引入的一个新特性，其出现让React的函数组件也能够拥有状态和生命周期方法，其优势在于可以让我们在不编写类组件的情况下，更细粒度地复用状态逻辑和副作用代码，但是同时也带来了额外的心智负担，闭包陷阱就是其中之一。
2023-05-21 10:11:44
1000
原创 Hooks与事件绑定
在React中，我们经常需要为组件添加事件处理函数，例如处理表单提交、处理点击事件等。通常情况下，我们需要在类组件中使用this关键字来绑定事件处理函数的上下文，以便在函数中使用组件的实例属性和方法。是React 16.8引入的一个新特性，其出现让React的函数组件也能够拥有状态和生命周期方法。Hooks的优势在于可以让我们在不编写类组件的情况下，复用状态逻辑和副作用代码，Hooks的一个常见用途是处理事件绑定。
2023-04-16 10:03:27
679
原创 Ubuntu20.04配置CuckooSandbox环境
Ubuntu20.04配置CuckooSandbox环境因为最近要做恶意软件分析，阅读论文发现动态分析的效果普遍比静态分析的效果要好一些，所以需要搭建一个动态分析的环境，查阅资料发现Cuckoo Sandbox是不错的自动化分析环境，但是搭建起来还是比较复杂的，主要是在配置虚拟机环境以及网络配置方面。基础环境文中的环境是Ubuntu 20.04 Server，也就是服务器版，后来为了配置虚拟机尝试过GNOME还有xfce4桌面环境，其实纯服务器环境即可完成配置，但是在配置虚拟机环境时可能会卡，所以还是
2023-04-12 17:01:49
1168
1
原创 初探富文本之CRDT协同实例
在前边初探富文本之CRDT协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如automergeyjs等等，本文就是关注于以yjs为CRDT协同框架来实现协同的实例。
2023-03-05 17:40:54
498
原创 初探富文本之CRDT协同算法
由于CRDT是处理分布式系统数据同步问题的通用解决方案，所以本文并没有局限于在富文本数据结构的设计，而是从分布式数据同步的角度来理解CRDT，并且穿插着CRDT在富文本领域上的应用，从而让我们能够更好地理解这个数据模型。同样，本文介绍的内容也只是冰山一角，分布式数据的同步一直以来都是个复杂的问题，回归到富文本领域上，如何保证多人协同的编辑器性能、在CAP理论下如何做取舍策略、如何保证数据的稳定性可恢复可回溯、光标的同步处理、如何处理Undo/Redo等等，都是需要深入研究并且设计的。
2023-02-12 16:52:57
681
原创 初探富文本之OT协同实例
在前边初探富文本之OT协同算法一文中我们探讨了为什么需要协同、为什么仅有原子化的操作并不能实现协同、为什么要有操作变换、如何进行操作变换、什么时候能够应用操作、服务端如何进行协同调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如ot.jsShareDBot-jsonEasySync等等，本文就是以ShareDB为OT协同框架来实现协同的实例。
2023-01-27 17:52:16
779
原创 初探富文本之OT协同算法
在上边的论述中我们似乎得到了一个不错的方案，但是实际上文中描述的内容也只是冰山一角，一个稳定协同过程还面临着诸多问题，例如需要支持多人协同的Undo/Redo，保证客户端与服务端OT算法的统一、在CAP理论下如何做取舍策略、如何保证多人协同的编辑器性能、如何保证数据的稳定性可恢复可回溯、光标的同步处理等等，当然不可能拥有从一开始就完美的架构设计，都是在发现问题之后一步步地让其变得完美。说了这么多，实际上目前已经有很多开源的OT。
2023-01-08 21:57:06
1224
原创 初探富文本之编辑器引擎
在前文中我们介绍了富文本的基础概念，以及富文本的基本发展历程，那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1的富文本编辑器，其能满足绝大部份使用场景，由此也诞生了非常多优秀的开源富文本引擎，这其中有仅提供引擎的编辑器例如Slate.js，也有提供了部分开箱即用的功能的例如Quill.js，也有基于这些引擎二次开发的例如Plate.js，本文主要介绍了Slate.js、Quill.js、Draft.js三款编辑器引擎。
2022-12-18 19:18:11
657
1
原创 初探富文本之富文本概述
富文本编辑器通常指的是可以对文字、图片等进行编辑的产品，具有所见即所得的能力。对于Input、Textarea之类标签，他们是支持内容编辑的，但并不支持带格式的文本或者是图片的插入等功能，所以对于这类的需求就需要富文本编辑器来实现。现在的富文本编辑器也已经不仅限于文字和图片，还包括视频、表格、代码块、思维导图、附件、公式、格式刷等等比较复杂的功能。
2022-11-19 11:31:28
2344
原创 Hooks与普通函数的区别
在自定义Hooks当中，数据被锁定在了Fiber当中，也就是说数据的共享范围是在当前组件节点中，相对于全局状态共享来说粒度会更细一些。当然我们如果想直接在全局共享数据的话，这种方案就不合适了，可能还需要配合一个全局的状态管理才行。还是那句话，在这里只是举一个例子，毕竟实际上适合的才是最好的。}官方提供的Hooks只应该在React函数组件/自定义Hooks内调用，而不应该在普通函数调用。自定义Hooks能够调用诸如useState、useRef等，普通函数则不能。由此可以通过内置的Hooks。
2022-10-16 11:47:06
1955
原创 Context与Reducer
Context是React提供的一种跨组件的通信方案，useContext与useReducer是在React 16.8之后提供的Hooks API，我们可以通过useContext与useReducer来完成全局状态管理例如Redux的轻量级替代方案。
2022-09-17 21:00:05
561
原创 MutationObserver对象
MutationObserver (W3C DOM4)对象提供了监视对DOM树所做更改的能力，其被设计为旧的Mutation Events功能的替代品(该功能是DOM3 Events规范的一部分)。
2022-08-14 10:59:15
442
原创 基于NoCode构建简历编辑器
基于NoCode构建简历编辑器，要参加秋招了，因为各种模版用起来细节上并不是很满意，所以尝试做个简单的拖拽简历编辑器。
2022-07-24 10:18:24
403
原创 基于slate构建文档编辑器
是一个完全可定制的框架，用于构建富文本编辑器，在这里我们使用构建专注于文档编辑的富文本编辑器。Github ｜ Editor DEMO富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。现在有很多开箱即用的富文本编辑器，例如、等，他们的可定制性差一些，但是胜在开箱即用，可以短时间就见到效果。而类似于、，他们是富文本编辑器的或者叫做，并不是一个完整的功能，这样就能够让我们有非常高的可定制性，当然也就会造成开发所需要的时间比较多。在实际应用或技术选型的时候，还是要多做一些调研，因为在业务上框架没有绝对的优
2022-06-26 09:45:10
1618
原创 竞态问题与RxJs
竞态问题通常指的是在多线程的编程中，输入了相同的条件，但是会输出不确定的结果的情况。虽然是单线程语言，但由于引入了异步编程，所以也会存在竞态的问题，而使用通常就可以解决这个问题，其使得编写异步或基于回调的代码更容易。前边提到了竞态问题通常指的是在多线程的编程中，输入了相同的条件，但是会输出不确定的结果的情况。发生这种情况的主要原因是，当多个线程都对一个共享变量有读取-修改的操作时，在某个线程读取共享变量之后，进行相关操作的时候，别的线程把这个变量给改了，从而导致结果出现了错误。在这里的多个线程中，起码有一个
2022-06-03 17:00:07
343
1
原创 Mobx与Redux的异同
Mobx与Redux的异同Mobx与Redux都是用来管理JavaScript应用的状态的解决方案，用以提供在某个地方保存状态、修改状态和更新状态，使我们的应用在状态与组件上解耦，我们可以从一个地方获得状态，在另一个地方修改，在其他地方得到他们更新后的状态。他们都遵循单一数据源的原则，这让我们更容易推断状态的值和状态的修改。当然他们并不一定要跟React绑定在一起，它们也可以在AngularJs和VueJs这些框架库里使用。描述Redux作者说过，如果你不知道是否需要Redux，那就是不需要。在判断是
2022-05-08 20:44:01
867
2
原创 初探webpack之编写loader
初探webpack之编写loaderloader加载器是webpack的核心之一，其用于将不同类型的文件转换为webpack可识别的模块，即用于把模块原内容按照需求转换成新内容，用以加载非js模块，通过配合扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果，从而完成一次完整的构建。描述webpack是一个现代JavaScript应用程序的静态模块打包器module bundler，当webpack处理应用程序时，它会递归地构建一个依赖关系图dependency graph，其中包
2022-05-05 09:24:43
689
原创 手写useState与useEffect
手写useState与useEffectuseState与useEffect是驱动React hooks运行的基础，useState用于管理状态，useEffect用以处理副作用，通过手写简单的useState与useEffect来理解其运行原理。useState一个简单的useState的使用如下。// App.tsximport { useState } from "react";import "./styles.css";export default function App() {
2022-04-30 20:50:52
659
原创 TS内置类型与拓展
TS内置类型与拓展TypeScript具有类型系统，且是JavaScript的超集，其可以编译成普通的JavaScript代码，也就是说，其是带有类型检查的JavaScript。内置类型TypeScript提供了几种实用程序类型来促进常见的类型转换，这些类型在全局范围内可用。PartialPartial<Type>构造一个类型使Type的所有属性都设置为可选。/** * Make all properties in T optional */type Partial<T
2022-04-06 09:26:37
4304
原创 蚂蚁暑期实习前端面试
蚂蚁暑期实习前端面试这次面试的是蚂蚁的智能协同事业部，也就是语雀这个产品线，okbug非得给我推，今年到目前为止也就面了两家，再面一家不过分吧，所以okbug就给我推了。2022.03.12上午11点左右投的，然后还要做测评，这个挺烦人的，不过也很快就做完了。一面周六上午11点左右投了，晚上七点就给我打电话，约了一面，并且还给了三道笔试题让我做完，一面约的时间是在2021-03-16 19:00，面试时间有55min。笔试第一题，解析目录成为树结构。笔试第二题，数组去重。笔试第三题，Promi
2022-03-26 10:55:46
1434
原创 美团暑期实习前端面试
美团暑期实习前端面试这次面试的是美团的到店事业群-平台技术部，在2022.03.01投递之后，直接参加实习招聘的第一次美团统一笔试，因为美团必须是首先笔试了才可以进入下边的流程的，笔试的时间是2022.03.05 10:00，这次比去年找实习的时候做的好，起码我是A了一道题，去年的这个时候是0AC哈哈哈。一面笔试完过了两天也就是周一下午就有老哥给我打电话约面试了，当时约的是2022.03.09 19:00，但是当天晚上上海那边是因为疫情组织做核酸检测，面试延迟了一个小时，也就是2022.03.09 2
2022-03-26 10:54:34
660
1
原创 字节跳动暑期实习前端面试
字节跳动暑期实习前端面试现在轮到我这个23届开始真正地找实习了，但是今年的校招情况非常非常差，这个在今年的实习总结再详细说吧。这次投递字节也是非常的有意思，本来我是投递的字节抖音互动部门，然后刚投了互动晚上AI算法部门说我的简历在他们那，然后考虑一下，但是我确实不是很了解这块，所以我还是想去互动来着然后老哥给我释放了简历。第二天，HR加我微信，我以为是互动那边的，然后她说我的简历昨天被她捞了，在基础架构那边，好家伙梅开二度，这算是截胡吗，HR也是23届实习生，本着实习生不为难实习生的原则，我就参加了基础架
2022-03-26 10:53:37
1746
1
原创 setState同步异步场景
setState同步异步场景React通过this.state来访问state，通过this.setState()方法来更新state，当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI。相比较于在使用Hooks完成组件下所需要的心智负担，setState就是在使用class完成组件下所需要的心智负担，当然所谓的心智负担也许叫做所必须的基础知识更加合适一些。描述setState只在合成事件和生命周期钩子函数中是异步的，而在原生事件中都是同步的，简单实现
2022-03-21 10:54:33
989
原创 useMemo与useCallback
useMemo与useCallbackuseMemo和useCallback都可缓存函数的引用或值，从更细的角度来说useMemo则返回一个缓存的值，useCallback是返回一个缓存函数的引用。useMemouseMemo的TS定义可以看出，范型T在useMemo中是一个返回的值类型。type DependencyList = ReadonlyArray<any>;function useMemo<T>(factory: () => T, deps: Depen
2022-02-12 10:55:26
444
原创 useEffect与useLayoutEffect
useEffect与useLayoutEffectuseEffect与useLayoutEffect可以统称为Effect Hook，Effect Hook可以在函数组件中执行副作用操作，副作用是指函数或者表达式的行为依赖于外部环境，或者在这里可以理解为修改了某状态会对其他的状态造成影响，这个影响就是副作用,数据获取，设置订阅以及手动更改React组件中的DOM都属于副作用。useEffectuseEffect Hook可以看做 componentDidMount、componentDidUpdate
2022-01-24 18:43:36
699
原创 蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。实现首先需要实现一个蒙层下滚动的效果示例，当我们点击弹窗按钮显示蒙层之后，再滚动鼠标的话能够看到蒙层下的页面依旧是能够滚动的。如果在蒙层的内部进行滚动，当蒙层内滚动条滚动到
2022-01-10 19:23:05
2698
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人