如何写好JavaScript_1 | 青训营笔记

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

前端基础准则-各司其责

HTML负责页面结构，CSS负责页面样式，JavaScript则负责页面动作。

HTML即超文本标记语言，是页面最重要的部分；当浏览器通过http请求得到一个响应头中content-type为text/html的响应后就将响应数据从二进制转变为html文件最终生成为DOM树，浏览器根据DOM树的结构开始渲染页面。
CSS则是使用各种选择器和各种dom关系以及标签状态等为不同的标签设置各自的样式，浏览器在生成DOM树的同时也解析CSS文件生成CSSOM树，最终根据这两棵树确定页面的结构和页面的样式。 JavaScript则是在浏览器上运行的编程语言，浏览器编译运行js代码对用户的各种行为做出反应，比如点击按钮提交表单后跳转到新的页面，验证用户在浏览某些网页之前是否登录了账号等。

我们来看一个例子：实现控制网页深色和浅色浏览模式，下面是代码。

初版

HTML结构

<!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>
  <header>
    <button id="modeBtn">🌞</button>
    <h1>深夜食堂</h1>
  </header>
  <main>
    <div class="pic">
      <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/972256e1639d493eb165a5ddf111b39e~tplv-k3u1fbpfcp-zoom-1.image">
    </div>
    <div class="description">
      <p>
          这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
          眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
      </p>
    </div>
  </main>
</body>
</html>

css样式

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 10px;
  box-sizing: border-box;
}
div.pic img {
  width: 100%;
}
#modeBtn {
  font-size: 2rem;
  float: right;
  border: none;
  background: transparent;
}

js代码

//获得控制颜色的按钮
const btn=document.getElementBuId('bottonName');
//为该按钮绑定点击事件，实现点击切换页面颜色
btn.addEventListener('click',(e)=>{
    const body=dcument.body;
    if(e.target.innerHTML==='🌞'){
        //修改背景颜色为黑色
        body.style.backgroundColor='black';
        //修改文字颜色为白色
        body.style.color='white';
        e.target.innerHTML='🌙';
    }else{
        //修改背景颜色为白色
        body.style.bakckgroundColor='white';
        //修改文字颜色为黑色
        body.style.color='black';
        e.target.innerHTML='🌞'
    }
});

效果如下：

在这段代码中我们通过给按钮添加点击事件直接修改样式，虽然实现了点击页面让背景颜色变化但是违背了js只负责页面动作的原则。同时这段js代码也存在以下几个问题：

js直接修改的是行内样式，其优先级最高；如果我们想要覆盖只能让后面的规则加上！important。
后续想要添加更多样式的话只能在这加入更多的代码，会对后期修改造成不小的麻烦。
性能问题，每一次触发点击事件都会查询DOM树找到body节点，为其修改样式后触发重绘。

此时我们换种思路，将这两组样式放入两个css class规则中，然后通过点击事件切换标签的className。

修改后

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌜';
}

  //获得控制颜色的按钮
  const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(body.className !== 'night') {
    //修改body的class，使页面变成黑色
      body.className = 'night';
    } else {
    //修改body的class，使页面颜色恢复默认
      body.className = '';
    }
  });

在这里我们将样式以及动作分开，需要的样式规则放入css文件中，而js只负责监听点击事件切换class，满足了“CSS负责页面样式，JavaScript负责页面动作”的准则；往后我们需要再添加样式则只需要在相应的css文件中修改而不需要再关注负责逻辑的js代码。然而这还没结束，我们可以在HTML中稍作修改就可以不需要js代码也能让页面颜色切换。

最终修改

HTML修改结构

...
<body>
    <input id="modeCheckBox" type="checkbox"/>
    <div class="content">
        <!--这里的label for指定与上面的input绑定-->
        <lable id="modeBtn" for="modeCheckBox"></lable>
    </div>
    ...
</body>
...

CSS样式

/*不在页面上显示*/
#modeCheckBox {
  display: none;
}
/*点击页面的时候因为label for导致input的click事件触发*/
#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

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

此时当我们点击页面，就会发现也能让页面颜色切换，这是因为我们使用label属性将整个页面和input绑定了，当我们点击页面的时候触发input的click事件，然后利用css的伪类以及兄弟选择器修改页面颜色。 从上面的例子我们可以得出结论：

HTML/CSS/JavaScript应该各司其职，这样方便后面改动以及别人复查。
应当避免由js直接操作样式。

如何写好JavaScript | 青训营笔记

如何写好JavaScript_1 | 青训营笔记

前端基础准则-各司其责

初版

修改后

最终修改