为了掌握设计模式，开发了一款Markdown 文本编辑器软件(已开源）

设计模式实战项目：Markdown 文本编辑器软件开发(已开源)

一、项目简介

项目名称：YtyMark-java

本项目是一款基于 Java 语言 和 JavaFX 图形界面框架 开发的 Markdown 文本编辑器。项目不仅具备 Markdown 文本编写、预览、保存、导出等功能，还特别关注软件架构设计的优雅性与可维护性。项目采用多种经典的 面向对象设计模式，实现了解耦、扩展性和高可读性的代码结构。

此外，项目已开源，旨在为有志于掌握设计模式、文本解析与渲染的开发者提供实战参考。

为什么编写这个项目

纸上得来终觉浅，绝知此事要躬行。单独学习的设计模式始终是理论的学习，实践才是经验的来源，唯有经验才属于自己的。再者，因为很少看到专门用于练手设计模式的实战项目，所以才有了YtyMark-java这个开源项目。该项目主要用于学习设计模式的实战项目，将所学的设计模式用于实战，在实战中领悟真谛。

二、技术栈

编程语言：Java 8
桌面界面框架：JavaFX
构建工具：Maven
核心功能模块：
- Markdown 文本解析器
- Markdown 语法树（AST）构建
- HTML 渲染器
- 可视化编辑器界面
使用的设计模式（12种）：
- 组合模式：将markdown语法解析结果构建成AST节点树。
- 构建者模式：创建复杂解析器和渲染器。
- 状态模式：对markdown文本不同语法做一些前置处理，裁剪成块级元素。
- 责任链模式：按优先级匹配不同，在"流水线"上处理复杂的块级元素解析及嵌套解析。
- 策略模式：动态选择解析器完成行内元素的解析和工具界面样式的切换。
- 迭代器模式：通过迭代器结合递归来遍历节点树，比如遍历块级元素进行行内元素解析和节点树渲染操作。
- 中介者模式思想：加入AST节点树解耦解析器和渲染器的耦合，使其灵活地渲染成不同的文档。
- 访问者模式：负责分离节点数据与渲染操作，提高渲染的扩展性；在行内元素嵌套解析时使用访问者模式来解决嵌套调用问题，因为嵌套节点的文本字段是不同的。
- 工厂模式：样式的创建通过工厂模式来完成。
- 观察者模式：识别到主题发生变化时执行重新渲染操作；样式切换后，渲染的文字样式也需要同步调整，再结合监听器（观察者模式）来实现主题变化后重新渲染文本内容，除此之外JavaFX使用了大量的监听器。
- 装饰模式：对自定义基础弹框做定制化的扩展，实现不同场景所需的弹框。
- 命令模式：封装工具界面中的功能点及快捷键命令。
- 备忘录模式：负责实现撤销和恢复功能，实现精细到单字符的撤销/恢复机制。

三、功能模块与设计模式应用

1. Markdown 文本解析器

目标：将 Markdown 文本解析为语法树（AST）。
设计模式：
- 组合模式：表示 Markdown 语法结构（如段落、标题、列表）之间的树形结构。
- 构建者模式：创建复杂解析器和渲染器。
- 状态模式：对markdown文本不同语法做一些前置处理，裁剪成块级元素。
- 责任链模式：按优先级匹配不同，处理复杂的块级元素解析及嵌套解析。
- 策略模式：动态选择解析器完成行内元素的解析。
- 迭代器模式：通过迭代器结合递归来遍历节点树，遍历块级元素进行行内元素解析。

2. AST 渲染器

目标：将 AST 语法树渲染为 HTML 文本预览。
设计模式：
- 迭代器模式：通过迭代器结合递归来遍历节点树，比如遍历节点树完成渲染操作。
- 中介者模式思想：加入AST节点树解耦解析器和渲染器的耦合，使其灵活地渲染成不同的文档。
- 访问者模式：负责分离节点数据与渲染操作，提高渲染的扩展性；在行内元素嵌套解析时使用访问者模式来解决嵌套调用问题，因为嵌套节点的文本字段是不同的。

3. JavaFX 用户界面

目标：为用户提供可视化的文本输入、预览、保存、导出（PDF/HTML)和样式切换等功能。
设计模式：
- 策略模式：动态选择解析器完成工具界面样式的切换。
- 工厂模式：样式的创建通过工厂模式来完成。
- 观察者模式：识别到主题发生变化时执行重新渲染操作；样式切换后，渲染的文字样式也需要同步调整，再结合监听器（观察者模式）来实现主题变化后重新渲染文本内容，除此之外JavaFX使用了大量的监听器。
- 装饰模式：对自定义基础弹框做定制化的扩展，实现不同场景所需的弹框。
- 命令模式：封装工具界面中的功能点及快捷键命令。
- 备忘录模式：负责实现撤销和恢复功能，实现精细到单字符的撤销/恢复机制。

注：篇幅原因，功能的详细实现会在后续的文章中再娓娓道来。

四、文本处理流程图

五、模块划分

项目分为两大模块：

UI界面（ytyedit-mark）
markdown文本解析和渲染（ytymark）

YtyMark-java

├── ytyedit-mark/

│   ├── src/

│   │   ├── main/

│   │   │   ├── java/

│   │   │   │   ├── editor/             # JavaFX UI 界面

│   │   │   │   ├── enums/              # Icon图标等

│   │   │   │   ├── utils/              # 资源读取等

│   │   │   │   ├── window/             # 自定义窗口（主窗口、弹框）

│   │   │   │   ├── RenderMarkdown      # 解析和渲染

│   │   │   │   ├── YtyEditApplication  # 主程序入口

│   │   │   └── resources/

│   │   │       └── css/                # 主题样式（CSS）

│   │   │       └── fonts/              # 字体集

│   │   │       └── images/             # 图片

│   ├── README.md

│   └── pom.xml

│

├── ytymark/

│   ├── src/

│   │   ├── main/

│   │   │   ├── java/

│   │   │   │   ├── annotation/         # 自定义注解

│   │   │   │   ├── enums/              # 枚举值

│   │   │   │   ├── node/               # 树节点（块级和行级节点）

│   │   │   │   ├── parser/             # 解析器（块级和行级元素）

│   │   │   │   ├── renderer/           # 渲染器（块级和行级元素）

│   │   │   └── resources/

│   │   │       └──

│   ├── README.md

│   └──pom.xml

├── pom.xml

└── README.md

六、截图预览

白天模式的截图：

夜间模式的截图：

支持的语法截图：

七、项目亮点

高度模块化，任何 Markdown 语法都能独立添加/修改。
设计模式实战，适合做设计模式学习的项目。
️ 可按需获取，用户界面和文本解析渲染分为两个模块
- 只使用用户界面源码，然后轻松切换成熟的解析器依赖，开发一个完整的markdown文本编辑器；
- 仅学习文本解析渲染模块源码，不用关注用户界面源码。
解析性能毫秒级，确保解析效率。
轻松上手，使用JDK8 自带JavaFX模块，无需做额外处理。
开源项目，文档完善，方便学习和贡献。

八、项目地址（GitHub）

GitHub 开源地址（YtyMark-java）

欢迎提交 PR、Issue、Star ️！

你也可以在 Issues 区提出你的建议或想法！

️九、总结

本 Markdown 文本编辑器项目不仅实现了文本解析与图形界面交互，还将多种设计模式融入到实际应用中，是一次系统性的 设计模式实践或架构设计实践。主要目的用于学习设计模式的实战项目，将所学的设计模式用于实战。后续可阅读开源框架源码，剖析优秀的开源项目是如何设计出来的，毕竟YtyMark-java这个开源项目只是练手项目。

更多详细内容可以前往笔者微信公众号回复：设计模式，来获取，后续有关设计模式的新资料都可以从这个入口获取到。

秘籍1设计模式手册：《掌握设计模式：23种经典模式实践、选择、价值与思想》
秘籍2练手项目：设计模式实战项目--markdown文本编辑器软件开发（已开源）

查看往期设计模式文章的：设计模式

Java全栈学习路线、学习资源和面试题一条龙

软考证书=职称证书？

软考中级--软件设计师毫无保留的备考分享