这是我参与第五届青训营伴学笔记创作活动的第三天!
首先，老师通过一个夜晚食堂的例子让我们充分了解到JavaScript 编码原则之各司其责。
主要内容
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
好书推荐
写好JS的一些原则
- 各司其职：让html、css、javascript职能分离
- 组件封装：好的ui组件具备正确性、扩展性、复用性
- 过程抽象：应用函数式编程思想
第一个版本的代码：
它用javascript去控制了css的样式并不好，结构表现行为，应该做到分离。
第二个版本的代码：
利用状态性的伪类去控制，用点击去实现样式的切换，本质还是对css的控制，但我们可以直接利用css代码去实现。
第三个版本的代码：
直接利用css去实现了这个功能，达到了各司其职的效果。
由此，我们可以得出结论：
- HTML/CSS/JS应该各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
接着我们学习了JavaScript 编码原则之组件封装，我没有听的很懂，很迷糊。
主要内容
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
组件的定义解析及特征
定义：组件是指Web页面上抽出来一个个包含模板HTML、功能JS、以及样式CSS的单元。 特征：
- 封装性
- 正确性
- 扩展性
- 复用性
结构设计:HTML
展现效果:CSS
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符modifier
- 轮播图的切换动画使用CSStransition
行为设计：API
-
API设计应保证原子操作，职责单一，满足灵活性。
-
但仅仅这样并不灵活，我们需要进行重构：
- 重构：插件化
- 重构：模板化
- 重构：组件框架
插件化： 解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模板化： 将HTML模板化，更易于扩展。
组件框架： 将通用的组件模型抽象出来。
总结
接着，继续学习了JavaScript 编码原则之过程抽象。
主要内容
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
什么是过程抽象？
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
常用的一些高阶函数：
HOF:
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
- Once
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称之为过程抽象。例如：开门等等 - Throttle
节流函数，节省性能开销，降低频率触发。 - Debounce
在节流函数的基础上，一个“防抖”函数。可以用于鼠标跟随等等。 - Consumer/2
实现延时调用，设置时间等等。 - iterative
一个可迭代方法，我们可以用这个高阶函数实现循环。
使用高阶函数可以提升可维护性，灵活性也更高，大大减少了我们使用非纯函数的可能性。
编程范式
Javascript作为现代编程式语言，既可以有命令式也可以有声明式。
命令式更强调我们去怎么做，声明式强调是什么会更简单与简洁，也会更方便。
