JS的原则
- 各司其责
- 组件封装
- 过程抽象
HTML、CSS、Javascript职能分离
为UI组件具备正确性、扩展性、复用性
应用函数式编程思想
组件封装
组件是指Web页面上抽出来一个包含模版（HTML) 、功能（JS）和样式（CSS）的单元。好的组件备封装性、正确性、扩展性、复用性。
eg:轮播图
先在HTML中定义了一个“Slider”类，这个类可以用于管理轮播图的功能，可以获取选中项、切换到指定索引的项以及自动切换。使用无序列表u1元素来实现。
然后使用CSS表现出来，将图片定位重叠在同一个位置，切换状态使用修饰符，轮播图的切换到动画使用CSS transition。使用“.slider-list_item--selected”来选择轮换。
最后用JS行为。API与Event(使用自定义事件来解耦)。解耦指的是将代码中的不同部分（模块、组件等）之间的依赖关系降到最低程度，使它们能够独立地进行开发、测试和维护。解耦的目标是减少代码的耦合性，提高代码的可重用性、可扩展性和可维护性。
组件封装总结：基本方法
- 结构设计
- 展现效果
- 行为设计
API（功能）
Event（控制流）
重构：
插件化：
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
- 将HTML模板化，更易于扩展
模板化
抽象：将组件通用模型抽象出来
总结
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化
过程抽象：应用函数式编程思想
用来处理局部细节控制的一些方法
函数式编程思想的基础应用
高阶函数:为了能让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称之为过程抽象
以函数作为参数
以函数作为返回值
常用于作为函数装饰器
常用的高阶函数
- Once
- Throttle
- Debounce
- Consumer /2
- lterative
编程范式
Toggle命令式
Toggle声明式
Tooggle三态
小节
过程抽象/HOF/装饰器
命令式/声明式
对初学者学习的建议
最重要的就是了解基本概念，确保对JavaScript的基本概念有一个清晰的理解。
编写内容时要清晰、易读的代码，规范格式。
刚开始学习要善于用注释，可以很好的提高代码的可维护性和可读性。在关键部分添加注释，解释代码的意图、功能和实现方法，便于下一次的快速理解。
模块化的进行编程，将代码拆分为小的、可重用的模块，可以提高代码的组织性和可维护性。使用函数、类或模块来封装特定功能来实现代码的模块化。
多理解学习数据类型和类型转换，JS中不同的数据类型，了解它们之间的区别和如何进行类型转换。
