软件常识 --- web技术通解

前端

React 　　让开发页面像搭积木

 

MPA与SPA　　传统方式 (多页应用 - MPA) MPA就是传统web方式，所有的页面放在服务器前端浏览器需要哪个取哪个。SPA方式 (单页应用)：你第一次访问就把所有你用的页面一次发给你的浏览器，打开哪个显示哪个页面，页面的数据仍然要后端取回。有点像微信小程序，将所有页面打包为一个文件发给微信显示。

SSR 方式（服务端渲染）：SPA是浏览器取回数据，SSR是服务器做好页面加数据发出去。

 

vue  React Angular 前端三框架的区别：

Vue是小轿车——上手就能开，自带空调收音机（官方套件）；

React是改装车——给个发动机和方向盘（核心库），其他零件自己拼；

Angular是高铁——严格按轨道跑，连厕所位置都规定好了（全套解决方案），但自己造不了铁轨。

 懒加载 = 抠门鬼的智慧！看不见的绝不浪费力气，专治慢、卡、崩！

Svelte   去中间框架（vue  React Angular ）， Svelte 的核心就俩字：编译！ 它把框架该干的“智能”活，提前在编译阶段干完，换来运行时的极致效率和轻量。

 

 Astro：

“静态网站塞火箭！99%的页面纯HTML闪电直给，剩下1%的交互按需‘注射活体JS’，专治SPA肥大病！”

SolidJS 　　极速类react

 

jQuery　　前端万能工具箱，没有框架前他就是王

 

Bun　　　nodejs替代品

CSS3　　网页皮肤定义

Tailwind CSS　　让css像搭积木

SASS　　　让css更像一门编程语言

styled-components　　js中写css，不要在分离编写不同的代码

Wasm不是替代JS！是让JS摇人——喊C++/Rust大哥来浏览器里帮它扛渣药包！ 

vuetify　　免费开源vue  UI 组件库

devtools　　浏览器辅助开发工具

vitest 　　给 Vue/React 组件做高效单元测试

trpc　　让前端写函数一样写接口

reactnative　　“用 React 写手机 App！一套代码，同时生成 iOS 和 Android 两个原生应用，省下养两个开发队的钱！”

GSAP = 网页动画的终结者！用JS代码狂薅浏览器性能，做出电影级特效，专治各种动效需求！

element plus　　vue3的ui

yarn　　“专治 npm 手抖的包管理狠人！锁死版本、并行飙车、离线狂魔，让你装依赖再不发疯！

pinia　　Vue 3 的官方状态库！把全局数据塞进保险柜，开箱即取，省掉 Vuex 的绕口令

Gatsby = 静态网站的反应堆！用 React 写代码，GraphQL 吃数据，插件开挂，生成速度碾压服务器的超级营销页！

XState = 状态管理的钢铁牢笼！用流程图驯服需求变更，专治：乱跳状态/分支爆炸/逻辑黑洞！

Less = CSS 的编程外挂！用变量/嵌套/函数暴打重复代码，专治：主题换色难、选择器写吐、样式复用渣！

Cypress = 前端测试的终结者！用浏览器寄生+录屏回放+智能等待，把偶发性Bug钉死在棺材里！

Storybook = 前端组件的刑房+博物馆！独立开发/测试/陈列每个零件，让造轮子不再躲猫猫！

Prettier = 代码界的城管大队！用机械铁律碾平所有格式乱象，让团队协作不再为缩进打架！

WebGL = 浏览器里的3D核反应堆！用JS+显卡暴力渲染，让网页从PPT进化为黑客帝国！

Netlify = 静态网站的全自动火箭！Git上传→全球分发→免费安全加速，把部署成本踩进地狱！

Playwright = 测试工具链的终结者！跨浏览器+跨语言+移动端+网络控制+自动取证，把偶发性Bug钉死在耻辱柱上！

SWC = 前端编译的歼星舰！用 Rust 暴力撕碎编译慢的耻辱，让 Babel/TS 编译从喝杯茶→眨个眼！

Qwik = 前端框架的速度怪兽！用可恢复性+原子级懒加载，把首屏性能榨出最后一滴血，专治电商大促卡成狗！

esbuild = 前端构建的喷气引擎！用 Go 语言+多核压榨+极简设计，把打包时间从等咖啡→打喷嚏！

Vercel = 前端部署的终结者！Git上传→全球分发→框架级优化，把项目上线从三天压缩到三秒！

Recoil = React 状态管理的官方氢弹！用原子+选择器炸平组件通信障碍，让 Redux 的模板代码原地升天！

pnpm = node_modules 的瘦身教练！用中央仓库+硬链接暴打重复依赖，让硬盘和安装时间一起见鬼！

ESLint = 代码质量的钢铁牢笼！用规则链锁死错误+风格，让团队产出像流水线一样整齐划一！

MobX = React 状态的自动驾驶！用响应式追踪+面向对象暴击，让视图更新像呼吸一样自然，把 Redux 的裹脚布烧成灰！

PWA = 网页的整容术！用缓存+推送+全屏启动伪装原生App，骗用户爽用，省团队烧钱！

Redux = 状态管理的集中营！用action/reducer铁律锁死数据流，适合大型项目，但小项目用就是自虐！

shadcn/ui = 前端界的赛博朋克！抢高颜值组件源码 + Tailwind基因编辑，让设计系统沦为你的代码奴隶！

Zustand = React 状态的野狼！用极简API+精准更新+零依赖，把状态管理从Redux的监狱解放成裸奔狂欢！

Remix = 服务器路由绑数据 + 表单即后端API + 嵌套路由局部更新，专治白屏慢、接口联调烦、SPA体验糙！

Electron = 桌面开发的跨界土匪！用Web技术抢Native开发的饭碗，三端通吃但内存爆炸，专治老板嫌原生开发贵！

PrimeVue = Vue 后台系统的作弊码！用预制组件海+主题鬼畜换肤，把管理页面开发从三个月压榨到三天！

• Three.js = 网页搞3D（游戏/炫酷模型）→ 空间想象力+美术需求

• D3.js = 数据变神图（自定义图表/复杂可视化）→ 数据分析+设计控制

Canvas = 前端界的野性绘画！用JS代码手撕像素点，解锁游戏/动画/可视化超能力，但数学不好慎入！

SVG = 网页的矢量黑魔法！用公式画图+CSS上色+JS操控，把图标/图表变成代码玩具，专治像素图放大暴毙！

PostCSS = CSS的工业革命！用插件流水线暴改你的样式表：加前缀/压缩/用未来语法，把写CSS从石器时代拽进蒸汽时代

 

 

 

 

 

 

 

 

 

 

 

 

 

 

后端

Node.js　　　让js在服务器端再次伟大

Express　　　基于nodejs快速开发后端接口

Nuxt　　　　让react更像vue的工作方式

 

 

构建工具

Webpack / Rollup　　　　打包工具

Vite　　　　极速开发和打包工具

Babel　　　　向下兼容js

Git　　　　让代码修改可追溯

Docker　　让程序和依赖打包成一个文件独立运行，避免环境配置问题

VS Code　　最强代码编辑器，支持海量插件

 

 

测试工具

Jest / Vitest　　　为函数编写测试

Cypress / Playwright　　自动化地测试整个应用的用户流程。

 

数据

REST API　　web开发数据接口规范，预先定义好前后端的数据增删改查的交互方法，让开发更快捷

GraphQL　　REST API 的一个替代方案。它允许前端“按需取餐”，精确地告诉后端需要哪些数据，不多也不少，从而提高了数据获取效率。

MongoDB　　一种“文档数据库”，它不像传统数据库那样把数据存在表格里，而是以类似 JSON 的格式（文档）来存储，非常灵活。

Axios / Fetch API　　　　“数据请求工具”。它们是 JavaScript 中用来向服务器发送网络请求、获取数据的库或原生功能。

WebSockets　　一种允许服务器和浏览器之间建立“持续通话”的技术。一旦连接建立，服务器可以随时主动向浏览器推送消息，而不需要浏览器每次都去问。