决赛设计方案
决赛设计方案
Live Code Platform
项目概述
项目目标
打造一个基于 Web 的在线代码编辑与编译平台，实现洛书编译器的浏览器端移植，支持代码即时编译、调试及系统级功能演示，为用户提供便捷的开发环境与编译原理及系统原理学习场景。
核心价值
- 借助 WebAssembly 技术提升浏览器端编译性能，突破传统 JavaScript 在高性能计算场景的限制。
- 通过模块化架构设计，实现编译原理与操作系统核心概念的可视化演示，降低技术学习门槛，提高学习效率与教育质量。
项目设计
整体架构
项目拓扑结构
- 前端交互层：基于原生 JavaScript 与 HTML 构建用户界面，集成 CodeMirror 编辑器实现代码输入与高亮。
- WebAssembly 编译核心：使用 Emscripten 将洛书编译器（C代码）转换为 WebAssembly，实现高效编译，并提高Javascript的计算性能。
- 功能模块层：涵盖在线实时编译、编译演示（词法分析 / 语法分析 / 语义分析 / 中间代码生成）、OS 演示（内存管理 / 线程调度 / 文件系统）。
页面导航设计
| 导航栏 | 子模块 | 功能说明 |
|---|---|---|
| 首页 | - | 渲染 Markdown 格式的项目说明文档 |
| Live Code | - | 跳转在线编辑平台，支持代码在线运行 |
| 编译演示 | 词法分析、语法分析、语义分析、代码生成 | 使用 Markdown 编写实验任务，展示编译全流程 |
| OS 演示 | 内存管理、文件系统、线程调度 | 使用 Markdown 编写实验任务，可视化操作系统核心机制 |
| 辅助功能 | 切换主题、关于我们 | 支持深色/浅色模式切换，跳转 GitHub 项目页 |
在线编辑平台设计
核心功能
- 代码编辑：集成 CodeMirror，支持行号显示、括号匹配、语法高亮等功能。
- 实时编译：点击 “运行代码” 按钮，通过 WebAssembly 即时编译并展示结果。
- 示例代码：内置 “你好世界”“二叉树遍历” 等典型案例，方便用户快速上手。
- 调试工具：显示内存占用（如mem max: 19.151367 KB）与运行状态。
交互界面
Live Code | 参考手册 | 运行代码 | 清空代码 | 刷新页面 | 示例代码（下拉列表） | 切换主题技术实现方案
编译技术选型
Emscripten 工具链
- 核心作用：将洛书编译器的 C 代码编译为 WebAssembly（.wasm）与 JavaScript（.js）文件。
- 编译命令：
emcc losu/**/*.c losu/**/**/*.c main.c \
-I include -O3 -o editor.m.js \
-s WASM=1 -s SINGLE_FILE=1 -s NO_EXIT_RUNTIME=1 \
-s MODULARIZE=1 -s EXPORT_NAME="LosuLiveCode" \
-s EXPORTED_RUNTIME_METHODS="['ccall']" WebAssembly 优势
- 性能对比：相比原生 JavaScript，WebAssembly 可提升 30%~70% 的计算性能，支持密集型编译任务。
- 兼容性：通过 Emscripten 生成的代码可在主流浏览器（Chrome、Firefox 等）中运行。
前端技术栈
- 基础框架：原生 JavaScript + HTML5，避免第三方框架带来的性能损耗。
- 编辑器集成：使用 CodeMirror 实现代码编辑区域，支持主题切换。
功能模块设计
编译原理演示模块
| 模块 | 功能说明 |
|---|---|
| 词法分析 | 输出词法单元（Token），高亮显示标识符、关键字等 |
| 语法分析 | 生成语法树，标注语法规则匹配过程 |
| 语义分析 | 检查类型一致性，输出语义错误 |
| 代码生成 | 输出汇编代码或可执行指令 |
操作系统演示模块
| 模块 | 功能说明 |
|---|---|
| 内存管理 | 可视化展示堆 / 栈内存分配、垃圾回收过程。 |
| 文件系统 | 模拟文件读写、目录操作，展示编译器对文件系统的调用。 |
| 线程调度 | 动态展示 CPU 时间片分配、线程优先级调度过程。 |
工程结构规划
.
├── doc
├── images
├── index.js # 前端启动 JavaScript 脚本
├── LICENSE # MIT
├── losu # 编译器 C 语言源代码
| ├── codegen
| ├── editor
| ├── lexer
| ├── parser
| ├── sema
| ├── filesystem
| ├── memory
| ├── thread
| └── ...
├── Makefile # 项目构建脚本
├── package.json
├── package-lock.json
├── README.md
├── server # 前端服务端代码
└── www # 前端静态资源
├── assets
| ├── css #各个模块的css文件
| | ├── codegen.css
| | ├── editor.css
| | ├── lexer.css
| | ├── parser.css
| | ├── sema.css
| | ├── filesystem.css
| | ├── memory.css
| | ├── thread.css
| | └── ...
| ├── fonts #字体
| ├── images #图片
| ├── js #js文件
| | ├── codegen.js
| | ├── editor.js
| | ├── lexer.js
| | ├── parser.js
| | ├── sema.js
| | ├── filesystem.js
| | ├── memory.js
| | ├── thread.js
| | └── ...
| ├── lib #依赖
| ├── markdown #任务说明
| | ├── codegen.md
| | ├── editor.md
| | ├── lexer.md
| | ├── parser.md
| | ├── sema.md
| | ├── filesystem.md
| | ├── memory.md
| | ├── thread.md
| | └── ...
| ├── script #洛书样例代码
| | ├── codegen
| | ├── editor
| | ├── lexer
| | ├── parser
| | ├── sema
| | ├── filesystem
| | ├── memory
| | ├── thread
| | └── ...
| └── wasm
| ├── codegen.m.js
| | ├── editor.m.js
| | ├── lexer.m.js
| | ├── parser.m.js
| | ├── sema.m.js
| | ├── filesystem.m.js
| | ├── memory.m.js
| | ├── thread.m.js
| | └── ...
├── error.html #报错界面
├── index.html #首页界面
├── pages
| ├── codegen.html
| ├── editor.html
| ├── lexer.html
| ├── parser.html
| ├── sema.html
| ├── filesystem.html
| ├── memory.html
| ├── thread.html
| └── ...
└── ...开发计划
| 阶段 | 目标 | 具体任务 |
|---|---|---|
| 第一阶段（项目搭建） | 完成项目的基本框架与前端基本风格 | 实现项目的大部分的构想，完成前端设计以及代码实现，完成相关的实验任务的markdown文件 |
| 第二阶段（编译原理） | 完善编译流程演示 | 实现词法分析结果输出与可视化，完成语法分析树的构建与展示，实现语义分析错误提示 |
| 第三阶段（操作系统） | 实现系统级功能演示 | 可视化内存布局与分配机制，模拟文件系统操作流程，展示线程调度过程 |
研发过程中遇到的问题和解决方法
- WebAssembly 技术在前端框架中的适配：WebAssembly 技术在前端框架适配较差，性能损失较大，解决方案是将wasm文件暴露在本地的url上，但是缺点明显，安全性太差。于是队伍经过商讨决定使用原生 Javascript与HTML来做前端。
- 对洛书源代码进行修改来适配题目要求：原定是通过只修改一份洛书源代码进行Emscripten编译，但是修改程度大，复杂度高，工期长。于是队伍经过商讨决定，每一个模块单独修改一份洛书源代码。这样则解决了修改程度大，复杂度高，工期长的问题，但是带来新的问题是项目的文件的数量增加。队员在Emscripten在线文档找了相关的参数
SINGLEFILE，将.wasm文件与.js文件合并为一个.js文件。这个问题得以解决。
技术创新点
- WebAssembly 深度应用：通过 Emscripten 将传统编译器移植到浏览器，突破前端性能瓶颈。
- 模块化教学场景：将编译原理与操作系统核心概念拆解为独立实验模块，支持分步学习。
- 原理可视化：将原理的每一个小模块单独制作可视化设计，从底层直观了解编译与OS的运行原理，加深理解。