这是我参加⌈第四届青训营⌋笔记创作活动的第3天。

在学习完HTML，CSS后，就把内容和样式部分学完了，前端三件套就还剩下了JavaScript(行为)了， js是前端很重要的技术，如何写好js代码？主要有三个原则：“各司其职”，“组件封装”，“过程抽象”。

“各司其职”：让HTML,CSS和Javascript职能分离。
“组件封装”：好的UI组件具备正确性，拓展性和复用性。
“过程抽象”：应用函数式编程思想。

1.什么是“各司其职”?

我们知道，网页由HTML，CSS，JS三大部分组成，它们分别负责内容，样式和行为三部分，各自负责属于自己功能的代码部分，这便是各司其职，这样做的好处是可以使得代码可读性更好，更利于后续的管理和维护，简单说就是让HTML,CSS和Javascript职能分离。

还没听懂？上代码感受一下吧。

通常我们新手在没有各司其职原则下写出来的代码是这样的：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模式切换新手思路</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <button id="modeBtn">🌞</button>
    <h3>这是一个模式切换的案例</h3>
  </header>
  <main>
    <p>大家好，我是Vic。</p>
    <br />
    <p>请在写JS的时候遵循各司其责原则。</p>
  </main>
  <script src="./index.js"></script>
</body>
</html>。

CSS：

body,
html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
  transition: all 1s;
}
#modeBtn {
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 2rem;
  background-color: inherit;
}

JS：

const btn = document.getElementById('modeBtn');
          btn.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 = '🌞';
            }
          });

然而，对于一个有经验的程序员来讲，写代码“各司其职”的原则尤为重要，写出来的代码是这样的：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模式切换新手思路</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <button id="modeBtn"></button>
    <h3>这是一个模式切换的案例</h3>
  </header>
  <main>
    <p>大家好，我是Vic。</p>
    <br />
    <p>请在写JS的时候遵循各司其责原则。</p>
  </main>
  <script src="./index.js"></script>
</body>
</html>

CSS:

body,
html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
  transition: all 1s;
}
body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}
#modeBtn {
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 2rem;
  background-color: inherit;
}
#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌛';
}

JS:

const modeBtn = document.getElementById('modeBtn');

modeBtn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className === 'night') {
    body.className = '';
  } else {
    body.className = 'night';
  }
})

对比一下，你发现这两种版本的代码有什么不同呢？哪一种写法更好？

答案是毋庸置疑的，当然是“各司其职”原则下写出来的代码更加好，为啥呢？对比一下，我们不难发现，第一种方案中，JS部分代码：

body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '🌜';

body.style.backgroundColor = 'white';
body.style.color = 'black'; 
e.target.innerHTML = '🌞';

这些代码均对CSS样式进行了操作，根据“各司其职”原则，让HTML,CSS和Javascript职能分离，JS代码部分只负责自己的行为部分。不能直接操作HTML，CSS。

第二种方案中，JS部分代码：

const modeBtn = document.getElementById('modeBtn');

modeBtn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className === 'night') {
    body.className = '';
  } else {
    body.className = 'night';
  }
})

通过Classname属性实现，并未像第一种方案直接在JS部分代码中修改了CSS中的样式属性值。例如我想改变样式，我只需要在CSS部分定义一个样式，假设名字为night1，现在只需要令body.clssname='night1'即可，这样就不会在JS部分代码中修改操作CSS部分。这符合各司其职的原则，后续可以更方便管理维护代码。

2.组件封装

组件设计的原则：封装性，正确性，扩展性，复用性。
实现组件的步骤：结构设计，展现效果，行为设计。
三次重构：插件化，模板化，抽象化（组件架构）。

3.构成抽象

过程抽象：

用来处理局部细节控制的一些方法。
函数式编程思想的基础应用。

个人总结：

通过本节课，我反思了自己以前写代码的习惯，发现了很多问题原来是可以去优化的。学习了写好js代码主要有三个原则：“各司其职”，“组件封装”，“过程抽象”。通过这些知识的深入学习，我一定可以更好的去规范自己的代码，不断优化，写出更好的JS代码。

如何写好JavaScript|青训营笔记