这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
课堂笔记
本堂课重点内容
JavaScript 编码原则
1.各司其责
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
2.组件封装
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
3.过程抽象
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
Leftpad 事故
- 代码写作关注事项
- left-pad 事件背后的代码规范
JavaScript 代码质量优化
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
详细知识点介绍
各司其责
各司其责让HTML、CSS、JS职能分离
深夜食堂：写一段JS控制一个网页，让它支持浅色和深色两种浏览模式。
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件封装是指Web页面抽出来一个个包含模板（HTML）、功能（JS）、样式（CSS）的单元。好的UI组件具备正确性、扩展性、复用性
写一个轮播图：
- HTML列表结构
- 表现：使用CSS绝对定位将图片重叠在同一位置，轮播图切换的状态使用修饰符
- 行为API，控制流Event（使用自定义事件解耦）
重构：
- 插件化将控制元素抽取成插件
- 模板化更易于扩展
- 抽象将组件通用模型抽象出来
过程抽象
过程抽象函数式编程思想的基础应用，用来处理局部细节控制的一些方法
高阶函数：
- Once能够把“只执行一次”这个过程给剥离出来
- HOF等价函数，以函数作为参数和返回值
- Throttle节流函数
- debounce防动函数
- consumer延时函数
- iterative可迭代方法
纯函数越多系统可维护性越高
命名vs声明：声明式比命名式具有更强的可扩展性
Leftpad 事件
槽点：
- NPM模块粒度
- 代码风格
- 代码质量/效率
代码质量优化
交通灯
- 定义状态列表，递归的方式取用状态
- 过程抽象：等待、轮询函数、设置状态
- 异步+函数式
判断4的幂
- num对4取模，看能否被4整除
- num & 0b11
- 时间复杂度O(1)：a & (a-1) 后两位会变成0、num & 010101...10 === 0
洗牌
- 错误方法：sort方法每个位置出现的概率不相等
- 改进：随机抽一张牌放到最后一个位置
- 使用生成器
分红包
- 切西瓜法-取大的部分来分
- 洗牌
课后个人总结
JavaScript部分的内容主要巩固了我的函数基础。此外，我看了月影讲的代码实践后，对JS有了更清晰的认识。
