写好JS的原则一：各司其责

让HTML、CSS和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 = '🌞'
    }
});

版本二：

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

版本三：

<input id="modeCheckBox" type="checkbox">
<div class="content">
    <header>
        <label id="modeBtn" for="modeCheckBox">
        <h1>深夜食堂</h1>
    </header>
    ........
</div>

#modeCheckBox {
    display: none;
}

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

代码对比：
版本二比版本一的代码更加整洁，版本一通过JS直接操作元素的style，而版本二是操作了classNam，且在开发中我们通常使用className来定义元素的状态。版本一中使用JS做了CSS该做的事情，没有做到HTML、CSS、JS的各司其责。版本二做到了结构表现行为分离，但是在纯样式改变的情况下只用CSS就可以实现，因此版本三是最佳的。

总结：HTML负责结构，CSS负责表现，JS负责行为，且在纯样式改变的情况下最好只用CSS控制样式，不去添加JS行为。各司其责的意思便是结构、表现、行为分离，这是在前端开发中所要遵循的一个原则。

写好JS的原则二：组件封装

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

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

- 组件设计的原则：封装性、正确性、扩展性、复用性。

- 实现组件的步骤：结构设计、展现效果、行为设计

- 三次重构：

插件化
模板化
抽象化（组件框架）

写好JS的原则三：过程抽象

应用函数式编程思想

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

高阶函数

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

- HOF：

以函数作为参数
以函数作为返回值
常用于作为函数修饰器

- 常用高阶函数：

HOF（Once、Throttle、Debounce、Consumer/2、Iterative）

- 编程范式：

过程抽象/HOF/装饰器
命令式/声明式

总结

三个写JS代码的原则

一：各司其责，HTML、CSS。JS分别负责它们各自的任务，即结构、表现与行为。

二：组件封装，组件封装的原则即考虑其复用性、可扩展性、正确性。对组件抽象，做插件化、模板化，从而实现组件框架。

三：过程抽象，针对局部细节的实现与行为可以使用过程抽象，其是函数式编程的一个基本应用，其具有命令式和声明式两种不同的编程范式，声明式比命令式更具有可扩展性，在日常开发中我们可以更多的去考虑使用声明式来编写代码。

前端与HTML | 青训营