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

一、本课重点

• 了解JavaScript的编程原则
  • 各司其责
  • 组件封装
  • 过程抽象

二、JavaScript编程原则

1、各司其责

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

2、组件封装

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

总结：基本方法

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

解耦

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

插件化： 模板化： 组件框架：

总结

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

3、过程抽象

（1）概念

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

（2）Once

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

（3）高阶函数

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

（4）编程范式 命令式：

声明式：

总结：

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

三、课后总结

通过本节课的学习，我掌握了如何JavaScript的编程原则，即各司其责、组件封装和过程抽象。但由于初次接触JavaScript，对其了解还是比较浅陋，后续的学习以及相关实例的理解尤为重要。