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

什么是js？

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
//参考来源：百度百科

一、如何写好js代码

之各司其职
1.几个基本原则前端js原则.JPG

1.1各司其职

在有多种实现方式时，令三件套各司其职，是最好的写法。
例：深夜食堂的白天黑夜模式切换（3种方式）

深夜食堂.JPG

1.1.1瞎捣鼓的css和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 = '🌞';
    }
  });

这种写法的意思非常简单易懂，逻辑十分简单，就是一个通过dom点击事件直接改变元素图片颜色等。但是其违背了三件套各司其职的特点，在js的事件中柔和进了css的代码,在实际开发中，应避免由js直接操作样式。

1.1.2通过切换类名，对应不同的css样式

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

此方法较上一种好，js与css初步可以各司其职，用className来控制元素所展示的样式

1.1.3使用css伪类实现无js

无js实现

<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>

#modeCheckBox {
    display: none;
  }

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

这里使用了css的伪类

伪类是 W3C 给我们制定的一套选择器特殊状态，通过伪类可以设置元素的动态状态，如悬停（hover）、点击（active）和文档中不能通过其它选择器来选择的元素（此类元素没有 ID 或 class 属性），像第一个子元素（first-child）或最后一个子元素（last-child）。

伪类名称不区分大小写，但其需要以冒号:作为开头。另外，伪类需与 CSS 中的选择器结合来使用，语法格式如下：

selector:pseudo-class {
    property: value;
}

其中 selector 是选择器名称，pseudo-class 是伪类的名称。
总结：

HTML/CSS/JS 各司其责
应当避免不必要的由 JS 直接操作样式
可以用 class 来表示状态
纯展示类交互寻求零 JS 方案

跟着月影来学习（复习）Javascript|青训营笔记