这是我参与【第五届青训营】伴学笔记创作活动的第10天。

各司其责

  对于前端来说，HTML负责结构，CSS负责表现，JS负责行为
  所以，前端工程师最重要的原则就是，分离结构、表现、行为

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

组件封装

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

以轮播图为例，实现组件的步骤

结构设计：HTML

• 轮播图是一个典型的列表结构，我们可以使用无序列表<ul>元素来实现。

展现效果：CSS

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

行为设计：功能API（创建接口）

JS

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

行为设计：控制流Event（下面那个点点）

• 使用自定义事件来解耦

重构：插件化 （继续优化）

重构构建函数的代码插件化，是为了应对产品需求。
解耦

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

重构：模板化（HTML）

解耦

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

重构：组件框架

抽象

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

过程抽象

过程抽象

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

操作次数限制

• 一些异步交互
• 一次性的HTTP请求

Once

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

高阶函数

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

常用高阶函数

• Once
• Throttle
• Debounce （防抖函数）
• Consumer /2
• Iterative

编程范式

命令式与声明式
命令式：
声明式：