# lf-test

**Repository Path**: longfei/lf-test

## Basic Information

- **Project Name**: lf-test
- **Description**: test
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-01-31
- **Last Updated**: 2026-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# lf-test

这是一个前端实验、组件 demo 和学习笔记的集合仓库，按主题归档，入口页见 [index.html](index.html)。

## 仓库结构

- [01-css-html](01-css)：CSS 布局、动画、特效和组件样式
- [02-canvas](02-canvas)：Canvas、SVG、动画和 Three.js / WebGL 相关 demo
- [03-js-api](03-js-api)：原生 JavaScript、浏览器 API、文件、音视频、地图等实验
- [04-vue-other](04-vue)：Vue、Vue Router、Lite Vue、jQuery 与前端框架对比 demo
- [05-games](05-games)：小游戏、棋类、解谜、动画和小项目入口整理
- [99-playground](99-playground)：未归类或待详细命名的实验页，允许暂存
- [assets](assets)：统一收口的公共资源，包含 lib、css 和 img
- [docs](docs)：学习笔记、整理方案和说明文档

## 维护原则

1. 根目录只保留仓库入口、说明和少量公共文件。
2. 新页面优先进入 [99-playground](99-playground)，确认主题后再归档。
3. 统一资源目录后，前端脚本和样式不再直接依赖根级目录。
4. 笔记文件尽量拆成小主题，避免继续堆一份超长流水账。

## 说明

- 详细整理方案： [docs/整理方案.md](docs/整理方案.md)
- 仓库入口： [index.html](index.html)
- 资源目录： [assets](assets)

## 如何查看效果

入口页不是手工维护的链接清单。新增、删除或移动 HTML 页面后，在仓库根目录运行：

```bash
node readname2index.html.js
```

然后用本地静态服务器打开入口页，推荐使用 Node 或 Python：

```bash
npx serve .
# 或
python -m http.server 8000
```

浏览器打开终端显示的地址即可。入口页支持按目录筛选、关键词搜索和弹窗预览；预览失败时可点“新窗口”单独打开页面。使用本地服务器比直接双击 `file://` 更可靠，尤其是涉及模块、相对资源、Canvas、音视频或第三方库的练习。

## 计划

后续仍建议继续把 [99-playground](99-playground) 里像 test1.html 这类命名逐步改为语义化命名，并按主题进一步拆分到对应目录中。