【前端编码原则 | 青训营】这是我参与「第五届青训营」伴学笔记创作活动的第 3 天今天跟着月影老师通过讲解JavaS

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

今天跟着月影老师通过讲解JavaScript，来引入前端编码中的一些准则，了解什么是一段好的JavaScript代码。

以下面三个方面说明：

各司其职
组件封装
过程抽象

各司其职

什么是各司其职呢？顾名思义就是做好自己的事。前面课程了解到 HTML 是搭建页面结构，CSS 是丰富元素样式，而 JavaScript 则是添加元素行为的。明白这个就知道什么是各司其职了。

下面以前端页面中很常见的一个需求为例子具体说明“各司其职”在 JavaScript 代码中的体现：

需求：写一段 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 是为元素添加行为的，但是上面的程序，在 JavaScript 代码中进行了 CSS 样式的修改，即做了 CSS 的事，如果后期更改了需求，其他人来看这段代码，不容易更改，代码维护起来困难，那应该怎么优化呢？

下面看这种写法：

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

优化后的 JavaScript 代码，在 if 条件判断中做了类名的判断，并将判断执行代码逻辑改为 JS 代码，样式的修改权交给了 CSS 去做，通过类名变换，达到样式的变换。

这样也就是说的“各司其职”。总结几点就是：

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

组件封装