WebIDE 需求分析和建模

[Zenithal]

需求分析

项目背景

本地 IDE，比如 VS Code、JetBrains 等，已经是我们日常开发中不可或缺的软件，但是当我们想与他人分享代码或者手边没有电脑时想进行开发时，本地 IDE 的局限性就凸显出来了，基于浏览器的 WebIDE 能够不限于平台、不限于场所，只要有浏览器就能阅读编写代码并运行结果，可以很容易与他人分享。
市面上有很多成熟且完善的 WebIDE，例如 CodeSandbox、CodePen 等。为什么不能直接使用现有免费的在线 IDE，主要基于以下几点：

• 在线 IDE 无法从私有 npm 源获取包；
• 前端项目构建中一些特定的配置，而现有的在线 IDE 无法支持；
• CodeSandbox 只能设置构建模板的类型，例如 create-react-app，并没有提供外部修改具体的构建配置的 API。例如项目中用到了 less 文件，选择 create-react-app 模板是无法构建的该类型文件的；
• 特殊的功能无法实现，例如点击页面的按钮，可以实现对在线 IDE 右侧构建出来的页面进行截图，并将图片数据传输出来；
• 使用在线 IDE 提供的服务，一般意味着你的组件/区块是暴露在公网上的，然而可能有些代码涉密，是不能上传到公网上的。

  功能分析

  用户模块

  能够修改个人信息以及管理个人代码仓库。

仓库模块

本项目核心模块

• 编辑器 Editor：主要用于编辑代码，代码变动后会通知 Sandbox 进行转译。
• 代码运行沙盒 Sandbox：在一个单独的 iframe 中运行，负责代码的编译 Transpiler 和运行 Evaluation。
• 打包器 Packager：给 Sandbox 提供 npm 包中的文件内容。

各部分流程如上，其中构建过程主要包括了三个步骤：

• Packager 打包阶段：下载 npm 包并递归查找所有引用到的文件，然后提供给下个阶段进行编译。
• Transpilation 编译阶段：编译所有代码, 构建模块依赖图。
• Evaluation 执行阶段：使用 eval 运行编译后的代码，实现项目预览。

展示模块

不需要登录便能预览代码仓库。

数据模型

用例图

用例图是用来显示一组用例、参与者以及它们之间关系的图。 它描述了用户希望如何使用一个系统。

如图展示 WebIDE 项目的用例图，描述了用户可以进行创建个人仓库，编辑个人仓库，修改个人仓库权限等核心功能，并且能够编辑个人信息。

时序图

时序图通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。 它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。

ER 图

基于上述功能分析，可以绘制如下数据库 ER 图关系

用户数据字典

仓库数据字典

标签数据字典

依赖数据字典

设计方案

项目架构

本项目基于 MVC 模式进行开发，主要包括

• Model（模型） 模型代表一个存取数据的对象。它也可以带有逻辑，在数据变化时更新控制器。
• View（视图）视图代表模型包含的数据的可视化。
• Controller（控制器） 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

后端采用 Express 一个 Node.js 框架，前端采用 React 框架。

设计模式

本项目主要采用建造者模式（Builder Pattern）使用多个简单的对象一步一步构建成一个复杂的对象。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。
一个 Builder 类会一步一步构造最终的对象。该 Builder 类是独立于其他对象的。

作者：556