JavaScript学习之路 | 青训营笔记

GinYue
91 阅读3分钟

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

本堂课主要讲解的重点内容

  • 如何写好 JavaScript 代码
  • HTML/CSS/JS 各司其责
  • 组件的定义解析及特征
  • 组件封装基本方法
  • 利用原生 JS 实现电商网站轮播图
  • 过程抽象概念
  • 高阶函数使用模式
  • JavaScript 编程范式
  • 代码写作关注事项

对讲解的部分知识点进行介绍

1. JavaScript 好代码的标准

HTML是页面的骨架，CSS是页面的皮肤，JavaScript是页面的动作。 书写代码时，应该尽可能少地用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

  • HTML/CSS/JS 应该各司其职
  • 避免直接在 JS 当中操作页面的样式
  • 可以采用让 JS 修改样式类的方式来实现切换样式
  • 编写代码的过程当中尽量寻找不需要使用 JS 就能实现样式切换的方案

案例分析：深色模式

//css //js

1.0版本

在 js 中操作了 body 的 style ，修改了元素的样式和结构，并不符合上面的要求

// HTML
<header> 
    // 给按钮绑定鼠标点击事件
    <button id="modeBtn">🌞</button>  
    <h1>深浅色模式切换</h1> 
</header>

// 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; 
}

// JavaScript
window.onload=function(){ 
    document.getElementById("file-btn") 
    const btn = document.getElementById('modeBtn'); 
    btn.addEventListener('click', (e) => { 
        // 获取页面body元素
        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 = '🌞'; 
        } 
    }); 
}

2.0版本

提高了可读性的同时，也使得代码更加的灵活了，若想更换模式颜色，只需要修改body.night的样式规则即可。

// HTML
<header>
    <button id="modeBtn'"></button>
    <h1>深浅色模式切换</h1>
</header>


// CSS
body, html {
    width:100%;
    height:100%;
    max-width:600px;
    padding:0;
    margin:0;
    overflow:hidden;
}
body {
    padding:10px;
    box-sizing:border-box;
    transition:all 1s;
}
#modeBtn {
    font-size:2rem;
    float:right;
    border:none;
    outline:none;
    cursor:pointer;
    background:inherit;
}
body.night { 
    background-color: black; 
    color: white; 
    // 增加了1s的切换延时
    transition: all 1s;  
} 
#modeBtn::after { 
    //各司其职，让css来实现图标的切换 
    content: '🌞'; 
} 
body.night #modeBtn::after { 
    content: '🌜'; 
}

// JavaScript
window.onload = function() {
    document.getElementById("file-btn")
    const btn document.getElementById('modeBtn');
    btn.addEventListener('click',(e) => {
        const body = document.body;
        if(body.className !== 'night'){
            //通过cLassName.的'night'来显示深色模式，判断上更直
            body.className = 'night'; 
        } 
        else {
            body.className = '';
        }
    })
}

3.0版本

3.0版本中通过 CSS 来完成了本来应该 JS 完成的切换模式并记住状态的功能。其中选中状态用伪类选择器#modeCheckBox:checked来标记。

// HTML
<input id="modeCheckBox" type="checkbox"> //通过点击，记住勾选和不勾选的两个状态，刚好对应浅色模式和深色模式两种状态
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深浅色模式切换</h1>
    </header>
  </div>

// CSS
body, html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
}

body {
  box-sizing: border-box;
}

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

#modeCheckBox {
  display: none; //将大盒子外面的checkbox隐藏起来
}

#modeCheckBox:checked+.content { 
  //通过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类
  background-color: black;
  color: white;
  transition: all 1s;
    }

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

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

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

2. 组件封装

组件是指 Web 页面上抽出来的一个个包含模版（HTML）、功能（JS）和样式的（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

3. 代码写作关注事项

写代码不能只关注一个方面，需要具体情况具体分析，同时也需要从算法的时间、空间复杂度上去考虑，某些情况下，可以牺牲一定的代码可读性来提高程序的性能。

个人总结

很有意义的一门课程，没有过多赘述js的一些基础语法，而是通过一些有趣的案例对js进行了讲解和拓展，感觉收获良多，但因为时间有限，很多内容没有完全掌握，在接下来的时间里还是会多多去看相关内容的~

avatar
文章
阅读
粉丝