“NightSky”这个名字搭配上“伪系统”三个字很多人的第一反应可能是这不就是一个用网页模拟 Windows 或 macOS 的桌面 UI 吗如果再看到“功能多得离谱”的形容恐怕会觉得又是一款博眼球的玩具项目。但如果你真的这么理解大概率会错过这类项目最核心的技术价值。NightSky 这类“伪系统”真正硬核的地方不在于界面长得像操作系统而在于它是在浏览器这个沙箱里用前端技术重新实现了一遍操作系统的基础逻辑。窗口管理、虚拟文件系统、进程调度、终端命令、应用生命周期这些原本属于操作系统课的知识点被压缩到一个 Web 工程里并且要跑得流畅、稳定、可扩展。本文不打算单纯夸“NightSky 很强”而是想拆开“伪系统”这个外壳讲清楚这类项目背后的架构设计、核心模块实现思路以及如果你也想做一个 Web 伪系统应该从哪些模块入手、会遇到哪些坑。文章会给出可以直接运行的代码示例覆盖虚拟文件系统、窗口管理器和终端命令三个核心模块并给出工程化和性能优化的建议。如果你正在做前端或者对操作系统原理感兴趣又或者正在考虑用 Web 技术做复杂桌面级应用这篇文章值得读完。1. NightSky 这类伪系统到底硬核在哪里“伪系统”不是 NightSky 的专利这一类浏览器端模拟操作系统的项目早就存在常见的还有 Puter.js、DaedalOS以及各类 Win11、macOS 网页复刻版。名字虽然叫法不同但底层做的事情高度一致在浏览器中创造一个完整的“桌面环境”。可一旦动手去实现问题就来了。一个能用的桌面环境不只是把壁纸、任务栏、图标画出来。用户打开一个应用时窗口需要在屏幕上显示能拖动、能缩放、能最小化多个窗口之间要有层级关系点击哪个窗口它就要获得焦点。用户保存一个文件时它需要写入一个“磁盘”下次打开还在。用户在终端里执行ls、cat、cd命令背后要有一套真实的文件树结构。应用崩溃了不能把整个系统拖垮。这些能力的集合已经不是“UI 模拟”而是“功能模拟”。前者只要会写 CSS 就能做后者需要认真设计数据结构、事件流、状态管理和运行时边界。NightSky 作为这类项目中功能密度很高的那一类它的价值在于证明了一件事现代浏览器的能力边界远比我们日常开发中用到的那部分宽。File System Access API、IndexedDB、Web Worker、Service Worker、Canvas、WebGL 这些能力组合起来已经能够在浏览器里搭建一个具备基本完整性的系统级应用。所以“伪系统”的“伪”重点不是“假的”而是“与真实系统隔离的另一个运行时环境”。它运行在浏览器安全沙箱里无法直接操作宿主机器上的硬件和文件但它内部的逻辑、状态、交互体验都可以做到接近真实操作系统。1.1 先拆掉“伪系统”这个标签在日常交流中很多人把“伪系统”理解成“HTML 做的画皮”。这种理解不能说是错的但相当不完整。HTML 画一张桌面的成本极低。一个div加一张背景图任务栏用 flex 布局排一排桌面图标用绝对定位摆上去一个静态壳子就出来了。这种页面打开后没有任何交互能力也没有内部状态刷新页面一切重置。而 NightSky 这类可称为“伪系统”的项目至少要具备以下能力桌面与应用切换点击图标打开应用应用从启动变为可见再变为关闭。窗口管理多个窗口共存支持移动、缩放、聚焦、最小化、关闭。文件系统抽象存在虚拟目录树支持创建、删除、移动、读取、写入文件。持久化刷新页面后用户数据不丢失。命令终端支持一组常用命令通过命令操作文件系统。应用生命周期不同应用有独立状态应用间互不干扰。能做到第一项的叫“网页美化”。能做到前三项的已经是工程。全部做到并且稳定运行就是 NightSky 这类项目所在的层级。1.2 硬核之处用浏览器重写操作系统核心逻辑为什么说 NightSky 这样的项目“功能多到离谱”因为它等于在 Web 前端重写了一遍操作系统的缩影。真实操作系统的核心职责包括资源管理、进程调度、文件系统、内存管理、设备驱动和用户界面。浏览器端伪系统不需要也不能去管理真实硬件但它必须解决资源管理、运行时隔离和状态协调问题。以窗口管理器为例真实操作系统的窗口管理器需要处理绘制顺序、输入焦点、窗口生命周期。浏览器里没有原生窗口这个概念前端只能借助 DOM 或 Canvas 自己实现。这意味着伪系统作者需要把“窗口”当作一种资源用状态机去维护它的生命周期用 z-index 维护层级用事件委托维护焦点逻辑。这个过程的复杂度和写一个业务管理系统的 CRUD 完全不同它更接近底层系统编程的思维方式。从工程价值看伪系统的难点不在某个单一技术点上而在于多个复杂模块的耦合方式。文件系统要支持终端命令终端命令要能触发应用打开应用打开要经过窗口管理器分配窗口窗口最小化要挂起应用状态应用状态又要持久化到文件系统。一条完整的链路跨越了五六个模块任何一个环节的数据结构设计不合理都会在集成阶段集中爆发问题。这也是我建议前端开发者尤其是工作三年的同学留意这类项目的原因它是最好的“系统设计”练手项目。2. 为什么伪系统值得技术人研究很多人会问我又不做操作系统看这种类型项目有什么用这类问题背后是一个更普遍的技术焦虑每天写业务代码进步缓慢不知道系统设计能力从哪练起。伪系统恰恰提供了高密度的练手场景。第一层价值是“抽象能力”。操作系统把硬件资源抽象成进程、文件、窗口这些概念。伪系统虽然不碰硬件但要在前端把窗口、文件、应用这些概念抽象成数据结构和 API。开发者必须想清楚一个 Window 对象有哪些字段、一个 File 节点怎么表示、应用状态和窗口状态如何拆分。抽象没做好后面的扩展寸步难行。第二层价值是“状态管理能力”。伪系统里的“状态”是全球性的。你打开了一个记事本在文件管理器里删掉了这个记事本正在编辑的文件记事本应该怎么表现窗口管理器、文件系统、应用运行时三个模块之间如何同步状态这些问题在业务开发中很少遇到但遇到一次就会对“状态爆炸”有切身体会。第三层价值是“性能边界认知”。浏览器不是操作系统DOM 节点数量、内存占用、事件循环都有代价。伪系统的窗口如果直接操作 DOM几十个窗口就卡如果切换到 Canvas 渲染又要想办法处理文本输入和可访问性。这种“在约束下做工程决策”的能力正是日常开发中升职加薪的关键。所以 NightSky 这类项目最值得学习的不是它的代码库本身而是它在面对“浏览器不够用”时的解题思路。3. 伪系统的整体架构与核心模块理解一个伪系统项目推荐先看它的架构而不是看页面。页面上看到的是结果架构才是设计意图。从 NightSky 这类项目的通用设计来看核心模块大致可以分成六块模块职责关键技术点桌面环境Shell壁纸、图标、任务栏、开始菜单DOM 渲染、事件系统窗口管理器WM窗口生命周期、层级、焦点状态机、z-index、事件委托虚拟文件系统VFS目录树、文件读写、路径解析树形结构、路径算法应用运行时Runtime应用加载、状态挂起与恢复沙箱隔离、生命周期钩子终端Terminal命令解析、与 VFS 交互解析器、异步执行持久化层Storage数据落盘、恢复IndexedDB、localStorage、文件系统 API3.1 模块之间的协作关系这六个模块不是孤立的它们之间存在清晰的依赖链。桌面环境是入口。用户双击图标桌面环境通知应用运行时说“用户要启动备忘录这个应用”。应用运行时创建一个应用实例然后向窗口管理器申请一个窗口。窗口管理器分配窗口 ID确定初始位置和层级把窗口渲染到屏幕上。用户在这个窗口里写了内容点击保存应用运行时调用虚拟文件系统的writeFile接口数据写入内存中的目录树再由持久化层异步写入 IndexedDB。从这条链路里可以看出虚拟文件系统处在地基的位置。它不只是给终端用的应用保存数据也要走它。如果文件系统的数据结构设计得简单比如直接用扁平对象存路径那么应用、终端、文件管理器三个模块写文件时都会依赖同一套约定一旦需要支持子目录、重命名、移动等操作扁平结构就会很别扭。更合理的方案是把目录建造成一棵树每个节点有类型、名称、内容、子节点四个基本属性。后续任何需要文件能力的模块都只和这棵树打交道通过路径解析拿到节点引用。3.2 模块边界设计要点模块边界设计得好伪系统的扩展性会非常好设计不好改一个模块会牵连三个模块。一个推荐的边界原则是模块之间只能通过 API 通信不允许直接操作对方的内部状态。窗口管理器不直接读虚拟文件系统的内部节点文件系统不关心某个窗口在屏幕的什么位置。需要信息时调用对方暴露的接口返回值必须是纯数据。这种设计思路和微前端架构中的“应用自治”理念一致。伪系统的窗口本质上就是一种微前端的呈现载体每个应用是独立运行的模块通过统一的接口协议和宿主环境通信。4. 技术选型与环境准备4.1 技术栈方案伪系统的技术选型核心判断标准不是“哪个框架流行”而是“渲染方式和应用模型”。两个主流方案基于 DOM 渲染每个窗口是一块 DOM 区域。实现直观CSS 能力强调试友好但窗口多了有性能瓶颈。基于 Canvas 渲染窗口画在 Canvas 上。渲染性能强适合做游戏化桌面效果但文本输入、可访问性、组件复用都是额外工作量。NightSky 这类偏生产力工具方向的项目一般会选 DOM 渲染为主配合必要的 Canvas 区域做特殊效果。这个选择比较稳妥因为伪系统里最重要的应用是“编辑器”“终端”“文件管理器”这些应用都依赖文本输入DOM 处理文本能力和可访问性天生占优。框架层面React、Vue、Svelte 都可以做。如果团队以 React 技术栈为主选 React如果希望运行时体积小选 Svelte。框架本身不是决定性因素状态管理方案反而更重要。因为伪系统的全局状态复杂需要明确哪些状态是全局的哪些是窗口局部的。4.2 环境要求项目本身不挑操作系统Windows、macOS、Linux 都可以。需要准备的基础环境较新版本的 Chrome、Edge 或 Firefox 浏览器Node.js 18 或更高版本如果使用 Vite 等构建工具一个顺手的前端编辑器VS Code 即可node -v npm -v版本以实际安装为准本文不绑定某个固定版本号重点演示通用实现思路。4.3 初始化一个前端工程新建一个 Vite Vue 或 Vite React 工程都可以。下面是通用的初始化命令npm create vitelatest nightsky -- --template vue cd nightsky npm install npm run dev到这里只是搭好了空壳。真正的伪系统实现从虚拟文件系统开始。5. 核心模块实现思路5.1 虚拟文件系统虚拟文件系统是伪系统里最基础的数据结构模块。它负责维护一棵目录树对外提供路径解析、文件读写、目录操作接口。文件节点可以设计成如下结构{ name: home, type: directory, children: [], content: null, meta: {} }目录节点有 children文件节点的 content 是文本内容。这种设计足够应对大多数伪系统的需求。核心类是VirtualFS关键方法包括路径解析、读取文件、写入文件、创建目录、删除节点和罗列目录。一个可直接运行的简化实现如下// src/fs/VirtualFS.js export class VirtualFS { constructor() { this.root { name: /, type: directory, children: [], content: null, meta: {} }; this.cwd /; } // 路径解析a/b/c - { parent, node } resolvePath(path) { if (path /) { return { parent: null, node: this.root }; } const parts path.split(/).filter(Boolean); let node this.root; let parent null; for (const part of parts) { if (node.type ! directory) { throw new Error(路径中的 ${part} 不是目录); } const child node.children.find(item item.name part); if (!child) { throw new Error(路径不存在: ${path}); } parent node; node child; } return { parent, node }; } getNode(path) { return this.resolvePath(path).node; } readFile(path) { const node this.getNode(path); if (node.type ! file) { throw new Error(${path} 不是文件); } return node.content; } writeFile(path, content) { const { parent, node } this.resolvePath(path); if (node.type directory) { throw new Error(${path} 是目录不能写入文件内容); } node.content content; return true; } createDirectory(path) { const parts path.split(/).filter(Boolean); let node this.root; for (const part of parts) { let child node.children.find(item item.name part); if (!child) { child { name: part, type: directory, children: [], content: null, meta: {} }; node.children.push(child); } node child; } return true; } createFile(path, content ) { const parts path.split(/).filter(Boolean); const fileName parts.pop(); let node this.root; for (const part of parts) { const child node.children.find(item item.name part); if (!child || child.type ! directory) { throw new Error(父目录不存在: ${path}); } node child; } const existing node.children.find(item item.name fileName); if (existing) { throw new Error(文件或目录已存在: ${path}); } node.children.push({ name: fileName, type: file, children: null, content, meta: {} }); return true; } listDirectory(path this.cwd) { const node this.getNode(path); if (node.type ! directory) { throw new Error(${path} 不是目录); } return node.children.map(child ({ name: child.name, type: child.type })); } deleteNode(path) { const { parent, node } this.resolvePath(path); if (!parent) { throw new Error(不能删除根目录); } const index parent.children.findIndex(child child.name node.name); parent.children.splice(index, 1); return true; } exists(path) { try { this.getNode(path); return true; } catch (err) { return false; } } }这段代码的关键逻辑有三个。第一个是路径解析。把输入的绝对路径按/拆分成数组从根节点开始逐级查找。遇到不存在的节点抛异常。这个过程中还保留了parent信息后续实现删除和移动时需要用它。第二个是目录和文件的统一承载。目录节点的children是数组文件节点的children是null通过type区分。查找子节点用find方法在目录项不太多时性能足够不需要引入复杂的索引结构。第三个是删除节点时必须处理根目录保护。根目录的parent为null删除时直接拒绝避免意外清空文件系统。有了这个基础类终端命令、文件管理器、应用的数据读写就都有了统一入口。5.2 窗口管理器窗口管理器是伪系统的另一根支柱。文件系统管理数据窗口管理器管理界面。在不使用框架的状态管理库的前提下可以用一个类加自定义事件实现窗口管理器。每个窗口是一个对象包含 id、标题、坐标、尺寸、层级、状态和内容引用。核心实现如下// src/wm/WindowManager.js export class WindowManager { constructor(container) { this.container container; this.windows new Map(); this.zCounter 100; this.activeWindowId null; } open(appId, title, content ) { const id ${appId}-${Date.now()}-${Math.random().toString(36).slice(2, 6)}; const win { id, appId, title, x: 80 this.windows.size * 30, y: 80 this.windows.size * 30, width: 520, height: 380, zIndex: this.zCounter, status: open, content }; this.windows.set(id, win); this.renderWindow(win); this.focus(id); return id; } close(id) { const win this.windows.get(id); if (!win) return; const el document.getElementById(id); if (el) el.remove(); this.windows.delete(id); if (this.activeWindowId id) { this.activeWindowId null; const last [...this.windows.values()].pop(); if (last) this.focus(last.id); } } focus(id) { const win this.windows.get(id); if (!win) return; win.zIndex this.zCounter; this.activeWindowId id; const el document.getElementById(id); if (el) el.style.zIndex win.zIndex; el.classList.add(active); // 其他窗口去掉 active 类 this.windows.forEach(other { if (other.id ! id) { const otherEl document.getElementById(other.id); if (otherEl) otherEl.classList.remove(active); } }); } move(id, x, y) { const win this.windows.get(id); if (!win) return; win.x x; win.y y; const el document.getElementById(id); if (el) { el.style.left x px; el.style.top y px; } } renderWindow(win) { const el document.createElement(div); el.id win.id; el.className sys-window; el.style.left win.x px; el.style.top win.y px; el.style.width win.width px; el.style.height win.height px; el.style.zIndex win.zIndex; el.innerHTML div classtitle-bar span${win.title}/span button classclose-btnx/button /div div classwindow-content${win.content}/div ; // 标题栏拖拽移动 const titleBar el.querySelector(.title-bar); titleBar.addEventListener(mousedown, (e) { const startX e.clientX; const startY e.clientY; const origX win.x; const origY win.y; const onMove (ev) { const dx ev.clientX - startX; const dy ev.clientY - startY; this.move(win.id, origX dx, origY dy); }; const onUp () { document.removeEventListener(mousemove, onMove); document.removeEventListener(mouseup, onUp); }; document.addEventListener(mousemove, onMove); document.addEventListener(mouseup, onUp); }); // 关闭按钮 const closeBtn el.querySelector(.close-btn); closeBtn.addEventListener(click, (e) { e.stopPropagation(); this.close(win.id); }); // 点击窗口时聚焦 el.addEventListener(mousedown, () this.focus(win.id)); this.container.appendChild(el); } }窗口管理器的核心是维护windows这个 Map。Map 的键是窗口 id值是一个窗口对象。窗口对象里记录了位置、尺寸、zIndex、状态等所有必要信息DOM 元素只是这些信息的投影。zCounter是实现层级的关键。每次打开或聚焦窗口zIndex加一后打开的窗口永远覆盖先打开的窗口。这个做法的本质是用一个单调递增的计数器模拟 z 轴坐标简单且不会出现两个窗口同层的情况。拖拽逻辑用了原生鼠标事件。记录鼠标按下时的起点坐标和窗口原始坐标鼠标移动时计算位移差调用move方法更新坐标。松开鼠标时移除监听事件。这个写法不依赖任何拖拽库足够轻量唯一需要注意的是全局事件监听必须在mouseup时移除否则会积累大量无效监听器。窗口管理器的设计重点是“窗口即状态”。窗口对象存在于 Map 中DOM 只是渲染结果。刷新或重建界面时只要 Map 中的状态还在就可以重新渲染出一样的窗口布局。这为伪系统的持久化打下了基础。5.3 终端命令系统文件系统和窗口管理器就位后终端就有了操作对象。终端这个模块负责把用户输入的字符串解析成命令和参数然后调用文件系统的 API 执行最后把结果格式化输出。核心可以拆成三部分命令注册表、解析器、输出器。以下是命令注册和简单解析的实现// src/term/commands.js import { VirtualFS } from ../fs/VirtualFS.js; const fs new VirtualFS(); const commands { ls: (args) { const path args[0] || fs.cwd; const list fs.listDirectory(path); return list.map(item { return item.type directory ? item.name / : item.name; }).join( ); }, pwd: () fs.cwd, cd: (args) { const path args[0] || /; const target path.startsWith(/) ? path : ${fs.cwd}/${path}.replace(/\//g, /); const node fs.getNode(target); if (node.type ! directory) { throw new Error(${path}: 不是一个目录); } fs.cwd target; return ; }, cat: (args) { if (!args[0]) { throw new Error(用法: cat 文件名); } const path args[0].startsWith(/) ? args[0] : ${fs.cwd}/${args[0]}.replace(/\//g, /); return fs.readFile(path); }, echo: (args) args.join( ), mkdir: (args) { if (!args[0]) { throw new Error(用法: mkdir 目录名); } const path args[0].startsWith(/) ? args[0] : ${fs.cwd}/${args[0]}.replace(/\//g, /); fs.createDirectory(path); return ; }, touch: (args) { if (!args[0]) { throw new Error(用法: touch 文件名); } const path args[0].startsWith(/) ? args[0] : ${fs.cwd}/${args[0]}.replace(/\//g, /); fs.createFile(path, ); return ; }, rm: (args) { if (!args[0]) { throw new Error(用法: rm 路径); } const path args[0].startsWith(/) ? args[0] : ${fs.cwd}/${args[0]}.replace(/\//g, /); fs.deleteNode(path); return ; }, help: () { return Object.keys(commands).join( ); } }; export function executeCommand(line) { const trimmed line.trim(); if (!trimmed) return ; const parts trimmed.split(/\s/); const cmd parts[0]; const args parts.slice(1); if (!commands[cmd]) { throw new Error(命令未找到: ${cmd}输入 help 查看可用命令); } return commands[cmd](args); }这里没有写复杂的语法解析器命令名和参数用split(/\s/)切分这对伪系统终端已经足够。更复杂的命令语法比如带引号的参数、管道操作、通配符需要在解析器上再深入一层才能实现。值得注意的一点文件路径的处理。用户输入cd docs时如果docs不是以/开头要拼接当前路径再解析。拼接后还要用正则/\//g把连续的斜杠压缩成单斜杠避免路径中出现//。命令返回的是一个字符串由终端模块负责渲染到输出区域。这样命令和 UI 解耦后续如果需要支持管道命令每个命令的输入和输出都是纯字符串可以方便地串联。6. 一个完整的接入示例把上面的三个模块拼起来整个伪系统就有了可操作性的雏形。为了便于直接运行这里给出一段完整的 HTML 页面代码。把虚拟文件系统、窗口管理器和终端命令放到一个页面里不需要构建工具直接用浏览器打开即可验证。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleNightSky 伪系统最小示例/title style * { box-sizing: border-box; margin: 0; padding: 0; } body { background: linear-gradient(135deg, #1e293b, #0f172a); height: 100vh; overflow: hidden; font-family: system-ui, sans-serif; } #desktop { position: relative; width: 100%; height: 100%; } #taskbar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: rgba(15, 23, 42, 0.95); display: flex; align-items: center; padding: 0 16px; z-index: 9999; } #taskbar button { background: #334155; color: #e2e8f0; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; margin-right: 8px; } #taskbar button:hover { background: #475569; } .desktop-icon { position: absolute; width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e2e8f0; cursor: pointer; border-radius: 8px; } .desktop-icon:hover { background: rgba(255, 255, 255, 0.1); } .desktop-icon .icon { width: 48px; height: 48px; background: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 4px; } .sys-window { position: absolute; min-width: 320px; min-height: 200px; background: #1e293b; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; } .sys-window.active { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); } .title-bar { height: 36px; background: #334155; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; color: #e2e8f0; font-size: 13px; user-select: none; cursor: move; } .close-btn { border: none; background: transparent; color: #e2e8f0; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 4px; } .close-btn:hover { background: #ef4444; } .window-content { flex: 1; padding: 12px; color: #e2e8f0; overflow: auto; font-size: 14px; } #terminal-window .window-content { display: flex; flex-direction: column; background: #0f172a; } #terminal-output { flex: 1; font-family: monospace; font-size: 13px; white-space: pre-wrap; overflow-y: auto; padding: 8px; } #terminal-input-line { display: flex; align-items: center; padding: 6px 8px; border-top: 1px solid #334155; } #terminal-input-line span { color: #22d3ee; font-family: monospace; margin-right: 6px; } #terminal-input { flex: 1; background: transparent; border: none; outline: none; color: #e2e8f0; font-family: monospace; font-size: 13px; } /style /head body div iddesktop div classdesktop-icon styleleft: 40px; top: 40px; idfile-manager-icon div classicon/div span文件系统/span /div div classdesktop-icon styleleft: 140px; top: 40px; idterminal-icon div classicon⌨️/div span终端/span /div /div div idtaskbar button idbtn-terminal终端/button button idbtn-fs文件系统/button /div script typemodule import { WindowManager } from ./src/wm/WindowManager.js; import { executeCommand } from ./src/term/commands.js; const desktop document.getElementById(desktop); const wm new WindowManager(desktop); // 初始演示预创建一些文件和目录 async function initFS() { // 这里通过终端命令来初始化 executeCommand(mkdir /init); executeCommand(mkdir /init/docs); executeCommand(echo NightSky 伪系统演示内容 /init/readme.txt); executeCommand(cat /init/readme.txt); } function openTerminal() { const id wm.open(terminal, 终端, ); const winEl document.getElementById(id); const content winEl.querySelector(.window-content); content.innerHTML div idterminal-output/div div idterminal-input-line styledisplay:flex; padding: 8px; border-top: 1px solid #334155; span$/span input idterminal-input styleflex:1; background:transparent; border:none; outline:none; color: #e2e8f0; font-family: monospace; font-size:13px; / /div ; const output content.querySelector(#terminal-output); const input content.querySelector(#terminal-input); output.textContent NightSky 伪系统终端就绪输入 help 查看命令。\n; input.focus(); input.addEventListener(keydown, (e) { if (e.key ! Enter) return; const line input.value; input.value ; output.textContent \n$ ${line}\n; try { const result executeCommand(line); if (result) output.textContent result \n; } catch (err) { output.textContent 错误: ${err.message}\n; } output.scrollTop output.scrollHeight; }); } function openFileManager() { const id wm.open(file-manager, 文件管理器, ); const winEl document.getElementById(id); const content winEl.querySelector(.window-content); content.innerHTML pre stylefont-family: monospace; font-size: 13px;${listTree()}/pre; } function listTree() { // 简化直接用终端 ls 命令输出 try { return executeCommand(ls /); } catch (err) { return err.message; } } document.getElementById(btn-terminal).addEventListener(click, openTerminal); document.getElementById(btn-fs).addEventListener(click, openFileManager); document.getElementById(terminal-icon).addEventListener(dblclick, openTerminal); document.getElementById(file-manager-icon).addEventListener(dblclick, openFileManager); // 初始化文件系统并把初始化信息输出到控制台 try { initFS(); console.log(文件系统初始化完成); } catch (err) { console.warn(文件系统初始化失败:, err.message); } /script /body /html这段页面代码的组织逻辑是desktop是窗口管理器的挂载容器窗口渲染进去后绝对定位显示。桌面上两个图标分别对应终端和文件管理器双击打开底部的任务栏按钮也是同样作用。终端窗口打开时页面动态往窗口内容区注入输出区域和输入框输入框监听回车键把命令交给executeCommand处理返回值追加到输出区域。文件管理器窗口简化成直接输出根目录列表实际项目里可以做成树形目录组件。需要注意为了跑通这个示例WindowManager.js和commands.js需要放在对应的src路径下。如果直接用浏览器打开 HTML 文件import语法可能受到跨域限制推荐起一个静态服务器来运行npx serve .或者直接使用 Vite 工程的npm run dev把相关文件放进工程目录然后访问本地开发服务器。如果你用的是 Vite 工程最简单的方式是把这些.js文件放到src目录然后把上面的 HTML 内容搬进index.html或作为独立页面挂载。模块路径改成对应的相对路径即可。7. 运行与效果验证跑起来之后按下面的步骤验证功能是否正常。第一步打开终端窗口。命令提示符出现说明窗口管理器的打开窗口、渲染内容、注入终端 UI 的逻辑正常。第二步输入命令ls / cd /init ls cat readme.txt预期输出ls /显示根目录下的init/目录。cd /init切换当前目录到 init。ls显示docs/和readme.txt。cat readme.txt输出“NightSky 伪系统演示内容”。出现这些输出说明虚拟文件系统的路径解析、目录创建、文件写入、文件读取链路全部正常。第三步验证窗口层级。连续打开三个终端窗口窗口的初始位置有偏移后打开的窗口覆盖先打开的。点击底层窗口的任意区域该窗口会获得焦点并置顶。关闭一个窗口后焦点应该回落到最后剩下的窗口。第四步验证窗口拖拽。按住标题栏拖动窗口窗口位置跟随鼠标移动松开鼠标后窗口停在释放位置。再次拖动同一个窗口应该从新的位置继续移动而不是跳回初始坐标。如果这些操作都能流畅完成说明窗口管理器的状态管理、DOM 同步和事件绑定逻辑是正确的。反之如果窗口拖拽卡顿或位置错乱优先排查move方法监听的事件是否在mouseup后正确移除或者窗口对象里的x、y是否在移动过程中被其他代码意外修改。终端输出返回undefined的检查命令函数是否都返回了字符串help、ls、pwd这类命令必须返回带内容的字符串。8. 常见问题与排查思路伪系统开发过程中最容易踩的坑集中在这几类。问题现象可能原因排查方式解决方案打开多个窗口后卡顿每个窗口的 DOM 结构过重或拖拽事件未正确移除打开 DevTools 检查监听器列表观察 DOM 节点数量精简窗口 DOM确保 mouseup 后移除全局监听事件必要时使用虚拟滚动刷新页面后文件丢失没有接入持久化层数据只存在内存中的 VirtualFSF12 查看 IndexedDB/localStorage 是否有数据写入接入持久化层每次写入文件系统后同步写入 IndexedDB终端输入中文显示乱码输出区域字体或字符编码处理不当检查页面 charset 声明和终端输出的编码格式统一使用 UTF-8输出区域不要混入二进制内容窗口点击不能聚焦窗口 DOM 事件被内部子元素阻止传播打印 focus 调用日志检查e.stopPropagation()的位置窗口容器用mousedown聚焦内部按钮的stopPropagation不要作用到容器层路径解析报错相对路径拼接后出现//或没有正常归一化打印拼接后的路径字符串所有路径拼接统一走normalizePath函数压缩重复斜杠关闭最后一个窗口后焦点丢失窗口 Map 为空时没有重置 activeWindowId打印关闭时的 Map sizeclose 方法判断 Map 为空时重置 activeWindowId 为 null应用状态相互污染应用实例共享了全局变量检查应用组件里是否有模块级 let 变量每个应用的业务状态挂在应用实例对象上而不是模块全局这些问题的共性来源是对“状态投影”理解不到位导致的。窗口、文件、应用实例本质上都是内存中的状态对象DOM 和页面只是投影。当投影层和状态层没有完全对齐时表现就是“界面显示不对”或“刷新后丢失”。调试这类问题有一个通用套路。先给关键模块加日志输出打开窗口时打印窗口对象、移动时打印坐标、写入文件时打印路径和内容。然后打开 DevTools 的 Console观察操作对应的事件序列是否符合预期。状态正确但界面不对问题在渲染层状态就不对问题在逻辑层。9. 最佳实践与工程建议9.1 先做数据层再做视图层伪系统开发最常见的错误是上来就写桌面 UI。壁纸、图标、任务栏做得很漂亮一旦遇到“文件保存后刷新丢失”“多个窗口状态冲突”这些问题才发现底层的数据模型设计得不对。正确的顺序是先把虚拟文件系统写稳再把命令终端接上最后才做桌面和窗口。文件系统和命令终端是两个纯逻辑层不依赖任何 UI 框架可以用单元测试覆盖。把这些地基打牢后面做任何界面模块都会有稳定支撑。9.2 状态持久化要设计好时机伪系统的持久化不能每次操作都写一次 IndexedDB。文件内容可能在用户输入过程中频繁变化全量写入会有性能和写入放大问题。更稳妥的方案是两层持久化操作级持久化writeFile、createDirectory、deleteNode这类结构性操作立即触发增量保存。内容级防抖持久化文件内容编辑过程是高频操作通过防抖在用户停止输入 500 毫秒后保存一次。IndexedDB 的读写是异步的保存操作要做好失败补偿。一旦写入失败要把队列记在内存里下次操作时重试。9.3 窗口内容的正确打开方式窗口管理器管理的是窗口的“壳”不是应用的业务逻辑。每个窗口的内容区域应该是一个挂载点实际的内容由应用自己渲染。在 React 或 Vue 工程里可以把窗口内容实现成组件映射用一个 Map 建立appId到组件构造函数的映射打开窗口时拿到组件实例挂载到窗口内容区。这样做的好处是应用可以维护自己的内部状态窗口管理器只关心位置、尺寸、层级、生命周期。应用崩溃了可以单独关闭不会影响整个桌面。9.4 安全边界要时刻记在心上伪系统运行在浏览器沙箱里但不能因为“只是浏览器里的东西”就忽略安全设计。虚拟文件系统里不要存密码、token、私钥这类真实敏感信息。IndexedDB 和 localStorage 的数据虽然受同源策略保护但 XSS 攻击可以绕过这层保护把数据读取出来。终端命令要做到白名单机制只允许执行内置的命令函数不要引入eval或new Function来解析用户输入。如果需要加载外部应用代码要用 iframe 或 Web Worker 隔离不要把第三方代码直接注入主页面执行。同时系统权限要有边界概念。伪系统内部可以虚拟一套“root 权限”模型某些系统级文件和配置只允许指定应用修改普通应用只能读写用户目录。这套模型虽然是模拟的但设计思路和真实操作系统的权限隔离一致能有效避免应用之间互相破坏数据。9.5 性能优化优先级伪系统的性能问题往往从“打开十多个窗口”开始暴露。性能优化按以下优先级处理第一优先级是减少重排。窗口拖拽时不要直接修改top、left属性之外的内容避免触发大面积重排。把窗口的will-change: transform加上考虑用transform: translate()代替top/left定位。第二优先级是控制 DOM 节点。每个窗口内部的 DOM 结构要轻量内容区使用懒渲染。窗口最小化时可以考虑把内容区从 DOM 树中摘除或者用content-visibility: hidden跳过渲染。第三优先级是存储读写异步化。IndexedDB 写入必须异步进行不能阻塞主线程。大型文件内容写入时考虑分块写入避免一次性写入几十 MB 数据导致页面卡死。10. 写一个自己的伪系统从哪里开始NightSky 这类项目之所以让人兴奋是因为它提醒了我们一段被日常业务开发掩盖的事实Web 前端的能力边界不在“写页面”而在“构建系统”。窗口、文件、进程、终端、桌面这些概念在浏览器里被重新实现一次得到的不仅是视觉上的“像操作系统”更是架构设计和技术深度上的进步。如果你也想做一个自己的伪系统可以按下面这条路走第一步实现虚拟文件系统覆盖目录、文件、路径解析、增删改查配一份单元测试。第二步实现终端命令系统把文件系统能力暴露成命令行。第三步写一个最小窗口管理器支持打开、关闭、拖拽、聚焦。第四步把终端接到窗口管理器的内容区让终端在窗口里运行。第五步加入 IndexedDB 持久化刷新页面后数据还在。第六步写一个简单的应用比如文本编辑器或画板通过文件系统保存数据。走完这六步你就拥有了一个具备完整基础架构的伪系统雏形。后续增加更多应用、更多命令、更好看的主题都只是在这个骨架上做增补。如果这篇文章对你有帮助建议收藏起来动手写的时候对照着做。测试环境尽量用全新浏览器和最新的 Node.js LTS 版本遇到问题优先看 DevTools 的 Console 和 Network 面板。伪系统这条路越往深走学到的东西越多。