iotale / garden Goto Github PK

随着技术与设备的发展，用户的终端对动画的表现能力越来越强，更多的场景开始大量使用动画。在 Web 应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame

本文内容均非原创，而是在知识点的收集与搬运中学习与理解，也欢迎大家收集与搬运本篇文章！

1. 是什么

• HTML5 新增加的 API，类似于 setTimeout 定时器

• window 对象的一个方法，window.requestAnimationFrame

  partial interface Window {
    long requestAnimationFrame(FrameRequestCallback callback);
    void cancelAnimationFrame(long handle);
  };

• 浏览器(所以只能在浏览器中使用)专门为动画提供的 API，让 DOM 动画、Canvas 动画、SVG 动画、WebGL 动画等有一个统一的刷新机制

2. 做什么

• 浏览器重绘频率一般会和显示器的刷新率保持同步。大多数浏览器采取 W3C 规范的建议，浏览器的渲染页面的标准帧率也为 60FPS（frames/ per second）

• 按帧对网页进行重绘。该方法告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画

• 由系统来决定回调函数的执行时机，在运行时浏览器会自动优化方法的调用

  • 显示器有固定的刷新频率（60Hz 或 75Hz），也就是说，每秒最多只能重绘 60 次或 75 次，requestAnimationFrame 的基本**让页面重绘的频率与这个刷新频率保持同步

    比如显示器屏幕刷新率为 60Hz，使用requestAnimationFrame API，那么回调函数就每1000ms / 60 ≈ 16.7ms执行一次；如果显示器屏幕的刷新率为 75Hz，那么回调函数就每1000ms / 75 ≈ 13.3ms执行一次。

  • 通过requestAnimationFrame调用回调函数引起的页面重绘或回流的时间间隔和显示器的刷新时间间隔相同。所以 requestAnimationFrame 不需要像setTimeout那样传递时间间隔，而是浏览器通过系统获取并使用显示器刷新频率

    比如一个动画，宽度从 0px 加一递增到 100px。无缓动效果的情况下，浏览器重绘一次，宽度就加 1。

3. 用法

动画帧请求回调函数列表：每个 Document 都有一个动画帧请求回调函数列表，该列表可以看成是由<handle, callback>元组组成的集合。

• handle 是一个整数，唯一地标识了元组在列表中的位置，cancelAnimationFrame()可以通过它停止动画
• callback 是一个无返回值的、形参为一个时间值的函数（该时间值为由浏览器传入的从 1970 年 1 月 1 日到当前所经过的毫秒数）。
• 刚开始该列表为空。

页面可见性 API

• 当页面被最小化或者被切换成后台标签页时，页面为不可见，浏览器会触发一个visibilitychange事件，并设置document.hidden属性为true
• 当页面切换到显示状态，页面变为可见，同时触发一个visibilitychange事件，设置document.hidden属性为false

• 调用操作。与setTimeout相似，但是不需要设置间隔时间，使用一个回调函数作为参数，返回一个大于 0 的整数

  handle = requestAnimationFrame(callback);

  • 参数callback，是一个回调函数，在下次重新绘制动画时调用。该回调函数接收唯一参数，是一个高精度时间戳（performance.now()），指触发回调函数的当前时间（不用手动传入）
  • 返回值是一个long型的非零整数，是requestAnimationFrame回调函数列表中唯一的标识，表示定时器的编号，无其他意义

• 取消操作

  cancelAnimationFrame(handle);

  • 参数是调用requestAnimationFrame时的返回值
  • 取消操作没有返回值

• 浏览器执行过程

  • 首先判断document.hidden属性是否为true（页面是否可见），页面处于可见状态才会执行后面步骤

  • 浏览器清空上一轮的动画函数

  • requestAnimationFrame将回调函数追加到动画帧请求回调函数列表的末尾

    当执行requestAnimationFrame(callback)的时候，不会立即调用 callback 函数，只是将其放入队列。每个回调函数都有一个布尔标识cancelled，该标识初始值为false，并且对外不可见。

  • 当浏览器再执行列表中的回调函数的时候，判断每个元组的 callback 的cancelled，如果为false，则执行 callback

    当页面可见并且动画帧请求回调函数列表不为空，浏览器会定期将这些回调函数加入到浏览器 UI 线程的队列中

  • 博客园上yyc 元超的文章深入理解 requestAnimationFrame中提供了让一个伪代码，用来说明“采样所有动画”任务的执行步骤

    var list = {};
    var browsingContexts = 浏览器顶级上下文及其下属的浏览器上下文;
    for (var browsingContext in browsingContexts) {
    /* !将时间值从 DOMTimeStamp 更改为 DOMHighResTimeStamp 是 W3C 针对基于脚本动画计时控制规范的最新编辑草案中的最新更改，
     * 并且某些供应商仍将其作为 DOMTimeStamp 实现。
     * 较早版本的 W3C 规范使用 DOMTimeStamp，允许你将 Date.now 用于当前时间。
     * 如上所述，某些浏览器供应商可能仍实现 DOMTimeStamp 参数，或者尚未实现 window.performance.now 计时函数。
     * 因此需要用户进行polyfill
     */
        var time = DOMHighResTimeStamp   //从页面导航开始时测量的高精确度时间。DOMHighResTimeStamp 以毫秒为单位，精确到千分之一毫秒。此时间值不直接与 Date.now() 进行比较，后者测量自 1970 年 1 月 1 日至今以毫秒为单位的时间。如果你希望将 time 参数与当前时间进行比较，请使用当前时间的 window.performance.now。
      var d = browsingContext 的 active document;   //即当前浏览器上下文中的Document节点
        //如果该active document可见
        if (d.hidden !== true) {
            //拷贝 active document 的动画帧请求回调函数列表到 list 中，并清空该列表
            var doclist = d的动画帧请求回调函数列表
            doclist.appendTo(list);
            clear(doclist);
        }
        //遍历动画帧请求回调函数列表的元组中的回调函数
        for (var callback in list) {
            if (callback.cancelled !== true) {
                try {
                    //每个 browsingContext 都有一个对应的 WindowProxy 对象，WindowProxy 对象会将 callback 指向 active document 关联的 window 对象。
                    //传入时间值time
                    callback.call(window, time);
                }
                //忽略异常
                catch (e) {
                }
            }
        }
    }

  • 当调用cancelAnimationFrame(handle)时，浏览器会设置该 handle 指向的回调函数的cancelled为true（无论该回调函数是否在动画帧请求回调函数列表中）。如果该 handle 没有指向任何回调函数，则什么也不会发生。

• 递归调用。要想实现一个完整的动画，应该在回调函数中递归调用回调函数

  let count = 0;
  let rafId = null;
  /**
   * 回调函数
   * @param time requestAnimationFrame 调用该函数时，自动传入的一个时间
   */
  function requestAnimation(time) {
    console.log(time);
    // 动画没有执行完，则递归渲染
    if (count < 50) {
      count++;
      // 渲染下一帧
      rafId = requestAnimationFrame(requestAnimation);
    }
  }
  // 渲染第一帧
  requestAnimationFrame(requestAnimation);

• 如果在执行回调函数或者 Document 的动画帧请求回调函数列表被清空之前多次调用 requestAnimationFrame 调用同一个回调函数，那么列表中会有多个元组指向该回调函数（它们的 handle 不同，但 callback 都为该回调函数），“采集所有动画”任务会执行多次该回调函数。（类比定时器setTimeout）

  function counter() {
    let count = 0;
    function animate(time) {
      if (count < 50) {
        count++;
        console.log(count);
        requestAnimationFrame(animate);
      }
    }
    requestAnimationFrame(animate);
  }
  btn.addEventListener("click", counter, false);

  • 多次点击按钮，会发现打印出来多个序列数值（下图中，连续触发三次，打印了三个有序列）

    

  • 如果是作用于动画，动画会出现突变的情况

4. 兼容性

• 国际惯例 caniuse
• MDN(window.requestAnimationFrame)
• 现代浏览器版本包括移动端基本支持，难免使用祖传版本，所以还是要进行下优雅降级处理

来源：Polyfill for requestAnimationFrame/cancelAnimationFrame

在浏览器初次加载的时候执行下面的代码即可。

// 使用 Date.now 获取时间戳性能比使用 new Date().getTime 更高效
if (!Date.now)
  Date.now = function() {
    return new Date().getTime();
  };

(function() {
  "use strict";

  var vendors = ["webkit", "moz"];
  for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
    var vp = vendors[i];
    window.requestAnimationFrame = window[vp + "RequestAnimationFrame"];
    window.cancelAnimationFrame =
      window[vp + "CancelAnimationFrame"] ||
      window[vp + "CancelRequestAnimationFrame"];
  }
  // 上面方法都不支持的情况，以及IOS6的设备
  // 使用 setTimeout 模拟实现
  if (
    /iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) ||
    !window.requestAnimationFrame ||
    !window.cancelAnimationFrame
  ) {
    var lastTime = 0;
    // 和通过时间戳实现节流功能的函数相似
    window.requestAnimationFrame = function(callback) {
      var now = Date.now();
      var nextTime = Math.max(lastTime + 16, now);
      // 实际上第1帧是不准确的，首次nextTime - now = 0
      return setTimeout(function() {
        callback((lastTime = nextTime));
      }, nextTime - now);
    };
    window.cancelAnimationFrame = clearTimeout;
  }
})();

5. 优势

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率。不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间过长，使动画卡顿。

从实现的功能和使用方法上，requestAnimationFrame与定时器setTimeout都相似，所以说其优势是同setTimeout实现的动画相比。

a. 提升性能，防止掉帧

• 浏览器 UI 线程：浏览器让执行 JavaScript 和更新用户界面（包括重绘和回流）共用同一个单线程，称为“浏览器 UI 线程”
• 浏览器 UI 线程的工作基于一个简单的队列系统，任务会被保存到队列中直到进程空闲。一旦空闲，队列中的下一个任务就被重新提取出来并运行。这些任务要么是运行 JavaScript 代码，要么执行 UI 更新。

• 通过setTimeout实现动画

  • setTimeout通过设置一个间隔时间不断改变图像，达到动画效果。该方法在一些低端机上会出现卡顿、抖动现象。这种现象一般有两个原因：

    • setTimeout的执行时间并不是确定的。

      在 JavaScript 中，setTimeout任务被放进异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列的任务是否需要开始执行。所以，setTimeout的实际执行时间一般比其设定的时间晚一些。这种运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到【浏览器 UI 线程队列】中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行

      let startTime = performance.now();
      setTimeout(() => {
        let endTime = performance.now();
        console.log(endTime - startTime);
      }, 50);
      /* 一个非常耗时的任务 */
      for (let i = 0; i < 20000; i++) {
        console.log(0);
      }

      

    • 刷新频率受屏幕分辨率和屏幕尺寸影响，不同设备的屏幕刷新率可能不同，setTimeout只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同

  • 以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。

    • setTimeout的执行只是在内存中对图像属性进行改变，这个改变必须要等到下次浏览器重绘时才会被更新到屏幕上。如果和屏幕刷新步调不一致，就可能导致中间某些帧的操作被跨越过去，直接更新下下一帧的图像。

      假如使用定时器设置间隔 10ms 执行一个帧，而浏览器刷新间隔是 16.6ms（即 60FPS）

      

      由图可知，在 20ms 时，setTimeout调用回调函数在内存中将图像的属性进行了修改，但是此时浏览器下次刷新是在 33.2ms 的时候，所以 20ms 修改的图像没有更新到屏幕上。
      而到了 30ms 的时候，setTimeout又一次调用回调函数并改变了内存中图像的属性，之后浏览器就刷新了，20ms 更新的状态被 30ms 的图像覆盖了，屏幕上展示的是 30ms 时的图像，所以 20ms 的这一帧就丢失了。丢失的帧多了，画面就卡顿了。

• 使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿

b. 节约资源，节省电源

• 使用 setTimeout 实现的动画，当页面被隐藏或最小化时，定时器setTimeout仍在后台执行动画任务，此时刷新动画是完全没有意义的（实际上 FireFox/Chrome 浏览器对定时器做了优化：页面闲置时，如果时间间隔小于 1000ms，则停止定时器，与requestAnimationFrame行为类似。如果时间间隔>=1000ms，定时器依然在后台执行）

  // 在浏览器开发者工具的Console页执行下面代码。
  // 当开始输出count后，切换浏览器tab页，再切换回来，可以发现打印的值没有停止，甚至可能已经执行完了
  let count = 0;
  let timer = setInterval(() => {
    if (count < 20) {
      count++;
      console.log(count);
    } else {
      clearInterval(timer);
      timer = null;
    }
  }, 2000);

• 使用requestAnimationFrame，当页面处于未激活的状态下，该页面的屏幕刷新任务会被系统暂停，由于requestAnimationFrame保持和屏幕刷新同步执行，所以也会被暂停。当页面被激活时，动画从上次停留的地方继续执行，节约 CPU 开销。

  // 在浏览器开发者工具的Console页执行下面代码。
  // 当开始输出count后，切换浏览器tab页，再切换回来，可以发现打印的值从离开前的值继续输出
  let count = 0;
  function requestAnimation() {
    if (count < 500) {
      count++;
      console.log(count);
      requestAnimationFrame(requestAnimation);
    }
  }
  requestAnimationFrame(requestAnimation);

c. 函数节流

• 一个刷新间隔内函数执行多次时没有意义的，因为显示器每 16.7ms 刷新一次，多次绘制并不会在屏幕上体现出来
• 在高频事件（resize，scroll等）中，使用requestAnimationFrame可以防止在一个刷新间隔内发生多次函数执行，这样保证了流畅性，也节省了函数执行的开销
• 某些情况下可以直接使用requestAnimationFrame替代 Throttle 函数，都是限制回调函数执行的频率

6. 应用

• 简单的进度条动画

  function loadingBar(ele) {
    // 使用闭包保存定时器的编号
    let handle;
    return () => {
      // 每次触发将进度清空
      ele.style.width = "0";
      // 开始动画前清除上一次的动画定时器
      // 否则会开启多个定时器
      cancelAnimationFrame(handle);
      // 回调函数
      let _progress = () => {
        let eleWidth = parseInt(ele.style.width);
        if (eleWidth < 200) {
          ele.style.width = `${eleWidth + 5}px`;
          handle = requestAnimationFrame(_progress);
        } else {
          cancelAnimationFrame(handle);
        }
      };
      handle = requestAnimationFrame(_progress);
    };
  }

• 添加缓动效果，实现一个元素块按照三阶贝塞尔曲线的ease-in-out缓动特效参数运动。如何使用 Javascript 实现缓动特效

缓动动画：指定动画效果在执行时的速度，使其看起来更加真实。

/**
 * @param {HTMLElement} ele 元素节点
 * @param {number} change 改变量
 * @param {number} duration 动画持续时长
 */
function moveBox(ele, change, duration) {
  // 使用闭包保存定时器标识
  let handle;
  // 返回动画函数
  return () => {
    // 开始时间
    let startTime = performance.now();
    // 防止启动多个定时器
    cancelAnimationFrame(handle);
    // 回调函数
    function _animation() {
      // 这一帧开始的时间
      let current = performance.now();
      let eleTop = ele.offsetLeft;
      // 这一帧内元素移动的距离
      let left = change * easeInOutCubic((current - startTime) / duration);
      ele.style.left = `${~~left}px`;
      // 判断动画是否执行完
      if ((current - startTime) / duration < 1) {
        handle = requestAnimationFrame(_animation);
      } else {
        cancelAnimationFrame(handle);
      }
    }
    // 第一帧开始
    handle = requestAnimationFrame(_animation);
  };
}
/**
 * 三阶贝塞尔曲线ease-in-out
 * @param {number} k
 */
function easeInOutCubic(k) {
  return (k *= 2) < 1 ? 0.5 * k * k * k : 0.5 * ((k -= 2) * k * k + 2);
}

7. 相关

本文内容均非原创，而是在知识点的收集与搬运中学习与理解，也欢迎大家收集与搬运本篇文章！

• https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
• https://caniuse.com/#search=requestAnimationFrame
• https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
• https://javascript.ruanyifeng.com/htmlapi/requestanimationframe.html
• https://www.cnblogs.com/xiaohuochai/p/5777186.html
• https://juejin.im/post/6844903649366245384
• https://www.cnblogs.com/chaogex/p/3960175.html#explain
• http://www.softwhy.com/article-7204-1.html
• https://easings.net/zh-cn#
• https://zhuanlan.zhihu.com/p/25676357
• https://www.cnblogs.com/onepixel/p/7078617.html

根据HTTP标准，HTTP请求可以使用多种方法，其功能描述如下所示。

• HTTP1.0定义了三种请求方法： GET、POST、HEAD
• HTTP1.1新增了五种请求方法：OPTIONS、PUT、DELETE、TRACE 、CONNECT

HTTP DELETE

HTTP DELETE 请求方法用于删除指定的资源。DELETE 可以直接理解动词删除、移除。但是HTTP没有规范DELETE的具体实现方式。

幂等

Methods can also have the property of "idempotence" in that (aside from error or expiration issues) the side-effects of N > 0 identical requests is the same as for a single request.

HTTP方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用。

幂等性原本是数学上的概念，即使公式：f(x)=f(f(x)) 能够成立的数学性质。

DELETE 方法传参数

使用 DELETE 方法，需要提供额外的参数时，大多以**键值对（key-value）**的形式，置于URI的查询部分，如：下面的 ?gender=female

https://echo.paw.cloud:443/hello/world?age=24&gender=female

有时候，后端可能希望前端能够传递复杂的数据。那么，将参数放在 entity body 中可以吗？

不建议这样做。但是也不是不可以，因为标准规范中并没有明确禁止。

最新的 HTTP1.1 规范 RFC 7231 在 DELETE 一节中有这样的描述：

A payload within a DELETE request message has no defined semantics; sending a payload body on a DELETE request might cause some existing implementations to reject the request.

DELETE请求消息中的有效负载没有定义的语义；在DELETE请求上发送有效内容正文可能会导致某些现有实现拒绝该请求。

这个意思就是说：是的！DELETE 可以有 entity body。

目前由于规范的含糊不清，反对使用 DELETE 实体主体的主要认为：因为没有针对实体的定义的语义，这暗示着应该忽略它。即body是允许的，但与请求无关，使用它绝对没有意义。就如同，可以通过 GET 传递 body，但是这样做毫无意义。并且，如果网络中存在某些代理服务器，可能造成entity body丢失。

实际上我自己开发的时候，后端的设计的确是用到了在 DELETE 方法中传 body 的情况，所以可以看出，通过 body 传复杂参数绝对是可以实现的，并且支不支持，其实取决于后端设计。并且我觉得我们后端有偷懒的嫌疑，后端为了少些代码逻辑，总是直接让前端去搞些有的没的。

还是要思考几个问题：

1. 如果 DELETE 传递实体是为了与 API 紧密耦合，这与 REST 是相悖的，如果不希望未经授权的客户端删除资源，应该使用身份验证机制来防止此类情况
2. 如果确实需要向服务器发送复杂的参数来决定是否删除资源，要么就是设计的人没读过规范，要么就是偷懒的嫌疑。

PS：

HTML5 的表单（form）仅支持 get 与 post 方法。如果将表单的 method 改为 delete，HTML5 会以预设的 get 方法取代

axios 实现 delete 方法传参

Axios 是一个基于 promise 的 HTTP 库，从浏览器中创建 XMLHttpRequests 发送请求。其实在浏览器中 Axios 就是 AJAX 技术的一种实现。

AJAX（Asynchronous JavaScript And XML）是一种异步请求的技术，是实现网页的局部数据刷新的技术，可以通过XHR、Fetch、WebSocket等API实现。

注意：需要和Jquery的 $.ajax 区分开，前者是一种技术，而后者是 Jquery 通过 XHR 对前者的实现。

同理

Axios 是通过 Promise 实现 XHR 封装，其中Promise是控制手段，XHR 是实际发送Http请求的客户端。就像$.ajax是通过callback+XHR实现一样，你也可以造个轮子叫XXX的，都是AJAX技术的一种具体实现。

axios和ajax的区别? - 轰隆隆的回答 - 知乎

axios 实例方法 DELETE 的定义

axios#delete(url[, config])

可以看到，DELETE 方法除了接受一个url，还可接受一个 config 参数。这个 config 就是请求配置。

{
  // ...
  
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // ...
}

通过观察 config 参数可以知道

• 可以将参数拼接在 url 上，即用 params

  axios.delete('/delete', {
    params: {    // 请求参数拼接在url上
      id: 12
    }
  })

• 请求参数放在请求体用 data，虽然文档中说“只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'”，但是并没有说不允许 DELETE方法使用，所以下面也是可以传参数的，只是不符合HTTP1.1的规范罢了。

  最新的文档已经修改，将 DELETE 方法也加上了，所以说 axios 已经支持 DELETE 方法通过 body 传参了

  axios.delete('/delete', {    // 请求参数放在请求体
    data: {
      id: 12
    }
  })

也可以不使用方法别名，直接通过向 axios 传递相关配置来创建请求，其实只是看着不一样而已。

axios({
  method: 'delete',
  url: '/delete',
  params: {}, // 请求参数拼接在url上
  data: {},   // 请求参数放在请求体
});

axios 如何实现的？

跟踪config的处理

// https://github.com/axios/axios/blob/16aa2ce7fa42e7c46407b78966b7521d8e588a72/lib/core/Axios.js#L73

utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(mergeConfig(config || {}, {
      method: method,
      url: url
    }));
  };
});

可以看到，请求参数传给了 this.request 方法

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}

// https://github.com/axios/axios/blob/16aa2ce7fa42e7c46407b78966b7521d8e588a72/lib/core/Axios.js#L27
Axios.prototype.request = function request(config) {
  // ...

  // 合并请求配置
  config = mergeConfig(this.defaults, config);

  // ...

  // 连接拦截器中间件
  // 设置一个队列，用来放请求拦截器和反应拦截器
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    // 将请求拦截器成功与失败的处理放在队列头
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
  
  // chain.shift() 会从队列头取元素，所以会先执行 dispatchRequest
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }
  
  // ...
};

到 dispatchRequest 这个方法，基本上就可以看到，body 参数的去向了

// https://github.com/axios/axios/blob/16aa2ce7fa42e7c46407b78966b7521d8e588a72/lib/core/dispatchRequest.js#L23
module.exports = function dispatchRequest(config) {
  // ...
  
  // Ensure headers exist
  config.headers = config.headers || {};

  // Transform request data
  config.data = transformData(
    config.data,
    config.headers,
    config.transformRequest
  );
  
  // ...
}

transformData 方法是将 config 传给拦截器进行执行，到此，其实发送请求前的 header 和实体 body 都已经构造完毕。

接下来就是 axios 如何将参数通过XHR发送出去了。也就是axios封装的 xhr

// axios/lib/adapters/xhr.js

module.exports = function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    var requestData = config.data;
    
    // ...
    
    // 创建XMLHttpRequest实例 
    var request = new XMLHttpRequest();
    
    // ...

    // 发送请求
    request.send(requestData);
  });
}

参考：

• https://stackoverflow.com/questions/299628/is-an-entity-body-allowed-for-an-http-delete-request
• https://stackoverflow.com/questions/978061/http-get-with-request-body
• https://notfalse.net/45/http-head-put-delete
• https://tools.ietf.org/html/rfc7231#section-4.3.5
• https://github.com/axios/axios/blob/master/lib/core/Axios.js
• https://segmentfault.com/a/1190000021327504

所谓同步还是异步指的是调用 setState 之后是否马上能得到最新的 state。

setState 的异步

setState 的“异步”并不是说内部由异步代码实现，相反其执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”。

可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

一个具体例子：

handleClickOnLikeButton () {
  this.setState((prevState) => {
    return { count: 0 }
  })
  this.setState((prevState) => {
    return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
  })
  this.setState((prevState) => {
    return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
  })
  // 最后的结果是 this.state.count 为 3
}

先说结论：既可以异步更新也可以同步更新

• 异步：

  • 合成事件的回调中或在生命周期函数中直接调用
  • concurrent 模式下都为异步 concurrent 模式Demo

• 同步：（legacy 模式下才生效）

  • 异步代码中调用（如setTimeout, Promise, MessageChannel等）

    异步代码中调用 setState，由于js的异步处理机制，异步代码会暂存，等待同步代码执行完毕再执行，此时 React 的批处理机制已经结束，因而直接更新。

  • 监听原生事件而非 React 的合成事件，在原生事件的回调函数中执行 setState 就是同步的。原因是原生事件不会触发 React 的批处理机制，因而调用 setState 会直接更新

三种模式（当前 v17）

• legacy 模式： ReactDOM.render(<App />, rootNode)。这是当前 React app 使用的方式。当前没有计划删除本模式，但是这个模式可能不支持这些新功能。
• blocking 模式： ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在实验中。作为迁移到 concurrent 模式的第一个步骤。
• concurrent 模式： ReactDOM.createRoot(rootNode).render(<App />)。目前在实验中，未来稳定之后，打算作为 React 的默认开发模式。这个模式开启了所有的新功能。
  • 可中断渲染模式。在 Concurrent 模式中，渲染不是阻塞的，优先级高的任务可以中断渲染从而优先执行
  • React 可以在不同版本的树上进行切换，一个是你屏幕上看到的那个版本，另一个是它“准备”接下来给你显示的版本
  • Concurrent 模式减少了防抖和节流在 UI 中的需求

原因

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

当 this.setState() 被调用的时候，React 会调用 render 方法来重新渲染UI，渲染 UI 的过程其实就是操作 DOM 的过程，DOM 的操作对性能的损耗是非常严重的，所以 React 为了提高整体的渲染性能，会将一次渲染周期中的 state 进行合并，再一次性的渲染，这样可以避免频繁调用 setState 导致频繁的操作 DOM 了，从而提高渲染性能。

至于实现原理，由于代码不断的更新优化，也许以后还会更新，所以知道有这个逻辑就好，需要的时候再去阅读当前版本的代码。平时只要知道不需要担心多次进行 setState 会带来性能问题就行。

比如之前是通过 isBatchingUpdates 这个布尔属性判断是否合并更新。到后来更新 Fiber 架构后，是否同步更新的判断逻辑放进了 ReactFiberWorkLoop 中，最新又有变动，重构了 Fiber.expirationTime 并引入 Fiber.lanes。源码位置

在线查看

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleAddCount = this.handleAddCount.bind(this);
    this.btnRef = React.createRef();
  }
  componentDidMount() {
    this.handleAddCount(null, 'a');

    setTimeout(this.handleAddCount, 1 * 1000);

    Promise.resolve().then(() => {
      this.handleAddCount(null, 'b');
    });

    const button = this.btnRef.current;
    if (button) {
      button.addEventListener("click", this.handleAddCount);
    }
  }
  componentWillUnmount() {
    const button = this.btnRef.current;
    if (button) {
      button.removeEventListener("click", this.handleAddCount);
    }
  }
  handleAddCount(e, key = 'c') {
    console.log(`${key}-0`, this.state.count);
    this.setState({ count: this.state.count + 1 });
    console.log(`${key}-1`, this.state.count);
    this.setState({ count: this.state.count + 100 });
    console.log(`${key}-2`, this.state.count);
  }
  render() {
    return (
      <div>
        <p>count: {this.state.count}</p>
        <div>
          <button onClick={this.handleAddCount}>React 合成事件改变 state</button>
          <button ref={this.btnRef}>addEventListener 事件改变 state</button>
        </div>
      </div>
    );
  }
}

const domContainer = document.querySelector("#app");

// legacy 模式
ReactDOM.render(<App />, domContainer);

扩展：下面 4 次打印都是什么值？详细讨论

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
  render() {
    return null;
  }
};

分情况：

• legacy 模式：0 0 2 3
• concurrent 模式：0 0 1 1

参考

• React 中 setState 什么时候是同步的，什么时候是异步的？
• Introducing Concurrent Mode

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools Protocol 控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

Puppeteer 可以做的事情很多，常见的有抓取页面（做爬虫）、SSR、自动化测试以及前端页面性能分析等等。它其实就是一个“运行在 node 端的 Chrome 浏览器”。

安装 Puppeteer 的时候默认会下载最新版本的 Chromium，这可是上百 MB 的大家伙，国内网络环境不理想的情况下，很难下载成功。所以经常会出现因为下载 Chromium 失败而导致整个安装过程失败的问题。就像下面这样：（npm 源是官方源，未使用代理）

Puppeteer Environment Variables

Puppeteer 寻找某些环境变量来帮助其操作。 下面是 node env 中使用的变量，另一种就是在 npm config 中使用全小写的变量名设定。

• HTTP_PROXY, HTTPS_PROXY, NO_PROXY - 定义用于下载和运行 Chromium 的 HTTP 代理设置。
• PUPPETEER_SKIP_CHROMIUM_DOWNLOAD - 请勿在安装步骤中下载绑定的 Chromium。
• PUPPETEER_DOWNLOAD_HOST - 覆盖用于下载 Chromium 的 URL 的主机部分。
• PUPPETEER_CHROMIUM_REVISION - 在安装步骤中指定一个你喜欢 puppeteer 使用的特定版本的 Chromium。
• PUPPETEER_EXECUTABLE_PATH - 指定一个 Chrome 或者 Chromium 的可执行路径，会被用于 puppeteer.launch

解决

1 使用 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 环境变量跳过 Chromium 的下载

首先造成 Puppeteer 安装失败的原因是 Chromium 下载失败导致的，所以可以先跳过 Chromium 的下载。上图在安装的输出信息中也能看到提示 ERROR: Failed to set up Chromium r848005! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.

使用下面的安装命令：

env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm i puppeteer

顺利完成 Puppeteer 的安装了，但是现在还不能使用，运行代码会报错

➜ node index.js
(node:56008) UnhandledPromiseRejectionWarning: Error: Could not find expected browser (chrome) locally. Run `npm install` to download the correct Chromium revision (848005).

因为 Puppeteer 运行依赖 Chromium ，所以需要在项目中指定 Chromium 的路径，我们可以手动下载当前 Puppeteer 所依赖的版本（报错信息中有版本号），也可以在 node_modules/puppeteer/lib/cjs/puppeteer/revisions.js 中找到

exports.PUPPETEER_REVISIONS = {
    chromium: '848005',
    firefox: 'latest',
};

然后通过 taobao 镜像网站下载对应版本的 Chromium 文件。下载下来的文件直接解压，尽量不要重命名，比如 macOS 对应解压出来后的文件名是 “chrome-mac”。

有三种方式让 Puppeteer 使用我们下载好的 Chromium：

1. puppeteer.launch([options]) 设置 options 中的 executablePath 属性，传入 Chromium 可执行文件的路径即可

const browser = await puppeteer.launch({executablePath: 【路径】});

2. 通过 env 设置环境变量运行 node

   env PUPPETEER_EXECUTABLE_PATH=./chrome-mac/Chromium.app/Contents/MacOS/Chromium node index.js

3. 将下载的文件放入 Puppeteer 模块内，比如 macOS 中路径为 node_modules/puppeteer/.local-chromium/mac-848005/chrome-mac/Chromium.app/Contents/MacOS/Chromium

2 通过 PUPPETEER_DOWNLOAD_HOST 设置国内镜像【推荐】

运行安装命令的时候，使用环境变量

env PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors npm i puppeteer

或者在 .npmrc 中设置镜像地址

# .npmrc
puppeteer_download_host=https://npm.taobao.org/mirrors

对比发现不设置下载镜像地址时，我本地安装时间非常长，并且很容易中间断掉而失败

> node install.js

Downloading Chromium r848005 - 110.5 Mb [=                   ] 2% 17198.2s ^C

但是设置了镜像地址后，总的安装时间只需要二三十秒。

3 设置 npm registry 为 taobao 源

# .npmrc

home=https://npm.taobao.org

亲测，时间也缩短为几十秒，且成功下载。

采用LaTex语法写数学公式，github issue 暂不支持该语法

什么是对数函数

对数函数是指数函数的反函数，指数函数 $Y=a^X$ 对应的对数函数形式为 $X = \log_aY$。

**根据 $a^X = a^{\log_aY}$ ，可得 $a^{\log_aY} = Y$ **。【①】

这个结论很重要，下面的证明过程需要用到。

下面的证明默认条件成立的前提 $a>0$，且 $a≠1$

$\log_aMN = \log_aM + \log_aN$

[证明]

$a^{log_aMN} = MN$ 【根据①式得】

$a^{\log_aMN} = a^{\log_aM} × a^{\log_aN}$ 【根据①式替换上式等号右边】

$a^{\log_aMN} = a^{\log_aM + \log_aN}$ 【根据同底指数幂想加 $a^{m+n} = a^m × a^n $ 替换上式等号右边】

证得 $\log_aMN = \log_aM + \log_aN$ 【②】

$\log_a\dfrac{M}{N} = \log_aM - \log_aN$

证明过程同上，依据①式和 $a^{m-n} = \frac{a^m}{a^n}$ 【③】

$\log_aM^n = n\log_aM$

[证明]

$a^{\log_aM^n} = M^n$

$a^{\log_aM^n} = (a^{\log_aM})^n$ 【变换上式等号右边】

$a^{\log_aM^n} = a^{(\log_aM) × n}$ 【根据 $(a^m)^n = a^{m × n}$】

$a^{\log_aM^n} = a^{n\log_aM}$

证得 $\log_aM^n = n\log_aM$ 【④】

$\log_{a^n}M = \dfrac{1}{n}\log_aM$

[证明]

$(a^n)^{\log_{a^n}M} = M$

$a^{n × (\log_{a^n}M)} = a^{\log_aM}$

$n × \log_{a^n}M = \log_aM$ 【上式的指数】

证得 $\log_{a^n} = \dfrac{1}{n}\log_aM$ 【⑤】

换底公式 $\log_ba = \dfrac{\log_ca}{\log_cb}$

[证明]

设 $a = c^m,b=c^n$

$\log_ba = \log_{c^n}c^m$

根据 ④ 和 ⑤，可得

$\log_ba = \dfrac{m}{n}$

$∵ m = \log_ca, n=\log_cb$

$∴ \log_ba = \dfrac{\log_ca}{\log_cb}$ 【⑥】

换底公式还有很多变换形式，掌握一种就行

倒数公式 $\frac{1}{\log_ab} = \log_ba$

[证明]

根据 ⑥，$\log_ab = \dfrac{\log_cb}{\log_ca}$

$∴ \dfrac{1}{\log_ab} = \dfrac{\log_ca}{\log_cb}$

再根据 ⑥, $\dfrac{\log_ca}{\log_cb} = \log_ba$

$∴ \dfrac{1}{\log_ab} = \log_ba$

下面代码打印值是什么？

const Example = () => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    setVal(val + 1);
    console.log(val);
    setVal(val + 1);
    console.log(val);
    setTimeout(() => {
      setVal(val + 1);
      console.log(val);
      setVal(val + 1);
      console.log(val);
    }, 2000);
  }, []);
  return (<div>{val}</div>);
};

ReactDOM.render(<Example />, document.querySelector("#example"));

打印值为 0 0 0 0。这涉及到了一个概念 Capture Value。

Capture Value 特性

现在可以忘记 Class 组件的那一套理论。

Capture Value 的特性不容易想象，可以借助一个简单例子解释：

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在每次点击时，count 只是一个不会变的常量，而且也不存在利用 Proxy 的双向绑定，只是一个常量存在于每次 Render 中。

例如，每次点击按钮的时候，count 值都会固化为 1，2，3，... 保存在每次渲染中，就像下面的伪代码一样：

// 初次渲染，获取的 count 的初始值
function Counter() {
  const count = 0; // Returned by useState()
  // ...
  <p>You clicked {count} times</p>;
  // ...
}

// 点击一次，函数被调用一次
function Counter() {
  const count = 1; // Returned by useState()
  // ...
  <p>You clicked {count} times</p>;
  // ...
}

// 再次点击，函数再次被调用
function Counter() {
  const count = 2; // Returned by useState()
  // ...
  <p>You clicked {count} times</p>;
  // ...
}

可以认为每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。这就是 Capture Value 特性。

其实不仅 props 和 state 有 Capture Value 特性，函数在每次渲染时也是独立的：

const Example = () => {
  const [temp, setTemp] = React.useState(5);

  const log = () => {
    setTimeout(() => {
      console.log("3 秒前 temp = 5，现在 temp =", temp);
    }, 3000);
  };

  return (
    <div
      onClick={() => {
        log();
        setTemp(3);
        // 3 秒前 temp = 5，现在 temp = 5
      }}
    >
      render
    </div>
  );
};

如果连点两次，会得到这样的结果：

"3 秒前 temp = 5，现在 temp =" 5
"3 秒前 temp = 5，现在 temp =" 3

第一次点击按钮时，temp 的值可以看作常量 5 保存在本次 Rerender 中，当执行 setTemp(3) 时由于引起状态变更，会交由一个全新的 Render 渲染，但是在当前 Rerender 中执行了 log 函数，所以函数内拿到的是本次 Rerender 中的 temp，也就是 5。这也就是为什么第一次输出的值是"3 秒前 temp = 5，现在 temp =" 5。可以看出 temp、log 都拥有 Capture Value 特性。

useEffect 也一样具有 Capture Value 的特性

const Example = () => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    setTimeout(() => {
      alert("count: " + count);
    }, 3000);
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <button onClick={() => setCount(count - 1)}>减少 count</button>
    </div>
  );
};

当点击“增加”后紧接着点击"减少"，等待一会儿，浏览器先弹出 count: 1 然后弹出 count: 0。

很容易理解，useEffect 在实际 DOM 渲染完毕后执行，由于 useEffect 也一样具有 Capture Value 的特性，也就是说每次 Render 都有自己的 Effects，所以每次 Render 过程中，useEffect 拿到的也都是 count 固化下来的“常量”。

由于 Capture Value 特性，所以在 useEffect 中每次 “注册” “回收” 拿到的都是成对的固定值。

这也就是为什么可以在 useEffect 的返回函数中对注册的监听进行销毁了。

useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
  };
});

回到一开始的代码中，现在就很容易理解为什么打印值都为 0 了：（先不管 Dependencies）这四次打印其实都是在同一 Render 的 Effects 中，而同一 Render 中的 count 其实就是固定的一个值，即使有异步执行函数，拿到的也都是相同的值。

绕过 Capture Value

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。也就是说，useRef 会在每次渲染时返回同一个 ref 对象，并且变更 .current 属性不会引发组件重新渲染。

根据这一点可以绕过 Capture Value 的特性。例如将上面的例子修改下

const Example = () => {
  const [count, setCount] = React.useState(0);
  const latestCount = React.useRef(count);

  React.useEffect(() => {
    latestCount.current = count;
    setTimeout(() => {
      alert("count: " + latestCount.current);
    }, 3000);
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <button onClick={() => setCount(count - 1)}>减少 count</button>
    </div>
  );
};

现在比如连续点击三下增加按钮，等待一段时间后，会连续弹出三个浏览器弹框，且弹框内容都是 count: 3。原因是 latestCount 不受 Capture Value 特性的影响，每次 Render 都是获取的同一个值，当 setTimeout 事件循环开始的时候，latestCount.current 已经变成 3 了。

useState 更新的问题

请思考下面代码：

function App() {
  const [count, setCount] = React.useState(0);
  const onClick = () => {
    setCount(count + 1);
    setCount(count + 1);
  };
  return (
    <div className="App">
      <h1>count: {count}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

点击一次按钮，页面上显示的是多少？答案是 1。为什么不是 2？

由于 Function Component 内的函数拥有 Capture Value 特性的原因，虽然 setCount 执行了两次，但是入参中的 count 都是 0。在 setCount 之后，会分别生成两个新的 count，值都等于 0 + 1，但彼此互不影响。两次 setCount 会导致两次 render，但是只有最新一次的 render 有效，也就是只有最后一次 setCount 改变的状态值。

这看起来就像是 useState 的异步更新（我也不知道该不该这样认为，虽然这有 Capture Value 的原因）。那么类比 Class Component 的 setState，如果下一次状态更新依赖前一个状态值，可以通过传入一个函数来获取旧的 state 值：

const onClick = () => {
  setCount(c => c + 1);
  setCount(c => c + 1);
};

参考

• 精读《useEffect 完全指南》
• React：useState的异步更新

微信小程序上传文件

选择图片 wx.chooseImage(Object object)

wx.chooseImage({
  count: 1,               								 // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'],    // 图片的尺寸：original-原图，compressed-压缩图
  sourceType: ['album', 'camera'],         // 图片来源选项：album-相册，camera-相机
  success (res) {
    // tempFilePath 可以作为 img 标签的 src 属性显示图片，图片的本地临时文件路径列表
    const tempFilePaths = res.tempFilePaths
  }
})

效果如下：

左苹果，右安卓

选择图片没什么好说的，功能基本一致，也体验也良好。

选择非图片文件

使用 wx.chooseMessageFile(Object object) API【官方】

wx.chooseMessageFile(Object object) 方法是官方给出的 API，用来解决上传非图片类型的文件的问题。

用户体验比较差，甚至很多用户不买账，开发者也很头痛。

说白了，就是现在只能通过聊天记录选择文件，期待 wx.choosFile() 的出现。

它的作用是弹出微信的会话列表，然后让用户选择一个会话（可以是一个人、微信群或者文件传输助手等），然后再选择这个会话中的文件进行上传。

开发者工具中的模拟器使用 wx.chooseMessageFile(Object object) 会报错。

<web-view> 嵌套 H5 页面使用 <input type="file"> 实现

个人开发类型的小程序不支持使用 web-view

如果不想走微信的文件传输助手中转一下，或者用户非得要直接调用手机的文件管理器，目前可以使用这种方案。

1. 添加业务域名

将 H5 所在页面的域名添加到小程序开发设置的【业务域名】中，否则小程序的 <web-view> 会限制打开非业务域名的页面：

<web-view> 打开的页面必须为 https 服务，打开的页面如果有重定向（301或302）则重定向经历的页面也要添加进业务域名；webview 中可以嵌套 <iframe> 元素，但是 iframe 的地址必须是业务域名。

2. H5 页面相关

• H5 页面中 html 的 title 会自动放到小程序的头部作为标题，所以需要在 H5 页面中修改 html 的 <title> 才能修改实际显示标题

• 如果要改变导航栏样式，就在该页面的 json 配置文件中配置即可，但标题文字会被覆盖，所以只能改标题文字颜色（黑，白）和标题背景色

• 在 H5 中可以无限跳转，对于导航条返回和物理键返回都会回到上一个页面直到退出 webview，就像 history.back

• webview 中可以正常使用 ajax 之类的操作，所以我们可以用 axios 这样的第三方库进行请求。这也是使用 H5 做表单上传的基础 [H5 上传代码](##基于 Vue + vant2 的简单上传表单)

3. 在小程序中使用 <web-view>

将 webview 放到单独的一个 Page 中，也就是一个微信小程序页面中只放一个 web-view

<web-view src="{{src}}"></web-view>

然后配合 Page 实例的 onLoad 方法来获取 url

Page({
  data: {
    src: "",
  },
  onLoad(options) {
    const { src } = options;
    if(src) {
      this.setData({
        src: decodeURIComponent(src),
      })
    } else {
      // ...
    }
  },
})

在其他页面就可以通过路由跳转打开 webview 了

wx.navigateTo({
  url: `/src/components/webview/index?src=${encodeURIComponent(url)}`,
})

PS： <web-view> 的页面中可不可以有其他组件？可以，但是没有意义。

<web-view/> 会自动铺满整个页面，并覆盖其他组件，所以添加其他组件（包括自己的导航栏）都不会被显示出来。

4. 关闭 webview 并回到当前页面

在 H5 页面中引入 jweixin，这样就可以在 H5 页面中调用小程序的一些功能，例如跳转到小程序内的路由：

// 这里使用动态引入 script（因为这个 H5 所在服务的其它页面都不需要 jweixin），也可以直接在入口的 html 文件中引入
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
document.body.appendChild(script)

然后在页面中就可以调用小程序提供的方法了

wx.miniProgram.navigateTo({url: '/pages/index/index'})
// 或者
wx.miniProgram.redirectTo({url: '/pages/index/index'});

如果想要保持小程序来源页面中的数据不被清除掉，可以通过返回操作回到来源页面

wx.miniProgram.navigateBack()

效果就和点击导航头上的返回按钮一样

5. 小程序和 web-view 的通信

• 小程序到 webview 通信，通过给 <web-view> 的 src 属性的 url 带上查询参数传参

  // const src = `${HTTPS_HOST}candidate/#/publicUpload?token=${token}&access_token=${access_token}&fieldKey=${_that.properties.fieldKey}`
  <web-view src="{{src}}"></web-view>

  在 H5 页面就可以通过 window.location 拿到这些参数（基于 Vue2 的 H5 页面）

  export default {
    mounted () {
      const { hash } = window.location
      const { token, access_token, fieldKey } = qs(hash);
      this.token = token;
      this.access_token = access_token;
      this.fieldKey = fieldKey;
    },
  }

• webview 到小程序的通信有两种情况

  • 简单且量少

    可以在 H5 页面跳转回小程序的时候，在 url 上带上查询参数即可，和上面小程序到 webview 通信一样

    wx.miniProgram.navigateTo({
      url:'/pages/index/index?test=testtest',
    })

  • 复杂且量大，官方提供的唯一接口是 postMessage 方法

    • 首先要在小程序中，在 <web-view> 组件里绑定事件

      <web-view src="{{src}}" bindmessage="postMessage"></web-view>

    • 定义事件处理方法

      Page({
        // ...
        postMessage(msg) {
          // ...
        },
      })

    • 然后 H5 页面中调用 postMessage 方法

      wx.miniProgram.postMessage 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件

      wx.miniProgram.postMessage({ data: res.data })

需要特别注意的是，网页在使用 postMessage 给小程序发送消息时，小程序不一定会立即收到，而是会在特定时机触发：

PS：【业务场景】小程序接收到的来自 webview 的信息如何传给其他页面

那就需要使用小程序的 【页面间通信】：

如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：

• 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
• wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

正好我们在上面说过，将 <web-view> 放在一个单独的页面，需要使用 webview 的时候就通过路由跳转打开，所以可以使用页面间通信。

在 webview 页面：

Page({
  // ...
  postMessage(msg) {
    const eventChannel = this.getOpenerEventChannel()
    const data = msg && msg.detail ? msg.detail : {}
    eventChannel.emit('getFileRes', data);
  },
})

在跳转前的页面

wx.navigateTo({
  url: `/src/components/webview/index?src=${encodeURIComponent(url)}`,
  events: {
    getFileRes: function(data) {
      if(data && data.data) {
        const fileList = data.data;
        _that.setData({
          fileList: fileList,
        })
        const file = fileList[0];
        if(file) {
          _that.setData({
            fileName: file.fileName || '',
            fileUrl: file.fileUrl || '',
          })
        }
      }
    }
  },
})

优化用户体验

文件选择时，由用户决定哪种方式

目前见到处理小程序上传最好的一个方案，虽然无法突破微信自身的限制，但是用户体验已经得到最大程度的提升：

H5 页面上传操作提示

没有合适的图，拿人家做的比较好的做个参考**【侵删】**：

基于 Vue + vant2 的 H5 上传表单

<template>
  <!-- accept="" 不限制文件类型 -->
  <div class="heeou-public-uploader">
    <van-uploader
      upload-icon="plus"
      accept="*"
      v-model="fileList"
      :before-read="beforeRead"
      :after-read="afterRead"
      :max-size="maxSize"
      @oversize="onOversize"
      :show-upload="showUpload"
      :disabled="uploading"
      :deletable="false"
    />
    <div v-if="showUpload" class="heeou-public-uploader-text">选择文件</div>
    <div v-else class="heeou-public-uploader-btns">
      <van-button
        :disabled="uploading"
        color="#2f54eb"
        @click="uploadFile"
      >开始上传
      </van-button>
      <van-button
        plain
        :disabled="uploading"
        color="#323233"
        @click="clearChoose"
      >清除选择
      </van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import axios from 'axios'

export default {
  mounted () {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
    document.body.appendChild(script)
  },
  data () {
    return {
      fileList: [],
      maxSize: 30 * 1024 * 1024,
      uploading: false,
    }
  },
  computed: {
    showUpload () {
      return this.fileList.length === 0
    },
  },
  methods: {
    beforeRead (file) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
      })
      this.uploading = true
      return true
    },
    afterRead (file) {
      this.$toast.clear()
      this.uploading = false
    },
    onOversize () {
      Toast('文件大小不能超过 30 MB')
    },
    clearChoose () {
      this.fileList = []
    },
    async uploadFile () {
      try {
        if (this.fileList.length !== 1) {
          // 只支持单文件上传
          return false
        }
        const toast = this.$toast.loading({
          duration: 0, // 持续展示 toast
          message: '上传中...',
          forbidClick: true,
          loadingType: 'spinner',
        })
        this.uploading = true
        const { file } = this.fileList[0]
        const formData = new FormData()
        formData.append('file', file, file.name)

        const actionUrl = `xxx`
        const res = await axios.post(actionUrl, formData, {
          baseURL: process.env.baseUrl,
          timeout: 600000,
          headers: {
            'Accept': '*/*',
            'Authorization': `Bearer ${access_token}`,
          },
          withCredentials: true,
          onUploadProgress: progressEvent => {
            const complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            toast.message = `已上传 ${complete}%`
          },
        })
        this.$toast.clear()
        this.uploading = false
        if (res.data && res.data.fileUrl) {
          this.$toast.success('上传成功')
          this.fileList = [];
        } else {
          this.$toast.fail('上传失败')
        }
      } catch (e) {
        this.$toast.clear()
        this.uploading = false
        this.$toast.fail('上传失败')
      }
    },
  },
}
</script>

<style type="text/scss" lang="scss" rel="stylesheet/scss" scoped>
$color: #2f54eb;
.heeou-public-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;

  &-text {
    color: $color;
  }

  /deep/ .van-uploader {
    margin-bottom: 16px;

    &__upload {
      margin: 0;
      border: 1px solid $color;
      background: transparent;
      border-radius: 50%;

      &-icon {
        font-size: 36px;
        color: $color;
      }
    }

    &__file {
      width: 200px;
      height: 200px;
    }

    &__preview {
      margin: 0;

      &-image {
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>

参考

• web-view | 微信开放文档

• 关于微信小程序webview的使用

• [微信小程序]WebView内嵌H5实现本地文件上传

与Sass不同，Less （目前v3.12.0）中没有用于编写循环的内置 @for 或 @each 指令，但它仍然可以使用递归 mixins 编写。递归mixins 只不过是一个不断调用自己的混合。

使用 Less 编写的循环有四个关键条件：

1. 带有 guard 表达式的 mixin，当满足循环的退出标准时，用于终止循环。类似 JavaScript for 循环语句（ for([initialization]; [condition]; [final-expression]) ）中的 [condition]
2. 对 mixin 执行第一次迭代的调用
3. 从内部调用 mixin 以使其递归
4. mixin 的其他内容等同于 JS for 循环语句的 statement 部分，即需要在循环内执行的部分

下面这个例子，是实现在一定范围内进行循环。注意动态的选择器写法和content的值必须是字符串。

// when 后面跟着 guard 表达式，用来设定循环范围，并在条件满足时终止循环
.for-loop(@index, @min, @max) when ((@index >= @min) and (@index <= @max)) {
  // statement
  .item {
    &[data-value="@{index}px"]::before {
      content: "@{index}px";
      font-size: @index + 0px;
    }
  }
  // 内部调用，递归
  .for-loop(@index + 1, @min, @max);
}
// 第一次迭代调用
.for-loop(20, 20, 22);

编译为CSS：

.item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}
.item[data-value="21px"]::before {
  content: "21px";
  font-size: 21px;
}
.item[data-value="22px"]::before {
  content: "22px";
  font-size: 22px;
}

Debounce 和 throttle 是我们在 JavaScript 中使用的两个概念，用于增强对函数执行的控制，这在事件处理程序中特别有用。这两种技术都回答了同一个问题“一段时间内某个函数的调用频率是多少？”

📚 相关链接

文中内容多数来自以下文章，侵删！

• http://hackll.com/2015/11/19/debounce-and-throttle/
• mqyqingfeng/Blog#22
• http://drupalsun.com/david-corbacho/2012/10/10/debounce-and-throttle-visual-explanation
• https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs
• https://github.com/jashkenas/underscore/blob/master/underscore.js#L887
• https://github.com/jashkenas/underscore/blob/master/underscore.js#L842

📚 Debounce

1. 概念

• 本是机械开关的“去弹跳”概念，弹簧开关按下后，由于簧片的作用，接触点会连续接触断开好多次，如果每次接触都通电对用电器不好，所以就要控制按下到稳定的这段时间不通电

• 前端开发中则是一些频繁的事件触发

  • 鼠标（mousemove...）键盘（keydown...）事件等
  • 表单的实时校验（频繁发送验证请求）

• 在 debounce 函数没有再被调用的情况下经过 delay 毫秒后才执行回调函数，例如

  • 在mousemove事件中，确保多次触发只调用一次监听函数
  • 在表单校验的时候，不加防抖，依次输入user，就会分成u，us，use,user四次发出请求；而添加防抖，设置好时间，可以实现完整输入user才发出校验请求

2. 思路

• 由 debounce 的功能可知防抖函数至少接收两个参数（流行类库中都是 3 个参数）

  • 回调函数fn
  • 延时时间delay

• debounce 函数返回一个闭包，闭包被频繁的调用

  • debounce 函数只调用一次，之后调用的都是它返回的闭包函数
  • 在闭包内部限制了回调函数fn的执行，强制只有连续操作停止后执行一次

• 使用闭包是为了使指向定时器的变量不被gc回收

  • 实现在延时时间delay内的连续触发都不执行回调函数fn，使用的是在闭包内设置定时器setTimeOut
  • 频繁调用这个闭包，在每次调用时都要将上次调用的定时器清除
  • 被闭包保存的变量就是指向上一次设置的定时器

3. 实现

• 符合原理的简单实现

  function debounce(fn, delay) {
    var timer;
    return function() {
      // 清除上一次调用时设置的定时器
      // 计时器清零
      clearTimeout(timer);
      // 重新设置计时器
      timer = setTimeout(fn, delay);
    };
  }

• 简单实现的代码，可能会造成两个问题

  • this指向问题。debounce 函数在定时器中调用回调函数fn，所以fn执行的时候this指向全局对象（浏览器中window），需要在外层用变量将this保存下来，使用apply进行显式绑定

    function debounce(fn, delay) {
      var timer;
      return function() {
        // 保存调用时的this
        var context = this;
        clearTimeout(timer);
        timer = setTimeout(function() {
          // 修正 this 的指向
          fn.apply(this);
        }, delay);
      };
    }

  • event对象。JavaScript 的事件处理函数中会提供事件对象event，在闭包中调用时需要将这个事件对象传入

    function debounce(fn, delay) {
      var timer;
      return function() {
        // 保存调用时的this
        var context = this;
        // 保存参数
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
          console.log(context);
          // 修正this，并传入参数
          fn.apply(context, args);
        }, delay);
      };
    }

4. 完善（underscore的实现）

• 立刻执行。增加第三个参数，两种情况

  • 先执行回调函数fn，等到停止触发后的delay毫秒，才可以再次触发（先执行）
  • 连续的调用 debounce 函数不触发回调函数，停止调用经过delay毫秒后才执行回调函数（后执行）
  • clearTimeout(timer)后，timer并不会变成null，而是依然指向定时器对象

  function debounce(fn, delay, immediate) {
    var timer;
    return function() {
      var context = this;
      var args = arguments;
      // 停止定时器
      if (timer) clearTimeout(timer);
      // 回调函数执行的时机
      if (immediate) {
        // 是否已经执行过
        // 执行过，则timer指向定时器对象，callNow 为 false
        // 未执行，则timer 为 null，callNow 为 true
        var callNow = !timer;
        // 设置延时
        timer = setTimeout(function() {
          timer = null;
        }, delay);
        if (callNow) fn.apply(context, args);
      } else {
        // 停止调用后delay时间才执行回调函数
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, delay);
      }
    };
  }

• 返回值与取消 debounce 函数

  • 回调函数可能有返回值。
    • 后执行情况可以不考虑返回值，因为在执行回调函数前的这段时间里，返回值一直是undefined
    • 先执行情况，会先得到返回值
  • 能取消 debounce 函数。一般当immediate为true的时候，触发一次后要等待delay时间后才能再次触发，但是想要在这个时间段内想要再次触发，可以先取消掉之前的 debounce 函数

  function debounce(fn, delay, immediate) {
    var timer, result;
    var debounced = function() {
      var context = this;
      var args = arguments;
      // 停止定时器
      if (timer) clearTimeout(timer);
      // 回调函数执行的时机
      if (immediate) {
        // 是否已经执行过
        // 执行过，则timer指向定时器对象，callNow 为 false
        // 未执行，则timer 为 null，callNow 为 true
        var callNow = !timer;
        // 设置延时
        timer = setTimeout(function() {
          timer = null;
        }, delay);
        if (callNow) result = fn.apply(context, args);
      } else {
        // 停止调用后delay时间才执行回调函数
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, delay);
      }
      // 返回回调函数的返回值
      return result;
    };
  
    // 取消操作
    debounced.cancel = function() {
      clearTimeout(timer);
      timer = null;
    };
  
    return debounced;
  }

• ES6 写法

  function debounce(fn, delay, immediate) {
    let timer, result;
    // 这里不能使用箭头函数，不然 this 依然会指向 Windows对象
    // 使用rest参数，获取函数的多余参数
    const debounced = function(...args) {
      if (timer) clearTimeout(timer);
      if (immediate) {
        const callNow = !timer;
        timer = setTimeout(() => {
          timer = null;
        }, delay);
        if (callNow) result = fn.apply(this, args);
      } else {
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      }
      return result;
    };
  
    debounced.cancel = () => {
      clearTimeout(timer);
      timer = null;
    };
  
    return debounced;
  }

📚 throttle

1. 概念

• 固定函数执行的速率

• 如果持续触发事件，每隔一段时间，执行一次事件

  • 例如监听mousemove事件时，不管鼠标移动的速度，【节流】后的监听函数会在 wait 秒内最多执行一次，并以此【匀速】触发执行

• window的 resize、scroll事件的优化等

2. 思路

• 有两种主流实现方式

  • 使用时间戳
  • 设置定时器

• 节流函数 throttle 调用后返回一个闭包

  • 闭包用来保存之前的时间戳或者定时器变量（因为变量被返回的函数引用，所以无法被垃圾回收机制回收）

• 时间戳方式

  • 当触发事件的时候，取出当前的时间戳，然后减去之前的时间戳（初始设置为 0）
  • 结果大于设置的时间周期，则执行函数，然后更新时间戳为当前时间戳
  • 结果小于设置的时间周期，则不执行函数

• 定时器方式

  • 当触发事件的时候，设置一个定时器
  • 再次触发事件的时候，如果定时器存在，就不执行，知道定时器执行，然后执行函数，清空定时器
  • 设置下个定时器

• 将两种方式结合，可以实现兼并立刻执行和停止触发后依然执行一次的效果

3. 实现

• 时间戳实现

  function throttle(fn, wait) {
    var args;
    // 前一次执行的时间戳
    var previous = 0;
    return function() {
      // 将时间转为时间戳
      var now = +new Date();
      args = arguments;
      // 时间间隔大于延迟时间才执行
      if (now - previous > wait) {
        fn.apply(this, args);
        previous = now;
      }
    };
  }

  • 触发监听事件，回调函数会立刻执行（初始的previous为 0，除非设置的时间间隔大于当前时间的时间戳，否则差值肯定大于时间间隔）
  • 停止触发后，无论停止时间在哪，都不会再执行。例如，1 秒执行 1 次，在 4.2 秒停止，则第 5 秒不会再执行 1 次

• 定时器实现

  function throttle(fn, wait) {
    var timer, context, args;
    return function() {
      context = this;
      args = arguments;
      // 如果定时器存在，则不执行
      if (!timer) {
        timer = setTimeout(function() {
          // 执行后释放定时器变量
          timer = null;
          fn.apply(context, args);
        }, wait);
      }
    };
  }

  • 回调函数不会立刻执行，要在 wait 秒后第一次执行，停止触发闭包后，如果停止时间在两次执行之间，则还会执行一次

• 结合时间戳和定时器实现

  function throttle(fn, wait) {
    var timer, context, args;
    var previous = 0;
    // 延时执行函数
    var later = function() {
      previous = +new Date();
      // 执行后释放定时器变量
      timer = null;
      fn.apply(context, args);
      if (!timeout) context = args = null;
    };
    var throttled = function() {
      var now = +new Date();
      // 距离下次执行 fn 的时间
      // 如果人为修改系统时间，可能出现 now 小于 previous 情况
      // 则剩余时间可能超过时间周期 wait
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 没有剩余时间 || 修改系统时间导致时间异常，则会立即执行回调函数fn
      // 初次调用时，previous为0，除非wait大于当前时间的时间戳，否则剩余时间一定小于0
      if (remaining <= 0 || remaining > wait) {
        // 如果存在延时执行定时器，将其取消掉
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        previous = now;
        fn.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timer) {
        // 设置延时执行
        timer = setTimeout(later, remaining);
      }
    };
    return throttled;
  }

  • 过程中的节流功能是由时间戳的原理实现，同时实现了立刻执行
  • 定时器只是用来设置在最后退出时增加一个延时执行
  • 定时器在每次触发时都会重新计时，但是只要不停止触发，就不会去执行回调函数 fn

4. 优化完善

• 增加第三个参数，让用户可以自己选择模式

  • 忽略开始边界上的调用，传入{ leading: false }
  • 忽略结尾边界上的调用，传入{ trailing: false }

• 增加返回值功能

• 增加取消功能

  function throttle(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 上次执行时间点
    var previous = 0;
    if (!options) options = {};
    // 延迟执行函数
    var later = function() {
      // 若设定了开始边界不执行选项，上次执行时间始终为0
      previous = options.leading === false ? 0 : new Date().getTime();
      timeout = null;
      // func 可能会修改 timeout 变量
      result = func.apply(context, args);
      // 定时器变量引用为空，表示最后一次执行，则要清除闭包引用的变量
      if (!timeout) context = args = null;
    };
    var throttled = function() {
      var now = new Date().getTime();
      // 首次执行时，如果设定了开始边界不执行选项，将上次执行时间设定为当前时间。
      if (!previous && options.leading === false) previous = now;
      // 延迟执行时间间隔
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 延迟时间间隔remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间窗口
      // remaining 大于时间窗口 wait，表示客户端系统时间被调整过
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      // 返回回调函数执行后的返回值
      return result;
    };
    throttled.cancel = function() {
      clearTimeout(timeout);
      previous = 0;
      timeout = context = args = null;
    };
    return throttled;
  }

  • 有个问题，leading: false 和 trailing: false 不能同时设置
    • 第一次开始边界不执行，但是，第一次触发时，previous为 0，则remaining值和wait相等。所以，if (!previous && options.leading === false)为真，改变了previous的值，而if (remaining <= 0 || remaining > wait)为假
    • 以后再触发就会导致if (!previous && options.leading === false)为假，而if (remaining <= 0 || remaining > wait)为真。就变成了开始边界执行。这样就和leading: false冲突了

📚 总结

• 至此，完整实现了一个underscore中的 debounce 函数和 throttle 函数
• 而lodash中 debounce 函数和 throttle 函数的实现更加复杂，封装更加彻底
• 推荐两个可视化执行过程的工具
  • http://demo.nimius.net/debounce_throttle/
  • http://caiogondim.github.io/js-debounce-throttle-visual-explanation/
• 自己实现是为了学习其中的**，实际开发中尽量使用 lodash 或 underscore 这样的类库。

对比

• throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略

• 电梯超时现象解释两者区别。假设电梯设定为 15 秒，不考虑容量限制

  • throttle策略：保证如果电梯第 1 个人进来后，15 秒后准时送一次，不等待。如果没有人，则待机、
  • debounce策略：如果电梯有人进来，等待 15 秒，如果又有人进来，重新计时 15 秒，直到 15 秒超时都没有人再进来，则开始运送

在FlatList 中我们会用到 ItemSeparatorComponent 设置行与行之间的分隔线组件。并且让该分割线显示为设备屏幕可以显示的最小宽度。

最简单的办法就是设置一个View元素，然后将该元素的下（或上）边框宽度设置为 StyleSheet.hairlineWidth。【当然，如果分割线宽度不是这样的一条细线，也就不会有下面问题】

StyleSheet.hairlineWidth，This constant will always be a round number of pixels (so a line defined by it can look crisp) and will try to match the standard width of a thin line on the underlying platform.

StyleSheet.hairlineWidth是一个常数，始终是像素的整数，并将尝试匹配上设备上细线的标准宽度

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const Separator = () => (
  <View style={styles.Separator} />
);

const styles = StyleSheet.create({
  Separator: {
    borderBottomColor: '#e0e0e0',
    borderBottomWidth: StyleSheet.hairlineWidth
  }
});

但是在实际效果中并不理想，会出现有些分割线不显示，有些分割线变粗，如下：

在stackoverflow上有相应的问题并且尝试了几种办法 ReactNative ListView inconsistent separator lines

const styles = StyleSheet.create({
  Separator: {
    // 无论哪种方案都需要使用marginBottom做hack，注意不是margin
    marginBottom: StyleSheet.hairlineWidth,

    // 【方法一】用border做分割线
    borderBottomColor: '#e0e0e0',
    borderBottomWidth: StyleSheet.hairlineWidth,

   // 【方法二】设置分割线组件高度，然后用背景色填充
   // height: StyleSheet.hairlineWidth,
   // backgroundColor: '#e0e0e0',

   // 【方法三：无效】只用上面的marginBottom，造成一个空隙，然后让父级背景透出来做分隔，这种方法依然是粗细不均匀
  },
});

不使用 ItemSeparatorComponent 设置分隔组件

例如文档中的列表展示示例 https://reactnative.dev/docs/stylesheet#hairlinewidth，通过给每一个元素设置一个下边框来分隔两个元素，而不是使用额外的分隔组件。稍微修改，使其在FlatList中使用，即通过renderItem，在每个元素渲染时加上这个边框【测试在Iphone11Pro和HWP40Pro上均可以正常显示】

import React from 'react';
import { View, FlatList, StyleSheet, Text } from 'react-native';

const App = () => {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );
  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    borderBottomColor: '#e0e0e0',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

问题出现的原因

文档中有说明一种原因，是因为缩小模拟器（这里缩小是指视图的缩放，而不是单纯的尺寸改变），则带有hairline宽度的线可能不可见。在issue中 【StyleSheet.hairlineWidth not visible on devices with decimal PixelRatio #22927】似乎也存在着联系。

可能是因为缩小视图导致，或者某些设备本身的 PixelRatio 就是小数，造成这个常数并没有匹配上设备上细线的标准宽度。从而导致未显示。

这里有一个待验证的做法 https://github.com/facebook/react-native/issues/22927#issuecomment-512158402。

在IOS上，通过nativeScale和scale属性重新计算hairlineWidth的值，已达到可以显示的最终效果

/* * scale / nativeScale = 3 / 2.608 ≈ 1.2 */
const newHairlineWidth = StyleSheet.hairlineWidth * 1.2

前段时间，同事问了一个问题：有三台主机，管理页面需要将一个页面发送给某一个设备显示，怎么区分这三个设备？

其实业务需求很简单，就是发请求告诉后台目标设备的唯一标识符。

第一时间想到的是mac地址。但是同事说后端资源有限，需要前端获取。

MAC地址是具有唯一性的地址，它被分配给我们的蓝牙、WiFi和以太网卡，直接被“埋”在我们的设备中。在本地网络中，它也被各个设备用来进行相互通信。

MAC地址也被称作设备的 “物理”地址。对众多设备来说，MAC地址标明了哪个是哪个。而IP地址则表示，设备在不计其数的网络链中的接入位置。

mac 地址作为物理层信息，的确可以唯一标识设备（除非盗取硬件）。但是目前来说这个方案是无法实现的：

• 浏览器沙盒不可能让你直接访问硬件，更何况是 MAC 这种跟浏览器没关系的信息

• 使用控件（如 ActiveX 和 Flash，ActiveX 控件有权使用操作系统级别的API），但是可能要回归 IE。。。

• 除非是桌面端应用（前端的话可以使用 electron 打包一个桌面端应用）

这个方案显然是行不通了。不过同事提出了一个我不曾听过的知识点：设备指纹。

其实前面说的需求不重要，最终如何解决的也不重要（最终也没有使用设备指纹）。一切都是为了引出『设备指纹』。

设备指纹

设备指纹是指可以用于唯一标识出该设备的设备特征或者独特的设备标识。 ——百度百科

以下内容来源于知乎专栏：设备指纹详解

早期，在一些对安全要求非常高的线上场景中，例如网上银行在线交易，常常使用纯U盾这样的纯硬件技术去追踪业务主体，也就是定位’’你是谁’’。同时，业务往往都是发生在浏览器页面中，而浏览器是属于操作系统上层的应用程序，运行在其中的脚本代码受到沙盒的限制，所以用户也需要安装一个可以跳出浏览器沙盒直接跟操作系统对接的控件，来读取U盾里面的安全数据。

相对来讲，这很安全。不过随着互联网的发展，这种“控件”+“U盾”的结合方式已经越来越落伍：

1. 使用控件的用户体验非常差，需要冗长安装、更新流程，普通用户难以操作，使用不够友好；

2. 移动互联网已成为绝对主流，而iOS，Android等移动互联网入口都不支持控件；

3. 不仅仅在移动端，某些控件在pc端适用范围都很小，很多只支持PC上的IE内核浏览器。同时Chrome和Firefox等份额较大的桌面浏览器也在逐步淘汰控件的使用；

4. 基于控件的本地溢出漏洞层出不穷，用户很容易中木马或者被钓鱼，反而给系统的安全造成严重危害。

由于业务场景实际需要，设备指纹产品应运而生。设备指纹技术可以为每一个操作设备生成一个全球唯一的设备ID，用于唯一表示出该设备特征。

不过无论网络安全如何升级，总会有对抗以及相应的对策。

就算是设备指纹，黑产往往也可以通过伪造新设备或者伪造某些系统底层参数(比如地理位置，imei号等等)的方式来绕过业务的限制，上层设备指纹获取的所有参数都是伪造的，基于这些伪造的数据计算得到的设备ID也就毫无意义了。

设备指纹的生成方式

主动式

主动采集设备信息，比如UA、MAC地址、设备IMEI号、广告追踪ID等与客户端上生成唯一的device_id。

局限性：

• 不同生态的平台对用户隐私数据开放权限不同，难统一生成唯一识别码；
• 无法实现Web和App跨域统一
• 强依赖客户端代码，在反欺诈的场景中对抗性较弱

被动式

在终端设备与服务器通信的过程中，从数据报文的OSI七层协议中，提取出该终端设备的OS、协议栈和网络状态相关的特征集，结合机器学习算法以标识和跟踪具体的终端设备。

避免了主动式的局限性。

混合式

即既有主动采集部分，又有服务端算法生成部分。不多说。

背景以及简单的生成方式搬完了，下面才是笔记的重要部分：web 生成和获取设备指纹。

想要了解更多，可以继续阅读这篇文章 设备指纹指南。

web 设备指纹

FingerprintJS

FingerprintJS 是一个生成浏览器端指纹的库。原理其实就是通过收集浏览器的诸多属性和可以拿到的操作系统层的数据，通过算法生成一个哈希值作为设备指纹。

可以在 Fingerprintjs2 的代码中查看使用的属性。

Fingerprintjs2 是 FingerprintJS 发布不可兼容性修改前的版本。

上面这些条件只是从概率上降低了重复的可能性，且要保持现在浏览器及上述条件都不变的状态，才能得到相同的浏览器指纹，并不是绝对意义上的唯一性。

介绍 FingerprintJS 并不是为了写怎么使用它，也不是为了推荐它（pro版本不开源）。而是想说通过其代码可以学习到前端生成设备指纹的方法。

web 技术在浏览器中生成指纹

纯前端生成的指纹其实并不稳定，并且对抗性和唯一性都不强。建议只作为学习，不建议上生产。

这里只说三种有研究意义的指纹类型：

HTML5 Canvas Fingerprinting

Canvas 是一种 HTML5 API 和它的功能就不赘述了。这里只说它可以用作 Web 浏览器指纹识别中的附加熵，并用于在线跟踪目的。

实现原理

相同的 Canvas 图像在不同的计算机上可能会以不同的方式呈现。

就如下面动图所示：

发生这种情况有几个原因：

• 在图像格式级别——Web 浏览器使用不同的图像处理引擎、图像导出选项、压缩级别，即使它们像素相同，最终图像也可能获得不同的校验和
• 系统层面——操作系统有不同的字体，它们使用不同的算法和设置来进行抗锯齿和亚像素渲染；另外，不同的显卡驱动程序有时也会影响常规字体渲染。

其实一段简单的 JavaScript 代码就能实现：

// 带有小写/大写/标点符号的文本
var txt = "BrowserLeaks,com <canvas> 1.0" ;
ctx.textBaseline = "顶" ;
// 最常见的类型
ctx.font = "14px 'Arial'" ;
ctx.textBaseline = "字母" ;
ctx.fillStyle = "#f60" ;
ctx.fillRect(125,1,62,20);
// 一些混色的技巧，以增加渲染的差异
ctx.fillStyle = "#069" ;
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)" ;
ctx.fillText(txt, 4, 17);

然而，要从画布创建签名，我们必须使用 toDataURL() 函数从应用程序的内存中导出像素，该函数将返回二进制图像文件的 base64 编码字符串。然后我们可以创建这个字符串的 MD5 哈希，或者甚至从 IDAT 块中提取 CRC 校验和，IDAT 块位于每个 PNG 文件末尾的 16 到 12 字节，这将是我们的 Canvas 指纹。

图像数据块IDAT(image data chunk)：IDAT 数据块用于存储各像素点的数据，具体数据由 IHDR 中声明的 Filter method 和 Compression method 共同决定。

AudioContext Fingerprinting

HTML5提供给 JavaScript 编程用的 Audio API 可以让开发者有能力在代码中直接操作原始的音频流数据，对其进行任意生成、加工、再造，诸如提高音色，改变音调，音频分割等多种操作，甚至可称为网页版的 Adobe Audition。

实现

1. 方法一：生成音频信息流(三角波)，对其进行 FFT 变换，计算 SHA 值作为指纹，音频输出到音频设备之前进行清除，用户毫无察觉。
2. 方法二：生成音频信息流（正弦波），进行动态压缩处理，计算MD5值。

快速傅里叶变换（英语：Fast Fourier Transform, FFT）

原理

主机或浏览器硬件或软件的细微差别，导致音频信号的处理上的差异，相同器上的同款浏览器产生相同的音频输出，不同机器或不同浏览器产生的音频输出会存在差异。

Font Fingerprinting

字体指纹技术基于测量填充文本片段或单个 Unicode 字形的 HTML 元素的屏幕尺寸。Web 浏览器中的字体呈现受许多因素影响，这些测量值可能略有不同。

实现

• 字体枚举攻击是一种蛮力方法，它尝试从相当大的字体系列字典中使用不同的字体。如果渲染元素的大小与默认值不同，则意味着系统中存在替换字体。
• Unicode 字形测量几乎可以完成相同的工作。它不使用文本行，而是使用单个、专门选择的具有大字体的 Unicode 字符，并且仅使用默认字体作为字体系列。对获得的测量结果进行哈希运算后形成指纹。

WebGL

实现：

• WebGL报告——完整的WebGL浏览器报告表是可获取、可被检测的。在一些情况下，它会被转换成为哈希值以便更快地进行分析。
• WebGL图像 ——渲染和转换为哈希值的隐藏3D图像。由于最终结果取决于进行计算的硬件设备，因此此方法会为设备及其驱动程序的不同组合生成唯一值。这种方式为不同的设备组合和驱动程序生成了唯一值。

参考

• HTML5 Canvas Fingerprinting
• Font Fingerprinting
• 设备指纹指南
• 知乎专栏：设备指纹详解
• Pixel Perfect: Fingerprinting Canvas in HTML5
• PNG 文件格式
• What is Canvas Fingerprinting and how the companies use it to track you online
• 硬件指纹：WebGL

基础知识

• 阳历： 就是以太阳来计算日期的一类历法；
• 阴历： 就是以月亮来计算日期的一类历法；
• 公历： 属阳历的一种，我国现在使用的就是公历；
• 农历： 我国的农历是一种阴阳合历，用来指导农业十分方便。

所以，阳历、阴历是一类历法，而公历、农历是一种历法。公历和农历的表述方法也是不一样的

• 公历： 用阿拉伯数字，如2019年1月9日；
• 农历： 用汉字，干支纪年，如戊戌年乙丑月丙午日，或戊戌年腊月初四（农历中，一月、十一月、十二月分别称为正月、冬月，腊月）

好吧，以前总觉得公历就是阳历，农历就是阴历。实际上只是老百姓这样说。从理论上是无法等同的。

公历

我们熟知的是公历，公历分为周期为 365个日历日的平年以及周期为 366个 日历日的闰年。闰年是能被 4 整除的年， 然而，百年并不一定是闰年，除非它们能被 400整除。

公历是一种历法系统，其中的年又叫日历年，日又叫日历日。这种历法系统由一系列连续的日历年(可能是无限的)组成，其中每年又划分成 12个顺序的日历月。

周日历

周日历是日常生活中不常用到的历法系统，一般用于政府、商务的会计年度或者学校教学日历中。

国际标准ISO 8601（数据存储和交换形式·信息交换·日期和时间的表示方法）中定义的ISO周日历系统：

• 一个ISO周数年（也可以简称为 ISO年）有52或53个完整的星期
• 以364天或371天取代了常用的365或366天
• 额外增加出来的一个星期称为闰周
• 每个星期从星期一开始
• 每年的第一个星期包含当年的第一个星期四（并且总是包含1月4日）

国内是采用【GB/T 7408-2005/ISO 8601:2000】标准（位于 4.3.2.2 日历星期，实际上还是采用的ISO 8601：2000年版本的标准）。定义如下：

• 基于一系列无限连续的日历星期的历法系统
• 每个日历星期有 7个 日历日
• 参考点是把 200。年 1月 1日定为星期六
• 即一年中的第一个日历星期包括该年的第一个星期四
• 定一个日历年有 52或 53个日历星期
• 日历年的第一个日历星期可能包含前一个日历年中的三天，日历年的最后一个日历星期可能包含下一个日历年的三天

书写格式

公历中的2019年12月30日星期一是ISO日历中2020年第1周的第一天，写为2020-W01-1或2020W011。

每年的第一个日历星期有以下四种等效说法：

1. 本年度第一个星期四所在的星期
2. 1月4日所在的星期
3. 本年度第一个至少有4天在同一星期内的星期
4. 星期一在去年12月29日至今年1月4日以内的星期

推理可得：

• 如果1月1日是星期一、星期二、星期三或者星期四，它所在的星期就是第一个日历星期
• 如果1月1日是星期五、星期六或者星期日，它所在的星期就是上一年第52或者53个日历星期
• 12月28日总是在一年最后一个日历星期。

一周的开始是星期一还是星期日

按照国际标准 ISO 8601 的说法，星期一是一周的开始，而星期日是一周的结束。虽然已经有了国际标准，但是很多国家，比如「美国」、「加拿大」和「澳大利亚」等国家，依然以星期日作为一周的开始。

所以在计算一年的第一周的时候，国内日历和欧美一些国家存在差异。

长年，是有53星期的年

• 任何从星期四开始的年（主日字母D或DC）和以星期三开始的闰年（ED）
• 任何以星期四结束的年（D、ED）和以星期五结束的闰年（DC）
• 在1月1日和12月31日（在平年）或其中之一（在闰年）是星期四的年度

相关计算

1. 计算给定年份总周数

（符号向上取整）

/**
 * 根据年份计算当年周数
 * @param {number} y 年
 */
function computeWeeks(y) {
  const leapDay = p(y) === 4 || p(y - 1) === 3 ? 1 : 0
  return 52 + leapDay;
}

function p(y) {
  return (y + Math.ceil(y / 4) + Math.ceil(y / 100) + Math.ceil(y / 400)) % 7;
}

/**
 * 实际上 JavaScript 中获取一年的周数更简单
 * 12月28日所在的周数，始终是一年中的最后一周
 * 求出12月28日是星期几，如果早于或等于周四，那该年有53周
 * Date.prototype.getDay 结果中 0 表示星期天
 * @param {number} y 年份
 */
function getWeeks(y) {
  const day = new Date(`${y}/12/28`).getDay();
  return day !== 0 && day <= 4 ? 53 : 52
}

2. 计算当天ISO周日历表达

来自The Mathematics of the ISO 8601 Calendar

/**
 * 计算自0年1月0日起，CE的天数（Gregorian）
 */
function gregdaynumber(year, month, day) {
  y = year;
  m = month;
  if (month < 3) y = y - 1;
  if (month < 3) m = m + 12;
  return Math.floor(365.25 * y) - Math.floor(y / 100) + Math.floor(y / 400) + Math.floor(30.6 * (m + 1)) + day - 62;
}

/**
 * 根据当前公历日期计算ISO日历日期
 */
function isocalendar1() {
  var today = new Date();

  year = today.getFullYear();
  month = today.getMonth(); // 0=January, 1=February, etc.
  day = today.getDate();
  wday = today.getDay();

  weekday = ((wday + 6) % 7) + 1; // getDay 返回的值是 0 ~ 6，这里转为1 ~ 7

  isoyear = year;

  d0 = gregdaynumber(year, 1, 0);
  weekday0 = ((d0 + 4) % 7) + 1;

  d = gregdaynumber(year, month + 1, day);
  isoweeknr = Math.floor((d - d0 + weekday0 + 6) / 7) - Math.floor((weekday0 + 3) / 7);

  // 检查12月的最后几天是否属于下一年的ISO周

  if ((month == 11) && ((day - weekday) > 27)) {
    isoweeknr = 1;
    isoyear = isoyear + 1;
  }

  // 检查一月的前几天是否属于上一年的ISO周

  if ((month == 0) && ((weekday - day) > 3)) {
    d0 = gregdaynumber(year - 1, 1, 0);
    weekday0 = ((d0 + 4) % 7) + 1;
    isoweeknr = Math.floor((d - d0 + weekday0 + 6) / 7) - Math.floor((weekday0 + 3) / 7);
    isoyear = isoyear - 1;
  }

  if (isoweeknr < 10) return isoyear + "-W0" + isoweeknr + "-" + weekday;
  if (isoweeknr > 9) return isoyear + "-W" + isoweeknr + "-" + weekday;
}

. 给定某一日期，获取其ISO周日历表达方式

（weeks是第一个计算中的方法）

• 常数 10

• woy 指 week of year

• doy 指 day of the year，就是当年的第几天，取值doy = 1 → 365/366

• dow 值 day of the week，就是星期几。使用JavaScript的 Date.prototype.getDay 方法取值范围为 0到6，对应周日到周六，但是dow 的值范围为 1~7，需要相应转换

• 如果这样获得的星期数等于0，则意味着给定的日期属于上一个（基于周）的年份

• 如果获得的星期数为53，则必须检查日期是否是第二年的第1周

• 每月基于1月1日的偏移量

  月	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
  平年	0	31	59	90	120	151	181	212	243	273	304	334
  闰年	0	31	60	91	121	152	182	213	244	274	305	335

例如查找2016年11月5日星期六的星期数

// 使用每月基于当年的1月1日的偏移量计算
woy = Math.floor((10 + (305 + 5) − 6) / 7)
woy = Math.floor(314 / 7) = 44
// 既不是 0 也不是 53，所以就是当前周数

参考

• ISO week date

• https://www.zhihu.com/question/19952385/answer/571549657

• The Mathematics of the ISO 8601 Calendar

信令

在日常生活中，我们经常打电话。当拿起送受话器，话机便向交换机发出了摘机信息，紧接着我们就会听到一种连续的“嗡嗡”声，这是交换机发出的，告诉我们可以拨号的信息。当拨通对方后，又会听到“哒－哒－”的呼叫对方的声音，这是交换局发出的，告诉我们正在呼叫对方接电话的信息……。

这里所说的摘机信息、允许拨号的信息、呼叫对方的回铃信息等等，主要用于建立双方的通信关系，我们把这类信息称为信令。（信令是交换机之间通信的语言）

in-bind signling

中文翻译叫带内信令。上面说了信令是用来建立双方的通信关系的信息。而通信建立后传递的消息就是通信的内容。那么带内信令就是指信令和通信内容使用同一通道。具体原理和知识很复杂，这里只做了解。

ANSI 转义码

ANSI 转义序列是命令行终端下用来控制光标位置、字体颜色以及其他终端选项的一项 in-bind signaling 标准。通常是在文本中嵌入确定的字节序列（符合带内信令的定义），大部分以 ESC 转义字符和 "[" 字符开始，终端会把这些字节序列解释为相应的指令，而不是普通的字符编码。

在终端中，ASCII编码中有些字符是不能用来打印显示的，比如 '\a' ( 0x7 ) 代表响铃，'\n' (0x0A) 代表换行，这些字符被称为控制符。控制符 '\e' (0x1B)，这个字符代表 ESC ，即键盘上 ESC 按键的作用。ESC 是单词 escape 的缩写，即逃逸的意思。文本中出现这个转义字符，代表其后方的字符是 ANSI Escape code 编码。

如果终端输出不支持 ANSI 转义码，那么可能会看下下面的信息：

ESC[1;Foreground
�[1;30m 30  �[1;30m 30  �[1;30m 30  �[1;30m 30  �[1;30m 30  �[1;30m 30  �[1;30m 30  �[1;30m 30  �[0m
�[1;31m 31  �[1;31m 31  �[1;31m 31  �[1;31m 31  �[1;31m 31  �[1;31m 31  �[1;31m 31  �[1;31m 31  �[0m
�[1;32m 32  �[1;32m 32  �[1;32m 32  �[1;32m 32  �[1;32m 32  �[1;32m 32  �[1;32m 32  �[1;32m 32  �[0m
...

ANSI color

ANSI Escape code编码中有专门控制字符颜色的控制符，例如：

\e[37;44;3;1m

• \e 代表开始ANSI Escape code
• [ 代表转义序列开始符 CSI，Control Sequence Introducer
• 37;44;4;1 代表以; 分隔的文本样式控制符，其中 37 代表文本前景色为白色，44代表背景为蓝色，3代表斜体，1代表加粗
• m 代表结束控制符序列

比如在终端命令行中执行

echo -e "\e[37;44;3;1mLYL\e[0m"

-e 参数用于启用 echo 命令控制符转码，结尾的 \e[0m 代表重置文本样式。

因为 \e 控制符的16进制码为0x1B ， 8 进制码为 033 ，所以以下表示方式等价：

• \e[0m
• \x1b[0m
• \x1B[0m
• \033[0m
• \u001b[0m

常用文本样式控制符

下图对应上表只有一个颜色代码的情况（颜色编码只支持 3 或 4 位，也就是只有8种或16种）

为什么是8或16种？因为初始的规格只有8种颜色，只给了它们的名字。SGR参数30-37选择前景色，40-47选择背景色。相当多的终端将“粗体”（SGR代码1）实现为更明亮的颜色而不是不同的字体，从而提供了8种额外的前景色，但通常情况下并不能用于背景色

下图对应代码为 38 或者 48 的设置背景的颜色选择（即8位编码，共256种颜色（2^8） ）

• 0-7：标准颜色（同ESC [ 30–37 m）
• 8-15：高强度颜色（同ESC [ 90–97 m）
• 16-231（6 × 6 × 6 共 216色）： 16 + 36 × r + 6 × g + b (0 ≤ r, g, b ≤ 5)
• 232-255：从黑到白的24阶灰度色

代码格式如下

\e[ … 38;5;<n> … m    # 选择前景色
\e[ … 48;5;<n> … m    # 选择背景色

随着显卡的更新迭代，某些终端已经支持渲染 24 位色彩。格式如下

\e[ … 38;2;<r>;<g>;<b> … m    # 选择RGB前景色
\e[ … 48;2;<r>;<g>;<b> … m    # 选择RGB背景色

上面的字体样式控制可以混合使用，下面同时设置前景和背景色

本篇着重说明 ANSI color，其他终端控制输入输出等内容不再研究。

实际应用

在开发web端的日志组件或Web页面上的命令行终端时，知道 ANSI 转义码会让工作更加轻松。因为这可能会避免你对着一堆的乱码发呆。当然还可以使用一些第三方库将 ANSI color 转译成 html 输出，这样操作起来会更加方便。例如 https://github.com/drudru/ansi_up

参考

• https://www.istr.cn/archives/298/
• https://zh.wikipedia.org/wiki/ANSI%E8%BD%AC%E4%B9%89%E5%BA%8F%E5%88%97

问题描述

在使用 CSS3 的 linear-gradient() 函数绘制一个网格背景的时候，遇到了一个奇怪的问题：当将 background-size 放到 background: linear-gradient() 前面时，渐变背景的效果就失效了。放在后面就又正常了。

正常显示时代码：

.example {
  width: 300px;
  height: 300px;
  background: linear-gradient(to top, transparent 39px, blue 40px),
    linear-gradient(to left, transparent 39px, blue 40px);
  background-size: 40px 40px;
}

但是当将 background-size 移到 background: linear-gradient() 前面时：

.example {
  background-size: 40px 40px;
  background: linear-gradient(to top, transparent 39px, blue 40px),
    linear-gradient(to left, transparent 39px, blue 40px);
}

其实不仅是渐变背景，使用图片背景时，也会因此而导致背景图片的大小和 repeat 特性变得不受控制。毕竟渐变其实是一种特殊的 image 背景。

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型，是一种特别的 <image> 数据类型。—— MDN

原因分析

原因很简单，其实就是 background 属性简写造成的。

我们知道 CSS 中只写 background 时，是一种属性的简写，会隐式声明背景的多个属性，包括 background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

另外，在同一选择器中重复声明多条相同的属性（如果不在意编辑器的警告），后面声明的属性值会覆盖前面的属性值。因为 CSS 的语句是顺序‘执行’的。

因此，如果将 background-size 放在 background 前面，实际上 background 中隐式声明的 background-size 会覆盖前面的显式声明，就像这样：

.example {
  background-size: 40px 40px;
  background-size: auto auto;
  /* background-size 的初始值是 auto auto */
}

而如果将显式声明的 background-size 放在 background 后面，那就是显式声明覆盖属性简写中的隐式声明，所以显式声明的属性就生效了

.example {
  background-size: auto auto;
  background-size: 40px 40px;
}

解决

• 原因分析中提到的，修正覆盖顺序，将显式声明的 background-size 放在 background 后面

• 不使用 background 简写，而是改成 background-image，此时不会发生覆盖，所以顺序可以是任意的了

  .example {
    background-size: 40px 40px;
    background-image: linear-gradient(to top, transparent 39px, blue 40px),
      linear-gradient(to left, transparent 39px, blue 40px);
  }

• 只用简写

  background 的简写还需要注意一点，“” 只能紧接着 “” 出现，并且以"/"分割，比如 0 0/40px 40px 表示 background-position-x background-position-y/background-size。

另外要注意一点，background-size 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 auto。

background: linear-gradient(to right, transparent 39px, blue 40px) 0 0/40px 40px,
  linear-gradient(to bottom, transparent 39px, blue 40px) 0 0/40px 40px;

书写顺序

说到 CSS 的优先级规则，一般想到的是“选择器的权重”或者“同名选择器时的优先级”，又或者“同一元素有多个选择器时的样式层叠效果”。这里实际上是在同一选择器中声明属性时区分顺序的情况，只有两条：

• 相同属性：根据代码先后顺序，后面声明的属性值会覆盖前面的
• 一个属性是另一个属性和其他属性的简写：如上 background 发生的隐式声明和显式声明之间的覆盖，其实还是相同属性的书写顺序问题

PS：linear-gradient 语法说明

最终语法：

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

当使用带前缀的规则时，不要加“to”关键字。不带前缀且没有 to 关键词的语法会被丢弃。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部**方向为起点顺时针旋转的角度。

.grad {
  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
}

基础知识回顾

当前版本（ECMAScript 2021）ECMAScript 标准定义了 8 种类型：

简单数据类型（原始类型）

共 7 种：String、Number、Boolean、Undefined、Null、Symbol、BigInt 。

原始类型的值特点：值不可变，无属性无方法，保存在栈内存中、值比较。

无属性无方法可能会让人迷惑：

let s1 = "some text";
let s2 = s1.substring(2);

原始值本身不是对象，因此逻辑上不应该有方法，实际上这个例子确实没有报错，且得到了结果。原因是第二行访问 s1 时，是以读模式访问的，也就是要从内存中读取变量保存的值。

当以读模式访问原始值的时候，后台会执行以下三步（以上面代码为例）：

1. 创建一个 String 类型的实例
2. 调用实例上的特定方法
3. 销毁实例

等同于后台自动执行了下面的代码

let s1 = new String("some text");
let s2 = s1.substring(2);
s1 = null;

因此原始值拥有了对象的行为。

复杂数据类型（引用类型）

除了上面的 7 种基本数据类型外，剩下的就是引用类型，统称为 Object 类型

• 基本引用类型

  • Data 和 RegExp 等ECMAScript 提供的原 生引用类型

  • 原始值包装类型，ECMAScript 提供了 3 种特殊的引用类型：Boolean、Number 和 String （只有这三种）

    let stringObject = new String('hello');
    // 如果在使用包装对象时，忘了在前面加 “new” 操作符，会等被当做普通函数执行，作用是把任何类型的数据转换为对应的类型

  • 函数

  • 单例内置对象：Global 和 Math

    ECMA-262中定义：任何由 ECMAScript 实现提供、与宿主环境无关，并在 ECMAScript 程序开始执行时就存在的对象

    • Global 对象在浏览器中被实现为 window 对象。所有全局变量和函数都是 Global 对象的属性
    • Math 对象包含辅助完成复杂计算的属性和方法

• 集合引用类型

  • 最常见的 Object 和 Array

  • Map、WeakMap、Set 以及 WeakSet 类型

  • 定型数组：例如 Int32Array、Float64Array 等等

    定型数组(typed array)是 ECMAScript 新增的结构，目的是提升向原生库传输数据的效率。实际上， JavaScript 并没有“TypedArray”类型，它所指的其实是一种特殊的包含数值类型的数组。设计定型数组的目的就是提高与 WebGL 等原生库交换二进制数据的效率。

引用类型的值特点：可变、引用比较、值保存在堆（Heap）内存

类型判断

typeof

typeof 对判断原始值的类型简单有效。

typeof 37 === 'number';
typeof NaN === 'number';
typeof 42n === 'bigint';
typeof 'bla' === 'string';
typeof '1' === 'string';
typeof undefined === 'undefined';
typeof Symbol('foo') === 'symbol';
typeof false === 'boolean';

但是对引用值的作用不大，因为无论什么类型的对象（除了 Function 类型），使用typeof 都会返回 "object"。但是我们往往关心的不是这个值是不是对象，而是这个值是什么类型的对象。

typeof {a: 1} === 'object';
typeof [1, 2, 4] === 'object';
typeof new Date() === 'object';
typeof /regex/ === 'object';

除了正常的功能外，经常还会提起 typeof 的一些其它特性和例外：

• null 是简单类型的值，它有自己的类型 Null，但是 typeof null 返回的却是 object

在 JavaScript 最初的实现中，值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0，typeof null 也因此返回 "object"。

之后也是为了不得罪人，也就一直保留了这个问题特性。

• 判断函数返回的是 "function"

  typeof function() {} // "function"
  typeof class C {}    // "function"
  typeof Math.sin      // "function"
  typeof (() => {})    // "function"

  这里不好理解的是为什么 class C {} 返回的也是 "function"。其实 ECMAScript 中的 class 只不过是构造函数的语法糖而已。

• 括号？

  typeof 是操作符，语法上后面直接跟操作数，不需要括号。括号本身也是操作符，并且括号的优先级要高于 typeof。所以当 typeof 后面跟上括号时，其实优先执行括号里的表达式并返回操作数，typeof 判断的是这个返回的操作数的类型。

  typeof 42 + ' hello'
  // "number hello"
  typeof (42 + ' hello')
  // "string"
  (42 + ' hello')
  // "42 hello"

• 暂时性死区导致的报错

  • 在 ES6 之前，typeof 总能保证对任何所给的操作数返回一个字符串。使用 typeof 永远不会抛出错误。

  • ES6 新增了 let 和 const 用来声明变量，使用它们会形成块级作用域，那么在变量声明之前对块中的 let 和 const 变量使用 typeof 会抛出一个 ReferenceError（暂时性死区的特性）。

    typeof foo;
    let foo = 'bar';
    // Uncaught ReferenceError: foo is not defined

• 一个“挑衅意味”的例外，对，就是各大浏览厂商故意这么做的（不过 document.all 在HTML5 中已经被废弃，但是现在所有浏览器依然支持）

  console.log(document.all)
  // HTMLAllCollection(1713) [html,... 页面上的所有元素
  
  typeof document.all
  // "undefined"

因为 typeof 无法很好的区分引用值是什么类型的对象，所以ECMAScript 提供了 instanceof 操作符来解决这个问题。

instanceof

如果变量是给定引用类型的实例，则 instanceof 操作符返回 true。instanceof 检测的是构造函数的 prototype （原型）是否存在于给定的对象实例的原型链上。

使用 instanceof 来判断原生对象类型，像 Object 和 Array 这样的原生构造函数，运行时可以直接在执行环境中使用：

var arr = [];
var arr1 = new Array(10);
console.log(arr instanceof Array); // true
console.log(arr1 instanceof Array); // true

ECMAScript 中可以使用自定义构造函数创建自定义类型的对象，那么依然可以使用 instanceof 判断自定义引用类型：

function Foo() {}
let f = new Foo();
console.log(f instanceof Foo); // true

class Bar {}
let b = new Bar();
console.log(b instanceof Bar); // true

我们知道，每个对象实例都有一个 constructor 属性，指向用于创建当前对象的函数（constructor 属性是在构造函数的 prototype 上定义的）

Array.prototype.constructor === Array; // true
[].constructor === Array; // true

// 为什么原始值也有 constructor ？ 可以看 typeof 那一节有解释
''.constructor === String // true

// null 和 undefined 不存在 constructor 的

constructor 本来是用于标识对象类型的。

function Person(name, age, job){
  // ...
}
let person1 = new Person("Nicholas", 29, "Software Engineer");
let person2 = new Person("Greg", 27, "Doctor");

console.log(person1.constructor == Person); // true
console.log(person2.constructor == Person);  // true

但是对于自定义构造函数一旦重写 prototype，可能会造成原有的 constructor 引用丢失，从而导致 constaructor 会变成默认的 Object：

function F() {}
// { foo: 'bar' } 是对象字面量，本身是一个 `Object` 实例，它自身的 constructor 指向 Object
F.prototype = { foo: 'bar' };
f.constructor === F
// false
f.constructor
// ƒ Object() { [native code] }

所以认为 instanceof 操作符是确定对象类型更可靠的方式。但是 instanceof 真的可靠吗？

并不可靠，就像上面说的，因为构造函数的 prototype 是可以改变的，所以在创建实例之后，修改构造函数的 prototype 属性，如果修改后的原型不在实例对象的原型链上了，那就会返回 false：

function F() {}
var f = new F;
F.prototype = {}
f instanceof F  // false

还有一种方法是借助非标准的 __proto__ 伪属性来修改实例的原型链，使实例的原型链上不再出现创建它的构造函数的原型：

function F() {}
var f = new F;
f.__proto__ = {};
f instanceof F  // false

使用 instanceof 还有一些其他问题需要注意：

• 不适用于原始值

  var simpleStr = "This is a simple string";
  var newStr    = new String("String created with constructor");
  
  simpleStr instanceof String; // 返回 false, 非对象实例，因此返回 false
  newStr    instanceof String; // 返回 true

• Object.create(null) instanceof Object 返回 false。这是一种创建非 Object 实例的对象的方法

• 如果一个对象实例的原型链上不止一种构造函数的原型，那么使用 instanceof 操作符检查这两种类型都会返回 true

function foo() {}
foo instanceof Function  // true
foo instanceof Object    // true

上面的 Person 自定义构造函数创建的对象实例 person1 和 person2，既属于 Person 类型，又属于 Object 类型

console.log(person1 instanceof Object);  // true
console.log(person1 instanceof Person);  // true
console.log(person2 instanceof Object);  // true
console.log(person2 instanceof Person);  // true

• 多全局对象引起的问题

  在浏览器中，我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境，不同的全局环境拥有不同的全局对象，从而拥有不同的内置类型构造函数。

  这可能会引发一些问题。例如：

  [] instanceof window.frames[0].Array // false

  因为 Array.prototype !== window.frames[0].Array.prototype，意思就是 window.frames[0].Array 的原型不在前者 [] 的原型链上。

• instanceof 是操作符，所以要注意操作符的优先级，例如检测对象不是某个构造函数的实例时：

  if (!(mycar instanceof Car)) {
    // ...
  }
  
  // 而不是使用 if (!mycar instanceof Car)，逻辑非的优先级高于 instanceof

Symbol.hasInstance（ES6）

上一节说到 instanceof 操作符可以用来确定一个对象实例的原型链上是否有原型。在 ES6 中，instanceof 操作符会使用 Symbol.hasInstance 函数来确定关系。

function Foo() {}
let f = new Foo();
// 使用 instanceof
console.log(f instanceof Foo); // true
// 使用 Symbol. hasInstance
console.log(Foo[Symbol.hasInstance](f)); // true

这个属性定义在 Function 的原型上，因此默认在所有函数和类上都可以调用。由于 instanceof 操作符会在原型链上寻找这个属性定义，因此可以在继承的类上通过静态方法重新定义这个函数，从而可以用它自定义 instanceof 操作符在某个类上的行为：

class Array1 {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof Array1); // true