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

如何写好js代码

写好JS代码首先需要遵循以下三条原则：1.各司其职；2.组件封装；3.过程抽象。今天先根据课堂上给出的深夜食堂的例子讲讲各司其职。

各司其职

各司其职：HTML，CSS，JS三者分别代表着网页中不同的东西。HTML代表是网页的结构，CSS属于网页的表达效果，而JS决定了网页的行为，三者之间应该避免出现职能侵犯的情况。这就是各司其职

深夜食堂的原始版本中是通过在JS中更改html中对应的style来完成切换日夜间阅读效果，第二版则是在CSS中先完成了样式的创建，在JS中切换CSS样式。第三版中则是只通过CSS中的组合，不涉及到JS的操控完成切换。

由深夜食堂三个版本的例子可以看出写好JS代码，应当避免不必要的JS直接操控样式，可以用class来表示状态，而纯展示类交互应寻求零JS方案。下面的代码就是纯展示类交互应的零JS方案。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>深夜食堂</title>
</head>
<body>
  <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>
</body>
</html>

body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;
}

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

JS编码原则| 青训营笔记

如何写好js代码

各司其职