如何写好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=''
    }
});

效果如下：

如何写好JavaScript | 青训营笔记

在这段代码中咱们经过给按钮增加点击事情直接修正款式，虽然完成了点击页面让布景色彩改变可是违反了js只担任页面动作的准则。一起这段js代码也存在以下几个问题：

  1. js直接修正的是行内款式，其优先级最高；如果咱们想要掩盖只能让后边的规矩加上！important。
  2. 后续想要增加更多款式的话只能在这加入更多的代码，会对后期修正造成不小的麻烦。
  3. 性能问题，每一次触发点击事情都会查询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的伪类以及兄弟选择器修正页面色彩。 从上面的比如咱们能够得出结论：

  1. HTML/CSS/JavaScript应该各司其职，这样便利后边改动以及他人复查。
  2. 应当避免由js直接操作款式。