您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

编辑器的自制

时间:2020-08-06 11:14:40  来源:  作者:

最近的几个月里,我一直在寻找一种合适的方式来构建底层应用。可能是 Web、App 应用已经缺乏了一些新鲜感;也可能是受受国际局势的影响,我开始思考构建底层应用架构的能力。

于是,在我学习了一段时间的 Rust 之后,我便不断地往系统的底层探索。在那之前,另外一门合适的语言大抵是 Golang,不过我偏向于认为 Golang 是一个 Web 应用或者普通应用的开发语言,而非一个系统编程语言。

这其中的一个话题就是:编辑器以及 IDE。毕竟,讨论 Emacs 和 Vim 哪一个更好,已经不能满足我的需求。程序员的乐趣应该在于如此去写一个 Emcas,便实现一个 Vim —— 毕竟 Emacs 操作系统太复杂了。

 

1. 无 UI 式:命令行编辑器

编辑器的自制

作为过程的第一步,我开始寻找一些合适的编辑器(PS:主要是简单),以作为我的编辑器和 IDE 生涯的第一步。然而,这并不是一件容易的事,毕竟我先前构建 Client 端的经验,都是使用现成的 UI 组件,如 WebView 的 Textarea、Android 框架中的 EditText 组件。

于是乎,我模仿 + 复制 Iota 项目的一部分代码,形成了一份最小可工作的代码,以了解命令行编辑器如何运作的整体原理:

字符移动

对于终端编程来说,并不存在组件可以使用,所以我们所要做的事情是:在特定的位置显示特定的字符,如:


 
  1. rustbox.print_char(1,1,RustBoxStyle::empty,Color::White,Color::Black,'A')

这样一来,它就在屏幕上的 1,1 的位置画了一个 A,它的前景是白色,背景是黑色。嗯,没错,这种体验就是我大学玩的嵌入式编程。

于是,第一步我们要做的就是读取文本,然后渲染。这里用的库是 RustBox,它封装了 C 语言下的 Termbox。对于一些人来说,更为熟悉的名字可能是 curses,又或者是 GNU 里的 ncurses。在另外的一个 Rust 编写的编辑器 [amp] 中,使用的是 termion。

快捷键识别随后,我们可以启动起编辑器,而后做各种事件轮询,等待用户的交互,如快捷键。同样的,这个功能也是由底层的 Termbox 提供了支持,我们只需要创建行为与快捷键的绑定即可。

状态栏 + 命令模式。有了上面的基础之后,这个也不会遇到什么困难。

语法高亮。这里我就被 iota 这个项目坑了,项目的截图上是有语法高亮的,但是代码上已经删了。回溯了一下过程,发现这部分的功能删了,因为原先的设计并不合理。合理的方式应该是使用 syntect 这种现成的方案,它使用了 Sublime Text 的语法定义格式。

理解了原理,快速画了个瓢之后,我就转向 UI 式的文件编辑器。

GitHub: https://github.com/rapilab/rinput

 

2. UI 式:进程分离

编辑器的自制

随后,我在 Awesome-rust 项目中,物色到了第二个可以项目:xi-editor。Xi Editor 是 google 员工开源的一款用Rust 语言编写的文本编辑器。从之前的新闻来看,像是火了一段时间,但是好像已经没有那么活跃了。

它最主要的特点有:

前后端分离。编辑器分为两部分,后端和前端。后端(即核心部分)负责保存文件缓冲区,并负责所有潜在的昂贵编辑操作。你可以将等价为前后端分离应用的关系,又或者是 Electron 应用中:Electron 的 Node.js 和 WebView 部分的区别。

JSON RPC。xi-editor 提供了 JSON 形式的 RPC(远程过程调用)用于前后端之间进行通讯。采取 JSON 的主要原因是减少开发插件的成本,更好的扩大生态。如,我从 UI 上修改编辑器的主题,将通过 RPC 的方式通知后端,并将对应的配置存储到系统中。并且诸如于 IDEA 的索引模式,它应该也会在后台运行,而不占用 UI 进程,影响用户体验。如此一来,我们所面临的卡顿问题,会进一步得到缓解。

不限 UI。因为 xi-editor 本身只提供 core 模块,所以,我们可以看到有各种各样的 xi-editor 的前端,如原生 macOS 实现、基于 Electron 实现等等。

所以,我尝试基于这种架构模式,开发了一个基于这种架构模式的系统状态应用 Stadal。有了这样的模式,我们就可以分离 UI 进程,提供更好的用户体验。

顺便一题,在这种模式之后,编辑器的模型都统一由后端管理(PS:这一点与 Web 应用是相似的,笑~)。

 

Emacs 架构:M-V-C 架构

这样一类比的情况下,Emcas 的架构就好似一个大单体一样。毕竟这是 M-V-C 架构(源自《架构之美》:

  • 模型。程序所操作数据的底层描述,如文本属性、缓冲区等等;并与系统进行交互。

  • 视图。面向用户展示数据的方法,如对于窗口增量显示更新逻辑等。

  • 控制器。负责实现用户与视图的交互(如按键、鼠标事件等),并对模型进行更新(采用 Lisp 作为支撑)

至于插件部分则是由 Lisp 脚本来实现,至于是插件好还是脚本好就是另外一个问题了。

GitHub :https://github.com/phodal/stadal

 

IDE:IDEA 的插件化

编辑器的自制

因为偶然地原因,我分析了一段时间的 Intellij IDEA 社区版 + Android Studio 的源码之后,我有了一些新的感受 —— 这个系统架构有点复杂,哈哈。当然,也发现了一些相似的模式。

 

隔离层:独立二进制

对于工具的制造者来说,开发者并不希望工具被捆绑在某一个开发工具上。因此,对于开发者而言,优先做的是提供一个可独立运行的程序,而后再封装一个针对于该工具的实现。

于是乎,这个运行的程序,它可能是:

  • C/C++ 编写的二进制应用。通过 daemon 的方式来运行,并能通过解析输出来进行错误处理。

  • Gradle 开发的插件。并借助于 Gradle Tooling API 来实现插件的调用。

  • JAVA 编写的应用。通过直接集成的方式进行。

  • ……

这样一来,我们就在 IDE 中集成了这样的能力,并引入到我们的系统中使用。

 

语言扩展

IDEA 本身的插件体系已经设计得很完善了,如我们可以快速添加一门语言,只需要:

  • 注册文件类型

  • 实现 Lexer(词法分析)

  • 实施 Parser(语法分析) 和 PSI(程序结构接口)

  • 语法高亮显示和错误高亮显示

  • 代码补全

  • 查找用法

  • 重构:重命名、安全删除

  • 代码格式化程序

  • ……

这样一来,我们就能快速地具备一个语言 IDE 应该有的能力。比如 IDEA 的 Rust 插件就是这样一个不错的示例。

编辑器的自制

 

总结

一个好的编辑器/IDE 应该能:

  • 滋长的特性:通过插件化支撑

  • 可维护性:具备良好的可读性

  • 进程分离

  • 速度

讨论哪个编辑器/IDE 是一件没意义的事。

只有自己挖的坑才是好的。

我行我上。



Tags:编辑器   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  Tags: 编辑器  点击:(90)  评论:(0)  加入收藏
然后我们再来看看,androidstudio的布局编辑器的使用. 可以先打开layout中的一个xml去看看,右边有所见即所得的编辑器,以前用eclipse,都是跑起来看,太麻烦了. ​可以看...【详细内容】
2021-04-14  Tags: 编辑器  点击:(303)  评论:(0)  加入收藏
前言后端程序员们常常会争论“什么是最好的语言”,而对于前端来说,我们没有选择,无论爱与恨,我们只能选择 JavaScript 。所以前端日常的争论就变成了“什么是最好的框架”以及...【详细内容】
2021-04-08  Tags: 编辑器  点击:(291)  评论:(0)  加入收藏
CKEditorCKEditor拥有10多年的开发经验,你可以完全放心此文本编辑器的质量。它支持70多种语言,我认为这是你网站的不错选择。它还可以运行在许多不同的浏览器上,并能很好地与...【详细内容】
2021-03-18  Tags: 编辑器  点击:(287)  评论:(0)  加入收藏
IDE没有统一的标准,只要自己用的习惯,就是最好的。下面为大家列出一些比较常用而且受欢迎的编辑器和IDE,大家可以根据自己的需要进行选择。VS Code是否支持插件:支持收费策略:免...【详细内容】
2021-01-18  Tags: 编辑器  点击:(194)  评论:(0)  加入收藏
从GIMP作为一个开源图像编辑器开始,进而引发GTK工具箱的诞生以及发展成为一个自成体系的项目,被成千上万的开发者使用到今天已经25年了。今年的GIMP的25岁生日虽然没有什么重...【详细内容】
2020-11-23  Tags: 编辑器  点击:(143)  评论:(0)  加入收藏
当打开这篇文章的时候,恭喜您已经解锁了新技能——右键功能。今天的文章主要讲的是鼠标右键在编辑器中的应用,小蚂蚁将从样式区、编辑区、配图区三大板块全面解锁右...【详细内容】
2020-11-20  Tags: 编辑器  点击:(93)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12  Tags: 编辑器  点击:(393)  评论:(0)  加入收藏
文本编辑软件在任何操作系统上都是必备的软件。我们在 Linux 上不缺乏非常现代化的编辑软件,但是它们都是基于 GUI(图形界面)的编辑软件。正如你所了解的,Linux 真正的魅力在于...【详细内容】
2020-10-13  Tags: 编辑器  点击:(85)  评论:(0)  加入收藏
前言集成开发环境(IDE)允许开发人员用不同的编程语言运行代码,特别地,python IDE实际上是一种IDE,专门让您测试、运行和编辑用python语言编写的代码。当涉及到一个很大的项目时...【详细内容】
2020-10-09  Tags: 编辑器  点击:(78)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条