JavaScript学习笔记 ｜ 青训营笔记

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

一、本堂课重点内容：

1.写好JS的原则

简单来说就是JavaScript，主要是负责页面的行为，专门负责控制页面的行为

2.主题色切换效果例子

版本一：乞丐版

HTML:

     <header>
    <button id="modeBtn">🌞</button>
    <h1>主题切换demo~</h1>
  </header>

  <main>
    <div class="pic">
      <img src="https://yokin-pictrue.oss-cn-guangzhou.aliyuncs.com/SnipasteScree/202301171909169.png">
    </div>
    <div class="description">
      <p>
        这是一个浅/深主题切换的Demo
        用于学习
        <strong>JavaScript</strong>-青训营
      </p>
    </div>
  </main>

CSS:

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

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 = '🌞';
   }
 });

以上代码为什么称为”乞丐版“呢，主要是因为这段逻辑代码太过简陋，但是作为新人来说，这段代码是入门最好的写法， 逻辑很清晰，基本功能也能够实现功能。下面对以上代码进行优化。

版本二:优化版

优化之处在于使用一个变量控制两个主题，通过JavaScript来控制类名，改变显示的主样式

版本三：三元表达式

以下使用三元表达式对优化版进行简写，让代码量更少。

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

版本四：CSS+HTML

其实在不使用JS的情况下也是可以实现主题色的切换，主要是使用伪类，当icon被选中时伪类:checked生效,并且使用兄弟选择器（+）作用到对应的容器中

注： 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

3.组件封装基础方法

4.过程抽象

5.高阶函数

6.Leftpad 事故

优化后的代码

二、课后个人总结：

• 三剑客（HTML、CSS、JavaScript ）最好能各司其责，HTML负责页面结构、CSS负责样式、JS负责行为。
• 应当避免不必要的由JS 直接操作样式，可以通过CSS完成的样式尽量通过CSS完成。
• JS的代码质量不由风格决定，取决于使用的环境以及需求。
• 一些位元算可以提高代码的执行效率，必要时可以使用二进制进行逻辑运算。