脉脉上的 前端三大浪漫 是个啥?

更新日期: 2022-07-13 阅读: 1.6k 标签: 前端

背景

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


一、富文本编辑器

富文本编辑器市面上已经有很多优秀的开源版本了,但是问题在于每个产品的富文本编辑器需求不一样,所以可能导致有一些时候需要手撸编辑器

例如:

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)是一种可以在网络中的多台计算机上复制的数据结构,副本可以独立和并发地更新,而不需要在副本之间进行协调,并且在数学上总是可以解决可能出现的不一致问题。[1][2][3][4][5][6][7][8]

  • 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知识点!

来源:前端巅峰

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/11891

相关推荐

前端和后端的区别_为什么很多人选择前端?

什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端更容易入门,每天调整界面的展示,通过代码 完成优美的界面和酷炫的交互。后端入门稍困难,每天关注的是业务逻辑的处理,数据的增删改查,性能的优化

掘金前端课程(小册)推荐

大家好,本期内容给大家推荐一些优质的前端掘金课程,比较适合初学者及工作几年的前端小伙伴,里面的内容讲解的比较详细,作者也是一线的大厂工作者。有兴趣的小伙伴快来打卡看一下吧

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

前端开发,如何写出优秀js代码

前端开发如何写出优秀js代码,什么样的javascript代码才是最优秀的的呢?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明。

解读前端热更新原理

热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。

前端开发,你的优势是什么?

每个前端开发都要有自己的优势,总结一下我的优势:1、工作年限长、经验多;2、基础相对扎实;3、逻辑思维能力合格;4、业务需求分析能合格。

前端权限控制

权限管理一般分以下 3 个基础概念:功能点,角色,用户。它们之间的关系一句话就能说清楚:一个用户可以拥有多个角色,而一个角色可以包含多个功能。

前端需要了解的后端知识

一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。当然除了上述这些,计算机网络、数据结构和算法、计算机组成和原理、离散数学等知识都要涉及。

女生30 岁转行做前端开发,晚吗?

30岁转行做前端程序开发!请把“晚吗”去掉。50多岁大爷都学编程了。你还担心啥?先从年龄上来说,这个年龄进入IT职业,那是相当棒的黄金时间,有目标,有干劲,有新颖的思想,而且仍是女孩子。

前端常用的新手引导库,总有一款适合你!

在产品发布新版本或者有新功能上线时,经常需要新手引导功能来引导用户了解应用,下面就来分享几个开箱即用的新手引导组件工具库,帮你快速实现新手引导功能!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!