这是我参与「第五届青训营 」笔记创作活动的第3天

1.JS编码原则之各司其职

因为前端代码的编写需要HTML,CSS,JS三种语言，虽然在部分需求下，如：CSS语言和JS语言之间可以实现相类似的效果，但是为了规范代码的可读性，可扩展性，我们要求每种语言都主要完成自己的语言下可实现的主要功能，下图是一系列调整页面阅读模式（白天模式/夜晚模式）的JS代码举例帮助理解：

版本1

版本2

两个版本的代码对比之下，版本二代码通过使用 body.className 而不是直接修改样式来更改页面的夜间模式。这有以下优点：

1. 将样式与行为分离。样式可以在 CSS 中定义，而不是在 JavaScript 中。这可以使代码更具可维护性。

2. 更容易扩展。在第二串代码中，可以通过在 CSS 中定义其他类来添加更多的夜间模式效果。

3. 可以使用多个类来创建多种夜间模式，而不是只能有一个夜间模式

4. 通过使用 className 属性来更改类名，可以更轻松地添加和删除其他类。这使得更改样式变得更简单，并且不会影响其他已存在的类。

5. 第二串代码中的 className 是一个字符串，可以使用字符串操作来更改 className 。这样更容易扩展功能。

总之，第二串代码更加灵活，可以更轻松地维护和扩展，并且将样式和行为分离，使得代码更具可维护性。

2.JS编码原则之组件封装

一个好的组件需要具备封装性、正确性、扩展性、复用性等，本次课程我们跟着月影老师以轮播图为例，演示如何将其代码进行更好的优化整理

HTML部分

将轮播图中的图片用无序列表列出来

展示效果：CSS

CSS实现思路：

• 使用CSS绝对定位（position：absolute），将轮播图需要展示的所有图片重叠在同一个容器中，即在同一个位置
• 轮播图切换的状态使用修饰符（modifier）
• 轮播图的切换动画使用CSS transition

行为设计

在轮播图组件中我们使用class类来实现，在代码中我们会定义以下几个API方法

• getSelectedItem() 方法用于获取当前被选中的图片，并为该图片添加 "被选中" 的类名。
• getSelectedItemIndex() 方法用于获取当前被选中的轮播图的下标，可以方便地点击轮播图组件底部的圆点进行展示图片的切换。
• slideTo() 方法可以跳转到选定的图片。
• slideNext() 方法可以将轮播图组件切换到下一张图片。
• slidePrevious() 方法可以将轮播图组件切换到上一张图片。

具体代码实现：

控制流

使用自定义事件来解耦

解耦：

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系

将HTML模板化，就像使用Vant等组件库一样，只有模板的HTML，并不需要将整个代码都写在页面上。当我们修改组件时，只需要修改模板代码，不需要修改页面源代码

抽象

• 将通用的组件模型抽象出来