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

26
04-dom-events-async/09-async-await-panel/README.md Normal file
View File

@@ -0,0 +1,26 @@
# 练习 9：async / await 面板
## 目标
学会用 `async` / `await` 写一个更直观的异步流程。
## 你要练什么
- `async`
- `await`
- `try...catch`
- DOM 更新
## 任务
- 点击按钮后进入加载状态
- 等待异步函数返回用户信息
- 把结果渲染到卡片里
- 如果失败，显示错误信息
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/04-dom-events-async/09-async-await-panel/answer.js)

35
04-dom-events-async/09-async-await-panel/answer.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>async / await 面板</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dbe4ef;
}
</style>
</head>
<body>
<section class="panel">
<h1>用户信息面板</h1>
<button id="load-user-btn" type="button">加载用户信息</button>
<p id="user-status">等待加载</p>
<div id="user-card"></div>
</section>
<script src="./answer.js"></script>
</body>
</html>

35
04-dom-events-async/09-async-await-panel/answer.js Normal file
View File

@@ -0,0 +1,35 @@
function fakeFetchUser() {
return new Promise(function (resolve) {
setTimeout(function () {
resolve({
name: "林晨",
role: "前端学习者",
focus: "DOM + 事件 + 异步",
});
}, 900);
});
}
const loadButton = document.getElementById("load-user-btn");
const statusText = document.getElementById("user-status");
const userCard = document.getElementById("user-card");
async function loadUser() {
statusText.textContent = "加载中...";
userCard.innerHTML = "";
try {
const user = await fakeFetchUser();
userCard.innerHTML = `
<p>姓名：${user.name}</p>
<p>身份：${user.role}</p>
<p>当前重点：${user.focus}</p>
`;
statusText.textContent = "加载完成";
} catch (error) {
statusText.textContent = "加载失败";
}
}
loadButton.addEventListener("click", loadUser);

35
04-dom-events-async/09-async-await-panel/starter.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>async / await 面板</title>
<style>
body {
margin: 0;
padding: 32px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f6f8fb;
}
.panel {
max-width: 760px;
margin: 0 auto;
padding: 24px;
border-radius: 18px;
background: #ffffff;
border: 1px solid #dbe4ef;
}
</style>
</head>
<body>
<section class="panel">
<h1>用户信息面板</h1>
<button id="load-user-btn" type="button">加载用户信息</button>
<p id="user-status">等待加载</p>
<div id="user-card"></div>
</section>
<script src="./starter.js"></script>
</body>
</html>

18
04-dom-events-async/09-async-await-panel/starter.js Normal file
View File

@@ -0,0 +1,18 @@
function fakeFetchUser() {
return new Promise(function (resolve) {
setTimeout(function () {
resolve({
name: "林晨",
role: "前端学习者",
focus: "DOM + 事件 + 异步",
});
}, 900);
});
}
// 任务：
// 1. 获取按钮、状态文字、信息面板
// 2. 写一个 async 函数
// 3. 用 await 等待 fakeFetchUser()
// 4. 渲染用户信息
// 5. 用 try...catch 处理异常