背景

明天在陌陌脉脉看到一个帖子，讲到前端三大浪漫.

一、富文本编辑器

富文本编辑器市面上曾经有很多优良的开源版本了，然而问题在于每个产品的富文本编辑器需要不一样，所以可能导致有一些时候须要手撸编辑器

例如:

Draft.jsSlate.jswangEditor

这些富文本编辑器还有衍生出他们的针对不同框架的版本，例如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 的 YMapconst 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知识点！