01. 前端学习路径和职业发展

// React核心概念示例
import React, { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    fetchUser(userId)
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);
 
  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;
 
  return (
    <div className="user-profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

<!-- Vue 3 Composition API示例 -->
<template>
  <div class="user-profile">
    <div v-if="loading">Loading...</div>
    <div v-else-if="!user">User not found</div>
    <div v-else>
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
 
const props = defineProps(['userId'])
const user = ref(null)
const loading = ref(true)
 
onMounted(async () => {
  try {
    user.value = await fetchUser(props.userId)
  } finally {
    loading.value = false
  }
})
</script>

// .eslintrc.json 配置示例
{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

// 学习进度示例
const reactLearningPath = [
  {
    week: '1-2',
    topics: ['JSX语法', '组件基础', 'Props和State'],
    project: '简单的计数器应用'
  },
  {
    week: '3-4', 
    topics: ['Hooks深入', '生命周期', '事件处理'],
    project: 'Todo List应用'
  },
  {
    week: '5-6',
    topics: ['状态管理', 'React Router', 'API集成'],
    project: '博客系统前端'
  },
  {
    week: '7-8',
    topics: ['性能优化', '测试', '部署'],
    project: '完整的电商应用'
  }
];

// 1. 实现防抖函数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}
 
// 2. 实现深拷贝
function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (typeof obj !== "object") return obj;
  if (hash.get(obj)) return hash.get(obj);
 
  let cloneObj = new obj.constructor();
  hash.set(obj, cloneObj);
 
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}
 
// 3. 实现Promise
class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
 
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    };
 
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
 
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }
 
  then(onFulfilled, onRejected) {
    // 实现链式调用...
  }
}