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

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

背景

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


一、富文本编辑器

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

例如:

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://www.fly63.com/article/detial/11891

前端开发,脱离菜鸟层次的二个关键点

我个人吧,一直认为学习前端技术是比较简单的事情,只要你真的是一步一个脚印的在前进,那你自然会有相应的结果可以收获。这里面包含二个关键点,一,脚踏实地;二,不断努力。

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

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

解读前端热更新原理

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

你不知道的前端SDK开发技巧

作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,另一种做法是使用Flow或者TypeScript

Web前端体系的脉络结构

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。

关于前端数据&逻辑的思考

这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件,逻辑处理,抽象、聚合数据

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

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

web前端的一些不为人知的冷知识点_html篇整理

web前端HTML篇冷知识点——这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。

web前端的一些不为人知的冷知识点_CSS篇整理

CSS篇整理:关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算

web前端的一些不为人知的冷知识点_Js篇整理

Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table

点击更多...

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