JS代码编写基本原则与规范

一、本节课重要知识点

• JS代码、CSS代码、HTML代码应各司其职，做到“结构、表现、行为分离”。
• 良好的组件封装：好的UI组件应该有优秀的可复用、健壮、可扩展的特点。
• 函数式编程思想：使用函数式编程范式，将过程抽象，从而可以更好地扩展。

二、本节课详细知识点

2.1 JS、CSS、HTML各司其职

2.1.1 题目要求（切换模式）

2.1.2 代码片段详解

版本一代码片段通过更改body的具体样式来实现切换深色与浅色效果，实现了基本的要求。但是并没有做到“各司其职”的基本原则，实际上是用JS去控制CSS目进行交接他人想要改变网页的样式，不仅仅需要更改CSS的代码，可能还需要更改JS的代码，代码的可维护性与可读性都大大变差了。

版本二代码片段通过更改深色与浅色的类名来实现不同夜晚模式与白天模式的切换。与代码一相比，不仅代码更加简洁，同时样式的改变也都在CSS代码中完成。因此当修改样式时，只需改变‘night’这一类中的代码即可，做到了“各司其职”的基本原则。

版本三是一个零JS实现切换不同版本的方案。该代码片段的核心有俩个：首先，在HTML中设置一个checkbox，并设置一个切换的按钮label，并使该label的‘for’属性为该checkbox的id值，从而在点击该label的时候能实现不同状态的切换；其次，在CSS中将该checkbox设置为display:none,从而隐藏该checkbox,并通过伪类选择器与兄弟选择器来添加转变的动画与样式，是相当优秀的代码。

2.1.3 小结