跟着月影学JavaScript（上） | 青训营笔记

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

如何写好JavaScript

如何写好JS？一个常规的组件从最开始到迭代、一步步改进，重构过程的思路分析 。 从最简单的一个问题，一步步迭代实现出一个抽象的组件。写好JS的一些原则，各司其责、组件封装、过程抽象。

各司其职

让 HTML、CSS和 JavaScript 职能分离，在写代码的时候应该让它们各自负责自己该负责的部分，尽可能的少用 JS 干扰 CSS 和 HTML ，这样的代码才是高质量的。

• html：负责结构 （Structural）
• css：负责表现（Presentational）
• js：负责行为（Behavioral）

如何让其各司其职，示例如下

写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。实现效果如下：

当点击了🌞之后变为：

版本一

JavaScript：

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

我们在js中操作了body的style，修改了元素的样式和结构，显得结构混乱，这样的写法明显不符合我们的各司其职的原则！而且封装性不足，复用性不强、不可配置，还可能会造成全局污染。重要的是光看代码有可能会不明白它表达什么意思。

版本二

JavaScript：

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

这样做比上一版本的好处是

• 去掉了直接操作style，代码各司其职，可读性，可扩展性，可维护性都会更好更高；
• 修改元素的类名className，像night，我们都明白是晚上的意思；

版本三

HTML：

<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>跟着月影学JavaScript</p>
        </div>
    </main>
</div>

CSS：

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

较前两版本的好处

• 可以让HTML、CSS、JavaScript各司其责
• 而且没有用到JavaScript就将功能实现
• 可以用class来表示状态
• 纯展示类交互寻求零 JS方案

总结

通过以上三种不同的版本，三个版本代码一次又一次得到优化，更简练也更加直观，这也是我们今后学习前端需要努力的目标！