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

如何写好JS

写好JS的一些原则

• 各司其职
  • 让HTML、CSS和JS职能分离
• 组件封装
  • 好的UI组件具备转正确性、扩展性、复用性
• 过程抽象
  • 应用欧冠函数式编程思想

各司其职

思考：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式，应该怎么实现？

版本一 这个版本有什么问题？怎么优化

版本二 这个版本比上一版好在那里，还有没有其他方案

版本三(无JS---利用CSS的高级功能)

结论：

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

组件封装

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

好的组件具备封装性、正确性、扩展性、复用性

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

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

• 行为JS：API设计应保证原子操作，职责单一，满足灵活性

• 控制流：使用自定义事件来解耦

• 总结基本方法

  • 结构设计
  • 展现效果
  • 行为设计
    • API(功能)
    • Event(控制流)

• 重构：插件化

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

• 解耦

  • 将HTML模板化，更易于扩展

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

• 封装流程：

• 总结

• 组件设计的原则：封装性、正确性、扩展性、复用性

• 实现组件的步骤：结构设计、展现效果、行为设计

• 三次重构

  • 插件化
  • 模板化
  • 抽象化(组件框架)

过程抽象

• 用来处理局部细节控制的一些方法

• 函数式编程思想得到基础应用

• 例子

  • 操作次数限制
  • 一次性的HTTP请求

• Once

  • 为了能够让"只执行一次"的需求覆盖不同的事件处理，可以将这个需求剥离出来，这个过程称为过程抽象

• 高阶函数(HOF)

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器

• 常用高阶函数

  • Once
  • hrottle(节流函数)
  • Debounce(防抖)
  • Consumer(延时)
  • Consumer(2)
  • Iterative

• 为什么要使用高阶函数 纯函数(没有副作用，结果可预期)

• 编程范式

  • 命令式---How
  • 声明式---What---可扩展性强
  • 例子
    • Toggle-命令式
    • Toggle-声明式
    • Toggle-三态

• 总结

  • 过程抽象/HOF/装饰器
  • 命令式/声明式

写代码最应该关注什么

• 风格
• 效率
• 约定
• 使用场景(!)
• 设计

代码质量优化之路

交通灯

• 版本一
• 版本二(数据抽象)
• 版本三(过程抽象)
• 版本四(异步+函数式)

判断是否是4的幂

洗牌

错误写法

正确写法

生成器

分红包

版本一(切西瓜法)

版本二(抽牌法)