如何写好Javascript ：各司其责原则

本节课用例子讲述何种类型的 JavaScript 代码称之为“好代码”，并集中讲解三大原则之一的“各司其职”原则。

课程重点

1.JavaScript 好代码的标准

2.各司其责

一，JavaScript 好代码的标准 入门的教程推荐两本书,犀牛书和红宝书。

程序员最重要的是对自己的代码上心，把自己的代码写好，同时也要考虑若把这个代码交与他人，其他程序员是否能高效率的理解，改写和升级这个代码。否则写了很多很大的代码，可能过一段时间你也忘记了或者别人提出维护你的代码其实是很难的。

二，各司其责 第一大原则：各司其责

这样一个例子：一个网页，网页的标题叫深夜食堂，它是一个有一张图片和一段文字组成的。在这个白天的情况下，阅读模式有浅色模式，我们的需求就是写一段JS来控制这个网页，来支持浅色和深色的两种模式。比如说现在是这个浅色模式，是白天阅读的那我们点击一下，把它换成这个深色模式。我们看到我们获得这个button，一般来说是太阳和月亮，然后我们在这个button上注册了一个click事件，然后在这个click事件里面，如果这个button的这个internet是一个太阳的标记，那么我们就它点击以后变成一个黑色背景，一个白色文字。然后把这个标记变成月亮的标记就相反。这里的这个HTML的结构是很简单的图文的结构，javascript就是点击这个按钮去切换。

第二版本最大区别就是我们在这个CSS里面定义了一个class叫做net表示这个夜间模式。然后如果没有，就默认这个class表示白天模式。如果当前它不在这个夜间模式的话，我们click的话就把class name设置成light，就把它给设置到了夜间模式。在这里我们切换的时候，它有一个feeling feedback效果，但是除此以外，跟那个版本的效果基本上是相同的。我们看到说在这个版本里面，这个加速度代码是更加简洁的。上个版本代码是直接操作style，在版本二的这个代码里面只是操作了这个class name, 我们说我们一般用class来定义这个HTML元素的状态，所以我们只是操作了HTML的元素的状态.

为什么第二版是第一版好呢？就是因为各司其责。对于前端来说，HTML负责结构，CSS负责表现。结构表现行为分离是我们前端工程师需要掌握的一个基本的原则。

第一个版本，它不好的地方就在于用javascript来控制CSS。PM如果修改需求，我要去改动DS代码。如果交给另一个程序员，他看到这个代码的时候，很难直观的从这个代码里去理解原始的那个需求本身的含义。版本二的这个代码，当你看到这个代码的时候就能够很直观的知道，原来这个class name表示夜晚，他做的其实是一个夜间模式和白天切换的这个事情。版本二它才是真正符合我们叫做各司其职的这样的一个代码。

根据我们各司其职的原则，CSS控制样式是最合适的。

第三个版本，一个没有JS的纯CSS的版本，只有HTML和CSS。CSS里的伪类选择器可以去修改匹配这个元素状态。我们可以给一个checkbox设置一个check的状态,我们通过这个checker的状态来去设置这个content的样式。版本三里面，我们对HTML代码做一些修改,我们在这前面放了一个checkbox，去修改check box的状态。然后根据兄弟节点选择器，去匹配content内容,然后把它的color和background color改变，隐藏check box。如果需求是一个纯样式改变，那就可以这么做。

总的来说，"JavaScript各司其责"原则是指在编写JavaScript代码时，将不同的功能实现分散到不同的组件或模块中，每个组件或模块负责特定的任务，比如HTML负责结构，CSS负责展示，我们可以使用class来表示状态。这个原则可以将代码按照不同的功能划分成模块后，可以更好地管理项目，使得代码更易于理解和维护，提高代码可读性和可维护性；模块化的设计，可以降低代码的复杂性，促进团队协作，使得多人合作开发变得更加容易，提高团队的工作效率；可以更容易地增加或替换特定功能的模块，提升扩展性。

但过度细分可能导致代码的复杂性上升，也应当尽量避免不必要的由JS直接操作样式，在纯展示类交互中尽量使用零JS方案。

总的来说，“JavaScript各司其责”原则有助于组织和设计，它提倡将功能划分成独立的模块，具备诸多优点，可以提高代码的可读性、可维护性和团队协作效率。但同时在实践中需要根据具体项目的规模和需求来平衡优缺点，以提高代码的质量和开发效率。尽量避免过度细分和JS直接操作样式以及在纯展示类项目中使用JS。