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

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]", ...]