这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
本堂课的重点内容
- JavaScript的编码原则
- JavaScript的代码优化
本堂课内容思维导图
JavaScript的编码原则
-
各司其职
各司其职指的是：HTML,CSS,JavaScript各司其职，HTML本身的任务是页面结构，CSS的任务是页面的渲染，JavaScript的任务是页面的行为，应该避免直接使用JavaScript操作页面的样式，因为样式是属于CSS范畴的。
[课堂浏览模式切换小案例]
版本一：
版本一确实能够实现想要的效果，但是代码还有待优化，原因是在javaSript中，直接操作了CSS样式，前面我们说过，HTML,CSS,JavaScript应该各司其职，尽量避免在JavaScript操作样式，而在版本一中javaScript代码操作了许多样式，因此版本一的代码还值得优化。
版本二：
在版本二中对版本一的代码进行了一定的优化，通过对类名的操作控制浏览模式的切换，并且代码相较版本一也变得简洁，对于一些页面的状态改变，可以通过操作Class来实现。
版本三：
版本三中优化程度较高，浏览模式的切换完全依赖于CSS，并未使用js进行操作，主要是通过复选框与label标签进行实现。
-
组件封装
在进行javaScript的编写时，要注意进行插件化，模块化与抽象化，可以增强代码的复用性。
[课堂轮播图小案例]
版本一：
在Slider类中分别定义了轮播图的一些操作方法，但是代码中构造函数几乎占据了全部代码的一半，这并不是一件好事，还可以进一步优化。
版本二：
将代码抽象成一个插件，增加代码的复用性，而且相比之前的构造函数，版本二的构造函数相对来说较简洁。
代码优化
在代码优化模块中，课堂上主要列举了三个小案例，分别是交通灯案例、发牌案例、分红包案例，方便我们理解代码优化方面的内容，由于代码挺复杂的，在这里就不展示了。
结尾
本次笔记主要是记录课堂上的一些主要内容，并不会做特别详细的内容介绍，总之，通过学习，我还是知道了许多之前没关注到的JavaScript的编码原则。
