JS学习笔记1 | 青训营笔记

42 阅读2分钟

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

1. 写好JS的一些原则

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

2. 深夜食堂案例小结

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

3. 组件

  • 组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。
  • 好的组件具备封装性、正确性、扩展性、复用性。
  • 组件的特点
    • 「不易变」——受交互方式影响,只要没发生什么革命性改变时就不太会变
    • 「较易变」——受源码语法影响,只要源码的编写方式确定就不会变
    • 「很易变」——受业务和人影响,只要业务领域、业务规则还有人的想法不变就不会变

4. 解耦

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

5. 组件封装总结

  • 组件设计的原则:封装性、正确性、扩展性、复用性
  • 实现组件的步骤:结构设计、展现效果、行为设计
  • 三次重构
    • 插件化
    • 模板化
    • 抽象化(组件框架)

6. 过程抽象

  • 用来处理局部细节控制的一些方法
  • 函数式编程思想的基础应用

7. Once

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

8. 高阶函数 HOF

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

9. 常用高阶函数

  • Once
  • Throttle
  • Debounce
  • Consumer/2
  • Iterative

10. 编程范式

  • 命令式与声明式 image.png
    • Toggle-命令式
    • Toggle-声明式
    • Toggle-三态

11. 编程范式总结

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