这是我参与「第四届青训营 」笔记创作活动的第4天
在本次青训营跟着月影老师学习了JS，同时也对自己的JS进行了一些复习。
写好JavaScript代码的原则
1.各司其职：让HTML、CSS和JavaScript职能分离
2.组件封装：好的UI组件具备正确性、扩展性、复用性
3.过程抽象：应用函数式编程思想
JavaScript的组件封装
用原生 JS 写一个电商网站的轮播图，应该怎么实现
结构：HTML
轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现
表现:CSS
使用 CSS 绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符（modifier）
轮播图的切换动画使用 CSS transition
行为：JS
API
控制流: 使用自定义事件来解耦。
组件封装
结构设计
展现效果
行为设计
1. API （功能）
2. Event （控制流）
重构：插件化
解耦
将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系
function pluginController(slider){ const controller = slider.container.querySelector('.slide-list__control'); if(controller){ const buttons = controller.querySelectorAll('.slide- list__control-buttons, .slide-list__control-buttons-- selected'); controller.addEventListener('mouseover', evt=>{ const idx = Array.from(buttons).indexOf(evt.target);
重构：模块化
解耦 将HTML模板化，更易于扩展
组件框架
抽象
将组件通用模型抽象出来
关于组件封装的总结：
组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构
1. 插件化
2. 模板化
3. 抽象化（组件框架）
学习总结
通过月影老师对JavaScript的讲解，让我了解到，我还有很多不会的地方，需要对JavaScript进行更加进一步的学习，写出好的JavaScript代码，在这之后，也会对基础部分进行进一步的复习。
