这是我参与「第五届青训营」伴学笔记创作活动的第12天
一、本节课重点内容
本节课将主要围绕编码三大原则的“组件封装”原则展开。 我们知道，组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化的开发方式，逐渐成为了市场上的主流的前端开发方式。
课程重点总结如下：
- 组件的定义解析及特征；
- 组件封装基本方法；
- 利用原生 JS 实现电商网站轮播图；
二、详细知识点介绍
组件：在浏览器的页面上独立出来的，一个个的html、css、js的功能样式的单元。
组件的性质：
- 封装性；
- 扩展性；
- 复用性；
- 正确性；
组件封装
例子： 用原生JS写一个电商网站的轮播图，应该怎么实现?
- 结构（我们需要用HTML来定义一个结构）
我们知道，轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
- 表现（我们用一个CSS来做一个的表现）
- 使用CSS绝对定位将图片重叠在同一个位置；
- 轮播图切换的状态使用修饰符(modifier)；
- 轮播图的切换动画使用CSS transition；
- 行为-API（我们用JS来设计行为API，定义一个select的类来定义这个API） Slider,这些是我们做这个轮播图所需要的所有的行为API接口
- getSelectedltem( ) 得到一个当前选中的图片元素；
- getSelectedltemIndex( ) 得到一个当前选中的图片元素的列表的下标；
- slideTo( ) 移动到我们开始的一个元素上；
- slideNext( ) 轮播下一张图片；
- slidePrevious( )
轮播上一张图片；
- 行为-控制流
使用自定义事件来解耦，解除图片的状态与事件的状态的耦合。
总结:基本方法
- 结构设计
- 展现效果
- 行为设计
- API (功能)
- Event (控制流)
重构:插件化
解耦:将控制元素抽取成插件，是插件与组件之间通过依赖注入方式建立联系的方法。 我们可以先重构构造函数的代码；
重构:模板化
在这里做一个HTML的模板化，对组件与插件都进行模板化。
抽象：将组件的通用模型抽象出来。
总结：
- 组件设计的原则:封装性、正确性、扩展性、复用性
- 实现组件的步骤:结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化(组件框架)
三、总结
JS的编码原则除了各司其职之外，还有组件的封装。 我学到了简单的封装理念，组件的封装的重要性尤为重要，要做好一个程序，必须按照上述原则，改善和优化程序。
