JavaScript 编码原则之各司其责 | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第3天

一、本堂课重点内容：

• JavaScript 好代码的标准
• HTML/CSS/JS 各司其责

二、实践练习例子（深夜食堂来解析“各司其职”原则）：

白天模式

黑夜模式

实现上面白天/黑夜的切换，就是用js来实现的，实现这个功能很简单，但是实现的代码是不是好代码还不能确定，所以接下来会一步一步介绍什么是js好代码

• 版本一

const btn = document.getElementById( ' modeBtbtn.addEventListener( 'click', (e)=→> {
          const body = document. body;
          if(e.target.innerHTML  '🌞'){
              body.style.backgroundColor = 'black ';
              body.style.color = 'white';
          e.target.innerHTML = '🌜';
          }else {
              body.style.backgroundcolor = 'white';
              body.style.color = 'black';
          e.target.innerHTML = '🌞';}
          });

• 版本二

const btn = document.getElementById( ' modeBtbtn.addEventListener( 'click', (e)=→> {
          const body = document. body;
          if(body.className!=='night'){
             body.className = 'night';
          }else {
              body.className = 'night';
           }
          });

由上面两个版本js代码可以直观地看出，版本一是在代码直接改变页面效果的，之后如果需要修改些什么地方，就要去源代码那个地方改，这样就不太好，而版本二就是改变页面“白天/黑夜”效果的是在css代码中写好了，然后js代码进行操作，这样就做到了js和css各司其职。所以做到各司其职这个原则的代码一定程度上就是好代码了

三、课后个人总结：

“各司其职”这个写代码的原则，真的很重要，特别是在js代码的，页面颜色或者其他样式要改变的时候，尽量将这些改变样式的代码写在css当中，然后需要进行交互的时候，再用js代码进行操作。而且这个原则不仅仅在js代码有用，在用其他代码实现一个程序的时候，也要很清楚地遵守这个原则。比如这个程序是一个学生管理系统，那肯定有增、删、改、查这四个基础功能，所以实现增加功能的就在一个地方实现，实现删除功能的就在另一个地方实现，所以一定要分清楚自己要实现的功能，不能搞得很混淆，在一个地方又实现增加由实现删除