前端的部分知识点，供后端快速学习及复习使用（备忘录）

原创已于 2025-03-10 16:55:05 修改 · 1.5k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习

于 2025-03-10 16:40:25 首次发布

1. HTML (超文本标记语言)

基础标签：<html>, <head>, <body>, <div>, <span>, <p>, <a>, <img>, <ul>, <ol>, <li>, <table>, <form>, <input>, <button> 等。
语义化标签：<header>, <footer>, <section>, <article>, <nav>, <aside> 等。
表单与输入：<form>, <input>, <textarea>, <select>, <label>, <button> 等。
HTML5新特性：<video>, <audio>, <canvas>, <svg>, <localStorage>, <sessionStorage> 等。

2. CSS (层叠样式表)

选择器：元素选择器、类选择器、ID选择器、属性选择器、伪类选择器（如 :hover, :nth-child）等。
盒模型：margin, padding, border, width, height。
布局：display（block, inline, inline-block, flex, grid）、position（static, relative, absolute, fixed, sticky）、float、clear。
响应式设计：@media 查询、viewport 元标签、rem、em、vh、vw 等单位。
CSS3新特性：transition, animation, transform, gradient, box-shadow, border-radius 等。

3. JavaScript (JS)

基础语法：变量声明（let, const, var）、数据类型、运算符、条件语句、循环语句、函数、对象、数组、字符串操作等。
DOM操作：document.getElementById(), document.querySelector(), element.innerHTML, element.style, element.addEventListener() 等。
事件处理：click, mouseover, keydown, submit 等事件。
异步编程：setTimeout, setInterval, Promise, async/await, fetch API。
ES6+新特性：let/const, 箭头函数、模板字符串、解构赋值、默认参数、rest/spread 操作符、class, modules 等。

4. 前端框架与库

React：组件化开发、JSX语法、props 和 state、生命周期方法、Hooks（useState, useEffect）、路由（React Router）、状态管理（Redux 或 Context API）。
Vue.js：Vue 实例、模板语法、指令（v-if, v-for, v-bind, v-model）、组件、Vuex 状态管理、Vue Router。其作用主要有：构建单页应用、组件化开发、数据驱动视图、快速开发和跨平台开发
Vue的部分核心知识点：
1.Vue实例：Vue 应用的核心是 Vue 实例。通过 new Vue() 创建一个 Vue 实例，它将管理应用的视图和数据。
```
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
```
2.模板语法：Vue 使用基于 HTML 的模板语法，允许开发者声明式地将数据绑定到 DOM
```
<div id="app">
  <p>{{ message }}</p>
</div>
```
3.指令：Vue 提供了丰富的指令，用于动态操作 DOM。
（1）v-if：条件渲染。
（2）v-for：列表渲染。
（3）v-bind：动态绑定属性。
（4）v-model：双向数据绑定。
（5）v-on：事件监听。
```
<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <button v-on:click="toggleMessage">Toggle</button>
</div>
```
4.计算属性和监听器
计算属性：用于基于依赖的数据动态计算值。
侦听器：用于监听数据变化并执行副作用。
```
const app = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    firstName(newVal, oldVal) {
      console.log('First name changed:', newVal);
    }
  }
});
```
5.组件：组件是 Vue 的核心概念之一。每个组件是一个独立的单元，包含自己的模板、逻辑和样式。
```
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});
```
6.生命周期钩子：Vue 组件有一系列生命周期钩子，允许开发者在组件的不同阶段执行代码。常用钩子有created, mounted, updated, destroyed。
```
const app = new Vue({
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
});
```
Angular：组件、模块、服务、依赖注入、路由、RxJS、NgRx 状态管理。

5. 前端工具与构建

包管理器：npm, yarn。
模块打包工具：Webpack, Parcel, Vite。
任务运行器：Gulp, Grunt。
代码格式化与检查：ESLint, Prettier。
版本控制：Git。

6. 前端性能优化

加载优化：减少HTTP请求、使用CDN、压缩资源、使用缓存、懒加载。
渲染优化：减少重绘和回流、使用requestAnimationFrame、优化CSS选择器。
代码优化：减少DOM操作、避免全局变量、使用事件委托。

7. 前端安全

XSS (跨站脚本攻击)：转义用户输入、使用Content Security Policy (CSP)。
CSRF (跨站请求伪造)：使用CSRF Token、SameSite Cookie属性。
CORS (跨域资源共享)：理解CORS机制，配置服务器允许跨域请求。

8. 前端测试

单元测试：Jest, Mocha, Chai。
端到端测试：Cypress, Puppeteer。
集成测试：React Testing Library, Vue Test Utils。

9. 前端与后端的交互

RESTful API：理解REST架构风格，使用fetch或axios进行HTTP请求。
这里详细介绍一下Axios

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，主要用于浏览器和 Node.js 环境中发送异步 HTTP 请求（如 GET、POST、PUT、DELETE 等）。它的核心目标是简化前端与后端 API 的交互，替代传统的 XMLHttpRequest（原生 Ajax 的实现方式），并提供更强大、更易用的功能。

Axios 是对原生 Ajax 的封装，解决了原生 Ajax 的以下痛点：

痛点	Axios 的解决方案
代码冗余复杂	简洁的 API（如 `axios.get()`、`axios.post()`）
手动处理 JSON 数据转换	自动转换请求/响应数据为 JSON
缺乏 Promise 支持	基于 Promise，支持 `async/await`
难以全局拦截请求/响应	提供拦截器（Interceptors）机制
无法取消请求	支持请求取消（CancelToken 或 AbortController）

有以下应用场景：
（1）与后端 API 交互（RESTful 风格）

// 发送 GET 请求（带参数）
axios.get('/api/users', {
  params: { page: 1, limit: 10 }
}).then(response => {
  console.log(response.data);
});

// 发送 POST 请求（提交 JSON 数据）
axios.post('/api/login', {
  username: 'admin',
  password: '123456'
}).then(response => {
  console.log(response.data.token);
});

（2）全局配置（如设置 baseURL 和 headers）

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';

（3）拦截器（统一处理请求和响应）

// 请求拦截器（添加 token）
axios.interceptors.request.use(config => {
  config.headers.Authorization = localStorage.getItem('token');
  return config;
});

// 响应拦截器（统一处理错误）
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      alert('请重新登录！');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

（4）取消请求（防止重复提交，可以配合后端的防重复提交一起学习）

const controller = new AbortController();

axios.get('/api/data', {
  signal: controller.signal
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消');
  }
});

// 取消请求
controller.abort();

GraphQL：理解GraphQL查询语言，使用Apollo Client或Relay进行数据获取。
WebSocket：实现实时通信，使用Socket.IO或原生WebSocket API。

10. 前端部署与CI/CD

静态资源部署：使用Netlify, Vercel, GitHub Pages 等平台。
CI/CD工具：Jenkins, GitLab CI/CD, GitHub Actions。

11. 前端设计模式

组件化：将UI拆分为可复用的组件。
状态管理：使用Redux, Vuex, Context API 等管理应用状态。
单向数据流：理解数据流动的方向，避免双向绑定带来的复杂性。

12. 前端与后端协作

API设计：与后端工程师协作设计RESTful API或GraphQL Schema。
接口文档：使用Swagger或Postman生成API文档。
跨域问题：理解CORS机制，配置后端允许跨域请求。

13. 前端国际化

i18n：使用react-i18next, vue-i18n 等库实现多语言支持。
日期与时间格式化：使用moment.js, date-fns 等库处理日期与时间。

14. 前端与移动端开发

PWA (渐进式Web应用)：将Web应用打包为PWA，实现离线访问、推送通知等功能。
响应式设计：使用media queries和flexbox/grid布局实现跨设备适配。
混合开发：使用React Native, Flutter 等框架开发跨平台移动应用。

15. 前端与数据可视化

图表库：使用Chart.js, D3.js, ECharts 等库实现数据可视化。
地图集成：使用Google Maps API, Leaflet 等库实现地图功能。

16. 前端与用户体验（UX）

可访问性（A11y）：确保Web应用对所有用户（包括残障用户）可用，使用ARIA标签、语义化HTML。
用户界面设计：理解基本的UI设计原则，如对比、对齐、重复、亲密性。

17. 前端与SEO

搜索引擎优化：使用语义化HTML、meta标签、alt属性、sitemap、robots.txt 等优化搜索引擎排名。
性能优化：通过减少加载时间、优化渲染性能提升SEO。

18. 前端与DevOps

容器化：使用Docker容器化前端应用。
持续集成/持续部署（CI/CD）：使用Jenkins, GitLab CI/CD, GitHub Actions 实现自动化部署。

19. 前端与云服务

云存储：使用AWS S3, Google Cloud Storage 存储静态资源。
无服务器架构：使用AWS Lambda, Google Cloud Functions 实现无服务器后端。

20. 前端与新兴技术

WebAssembly (Wasm)：将高性能代码编译为WebAssembly，提升Web应用性能。
Web Components：使用原生Web组件技术构建可复用UI组件。