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

如何写好 JS1

code.juejin.cn/pen/7117822…

如何写好 JS2

code.juejin.cn/pen/7119668…

让 HTML、CSS和 JavaScript 职能分离，HTML是页面的骨架，CSS是页面的皮肤，JavaScript是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分，尽可能的少用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

例子：深色模式切换

组件封装这节课，老师拿出了学习js首先会接触到的轮播图。他的实现不难，老师带着我们从头开始封装。

一个好的组件需要具备封装性、正确性、扩展性、复用性等。

一开始的HTML和css不必多说，直接到js，也就是行为设计。行为设计可以分为API（功能）和控制流，这里老师抽离出了几个方法，

实现了基本功能后老师提出了个问题，既然是要封装组件，那么我不想要某个功能之后，还得删除对应的HTML，是不是很麻烦，又该怎么做呢？

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

最后再把通用的组件模型抽象出来。

听了这节课，我感觉老师讲的意思大概和黑盒模型一样，只考虑输入输出，不考虑中间处理过程。还讲了几个高阶函数。

通过上课讲解的不同的版本，使得代码一次一次得到优化，更简练也更直观，这是我们今后学习前端需要努力的目标！