为了掌握设计模式,开发了一款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使用了大量的监听器。

    • 装饰模式:对自定义基础弹框做定制化的扩展,实现不同场景所需的弹框。

    • 命令模式:封装工具界面中的功能点及快捷键命令。

    • 备忘录模式:负责实现撤销恢复功能,实现精细到单字符的撤销/恢复机制。

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

📝四、文本处理流程图

image

🧩五、模块划分

项目分为两大模块:

  • 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

📸 六、截图预览

白天模式的截图:

image

夜间模式的截图:

image

支持的语法截图:

image

image

🚀七、项目亮点

  • 💡 高度模块化,任何 Markdown 语法都能独立添加/修改。

  • 🧠 设计模式实战,适合做设计模式学习的项目。

  • 🖥️ 可按需获取,用户界面和文本解析渲染分为两个模块

    • 只使用用户界面源码,然后轻松切换成熟的解析器依赖,开发一个完整的markdown文本编辑器;

    • 仅学习文本解析渲染模块源码,不用关注用户界面源码。

  • 🧪 解析性能毫秒级,确保解析效率。

  • 🎯 轻松上手,使用JDK8 自带JavaFX模块,无需做额外处理。

  • 📦 开源项目,文档完善,方便学习和贡献。

🙌八、项目地址(GitHub)

🌍 GitHub 开源地址(YtyMark-java)

欢迎提交 PR、Issue、Star ⭐️!
你也可以在 Issues 区提出你的建议或想法!

✏️九、总结

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

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

  • 秘籍1设计模式手册:《掌握设计模式:23种经典模式实践、选择、价值与思想》

  • 秘籍2练手项目:设计模式实战项目--markdown文本编辑器软件开发(已开源

image

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

超实用的SpringAOP实战之日志记录

2023年下半年软考考试重磅消息

通过软考后却领取不到实体证书?

计算机算法设计与分析(第5版)

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

软考证书=职称证书?

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

From:https://www.cnblogs.com/dennyLee2025/p/18832024
渊渟岳
100+评论
captcha