跟着月影学 JavaScript | 青训营笔记

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

实现主题切换

1. 第一种方式是通过修改 DOM 样式和内容来实现，没有体现各司其职，不利于后期扩展
2. 第二种方式是通过修改 class 名称来实现，好处是直观，利于扩展
3. 第三种方式是通过 CSS 来实现（参考借助 CSS 实现轮播图）

后两种方式各有利弊，第二种可以存储主题以方便用户下次浏览，第三种不利用 JavaScript，性能较好

借助 CSS 实现轮播图

实际上 CSS 也可以实现轮播图，特别是需求很简单的情况下，可以借助 checked 伪类和 兄弟选择器来实现，可以用来实现 tab 页面，循环轮播图（渐变切换）

    input[type="radio"]:nth-of-type(1):checked ~ .u-sld{
      transform: translateX(0);
    }
    input[type="radio"]:nth-of-type(2):checked ~ .u-sld{
      transform: translateX(-100%);
    }
    input[type="radio"]:nth-of-type(1):checked ~ .m-tab .u-tab:nth-of-type(1){
      background: #fff;
    }
    input[type="radio"]:nth-of-type(2):checked ~ .m-tab .u-tab:nth-of-type(2){
      background: #fff;
    }

高阶函数

高阶函数是一个函数以另一个函数为参数

const f = (x) => x * x;
const arr = [1, 2, 3];
const newArr = arr.map(f);

高阶函数最大的好处就是增强可扩展性，我们通过自定义比较方法来进行排序

const f = (a, b) => a.length > b.length;
const arr = ['1hhfw', 'afef2efw', '3afe'];
arr.sort(f);

编程范式

命令式编程

命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么，这一范式可以分为面向对象和面向过程，面向过程主要代表是 C 和 Fortran，面向对象主要代表是 C++ 和 Java

声明式编程

声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。这一范式可以分为逻辑式和函数式，逻辑式代码主要有 Prolog，函数式主要代表有 HashKell 和 Erlang

JavaScript 的函数式编程

函数式编程是通过一组函数来编写程序的风格，强调将所有东西封装到函数中，以计算数组中每个元素的平方来说明：

如果是命令式编程，我们会这样写

const arr = [1, 2, 3];
for(let i = 0; i < 3; i++){
    arr[i] = arr[i] * arr[i];
}

但如果是函数式编程，我们会这样写

const arr = [1, 2, 3];
const f = (x) => x * x;
arr.map(f);