这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

一、JavaScript编码原则

1. 写好JS的原则

JavaScript编码的三大原则:

• 各司其职

  • 让HTML、CSS和JavaScript职能分离

• 组件封装

  • 好的UI组件具备正确性、拓展性、复用性

• 过程抽象

  • 应用函数式编程思想

2. 各司其职

深夜食堂案例

• 版本一

• 版本二

• 版本三

总结

• 各司其职

  • HTML/CSS/JS各司其职
  • 应当避免不必要的由JS直接操作样式
  • 可以用class类来表示状态
  • 纯展示类交互寻求零JS方案

3. 组件封装

什么是组件

• 组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元

轮播图案例

• 结构 - HTML在·：

  • 轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现

• 表现 - CSS：

  • 使用CSS绝对定位将图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符（modifier）
  • 轮播图的切换动画使用CSS transition

• 行为 - JS：

  • SLider功能（API）

    • +getSelectedItem() 用于获取选中图片元素
    • +getSelectedItemIndex() 用于获取选中图片元素索引
    • +slideTO() 用于轮播至某图片
    • +slideNext() 用于轮播至下一张图片
    • +slidePrevious 用于轮播至上一张图片、

  • 控制流（Event）

    • 使用自定义事件来解耦

案例优化

• 重构：插件化（解耦）

  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系

• 重构：模式化（解耦）

  • 将HTML模块化，更易于拓展

• 重构：组件框架（抽象）

  • 将组件通用模型抽象出来

总结

• 组件设计的原则：

  • 封装性
  • 正确性
  • 拓展性
  • 复用性

• 组件封装的基本方法

  • 结构设计

  • 展示效果

  • 行为设计

    • API（功能）
    • Event（控制流）

• 三次重构：

  • 插件化
  • 模板化
  • 抽象化（组件框架）

二、Leftpad 事故背景引入

Leftpad 事件本身的槽点

• NPM模块粒度
• 代码风格
• 代码质量/效率

Leftpad 可优化

• 使用repeat的二次幂处理进行优化

三、JavaScript 代码质量优化之路

交通灯案例

• 实现一个切换多个交通灯状态切换的功能
• 版本一

• 版本二

• 版本三

• 版本四

4的幂案例

• 版本一

• 版本二

• 版本三

• 版本四

洗牌案例

• 错误版本

原因是sort函数排序交换位置不是随机的，因而概率不同

• 正确版本

随机抽出一张牌放入最后，被随机抽到概率均等

洗牌-生成器案例

洗牌直接抽取出牌

分红包案例

• 切西瓜法

每次都切大的那块 ---> 能保证够分到所有人

• 抽牌法

均分为n等分，随机取数量分 ---> 不会分的太均匀，极差大