这是我参与「第五届青训营 」伴学笔记创作活动的第3天
如何写好JS代码？老师给出了明确的答案：编码原则要各司其职、要组件封装、要过程抽象。
各司其职
所谓各司其职，老师直接拿出了案例来给我们讲解。就是黑夜白天主题切换，在版本1中，使用了js操作了元素的具体样式，这样确实可以实现，但也暴露出了很多问题。当需要切换的元素属性不止2个，有很多个难不成要写很多个操作样式？还有当后人看到这段代码的时候方不方便理解？于是乎，版本2出现了。版本2是将相关需要改变的属性直接抽离了出来，放到一个新样式中，然后用js来增删元素的style的classlist。这就解决了很多的问题，但是这就是最优解了吗？诚然不是，老师又写出了第三种版本，直接用css来实现切换，用input的一个伪类选择器实现classlist的增删。
由此可以看出，好的JS代码要各司其职，能用css做的事就不要用JS来做。
组件封装
组件封装这节课，老师拿出了学习js首先会接触到的轮播图。他的实现不难，老师带着我们从头开始封装。
组件：是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。
一个好的组件需要具备封装性、正确性、扩展性、复用性等。
一开始的HTML和css不必多说，直接到js，也就是行为设计。行为设计可以分为API（功能）和控制流，这里老师抽离出了几个方法，
实现了基本功能后老师提出了个问题，既然是要封装组件，那么我不想要某个功能之后，还得删除对应的HTML，是不是很麻烦，又该怎么做呢？
那就是将HTML模板化
将HTML模板化，就像使用Vant等组件库一样，只有模板的HTML，并不需要将整个代码都写在页面上。当我们修改组件时，只需要修改模板代码，不需要修改页面源代码。
最后再把通用的组件模型抽象出来。
过程抽象
听了这节课，我感觉老师讲的意思大概和黑盒模型一样，只考虑输入输出，不考虑中间处理过程。还讲了几个高阶函数。
课程很好，也有不少新收获。
