JavaScript 编码原则之各司其责
前端工程师，对于java script是以什么样的标准写这个代码才是好的代码。在这个写代码的这个角度上，我们怎么样写java script代码的话，才是好的代码。这不仅限于js，前端工程师，本质上，也是工程师或者说前端程序员，其实也有很多共性的东西。
书籍推荐：
- Javascript权威指南（犀牛书），JavaScript语言精髓，JavaScript标准……
- JavaScript高级程序设计
写好JS的一些原则
各司其职
我们要让 htmlcss和 javascript的职能分离
Eg:
Version1:
我们获得这个button，上面太阳和月亮是一个button，然后我们在这个 button上注册了一个 click事件，然后在这个 click事件里面判断一下如果这个button的这个image，是一个太阳标记 那么我们点击了以后就把它变成是一个黑色的背景。然后变成是一个白色的文字，然后把这个标记变成月亮的标记 然后反过来，我们就把这个背景变成白色的把这个文字颜色变成黑色，然后把这个变成太阳。
Version2:
它最大区别就是我们在这个css里面定义了 class就是一个class，叫做night就表示，这个夜间模式，然后如果没有的话，就默认了这个 class，就表示白天的，我们还是得到这个 button，然后我们用这个 button呢?去判 断如果当前它处于不在这个夜间模式的话 我们click，就把这个 class name设置成 night就把它给设置到了夜间模式，然后，否则的话，我们就去掉这个 class name，然后就让它的那个到这个白天的这个模式 好所以的话，就这个版本的话，它也是一样的就是它运行起来是一样的，那这里的话呢，我们加了因为我们是先画那个css class嘛，所以我们在这个 class里面呢，那个就稍微添加了一个-个 transaction，就是一个过渡动画所以我们会看到，在这里，我们切换的时候，它是有一个这个飞刀的效果的，但是除此以外，跟下面那个版本的这个效果是基本上是相同。
在版本二的这个代码里面我们只是操作的这个 class name，我们一般用 class来定义这个 html元素的状态 所以我们只是操作了 html元素的状态，我在这里面的话呢，我们是直接去操作了css 那我们说为什么第二版好呢?就是因为说我们说这里会原则，就是就我们这个话题叫各司其职，对于前端来说，html它是负责结构的，然后css的是负责表现的，然后javascript是负责行为的 所以我们说结构表现行为分离是我们前端工程师需要掌握的一个基本的原则。
第一个版本，它不好的地方就在于说，它用css来控制 css其实它的去做了css应该做的事情，那这个的话，就带来什么后果呢，就是我们假定了这个场景就是现在张三就有一个叫张三的程序员，他提交了这个代码，然后他提交了这个代码之后呢，他实现了这个功能，那这个时候呢?我们pm呢?如果修改了需求就是我，我想在这个深夜模式不是用这个黑白字的比如说我想把它变成变成灰白的，然后或者变成其他的那这样的配色，我要去我要去改动这个js代码然后并且呢假设说张三把这个项目交给了李四然后李四他去看这个代码他去做这个pm的新的需求的时候他看到这个代码的时候其实他很难直观的从这个代码里去理解原始的这个需求本身的那个含义 他只知道，我现在的这个button上注册了click 然后在这个click事件里面呢就是去操作了一堆的样式 如果他不去更多的了解这个需求文档，他观看这个代码其实他是不知道做这个代码背后的这个背景，但是如果说我们是版本二的这个代码，当你是看到这个代码之后啊，他就能够很直观的知道这个class name上面的night是表示夜晚 那他做的其实是一个这个夜间模式和白天切换的这个事情.
Version3:
一般来说，控制样式的代码，我们其实是可以用纯 css来实现的 因为根据我们各司其责的原则，css其实控制样式的话是最合适的 这个版本没有js的版本，它是一个纯纯 css版本。版本三加速度表是没有的 然后只有css和html的代码 我依然可以做到这个切换 就涉及到就 css的高级功能 因为在前面的课程里面也给大家介绍了css css里面的伪类选择器嘛，它是可以去那个修改匹配这个元素状态 它的最重要的一个css规则就在这里 我们说我们可以给一个checkbox嘛，就一个checkbox号设置一个check的状态，我们通过check的状态呢去设置这个 content的样式。
代码前面放了一个checkbox。我们去修改这个checkbox状态，然后去根据决定选择器，就加点 content，就是去匹配到这个下面的下面的这个 content里面的这些内容，然后那个我们去把它的去把它的这个 color的话，去和 background color的话，去做一个改变，然后我们为什么没有看到这个checkbox呢?因为我们给这个checkbox设置了 display now，你会看到这里其实是有一个这个 checkbox的只是被我们给隐藏起来 点这个checkbox啊，其实是可以去切换这个状态的就通过那个 relation的器来实现的，但是为什么说我们点这个 button的话也可以 我们在这个在这个 checkbox上面 ，我们就是可以设置一个 for属性的，它 for一个元素，然后这个元素 ，是一个label，你会看到那个就是我们 给一个 label去设置一个 for元素，for一个这个 check boxes就这个 checkboxid然后我们会看到我们把这个 button的话可以改成了一个|abel然后在这个label里面呢我们 for这个id等于这个叫做 mode check box的一个check box所以我们在这个时候呢我们点击这个 |abel的时候呢就跟这个直接点击这个 checkbox的效果是一样的就我们点击这个label的话是改变这个 checkbox状态的，然后我们再根据这个check box的这个它的这个兄弟节点然后去改变这个content的这个状态所以的话然后我们再把这个 checkbox隐藏。
结论：
