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

如何写好JavaScript

书籍推荐

• 犀牛书
• 蝴蝶书

原则

• 各司其职
• 组件封装
• 过程抽象

各司其职

• 让三件套尽量只进行自身作用（不在js中直接调样式）
• 可以用class来表示状态
• 纯展示类交互寻求零js方案
• 不是不在一个文件里，而是让每一部分发挥它本身的功能

组件封装

• 组件是值web网页上抽象出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件应具有封装性、正确性、扩展性、复用性。
• 基本方法
  • 结构设计
  • 展现效果
  • 行为设计
    • API（功能）
    • Event（控制流）
• 重构：插件化
  • 解耦
    • 将控制元素抽取成元素
    • 插件与组件之间通过依赖注入方式建立联系
• 重构：模板化
  • 解耦
    • 将HTML模板化，更易于扩展
• 重构：抽象化（组件框架）
  • 将组件通用模型抽象出来

过程抽象

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

高阶函数

• 以函数为参数和返回值，常作为函数装饰器

• 常用高阶函数

  • Once
  • Throttle
  • Debounce
  • Consumer/2
  • Iteratlve

• 纯函数和非纯函数

  • 纯函数对于相同参数，返回值一定
  • 非纯则不一定

• 使用高阶函数可以降低非纯函数的出现，便于程序维护

编程范式

• 命令式
  • 怎么做
  • 易于编码
• 声明式
  • 做什么
  • 有更强可扩展性

代码写作事项

• 写代码应该关注使用场景
• NPM模块粒度
• 代码风格
• 代码质量

代码实践

• 交通灯
  • 数据抽象
  • 过程抽象
    • 将行为拆分
  • 更加灵活，便于维护和迭代
• 洗牌
  • 算法不公平
    • 使用的方法未考虑清楚其是否保证代码的正确性
• 分红包
  • 切西瓜法
    • 每次从大的分
  • 抽牌法