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/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();