一.各司其值

各司其值是什么呢？就是让HTML，CSS和JavaScript职能分离。

版本1：

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

版本1这样的代码虽然能正常，但违背了JS的各司其职的原则。我们完全可以进一步优化，请看版本二。

版本2：

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

使用版本二的好处是：
如果以后修改了需求，版本2明显要比版本1要容易修改，并且能让人更加直观理解原始需求。
所以我们更建议使用第二种代码。
其实我们还有第三种方法，我们也能不用JS就实现需求哦。请看版本三。

版本3：

HTML:

<input id="modeCheckBox" type="checkbox" />
<div class="content">
<label id="modeBtn" for="modeCheckBox"></label>
</div>

CSS:

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

总结：

HTML，CSS和JavaScript各司其值，
应当避免不必要的由JS直接操作样式，
可以使用class进行状态的表示，
纯展示类交互寻求零JS方案(此时无JS胜有JS)。

二.组件封装

好的UI组件具备正确性，扩展性，复用性。

基本方法：

结构设计
展现效果
行为设计
- API （功能）
- Event （控制流）

插件化

解耦

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系

模板化

解耦

将HTML模板化，更易于扩展

组件框架

抽象

将组件通用模型抽象出来`

三.过程抽象

应用函数式编程思想

过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

如何写好JavaScript | 青训营笔记