背景
明天在 陌陌 脉脉
看到一个帖子,讲到前端 三大浪漫
.
一、富文本编辑器
富文本编辑器市面上曾经有很多优良的开源版本了,然而问题在于每个产品的富文本编辑器需要不一样,所以可能导致有一些时候须要手撸编辑器
例如:
Draft.js
Slate.js
wangEditor
这些富文本编辑器还有衍生出他们的针对不同框架的版本,例如 React,还有一些插件。感兴趣的能够去 github 搜寻给个 star, 不便当前用得上
作者过后手写过桌面软件的富文本编辑器(Electron, 相似微信的聊天编辑器),苦楚得很,要管制光标、焦点,复制粘贴,适配多个操作系统环境的 QQ、微信、wps 等软件的复制粘贴等。感觉都能写好多篇论文了
二、在线 excel
举荐一个 github star 数量 11.6K 的开源库,luckysheet
demo 体验地址:https://mengshukeji.github.io/LuckysheetDemo/
反对:
1. 格局设置。包含字体、字号、色彩、文本对齐、主动换行以及 excel 反对的各种数据类型
2. 单元格。拖拽选取、下拉填充、主动填充、查找替换、合并单元格等。
3. 行列。暗藏、插入、删除、解冻。
4. 操作。撤销、复制、粘贴、剪切、快捷键、格局刷、筛选排序、批注、共享编辑。
5. 函数。内置常见公式,并反对自定义公式。
6. 图表。目前反对折线图、柱状图、面积图、条形图、饼图,反对插入图片。
三、CRDT – 无抵触复制数据类型
科普:
- 在分布式计算中,无抵触复制数据类型(英语:CRDT)是一种能够在网络中的多台计算机上复制的数据结构,正本能够独立和并发地更新,而不须要在正本之间进行协调,并且在数学上总是能够解决可能呈现的不统一问题。1357
- CRDT 的概念是由 Marc Shapiro、Nuno Preguiça、Carlos Baquero 和 Marek Zawirski 于 2011 年正式定义。[9] 开发的最后动机是合作式文本编辑(英语:Collaborative real-time editor)和挪动计算。CRDTs 也被用于在线聊天零碎、在线赌博和 SoundCloud 音频散发平台中。NoSQL 分布式数据库 Redis、Riak 和 Cosmos DB 有 CRDT 数据类型。
举荐一个 8K star 的前端 CRDT 实时合作库 Yjs:https://github.com/yjs/yjs
-
Yjs 次要的外部特点:
- 基于双向链表和 StructStore 的根底数据结构
- 基于 YATA 算法的并发抵触解决机制
- 基于 DeleteSet 和 Transaction 机制的撤销重做
- 基于两阶段划分的同步机制
它反对:
建模数据结构
解决并发抵触
回溯历史记录
同步网络状态等
-
应用示例
import * as Y from 'yjs' // 利用中的全副合作状态均可在单个 YDoc 容器中承载 // 将该实例传入 WebSocket 等协定的 provider 后即可反对网络同步 const doc = new Y.Doc() // 在 YDoc 上能够创立不同类型的顶层 YModel 实例 // 这里创立了一个顶层名为 root 的 YMap const yRoot = doc.getMap('root') // 也能够用 class 结构器来实例化独立的 YMap 等 YModel // 可间接用 get set delete 等常见 API 对 YModel 增删改查 const yPoint = new Y.Map() yPoint.set('x', 0) yPoint.set('y', 0) // YMap 的值也能够是 YMap,从而结构出嵌套的数据类型 yRoot.set('point', yPoint) // YMap 中还能够存入 YText 等其余 YModel,造成复合的数据类型 const yName = new Y.Text() yName.insert(0, 'Wilson Edwards') yRoot.set('name', yName)
以上借鉴一些这篇文章的内容,举荐深度浏览:
https://zhuanlan.zhihu.com/p/452980520
自己程度无限,如果要深刻这个 CRDT,倡议还是得多看一些论文。
最初
我是Peter
,如果感觉文章对大家有帮忙,能够帮忙点个在看、赞,关注下我的公众号:前端巅峰。这里会给大家带来最实用的 web2、web3 知识点!