这是我参与⌈第五届青训营⌋伴学笔记创作活动的第二天
今日学习主题是如何写好JS
写好JS的原则
- 各司其职
- 组件封装
- 过程抽象
今日最大的收获就是学习了一个案例的三种写法，也就是支持浅色和深色两种模式浏览的案例 作为初学者的我，在没有系统学下去之前很大可能以下第一种写法，这种写法虽然不会影响 使用体验，但是在实际开发中属于“死方法”，若遇到浏览模式需要修改样式的话必须到JS中修改，非常麻烦。但是如果使用第二种办法，不仅js文件的代码较简单清晰，而且也不存在利用js干涉css样式，体现了“各司其职”的特点。 第三种方法也很灵活，使用checkbox来切换浅色和深色模式
支持浅色和深色两种模式浏览的案例
第一个版本
第二个版本
第三个版本
轮播图
我个人在学习前端技术过程中，也曾经练习写过轮播图，但是当时只是学习完JavaScript，原生的轮播图虽然能达到预期效果，但是编写十分麻烦，后来学习到如何使用swiper来直接使用别人写好的轮播图，再到学习Vue框架后组件模块化，直接使用UI组件，这一过程让我觉得很惊喜。尤其是组件封装不仅是代码更加有结构，也可以一目了然。
总结
- 组件设计的原则：
封装性、正确性、扩展性、复用性 - 实现组件的步骤：
结构化设计、展现效果、行为设计 - 三次重构:
- 插件化
- 模板化
- 抽象化（组件框架）
