Web与移动编程

默认只展示每周独有的知识重点；节奏、考核、Tutorial 和避坑信息按需展开。

1. 1

   JavaScript Fundamentals & Functional Concepts

   ### 💻 核心知识点：JavaScript 基础与函数式编程入门 本周开始构建 JavaScript 基础。课程聚焦函数式编程范式（Functional Programming），这与 CSSE1001 中的 OOP 思维有很大不同。 - **核心概念**: JavaScript syntax, let/const/var, arrow functions, first-class functions, higher-order functions (map, filter, reduce), immutability, pure functions, side effects ⏰ **本周节奏**: 难度 ⭐⭐ | 预计投入 8h（Lecture 2h + Practical 2h + 自学 2h + 编程练习 2h） 🎯 **考试关联**: 函数式编程核心概念（pure function、immutability）是考试基础 🧪 **Practical**: 用 map/filter/reduce 处理数组数据，对比 imperative vs functional 写法 📌 **作业关联**: 所有 assignments 都用 JavaScript，本周是基础 ⚠️ **易错点**: var 的 hoisting 和 scope 问题；箭头函数没有自己的 this；忘记 const 对象的属性仍可修改

   JavaScript sy
2. 2

   Closures, Scope & Advanced Functions

   ### 💻 核心知识点：闭包、作用域与高级函数 本周深入 JavaScript 的核心机制：闭包（Closure）和作用域链。这是理解 JS 框架内部工作原理的关键。 - **核心概念**: Lexical scope, closure (函数 + 词法环境), IIFE (Immediately Invoked Function Expression), currying, partial application, function composition, module pattern ⏰ **本周节奏**: 难度 ⭐⭐⭐ | 预计投入 9h（Lecture 2h + Practical 2h + 自学 3h + 编程练习 2h） 🎯 **考试关联**: Closure 的行为分析（给定代码预测输出）是高频考题 🧪 **Practical**: 实现 curry 函数、compose 函数；用 closure 实现 counter 和 memoization 📌 **作业关联**: Assignment 1 通常会用到 closure 和 higher-order functions ⚠️ **易错点**: 循环中的 closure 陷阱（经典 setTimeout + var 问题）；混淆 closure 中变量的引用 vs 值

   Lexical scopeclosure (函数 + 词法环境)IIFE (Immediately I
3. 3

   Promises, Async/Await & Event Loop

   ### ⚡ 核心知识点：异步编程与事件循环 本周学习 JavaScript 异步编程模型。理解 Event Loop 是写好 JS 的关键 — 从 callback hell 到 Promise 到 async/await 的演进。 - **核心概念**: Callback functions, callback hell, Promise (pending/fulfilled/rejected), Promise chaining (.then/.catch/.finally), async/await syntax, Event Loop (call stack, task queue, microtask queue), fetch API ⏰ **本周节奏**: 难度 ⭐⭐⭐⭐ | 预计投入 10h（Lecture 2h + Practical 2h + 自学 4h + 编程练习 2h）🔥 难度跳升 🎯 **考试关联**: Event Loop 的执行顺序分析（给定代码预测 console.log 顺序）是经典考题 🧪 **Practical**: 用 fetch + async/await 调用 REST API，处理成功/错误情况；分析 Event Loop 执行顺序 📌 **作业关联**: 后续项目中的 API 调用都需要异步编程 ⚠️ **易错点**: async 函数返回 Promise（不是直接值）；忘记 await 导致拿到 Promise 对象而非数据；Promise.all 中一个 reject 全部失败

   Callback fu
4. 4

   DOM Manipulation & Browser Events

   ### 🌐 核心知识点：DOM 操作与浏览器事件 本周学习 JavaScript 与浏览器交互的核心机制 — DOM API 和事件处理。这是前端开发的基础。 - **核心概念**: Document Object Model (DOM tree), querySelector/querySelectorAll, createElement/appendChild, event listeners (addEventListener), event bubbling/capturing, event delegation, DOM diffing concept ⏰ **本周节奏**: 难度 ⭐⭐⭐ | 预计投入 9h（Lecture 2h + Practical 2h + 自学 3h + 编程练习 2h） 🎯 **考试关联**: Event bubbling/capturing 的执行顺序和 DOM 操作方法是常考内容 🧪 **Practical**: 用原生 JS 实现一个交互式 Todo List（CRUD + event delegation） 📌 **作业关联**: 理解 DOM 操作后才能理解 React 的 Virtual DOM 优化 ⚠️ **易错点**: innerHTML 赋值会清除所有子元素的事件监听器；频繁 DOM 操作导致性能问题（reflow/repaint）

   Docume
5. 5

   React Fundamentals: Components & JSX

   ### ⚛️ 核心知识点：React 基础 — 组件与 JSX 本周开始学习 React — 目前最流行的 UI 框架。从原生 DOM 操作过渡到声明式 UI，理解组件化思维。 - **核心概念**: React components (function components), JSX syntax, props, component composition, React.createElement under the hood, Create React App / Vite setup, conditional rendering ⏰ **本周节奏**: 难度 ⭐⭐⭐ | 预计投入 9h（Lecture 2h + Practical 2h + 自学 3h + React 项目搭建 2h） 🎯 **考试关联**: JSX 转换为 JavaScript 的过程、props 传递机制是考试重点 🧪 **Practical**: 用 React 重构之前的 Todo List，体会声明式 vs 命令式的区别 📌 **作业关联**: Project/Assignment 通常要求用 React 构建完整应用 ⚠️ **易错点**: JSX 不是 HTML — className 而非 class，htmlFor 而非 for；忘记 key prop 导致列表渲染 bug

   React compo
6. 6

   React State Management: useState & useEffect

   ### ⚛️ 核心知识点：React 状态管理 本周学习 React Hooks — 现代 React 的核心机制。useState 管理组件内部状态，useEffect 处理副作用。 - **核心概念**: useState hook (state, setState, functional update), useEffect hook (dependency array, cleanup function), lifting state up, controlled components (forms), React rendering cycle ⏰ **本周节奏**: 难度 ⭐⭐⭐⭐ | 预计投入 10h（Lecture 2h + Practical 2h + 自学 4h + 项目开发 2h）🔥 核心周 🎯 **考试关联**: useEffect 的 dependency array 行为和 re-render 触发条件是高频考点 🧪 **Practical**: 实现带搜索/过滤功能的列表应用，练习 state 管理和 controlled input 📌 **作业关联**: 项目中的所有交互功能都依赖 state 管理 ⚠️ **易错点**: useEffect 空依赖数组 [] 只执行一次（mount）；忘记 cleanup 函数导致内存泄漏；直接修改 state 对象（mutation）而非创建新对象

   useState hook (statesetStatefu
7. 7

   React Router & Single Page Applications

   ### 🔀 核心知识点：路由与单页面应用 本周学习 React Router 实现 SPA（Single Page Application）。理解客户端路由 vs 服务端路由的区别。 - **核心概念**: React Router (BrowserRouter, Route, Link, useNavigate, useParams), SPA vs MPA, client-side routing, nested routes, URL parameters, programmatic navigation ⏰ **本周节奏**: 难度 ⭐⭐⭐ | 预计投入 9h（Lecture 2h + Practical 2h + 自学 3h + 项目路由搭建 2h） 🎯 **考试关联**: SPA 的工作原理和 React Router 的使用模式可能考概念题 🧪 **Practical**: 为项目添加多页面路由（首页、详情页、关于页），实现 URL 参数传递 📌 **作业关联**: 项目需要多页面结构，本周建立路由框架 ⚠️ **易错点**: 刷新 SPA 页面得到 404（需要服务端配置 fallback）；useNavigate 在非 Router 组件内调用报错

   React Router (BrowserRouterRouteLi
8. 8

   API Integration & Data Fetching

   ### 🔌 核心知识点：API 集成与数据获取 本周学习 React 应用如何与后端 API 交互。结合之前的 async/await 知识，在 React 中正确地获取和管理远程数据。 - **核心概念**: fetch/axios in React, useEffect for data fetching, loading/error states, REST API patterns (GET/POST/PUT/DELETE), JSON handling, CORS basics, custom hooks (useFetch) ⏰ **本周节奏**: 难度 ⭐⭐⭐⭐ | 预计投入 10h（Lecture 2h + Practical 2h + 自学 3h + API 集成 3h） 🎯 **考试关联**: React 中 data fetching 的正确模式（useEffect + 清理）是考试重点 🧪 **Practical**: 对接公开 REST API（如天气/电影数据库），实现搜索、列表展示、详情查看 📌 **作业关联**: 项目中的动态数据必须通过 API 获取 ⚠️ **易错点**: useEffect 中 async 函数不能直接作为 effect（需要内部包一层）；竞态条件（rapid navigation 导致过时的 fetch 结果覆盖最新数据）

   fetch/axios i
9. 9

   React Native & Cross-Platform Development

   ### 📱 核心知识点：React Native 跨平台开发 本周进入 React Native — 用 JavaScript 构建原生移动应用。体会 "Learn once, write anywhere" 的哲学。 - **核心概念**: React Native vs React (View/Text/ScrollView vs div/span), StyleSheet API, Expo framework, platform-specific code, React Native navigation (Stack/Tab), mobile UI patterns ⏰ **本周节奏**: 难度 ⭐⭐⭐⭐ | 预计投入 10h（Lecture 2h + Practical 2h + 自学 3h + RN 项目搭建 3h）🔥 新工具链 🎯 **考试关联**: React vs React Native 的差异对比是常考概念题 🧪 **Practical**: 用 Expo 搭建 React Native 项目，实现基本的列表页面 + 详情页面导航 📌 **作业关联**: 后续项目可能要求 web + mobile 双端实现 ⚠️ **易错点**: RN 没有 CSS — 用 StyleSheet.create；Flexbox 默认方向是 column（不是 row）；Expo 和 bare RN 的差异

   React Native vs React (View/Text/ScrollView vs div/spa
10. 10

    Cross-Platform Architecture & State Sharing

    ### 🔄 核心知识点：跨平台架构与状态共享 本周深入跨平台开发的架构挑战：如何在 Web 和 Mobile 间共享代码和状态。 - **核心概念**: Shared business logic, platform-specific UI, React Context API for global state, useReducer pattern, monorepo structure, code sharing strategies between web and native ⏰ **本周节奏**: 难度 ⭐⭐⭐⭐ | 预计投入 10h（Lecture 2h + Practical 2h + 自学 3h + 项目开发 3h） 🎯 **考试关联**: Context API 的使用模式和跨平台架构选择是可能的考点 🧪 **Practical**: 用 Context API + useReducer 实现全局状态管理（如 auth state, theme） 📌 **作业关联**: 项目的状态管理架构在本周确定 ⚠️ **易错点**: Context 导致不必要的 re-render（所有 consumer 都会重渲染）；useReducer 的 dispatch 是异步的

    Shared busi
11. 11

    Testing & Quality Assurance

    ### 🧪 核心知识点：测试与质量保障 本周学习前端测试策略。写测试不是额外负担，而是保证代码质量和支持重构的关键。 - **核心概念**: Testing pyramid (unit/integration/e2e), Jest testing framework, React Testing Library, component testing (render, fireEvent, screen), snapshot testing, mocking API calls, test coverage ⏰ **本周节奏**: 难度 ⭐⭐⭐ | 预计投入 9h（Lecture 2h + Practical 2h + 自学 3h + 为项目写测试 2h） 🎯 **考试关联**: 测试策略选择和 Testing Library 的 query 方法是可能考点 🧪 **Practical**: 为之前的 React 组件写单元测试；mock API 调用测试 data fetching 逻辑 📌 **作业关联**: 最终项目可能要求包含测试覆盖率 ⚠️ **易错点**: snapshot 测试太脆弱（一点 UI 变动就 break）；测试 implementation details 而非 behavior 导致维护成本高

    Testi
12. 12

    Project Polish, Deployment & Review

    ### 🚀 核心知识点：项目优化、部署与课程回顾 最后一周完成项目的优化、部署和最终提交。回顾 JavaScript 函数式编程到 React/React Native 跨平台开发的完整旅程。 - **核心概念**: Performance optimization (React.memo, useMemo, useCallback), deployment (Vercel/Netlify for web, Expo for mobile), code review best practices, accessibility (a11y), responsive design ⏰ **本周节奏**: 难度 ⭐⭐⭐⭐ | 预计投入 12h（Lecture 2h + Practical 2h + 项目最终提交 8h）🔥 Final Project Due 🎯 **考试关联**: 性能优化 hooks 的使用场景和 deployment 流程可能出考题 🧪 **Practical**: 项目 demo 展示 + code review session 📌 **作业关联**: 最终项目提交截止 — 确保 web + mobile 都能正常运行 ⚠️ **易错点**: 过早优化（先让功能正确，再考虑性能）；部署前忘记环境变量配置；mobile 端不同屏幕尺寸适配

    Performa