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/01-template-and-destructuring/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 1：模板字符串和解构
## 目标
学会用模板字符串拼接信息，并用解构快速读取对象和数组数据。
## 你要练什么
- 模板字符串
- 对象解构
- 数组解构
## 任务
- 从 `student` 对象里解构出姓名和阶段
- 从 `scores` 数组里解构出前两个分数
- 用模板字符串把这些信息渲染到页面
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/answer.js)

16
05-es6-plus/01-template-and-destructuring/answer.html Normal file
View File

@@ -0,0 +1,16 @@
<!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>
<section>
<h1>ES6+ 练习 1</h1>
<p id="output">等待渲染</p>
</section>
<script src="./answer.js"></script>
</body>
</html>

11
05-es6-plus/01-template-and-destructuring/answer.js Normal file
View File

@@ -0,0 +1,11 @@
const student = {
name: "林晨",
stage: "ES6+",
};
const scores = [88, 92, 95];
const { name, stage } = student;
const [firstScore, secondScore] = scores;
document.getElementById("output").textContent = `${name} 正在学习 ${stage}，前两次练习分数分别是 ${firstScore} 和 ${secondScore}。`;

16
05-es6-plus/01-template-and-destructuring/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!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>
<section>
<h1>ES6+ 练习 1</h1>
<p id="output">等待渲染</p>
</section>
<script src="./starter.js"></script>
</body>
</html>

11
05-es6-plus/01-template-and-destructuring/starter.js Normal file
View File

@@ -0,0 +1,11 @@
const student = {
name: "林晨",
stage: "ES6+",
};
const scores = [88, 92, 95];
// 任务：
// 1. 解构出 name、stage
// 2. 解构出前两个分数
// 3. 用模板字符串把信息写入 #output

24
05-es6-plus/02-spread-and-rest/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 2：展开运算符和剩余参数
## 目标
学会复制数组、合并对象，以及用剩余参数接收不定数量的参数。
## 你要练什么
- 数组展开
- 对象展开
- 剩余参数
## 任务
- 复制一份课程数组并新增一项
- 基于用户对象生成一个更新后的对象
- 写一个 `sumScores` 函数，用剩余参数计算总分
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/answer.js)

12
05-es6-plus/02-spread-and-rest/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 src="./answer.js"></script>
</body>
</html>

24
05-es6-plus/02-spread-and-rest/answer.js Normal file
View File

@@ -0,0 +1,24 @@
const tracks = ["HTML", "CSS", "JavaScript"];
const user = {
name: "林晨",
stage: "基础阶段",
};
function sumScores(...scores) {
return scores.reduce((total, score) => total + score, 0);
}
const newTracks = [...tracks, "ES6+"];
const nextUser = { ...user, stage: "现代 JS" };
const totalScore = sumScores(88, 91, 95);
document.getElementById("output").textContent = JSON.stringify(
{
newTracks,
nextUser,
totalScore,
},
null,
2
);

12
05-es6-plus/02-spread-and-rest/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 src="./starter.js"></script>
</body>
</html>

16
05-es6-plus/02-spread-and-rest/starter.js Normal file
View File

@@ -0,0 +1,16 @@
const tracks = ["HTML", "CSS", "JavaScript"];
const user = {
name: "林晨",
stage: "基础阶段",
};
function sumScores(...scores) {
// 返回总分
}
// 任务：
// 1. 复制 tracks 并新增 "ES6+"
// 2. 基于 user 生成一个 stage 为 "现代 JS" 的新对象
// 3. 调用 sumScores
// 4. 输出结果到 #output

23
05-es6-plus/03-arrow-functions/README.md Normal file
View File

@@ -0,0 +1,23 @@
# 练习 3：箭头函数
## 目标
学会把简单函数改写成箭头函数。
## 你要练什么
- 箭头函数
- 简写返回值
- 数组映射
## 任务
- 把两个普通函数改成箭头函数
- 用 `map` 和箭头函数生成课程标签
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/03-arrow-functions/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/03-arrow-functions/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/03-arrow-functions/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/03-arrow-functions/answer.js)

12
05-es6-plus/03-arrow-functions/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 src="./answer.js"></script>
</body>
</html>

15
05-es6-plus/03-arrow-functions/answer.js Normal file
View File

@@ -0,0 +1,15 @@
const getLevel = (score) => (score >= 80 ? "达标" : "继续练习");
const add = (a, b) => a + b;
const tracks = ["DOM", "异步", "模块化"];
const labels = tracks.map((track) => `[${track}]`);
document.getElementById("output").textContent = JSON.stringify(
{
level: getLevel(86),
sum: add(12, 8),
labels,
},
null,
2
);

12
05-es6-plus/03-arrow-functions/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 src="./starter.js"></script>
</body>
</html>

14
05-es6-plus/03-arrow-functions/starter.js Normal file
View File

@@ -0,0 +1,14 @@
function getLevel(score) {
return score >= 80 ? "达标" : "继续练习";
}
function add(a, b) {
return a + b;
}
const tracks = ["DOM", "异步", "模块化"];
// 任务：
// 1. 把 getLevel 改成箭头函数
// 2. 把 add 改成箭头函数
// 3. 用 map + 箭头函数生成 ["[DOM]", ...]

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

24
05-es6-plus/05-promise-basics/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 5：Promise 基础
## 目标
学会用 Promise 表达异步结果。
## 你要练什么
- Promise
- `.then()`
- `.catch()`
## 任务
- 调用模拟请求函数
- 成功时渲染课程数据
- 失败时渲染错误状态
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/answer.js)

13
05-es6-plus/05-promise-basics/answer.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Promise 基础</title>
</head>
<body>
<p id="status">等待加载</p>
<pre id="output"></pre>
<script src="./answer.js"></script>
</body>
</html>

21
05-es6-plus/05-promise-basics/answer.js Normal file
View File

@@ -0,0 +1,21 @@
function loadTracks() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(["模板字符串", "模块化", "async/await"]);
}, 700);
});
}
const status = document.getElementById("status");
const output = document.getElementById("output");
status.textContent = "加载中...";
loadTracks()
.then((tracks) => {
status.textContent = "加载完成";
output.textContent = tracks.join("\n");
})
.catch(() => {
status.textContent = "加载失败";
});

13
05-es6-plus/05-promise-basics/starter.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Promise 基础</title>
</head>
<body>
<p id="status">等待加载</p>
<pre id="output"></pre>
<script src="./starter.js"></script>
</body>
</html>

12
05-es6-plus/05-promise-basics/starter.js Normal file
View File

@@ -0,0 +1,12 @@
function loadTracks() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(["模板字符串", "模块化", "async/await"]);
}, 700);
});
}
// 任务：
// 1. 调用 loadTracks()
// 2. 成功时更新状态和输出内容
// 3. 失败时更新状态

24
05-es6-plus/06-async-await/README.md Normal file
View File

@@ -0,0 +1,24 @@
# 练习 6：async / await
## 目标
学会用 `async` / `await` 改写一个 Promise 流程。
## 你要练什么
- `async`
- `await`
- `try...catch`
## 任务
- 写一个 `async` 函数等待课程配置
- 成功时渲染结果
- 失败时更新状态
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/answer.js)

13
05-es6-plus/06-async-await/answer.html Normal file
View File

@@ -0,0 +1,13 @@
<!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>
</head>
<body>
<p id="status">等待加载</p>
<pre id="output"></pre>
<script src="./answer.js"></script>
</body>
</html>

27
05-es6-plus/06-async-await/answer.js Normal file
View File

@@ -0,0 +1,27 @@
function loadConfig() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
title: "现代 JS 面板",
level: "进阶",
});
}, 800);
});
}
const status = document.getElementById("status");
const output = document.getElementById("output");
async function renderConfig() {
status.textContent = "加载中...";
try {
const config = await loadConfig();
status.textContent = "加载完成";
output.textContent = `${config.title} - ${config.level}`;
} catch (error) {
status.textContent = "加载失败";
}
}
renderConfig();

13
05-es6-plus/06-async-await/starter.html Normal file
View File

@@ -0,0 +1,13 @@
<!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>
</head>
<body>
<p id="status">等待加载</p>
<pre id="output"></pre>
<script src="./starter.js"></script>
</body>
</html>

15
05-es6-plus/06-async-await/starter.js Normal file
View File

@@ -0,0 +1,15 @@
function loadConfig() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
title: "现代 JS 面板",
level: "进阶",
});
}, 800);
});
}
// 任务：
// 1. 写一个 async 函数
// 2. 用 await 等待 loadConfig()
// 3. 用 try...catch 处理流程

23
05-es6-plus/07-arrow-this/README.md Normal file
View File

@@ -0,0 +1,23 @@
# 练习 7：箭头函数里的 this
## 目标
理解箭头函数不会创建自己的 `this`。
## 你要练什么
- 箭头函数
- `this`
- 定时器回调
## 任务
- 在对象方法里用箭头函数处理 `setTimeout`
- 让延迟输出仍然拿到当前对象的名称
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/07-arrow-this/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/07-arrow-this/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/07-arrow-this/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/07-arrow-this/answer.js)

12
05-es6-plus/07-arrow-this/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>箭头函数里的 this</title>
</head>
<body>
<pre id="output"></pre>
<script src="./answer.js"></script>
</body>
</html>

10
05-es6-plus/07-arrow-this/answer.js Normal file
View File

@@ -0,0 +1,10 @@
const trainer = {
name: "现代 JS 训练营",
report() {
setTimeout(() => {
document.getElementById("output").textContent = `当前模块：${this.name}`;
}, 500);
},
};
trainer.report();

12
05-es6-plus/07-arrow-this/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>箭头函数里的 this</title>
</head>
<body>
<pre id="output"></pre>
<script src="./starter.js"></script>
</body>
</html>

11
05-es6-plus/07-arrow-this/starter.js Normal file
View File

@@ -0,0 +1,11 @@
const trainer = {
name: "现代 JS 训练营",
report() {
// 任务：
// 1. 用 setTimeout
// 2. 在回调里用箭头函数读取 this.name
// 3. 把结果写入 #output
},
};
trainer.report();

26
05-es6-plus/08-fetch-and-json/README.md Normal file
View File

@@ -0,0 +1,26 @@
# 练习 8：fetch 和 JSON
## 目标
补齐 `fetch()` 和 `res.json()` 这一层最常见的现代异步写法。
## 你要练什么
- `fetch()`
- `await`
- `res.json()`
- 接口数据渲染
## 任务
- 点击按钮后发起一次 `fetch`
- 等待返回的响应对象
- 调用 `res.json()` 解析 JSON
- 把课程标题和内容渲染到页面
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/answer.js)

16
05-es6-plus/08-fetch-and-json/answer.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fetch 和 JSON</title>
</head>
<body>
<h1>fetch 和 JSON</h1>
<button id="load-btn" type="button">加载文章</button>
<p id="status">等待加载</p>
<pre id="output"></pre>
<script src="./answer.js"></script>
</body>
</html>

19
05-es6-plus/08-fetch-and-json/answer.js Normal file
View File

@@ -0,0 +1,19 @@
const loadButton = document.getElementById("load-btn");
const status = document.getElementById("status");
const output = document.getElementById("output");
async function loadPost() {
status.textContent = "加载中...";
try {
const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
const data = await res.json();
status.textContent = "加载完成";
output.textContent = `标题：${data.title}\n\n内容：${data.body}`;
} catch (error) {
status.textContent = "加载失败";
}
}
loadButton.addEventListener("click", loadPost);

16
05-es6-plus/08-fetch-and-json/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fetch 和 JSON</title>
</head>
<body>
<h1>fetch 和 JSON</h1>
<button id="load-btn" type="button">加载文章</button>
<p id="status">等待加载</p>
<pre id="output"></pre>
<script src="./starter.js"></script>
</body>
</html>

11
05-es6-plus/08-fetch-and-json/starter.js Normal file
View File

@@ -0,0 +1,11 @@
const loadButton = document.getElementById("load-btn");
const status = document.getElementById("status");
const output = document.getElementById("output");
// 任务：
// 1. 点击按钮后把状态改成“加载中...”
// 2. 用 fetch 请求 https://jsonplaceholder.typicode.com/posts/1
// 3. 用 await 等待响应对象
// 4. 调用 res.json() 解析数据
// 5. 把 title 和 body 渲染到页面
// 6. 失败时显示“加载失败”

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);
});

151
05-es6-plus/README.md Normal file
View File

@@ -0,0 +1,151 @@
# ES6+（现代 JS）
这部分只解决一个问题：你能不能用现代 JavaScript 的语法和模块能力，把代码写得更清晰、更工程化。
## 学完后你应该掌握
- 模板字符串
- 对象和数组解构
- 展开运算符和剩余参数
- 箭头函数的基础写法
- 箭头函数和 `this` 的常见差异
- `import` / `export` 的基础用法
- `fetch()` 和 `res.json()` 的基础用法
- Promise 的基础链式写法
- `async` / `await` 的基础写法
- 如何把这些能力组合成一个现代 JS 小页面
## 这一章在解决什么
JavaScript 本体解决的是逻辑表达。
ES6+ 这一章解决的是：
- 代码怎么写得更短、更清楚
- 多文件之间怎么建立依赖
- 异步代码怎么写得更自然
它回答的是：
- 对象里的值怎么快速取出来
- 数组和对象怎么复制或合并
- 回调函数怎么写得更紧凑
- 多个 JS 文件怎么互相导入
- Promise 和 `async` / `await` 怎么替代层层回调
## 必须建立的 5 个核心意识
### 1. ES6+ 不是“炫技语法”，而是为了减少样板代码
比如：
- 模板字符串比字符串拼接更直观
- 解构让取值更直接
- 展开运算符让复制和合并更清楚
### 2. 语法糖不改变逻辑本质
例如：
- 箭头函数还是函数
- `async` / `await` 本质上仍然建立在 Promise 上
### 3. 模块化是现代前端代码的基础
一个文件只做一件事，然后通过：
- `export`
- `import`
把能力组合起来。
### 4. Promise 和 `async` / `await` 是为了解决异步可读性
不是让异步消失，而是让异步流程更好读、更好维护。
### 5. 优先理解“什么时候用”，再记语法
比如：
- 需要字符串插值时用模板字符串
- 需要快速取对象字段时用解构
- 需要复制对象和数组时用展开运算符
- 需要跨文件协作时用模块
## 高频语法速记
### 模板字符串
- `` `Hello ${name}` ``
### 解构
- `const { name } = user`
- `const [first, second] = list`
### 展开和剩余
- `const newArr = [...arr]`
- `const newUser = { ...user, age: 21 }`
- `function sum(...numbers) {}`
### 箭头函数
- `const add = (a, b) => a + b`
### 模块
- `export`
- `import`
### 异步
- `Promise`
- `.then()`
- `async`
- `await`
## 学习顺序
1. 模板字符串和解构
2. 展开运算符和剩余参数
3. 箭头函数
4. 模块基础
5. Promise
6. `async` / `await`
7. 箭头函数里的 `this`
8. `fetch` 和 JSON
9. 综合练习
## 练习目录
- [01-template-and-destructuring/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/README.md)
- [02-spread-and-rest/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/README.md)
- [03-arrow-functions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/03-arrow-functions/README.md)
- [04-modules-basic/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/README.md)
- [05-promise-basics/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/README.md)
- [06-async-await/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/README.md)
- [07-arrow-this/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/07-arrow-this/README.md)
- [08-fetch-and-json/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/README.md)
- [09-final-modern-js/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/README.md)
## 过关标准
如果你能独立做到下面这些，就说明这一章已经基本过关：
- 能用模板字符串代替拼接
- 能用解构快速读取对象和数组数据
- 能用展开运算符合并对象、复制数组
- 能写简单的箭头函数
- 能理解箭头函数的 `this` 和普通函数的差异
- 能写出基础的 `import` / `export`
- 能读懂 `fetch()` 返回值，并通过 `res.json()` 取到数据
- 能用 Promise 和 `async` / `await` 写一个简单异步流程
- 能把这些语法组合进一个小页面
## 学习建议
- 先把语法写顺，再去追求更短
- 一次只替换一类旧写法，避免混乱
- 学模块时一定要看清“谁导出、谁导入”
- 学异步时先看执行顺序，再看语法形式