一、写好JS的一些原则

1-1、各司其职

让HTML、CSS和JavaScript职能分离。

如何写一段JS控制一个网页，让其支持浅色和深色两种模式。

为便于记录，HTML和CSS的代码就没有写了。不过不影响接下来的记录。

如何优化一段代码，先来看这个版本的功能切换：

const btn = document.getElementById('modeBtn')
btn.addEventListener('click', (e) => {
    const body = document.body;
    if (e.target.innerHTML == 'sun') {
        body.style.backgroundColor = 'black';
        body.style.color = 'white';
        e.target.innerHTML = 'moon';
    } else {
        body.style.backgroundColor = 'white';
        body.style.color = 'black';
        e.target.innerHTML = 'sun';
    }
});

那么来考虑以下什么是各司其职呢？就是JavaScript代码并不用来控制样式，而是通过css来控制样式。

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

最后月影大佬还实现了一个纯HTML和CSS的代码，不过今天的课主要是讲JS，所以那段代码我就不放出来了。不过上面这两段代码也已经把最终目的实现了，即实现职能分离。

1-2、组件封装

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

此处可以参考Swiper组件的使用，根据Swiper结构写出来的轮播图，你只用把要展示的图片传进去就可以了，通过了解sweper轮播图组件的封装你也就能了解什么是上面所说的特性了。

组件封装的基本方法：

结构设计
展现效果

行为设计

  API（功能）

  Event（控制流）

总结：

组件设计的原则：封装性、正确性、扩展性、复用性
实现组建的步骤：结构设计、展现效果、行为设计
三级重构
- 插件化
- 模板化
- 抽象化

1-3、过程抽象

应用函数式编程思想。

要想应用函数式编程，首先得具备将函数抽离出来的功能。

function once(fn) {
    return function(...args) {
        if (fn) {
            const ret = fn.apply(this, args);
            fn = null;
            return ret;
        }
    }
}

像上面这个例子，你可以选择每次定义一个功能——让该函数只可以执行一次，也可以选择抽离出功能，写一个函数，然后将传入的函数变为只能执行一次的函数。我记得曾经听过一句话，当你在写代码时开始复制粘贴时，你的代码一定不是好代码。

此外，月影大佬还讲解了声明式编程与函数式编程的区别。

用大白话来讲，就是你有一个机器人，你叫它拿一杯水给你，然后它就拿来了，这叫声明式。反之，你告诉它往前走，然后到饮水机前，接水，然后再把杯子拿给你，这就叫命令式编程。

这里有示例代码，你可以看看。

// 命令式
let list1 = [1, 2, 3, 4];
let mapl = [];
for (let i = 0; i < list1.length; i++) {
    mapl.push(list1[i] * 2);
}
console.log(map1); // [ 2, 4, 6, 8 ]

// 声明式
let list2 = [1, 2, 3, 4];
const double = x => x*2;
list2 = list2.map(double)
console.log(list2); // [ 2, 4, 6, 8 ]

前端三件套之JavaScript | 青训营笔记

一、写好JS的一些原则

1-1、各司其职

1-2、组件封装

1-3、过程抽象