课程笔记——如何写好JavaScript
这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
原则：
- 各司其责：让HTML、CSS和JavaScript职能分离，应该避免不必要的由JS直接操作样式
- 组件封装：好的UI组件具备正确性、扩展性、复用性
- 过程抽象：应用函数式编程思想（编程范式）
1、各司其责
- HTML/CSS/JS 各司其责
- 应当避免不必要的由JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零JS 方案
2、组件封装
比如 轮播图的实现:html将图片直接排列，css将其重叠起来，javascript实现切换行为
ui组件设计的基本方法
- 结构设计
- 展现效果
- 行为实际
- api（功能）
- event（控制流）
3、优化方法
3.1插件化
- 解耦（当需求变更的时候会比较好更改）
将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系
3.2模板化
3.3抽象化
- 过程抽象
用来处理局部细节控制的一些
函数式编程思想的基础应用
例子： 操作次数限制
- 一些异步交互
- 一次性的HTTP请求
once
为了能够让“只执行一次”的需求能够覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
- once
- throttle
- debounce
- consumer / 2
- iterative
函数式编程 在谈到函数式编程及其有什么优点之前，我们先看我们常见的编程方式，imperative programming（命令式编程）有什么缺点。
- 我们在告诉计算机怎么样一步步完成一件事情，引入了循环，使用一个无关紧要的局部变量 i 控制循环（或者迭代器）。事实上我根本不需要关心这个变量怎么开始，怎么结束，怎么增长，这和我要解决的问题无关。
- 我们引入了一个状态 results，并不断变更这个状态。在每次循环的时候，它的值都会发生改变。
- 当我们的问题稍微改变的时候，比如我要添加一个函数，返回有关 data 长度的一个数组，那么我们需要仔细研读已有的代码，搞清楚整个逻辑，然后新写一个函数（多数情况下，工程师会启用「复制-粘贴-修改」大法。
- 这样的代码可读性很差，一旦内部状态超过 10 个，且互相依赖，要读懂它的逻辑并不容易。
- 这样的代码无法轻易复用。
函数式编程的优点
- 提倡组合（composition），组合是王道。
- 每个函数尽可能完成单一的功能。
- 屏蔽细节，告诉计算机我要做什么，而不是怎么做。我们看 filter / map，它们并未暴露自身的细节。一个 filter 函数的实现，在单核 CPU 上可能是一个循环，在多核 CPU 上可能是一个 dispatcher 和 aggregator，但我们可以暂时忽略它的实现细节，只需了解它的功能即可。
- 尽可能不引入或者少引入状态。
