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

本堂课重点内容

写好JS的一些原则

各司其责：三件套职能分离，实现各自的功能，应当避免不必要的由 JS 直接操作样式
组件封装：UI组件封装好，具有正确性、扩展性、复用性
过程抽象：应用函数式编程思想

三次重构

三件套需要解耦，插件化，把控制元素抽象成插件，插件和组件之间用依赖注入方式连接
HTML模板化，js里面用render函数生成HTML代码。js里面的组件控制结构
组件框架，将组件通用模型抽象出来

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

高阶函数

HOF

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

常用高阶函数

HOF

[Once]只调用一次
[Throttle]节流：对原始函数包装，在五百毫秒后才调用。
[Debounce]防抖：停顿才调用方法。每次动后clear掉timeout,停下来超时才调用。
[Consumer]：每隔一秒计算并在控制台输出/[2]延时调用：执行很多次很快的操作；将它们存在列表中，遍历列表，每隔一段时间执行一次，返回一个结果。
[Iterative]可迭代方法：原本只操作一个参数，传入一个列表，可以批量操作。

为什么要使用高阶函数？

高阶函数本身是纯函数。纯函数（输入输出）比较好做单元测试，直接调用就可以，不需要构建运行时环境。

实践练习例子

交通灯状态切换

版本一：setTimeout进行嵌套循环

版本二：数据抽象。状态数组作为递归函数的输入。

版本三：过程抽象。

版本四：异步+函数式

判断是否是4的幂

  function isPowerOfFour(num){
  num = parseInt(num);
  
  return num > 0 &&
         (num & (num - 1)) === 0 &&
         (num & 0xAAAAAAAAAAAAA) === 0;
}

实现了O（1）的时间复杂度。其中，(num & (num - 1)) === 0保证num为2的幂（num的二进制中只有一个1）；(num & 0xAAAAAAAAAAAAA) === 0保证num在只有一个1的基础上是4的幂（偶数位上没有1）。

function isPowerOfFour(num) {
   num = parseInt(num).toString(2);
  
   return /^1(?:00)*$/.test(num);

将num转化为字符串，判断是否是‘1’+n*‘00’组成的

分红包-[切西瓜法]

每分一次之后下一次找最大的区间分

问题：分的比较均匀，无法出现差异更悬殊的红包分法

分红包-[抽牌法]

将抽排后的序列作为红包分割位置

课后个人总结

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。

前端页面就是由这三部分代码组成：浏览器在读取一个网页时，代码（HTML, CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页）。在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前，网页的结构和样式已经就位。JavaScript 最普遍的用处是通过 DOM API（见上文）动态修改 HTML 和 CSS 来更新用户界面（user interface）。

引用参考 青训营-如何写好JS - 码上掘金 (juejin.cn) 什么是 JavaScript？ - 学习 Web 开发 | MDN (mozilla.org)

JavaScript | 青训营笔记