个人技术博客2017~2024 总计大约72篇

由于历史原因，分类不是很合理，但是划分得还是挺清晰的。

保留了一些2017年初学前端时的内容，找不到机会新增新内容，但力争每篇都是精品：

｜01 浏览器

• 03-跨域通信和跨tab通信  |  2020-05-22
  • 标签：笔记副本 跨域 跨tab 面试题

  • 上一篇文章介绍了什么是“跨域”和“跨站”。可知，“同站”通信也是“跨域”的一种途径。

  • 这次列举一下跨域通信的方法，同时对跨tab通信有启发性价值。

  • 因为前人总结得实在是太齐全了！这里只是做到基本列举齐全，然后做一些小小的补充。

• 02-第三方cookie(注：将被禁用)  |  2020-05-22
  • 标签：Cookie 笔记副本 跨域 跨站 面试题

  • 简要解释第三方cookie的原理和相关属性。

• 01-跨域和跨站的基本概念  |  2020-05-22
  • 标签：笔记副本 跨域 跨站 面试题

  • 介绍一下跨域和跨站的基本概念。

• Web前端性能优化概述  |  2018-02-04
  • 标签：回顾 性能优化 笔记副本 面试题

  • 此文用于快速回顾，不适合用来入门。如果想做一个系统性的归纳总结、以便查询，可以参考以下概述。

• 浏览器事件冒泡或者捕获相关  |  2017-07-02
  • 标签：事件 回顾 基础 笔记副本

  • 此文用于快速回顾，不适合用来入门。

• js四种事件处理程序  |  2017-07-01
  • 标签：事件 回顾 基础

  • 随着W3C不断推进DOM事件模型和IE浏览器事件模型的历史变化，为了方便理解，程序员们中逐渐形成 四种事件处理程序 的概念划分。

• 考古：js取消默认事件行为  |  2017-07-01
  • 标签：事件 回顾 基础

  • 常见的默认行为有，点击a标签链接后，浏览器跳转到指定页面；再比如<form>表单元素的"submit"事件。

｜02 CSS

• 深入理解文字高度和行高的设置  |  2019-02-06
  • 标签：font-size line-height 居中 进阶

  • font-size设置的是什么?line-height设置的是什么?各种行高是怎么计算出来的?你真的知道吗?

• vertical-align:middle近似居中和完美居中  |  2019-02-05
  • 标签：vertical-align 居中 进阶

  • 很多人想要垂直居中的时候，第一时间就想到了vertical-align:middle，用完之后，疑惑它怎么会无效呢?

  • ——原来vertical-align 是有适用范围的限制的。

  • 因为水平垂直居中直接就包括了垂直居中，本文直接给出水平垂直居中的例子，并说明其中垂直居中的原理。

  • 本文前面大部分算是理论基础层面列举分析了“近似”和“完美”居中；但是考虑到实际情况，实战还是“一把梭”用的“近似”垂直居中，进而本文最后一章节推导出“普适封装垂直居中”的代码。这样一来，能解释为什么网上其他文章的居中方法看似有差异。

• 总结：使单一对象水平/垂直居中  |  2019-02-05
  • 标签：vertical-align 居中 进阶

  • 明白单一对象的水平/垂直居中的写法和原理，有助于我们构造更加复杂的居中布局。

  • 我们按照居中的“里面的内容”来分类，展开全文：

• 三栏式布局--IFE2017-CSS-task03笔记  |  2017-09-17
  • 标签：IFE 双飞翼布局 圣杯布局

  • 对应代码的github仓库的地址：https://github.com/AlexZhong22c/IFE-CSS-learning

• border-radius属性  |  2017-09-07
  • 标签：radius 回顾 边框

  • border-radius，作为CSS3中经常被用及的属性，我们用一篇文章做一下总结。

• 闭合浮动  |  2017-04-01
  • 标签：BFC 伪元素 清除浮动

  • 本文介绍闭合浮动，和对比两种“利用伪元素闭合浮动”的方案。

• IFE2017-CSS-task02笔记  |  2017-04-01
  • 标签：IFE list-style 文字

  • 对应代码的github仓库的地址：https://github.com/AlexZhong22c/IFE-CSS-learning

  • 这篇文章的内容基本没有用在 demo 中，这只是一番拓展性总结。

• CSS选择器优先级  |  2017-03-31
  • 标签：CSS选择器 优先级 权重

  • CSS优先级计算的快速回顾，最后附上一些应用知识的实例。

• font-face--CSS3  |  2017-01-25
  • 标签：CSS3 font-face 字体 特殊

  • @font-face是一个css命令，用来导入服务器端字体，将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。因此本地浏览器浏览网页时，不需要设置字体，就可以自动看到@font-face设置的任何字体。

  • 如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，这些都是**@font-face**实现的。

｜03 JavaScript

• 面试题：改造代码，使之隔秒输出0 - 9  |  2020-04-02
  • 标签：作用域 回顾 笔记副本 闭包 面试题

  • 通过一道面试题，文末总结一下js【变量快照】和【缓存变量值】的手法。原题考察的是对js作用域和对setTimeout api的理解，在本文主要给出5种解法。

• 到底什么是函数式编程 精简总结  |  2018-02-05
  • 标签：函数式编程 回顾 笔记副本

  • 此文用于快速回顾，不适合用来入门。

  • 到底什么是函数式编程？我将分别用一段话来总结其 特点 和 作用。

• 对象属性的操作  |  2017-09-03
  • 标签：回顾 对象属性

  • 类似于“增删改查”的基本操作，属性操作可分为属性查询、属性设置、属性删除，还包括属性继承。

• 对象属性描述符  |  2017-09-02
  • 标签：回顾 对象属性

  • 对于操作系统中的文件，我们可以驾轻就熟将其设置为只读、隐藏、系统文件或普通文件。

  • 于对象来说，属性描述符提供类似的功能，用来描述对象的值、是否可配置、是否可修改以及是否可枚举。

• 对象属性之对象状态  |  2017-09-01
  • 标签：回顾 对象属性

  • 我们知道，属性描述符只能用来控制对象中一个属性的状态。而如果要控制对象的状态，就要用到下面的6种方法：

• es5实现继承的6种方式  |  2017-08-12
  • 标签：原型系统 原理 面向对象

  • 对关于继承的内容做一番整理。是早期编写的文章，直接看到最后的结论即可。后面可以优化一下行文的思路。

• new创建对象的过程发生了什么  |  2017-08-12
  • 标签：原型系统 基础 面向对象

  • 用面向对象语言们通用的观点来看：new 是用来实例化一个类，从而在内存中分配一个实例对象。

• 原型对象 实战使用  |  2017-08-09
  • 标签：原型系统 进阶 面向对象

  • 一般地，javascript使用构造函数和原型对象来进行面向对象编程，它们的表现与其他面向对象编程语言中的“类”相似而又不同。

  • 在 上一篇文章 已经做过对 构造函数 和 原型对象 的简单介绍。在这篇文章主要介绍使用实战，你可不要小看“实战”，坑点还是挺多的。

• 理解prototype、__proto__和constructor等关系  |  2017-08-08
  • 标签：原型系统 进阶 面向对象

  • 理解对象和函数的prototype、__proto__和constructor等关系：

• this绑定的优先级  |  2017-08-07
  • 标签：new this 进阶

  • 上一篇文章详细介绍过 this的4种绑定规则，那如果在函数的调用位置上同时存在两种以上的绑定规则应该怎么办呢？本文将介绍this绑定的优先级：

• 结合this的4种绑定规则 深入理解this指向的判定  |  2017-08-07
  • 标签：IIFE this 进阶 闭包

  • 此文适合用于进阶对this的理解，不适合用来入门。

• let和const变量声明的特点  |  2017-05-08
  • 标签：ES6 任务队列 作用域 闭包

  • 本文的结构是：前文就是一个完整的内容提炼；后文是作为拓展和详细的介绍：

• JavaScript Date对象回顾  |  2017-05-07
  • 标签：回顾 时间

  • 此文用于快速回顾，不适合用来入门。

  • Date 对象：涉及基于1970年1月1日(世界标准时间)起的毫秒数。

• IIFE回顾  |  2017-03-10
  • 标签：IIFE 作用域 单例 回顾

  • 此文用于快速回顾，不适合用来入门。

• 相等操作符回顾  |  2017-02-11
  • 标签：回顾 操作符

  • 最早的ECMAscript中的相等和不相等操作符会在执行比较之前，先将对象转换成相似的类型(即，强制转型)。

  • 后来有人对这种转换的合理性提出质疑。

  • 最后，ECMAcript的解决方案是提供两组操作符：

• 操作符回顾  |  2017-02-11
  • 标签：回顾 操作符

  • ECMAScript 操作符的与众不同之处在于，它们能适用于很多种基本数据类型的值，例如字符串、数字值、布尔值、甚至对象。

  • 不过，在应用于对象时，响应的操作符通常都会调用对象的valueOf()和（或）toString()方法，以便取得可以操作的值。

• js函数基础回顾  |  2017-01-13
  • 标签：函数属性 回顾

  • 此文用于快速回顾，不适合用来入门。

｜04 HTML

• H5新标签和被H5拥抱的老元素们  |  2017-03-28
  • 标签：H5

  • 事实上，所有元素都能被归类为几个 元素内容模型（content model），详情请参考MDN：

  • https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

  • 这里不大谈内容模型，只不过按照这种思路划分我们的元素，谈谈那些比较广为接受的HTML5新元素和那些被HTML5拥抱的老元素。

• IFE2017-CSS-task01笔记  |  2017-03-27
  • 标签：H5 HTML IFE

  • 因为大家对html代码不是很重视，所以整理了一些容易忽略的问题并且对一些知识点作了梳理。

  • 对应代码的github仓库的地址：https://github.com/AlexZhong22c/IFE-CSS-learning

  • task01其实就是对HTML的学习，对应的代码其实就是task02的demo的HTML部分。

• 和margin有关的知识  |  2017-03-04
  • 标签：bug margin

  • 总结一下和margin有关的基本知识，属于必须了解的范畴。

• 桌面端和移动端图标的引入  |  2017-02-27
  • 标签：link标签 meta标签 图标

  • 本文翻译自All About Favicons-bitsofcode ：

  • 这星期我决定找到一些合适的方式来使用网站的favicon（另外还包括移动端的touch icon）。我想总结一下我自己的观点并且通过简明的语言来表述清楚：

｜05 Vue

• Vue2源码【9】收获总结  |  2020-09-04
  • 标签：源码 笔记副本

  • Vue2源码系列终于要完结了。最后总结一下阅读过程中的一些收获，主要分为4个方面：

  • “架构设计方面”、“目录和模块设计”、“编程具体模块的实现”、“怎么看源码”

• Vue2源码【8-6】指令  |  2020-09-04
  • 标签：源码 笔记副本

  • “指令”这部分源码，也容易看得晕头转向，这部分代码贯穿了整个核心流程，是没有独立出来的。而常见的指令v-bind、v-on、v-model、v-if v-show等等都是通过这套机制来实现的。

  • 这篇文章干货不多，主要是再对前面已经讲过原理的各种指令的实现有一个宏观的认识。

• Vue2源码【8-5】keep-alive  |  2020-09-04
  • 标签：源码 笔记副本

  • keep-alive是vue的内置组件，如果是用户想要自己实现一个类似keep-alive的组件是不可能的，因为需要vue的主干逻辑配合该组件的实现。

  • keep-alive的作用是缓存的是子组件的vnode，而其本身的render返回的也是vnode。

  • keep-alive的原理依赖slot的机制。

• Vue2源码【8-4】slot和slotScope  |  2020-09-04
  • 标签：源码 笔记副本

  • 对于同一个组件实例，其 vnode 其实包括其“占位符节点”和“真实节点”，它们是父子节点关系。基于这点知识，再去理解slot等机制并不难。

  • 然后再解释了一下为什么slot和slotScope之流为什么不是响应式的。已经再介绍一下vue3正式登场的v-slot。

• Vue2源码【8-2】v-model  |  2020-09-04
  • 标签：源码 笔记副本

  • v-model相关的源码，其实极其复杂。这里主要用文本来概括流程，并且挖掘一些特别的点。

  • 可以划分为“v-model 在控件的实现”和“v-model 在自定义组件的实现”两部分。

• Vue2源码【8-1】event  |  2020-09-04
  • 标签：源码 笔记副本

  • event即事件系统，这部分源码让人看得头皮发麻。但是理解之后发现这部分的逻辑是很重要的，在这里试着用几句话概括流程。

  • 事件系统分为“DOM 事件”和“自定义事件”，分别为两套处理流程，先有个大概的印象即可。

• Vue2源码【7】数据劫持使用Proxy的优势  |  2020-09-04
  • 标签：源码 笔记副本

  • Proxy，与其说是代理，还不如说代理是基于拦截的，在功能定位上，和defineProperty是不一样的。只是恰好Proxy覆盖了defineProperty的getter和setter两个api。

• Vue2源码【6】数据代理  |  2020-09-04
  • 标签：源码 笔记副本

  • 经过对概念的区分，我认为：数据代理，其原理是数据劫持。数据代理的原理是最简单的。

• Vue2源码【5】异步更新和nextTick的原理  |  2020-09-04
  • 标签：源码 笔记副本

  • nextTick这个api，并不是直接就帮你发起微任务的，只不过是把你传进来的回调加入到微任务的回调数组中，即作为一部分。

• 【4-6】响应式原理 之 哪些api是响应式的，哪些不是响应式的  |  2020-09-04
  • 标签：源码 笔记副本

  • 《哪些api是响应式的，哪些不是响应式的》：

  • 总结一下 Vue 体系内，哪些api是响应式的，哪些不是响应式的。对于个别原理，如provide inject做出一些详细解释。

• 【4-5】响应式原理 之 props 是响应式的证明  |  2020-09-04
  • 标签：源码 笔记副本

  • 《props 是响应式的证明》：

  • 这一篇主要从源码的执行层面，解释为何 props 是响应式的。

• 【4-4】【附录】响应式原理 之 数据劫持之computed和watch的具体源码  |  2020-09-04
  • 标签：源码 笔记副本

  • 《数据劫持之computed和watch的具体源码》：

  • 这一篇是【附录】，比较细地记录computed和watch具体的执行过程。其实还是有利于理解依赖收集和派发更新具体是什么时候发生了，能和 mvvm “首次构建” 和 “重新渲染” 的流程结合起来看。

  • 说是附录，其实如果掌握了其中一些核心的时间点，对于对vue的源码理解是有帮助的。

• 【4-3】响应式原理 之 数据劫持之observe的细节  |  2020-09-04
  • 标签：源码 笔记副本

  • 《数据劫持之observe的细节》：

  • 之前一个章节讲数据劫持，主要是讲 defineReactive，以支持理解整个宏观的流程。

  • 这里特别讲 observe 和其所调用的 Observer构造函数，就是想探讨一下细节和各种特殊情况的。

• 【4-2】响应式原理 之 数据劫持  |  2020-09-04
  • 标签：源码 笔记副本

  • 响应式原理 = 数据劫持 + 观察者模式。另，我们知道可以用数据劫持实现数据代理。即：响应式原理不是全包含了数据劫持。

• 【4-1】响应式原理 之 观察者模式  |  2020-09-04
  • 标签：源码 笔记副本

  • Vue2的响应式原理，网上的资料太多了。这篇主要是把脉络梳理清楚，并且明确一些核心的概念是怎么实现的。比如依赖收集和派发更新具体指的是什么，还有一些细节处理，才造就了 Vue的合理运作。

  • 总之，响应式原理 = 数据劫持 + 观察者模式 = 依赖收集 + 派发更新 = defineReactive + 同时存在Dep.target

• Vue2源码【3】patch的原理  |  2020-09-04
  • 标签：源码 笔记副本

  • 从最高视角看： 已知patch阶段也是 vm.$mount 下的逻辑，但从patch这里开始，首次构建阶段和“数据变化驱动视图改变update阶段”的逻辑才开始明显出现区别。所以单独拿出一个章节来讲patch。

  • 从源码层面看： 可搜索return function patch (oldVnode, vnode, hydrating, removeOnly)，找到patch函数的源码。而 patch 函数，实际是由 createPatchFunction 这个工厂函数所返回的：createPatchFunction利用闭包，为 patch 缓存了一些对应运行环境的接口。因此 createPatchFunction 的具体实现先可以不用看，后面也会讲到。

• Vue2源码【2】Vue MVVM 的工作流程  |  2020-09-04
  • 标签：源码 笔记副本

  • 整个 Vue 的运作其实始于 import Vue from 'vue' 执行的那一刻，一开始只是执行一些准备工作，然后到 new Vue 才开始执行核心的流程，也就是开始构建 MVVM。

  • 在上一篇博客有讲到， MVVM 其实就可以划分为2个阶段，“首次构建”+“重新渲染”。之所以会有“重新渲染”，是因为利用了响应式原理，当数据变化时需要重新渲染，还有强制重新渲染也是类似的。

• Vue2源码【1】Vue 的整体架构  |  2020-09-04
  • 标签：源码 笔记副本

  • 本系列文章，主要是梳理一下 Vue 2.x 源码的一些脉络和总结一些值得学习的点。并不是像同话题下的文章带读者从0到1读懂源码。

  • 如题首先讲讲 Vue 的整体架构。

• Vue-Router3源码拾遗【6】配套组件的实现  |  2020-09-02
  • 标签：源码 笔记副本

  • 如下面章节标题所示：router-view 首次渲染和重新渲染的原理 和 router-link 的原理。

  • 至此，vue-router3 源码系列文章，完结。

• Vue-Router3源码拾遗【5】改变url  |  2020-09-02
  • 标签：源码 笔记副本

  • 上一篇文章已经介绍了核心模块。这篇文章介绍外围的提供给用户的 api 是怎么实现的，还有如何将变化同步到浏览器 url 的。

  • 对于外围 api，会考虑兼容降级调用浏览器提供的 BOM api，所以先要对这部分知识有一个基本的理解，可以参考本系列文章的第一篇。

  • 这部分代码是真的难读，某某某.push、某某某.history满屏幕都是，字段名又是命名得类似而且一词用于多义，有时候都分不清谁是谁了。再者考虑了兼容性问题，就算是搜出来的字段，经常不知道要点进哪个文件去看。

• 【4运作核心】路径切换和路由守卫  |  2020-09-02
  • 标签：源码 笔记副本

  • 如果没有处理路径切换，整个路由器就没法运作，就跟没用一样。可见路径切换模块在其中的核心地位。

  • 讲到“路径切换”，history.transitionTo是位于内部的核心。也就是绝大多数提供给用户的函数，最终都会执行到这里，开启路径切换的流程。

  • 其间值得注意的是，利用迭代器设计模式，可简洁实现路由守卫，是非常巧妙的代码设计，会提前详细介绍。

  • 到文章最后，文字描述路径切换的流程骨架。再剩余每个繁杂具体的 queue 钩子函数没有介绍，留给读者自行仔细研读。

• Vue-Router3源码拾遗【3】matcher匹配器  |  2020-09-02
  • 标签：源码 笔记副本

  • 方法论：只要明白了某个模块的目的或者功能(或者函数签名、函数参数和返回)，在多数情况下都不用关心其繁杂的具体实现。

  • 以本文内容为例，只要掌握了核心模块createMatcher函数，及其返回的方法matcher.match 二者的作用和原理，就能理清相关模块的整体架构。

  • 再后面就是枯燥的具体实现。如果你也想实现一个前端路由库并且想参考其源码，后半部分姑且可以当做字段字典来查阅。

• 【2】路由注册和VueRouter实例  |  2020-09-02
  • 标签：源码 笔记副本

  • 如果明白了上一篇文章，Vue-Router的核心原理，那么这一篇就没啥好看的，初始化和实例化工作，就是根据原理来枯燥地具体实现还有edge case的处理。

  • 枯燥预警！！！笔者也没挖掘出什么看点，如果你也想实现一个前端路由库并且想参考其源码，姑且可以当做字段字典来查阅。

• Vue-Router3源码拾遗【1】概述  |  2020-09-02
  • 标签：源码 笔记副本

  • 若要深挖 Vue-Router 的源码，代码真的是又臭又长。本系列依旧提取源码中的核心原理并且尽量用文本概括繁杂的逻辑流程。

  • Vue-Router 实际上只适用于单页应用(其实这个结论是可以推理出来的)。而像 Nuxt 之类的看似是用到了 Vue-Router 且像是多页的，实际上是它们是用到了多个 Vue-Router。记住单页与多页的区分，这个区分贯穿了本文的脉络。

• Vue-lazyload 原理和使用 个人总结  |  2020-04-02
  • 标签：回顾 笔记副本

  • Vue-lazyload 这个话题，可谓“前人之述备矣”。这里主要写写一些我认为比较重要的点，能够快速回顾这个“第三方组件”的原理和使用方法。

• 纯vue实现checkbox父子联动  |  2017-05-07
  • 标签：全选 复选框 插件 表格

  • 对应代码的github仓库的地址：https://github.com/AlexZhong22c/vue-checkbox-table

  • demo (在线演示初次加载会有点慢，请稍等)

  • vue.js的出现，导致很多小插件的简单实现成为可能。

  • 但是，正是由于vue的数据绑定使用起来耦合度太强，导致一些比较常规的插件的实现方式要稍微有所不同。

• 经典vue单页路由入门全家桶  |  2017-04-25
  • 标签：express MongoDB vuex 异步

  • vue-cli + vue2 + vue-router + axios + vuex2 + express + mongoose

  • 一个简单的ToDoList——经典vue单页路由入门全家桶，我在大神们demo的基础上不断地改进。

  • 对应代码的github仓库的地址：https://github.com/AlexZhong22c/vue-time-tracker

• 按条目展示表格数据小插件  |  2017-04-15
  • 标签：插件 条目 表格

  • 对应代码的github仓库的地址：https://github.com/AlexZhong22c/vue-table-nav

  • demo (在线演示初次加载会有点慢，请稍等)

｜06 项目总结

• 后管常见的树形组件的vue实现  |  2022-05-22
  • 标签：复选框 性能优化 树形

  • 本文主要展示一下4种树形组件基于 Vue2 和 Ant Design Vue 1.x 的一般的“实现效果”，和分析它们大致的“实现思路、经验”。【后文有图示】

• 一种常见的多层级树形表格组件  |  2022-05-22
  • 标签：复选框 性能优化 树形

  • 一种基于 Vue 和 Ant Design Vue / Element-ui 实现的，树形表格组件。这一种组件用于选择多层级树状数据中的多个节点。同时在各行各业后管需求中比较普遍常见。【后文有图示】

• ToDo小应用完工总结  |  2017-02-17
  • 标签：App caller 优化

  • 完成了百度IFE2015的 task3 ，实现了一个 ToDo 的单页应用，功能颇为强大。

  • 使用 localStorage 存储数据，JSON 模拟数据表，实现了分类和待办状态的改变，具有良好的交互体验。

  • 旧项目地址：https://github.com/AlexZhong22c/ToDoApp-IFE2015

  • 新增了 升级版 修复了一些bug，并且适配移动端：https://github.com/AlexZhong22c/ToDo-WebApp

｜07 移动端Web

• 移动开发事件入门概述  |  2017-02-25
  • 标签：交互 指针事件 触摸事件 随笔

  • 本文修改自 PPK的《移动Web手册》

• 移动开发入门概述  |  2017-02-24
  • 标签：H5 随笔

  • PPK的《移动Web手册》 是对移动Web现状（2014年夏）的一个系统检阅，市场上有不少公司将赌注放在HTML5上，因此对于HTML5在移动Web上的应用多有炒作，但实际上如何呢？看完本书能让你有个清醒的认识。

  • 移动浏览器虽然大都实现了桌面浏览器的功能，但实际上移动设备上的情况更加复杂，而且由于Android系统的碎片化直接导致浏览器的碎片化，它们对于一些和桌面不同情况的处理，以及一些最新特性的支持都是不尽相同的。

  • 所以HTML5在移动Web上的兼容性目前是很差的， 还有像触摸事件向指针事件标准化的过渡，估计最少需要5-10年才能达到一个比较理想的状态。

｜08 hexo

• yelee主题改bug总结  |  2017-02-22
  • 标签：hexo theme yelee

  • 从找一个喜欢的hexo主题到修改好bug发布到博客上面，整个过程花了我不少时间，下面是对这个改bug过程中发现的小问题做的总结。

  • 此文无图。

｜09 随笔

• git暂存区知识梳理  |  2017-10-12
  • 标签：git 基础 指令 随笔

  • 暂存区是git的一个重要概念，经过了一段时间的项目实践，总结一下个人对暂存区的一些理解。

  • 当我们开始对git的一些知识进行梳理的时候，可以盗用以下这张图：