在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

microsoft/Web-Dev-For-Beginners

菜单

项目：生态瓶

相关源文件

Terrarium 项目是一个交互式 Web 应用程序，允许用户通过拖放植物图像来创建和自定义虚拟的植物生态瓶。本文档介绍了 Terrarium 项目的系统架构、组件和实现细节，重点介绍了 HTML、CSS 和 JavaScript 如何协同工作以创建引人入胜的交互式 Web 体验。

系统概览

Terrarium 项目通过创建一个简单的拖放界面来演示基本的 Web 开发概念。该系统包含三个主要组件

来源：3-terrarium/1-intro-to-html/README.md10-21 3-terrarium/2-intro-to-css/README.md10-17 3-terrarium/3-intro-to-DOM-and-closures/README.md10-19

HTML 结构

HTML 组件创建了植物生态瓶界面的骨架结构，定义了元素的布局和定位。

关键要素

植物生态瓶界面包含：

  1. 带有植物生态瓶标题的标题栏
  2. 包含可拖动植物图像的左右两列
  3. 具有玻璃般外观的中央植物生态瓶区域

来源：3-terrarium/1-intro-to-html/README.md111-169 3-terrarium/1-intro-to-html/README.md196-214

植物结构

每株植物都结构为一个嵌套的 div 集合，具有特定的类名和 ID，以便于样式设置和 JavaScript 交互。

此结构为所有 14 株植物重复使用，ID 从 plant1 到 plant14 依次排列。

来源：3-terrarium/1-intro-to-html/README.md118-139 3-terrarium/1-intro-to-html/README.md140-162

CSS 样式

CSS 组件为植物生态瓶界面提供视觉样式，创建了玻璃容器的外观并定位了植物。

关键样式元素

元素目的关键 CSS 属性
.container容纳两侧的植物元素position: absolute, width: 15%
.plant-holder定位单个植物position: relative, height: 13%
.plant样式化植物图像position: absolute, max-width: 150%, z-index: 2
.jar-walls创建植物生态瓶的玻璃效果height: 80%, width: 60%, border-radius: 1rem, opacity: 0.5
.dirt创建土壤外观width: 60%, height: 5%, background: #3a241d

来源：3-terrarium/2-intro-to-css/README.md102-126 3-terrarium/2-intro-to-css/README.md151-163 3-terrarium/2-intro-to-css/README.md193-242

布局方法

该植物生态瓶结合使用了相对定位和绝对定位来创建布局。

  1. 侧边容器使用绝对定位定位在左侧和右侧边缘。
  2. 植物容器在其容器内使用相对定位。
  3. 植物本身使用绝对定位，以便可以拖动。
  4. 植物生态瓶元素使用带百分比的绝对定位，以保持比例。

来源：3-terrarium/2-intro-to-css/README.md177-188

JavaScript 交互

JavaScript 组件使用 DOM 操作和闭包来实现拖放功能。

拖放架构

来源：3-terrarium/3-intro-to-DOM-and-closures/README.md98-107 3-terrarium/3-intro-to-DOM-and-closures/README.md124-130 3-terrarium/3-intro-to-DOM-and-closures/README.md159-167 3-terrarium/3-intro-to-DOM-and-closures/README.md182-186

元素选择

JavaScript 首先从 DOM 中识别和选择所有植物元素。

每个植物元素都会传递给 dragElement 函数，该函数启用拖动功能。

来源：3-terrarium/3-intro-to-DOM-and-closures/README.md48-64

闭包实现

该项目使用 JavaScript 闭包模式，其中外部函数（dragElement）封装了三个内部函数：

  1. pointerDrag：在点击植物时初始化拖动。
  2. elementDrag：在拖动过程中更新植物的位置。
  3. stopElementDrag：在释放指针时终止拖动。

此模式允许内部函数访问和修改外部函数作用域中声明的位置变量。

来源：3-terrarium/3-intro-to-DOM-and-closures/README.md99-107 3-terrarium/3-intro-to-DOM-and-closures/README.md73-94

位置计算逻辑

拖动过程中，元素位置的计算步骤如下：

  1. 存储初始光标位置（pos3 和 pos4）。
  2. 计算光标移动时的移动差值（pos1 和 pos2）。
  3. 根据计算出的偏移量更新元素的 CSS top 和 left 属性。

来源：3-terrarium/3-intro-to-DOM-and-closures/README.md159-167

用户交互流程

下图说明了使用植物生态瓶时的用户交互流程。

来源： 3-terrarium/3-intro-to-DOM-and-closures/README.md117-147 3-terrarium/3-intro-to-DOM-and-closures/README.md150-188

技术考量

指针事件 API

该项目使用指针事件 API，而不是鼠标事件，以提高跨平台兼容性。使用的关键事件包括：

  • onpointerdown：用户点击/触摸植物时触发
  • onpointermove：指针移动时持续触发
  • onpointerup：用户释放指针时触发

此方法允许该温室在触摸设备和传统鼠标界面上都能正常工作。

来源： 3-terrarium/3-intro-to-DOM-and-closures/README.md111-114

CSS 定位系统

该系统使用多种 CSS 定位技术

定位类型用于目的
absolute侧边容器、温室元素将元素固定到特定位置
relative植物支架为植物创建定位上下文
z-index植物、温室元素控制元素的层叠顺序

这种组合可以创建具有可拖动元素的视觉分层界面。

来源：3-terrarium/2-intro-to-css/README.md177-188

关键学习点

温室项目展示了几个基本的 Web 开发概念：

  1. 语义化 HTML 结构：使用适当的 HTML 元素创建有意义的结构
  2. CSS 布局技术：结合定位方法创建复杂布局
  3. JavaScript 闭包：使用函数作用域来维护状态
  4. DOM 操作：动态更新 DOM 以响应用户交互
  5. 事件处理：管理和响应用户发起的事件
  6. 拖放实现：在不使用 HTML5 拖放 API 的情况下创建自定义拖放功能

该项目通过实践应用，是这些概念的绝佳入门。

来源： 3-terrarium/1-intro-to-html/README.md182-195 3-terrarium/2-intro-to-css/README.md177-188 3-terrarium/3-intro-to-DOM-and-closures/README.md72-91