第27章 前端学习路线图与职业规划

毕业不是终点，而是起点 ｜ 课型：理论课 ｜ 建议课时：2节

🏠 返回总目录 / 第27章

🎯 学习目标

知识目标

  • 了解前端岗位图谱与技能要求
  • 掌握本书之后12个月的学习路线
  • 了解证书与竞赛的进阶路径

能力目标

  • 能制定个人12个月学习计划
  • 能分析目标岗位的技能差距
  • 能写出给一年后自己的信

德育目标

  • 树立终身学习的职业信念
  • 规划人生、脚踏实地的成长观

教学重点

  • 岗位图谱：切图仔→前端工程师→全栈
  • 12个月四阶段路线
  • 竞赛与证书路径

教学难点

  • 学习路线中的取舍与聚焦
  • 长期目标的分解与执行

💻 实例演示1个实例 · 可在线运行

▶ 我的学习路线规划器

勾选已掌握技能，生成个性化的12个月学习建议。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，诚实勾选已掌握的技能
  2. 观察进度条变化
  3. 点击生成学习建议
  4. 把建议抄入个人学习计划
  5. 三个月后重新盘点对比

效果观察点

  • checkbox状态驱动进度条
  • filter找出未掌握项
  • 建议按薄弱项动态生成
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>学习路线规划器</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; background: #f2f6f8; margin: 0;
         display: flex; justify-content: center; padding: 30px 16px; }
  .panel { background: #fff; border-radius: 14px; padding: 26px; width: 520px;
           box-shadow: 0 6px 24px rgba(18,58,82,.1); }
  h1 { font-size: 20px; color: #123a52; }
  .skill { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e0e8ec; }
  .skill input { width: 18px; height: 18px; accent-color: #0f8c7f; }
  button { margin-top: 18px; width: 100%; padding: 12px; border: none; border-radius: 8px;
           background: #0f8c7f; color: #fff; font-size: 16px; cursor: pointer; }
  #plan { margin-top: 18px; line-height: 1.9; font-size: 15px; }
  #bar { height: 10px; background: #e0e8ec; border-radius: 5px; margin-top: 14px; overflow: hidden; }
  #fill { height: 100%; width: 0; background: linear-gradient(90deg, #0f8c7f, #38d6c4); transition: width .6s; }
</style>
</head>
<body>
  <div class="panel">
    <h1>📍 我的前端技能盘点</h1>
    <div id="skills"></div>
    <div id="bar"><div id="fill"></div></div>
    <button onclick="makePlan()">生成我的学习建议</button>
    <div id="plan"></div>
  </div>
<script>
  const SKILLS = ['HTML语义化', 'CSS布局(Flex/Grid)', '响应式设计', 'CSS动画与3D',
                  'JavaScript核心', 'DOM与Canvas', '表单与Web API', '性能优化',
                  'Git与模块化', 'Vue 3基础'];
  const box = document.getElementById('skills');
  SKILLS.forEach((s, i) => {
    const d = document.createElement('label'); d.className = 'skill';
    d.innerHTML = '<input type="checkbox" data-i="' + i + '"> ' + s;
    box.appendChild(d);
  });
  box.addEventListener('change', () => {
    const n = box.querySelectorAll('input:checked').length;
    document.getElementById('fill').style.width = (n / SKILLS.length * 100) + '%';
  });
  function makePlan() {
    const weak = SKILLS.filter((s, i) => !box.querySelector('input[data-i="' + i + '"]:checked'));
    const plan = document.getElementById('plan');
    if (!weak.length) { plan.innerHTML = '🎉 基础已全部通关！建议直接进入：<br>① Vue 3深入与组件库 ② TypeScript ③ 完整项目实战 ④ 备战省赛'; return; }
    plan.innerHTML = '📅 你的补强路线（优先攻克薄弱项）：<br>' +
      weak.map((s, i) => '<b>第' + (i + 1) + '月</b>：' + s).join('<br>') +
      '<br><br>💡 每月一个小项目，全部收入作品集！';
  }
</script>
</body>
</html>

📋 实习任务书

任务目标：制定个人12个月学习路线与职业规划

任务内容与评分
任务1：完成技能盘点并生成建议（15分）
任务2：分析三份真实JD的技能要求（20分）
任务3：制定SMART的12个月计划（30分）
任务4：写给一年后自己的信（20分）
任务5：找到你的学习共同体（社群/伙伴）（15分）

自我评价

📚 课后作业与预习