脈脈上的 "前端三大浪漫" 是個啥？

PeterTan發表於2022-07-13
前端

背景

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

一、富文字編輯器

富文字編輯器市面上已經有很多優秀的開源版本了，但是問題在於每個產品的富文字編輯器需求不一樣，所以可能導致有一些時候需要手擼編輯器

例如:

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知識點！

相關文章