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

28
05-es6-plus/09-final-modern-js/README.md Normal file
View File

@@ -0,0 +1,28 @@
# 练习 9：综合页面
## 目标
把 ES6+ 的关键语法拼起来，做一个现代 JS 小页面。
## 项目名称
现代 JS 学习摘要页
## 任务
请完成一个小页面，要求至少包含：
- 模块导入
- 解构
- 展开运算符
- 模板字符串
- 箭头函数
- Promise 或 `async` / `await`
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/starter.js)
- [summary-service.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/summary-service.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/answer.js)

15
05-es6-plus/09-final-modern-js/answer.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>现代 JS 学习摘要页</title>
</head>
<body>
<h1 id="title">等待加载</h1>
<p id="intro">等待渲染</p>
<ul id="skill-list"></ul>
<script type="module" src="./answer.js"></script>
</body>
</html>

22
05-es6-plus/09-final-modern-js/answer.js Normal file
View File

@@ -0,0 +1,22 @@
import { baseSummary, loadExtraSkills } from "./summary-service.js";
const title = document.getElementById("title");
const intro = document.getElementById("intro");
const skillList = document.getElementById("skill-list");
async function renderPage() {
const extraSkills = await loadExtraSkills();
const { name, stage, skills } = baseSummary;
const allSkills = [...skills, ...extraSkills];
title.textContent = `${name} 的 ${stage} 学习摘要`;
intro.textContent = `当前已覆盖 ${allSkills.length} 个现代 JS 关键点。`;
allSkills.forEach((skill) => {
const item = document.createElement("li");
item.textContent = `已掌握：${skill}`;
skillList.appendChild(item);
});
}
renderPage();

15
05-es6-plus/09-final-modern-js/starter.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>现代 JS 学习摘要页</title>
</head>
<body>
<h1 id="title">等待加载</h1>
<p id="intro">等待渲染</p>
<ul id="skill-list"></ul>
<script type="module" src="./starter.js"></script>
</body>
</html>

7
05-es6-plus/09-final-modern-js/starter.js Normal file
View File

@@ -0,0 +1,7 @@
// 任务：
// 1. 从 ./summary-service.js 导入数据
// 2. 用 async / await 获取额外技能
// 3. 解构 name、stage、skills
// 4. 用展开运算符合并技能
// 5. 用模板字符串渲染标题和说明
// 6. 用 forEach 或 map + 箭头函数渲染列表

12
05-es6-plus/09-final-modern-js/summary-service.js Normal file
View File

@@ -0,0 +1,12 @@
export const baseSummary = {
name: "林晨",
stage: "ES6+",
skills: ["模板字符串", "解构", "展开运算符"],
};
export const loadExtraSkills = () =>
new Promise((resolve) => {
setTimeout(() => {
resolve(["模块化", "Promise", "async/await"]);
}, 700);
});