这周总算是把前端相关的基础看完了，快速地扫了一遍 HTML，CSS，JavaScript，TypeScript，Shadcn UI 相关的内容，接下来的安排就是准备做一些实际的项目。
前端
最近一个多月都在唠叨前端相关的事情，真要认真学，就是以我现在上工作的时间，下班闲暇时间，一周的时间也绰绰有余了，毕竟也是工作了四年的多后端，虽然对前端技术不甚了解，对计算机系统的了解也是了然于心了，只是需要对前端相关的知识补充下认知。
具体来说，这段时间我究竟做了什么呢？一开始就是看到了 Next.js 的两个教程。
跟着教程，一知半解地学完了 React 和 Next.js，这个时间点，我的前端知识库还是很久之前的，对 HTML，CSS，JavaScript 也是一知半解。也是多亏了 Next.js 的教程，我对前端工程有了基本的认知。因为对基础的三大基本组件（HTML…）不过，所以回炉重造，重新学了 HTML，CSS，JavaScript。
之后顺便也弄懂了一些其他的前端组件。包含单不只是 TypeScript，Vite，TailwindCSS，Shadcn UI。
MDN 也对前端工具链有一个扫盲方式的介绍，足够详细。
就我个人的粗浅理解，以下是现代前端开发的主要工具链。
- 基础 HTML，CSS，JavaScript。
- 包管理器 npm，现代前端依赖管理的基石。
- node 是 JavaScript 在浏览器之外的运行时，主要服务于服务端相关技术。当然依赖管理等一系列的工作也依赖 node，并且还有其他类似 node 的运行时，比如 deno 和 bun，有很多可以写的，不细写了。
- UI 框架，React / Vue 等。使用原生 HCJ 构建前端需要手动操作 DOM，UI 框架提供了更方便的组件工具用于构建 UI。
- PostCSS。原生 CSS 的功能有限，PostCSS 扩展了 CSS 的能力。
- 组件库。CSS 基础之上，为了减少编写，管理，维护 CSS 的困难，出现的 TailwindCSS 之类处理 CSS 的组件库。
- UI 组件库。基于 CSS 组件库之上，一套可复用的 UI 组件库。
- 构建工具。Vite 构建和减少代码提及，自动编写配置。
其他还有编辑器相关的，格式化，和代码检测工具。可见现代前端工程十分庞杂，强大。
cheatsheet
在了解完基础概念之后，作为快速过一遍的文档，CheatSheets.zip - Ultimate Cheat for Developers 是挺不错的，就像是记录好重点的学习笔记一样。
AI
这周经常性尝试使用 Github Copilot 辅助编程，我的体验还是比较舒服的。
在大代码库的代码编写上，Github Copilot 爱莫能助，设计逻辑性相关的功能实现，如果比较复杂的部分，我会声明式地方式描述给 Copilot，让它帮忙编写函数，然后我再实际验证功能是否满足，这方面的体验良好。
另一方面，我发现 Github Copilot Chat 用来学习编程非常棒。我一有不了解的技术概念就会直接提问给 Copilot，Copilot 的回复我看完之后基本就能了解这项技术概念了。辅助编程学习的体验非常良好。
一个例子：
Q: JavaScript this 关键字 在 JavaScript 中，
this关键字是一个非常重要的概念，它指向当前执行上下文的对象。this的值在不同的上下文中会有所不同，因此理解它的工作原理对于编写正确的 JavaScript 代码至关重要。1. 全局上下文
在全局上下文中（即代码在函数外部运行时），
this指向全局对象。在浏览器中，全局对象是window，在 Node.js 中，全局对象是global。console.log(this); // 在浏览器中输出: Window2. 函数上下文
在函数内部，
this的值取决于函数的调用方式。a. 作为普通函数调用
当函数作为普通函数调用时，
this指向全局对象（在严格模式下，this是undefined）。function showThis() { console.log(this); } showThis(); // 在非严格模式下输出: Window (浏览器中)b. 作为对象的方法调用
当函数作为对象的方法调用时，
this指向调用该方法的对象。const obj = { name: 'Alice', greet: function() { console.log(this.name); } }; obj.greet(); // 输出: Alicec. 构造函数调用
当函数作为构造函数调用时（使用
new关键字），this指向新创建的对象。function Person(name) { this.name = name; } const person1 = new Person('Bob'); console.log(person1.name); // 输出: Bob3. 箭头函数
箭头函数没有自己的
this值，它会捕获其所在上下文的this值，即箭头函数中的this是在它定义时决定的，而不是在调用时决定的。const person = { name: 'Charlie', greet: function() { const arrowFunction = () => { console.log(this.name); }; arrowFunction(); } }; person.greet(); // 输出: Charlie4. 显式绑定
可以使用
call、apply和bind方法显式地绑定this。a.
call方法
call方法调用一个函数，并显式指定this的值和参数。function greet() { console.log(this.name); } const user = { name: 'Dave' }; greet.call(user); // 输出: Daveb.
apply方法
apply方法类似于call，但它接受一个参数数组。function greet(greeting) { console.log(greeting + ', ' + this.name); } const user = { name: 'Eve' }; greet.apply(user, ['Hello']); // 输出: Hello, Evec.
bind方法
bind方法创建一个新的函数，并将this绑定到指定的对象，新的函数可以在以后调用。function greet() { console.log(this.name); } const user = { name: 'Frank' }; const boundGreet = greet.bind(user); boundGreet(); // 输出: Frank总结
- 全局上下文：
this指向全局对象（浏览器中是window，Node.js 中是global）。- 函数上下文：
this的值取决于函数的调用方式（普通函数、对象方法、构造函数）。- 箭头函数：
this绑定在定义时的上下文。- 显式绑定：使用
call、apply和bind方法可以显式绑定this。理解
this的行为对于编写和调试 JavaScript 代码至关重要。通过掌握这些规则，你可以更准确地控制函数的执行上下文。
基础的点都有提到，很棒了。
模型方面，Github Copilot 现在提供的基础版本是 GPT-4o，作为预览的功能，可以切换到 o1-mini，o1，或者 Claude 3.5 Sonnet。但是在辅助学习方面还是 GPT-4o 最快也最方便。
最后
最近有打算写一个简单的浏览器插件，也是我自己想要用的浏览器插件，本身功能还是比较简单的，基于 AI 辅助，一边学习一边写，完成一个工程会比较有成就感就是。
Roadmap.sh 中的前端部分也还是要继续跟的，往全栈发展。如果有时间，真的，写一个博客网站？但是部署是个很大的问题。
涉及到代码部署的部分，前端相关 Vercel 的免费版本基本满足需求，如果我构建的网站流量能够达到免费流量之外，那么 20 美元一个月的付费版本我觉得也可以接受，这个阶段，我也应该在网站上有收入了。也是我的最终目的。
路漫漫，一步步走。考虑未来，享受当下。下周见。