coderwhy 前端体系课学习笔记
JaimeZeng 2023.01.31
本文为 coderwhy 线上前端体系课 学习笔记。
笔记能帮助自己更好地理解课程内容及把握主要知识点。它们可以帮助自己更加清晰地思考，从而更容易掌握知识内容。写笔记还可以帮助你保持聚焦，并且可以帮助你更好地回顾学到的知识，便于以后复习。
| 上午 | 下午 | 阶段 | 笔记 | 代码 |
|---|---|---|---|---|
| day01_软件开发 - 发展路线 - 软件安装 - 网页组成 | day01_Typora-浏览器内核-VSCode 插件-HTML 元素 | HTML+CSS1 | day01 (zxj.guru) | web-note/Code/day01 (github.com) |
| day02_HTML 常见元素 - 文档声明 - 标题-meta 配置 | day02_锚点链接-iframe-全局属性 - 字符实体-URL | HTML+CSS2 | day02 (zxj.guru) | web-note/Code/day02 (github.com) |
| day03_元素语义化-SEO-字符编码-CSS 编写方式 | day03_CSS 属性 - 颜色表示-Chrome 调试 - 浏览器渲染 | HTML+CSS3 | day03 (zxj.guru) | web-note/Code/day03 (github.com) |
| day04_文本属性 - 字体属性 | day04_line-height-CSS 常见选择器-CSS 伪类 | HTML+CSS4 | day04 (zxj.guru) | web-note/Code/day04 (github.com) |
| day05_伪元素-CSS 的继承和层叠 - 元素特性 | day05_隐藏元素 - 文本溢出 - 盒子模型的四部分 | HTML+CSS5 | day05 (zxj.guru) | web-note/Code/day05 (github.com) |
| day06_margin 传递和折叠 - 居中 - 阴影 - 盒子尺寸计算 | day06_盒子模型练习 - 设置背景、附加和背景图片 | HTML+CSS6 | day06 (zxj.guru) | web-note/Code/day06 (github.com) |
| day07_列表元素 - 表格元素 - 案例练习 | day07_表格合并-form 以及常见表单元素-Emmet 语法 | HTML+CSS7 | day07 (zxj.guru) | web-note/Code/day07 (github.com) |
| day08_结构伪类-border 制图 - 网络字体 - 字体图标 | day08_精灵图 - 光标显示 - 相对定位 - 固定定位 | HTML+CSS8 | Day08 (zxj.guru) | web-note/Code/day08 (github.com) |
| day09_绝对定位 - 绝对定位特点 - 绝对定位练习 | day09_粘性定位-z-index-浮动 - 浮动案例练习 | HTML+CSS9 | Day09 (zxj.guru) | web-note/Code/day09 (github.com) |
| day10-浮动案例练习 - 布局方案总结 | day10_flex 布局-flex container 和 item 属性 | HTML+CSS10 | ||
| 赠送课 - 仿小米和考拉布局 | HTML+CSS | |||
| 赠送课 - 网页云音乐一（导航栏） | HTML+CSS | |||
| 赠送课 - 网页云音乐二（轮播图和内容布局） | HTML+CSS | |||
| 赠送课 - 网页云音乐三（右侧 header 和入驻歌手） | HTML+CSS | |||
| 赠送课 - 网页云音乐四（推荐列表和新碟上架） | HTML+CSS | |||
| 赠送课 - 网页云音乐五（排行榜 - 所有内容组合） | HTML+CSS | |||
| day11_形变 - 水平和垂直居中 - 形变函数 - 形变原点 | day11_过度效果-Animation 动画 - 行盒概念 | HTML+CSS11 | ||
| day12_vertical-align-内容回顾 - 王者荣耀开发规范 | day12_王者荣耀项目实战 (一)-顶部 - 头部 - 内容布局 | HTML+CSS12 | ||
| day13_王者荣耀项目实战（二）- 轮播图 - 新闻模块 | day13_王者荣耀项目实战（二）- 选项卡 - 视频列表 | HTML+CSS13 | ||
| day14_王者荣耀项目实战（三）- 赛事新闻 - 英雄列表 | day14_王者荣耀项目实战（三）- 头部下拉 - 模块合并 | HTML+CSS14 | ||
| day15_HTML5 新增语义化 - 媒体元素 - 全局属性 | day15_CSS 函数 - 浏览器前缀-BFC-媒体查询 | HTML+CSS15 | ||
| day16_绝对和相对单位 (rem、vw)-CSS 像素 | day16_Less 语法-Sass 和 Scss 介绍 - 移动端视口 | HTML+CSS16 | ||
| day17_移动端适配各个方案详解-grid 布局介绍 | day17_弘源海购移动端项目实战 | HTML+CSS17 | ||
| 上午阶段测试考试（下午讲试卷答案） | 上午阶段测试考试（下午讲试卷答案） | 阶段测试 | ||
| day18_编程语言-JavaScript(起源发展 - 应用 - 编写方式) | day18_JavaScript 交互 - 调试-VSCode 插件 - 变量 | JS 基础 1 | ||
| day19_JavaScript 数据类型 - 数据类型的转换 | day19_运算符 (算数 - 赋值 - 自增)-if 分支语句 | JS 基础 2 | ||
| day20_等号比较-switch 语句 - 逻辑运行符 (逻辑或逻辑与) | day20_循环语句 (while-do-while-for)-循环嵌套 | JS 基础 3 | ||
| day21_认识函数 - 函数 (声明 - 调用 - 返回值)-argument | da21_递归 - 作用域 - 变量查找 - 函数表达式 - 回调等等 | JS 基础 4 | ||
| day22_立即执行函数 - 代码规范-Debug 调试 | day22_对象的 (类型 - 方括号 - 遍历)-栈和堆-this 指向 | JS 基础 5 | ||
| day23_创建对象 - 工厂函数 - 构造函数-window-类方法 | day23_原始类型 - 包装类型 - 内置对象 - 数组基本使用 | JS 基础 6 | ||
| day24_数组的 (遍历 - 查找 - 高阶函数等)-认识 Date | day24_Date 表示的标准 - 时间戳 - 认识 DOM-类的继承 | JS 基础 7 | ||
| day25_DOM 架构-document-元素导航 - 获取元素对象 | day25_Node 属性 - 元素 (全局属性-Attr-Prop-dataset) | JS 基础 8 | ||
| day26_DOM 操作 (增删克隆)-滚动和位置 - 倒计时案例 | day26_事件处理方案 - 冒泡捕获 - 事件对象 - 事件委托等 | JS 基础 9 | ||
| day27_(鼠标 - 键盘 - 文档 - 动画) 事件 - 定时器与案例 | day27_DOM 案例 (侧边栏 - 选项卡切换 - 王者轮播图等) | JS 基础 10 | ||
| day28_侧边栏 - 王者荣耀轮播图 - 书籍购物车案例 | day28_认识 BOM-location-history-navigator-JSON | JS 基础 11 | ||
| day29_循环中的变量 - 华为商城导航栏 - 商品列表 | day29_华为商城 - 服务优惠 - 手写轮播图 - 自动轮播 | JS 基础 12 | ||
| day30_轮播图指示器 - 无线轮播 - 商品列表排序 | day30_this 绑定规则 - 优先级别 - 箭头函数绑定 this | JS 高级语法 1 | ||
| day31_this 面试题 - 输入 URL 加载过程 - 浏览器原理 | day31_浏览器回流和重绘 - 合成图层-V8 引擎原理 | JS 高级语法 2 | ||
| day32_全局代码执行 - 函数代码执行 - 作用域查找 | day32_作用域面试题 - 闭包 - 内存管理-GC-内存泄漏 | JS 高级语法 3 | ||
| day33_函数对象属性 - 剩余参数 - 纯函数 - 柯里化函数 | day33_自动柯里化 - 组合函数 - 严格模式 - 对象增强 | JS 高级语法 4 | ||
| day34_对象中原型 - 隐式原型-new 对象 - 继承 | day34_原型链 - 借构造函数 - 组合 - 寄生 - 寄生组合继承 | JS 高级语法 5 | ||
| day35_原型继承关系图 - 类方法-class 类 - 静态方法 | day35_extend 继承-super-混入 mixins-babel 工具 | JS 高级语法 6 | ||
| day36_多态 - 对象增强 - 手写 apply-call-bind | day36_ECMA 文档-let-块级作用域 - 暂时性死区 | JS 高级语法 7 | ||
| day37_模板字符串 - 函数增强 - 展开语法-Symbol | day37_Set-Map-WeakSet-WeakMap-ES8-ES11 | JS 高级语法 8 | ||
| day38_ES12-ES13-Proxy 监听对象和 Proxy 捕获器 | day38_Reflect 和 Object 区别-Promise 的使用 | JS 高级语法 9 | ||
| day39_Promise 的 then-catch 和 all 等类方法 - 迭代器 | day39_迭代器 - 可迭代对象 - 生成器 - 生成器函数 | JS 高级语法 10 | ||
| day40_异步处理 - 异步函数 - 进程 - 线程 | day40_JS 单线程 - 宏任务 - 微任务 - 面试题 - 异常处理 | JS 高级语法 11 | ||
| day41_Storage 数据存储 - 正则表达式基本使用 | day41_正则表达式语法 - 邂逅手写工具函数 | JS 高级语法 12 | ||
| day42_防抖应用场景 - 手写防抖函数 - 认识节流 | day42_手写节流函数 - 浅拷贝 - 深拷贝 - 事件总线 | JS 高级语法 13 | ||
| day43_邂逅网络请求-HTTP 协议 - 请求头和响应头 | day43_XHR 网络请求-Ajax 请求的封装-fetch 函数 | JS 高级语法 14 | ||
| day44_邂逅 jQuery-jQuery 的安装-CDN 工作原理 | day44_jQuery 函数与对象-jQuery 架构设计 - 属性操作 | 框架实战 1 | ||
| day45_jQuery 属性-DOM-事件的操作 | day45_jQuery 的事件 - 动画 - 工具函数 - 认识接口文档 | 框架实战 2 | ||
| day46_jQuery 的 Ajax-插件的开发 - 贝壳找房项目 | day46_备课找房项目 - 热门推荐 - 搜索房源-Lodash | 框架实战 3 | ||
| day47_Dayjs-Bootstrap 安装 - 容器 - 网格系统 | day48_网格系统原理 - 响应式工具 - 弘源智能生活项目 | 框架实战 4 | ||
| day48_前端工程概述-Node 安装和使用-nvm 和 n | day49_Node-REPL-全局对象-CommonJS-Node 模块原理 | 前端工程化 1 | ||
| day49_ESModule 模块化-import 和 meta-模块化原理 | day49_包管理工具 - 项目配置文件-npm 安装原理-yarn | 前端工程化 2 | ||
| day50_npx 使用-npm 发包-pnpm 介绍 - 硬链接和软连接 | day50_pnpm 原理-pnpm 常用命令-webpack 初体验 | 前端工程化 3 | ||
| day51_webpack 依赖图-loader 以及各种资源的打包 | day51_webpack 路径解析-plugin-本地服务 - 热模块 | 前端工程化 4 | ||
| day52_webpack 环境区分-Git 版本控制 - 安装 - 配置 | day52_Git 常用命令 - 文件状态 - 忽略文件 - 远程仓库 | 前端工程化 5 | ||
| day53_fetch 和 merge-远程仓库操作-Github-Gitlab | day53_tag 标签管理-git 底层原理 - 分支操作 - 工作流 | 前端工程化 6 | ||
| day54_初体验 Vue3-命令式和声明式编程-MVVM 架构 | day54_options 选项-data 属性 - 模板语法 - 指令 | Vue3+全家桶 1 | ||
| day55_绑定事件 - 条件渲染-template-阶段案例 | day55_v-show-v-for 指令 - 数组更新-key 和 VNode | Vue3+全家桶 2 | ||
| day56_购物车案例 - 动态添加类 - 双向绑定 v-model | day56_修饰符 - 组件化 - 全局和局部组件 - 脚手架 | Vue3+全家桶 3 | ||
| day57_项目文件介绍-Vue 版本-Volar-组件通讯 | day57_父子组件通讯-props-emit-组件插槽和作用域 | Vue3+全家桶 4 | ||
| day58_非父子通讯 - 生命周期-ref 获取元素和组件 | day58_动态组件-Keep-Alive-异步组件 - 混入 Mixin | Vue3+全家桶 5 | ||
| day59_setup 函数 - 响应式 API(Ref 等)--DevTool 插件 | day59_计算属性 - 侦听器 - 生命周期-ref-Provide 等 | Vue3+全家桶 6 | ||
| day60_Hooks 练习 - 阶段案例 - 组件的抽取和封装 | day60_VueRouter-路由配置 - 传参 - 懒加载 - 嵌套等 | Vue3+全家桶 7 | ||
| day61_动态添加路由 - 导航守卫-Vuex 状态管理 | day61_Vuex 核心-Store-Getters-Mutation-辅助函数 | Vue3+全家桶 8 | ||
| day62_Vuex 核心-Actions-Modules-Pinia | day62_Pinia 使用和 4 个核心知识-Axios 使用和封装 | Vue3+全家桶 9 | ||
| day63_Vue3 项目实战 1-目录结构设计 - 集成第三方库 | day63_Vue3 项目实战 2-Vant-封装 TabBar 和 NavBar | Vue3+全家桶 10 | ||
| day64_Vue3 项目实战 3-城市列表-Tabs-动态数据 | day64_Vue3 项目实战 4-列表索引 - 选择城市 - 首页布局 | Vue3+全家桶 11 | ||
| Vue3 项目实战 5-首页列表 - 上拉加载等 | Vue3 项目实战 6-详情页布局 | Vue3+全家桶 12 | ||
| Vue3 项目实战 7-详情页的轮播图等组件封装 | Vue3 项目实战 8-详情页 - 房屋信息等 | Vue3+全家桶 13 | ||
| Vue3 项目实战 9-完善详情页 - 项目打包等 | Vue3 的高级语法和其它知识点的补充 | Vue3+全家桶 14 | ||
| Vue 项目部署 - 手写 Vue3 渲染系统 | 手写 Vue3 的 VDOM-Vue3 响应式系统 | Vue3+全家桶 15 | ||
| 小程序环境搭建 - 申请 AppID-小程序目录结构 | 小程序架构 - 运行机制和更新机制 - 小程序基本语法 | 小程序 + 项目 1 | ||
| 小程序配置 - 全局配置 - 页面配置 - 注册小程序 | 注册页面 - 小程序组件 - 小程序内置指令 | 小程序 + 项目 2 | ||
| 小程序生命周期--小程序事件 - 上拉和下拉刷新 | 小程序通讯 - 自定义组件 - 小程序 API | 小程序 + 项目 3 | ||
| 弘源音乐小程序项目搭建 - 网络请求封装 | 获取网络数据-npm 包管理 - 搜索框展示 | 小程序 + 项目 4 | ||
| 不播图 - 头部组件封装 - 推荐歌曲 | 歌单区布局 - 人们和推荐 - 排行榜 - 巅峰榜 | 小程序 + 项目 5 | ||
| 歌曲详情页 - 榜单数据 - 热门搜索 | 搜索建议 - 防抖应用 - 富文本 - 搜索结果 | 小程序 + 项目 6 | ||
| 播放歌曲详情 - 自定义导航栏 - 歌曲播放 API | 播放页布局 - 播放进度 - 匹配正确歌词 | 小程序 + 项目 7 | ||
| 歌词分页 - 状态管理 - 播放功能抽取 - 播放监听 | 添加播放 - 切换上一首 - 下一首 - 自动播放 | 小程序 + 项目 8 | ||
| 播放工具栏 - 暂停 - 停止播放 - 手机阅览模式 | 小程序登录 - 获取用户信息 - 分包和部署 | 小程序 + 项目 9 | ||
| 搭建云开发环境 - 云环境配置和初始化 - 常用 API | 云数据库使用 - 数据库操作 - 云存储使用 - 云存储 API | 小程序云 + 项目 1 | ||
| 云函数使用 - 小程序云项目实战（一） | 小程序云项目实战（二） | 小程序云 + 项目 2 | ||
| 邂逅 React-React 的特点-React 组件化开发方式 | React 列表渲染-JSX 语法介绍-JSX 嵌入表达式 | React+全家桶 1 | ||
| JSX 事件绑定 - 传递参数 - 条件渲染-JSX 本质 | ReactElement 对象本质 - 虚拟 DOM-购物车案例 | React+全家桶 2 | ||
| 脚手架 - 项目目录结构 - 项目组织方式-render 函数 | 组件生命周期 - 父子传参 - 跨组件通讯-Context | React+全家桶 3 | ||
| setState 同步或异步更新 - 列表 key 的作用-memo 使用 | 事件总线 - 获取 DOM refs-受控组件 - 高阶组件 | React+全家桶 4 | ||
| React 中 fragment-css modules-css in js-tailwind | ant-design 库-axios 的封装-react-transition 动画 | React+全家桶 5 |