1 JavaScript编码原则

1.1 各司其职

HTML/CSS/JavaScript各司其责
- HTML -> Structural ; CSS -> Presentational ; JavaScript -> Behavioral
应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互应寻求零JS方案

白天夜间模式——方案一

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

白天夜间模式——方案二

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

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

1.2 组件封装

组件是指Web页面上抽出来的一个个包含模块（HTML）、样式（CSS）和功能（JS）的单元。好的组件具备封装性、正确性、扩展性、复用性。实现组件的步骤：结构设计、展现效果、行为设计，三次重构：插件化重构、模板化重构、抽象化重构。

结构设计：HTML
展现效果：CSS
行为设计：JS
- API（功能），API 设计应保证原子操作，职责单一，满足灵活性。
- Event（控制流），使用自定义事件来解耦。
插件化重构，即解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模板化重构
- 将HTML模板化，更易于扩展
抽象化重构（组件框架）
- 将通用的组件模型抽象出来

1.3 过程抽象

过程抽象是指用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。

高阶函数
1. 以函数作为参数
2. 以函数作为返回值
3. 常用于函数装饰器
构造 once 高阶函数，为了能够让“只执行一次”的需求（例如一些异步操作、一次性的HTTP请求）覆盖不同的事件处理，我们可以将这个需求利用闭包剥离出来。这个过程称为过程抽象。
防抖函数：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce(fn, time=50) {
    let timer;
    return function (...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, time)
    }
}

节流函数(定时器方案)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

function throttle(fn, time=500) {
    let timer;
    return function (...args) {
        if (timer == null) {
            fn.apply(this, args);
            timer = setTimeout(function () {
                timer = null;
            }, time)
        }
    }
}

如何写好JavaScript学习笔记 | 青训营

1 JavaScript编码原则

1.1 各司其职

1.2 组件封装

1.3 过程抽象