前端学习路线

基础阶段

1. HTML/CSS

HTML5 语义化标签
CSS 盒模型
浮动和定位
Flexbox 布局
Grid 布局
响应式设计
CSS 动画

2. JavaScript

基础语法
DOM 操作
事件处理
异步编程
ES6+ 新特性
面向对象编程
函数式编程

3. 开发工具

Git 版本控制
npm/yarn 包管理
Webpack 构建工具
Babel 转译器
ESLint 代码检查
Prettier 代码格式化

进阶阶段

1. 前端框架

Vue.js
- 组件开发
- 状态管理（Vuex）
- 路由管理（Vue Router）
- 服务端渲染（SSR）
- 性能优化
React
- 组件开发
- Hooks
- 状态管理（Redux）
- 路由管理（React Router）
- 服务端渲染（Next.js）

2. 前端工程化

模块化开发
组件化开发
自动化构建
持续集成/部署
性能优化
安全防护

3. 前端测试

单元测试（Jest）
端到端测试（Cypress）
测试驱动开发（TDD）
持续集成测试

高级阶段

1. 性能优化

加载优化
- 资源压缩
- 懒加载
- 预加载
- 缓存策略
渲染优化
- 重绘和重排
- 虚拟列表
- 骨架屏
- 服务端渲染
打包优化
- 代码分割
- Tree Shaking
- 按需加载
- 预编译

2. 前端安全

XSS 防护
CSRF 防护
点击劫持
内容安全策略
安全编码规范

3. 新技术探索

TypeScript
WebAssembly
PWA
Web Components
微前端

实践项目

1. 个人博客系统

javascript

// 使用 Vue.js 和 Node.js 实现
const express = require('express');
const app = express();
const mongoose = require('mongoose');

// 连接数据库
mongoose.connect('mongodb://localhost/blog', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 定义文章模型
const Article = mongoose.model('Article', {
  title: String,
  content: String,
  createdAt: { type: Date, default: Date.now }
});

// API 路由
app.get('/api/articles', async (req, res) => {
  const articles = await Article.find().sort({ createdAt: -1 });
  res.json(articles);
});

app.post('/api/articles', async (req, res) => {
  const article = new Article(req.body);
  await article.save();
  res.json(article);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. 在线商城

javascript

// 使用 React 和 Redux 实现
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addToCart, removeFromCart } from './actions';

const ProductList = () => {
  const products = useSelector(state => state.products);
  const dispatch = useDispatch();

  return (
    <div className="product-list">
      {products.map(product => (
        <div key={product.id} className="product">
          <h3>{product.name}</h3>
          <p>{product.price}</p>
          <button onClick={() => dispatch(addToCart(product))}>
            加入购物车
          </button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

3. 实时聊天应用

javascript

// 使用 WebSocket 和 Vue.js 实现
const ws = new WebSocket('ws://localhost:8080');

const app = new Vue({
  el: '#app',
  data: {
    messages: [],
    newMessage: ''
  },
  methods: {
    sendMessage() {
      ws.send(JSON.stringify({
        type: 'message',
        content: this.newMessage
      }));
      this.newMessage = '';
    }
  },
  mounted() {
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'message') {
        this.messages.push(data);
      }
    };
  }
});

4. 任务管理系统

javascript

// 使用 Vue 3 和 TypeScript 实现
import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex';

interface Task {
  id: number;
  title: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
}

export default defineComponent({
  name: 'TaskManager',
  setup() {
    const store = useStore();
    const newTask = ref('');
    const priority = ref<'low' | 'medium' | 'high'>('medium');

    const addTask = () => {
      if (newTask.value.trim()) {
        store.dispatch('addTask', {
          id: Date.now(),
          title: newTask.value,
          completed: false,
          priority: priority.value
        });
        newTask.value = '';
      }
    };

    const toggleTask = (task: Task) => {
      store.dispatch('toggleTask', task.id);
    };

    return {
      newTask,
      priority,
      addTask,
      toggleTask,
      tasks: store.state.tasks
    };
  }
});

5. 数据可视化仪表盘

javascript

// 使用 React 和 ECharts 实现
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const Dashboard = ({ data }) => {
  const chartRef = useRef(null);
  
  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    
    const option = {
      title: {
        text: '销售数据统计'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['销售额', '订单量']
      },
      xAxis: {
        type: 'category',
        data: data.map(item => item.date)
      },
      yAxis: [
        {
          type: 'value',
          name: '销售额'
        },
        {
          type: 'value',
          name: '订单量'
        }
      ],
      series: [
        {
          name: '销售额',
          type: 'line',
          data: data.map(item => item.sales)
        },
        {
          name: '订单量',
          type: 'bar',
          yAxisIndex: 1,
          data: data.map(item => item.orders)
        }
      ]
    };
    
    chart.setOption(option);
    
    return () => {
      chart.dispose();
    };
  }, [data]);
  
  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default Dashboard;

6. 文件上传组件

javascript

// 使用 Vue 3 和 Axios 实现
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'FileUploader',
  setup() {
    const fileInput = ref<HTMLInputElement | null>(null);
    const uploadProgress = ref(0);
    const uploadStatus = ref<'idle' | 'uploading' | 'success' | 'error'>('idle');

    const handleFileSelect = (event: Event) => {
      const files = (event.target as HTMLInputElement).files;
      if (files && files.length > 0) {
        uploadFile(files[0]);
      }
    };

    const uploadFile = async (file: File) => {
      const formData = new FormData();
      formData.append('file', file);

      try {
        uploadStatus.value = 'uploading';
        const response = await axios.post('/api/upload', formData, {
          onUploadProgress: (progressEvent) => {
            uploadProgress.value = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
          }
        });
        uploadStatus.value = 'success';
        return response.data;
      } catch (error) {
        uploadStatus.value = 'error';
        throw error;
      }
    };

    return {
      fileInput,
      uploadProgress,
      uploadStatus,
      handleFileSelect
    };
  }
});

学习资源

在线教程

MDN Web Docs
freeCodeCamp
Vue.js 官方文档
React 官方文档
TypeScript 官方文档

视频课程

慕课网
极客时间
B站技术区
YouTube 技术频道

技术博客

掘金
知乎
博客园
CSDN

开源项目

Vue.js
React
Next.js
Nuxt.js
Element UI
Ant Design

工具推荐

VS Code
Chrome DevTools
Postman
Figma
GitHub

面试准备

1. 基础知识

HTML/CSS 面试题
JavaScript 面试题
浏览器原理
网络协议
性能优化

2. 框架相关

Vue.js 面试题
React 面试题
状态管理
路由管理
服务端渲染

3. 项目经验

项目介绍
技术选型
难点突破
性能优化
团队协作

4. 算法题

数组操作
字符串处理
树形结构
动态规划
设计模式

详细学习资源

常见面试题与解答

1. HTML/CSS

Q: 什么是盒模型？标准盒模型和IE盒模型有什么区别？

A: 盒模型是CSS布局的基础概念，它描述了元素在页面中占据的空间。标准盒模型（content-box）的宽度只包含内容区域，而IE盒模型（border-box）的宽度包含内容、内边距和边框。可以通过box-sizing属性来切换。

Q: 如何实现垂直居中？

A: 有多种方法：

Flexbox:

css

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Grid:

css

.container {
  display: grid;
  place-items: center;
}

绝对定位:

css

.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. JavaScript

Q: 什么是闭包？有什么应用场景？

A: 闭包是指函数可以访问其词法作用域之外的变量。应用场景包括：

数据私有化
函数柯里化
模块化开发
防抖和节流

Q: 如何实现深拷贝？

A: 有多种方法：

JSON.parse(JSON.stringify(obj))
递归实现：

javascript

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

3. Vue.js

Q: Vue 的生命周期钩子有哪些？

A: Vue 2.x 的生命周期钩子包括：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Vue 3.x 新增了：

onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted

Q: Vue 的响应式原理是什么？

A: Vue 2.x 使用 Object.defineProperty 实现响应式，Vue 3.x 使用 Proxy 实现。基本原理是：

数据劫持：通过 getter/setter 或 Proxy 拦截数据的访问和修改
依赖收集：在 getter 中收集依赖（Watcher）
派发更新：在 setter 中通知依赖更新

4. React

Q: React Hooks 的优势是什么？

A: Hooks 的优势包括：

更好的代码复用
更清晰的代码组织
更好的类型支持
更容易测试
减少代码量

Q: 什么是虚拟 DOM？为什么需要它？

A: 虚拟 DOM 是真实 DOM 的轻量级 JavaScript 对象表示。它的优势包括：

提高性能：减少直接操作 DOM 的次数
跨平台：可以渲染到不同平台
更好的开发体验：声明式编程
更好的可维护性：状态和视图分离

5. 性能优化

Q: 如何优化前端性能？

A: 可以从以下几个方面优化：

资源优化：
- 压缩代码和资源
- 使用 CDN
- 图片优化
- 按需加载
渲染优化：
- 减少重绘和重排
- 使用虚拟列表
- 骨架屏
缓存优化：
- 合理使用浏览器缓存
- 使用 Service Worker
- 数据缓存
代码优化：
- 减少 DOM 操作
- 使用防抖和节流
- 优化算法复杂度

前端学习路线 ​

基础阶段 ​

1. HTML/CSS ​

2. JavaScript ​

3. 开发工具 ​

进阶阶段 ​

1. 前端框架 ​

2. 前端工程化 ​

3. 前端测试 ​

高级阶段 ​

1. 性能优化 ​

2. 前端安全 ​

3. 新技术探索 ​

实践项目 ​

1. 个人博客系统 ​

2. 在线商城 ​

3. 实时聊天应用 ​

4. 任务管理系统 ​

5. 数据可视化仪表盘 ​

6. 文件上传组件 ​

学习资源 ​

在线教程 ​

视频课程 ​

技术博客 ​

开源项目 ​

工具推荐 ​

面试准备 ​

1. 基础知识 ​

2. 框架相关 ​

3. 项目经验 ​

4. 算法题 ​

详细学习资源 ​

1. HTML/CSS ​

2. JavaScript ​

3. Vue.js ​

4. React ​

5. 前端工程化 ​

常见面试题与解答 ​

1. HTML/CSS ​

Q: 什么是盒模型？标准盒模型和IE盒模型有什么区别？ ​

Q: 如何实现垂直居中？ ​

2. JavaScript ​

Q: 什么是闭包？有什么应用场景？ ​

Q: 如何实现深拷贝？ ​

3. Vue.js ​

Q: Vue 的生命周期钩子有哪些？ ​

Q: Vue 的响应式原理是什么？ ​

4. React ​

Q: React Hooks 的优势是什么？ ​

Q: 什么是虚拟 DOM？为什么需要它？ ​

5. 性能优化 ​

Q: 如何优化前端性能？ ​

前端学习路线

基础阶段

1. HTML/CSS

2. JavaScript

3. 开发工具

进阶阶段

1. 前端框架

2. 前端工程化

3. 前端测试

高级阶段

1. 性能优化

2. 前端安全

3. 新技术探索

实践项目

1. 个人博客系统

2. 在线商城

3. 实时聊天应用

4. 任务管理系统

5. 数据可视化仪表盘

6. 文件上传组件

学习资源

在线教程

视频课程

技术博客

开源项目

工具推荐

面试准备

1. 基础知识

2. 框架相关

3. 项目经验

4. 算法题

详细学习资源

1. HTML/CSS

2. JavaScript

3. Vue.js

4. React

5. 前端工程化

常见面试题与解答

1. HTML/CSS

Q: 什么是盒模型？标准盒模型和IE盒模型有什么区别？

Q: 如何实现垂直居中？

2. JavaScript

Q: 什么是闭包？有什么应用场景？

Q: 如何实现深拷贝？

3. Vue.js

Q: Vue 的生命周期钩子有哪些？

Q: Vue 的响应式原理是什么？

4. React

Q: React Hooks 的优势是什么？

Q: 什么是虚拟 DOM？为什么需要它？

5. 性能优化

Q: 如何优化前端性能？