前端开发入门一

前端开发入门一

已经有若干年没有web相关的代码了，以前主要是用C/C++编写传统的GUI程序，涉及界面、多线程、网络等知识点。最近准备开发一个浏览器插件，才发现业界已经换了天地，只得重新开始学习了，好在基本的学习能力还在，而且有AI加持，应该不是太大问题，Let’s get started.

开发环境

开发工具：选择了vsCode，是微软开发的一个代码编辑器，可以通过插件来增加对不同语言的工具的支持，整体来看与eclipse相似。之前教C时总是推荐学生用visual studio，后来发现对于初学者，VS尤其是后面的界面越来越复杂，软件越做越大，对于他们来说太复杂，于是改成Dev C++，再后来，直接用了OJ平台布置作业，结果很多学生直接在Web里面写代码，连调试机会都没有了，有问题直接甩给老师，只能一声叹息，现在学生…

回到正题，发现现在开发web程序的工具丰富多了，要学的知识也多，下面简单列一些，都是这几天接触的：

Node.js

个人理解是一个类似于web服务器的后台工具，还是用官网定义说吧：Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境，用于在服务器端运行JavaScript。
在Windows下，直接上官方下载安装即可，这样免去了安装IIS或者Apache服务器，等到真的应用时再安装，方便了开发。安装成功后，在VS的terminal里面输入：

node -v

如果能显示其版本号，则表示安装成功。

优点包括：

1. 内置 npm（Node Package Manager），拥有全球最大的开源库生态系统。
2. 跨平台：支持Windows、Linux、macOS 等操作系统。
3. 事件驱动与非阻塞 I/O：避免线程阻塞，适合高并发场景（如聊天服务、API 网关）。

TypeScript

1. 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，为 JavaScript 添加了可选的静态类型和基于类的面向对象编程。
2. 设计目标是为了更好地支持大型应用程序的开发，这样就好理解了，就好比C++之于C，通过类型系统来提高代码的可维护性和可读性；
3. TypeScript 的编译器通常被简称为 tsc，它是将 TypeScript 代码转换为 JavaScript 代码的工具。——这一点又有点象Java语言。
4. 增加了OOP的概念，包括类、接口模块等，并且允许声明变量类型。

JavaScript 框架

早期好像是Jquery，最近下载了一个JQuery项目，发现已经是过去时了，脚本语言发展真快，现在流行的是React、Vue、Angular。

React

React 是一个由 Meta（原Facebook） 开发的开源 JavaScript 库，专注于构建高效、灵活的用户界面（UI）。它于 2013 年发布，现已成为全球最流行的前端框架之一，尤其适合构建复杂的大型单页面应用（SPA）。
核心特征

1. 将 UI 拆分为独立、可复用的组件，每个组件管理自己的状态和逻辑。包括函数组件（新）和类组件。
2. JSX(JavaScript XML)：一种类似 HTML 的语法扩展，允许在 JavaScript 中直接编写 UI 结构。
3. 虚拟DOM(Virtual DOM)：避免直接操作真实 DOM 的性能损耗。

React 的生态系统

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

工具/库	用途	备注
React Router	‘实现前端路由（SPA 页面切换）’
Redux	全局状态管理（适合复杂应用）	“”
Next.js	服务端渲染（SSR）和静态站点生成
Next.js	服务端渲染（SSR）和静态站点生成
Vite	极速构建工具（替代 Webpack）
Material-UI	UI 组件库（快速搭建美观界面）

官方文档：https://react.dev（新版文档）
教程推荐：

• 官方教程：Tic-Tac-Toe 游戏教程
• 免费课程：Scrimba 的 React 入门

Vue

Vue 是一款用于构建用户界面（UI）的渐进式 JavaScript 框架，专注于简化Web 应用的开发，适合中小型项目快速开发。

1. Vue 自动追踪数据变化，并实时更新视图。——所见即所得！
2. 组件化开发：将Web页面拆分为独立、可复用的组件，每个组件包含自己的逻辑和样式。——那不就是向传统GUI开发那一套靠齐，这是好事。
3. 虚拟 DOM（Document Object Model，代表性的如HTML）：通过虚拟 DOM 高效更新页面，仅渲染变化的部分，提升性能。——可以理解为画图程序，里面仅更新部分区域。
4. 最新版本是Vue 3：支持 Composition API、TypeScript 等。
5. 官方文档：中文VueJs/英文VueJs

react vs Vue

总结：React 凭借其组件化、高性能和强大的生态，成为构建现代Web 应用的首选之一, 适合中大型项目，但对新手需要一定学习成本。若追求快速上手，可考虑 Vue；若需要极致灵活性和跨平台支持，React 是更优选择。

其它一些工具

• Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。它的主要目的是将各种资源（如HTML文件、CSS样式表、图片、JavaScript文件等）打包成一个或多个bundle，以便于在浏览器中使用。

Express

Express 是一个快速、无配置、极简的 Node.js Web 应用框架，它为 Web 和移动应用程序提供了一组强大的功能，使得构建单页、多页或混合 Web 应用程序变得更加容易。Express 是 Node.js 最流行的中间件框架之一，用于处理网站的路由、请求和响应等基础任务。

Mongoose

Mongoose 是一个为 Node.js 环境设计的 MongoDB 对象模型工具库。

1. 它管理着数据验证、业务逻辑以及数据之间的关系，并提供了一个简单的接口来与 MongoDB 数据库进行交互。
2. Mongoose 是一个对象数据模型（ODM）库，它封装了 MongoDB 的驱动，使得与数据库的交互更加容易和直观。

svg-captcha：用于生成验证码

dotenv：管理环境变量

• 关于以上资料，多数来自于AI问答！