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

一、JavaScript编程原则之各司其责

1.什么才是好的JavaScript代码？

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

2.写好JavaScript的tips

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

二、JavaScript编程原则之组件封装

组件是指Web页面上抽出来一个个包含模板（HTML)、功能（JS）、和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

例子：用原生JS写一个电商网站的轮播图

轮播图

总结：基本方法

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

改进方法：解耦

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

模板化

组件框架

总结：

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

三、JavaScript编程原则之过程抽象

1.过程抽象是什么

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

2.Once

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

3.高阶函数

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

常用高阶函数：

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

4.编程范式

• 命令式：强调怎么做 Toggle-命令式

• 声明式：强调做什么 Toggle-声明式

• Toggle-三态

总结：

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

四、课后总结

通过本章的学习，了解了JavaScript编程的三个原则，即HTML/CSS/JS各司其责、组件封装和过程抽象。通过对课程中所提到的实例的分析，进一步加强了对如何写好JS代码的理解与学习，通过组件封装使代码更具封装性、正确性、扩展性与复用性，课程较难掌握的知识点比如高阶函数的使用方式与定义理解，需要在课后进一步加强对知识点的巩固。