这是我参与「第四届青训营 」笔记创作活动的第4天
一、写好JS的一些原则
- 各司其职
让HTML、CSS、JavaScript职能分离。
- 组件封装
好的组件具备正确性、扩展性、复用性。
- 过程抽象
应用函数式编程思想。
二、深夜食堂例子启示
通过《深夜食堂》的例子，更加清晰的了解到html、CSS、JS各司其职的规范性和重要性。
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
三、组件封装
组件是指Web页面上输出来一个个包含模板（HTML）、功能（CSS）、样式（JS）的单元，好的组件具备封装性、正确性、扩展性、复用性。
轮播图示例
1.结构
轮播图式一个典型的列表结构，可以使用无序列表ul元素来实现。
2.表现
使用CSS绝对定位将图片重叠在同一位置；
轮播图切换的状态使用修饰符（modifier）；
轮播图的切换动画使用CSS transition。
3.行为
3.1 AIP（功能）
Slider
- +getSelectedItem()---得到当前选中的元素
- +getSelectedItemIndex()---得到当前选中元素的下标
- +slideNext()---轮播下一张
- +slidePrevious()---轮播上一张
3.2 Event(控制流)
使用自定义事件来解耦，通过添加控制流添加控制点。
4.三次重构
4.1插件化
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
插件化之后更灵活，方便对功能的修改删减增加。
4.2模板化
将HTML模板化，更易于扩展，比插件化更灵活。
4.3抽象化
将组件通用模板抽象出来，得到一个更简单的组件框架，支持定义一个组件，组件里注册若干个插件，这种抽象方法任何一个组件都是由，组件+控制插件组成，但没有考虑嵌套。
小结
四、过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
在一个库中，尽量使用纯函数，减低非纯函数的量，可以提高可维护性。
五、编程范式
- 命令式--怎么做
- 声明式--做什么
总结与思考
通过老师例子的讲解，让我认识到了写代码应该关注使用场景，写好代码不是写出代码实现功能就可以了，而是在完成一个目标之后，要对代码进行思考，如何能更好的实现，这样才能学而知新，写出更好的代码。
