深刻缅怀袁隆平

## 此生理想、近期规划、今日功课

> 此生理想、近期规划、今日功课。 --马鹤凌（马英九父亲）

1. 理想要远，不怕够不着，就怕已经快够着了

大多数人在当下并不能真正地想出自己的理想是什么。**不刻意去追寻理想，活在当下**也许是一个好的实践。专注于解决问题，积累经验。也不要给自己设限，用于尝试多种可能，逐步排除掉自己不想要的。

2. 规划要近，太远会觉得还有很多时间

不做远期规划，不然容易变成一直拖着。做短期内的计划，保持节奏让工作和学习有序前行。

3. 行动要在现在

一个人很有可能要工作 20 年以上，这是一场长跑。在这场长跑中，很多当下的问题只是浪花一朵，比如晋升、绩效、涨薪等，很多看似不可能的行动变为可能，比如掌握 n 种编程语言、研究内核等。为了跑好这场长跑，还是要做好每日功课。

- 给自己一个安静的环境，省出学习时间
- 持续学习
- 健康的体魄

## 学习和成长

一个人很有可能要工作 20 年以上，现在才工作了多久？作为技术同学，所掌握的某个技术很有可能一夜之间就过时了，要居安思危，逃离舒服区。

关于学习，基础知识很重要，要关注现实和实用。可以大量购买和阅读书籍，同时做好知识管理。

关于成长，抛出一个问题：3年开发经验，是学习了1年，重复工作了2年，还是有一定的进步？

## 执行

### 要事优先

讲事情按照**重要**和**紧急**分为4个象限。

```bash
                  紧急
                   |
                   |
                   |
                   |
不重要 <--------------------------> 重要
                   |
                   |
                   |
                   |
                 不紧急
```

用自己价值观来判断，不要在不重要的事情上浪费时间。

### 无视不重要的事情

```bash
                  紧急
                   |
                   |
                   |
                   |
                   --------------> 重要
                   |
                   |
                   |
                   |
                 不紧急
```

**重要但不紧急**的事情迟早会变成**重要且紧急**的事情，所以大部分时间应该花在**重要不紧急**的事情上，不要等到紧急的时候去**救急**。

### 目标分解

在执行时，目标往往很大，需要进行适当的分解，以便执行。没有分解的目标，很难有阶段性成果，会发现一直在做一件事，然后还做不好。任务一定要具体、可量化、可执行。


## 参考

1. [⾼⼯的个人发展规划](https://speakerdeck.com/baidufe/gong-cheng-shi-de-ge-ren-fa-zhan-gui-hua)
2. [About Time and Knowledge Management](https://github.com/zenany/zenany.github.io/blob/master/_posts/about_time_and_knowledge_management.md)




关于时间管理和知识管理，不要停止思考。

关于个人发展

此生理想、近期规划、今日功课

## 一、关于工作

### 1. 工作是什么

刚实习的时候，想的很简单--希望将来工作可以月薪过万。如今还是并不快乐，也许是因为钱不够，也许是认识到在一定阶段内，个人能力所能得到回报就是这些，这样就会想一些其他的“虚”的。

子曰．“君子不器。”世界不会因平凡而变得精彩，与其平平淡淡地活着，不如多做多看，也许能做出一番自己的贡献。现在有很多人嘲笑说，互联网公司只会从小商小贩嘴里抢食，永远都是在做**模式创新**，而不是硬核的**科技创新**。但是我相信**外卖**也好、**买菜**也好，一定程度上是驱动了社会进步的，每个公司的使命是不一样的，也是能够为人民的生活带来美好的。

所以工作也好，生活也好，对个人来说：

1. 不断地自我塑造，打造“自己”这个产品
2. 不断地驱动自我进步，努力实现自我价值

### 2. 作为工程师

也许工程师本质上就是计算机，而计算机的组成部分，只有 4 个：**输入信息、存储信息、处理信息、输出信息**。业务本身是多变的，做什么其实不重要，作为工程师，要能够把在业务中所遇到的“业务难题、复杂链路、技术难点”等抽象，作为自己成长的养料，让自己这台计算机持续学习，持续优化。

### 3. 作为团队成员

团队，本质上构建了一个计算集群，而我们就是其中一个计算节点。对于团队来说，个人积极地完成输出就是最大的贡献，这个输出应当包含：学习、沉淀、分享、负责和影响。努力做最好的自己，认真生活，快乐工作，分享传播，和伙伴们共同进步。

## 二、关于成长

### 1. 永存的困惑

毫不夸张地说，这 3 年我没有不困惑的时候。面对困惑，我只能不断寻找答案，不断提升自己的认知，多读书，多看前辈的思考（计算机系列图书，大多都会写到**站在巨人的肩膀上**），去探知困惑的本质。这也许是一个漫长的过程，这时候可能就需要找点事干，比如看点代码、写点代码，让自己安静下来。

### 2. 历史与现实

从古至今很多事情本质上是没有变化的，历史的经验还是很有现实指导意义的。世界不是表面上那么简单的，不仅仅只是黑白对立面，好与坏而已，要辩证地去看待。历朝历代，风气云涌，都是摸着石头过河，都是不断探索，艰难前行，在这个历程中要接受现实，不断调整，不要忘了初心即可。

### 3. 发展与未来

对于个体来说，永远要把自我提升作为第一位。阿里常说，今天最好的表现，是明天最低的要求（听着有些 PUA）,自我整体上还是需要不断超越的，要找到自己成长的方法。对我来说，整体上还是分为：**硬技能** 和 **软技能**。

#### 3.1 硬技能

对于**硬技能**，就是自身的技术实力，整体上的规划还是以下方面的持续学习。

- 操作系统
- 计算机网络
- 计算机组成原理
- 数据结构与算法
- 数据库系统（MySQL、MonogoDB 等）
- 编程语言的学习与精进
- Devops

#### 3.2 软技能

做事的永远是人，人与人之间是要沟通合作的。为了达到良好的沟通合作效果，需要个体具备：抽象能力、沟通能力、演讲能力、协作能力等。对此，我目前的感悟不多，也是在不断学习。

## 三、关于价值观

现在各行各业都很卷，年轻人们貌似也很难受（卷也是年轻人在卷，矛盾🐱），但是又好像无解，我认为这是价值观的原因。价值观是一种精神力量，一定程度上影响了我们如何看待事物、如何做事。

从国家到个人，组织到个人，团队到个人，无外乎都有文化价值观这种东西，比如实现中华民族伟大复兴，满足人民对美好生活的向往。我相信每一个人都是向往美好生活的，但是做事要付出代价的，为了美好生活，是需要付出努力的（而且努力不一定有结果），所以需要文化价值观这一精神力量来驱动个体前进。文化价值观本身没有错，做事的是人，你怎么做，和你最后获得什么样的结果，一定是有关系的。

阿里对员工的要求是：**聪明、自省、乐观、皮实**，同时也需要我们具备三个主义：**理想主义、现实主义、乐观主义**。遇到一些难受的事情，可以多想想应该用怎样的价值观去对待。

愿我们都能够，**面对现实，勇敢追求**。


时间总是过得飞快，从 18 年到 21 年，转眼就工作 3 年了。按照阿里 1 年新、3 年醇、5 年陈的说法，提笔写一下 3 年的感受。

写在工作 3 年

## 计算机的组成部分

- 输入（信息）
- 存储（信息）
- 处理（信息）
- 输出（信息）

这就是计算机的组成部分。


## 电路和逻辑

每个计算机的输入输出实际上都是信息，都能通过电子信号的开/关来表示（也就是 1 和 0）。计算机需要改变输入的信息，为了这个，使用上百万个很小的电子元件来组成电路。电路之间组合形成逻辑运算。

## 数据和二进制

### 二进制

二进制只有两个数字：0、1。相对于十进制，每进一位乘 2 即可。

### 数据

所有的数据都可以转换成二进制数字来表示，也就是 1 和 0，然后在计算机内部转换成电信号。

## 硬件和软件

计算机设备里面的一大堆电路、芯片、电线、扬声器等就是硬件。其他你在计算机设备里看不到的就是软件，也就是计算机上的所有程序、运行的代码等。
计算机通过**操作系统**的特殊程序来管理软件如何使用硬件。

## 存储、CPU、输入和输出

所有的计算机都在做同样的 4 件事：输入信息、存储信息、处理信息、输出信息。每一件事通过不同的部分来完成。

1. 输入设备从外部世界获取输入，并转换为二进制信息
2. 存储来保存这些信息
3. CPU 来处理信息
4. 输出设备获取信息，转换为物理输出

## 总结

无论你用计算机做什么，计算机所做的都是：从物理世界输入信息，存储和处理信息，输出到物理世界。



无论你用计算机做什么，计算机所做的都是：从物理世界输入信息，存储和处理信息，输出到物理世界。


计算机工作原理

## IP 地址和 DNS

### IP地址

IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。

联想到物理世界，如果需要快递送上门，需要填写你家的具体地址才可以，IP地址标记了互联网中每一个节点的地址。

### DNS

IP地址是一串数字（形如：127.0.0.1），难以记住这么多节点的地址，所以需要网址（形如：www.baidu.com ）这种更加语义化的名称来记忆。
为了完成网址到IP地址的映射，计算机就需要使用 DNS 查询网络名称，获取对应 IP 地址。

## 数据包、路由和可靠

互联网如何传递信息?

### 数据包

现实生活中发射火箭，需要将火箭运输到发射中心。但是火箭的实际体积非常大，所以可能的情况是：火箭被拆分，然后由多个车辆运输到指定地点，到发射中心后再组装。

在互联网中，传递大图、视频等到另一个计算机，数据量也是很大的，所以数据都会被拆分成多个数据包进行传递。

### 路由

将数据拆分成多个数据包后，每个数据包都有它的来源和去向的互联网地址。这时候，通过称为路由器的特殊计算机就像流量管理器一样，可以使数据包顺利通过网络。

路由器用于跟踪发送数据包的多条路径，根据数据包的目的 IP 地址选择最便宜（最便宜不是说成本，而是时间和政治等多个非技术因素）的可用路径。


### 可靠

通常，数据传输的最佳路径并不一定是最直接的，会有多个路径选择，这样可以保证即使发生了一些错误（比如其中几条路径断了），也可以继续发送数据包（走其他路）。这就是互联网的最基本原则--可靠。

数据包传输到目的地址后，TCP 会对数据包进行签收组装，如果发现缺失，会通知源地址重新发送这些数据包。

## 电话线、网线和 WIFI

大图或视频是如何从一台设备传输到另一台设备呢？通过互联网，用来传递信息的现实物理系统。

互联网类似现实生活的邮政服务，但是在传送的物理层面上不同，互联网使用二进制（0 和 1）传递数据。现在我们已经可以利用**电力**、**光**和**无线电波传**递二进制数据。

因为光的传播速度很快，而且信号衰减很弱（举个栗子：你开始干劲十足要学习，但是没过一会蔫了，没精神了，你的衰减速度就很强，不可靠🐶），所以在世界范围内铺设了大量的海底光缆。

如果不使用线路传输，进行无线传输，一般都是用无线电波信号来传递，设备把二进制数据转换成无线电波不同的频率，接收端收到后再转换回二进制数据。


## 加密和公钥

互联网是一个开放的系统，但是我们可能会使用它传输一些私密数据（比如：银行卡密码）。为了不让他人得知你的银行卡密码，就需要对数据进行加密输出，接收方再进行解密得到正确的银行卡密码。

### 对称加密

**当发送方和接收方都使用相同的秘钥进行加解密时，称为对称加密。**
举个例子，小红和小明约定将数字 +5 进行传输，小红要把数字 2 告诉小明，她对着小明大喊数字是 7 （其他人听到的是 7），但是小明知道数字被 +5 了，解密（7 - 5）后得知小红想说的是 2。

### 非对称加密

但是，互联网是开放的，不可能让单独的两台机器私下约定秘钥，所以计算机使用**非对称加密**，即公钥可以与任何设备交换不共享的私钥，公钥用于加密数据，但是只有访问私钥的设备才能解密。
举个例子，你家的邮箱槽口是公开的，任何人都可以放入邮件，但是只有你自己有钥匙打开这个邮箱，读取别人的邮件，同样的你也可以将邮件放入别人的邮箱，整个过程，任何人都没有对方的邮箱钥匙（这个例子中，槽口是公钥，钥匙是私钥，放进去以后，别人没钥匙，不知道邮件内容是啥）。

## 网络安全与犯罪

网络犯罪带来了巨大的社会问题，可能是个人的、经济的，甚至是国家安全问题。比如，数亿个信用卡号码被盗。也行下一场世界大战不是用传统武器，而是通过计算机切断国家的供水、能源和运输系统。

计算机病毒是一种可执行程序，通常是无意中安装的，它们会伤害用户和他们的计算机。那么病毒是如何进入你的计算机的呢？

- 诱使受害者安装一个程序，欺骗程序的目的，比如伪装成安全更新程序
- 计算机存在漏洞，病毒可以在不需要授权的情况下自行安装

病毒进入计算机后，可以读取、删除文件，控制其他程序，甚至允许其他人远程操作你的电脑。

### 分布式拒绝服务

利用计算机病毒，黑客可以占领全球数百万计的计算机，然后利用它们组成一支数字大军，也就是僵尸网络，攻击和摧毁网站，这就是分布式拒绝服务。拒绝服务是指用过多的请求去淹没一个网站，当攻击来自多个计算机时，称之为分布式拒绝服务。

### 钓鱼诈骗

网络罪犯常用的另一个手段是发送大量垃圾邮件（多种手段，比如：模仿官方网站/钓鱼网站
、诱使点击短信链接等），试图欺骗人们分享敏感的个人信息，这就是网络钓鱼诈骗。

### 个人防护

大多数计算机犯罪并不是系统软件漏洞，而是个人信息防护没有做到位，无意中泄露了隐私敏感信息，做好个人防护还是很重要的。

- 使用强密码，不要使用弱密码，比如你的名字、生日等
- 访问网址时，检查网址是否正确，防止进入钓鱼网站
- 经常安装系统更新，不要不更新
- 不要安装不信任的软件
- 不要乱点短信中的链接

## 搜索引擎如何工作

互联网是由多个网页所连接而成的网，网页间通过超链接彼此相连。搜索引擎通过名为**蜘蛛**的程序在网页中爬行，搜集网页中的信息。蜘蛛每访问一个页面，便会顺着页面中的超链接去访问另一个页面，同时将收集到的信息存到**搜索索引**的特殊数据库。

当你使用搜索引擎提问时，搜索引擎会根据问题到搜索索引中查找包含这些字的网页清单，这样便会得到数以百万计的网页，所以需要对网页进行排序。每个搜索引擎都会使用自己的算法，对网页进行排序。比如，搜索引擎可能会检查你搜寻的字是否出现在网页的标题上，这些词是否彼此相连。

## HTTP 和 HTML

打开浏览器，输入网址，访问网页，那么网络浏览器是如何工作的？

当你在浏览器中输入一个地址，并点击 enter 之后，你的计算机就开始与称之为服务器的另一台计算机对话（这个距离通常是数千公里），服务器通过称之为**HTTP**的语言与你的计算机对话。然后服务器将**HTML**代码返回给你的计算机，你便可以在你的浏览器看到网页。


## 总结

HTTP 和 DNS 管理着 HTML 、媒体文件或 Web 上的任何内容的发送和接收。为了完成数据的发送和接收，TCP/IP和路由器网络，以小数据包的形式分解和传输信息。这些数据包本身由二进制序列组成，序列分别为 1 和 0，并通过电线、光纤和无线网络实际发送。


HTTP 和 DNS 管理着 HTML 、媒体文件或 Web 上的任何内容的发送和接收。为了完成数据的发送和接收，TCP/IP和路由器网络，以小数据包的形式分解和传输信息。这些数据包本身由二进制序列组成，序列分别为 1 和 0，并通过电线、光纤和无线网络实际发送。

互联网工作原理

## 是否支持全屏 API

通过 `document.fullscreenEnabled` 可以检测是否支持全屏。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等 ）。

## 是否正在全屏展示

通过 `document.fullscreenElement` 属性提供了当前在 DOM （或者 shadow DOM）里被展示为全屏模式的 Element，如果这个值为 null，文档不处于全屏模式。

## 元素的全屏展示

通过 `element.requestFullscreen` 请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式。

## 元素的全屏样式

通过 `:fullscreen` 伪类选择器可以为进入全屏的元素指定样式。

## 全屏的事件处理

在进入/退出全屏时，Fullscreen API 定义了两个事件，可用于检测全屏模式的打开和关闭，以及在全屏和窗口模式之间切换过程中发生的错误。Document 和  Element 接口提供了这些事件的事件处理函数。

- `document.onfullscreenchange`
- `document.onfullscreenerror`
- `element.onfullscreenchange`
- `element.onfullscreenerror`

## Let's do it

```css
#box {
  width: 100%;
  padding: 2rem;
  text-align: center;
  color: #fff;
  background: #e9c46a;
}

#box:fullscreen {
  background: #e76f51;
}
```

```js
function toggleElementFullscreen(element) {
  if (!document.fullscreenEnabled) {
    alert('不支持使用 Fullscreen API')
    return
  }

  if (!document.fullscreenElement) {
    if (!element.requestFullscreen) {
      alert('不支持使用 Fullscreen API')
      return
    }
    element.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

const box = document.getElementById('box')
const p = box.querySelector('p')

box.addEventListener('fullscreenchange', () => {
  const isFull = document.fullscreenElement === box
  p.innerText = isFull ? '已经进入全屏' : '已经退出全屏'
})
```
<style>
#box {
  width: 100%;
  min-height: 140px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #e9c46a;
}

#box:fullscreen {
  background: #e76f51;
}
</style>
<script>
function toggleElementFullscreen(element) {
  if (!document.fullscreenEnabled) {
    alert('不支持使用 Fullscreen API')
    return
  }

  if (!document.fullscreenElement) {
    if (!element.requestFullscreen) {
      alert('不支持使用 Fullscreen API')
      return
    }
    element.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

function add() {
  if (add.added) return
  const box = document.getElementById('box')
  const p = box.querySelector('p')
  box.addEventListener('fullscreenchange', () => {
    const isFull = document.fullscreenElement === box
    p.innerHTML = isFull ? '已经进入全屏' : '已经退出全屏'
  })
  add.added = true;
}
</script>
<div>
  <button onclick="toggleElementFullscreen(document.documentElement)" class="ant-btn ant-btn-primary">点我文档全屏</button>
</div>

<div id="box" onclick="add()">
  <div>
    <button onclick="toggleElementFullscreen(document.getElementById('box'))" class="ant-btn">点我全屏</button>
    <p>请点击上方按钮</p>
  </div>
<div>



全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

JS 全屏 API 与样式处理

本文接下来会一步一步模仿造一个低配版的[`Element 的对话框和弹框组件`](http://element.eleme.io/#/zh-CN/component/message-box)。

## Vue 单文件组件开发

当使用`vue-cli`初始化一个项目的时候，会发现 `src/components` 文件夹下有一个 `HelloWorld.vue` 文件，这便是单文件组件的基本开发模式。

```js
// 注册
Vue.component("my-component", {
  template: "<div>A custom component!</div>",
});

// 创建根实例
new Vue({
  el: "#example",
});
```

接下来，开始写一个 `dialog` 组件。

## Dialog

目标对话框组件的基本样式如图：

![dialog基本样式](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-04-16/dialog.png)

根据目标样式，可以总结出：

1. dialog 组件需要一个 `title` props 来标示弹窗标题
2. dialog 组件需要在按下 `确定` 按钮时 `发射` 出 `确定` 事件（即告诉父组件`确定`了）
3. 同理，dialog 组件需要 `发射` 出 `取消` 事件
4. dialog 组件需要提供一个插槽，便于自定义内容

那么，编码如下:

```html
<template>
  <div class="ta-dialog__wrapper">
    <div class="ta-dialog">
      <div class="ta-dialog__header">
        <span>{{ title }}</span>
        <i class="ios-close-empty" @click="handleCancel()"></i>
      </div>
      <div class="ta-dialog__body">
        <slot></slot>
      </div>
      <div class="ta-dialog__footer">
        <button @click="handleCancel()">取消</button>
        <button @click="handleOk()">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Dialog",

    props: {
      title: {
        type: String,
        default: "标题",
      },
    },

    methods: {
      handleCancel() {
        this.$emit("cancel");
      },

      handleOk() {
        this.$emit("ok");
      },
    },
  };
</script>
```

这样便完成了`dialog`组件的开发，使用方法如下：

```html
<ta-dialog title="弹窗标题" @ok="handleOk" @cancel="handleCancel">
  <p>我是内容</p>
</ta-dialog>
```

这时候发现一个问题，通过使用 `v-if` 或者 `v-show` 来控制弹窗的展现时，_没有动画！！！_，看上去很生硬。`教练，我想加动画` ,这时候就该 `transition` 组件上场了。使用 `transition` 组件结合 `css`能做出很多效果不错的动画。接下来增强 `dialog` 组件动画，代码如下:

```html
<template>
  <transition name="slide-down">
    <div class="ta-dialog__wrapper" v-if="isShow">
      
    </div>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true,
      };
    },

    methods: {
      handleCancel() {
        this.isShow = false;
        this.$emit("cancel");
      },

      handleOk() {
        this.isShow = true;
        this.$emit("ok");
      },
    },
  };
</script>
```

可以看到 `transition` 组件接收了一个 `name` props，那么怎么编写 `css` 完成动画呢？很简单的方式，写出两个
关键 `class` (css 的 className)样式即可：

```css
.slide-down-enter-active {
  animation: dialog-enter ease 0.3s;
}

.slide-down-leave-active {
  animation: dialog-leave ease 0.5s;
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
```

就是这么简单就开发出了效果还不错的动效，注意 `transition` 组件的 `name` 为 `slide-down` ,而编写的动画的关键 `className` 为 `slide-down-enter-active` 和 `slide-down-leave-active` 。

## 封装 Dialog 做 MessageBox

Element 的`MessageBox`的使用方法如下:

```js
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning",
})
  .then(() => {
    this.$message({
      type: "success",
      message: "删除成功!",
    });
  })
  .catch(() => {
    this.$message({
      type: "info",
      message: "已取消删除",
    });
  });
```

看到这段代码，我的感觉就是*好神奇**好神奇**好神奇*（惊叹三连）。仔细看看，这个组件其实就是一个封装好的 `dialog` ,

![Element MessageBox效果](https://wipi.oss-cn-shanghai.aliyuncs.com/2021-04-16/dialog-2.png)

接下来，我也要封装一个这样的组件。首先，整理下思路：

1. Element 的使用方法是 `this.$confirm` ，这不就是挂到 `Vue` 的 `prototype` 上就行了
2. Element 的 `then` 是确定，`catch` 是取消，`promise` 就可以啦

整理好思路，我就开始编码了：

```js
import Vue from "vue";
import MessgaeBox from "./src/index";

const Ctur = Vue.extend(MessgaeBox);
let instance = null;

const callback = (action) => {
  if (action === "confirm") {
    if (instance.showInput) {
      instance.resolve({ value: instance.inputValue, action });
    } else {
      instance.resolve(action);
    }
  } else {
    instance.reject(action);
  }

  instance = null;
};

const showMessageBox = (tip, title, opts) =>
  new Promise((resolve, reject) => {
    const propsData = { tip, title, ...opts };

    instance = new Ctur({ propsData }).$mount();
    instance.reject = reject;
    instance.resolve = resolve;
    instance.callback = callback;

    document.body.appendChild(instance.$el);
  });

const confirm = (tip, title, opts) => showMessageBox(tip, title, opts);

Vue.prototype.$confirm = confirm;
```

至此，可能会疑惑怎么 `callback` 呢，其实我编写了一个封装好的 `dialog` 并将其命名为 `MessageBox` ,
它的代码中，有这样两个方法:

```js
onCancel() {
  this.visible = false
  this.callback && (this.callback.call(this, 'cancel'))
},

onConfirm() {
  this.visible = false
  this.callback && (this.callback.call(this, 'confirm'))
},
```

没错，就是`确定`和`取消`时进行`callback`。我还想说一说`Vue.extend`,代码中引入了`MessageBox`,
我不是直接`new MessageBox`而是借助`new Ctur`，因为这样可以`定义数据(不仅仅是props)`，例如：

```js
instance = new Ctur({ propsData }).$mount();
```

这时候，页面上其实是还没有`MessageBox`的，我们需要执行:

```js
document.body.appendChild(instance.$el);
```

如果你直接这样，你可能会发现 `MessageBox` 打开的时候没有动画，而关闭的时候有动画。解决方法也很简单，
`appendChild`的时候让其仍是不可见，然后使用类这样的代码：

```js
Vue.nextTick(() => (instance.visible = true));
```

这样就有动画了。

## 总结

1. 通过 `transition` 和 `css` 实现不错的动画。其中，`transition` 组件的 `name` 决定了编写 `css` 的两个关键
   类名为 `[name]-enter-active` 和 `[name]-leave-active`
2. 通过 `Vue.extend` 继承一个组件的构造函数（不知道怎么说合适，就先这样说），然后通过这个构造函数，便可以
   实现组件相关属性的自定义（使用场景：js 调用组件）
3. js 调用组件时，为了维持组件的动画效果可以先 `document.body.appendChild` 然后 `Vue.nextTick(() => instance.visible = true)`

<style>
  .slide-down-enter-active {
    animation: dialog-enter ease 0.3s;
  }

  .slide-down-leave-active {
    animation: dialog-leave ease 0.5s;
  }

  @keyframes dialog-enter {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes dialog-leave {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }
</style>
<style>
  .ta-dialog__wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1010;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .ta-dialog {
    position: relative;
    margin: 15vh auto 50px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    max-width: 60%;
    min-width: 20%;
  }
  .ta-dialog__header {
    padding: 15px;
    padding-bottom: 10px;
    font-size: 18px;
  }
  .ta-dialog__body {
    padding: 30px 20px;
    color: #606266;
    line-height: 24px;
    font-size: 14px;
    max-height: 60vh;
    overflow: auto;
  }
  .ta-dialog__footer {
    padding: 15px;
    padding-top: 10px;
    text-align: right;
    box-sizing: border-box;
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.4.0/vue.min.js" async defer onload="init()"></script>
<script>
  function init() {
    const MessgaeBox = Vue.component("Dialog", {
        template: `
        <transition name="slide-down">
        <div class="ta-dialog__wrapper" v-if="visible">
            <div class="ta-dialog">
            <div class="ta-dialog__header">
                <span>{{ title }}</span>
                <i class="ios-close-empty" @click="handleCancel()"></i>
            </div>
            <div class="ta-dialog__body">
                <slot></slot>
            </div>
            <div class="ta-dialog__footer">
                <button class="ant-btn" @click="handleCancel()">取消</button>
                <button class="ant-btn ant-btn-primary" @click="handleOk()">确定</button>
            </div>
            </div>
        </div>
        </transition>
        `,
        name: "Dialog",
        props: {
        title: {
            type: String,
            default: "标题",
        },
        },
        data() {
        return {
            visible: true,
        };
        },
        methods: {
        handleCancel() {
            this.visible = false;
            this.callback && this.callback.call(this, "cancel");
        },
        handleOk() {
            this.visible = false;
            this.callback && this.callback.call(this, "confirm");
        },
        },
    });
    const Ctur = Vue.extend(MessgaeBox);
    let instance = null;
    const callback = (action) => {
        if (action === "confirm") {
        if (instance.showInput) {
            instance.resolve({ value: instance.inputValue, action });
        } else {
            instance.resolve(action);
        }
        } else {
        instance.reject(action);
        }
        instance = null;
    };
    const showMessageBox = (tip, title, opts) =>
        new Promise((resolve, reject) => {
        const propsData = { tip, title, ...opts };
        instance = new Ctur({ propsData }).$mount();
        instance.reject = reject;
        instance.resolve = resolve;
        instance.callback = callback;
        instance.visible = false;
        document.body.appendChild(instance.$el);
        Vue.nextTick(() => (instance.visible = true));
        });
    const $confirm = (tip, title, opts) => showMessageBox(tip, title, opts);
    Vue.prototype.$confirm = $confirm;
    window.$confirm = $confirm
  }

  function deleteFile() {
    $confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        alert("删除成功");
      })
      .catch(() => {
        alert("取消操作");
      });
  }
</script>

## Demo

<button class="ant-btn" onclick="deleteFile()">点我测试</button>

```css
.slide-down-enter-active {
  animation: dialog-enter ease 0.3s;
}

.slide-down-leave-active {
  animation: dialog-leave ease 0.5s;
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.ta-dialog__wrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1010;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.ta-dialog {
  position: relative;
  margin: 15vh auto 50px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  max-width: 60%;
  min-width: 20%;
}
.ta-dialog__header {
  padding: 15px;
  padding-bottom: 10px;
  font-size: 18px;
}
.ta-dialog__body {
  padding: 30px 20px;
  color: #606266;
  line-height: 24px;
  font-size: 14px;
  max-height: 60vh;
  overflow: auto;
}
.ta-dialog__footer {
  padding: 15px;
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
```

```js
const MessgaeBox = Vue.component("Dialog", {
  template: `
  <transition name="slide-down">
    <div class="ta-dialog__wrapper" v-if="visible">
      <div class="ta-dialog">
        <div class="ta-dialog__header">
          <span>{{ title }}</span>
          <i class="ios-close-empty" @click="handleCancel()"></i>
        </div>
        <div class="ta-dialog__body">
          <slot></slot>
        </div>
        <div class="ta-dialog__footer">
          <button class="ant-btn" @click="handleCancel()">取消</button>
          <button class="ant-btn ant-btn-primary" @click="handleOk()">确定</button>
        </div>
      </div>
    </div>
  </transition>
  `,
  name: "Dialog",
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
  data() {
    return {
      visible: true,
    };
  },
  methods: {
    handleCancel() {
      this.visible = false;
      this.callback && this.callback.call(this, "cancel");
    },
    handleOk() {
      this.visible = false;
      this.callback && this.callback.call(this, "confirm");
    },
  },
});
const Ctur = Vue.extend(MessgaeBox);
let instance = null;
const callback = (action) => {
  if (action === "confirm") {
    if (instance.showInput) {
      instance.resolve({ value: instance.inputValue, action });
    } else {
      instance.resolve(action);
    }
  } else {
    instance.reject(action);
  }
  instance = null;
};
const showMessageBox = (tip, title, opts) =>
  new Promise((resolve, reject) => {
    const propsData = { tip, title, ...opts };
    instance = new Ctur({ propsData }).$mount();
    instance.reject = reject;
    instance.resolve = resolve;
    instance.callback = callback;
    instance.visible = false;
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => (instance.visible = true));
  });
const $confirm = (tip, title, opts) => showMessageBox(tip, title, opts);
Vue.prototype.$confirm = $confirm;
function deleteFile() {
  $confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      alert("删除成功");
    })
    .catch(() => {
      alert("取消操作");
    });
}
```

<button class="ant-btn" onclick="deleteFile()">点我测试</button>

本文接下来会一步一步模仿造一个低配版的 Element 
 的对话框和弹框组件

Vue 组件开发总结

在网络请求、耗时操作等异步场景下，一般都会给用户一个指示（如 loading 加载中指示器）。但是有时候异步操作可能并没有想象的那么耗时，比如一个 ajax 请求可能会在 200ms 内完成，也可能会超过 200ms 才能完成，如果不管三七二十一直接上 loading，反而对用户体验不好。

总结一下：

1. 在异步操作的开始和结束过程中，展示指示器
2. 异步操作耗时很短的话，不展示指示器

针对 `React` ，可以封装 `useAsyncLoading` hook，来完成这种操作。

## 使用方式

```ts
const [wrappedPromiseAction, loading] = useAsyncLoading(promiseAction, 200)
```

解释：针对 `promiseAction` 如果 *200ms* 内完成 `loading` 为 `false` ，反之为 `true`。

## 代码实现

```jsx
import React, { useState, useCallback, useEffect, useRef } from "react";

type PromiseAction = (...args: any[]) => Promise<any>;

function useAsyncLoading<A extends PromiseAction>(
  action: A,
  wait: number
): [A, boolean] {
  const timerRef = useRef(null);
  const [pending, setPending] = useState(false);
  const [loading, setLoading] = useState(false);

  const actionWithPending = useCallback(
    (...args: Parameters<A>) => {
      setPending(true);
      const promise = action(...args);
      promise.then(
        () => setPending(false),
        () => setPending(false)
      );
      return promise;
    },
    [action]
  );

  useEffect(() => {
    clearTimeout(timerRef.current);

    timerRef.current = setTimeout(() => {
      setLoading(pending);
    }, wait);

    return () => {
      clearTimeout(timerRef.current);
    };
  }, [wait, pending]);

  return [actionWithPending as A, loading];
}
```

## demo

```jsx
import React, { useState, useCallback } from "react";

const mockApi = (): Promise<string> => {
  const time = Math.random() * 400;
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("此次请求耗时: " + time + "ms");
    }, time);
  });
};

export default function App() {
  const [mock, loading] = useAsyncLoading(mockApi, 200);
  const [data, setData] = useState("");

  const getData = useCallback(() => {
    mock().then((res) => {
      setData(res);
    });
  }, [mock]);

  return (
    <div className="App">
      <button onClick={getData}>发起请求</button>
      {loading && <h1>loading</h1>}
      {!loading && <p>{data}</p>}
    </div>
  );
}
```

<iframe src="https://codesandbox.io/embed/black-haze-s97fs?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="black-haze-s97fs"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>



在网络请求、耗时操作等异步场景下，一般都会给用户一个指示（如 loading 加载中指示器）。但是有时候异步操作可能并没有想象的那么耗时，比如一个 ajax 请求可能会在 200ms 内完成，也可能会超过 200ms 才能完成，如果不管三七二十一直接上 loading，反而对用户体验不好。


异步过程中 loading 指示器的优化

通过 `position: sticky` 可以很容易实现固定表头的表格。

```css
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  border: 1px solid #000;
}
```

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |
| 计算机     | ￥1600 |   5     |
| 手机        |   ￥12   |   12   |
| 管线        |    ￥$1    |  234  |

<iframe src="https://codesandbox.io/embed/dazzling-elgamal-o9nho?fontsize=14&hidenavigation=0&theme=dark"
     style="width:100%; height:420px; border:0; border-radius: 4px; overflow:hidden;"
     title="dazzling-elgamal-o9nho"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

几行 CSS 实现固定表头的表格。

CSS 实现固定表头表格

## 简介

Wipi 是一个面向个人的开源的集成文章发表、页面创建、知识小册等功能的 CMS 系统。涉及到的技术如下：

- `MySQL`：数据存储
- `next.js`：前端页面框架
- `nest.js`：服务端框架
- `AliyunOSS`：对象存储

## 链接

- [Github 源码](https://github.com/fantasticit/wipi)
- [前台页面](https://blog.wipi.tech/)
- [管理系统](https://admin.blog.wipi.tech/)：支持访客注册
- [接口文档](https://api.blog.wipi.tech/api/)

## 功能点

- 文章管理
- 页面管理
- 知识小册
- 评论管理
- 邮件管理
- 访问统计
- 文件管理
- 系统设置

更多功能，欢迎访问系统进行体验。

## 预览

<ul>
  <li><img width="240" alt="文章列表" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-13/3402/image.png"/></li>
  <li><img width="240" alt="文章详情" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/815/image.png"/></li>
  <li><img width="240" alt="动态页面" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/3124/image.png"/></li>
  <li><img width="240" alt="知识小册" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/6485/image.png"/></li>
  <li><img width="240" alt="后台管理" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/754/image.png"/></li>
  <li><img width="240" alt="文章编辑" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/6587/image.png"/></li>
  <li><img width="240" alt="小册编辑" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-12/1864/image.png"/></li>
</ul>

## 项目运行

### 数据库

首先安装 `MySQL`，推荐使用 docker 进行安装。

```bash
docker run -d --restart=always --name wipi -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql:5.7
```

然后在 `MySQL` 中创建数据库。

```bash
docker container exec -it wipi  bash;
mysql -u root -p root;
CREATE DATABASE  `wipi` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

### 本地运行

首先，clone 项目。

```bash
git clone --depth=1 https://github.com/fantasticit/wipi.git your-project-name
```

然后，安装项目依赖。

```bash
yarn
```

- 启动项目

```bash
yarn dev
```

前台页面地址：`http://localhost:3000`。
后台管理地址：`http://localhost:3001`。
服务接口地址：`http://localhost:4000`。

首次启动，默认创建管理员用户：admin，密码：admin（可在 `.env` 文件中进行修改）。
[PS] 如服务端配置启动失败，请先确认 MySQL 的配置是否正确，配置文件在 `.env`。在生产环境中需要在后台正确设置系统的地址，否则二维码无法正确识别。本地开发环境中，如未填域名地址，默认为空。

### 系统设置

<ul>
  <li><img width="240" alt="系统设置" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-13/FURY8457EB0K41T6ABMBCSP1N9HUUFAB/image.png"/></li>
  <li><img width="240" alt="前台页面" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-06-13/ICS41W05E4XRKLEAF9YO99A48CWGRP9X/image.png"/></li>
</ul>

项目初次启动时，需要在后台进行系统设置。随着内容的丰富，页面内容也会丰富起来。

### 配置文件

默认加载 `.env` 文件，生产环境会尝试加载 `.env.prod` 文件。

```bash
CLIENT_ASSET_PREFIX=/ # client 打包前缀地址（类似 webpack publicPath 配置）
ADMIN_ASSET_PREFIX=/ # admin 打包前缀地址

ADMIN_USER=admin # 默认管理员账户
ADMIN_PASSWD=admin # 默认管理员密码
DB_HOST=127.0.0.1 # 数据库地址
DB_PORT=3306 # 数据库端口
DB_USER=root # 数据库用户名
DB_PASSWD=root # 数据库密码
DB_DATABASE=wipi # 数据库名称
```

### 项目部署

生产环境部署的脚本如下：

```bash

node -v
npm -v

npm config set registry http://registry.npmjs.org

npm i -g pm2 @nestjs/cli lerna yarn

yarn
yarn run build
yarn run pm2

pm2 startup
pm2 save
```

### nginx 配置

采用反向代理进行 `nginx` 配置，**同时设置 `proxy_set_header X-Real-IP $remote_addr;` 以便服务端获取到真实 ip 地址**。

```bash
upstream wipi_client {
  server 127.0.0.1:3000;
  keepalive 64;
}

# http -> https 重定向
server {
  listen  80;
  server_name 域名;
  rewrite ^(.*)$  https://$host$1 permanent;
}

server {
  listen 443 ssl;
  server_name 域名;
  ssl_certificate      证书存放路径;
  ssl_certificate_key  证书存放路径;

  location / {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_cache_bypass $http_upgrade;
    proxy_pass http://wipi_client; #反向代理
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

## 资料

- next.js 源码：https://github.com/vercel/next.js
- next.js 文档：https://nextjs.org/
- nest.js 源码：https://github.com/nestjs/nest
- nest.js 文档：https://nestjs.com/


本项目使用 next.js、nest.js 和 MySQL 从 0 到 1 搭建了一个完整的前后端分离项目。

全栈开发实践：使用 next.js + nest.js 开发完整前后端分离项目

通过地图当前的视口、缩放登记，获取当前可以渲染的数据、被聚合的数据，减少单次渲染量，获取良好性能。

高德地图海量数据展示优化

缓存是性能优化中简单高效的一种方式。优先的缓存策略可以缩短网页请求资源的距离，减少延迟，并且可以缓存文件进行复用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起请求、后端处理、浏览器响应 3 个阶段，缓存可以在 1、2 两步优化性能。

## 缓存位置

### 1. service worker

service worker 是运行在浏览器背后的独立线程。使用 service worker 必须使用 https 传输协议。service worker 可以让用户自由控制缓存哪些文件，如何匹配缓存、如何读取缓存，同时缓存还是持久性的。

### 2. Memory Cache

memory cache 是内存中的缓存，主要包含当前页面中已经抓取到的资源。


### 3. Disk Cache

disk cache 是硬盘中的缓存。

### 4. Push Cache

Push Cache 是推送缓存，是 HTTP/2 中的内容，当以上 3 种缓存都没有命中时，才会被使用。该缓存在 会话（session）中存在，会话结束就会被释放。

### 小结

通常浏览器缓存分为 2 种：强缓存 和 协商缓存，并且缓存策略都是通过设置 HTTP Header 实现的。


## 缓存过程

- 浏览器每次发起请求，都会现在浏览器缓存中查找请求的结果和标识
- 浏览器每次拿到返回的请求都会将该结果和缓存标识存入缓存中

### 强缓存

强缓存：不会向服务器发生请求，直接从缓存中读取资源。在 chrome 控制台可以看到该请求返回 200 的状态码，并且 size 显示 from disk cache 或 from memory cache。
强缓存可以通过设置 2 中 HTTP Header 实现：expires 和 Cache-Control。

- expires<br>
    缓存过期时间，用来指定资源到期时间，是服务器的具体的时间点。expires=max-age + 请求时间，需要和 last-modified 结合使用。expires 是 HTTP/1 的产物，受限于本地时间，修改本地时间，可能会导致缓存失效。
- cache-control<br>
    cache-control 可以在请求头或响应头中设置，可以组合使用多种指令。
    - public：所有内容都会被缓存
    - private: 所有内容只有客户端可以缓存
    - no-cache: 不是说浏览器不使用缓存，而是先确认下数据和服务器是否一致。也就是使用 etag 或者 last-modified 控制缓存。
    - no-store：所有内容都不缓存，不使用强缓存也不使用协商缓存
    - max-age: 表示缓存内容在多久后失效
    - s-maxage: 同 max-age，但是只在代理服务器生效（比如 cdn）
    - max-stale: 能容忍的最大过期时间
    - max-fresh: 能容忍的最小新鲜度

expires 是 HTTP 1.0 的产物，cache-control 是 HTTP 1.1 的产物，两者同时存在时，cache-control 优先级高些。

### 协商缓存

强缓存判断缓存是否超出某个时间或者范围，但是不关心服务器是否已经更新内容。为了获取服务器更新，就需要使用协商缓存。

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。主要有 2 中情况：

- 协商缓存生效，返回 304 和 no modified
- 协商缓存失效，返回 200 和 请求结果

协商缓存通过 2 中 HTTP Heeader 设置：last-modified 和 etag。

#### last-modified 和 if-modified-since

浏览器在第一次访问资源时，服务器返回资源的同时，在 响应头添加 last-modified，值是这个资源在服务器上的最后修改时间。

浏览器下一次请求，服务器检测到 last-modified 的值，再添加个 if-modified-since 值是 last-modified 的值。服务器再次收到请求，会根据 last-modified-since 的值于服务器中这个资源的最后修改时间对比。相同 304，如果 if-modified-since 的值比服务器上资源最后修改时间小，返回新的资源和 200。


last-modified 存在的弊端：

- 如果在本地打开缓存文件，即使没有改内容，last-modified 也会被修改，服务器就不能命中缓存
- last-modified 只能以秒计时，如果在不可感知的时间内修改，服务器还是会认为命中缓存了

因为根据文件修改时间决定缓存命中有欠缺，所以根据文件内容是否修改， HTTP 1.1 出现了 etag 和 if-none-match。


#### etag 和 if-none-match

etag 是服务器响应请求时，返回当前资源文件的一个唯一标识（有服务器生成），只要资源有变化，etag 就会重新生成。

浏览器下一次请求时，只需要把上一次 etag 的值写到 if-none-match 中，服务器再比较 if-none-match 和当前资源的 etag 是否一致。


#### 对比

精度上，etag 优于 last-modified。

Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。

- 在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
- 在优先级上，服务器校验优先考虑Etag

### 小结

强缓存优先于协商缓存，若强缓存生效则直接使用缓存，若不生效使用协商缓存（last-modified/if-modified-since 和 etag/if-none-match）。协商缓存由服务器决定是否使用缓存。使用缓存返回 304，不使用 返回 200 和 新的资源。

## 应用

###  频繁变动的资源

> cache-control: no-cache

通过设置 no-cache 使浏览器每次都请求服务器，然后配合使用 etag 或者 last-modified 协商缓存。

### 不常变化的缓存

> cache-control: max-age=315360000

通过设置一个很大的过期时间，浏览器就会使用强缓存。而为了解决更新的问题，就需要在文件名(或者路径)中添加 hash， 版本号等动态字符，之后更改动态字符，从而达到更改引用 URL 的目的，让之前的强制缓存失效 (其实并未立即失效，只是不再使用了而已)。


## 用户行为对浏览器缓存的影响

- 打开网页，输入URL：查找 disk-cache，有就用，没有发请求
- F5 刷新：优先查找 memory-cache ，然后 disk-cache
- ctrl+ f5 （强制刷新）：浏览器不使用缓存，所有请求头加上 cache-control: no-cache


缓存是性能优化中简单高效的一种方式。优先的缓存策略可以缩短网页请求资源的距离，减少延迟，并且可以缓存文件进行复用，还可以减少带宽，降低网络负荷。


next.js + nest.js 构建页面可视化编辑器 -- Ramiko

深刻缅怀袁隆平

写在工作 3 年

全栈开发实践：使用 next.js + nest.js 开发完整前后端分离项目

next.js + nest.js 构建页面可视化编辑器 -- Ramiko

深刻缅怀袁隆平

写在工作 3 年

全栈开发实践：使用 next.js + nest.js 开发完整前后端分离项目

next.js + nest.js 构建页面可视化编辑器 -- Ramiko