完整解析Files.md前端架构零构建原生JavaScript与CodeMirror的协作之道【免费下载链接】files.md Private, quiet space for thinking. Simple app for .md files.项目地址: https://gitcode.com/GitHub_Trending/fi/files.mdFiles.md是一个私密安静的思考空间一个专注于.md文件的本地优先 Markdown 笔记应用。它的前端架构非常特别没有构建系统、没有打包工具、没有 Electron打开 web/index.html 就能直接运行而编辑器则由原生 JavaScript 与 CodeMirror 深度协作实现 WYSIWYG所见即所得体验。为什么选择零构建架构Files.md 的设计哲学是代码足够简单一个人或一个 LLM就能装进脑子里无打包链仓库里没有面向前端的package.json构建脚本没有 webpack/vite 配置无运行时外壳不用 Electron直接用浏览器的 File System Access API 读写本地文件夹可移植整个web/目录拷走就能用web/就是文档根目录这种零构建策略带来一个直接好处开发者可以逐行读懂 web/app.js 和 web/files.js 这类 1000 行级别的文件而不必追踪一堆编译产物。index.html 的脚本加载顺序整个应用的骨架零构建应用的核心纪律是脚本加载顺序。web/index.html 按依赖顺序引入约 30 个script阶段脚本职责编辑器内核web/lib/codemirror.jsCodeMirror 编辑器引擎Markdown 渲染层web/lib/core.js、web/lib/hypermd.jsHyperMD 的 WYSIWYG 折叠渲染功能插件web/lib/fold.js、web/lib/hide-token.js代码折叠、语法 token 高亮业务逻辑web/editor.js、web/files.js、web/chat.js编辑器装配、文件同步、聊天捕获值得注意的细节mermaid.min.js 并不在加载列表中而是在笔记第一次出现 mermaid 代码块时才懒加载见 index.html 第 52 行注释避免首次打开时的性能开销。CodeMirror 与 HyperMD协作实现所见即所得编辑体验的核心在 web/editor.js 的initEditor函数中装配。它基于HyperMD.fromTextArea创建编辑器HyperMD 折叠渲染把 Markdown 源码折叠成近似预览的形态——标题变大、图片直接显示、代码块折叠成带高亮的卡片实现边写边看KaTeX 数学公式通过 web/lib/latex/fold-math.js 实时渲染公式块Emoji 自动补全输入时弹出 web/lib/emoji.js 提供的补全建议笔记互链hmdResolveURL钩子把.md链接解析为应用内跳转移动端单栏、桌面端自动切到分屏查看hmdResolveURL里还藏着不少工程细节解码 URL 转义字符、区分域名与本地文件名避免被误判为外部链接、按裸文件名在media/与img/目录中查找图片资源。文件如何进出浏览器File System Access API 内存镜像web/files.js 的头部注释道出了整个同步模型——它连接三个世界磁盘通过浏览器的 File System Access API 直接读写用户选择的本地文件夹内存镜像files对象缓存所有文件句柄与元数据供编辑器快速访问服务器快照server对象持久化在 localStorage记录服务端文件状态保存策略很克制当前打开的文件每 1 秒自动保存一次CURRENT_FILE_SYNC_INTERVAL媒体文件上限 65MB与 server/sync/sync.go 的MaxMediaSize对齐。界面右下角有一个安静的同步状态点橙色表示有未同步修改这种不打断思考的状态提示正契合 Files.md 的产品气质。离线可用Service Worker 让 PWA 真正落地零构建的另一个红利是离线缓存极其简单。web/offline.js 显式列出所有静态资源 URLCSS、JS、KaTeX 字体文件做预缓存请求被拦截后直接返回缓存副本。配合 web/manifest.jsonFiles.md 可以安装成桌面/移动端的独立应用PWA在浏览器地址栏右侧点击安装即可。这就是不需要安装任何东西、只需用浏览器这句话的底层支撑。架构启示简单即强大决策传统做法Files.md 的做法编辑器自研或重型框架CodeMirror HyperMD 经典组合状态管理Redux 全家桶全局变量 localStorage模块系统ES Module / 打包加载顺序约定离线复杂缓存策略一份显式 URL 清单桌面形态Electron 打包PWA 安装这套架构对 LLM 友好、对人类友好server/ 后端是单个 Go 二进制前端是几十个可直接阅读的原生 JS 文件前后端加起来认知负担极低。对于想给笔记工具做减法的开发者来说Files.md 的 web/ 目录本身就是一份零构建前端架构的参考清单入口与脚本编排web/index.html编辑器装配web/editor.js文件同步核心web/files.js聊天捕获流程web/chat.js侧边栏文件树web/lib/sidebar.js【免费下载链接】files.md Private, quiet space for thinking. Simple app for .md files.项目地址: https://gitcode.com/GitHub_Trending/fi/files.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 完整解析Files.md前端架构：零构建原生JavaScript与CodeMirror的协作之道
完整解析Files.md前端架构零构建原生JavaScript与CodeMirror的协作之道【免费下载链接】files.md Private, quiet space for thinking. Simple app for .md files.项目地址: https://gitcode.com/GitHub_Trending/fi/files.mdFiles.md是一个私密安静的思考空间一个专注于.md文件的本地优先 Markdown 笔记应用。它的前端架构非常特别没有构建系统、没有打包工具、没有 Electron打开 web/index.html 就能直接运行而编辑器则由原生 JavaScript 与 CodeMirror 深度协作实现 WYSIWYG所见即所得体验。为什么选择零构建架构Files.md 的设计哲学是代码足够简单一个人或一个 LLM就能装进脑子里无打包链仓库里没有面向前端的package.json构建脚本没有 webpack/vite 配置无运行时外壳不用 Electron直接用浏览器的 File System Access API 读写本地文件夹可移植整个web/目录拷走就能用web/就是文档根目录这种零构建策略带来一个直接好处开发者可以逐行读懂 web/app.js 和 web/files.js 这类 1000 行级别的文件而不必追踪一堆编译产物。index.html 的脚本加载顺序整个应用的骨架零构建应用的核心纪律是脚本加载顺序。web/index.html 按依赖顺序引入约 30 个script阶段脚本职责编辑器内核web/lib/codemirror.jsCodeMirror 编辑器引擎Markdown 渲染层web/lib/core.js、web/lib/hypermd.jsHyperMD 的 WYSIWYG 折叠渲染功能插件web/lib/fold.js、web/lib/hide-token.js代码折叠、语法 token 高亮业务逻辑web/editor.js、web/files.js、web/chat.js编辑器装配、文件同步、聊天捕获值得注意的细节mermaid.min.js 并不在加载列表中而是在笔记第一次出现 mermaid 代码块时才懒加载见 index.html 第 52 行注释避免首次打开时的性能开销。CodeMirror 与 HyperMD协作实现所见即所得编辑体验的核心在 web/editor.js 的initEditor函数中装配。它基于HyperMD.fromTextArea创建编辑器HyperMD 折叠渲染把 Markdown 源码折叠成近似预览的形态——标题变大、图片直接显示、代码块折叠成带高亮的卡片实现边写边看KaTeX 数学公式通过 web/lib/latex/fold-math.js 实时渲染公式块Emoji 自动补全输入时弹出 web/lib/emoji.js 提供的补全建议笔记互链hmdResolveURL钩子把.md链接解析为应用内跳转移动端单栏、桌面端自动切到分屏查看hmdResolveURL里还藏着不少工程细节解码 URL 转义字符、区分域名与本地文件名避免被误判为外部链接、按裸文件名在media/与img/目录中查找图片资源。文件如何进出浏览器File System Access API 内存镜像web/files.js 的头部注释道出了整个同步模型——它连接三个世界磁盘通过浏览器的 File System Access API 直接读写用户选择的本地文件夹内存镜像files对象缓存所有文件句柄与元数据供编辑器快速访问服务器快照server对象持久化在 localStorage记录服务端文件状态保存策略很克制当前打开的文件每 1 秒自动保存一次CURRENT_FILE_SYNC_INTERVAL媒体文件上限 65MB与 server/sync/sync.go 的MaxMediaSize对齐。界面右下角有一个安静的同步状态点橙色表示有未同步修改这种不打断思考的状态提示正契合 Files.md 的产品气质。离线可用Service Worker 让 PWA 真正落地零构建的另一个红利是离线缓存极其简单。web/offline.js 显式列出所有静态资源 URLCSS、JS、KaTeX 字体文件做预缓存请求被拦截后直接返回缓存副本。配合 web/manifest.jsonFiles.md 可以安装成桌面/移动端的独立应用PWA在浏览器地址栏右侧点击安装即可。这就是不需要安装任何东西、只需用浏览器这句话的底层支撑。架构启示简单即强大决策传统做法Files.md 的做法编辑器自研或重型框架CodeMirror HyperMD 经典组合状态管理Redux 全家桶全局变量 localStorage模块系统ES Module / 打包加载顺序约定离线复杂缓存策略一份显式 URL 清单桌面形态Electron 打包PWA 安装这套架构对 LLM 友好、对人类友好server/ 后端是单个 Go 二进制前端是几十个可直接阅读的原生 JS 文件前后端加起来认知负担极低。对于想给笔记工具做减法的开发者来说Files.md 的 web/ 目录本身就是一份零构建前端架构的参考清单入口与脚本编排web/index.html编辑器装配web/editor.js文件同步核心web/files.js聊天捕获流程web/chat.js侧边栏文件树web/lib/sidebar.js【免费下载链接】files.md Private, quiet space for thinking. Simple app for .md files.项目地址: https://gitcode.com/GitHub_Trending/fi/files.md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考