rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add TypeScript lessons and learning panel

Browse Source 
- Introduced a new script to check TypeScript lesson files for errors.
- Created a main TypeScript file to render lessons and their details.
- Added lesson definitions with starter and answer codes.
- Implemented a user interface for navigating and running lessons.
- Styled the application with CSS for a better user experience.
- Updated README to reflect the new TypeScript section and usage instructions.
This commit is contained in:
charlie
2026-03-19 10:06:11 +08:00
parent 69a4ae3178
commit f3bdaa4e88
146 changed files with 5951 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
05-es6-plus/04-modules-basic/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 4：模块基础
## 目标
学会用 `export` 和 `import` 把不同文件连起来。
## 你要练什么
- `export`
- `import`
- `type="module"`
## 任务
- 从模块文件里导入课程数据和格式化函数
- 把结果渲染到页面
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/starter.js)
- [course-data.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/course-data.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/answer.js)

12
05-es6-plus/04-modules-basic/answer.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模块基础</title>
</head>
<body>
<pre id="output"></pre>
<script type="module" src="./answer.js"></script>
</body>
</html>

4
05-es6-plus/04-modules-basic/answer.js Normal file
View File

@@ -0,0 +1,4 @@
import { courses, formatCourse } from "./course-data.js";
const lines = courses.map((course) => formatCourse(course));
document.getElementById("output").textContent = lines.join("\n");

3
05-es6-plus/04-modules-basic/course-data.js Normal file
View File

@@ -0,0 +1,3 @@
export const courses = ["解构", "展开运算符", "Promise"];
export const formatCourse = (course) => `正在学习：${course}`;

12
05-es6-plus/04-modules-basic/starter.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模块基础</title>
</head>
<body>
<pre id="output"></pre>
<script type="module" src="./starter.js"></script>
</body>
</html>

3
05-es6-plus/04-modules-basic/starter.js Normal file
View File

@@ -0,0 +1,3 @@
// 任务：
// 1. 从 ./course-data.js 导入 courses 和 formatCourse
// 2. 把格式化后的结果写入 #output