脈脈上的 "前端三大浪漫" 是個(gè)啥？

背景

今天在陌陌脈脈看到一個(gè)帖子，講到前端三大浪漫.

一、富文本編輯器

富文本編輯器市面上已經(jīng)有很多優(yōu)秀的開源版本了，但是問題在于每個(gè)產(chǎn)品的富文本編輯器需求不一樣，所以可能導(dǎo)致有一些時(shí)候需要手?jǐn)]編輯器

例如:

Draft.js
Slate.js
wangEditor

這些富文本編輯器還有衍生出他們的針對(duì)不同框架的版本，例如React，還有一些插件。感興趣的可以去github搜索給個(gè)star,方便以后用得上

作者當(dāng)時(shí)手寫過桌面軟件的富文本編輯器（Electron,類似微信的聊天編輯器），痛苦得很，要控制光標(biāo)、焦點(diǎn)，復(fù)制粘貼，適配多個(gè)操作系統(tǒng)環(huán)境的QQ、微信、wps等軟件的復(fù)制粘貼等。感覺都能寫好多篇論文了

二、在線excel

推薦一個(gè)github star數(shù)量11.6K的開源庫,luckysheet

demo體驗(yàn)地址：https://mengshukeji.github.io/LuckysheetDemo/

支持：

1.格式設(shè)置。包括字體、字號(hào)、顏色、文本對(duì)齊、自動(dòng)換行以及excel支持的各種數(shù)據(jù)類型

2.單元格。拖拽選取、下拉填充、自動(dòng)填充、查找替換、合并單元格等。

3.行列。隱藏、插入、刪除、凍結(jié)。

4.操作。撤銷、復(fù)制、粘貼、剪切、快捷鍵、格式刷、篩選排序、批注、共享編輯。

5.函數(shù)。內(nèi)置常見公式，并支持自定義公式。

6.圖表。目前支持折線圖、柱狀圖、面積圖、條形圖、餅圖，支持插入圖片。

三、CRDT - 無沖突復(fù)制數(shù)據(jù)類型

科普：

• 在分布式計(jì)算中，無沖突復(fù)制數(shù)據(jù)類型（英語：CRDT）是一種可以在網(wǎng)絡(luò)中的多臺(tái)計(jì)算機(jī)上復(fù)制的數(shù)據(jù)結(jié)構(gòu)，副本可以獨(dú)立和并發(fā)地更新，而不需要在副本之間進(jìn)行協(xié)調(diào)，并且在數(shù)學(xué)上總是可以解決可能出現(xiàn)的不一致問題。[1][2][3][4][5][6][7][8]

• CRDT的概念是由Marc Shapiro、Nuno Pregui?a、Carlos Baquero和Marek Zawirski于2011年正式定義。[9] 開發(fā)的最初動(dòng)機(jī)是協(xié)作式文本編輯（英語：Collaborative real-time editor）和移動(dòng)計(jì)算。CRDTs也被用于在線聊天系統(tǒng)、在線賭博和SoundCloud音頻分發(fā)平臺(tái)中。NoSQL分布式數(shù)據(jù)庫Redis、Riak和Cosmos DB有CRDT數(shù)據(jù)類型。

推薦一個(gè)8K star的前端 CRDT 實(shí)時(shí)協(xié)作庫 Yjs：https://github.com/yjs/yjs

• Yjs 主要的內(nèi)部特點(diǎn)：

• 基于雙向鏈表和 StructStore 的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)
• 基于 YATA 算法的并發(fā)沖突解決機(jī)制
• 基于 DeleteSet 和 Transaction 機(jī)制的撤銷重做
• 基于兩階段劃分的同步機(jī)制

它支持：

建模數(shù)據(jù)結(jié)構(gòu)

解決并發(fā)沖突

回溯歷史記錄

同步網(wǎng)絡(luò)狀態(tài)等

• 使用示例

import * as Y from 'yjs'

// 應(yīng)用中的全部協(xié)作狀態(tài)均可在單個(gè) YDoc 容器中承載
// 將該實(shí)例傳入 WebSocket 等協(xié)議的 provider 后即可支持網(wǎng)絡(luò)同步
const doc = new Y.Doc()

// 在 YDoc 上可以創(chuàng)建不同類型的頂層 YModel 實(shí)例
// 這里創(chuàng)建了一個(gè)頂層名為 root 的 YMap
const yRoot = doc.getMap('root')

// 也可以用 class 構(gòu)造器來實(shí)例化獨(dú)立的 YMap 等 YModel
// 可直接用 get set delete 等常見 API 對(duì) YModel 增刪改查
const yPoint = new Y.Map()
yPoint.set('x', 0)
yPoint.set('y', 0)

// YMap 的值也可以是 YMap，從而構(gòu)造出嵌套的數(shù)據(jù)類型
yRoot.set('point', yPoint)

// YMap 中還可以存入 YText 等其他 YModel，形成復(fù)合的數(shù)據(jù)類型
const yName = new Y.Text()
yName.insert(0, 'Wilson Edwards')
yRoot.set('name', yName)

以上借鑒一些這篇文章的內(nèi)容，推薦深度閱讀：https://zhuanlan.zhihu.com/p/452980520 本人水平有限，如果要深入這個(gè)CRDT，建議還是得多看一些論文。

最后

如果覺得這篇文章還不錯(cuò)，來個(gè)【轉(zhuǎn)發(fā)、收藏、在看】三連吧，讓更多的人也看到~

如果你想加入高質(zhì)量前端交流群，或者你有任何其他事情想和我交流也可以添加我的個(gè)人微信 huab119 。

如果你有任何想法，歡迎在留言區(qū)和我留言，如果這篇文章幫助到了你，歡迎點(diǎn)贊和關(guān)注。