diff --git a/CSS Layout/CSS Layout Note.md b/CSS Layout/CSS Layout Note.md
new file mode 100644
index 0000000..2cfa72b
--- /dev/null
+++ b/CSS Layout/CSS Layout Note.md	
@@ -0,0 +1,22 @@
+# CSS Layout Note
+
+**Float、Grid、Flex、position、display 和盒模型**是用于制作布局的一些关键主题。
+
+以下是一些关于这方面的资料：
+
+- [Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)
+- [学习 CSS 布局](https://zh.learnlayout.com/)
+- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [Flex 布局](https://github.com/lio-zero/blog/blob/main/CSS/Flex%20%E5%B8%83%E5%B1%80.md)
+- [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- [The CSS Display Property - Display None, Display Table, Inline Block and More](https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/)
+- [FLEXBOX FROGGY](https://flexboxfroggy.com/)
+- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [GRID GARDEN](https://cssgridgarden.com/)
+- [All About Floats](https://css-tricks.com/all-about-floats/)
+- [Absolute, Relative, Fixed Positioning: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)
+- [Understanding Flexbox: Everything you need to know](https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.pr6cltk9j)
+- [CSS Flexible Box Layout](https://www.w3.org/TR/css-flexbox-1/) 和 [CSS Grid Layout](https://www.w3.org/TR/css-grid-1/) 规范。
+- [The Holy Grail Layout with CSS Grid](https://bitsofco.de/holy-grail-layout-css-grid/)
+- [magic-of-css](https://adamschwartz.co/magic-of-css/)
+- [CSS Grid and Grid Highlighter Now in Firefox Developer Edition](https://hacks.mozilla.org/2016/12/css-grid-and-grid-highlighter-now-in-firefox-developer-edition/)
diff --git "a/CSS Layout/CSS \345\244\232\345\210\227\357\274\210column\357\274\211.md" "b/CSS Layout/CSS \345\244\232\345\210\227\357\274\210column\357\274\211.md"
new file mode 100644
index 0000000..143170a
--- /dev/null
+++ "b/CSS Layout/CSS \345\244\232\345\210\227\357\274\210column\357\274\211.md"	
@@ -0,0 +1,93 @@
+# CSS 多列（column）
+
+CSS `columns` 属性用来设置元素的列宽和列数。
+
+## 浏览器支持情况
+
+## 相关属性
+
+- `column-width: <length unit>` 列的宽度。
+- `column-count: <number> | auto` 指定元素的列数。
+- `columns` 为 `column-width` 和 `column-count` 的简写形式
+- `column-rule-style` 指定两列间边框的样式
+- `column-rule-width` 指定两列间边框的厚度
+- `column-rule-color` 指定两列间边框的颜色
+- `column-rule` 为上面三个的简写形式，规定列之间的宽度、样式和颜色。
+- `column-gap` 控制列之间的距离
+- `column-span: none | all` 指定元素要跨越多少列
+- `column-fill: all | balanced` 指定如何填充列
+
+您可以使用 `break-before`，`break-after` 或者 `break-inside` 来如何控制每一列中的内容显示。
+
+默认情况下，列与内容保持平衡。如果您希望列不平衡，可以使用 `column-fill: auto` 进行设置。其默认行为为 `column-fill: balanced`。
+
+```css
+.container {
+  width: 300px;
+  margin: 100px auto;
+  columns: 8;
+  column-rule: 1px dashed rgb(213, 213, 213);
+  direction: rtl;
+  word-wrap: break-word;
+  text-align: center;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/mdRpNjm)
+
+我们再来看看两个例子。
+
+## 三列
+
+```html
+<div class="three-col">
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos pariatur sunt
+  consequatur vitae corrupti dolores praesentium sapiente dolorum laudantium
+  dolor ut natus, cum animi, cumque molestias libero eius nobis! Quod, veniam.
+  Velit quo quos repudiandae minus est quaerat recusandae maiores impedit labore
+  asperiores numquam amet, libero in dolorem cupiditate! Repudiandae impedit
+  corporis sapiente sint velit similique, voluptatum cum nemo est magnam non
+  ratione aliquam adipisci error perspiciatis voluptas quos dicta voluptatibus
+  suscipit nam. Ad labore nihil sint quisquam eum corrupti nam. Explicabo,
+  commodi. Labore molestias reiciendis vitae eos, iste possimus odio, voluptates
+  quasi nam, voluptate est? Odio architecto doloribus quia.
+</div>
+```
+
+CSS 如下：
+
+```css
+.three-col {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 1px dashed #ccc;
+}
+```
+
+## 导航栏
+
+```css
+.nav {
+  columns: 100px 4;
+  column-gap: 0;
+  column-rule: 1px solid #1a242f;
+  background: #2c3e50;
+}
+
+.nav a {
+  display: block;
+  padding: 1em;
+  border-bottom: 1px solid #1a242f;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+}
+
+.nav a:hover {
+  background: #1a242f;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/zYNROYG)
+
+你可以查阅 [When And How To Use CSS Multi-Column Layout](https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/) 以了解更多关于这方面的内容。
diff --git "a/CSS Layout/CSS \345\261\205\344\270\255.md" "b/CSS Layout/CSS \345\261\205\344\270\255.md"
new file mode 100644
index 0000000..48dc0d1
--- /dev/null
+++ "b/CSS Layout/CSS \345\261\205\344\270\255.md"	
@@ -0,0 +1,206 @@
+# CSS 居中
+
+基本结构如下：
+
+```html
+<div class="container">
+  <div class="box"></div>
+</div>
+```
+
+基本样式如下：
+
+```css
+.container {
+  width: 200px;
+  height: 200px;
+  background-color: pink;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+  background-color: plum;
+}
+```
+
+## table-cell
+
+```css
+.container {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.box {
+  margin: auto;
+}
+```
+
+或者：
+
+```css
+.container {
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.box {
+  display: inline-block;
+}
+```
+
+## position
+
+**未知宽度和高度的元素**，可以使用绝对定位和 `transform` 属性的 `translate`。
+
+```css
+.container {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+```
+
+`transform` 还可以使用 `margin` 代替，但需要提前知道元素的宽高：
+
+```css
+.container {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px; // width 和 height 的负一半
+}
+```
+
+另一种方式，设置 `absolute` 的偏移值（`top`、`left`、`right` 和 `bottom`）为 `0`，并使用 `margin: auto`，好处是不需要提前知道元素的尺寸兼容性好。
+
+```css
+.container {
+  position: relative;
+}
+
+.box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+```
+
+## Flex
+
+使用 `justify-content` 和 `align-item`：
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+使用 `justify-content` 和 `align-self`：
+
+```css
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.box {
+  align-self: center;
+}
+```
+
+使用 `margin: auto`：
+
+```css
+.container {
+  display: flex;
+}
+
+.box {
+  margin: auto;
+}
+```
+
+## 使用 Grid 居中
+
+`grid` 用于二维布局，但当只有一个子元素时，一维布局与二维布局都一样。
+
+```css
+.container {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+}
+/* or */
+.container {
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+```
+
+上面属性的简写形式：
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+}
+/* or */
+.container {
+  display: grid;
+  place-content: center;
+}
+```
+
+更简便的技巧：
+
+```css
+.container {
+  display: grid;
+}
+
+.box {
+  margin: auto;
+}
+```
+
+另一种方式，我们可以单独控制子元素的对齐方式：
+
+```css
+.container {
+  display: grid;
+}
+
+.box {
+  align-self: center;
+  justify-self: center;
+  /* 简写形式 */
+  /* place-self: center; */
+}
+```
+
+搭配众多，一个个尝试。
+
+> [演示地址](https://codepen.io/lio-zero/pen/XWVyqjZ)
+
+## 更多资料
+
+- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)
+- [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element)
diff --git "a/CSS Layout/\344\270\211\346\240\217\345\270\203\345\261\200.md" "b/CSS Layout/\344\270\211\346\240\217\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..f2625fe
--- /dev/null
+++ "b/CSS Layout/\344\270\211\346\240\217\345\270\203\345\261\200.md"	
@@ -0,0 +1,114 @@
+# 三栏布局
+
+**三栏布局，左右两栏宽度固定，中间栏宽度自适应。**
+
+假设我们有以下 HTML 结构：
+
+```html
+<div class="container">
+  <aside class="left"></aside>
+  <article class="content"></article>
+  <aside class="right"></aside>
+</div>
+```
+
+基本样式如下：
+
+```css
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+.container,
+.left,
+.right,
+.content {
+  height: 100%;
+  overflow: auto;
+}
+```
+
+本文将介绍几种实现三栏布局的方式。
+
+## 使用 `float`
+
+```css
+.left {
+  width: 210px;
+  float: left;
+}
+
+.right {
+  float: right;
+  width: 210px;
+}
+```
+
+这里会有一点不一样，我们需要调整一下类为 `.right` 标签的位置。
+
+```html
+<aside class="left"></aside>
+<aside class="right"></aside>
+<article class="content"></article>
+```
+
+> **注意**：使用 `float` 实现的三栏布局挤压到一定的宽度时，也会存在发生变形情况，这时需要额外进行处理。
+
+## 使用 `position`
+
+```css
+.container {
+  position: relative;
+}
+
+.left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 210px;
+}
+
+.content {
+  margin: 0 210px;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 210px;
+}
+```
+
+## 使用 `flex`
+
+```css
+.container {
+  display: flex;
+}
+
+.left {
+  width: 210px;
+}
+
+.content {
+  flex: 1;
+}
+
+.right {
+  width: 210px;
+}
+```
+
+## 使用 `grid`
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 210px 1fr 210px;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/abEQXdr)
diff --git "a/CSS Layout/\344\276\247\350\276\271\346\240\217\345\270\203\345\261\200.md" "b/CSS Layout/\344\276\247\350\276\271\346\240\217\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..7e6daaf
--- /dev/null
+++ "b/CSS Layout/\344\276\247\350\276\271\346\240\217\345\270\203\345\261\200.md"	
@@ -0,0 +1,103 @@
+# 侧边栏布局
+
+侧边栏布局，它包含一个边栏（固定的），一个主栏（可滚动的）。
+
+```html
+<div class="container">
+  <!-- Sidebar -->
+  <aside class="container__sidebar">...</aside>
+
+  <!-- Main -->
+  <main class="container__main">...</main>
+</div>
+```
+
+基本样式如下：
+
+```css
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+.container,
+.container__sidebar,
+.container__main {
+  height: 100%;
+}
+```
+
+## 使用 `float` 和 `margin`
+
+```css
+.container__sidebar {
+  width: 210px;
+  float: left;
+}
+
+.container__sidebar {
+  margin-left: 210px;
+  overflow: auto;
+}
+```
+
+## 使用 `float` 和 `calc()`
+
+```css
+.container__sidebar {
+  width: 210px;
+  float: left;
+}
+.container__main {
+  width: calc(100% - 210px);
+  overflow: auto;
+}
+```
+
+## 使用 `absolute`
+
+```css
+.container__sidebar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 30%;
+}
+
+.container__main {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: calc(100% - 30%);
+  overflow: auto;
+}
+```
+
+## 使用 `flex`
+
+```css
+.container {
+  display: flex;
+}
+
+.container__sidebar {
+  width: 30%;
+}
+
+.container__main {
+  flex: 1;
+  overflow: auto;
+}
+```
+
+## 使用 `grid`
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: minmax(150px, 30%) 1fr;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/yLVmWRY)
diff --git "a/CSS Layout/\345\215\241\347\211\207\345\270\203\345\261\200.md" "b/CSS Layout/\345\215\241\347\211\207\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..d637c52
--- /dev/null
+++ "b/CSS Layout/\345\215\241\347\211\207\345\270\203\345\261\200.md"	
@@ -0,0 +1,93 @@
+# 卡片布局
+
+基本结构如下：
+
+```html
+<div class="cards">
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+  <div class="cards__item"></div>
+</div>
+```
+
+基本样式如下：
+
+```css
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+.cards {
+  height: 100%;
+}
+
+.cards__item {
+  background: pink;
+  height: calc(33.33% - 16px);
+  width: calc(33.33% - 16px);
+  margin: 8px;
+  border-radius: 0.25rem;
+}
+
+.cards__item:nth-child(odd) {
+  background: plum;
+}
+```
+
+这里的卡片布局，其实根据你想要控制元素的占据所决定，本示例每行、每列各占三个元素。
+
+## 使用 `absolute`
+
+```css
+.cards {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.item {
+  /* ... */
+  float: left;
+  height: 33.33%;
+  width: 33.33%;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/NWdyPPg)
+
+## Flex
+
+`display: flex` 设置容器成 Flex 布局，`flex-wrap:` 设置元素可换行。
+
+```css
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/mdRXbKj)
+
+## Grid
+
+`grid-template-columns` 控制元素的列占据，`grid-template-rows` 控制元素的行占据，它们都用于父元素。
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 33.33%);
+  grid-template-rows: repeat(3, 33.33%);
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/rNjJBdL)
diff --git "a/CSS Layout/\345\233\272\345\256\232\345\244\264\351\203\250.md" "b/CSS Layout/\345\233\272\345\256\232\345\244\264\351\203\250.md"
new file mode 100644
index 0000000..5cb6beb
--- /dev/null
+++ "b/CSS Layout/\345\233\272\345\256\232\345\244\264\351\203\250.md"	
@@ -0,0 +1,35 @@
+# 固定头部
+
+```html
+<div>
+  <header></header>
+  <main></main>
+</div>
+```
+
+我们可以使用定位的两种方式来固定头部。
+
+## Fixed
+
+```css
+header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+main {
+  margin-top: 50px;
+}
+```
+
+## Sticky
+
+```css
+header {
+  position: sticky;
+  top: 0;
+}
+```
+
+> [测试效果](https://codepen.io/lio-zero/pen/yLPvgLo)
diff --git "a/CSS Layout/\345\233\272\345\256\232\351\241\265\350\204\232.md" "b/CSS Layout/\345\233\272\345\256\232\351\241\265\350\204\232.md"
new file mode 100644
index 0000000..81c6a47
--- /dev/null
+++ "b/CSS Layout/\345\233\272\345\256\232\351\241\265\350\204\232.md"	
@@ -0,0 +1,126 @@
+# 固定页脚
+
+假设我们的页面由三部分组成：页眉、主要内容和页脚。无论主要内容有多长，页脚总是显示在底部是一种常见的布局。
+
+```html
+<div class="container">
+  <header></header>
+  <main></main>
+  <footer></footer>
+</div>
+```
+
+基本样式：
+
+```css
+html,
+body,
+.container {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+```
+
+## 使用 `margin`
+
+- 内容区域的 `margin-bottom` 为负值
+
+```css
+.content {
+  min-height: 100%;
+  margin-bottom: -50px;
+}
+
+.footer {
+  height: 50px;
+}
+```
+
+- 页脚的 `margin-top` 为负高度大小
+
+```css
+main {
+  min-height: 100%;
+}
+
+footer {
+  height: 50px;
+  margin-top: -50px;
+}
+```
+
+## 使用 `calc()`
+
+```css
+main {
+  min-height: calc(100% - 50px);
+}
+
+footer {
+  height: 50px;
+}
+```
+
+## 使用 `flex`
+
+使用 CSS `flex`，布局实现如下：
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex-grow: 1;
+  /* flex: 1 0 auto; */
+}
+
+footer {
+  flex-shrink: 0;
+}
+```
+
+设置 `flex-grow: 1` 为主要内容将使其占用可用空间。
+
+或者使用 `margin: auto`：
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  margin-top: auto;
+}
+```
+
+## 使用 `grid`
+
+```css
+.container {
+  display: grid;
+  min-height: 100%;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/podprXj)
+
+## sticky
+
+```css
+footer {
+  position: sticky;
+  top: 100vh;
+}
+```
+
+## 更多资料
+
+- [Sticky Footer, Five Ways](https://css-tricks.com/couple-takes-sticky-footer/)
+- [A Clever Sticky Footer Technique](https://css-tricks.com/a-clever-sticky-footer-technique/)
diff --git "a/CSS Layout/\345\233\276\347\211\207\345\222\214\346\226\207\345\255\227\345\236\202\347\233\264\345\261\205\344\270\255.md" "b/CSS Layout/\345\233\276\347\211\207\345\222\214\346\226\207\345\255\227\345\236\202\347\233\264\345\261\205\344\270\255.md"
new file mode 100644
index 0000000..68d65ec
--- /dev/null
+++ "b/CSS Layout/\345\233\276\347\211\207\345\222\214\346\226\207\345\255\227\345\236\202\347\233\264\345\261\205\344\270\255.md"	
@@ -0,0 +1,39 @@
+# 图片和文字垂直居中
+
+```html
+<img
+  src="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
+  height="260"
+/>
+<p>lorem</p>
+```
+
+`vertical-align` 属性经常用于表单或图片和文字垂直对齐，`middle` 可以将元素放置在父元素的居中位置。
+
+```css
+img {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+p {
+  display: inline-block;
+}
+```
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-9596e459912f879d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+`vertical-align` 属性各个值的所对应的基线：
+
+![vertical-align 属性](https://upload-images.jianshu.io/upload_images/18281896-79fb680691076a8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**扩展**：`vertical-align` 属性还可用于解决图片底部默认空白缝隙问题，原因是行内块元素会和文字的基线对齐。
+
+解决方法有两种：
+
+- 将图片转为块级元素 `display: block`
+- 给图片添加 `vertical-align: middle | top | bottom`
+
+---
+
+Chris Coyier 提供了一种使用 Grid 布局技巧来使图片和文字垂直居中的方法：[How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?](https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/)。
diff --git "a/CSS/BEM \345\221\275\344\273\244\350\247\204\350\214\203.md" "b/CSS/BEM \345\221\275\344\273\244\350\247\204\350\214\203.md"
new file mode 100644
index 0000000..07af340
--- /dev/null
+++ "b/CSS/BEM \345\221\275\344\273\244\350\247\204\350\214\203.md"	
@@ -0,0 +1,130 @@
+# BEM 命名规范
+
+众所周知，CSS 在大型、复杂、快速迭代的系统中难以管理。有多种编写 CSS 的方法可以编写更易于维护的 CSS。
+
+本文将来了解 CSS BEM 命名规范。
+
+BEM 是一种前端项目开发的方法论，由 [Yandex](http://yandex.ru/) 公司提出。
+
+BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。
+
+这里先推荐一篇关于使用 BEM 的组件命名规范的示例文章：[bem naming cheat sheet by 9elements](https://9elements.com/bem-cheat-sheet/#form-blocks)。
+
+![bem naming cheat sheet by 9elements](https://upload-images.jianshu.io/upload_images/18281896-17eb45f3195525d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+其中介绍了包括：面包屑、按钮、卡片、列表、导航、布局、表单控件等一些组件的结构、命名示例。
+
+## 什么是 CSS BEM？
+
+**[BEM](https://bem.info/)**（Block Element Modifier，块元素修饰符）是 CSS 类的命名约定，旨在通过定义命名空间来解决范围问题来使 CSS 更具可维护性。
+
+它原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。
+
+- block（块）是一个独立的组件，可在项目中重复使用，并充当子组件（元素）的 "命名空间"。
+- 当 block（块）或 element（元素）处于特定状态或结构或样式不同时，将 modifier（修饰符）用作标志。
+
+## BEM 命名约定
+
+- `block` 代表了更高级别的抽象或组件。
+- `block__element` 代表 `.block` 的后代，用于形成一个完整的 .block 的整体。
+- `block--modifier` 代表 `.block` 的不同状态或不同版本。
+
+```css
+.block {}
+.block__element {}
+.block--modifier {}
+```
+
+## 示例
+
+- BEM 实体名称全部是小写字母或数字。名称中的不同单词用单个连字符（`-`）分隔。
+- BEM 元素名称和块名称之间通过两个下划线（`__`）分隔。
+- 布尔修饰符和其所修饰的实体名称之间通过两个连字符（`--`）来分隔。不使用名值对修饰符。
+
+```html
+<ul class="menu">
+  <li class="menu__item menu__item--selected">Item 1</li>
+  <li class="menu__item">Item 2</li>
+  <li class="menu__item">Item 3</li>
+</ul>
+```
+
+CSS 如下：
+
+```css
+.menu {
+  list-style: none;
+}
+.menu__item {
+  font-weight: bold;
+}
+.menu__item--selected {
+  color: plum;
+}
+```
+
+分析：
+
+- `.menu` 封装一个独立的实体，它本身是有意义的。虽然块可以嵌套并相互交互，但在语义上它们是相等的；没有优先级或等级制度。
+- `.menu__item` 块的一部分，没有独立的意义。任何元素在语义上都与其块相关联。
+- `.menu__item--selected` 块或元素上的修饰符。使用它们来改变外观、行为或状态。
+
+## BEM 命名规范带来的好处
+
+BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。
+
+换句话说，其所有样式规则的**特异性（specificity）**都是相同的，也就不存在复杂的优先级问题，简化了层叠规则。如果你还不是很了解特异性的话，可以查阅之前写的一篇 [CSS 继承、级联和特异性](https://github.com/lio-zero/blog/blob/master/CSS/CSS%20%E7%BB%A7%E6%89%BF%E3%80%81%E7%BA%A7%E8%81%94%E5%92%8C%E7%89%B9%E5%BC%82%E6%80%A7.md)。
+
+细分后，可以从**模块化**、**可重用性**、**结构**三部分进行理解：
+
+- **模块化**：块样式从不依赖于页面上的其他元素，因此您将永远不会遇到级联带来的问题。
+- **可重用性**：以不同的方式构成独立的块，并以智能方式对其进行重用，从而减少了必须维护的 CSS 代码量。
+- **结构**：BEM 方法为您的 CSS 代码提供了坚实的结构，使结构保持简单易懂。
+
+## 其他的一些命名规范
+
+除了 BEM 以外，还有其他一些常用命名规范如：[OOCSS](http://oocss.org/)、[SMACSS](https://smacss.com/) 等。
+
+### OOCSS
+
+OOCSS 表示的是面向对象 CSS（**Object Oriented CSS**），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践
+
+**OOCSS 有两个重要的原则**：
+
+- 第一个原则是把结构和外观分开。
+- 第二个原则是把容器和内容分开。
+
+### SMACSS
+
+SMACSS 表示的是可扩展和模块化 CSS（**Scalable and Modular Architecture for CSS**）。
+
+SMACSS 把 CSS 样式规则分成若干个不同的类别：
+
+- **基础**：该类别中包含的是默认的 CSS 样式。作为其他样式的基础。
+- **布局**：该类别中包含与页面布局相关的 CSS 样式，用来进行模块的排列。
+- **模块**：该类别中包含的是可复用的模块的 CSS 样式。
+- **状态**：该类别中的 CSS 样式用来描述布局和模块在不同状态下的外观。比如在不同的屏幕尺寸下，布局会发生变化。标签式模块的每个标签页可以有显示或隐藏的状态。
+- **主题**：该类别和状态类似，只不过是用来改变布局和模块的视觉效果。
+
+## CSS 架构
+
+这一节总结一下目前前端的一些 CSS 架构：
+
+- [BEM](http://getbem.com/)
+- [CSS Modules](https://github.com/css-modules/css-modules)
+- [Atomic](https://acss.io/)
+- [OOCSS](https://github.com/stubbornella/oocss/wiki)
+- [SMACSS](https://smacss.com/)
+- [SUITCSS](https://suitcss.github.io/)
+
+另外，可以了解一下近几年很火的 [CSS-in-JS](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSS-in-JS.md)。
+
+## 更多资源
+
+- [A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/)
+- [如何看待 CSS 中 BEM 的命名方式？](https://www.zhihu.com/question/21935157/answer/20116700)
+- [BEMIT: Taking the BEM Naming Convention a Step Further](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)
+- [BEM Docs](https://en.bem.info/methodology/quick-start)
+- [BEM 101](https://css-tricks.com/bem-101)
+- [BEM TUTORIALS](https://en.bem.info/tutorials/)
+- [Modern alternatives to BEM](https://daverupert.com/2022/08/modern-alternatives-to-bem/)
diff --git "a/CSS/BFC \345\217\212\345\205\266\345\272\224\347\224\250.md" "b/CSS/BFC \345\217\212\345\205\266\345\272\224\347\224\250.md"
new file mode 100644
index 0000000..7b82bc6
--- /dev/null
+++ "b/CSS/BFC \345\217\212\345\205\266\345\272\224\347\224\250.md"	
@@ -0,0 +1,137 @@
+# BFC 及其应用
+
+> **块格式化上下文（Block Formatting Context，BFC）** 是 Web 页面的可视化 CSS 渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
+
+## BFC 特性
+
+- BFC 在 Web 页面上是一个独立的容器，容器内外的元素互不影响
+- 和标准文档流一样，BFC 内的两个相邻块级元素垂直方向的边距会发生重叠
+- BFC 不会与浮动元素的盒子重叠
+- BFC 在计算高度时会把浮动元素计算进去
+
+## 触发 BFC
+
+只要元素满足下面任一条件即可触发 BFC 特性（[详细](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)）：
+
+- 根元素（`<html>`）
+- 浮动元素（元素的 `float` 不是 `none`）
+- 绝对定位元素（元素的 position 为 absolute 或 fixed）
+- `display 为 `inline-block`、`table-cells`、`flex`、`grid`...
+- `overflow` 值不为 `visible` 的块元素（`hidden`、`auto`、`scroll`）
+- ...
+
+## BFC 应用
+
+### 清除浮动
+
+当父元素没有设置高度，且子元素为浮动元素的情况下，父元素会发生高度坍塌，上下边界重合，即浮动元素无法撑开父元素。
+
+```html
+<div class="parent">
+  <div class="child"></div>
+</div>
+```
+
+给子元素设置浮动：
+
+```css
+.child {
+  float: left;
+}
+```
+
+![高度塌陷](https://upload-images.jianshu.io/upload_images/18281896-ffb7fb17c3520e66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，子元素浮动后，父元素失去了高度。
+
+**为了解决浮动元素造成的父元素高度塌陷问题，可以将父元素设置成一个 BFC 来清除浮动，将父元素整体设置为 BFC 环境。**
+
+```css
+.parent {
+  overflow: auto;
+}
+```
+
+![清除浮动](https://upload-images.jianshu.io/upload_images/18281896-0189447c6531425c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/bGgzaqR)
+
+### 元素浮动后发生重叠
+
+```html
+<div class="box1"></div>
+<div class="box2"></div>
+```
+
+给第一个盒子设置浮动：
+
+```css
+.box1 {
+  float: left;
+}
+```
+
+![元素重叠](https://upload-images.jianshu.io/upload_images/18281896-48d1b6e1b66290bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，由于 `box1` 发生浮动，`box2` 未发生浮动，而浮动元素由于脱离文档流，第一个盒子堆叠在第二个盒子上。
+
+为了让两个元素不重叠，我们把右边的盒子设置成 BFC：
+
+```css
+.box2 {
+  overflow: hidden;
+}
+```
+
+![元素重叠](https://upload-images.jianshu.io/upload_images/18281896-7b9a994b9b3b3629.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/zYNePmj)
+
+### 外边距重叠
+
+在标准文档流中，毗邻的两个或多个块级元素之间垂直方向的 `margin` 会合并成一个 `margin`，会取两个元素 `margin` 最大的那一个，这就是外边距重叠。
+
+有三种情况会形成[外边距重叠](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)（Margin collapsing）：
+
+- **同一层相邻元素之间**
+- **没有内容将父元素和后代元素分开**
+- **空的块级元素**
+
+而创建了块级格式化上下文（BFC）的元素，不会和它的子元素发生 `margin` 重叠。
+
+我们可以使用例如 `overflow：hidden` 来产生一个 BFC 环境来解决该问题。
+
+```html
+<div></div>
+<div></div>
+```
+
+给两个 `<div>` 元素设置外边距：
+
+```css
+div {
+  margin: 50px;
+}
+```
+
+![外边距重叠](https://upload-images.jianshu.io/upload_images/18281896-054cc08fc4e02d92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，第一个元素的下边距和第二个元素的上边距发生了重叠。
+
+**解决边距重叠的问题，可以将其放在不同的 BFC 容器中。**
+
+```html
+<div class="container">
+  <div></div>
+</div>
+
+<div class="container">
+  <div></div>
+</div>
+```
+
+![外边距重叠](https://upload-images.jianshu.io/upload_images/18281896-38aad629ee81ee4d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+因为 BFC 是一个独立的容器，容器内外互不影响。
+
+[查看效果](https://codepen.io/lio-zero/pen/QWdYapO)
diff --git a/CSS/CSS @Supports.md b/CSS/CSS @Supports.md
new file mode 100644
index 0000000..c966334
--- /dev/null
+++ b/CSS/CSS @Supports.md	
@@ -0,0 +1,116 @@
+# CSS @Supports
+
+CSS [`@supports`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@supports) 指令会像 `@media` 查询一样出现在 CSS 代码中：
+
+```css
+@supports (prop: value) {
+  /* more styles */
+}
+```
+
+CSS `@supports` 允许开发人员以多种不同的方式检查样式支持。
+
+例如：检查是否支持 `display: flex`：
+
+```css
+@supports (display: flex) {
+  div {
+    display: flex;
+  }
+}
+```
+
+## not 关键字
+
+`@supports` 可以与 `not` 关键字一起使用，以检查是否不支持：
+
+```css
+@supports not (display: flex) {
+  div {
+    float: left;
+  }
+}
+```
+
+## 多重检查和条件
+
+可以通过 `or` 和 `and` 链接进行多个 CSS 属性检查：
+
+```css
+/* or */
+@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
+  /* use styles here */
+}
+
+/* and */
+@supports (display: flex) and (-webkit-appearance: caret) {
+  /* something crazy here */
+}
+```
+
+两者一起使用：
+
+```css
+/* and 和 or */
+@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex))
+  and (-webkit-appearance: caret) {
+  /* use styles here */
+}
+```
+
+`@supports` 结构的条件模式与 `@media` 的条件模式匹配。
+
+## JavaScript `CSS.supports`
+
+CSS `@supports` 对应的 JavaScript 是 [`CSS.supports`](https://developer.mozilla.org/zh-CN/docs/Web/API/CSS/supports)。`CSS.supports` 提供了两种使用方法。
+
+- 第一种使用方法包括提供两个参数：一个用于属性，另一个用于值：
+
+```js
+const supportsFlex = CSS.supports('display', 'flex')
+```
+
+- 第二种用法包括简单地提供要分析的整个字符串：
+
+```js
+const supportsFlexAndAppearance = CSS.supports(
+  '(display: flex) and (-webkit-appearance: caret)'
+)
+```
+
+您可以通过这两种方法来检查 CSS 支持情况，它避免了在临时节点上进行属性检查，也避免了为检查支持而构建字符串。
+
+在使用 `supports` 的 JavaScript 方法之前，首先检测功能是很重要的。Opera 使用了一个不同的方法名，因此会抛出一些东西：
+
+```js
+const supportsCSS = !!(
+  (window.CSS && window.CSS.supports) ||
+  window.supportsCSS ||
+  false
+)
+```
+
+## @Supports 使用
+
+在大多数情况下，`@supports` 的最佳用途是将一组较旧的样式设置为备份，然后取消这些样式，并在支持给定属性的情况下进行增强。
+
+`@supports` 的一个优秀用例是布局。一些边缘浏览器现在提供对 `flexbox` 的支持，而其他浏览器则落后。在这种情况下，您可以编写以下代码：
+
+```css
+section {
+  float: left;
+}
+
+@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
+  section {
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: flex;
+    float: none;
+  }
+}
+```
+
+随着开发人员有更多时间尝试新的 `@supports` 功能，其他良好的用例也会出现。
+
+> [MDN 提供了更多示例](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#examples)
diff --git "a/CSS/CSS Bulma \346\241\206\346\236\266.md" "b/CSS/CSS Bulma \346\241\206\346\236\266.md"
new file mode 100644
index 0000000..62d2f4e
--- /dev/null
+++ "b/CSS/CSS Bulma \346\241\206\346\236\266.md"	
@@ -0,0 +1,199 @@
+# CSS Bulma 框架
+
+[Bulma](https://bulma.io/) 是一个免费的、开源的框架，采用了移动优先的响应式布局，它提供了可随时使用的前端组件，您可以轻松地将这些组件组合起来构建响应性强的 web 界面。
+
+Bluma 可以作为 Bootstrap 的替代框架，这类框架还有 [Skeleton](http://getskeleton.com/)、[Pure](https://purecss.io/)、[Bootflat](http://bootflat.github.io/)、[Mueller](https://muellergridsystem.com/)。
+
+Bluma 是纯 CSS 的框架，你只需要将已经给定的类添加到你的标签中，就能实现漂亮的效果。
+
+下面我们将来介绍它。
+
+## 安装
+
+### 使用 NPM
+
+```bash
+npm install bulma
+```
+
+安装后，导入 CSS 文件：
+
+```css
+@import 'bulma/css/bulma.css';
+```
+
+### 使用 CDN
+
+使用 [jsDelivr](https://www.jsdelivr.com/package/npm/bulma) 导入 CSS 文件
+
+```js
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
+```
+
+### 本地
+
+您可以从 GitHub 获得最新的 [Bulma](https://github.com/jgthms/bulma/blob/master/css/bulma.css) 版本，下载样式表文件到本地
+
+## 屏幕尺寸
+
+Bulma 是一个手机优先的框架，提供五个宽度断点，具有良好的自适应特性，可以随心所欲为不同设备设置不同样式。
+
+```
+         768         1024                1216         1408
+'     '     '     '     '     '     '     '     '     '     '     '
+<---------^------------^------------------^-------------^------------->
+  mobile      tablet         desktop         widescreen      fullhd
+```
+
+## 网格体系
+
+Bulma 的网格体系基于 Flex 布局，使用 `columns` 指定容器，使用 `column` 指定项目。
+
+```html
+<div class="columns">
+  <div class="column"></div>
+  <div class="column"></div>
+  <div class="column"></div>
+  <div class="column"></div>
+  <div class="column"></div>
+</div>
+```
+
+## 修饰符
+
+以下类定义**不同颜色**。
+
+```css
+.is-primary .is-link .is-info .is-success .is-warning .is-danger;
+```
+
+以下类定义**大小**。
+
+```css
+.is-small .is-normal .is-medium .is-large;
+```
+
+以下类定义**状态**。
+
+```scss
+.is-hovered
+.is-outlined
+.is-loading
+.is-focused
+.is-active
+.is-static
+```
+
+完整的修饰类清单请看[官方文档](https://bulma.io/documentation/elements/button/)。
+
+## 排版
+
+以下类修改**字体大小**。
+
+| `.is-size-1` | 3rem    |
+| ------------ | ------- |
+| `.is-size-2` | 2.5rem  |
+| `.is-size-3` | 2rem    |
+| `.is-size-4` | 1.5rem  |
+| `.is-size-5` | 1.25rem |
+| `.is-size-6` | 1rem    |
+| `.is-size-7` | 0.75rem |
+
+可以为不同设备指定不同的文字大小。
+
+| `is-size-1-mobile`        | 手机             |
+| ------------------------- | ---------------- |
+| `is-size-1-tablet`        | 平板             |
+| `is-size-1-touch`         | 手机和平板       |
+| `is-size-1-desktop`       | 桌面、宽屏和高清 |
+| `is-size-1-widescreen`    | 宽屏和高清       |
+| `size-1 is-size-1-fullhd` | 高清             |
+
+以下类**对齐**文本
+
+| `.has-text-centered`  | 使文本**成为中心** |
+| --------------------- | ------------------ |
+| `.has-text-justified` | 使文本**合理**     |
+| `.has-text-left`.     | 使文本与**左**对齐 |
+| `.has-text-right`     | 使文本向**右**对齐 |
+
+以下类**转换**文本
+
+| `.is-capitalized` | 将每个单词**的第一个字符**转换为**大写** |
+| ----------------- | ---------------------------------------- |
+| `.is-lowercase`   | 将**所有**字符转换为**小写**             |
+| `.is-uppercase`   | 将**所有**字符转换为**大写**             |
+
+## 组件
+
+Bulma 内置了 `Breadcrumb`、`Card`、`Menu` 等十种组件，使用超级简单、方便，你可以在这 👉 [components](https://bulma.io/documentation/components/) 查看这些组件。
+
+以下以 Card 卡片为例：
+
+```html
+<div class="card">
+  <div class="card-content">
+    <div class="content">
+      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
+    </div>
+  </div>
+  <div class="card-image">
+    <figure class="image is-4by3">
+      <img
+        src="https://bulma.io/images/placeholders/1280x960.png"
+        alt="Placeholder image"
+      />
+    </figure>
+  </div>
+  <footer class="card-footer">
+    <a href="#" class="card-footer-item">Save</a>
+    <a href="#" class="card-footer-item">Edit</a>
+    <a href="#" class="card-footer-item">Delete</a>
+  </footer>
+</div>
+```
+
+以上例子中，卡片内分为三部分：`card-content` 文本内容，`card-image` 图片容器，`card-footer` 脚部列表。
+
+## WYSIWYG 内容
+
+> WYSIWYG：所见即所得是一种系统。它使得用户在视图中所看到文档与该文档的最终产品具有相同的样式，也允许用户在视图中直接编辑文本、图形、或文档中的其他元素。
+
+```html
+<div class="content">
+  <!-- start WYSIWYG contents -->
+  <h1>Heading</h1>
+  <p>Paragraph</p>
+
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ul>
+  <!-- end WYSIWYG contents -->
+</div>
+```
+
+要为通常生成的 WYSIWYG 内容提供默认样式，请使用 `.content` 类。你可以在[Content](https://bulma.io/documentation/elements/content/)查看关于这类的内容。
+
+## 定制 Bulma
+
+要想自定义 Bulma，您需要：
+
+- 安装 Bulma
+- 有效的 Sass 设置
+- 创建自己的 `.scss` 和 `.sass` 文件
+
+你可以通过 [node-sass](https://bulma.io/documentation/customize/with-node-sass)、[Sass CLI](https://bulma.io/documentation/customize/with-sass-cli)、[webpack](https://bulma.io/documentation/customize/with-webpack) 任何一种方法来实现，官网给出了详细的步骤，一步到位。下面我们简单的介绍下如何更改自定义样式。
+
+先导入 Bulma [**初始变量**](https://bulma.io/documentation/customize/variables/)，以如下为例：
+
+```scss
+@import '../node_modules/bulma/bulma.sass'; // 该文件需要先引用
+
+// 设置您需要更改颜色的变量
+$purple: #8a4d76;
+$pink: #fa7c91;
+$purple-color-1: $purple; // 派生变量
+```
+
+上面代码中，预设的 `purple`、`pink` 和 `purple-color-1` 变量将被替换。
diff --git "a/CSS/CSS Reset \344\270\216 Sprites.md" "b/CSS/CSS Reset \344\270\216 Sprites.md"
new file mode 100644
index 0000000..b65f9c4
--- /dev/null
+++ "b/CSS/CSS Reset \344\270\216 Sprites.md"	
@@ -0,0 +1,94 @@
+# CSS Reset 与 Sprites
+
+总结起来就两段话：
+
+- Reset —— 重置浏览器默认属性。
+- Sprites —— 由多个小图片组成的图像。
+
+## 为什么要初始化 CSS 样式
+
+因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
+
+当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
+
+`*` 是最简单的初始化方法（不建议）：
+
+```css
+* {
+  padding: 0;
+  margin: 0;
+}
+```
+
+但最好的做法是使用 CSS Reset 或 Normalize.css。
+
+## CSS Reset 和 Normalize.css 有什么区别？
+
+[Normalize.css](https://necolas.github.io/normalize.css/) 是一种 CSS Reset 的替代方案，一种现代的 HTML 5 替代 CSS Reset 方法。
+
+- **重置（Resetting）** — 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像 `margin`、`padding`、`font-size` 这些样式全部置成一样。你将必须重新定义各种元素的样式。
+- **标准化（Normalizing）** — 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
+
+另请：[Normalize 和 Reset 的区别](https://github.com/lio-zero/blog/blob/main/CSS/Normalize%20%E5%92%8C%20Reset%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+
+### Normalize 的作用
+
+以下是 Normalize 文档的作用描述：
+
+- 与许多 CSS Reset 不同，保留有用的默认值。
+- 规范化各种元素的样式。
+- 纠正错误和常见的浏览器不一致。
+- 通过细微的修改来提高可用性。
+- 使用详细注释解释代码的作用。
+
+### 我们该如何去做选择呢？
+
+当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。
+
+## 什么是精灵图（CSS Sprites），其优缺点，以及如何实现？
+
+精灵图，也称雪碧图。精灵图是把多张小图片整合到一张图片中。它被运用在众多使用了很多小图标的网站上。
+
+### 如何实现
+
+首先，您需要一张精灵图，使用生成器将多张图片打包成一张精灵图。
+
+> 推荐：[CSS Sprites Generator](https://www.toptal.com/developers/css/sprite-generator)
+
+接着，为需要使用到的图片设置 CSS 类，该类将使用 `background-image` 属性引入背景图片，`background-position` 属性进行背景定位，使用 `background-size` 属性进行缩放。
+
+使用图片时，将相应的类添加到你的元素中。
+
+### 优点
+
+- 减少 HTTP 请求数（一张精灵图只需要一个请求），提高了页面加载速度。但是对于 HTTP/2 而言，加载多张图片不再是问题。
+- 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在 `:hover` 伪类中的图片，不会出现闪烁。
+- 通过整合图片来减小图片的数量和体积。
+- 可以在一定程度上解决图片命名上的困扰。
+- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
+
+### 缺点
+
+- 图片合并麻烦。
+- 维护比较麻烦，修改一个图片可能需要重新布局整个图片、样式。
+
+### 扩展
+
+- 在 HTTP/1.1 下，每个 TCP 连接最多允许一个请求
+- 使用 HTTP/1.1，现代的浏览器可以打开多个并行连接（2 到 8 之间），但是受到限制
+- 使用 HTTP/2，浏览器和服务器之间的所有请求都在单个 TCP 连接上多路复用
+- 这意味着可以减少打开和关闭多个连接的成本，从而可以更好地使用 TCP 连接并限制客户端和服务器之间的延迟影响。这样就可以在同一 TCP 连接上并行加载数十个图像
+- 尽管 HTTP/2 比 HTTP/1.1 改进了 50％，但在大多数情况下，sprites 的加载速度仍然比单个图像快。
+- 一种较新的技术是使用图标字体，它具有基于矢量的附加优点，因此在高分辨率（视网膜）屏幕上看起来更好。一些不错的图标字体是 [Awesome 字体](http://fortawesome.github.com/Font-Awesome/)和 [Foundation 图标](http://www.zurb.com/playground/foundation-icons)
+
+### 替代方案
+
+- **Sprites 是栅格图像**，替代的方案通常是与其相关的，有 [SVG 图标](https://simurai.com/post/20251013889/svg-stacks)、[字体图标](https://css-tricks.com/flat-icons-icon-fonts/)、[字符编码](https://copypastecharacter.com/)等。
+- Sprites 就是为了减少服务器对图片的请求数，提高网站性能的一种手段。我们可以从解决图像请求的问题入手，也就是对图像进行懒加载 [lazyload](https://appelsiini.net/projects/lazyload/)，还有渐进式[图像加载占位符](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)。
+
+### 提高效率实用工具
+
+- [CSS Sprites Generato](https://www.toptal.com/developers/css/sprite-generator) 在线生成器
+- [SpriteCow](http://www.spritecow.com/)
+- [SpriteMe](https://spriteme.org/)
+- [Grunticon](https://github.com/filamentgroup/grunticon) 几年没维护了
diff --git "a/CSS/CSS background \345\261\236\346\200\247.md" "b/CSS/CSS background \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..cc03946
--- /dev/null
+++ "b/CSS/CSS background \345\261\236\346\200\247.md"	
@@ -0,0 +1,329 @@
+# CSS background 属性
+
+[`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) 是一个 CSS 简写属性，用于设置任何元素的背景效果。它控制元素内容下方的绘制内容。
+
+以下示例显示了可指定为元素创建任何背景效果的属性的完整列表：
+
+```css
+header {
+  background: color image positionX positionY / size repeat attachment origin
+    clip;
+  background: plum /* color */ url('image/logo.jpg') /* image */ top center /
+    /* position */ 150px 150px /* size */ no-repeat /* repeat */ padding-box
+    /* origin */ content-box /* clip */ fixed; /* attachment */
+}
+```
+
+`background` 简写形式由八个属性组成。让我们深入了解它们每一个的用法。
+
+## `background-color`
+
+CSS `background-color` 属性用于设置元素背景的颜色。如果图像需要时间加载，则可以将其与 `background-image` 属性组合作为备用选项。
+
+`background-color` 值指定为颜色名称、十六进制值、RGB/RGBA 值或 HSL/HSLA 值。
+
+### 默认值
+
+`background-color` 的默认值是 `transparent` 关键字。
+
+```css
+header {
+  background-color: transparent;
+}
+```
+
+### 用法
+
+```css
+/* 关键字值 */
+header {
+  background-color: red;
+}
+
+/* 十六进制值 */
+header {
+  background-color: #bbff00;
+}
+
+/* RGB 值 */
+header {
+  background-color: rgb(255, 255, 128); /* 完全不透明 */
+}
+header {
+  background-color: rgba(117, 190, 218, 0.5); /* 50% 透明 */
+}
+
+/* HSL 值 */
+header {
+  background-color: hsl(50, 33%, 25%); /* 完全不透明 */
+}
+header {
+  background-color: hsla(50, 33%, 25%, 0.75); /* 75% 透明 */
+}
+```
+
+## `background-image`
+
+`background-image`是一个 CSS 属性，用于将一个或多个图像设置为元素的背景。当指定多个图像时，它们显示为一个堆栈，一个在另一个之上。
+
+### 默认值
+
+`background-image` 的默认值是 `none`，这意味着不会显示任何图像。
+
+```css
+header {
+  background-image: none;
+}
+```
+
+### 用法
+
+此示例仅指定单个图像。
+
+```css
+header {
+  background-image: url('test.jpg');
+}
+```
+
+此示例将在 `second` 图像的顶部显示 `first` 图像。
+
+```css
+header {
+  background-image: url('image/first.jpg'), url('image/second.jpg');
+}
+```
+
+此示例指定 `banner` 图像上方的线性渐变。
+
+```css
+header {
+  background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 0, 0.5),
+      rgba(0, 0, 255, 0.5)
+    ), url('image/banner.jpg');
+}
+```
+
+## `background-position`
+
+`background-position` 属性设置背景图像的起始位置。其值指定图像相对于元素边框的放置的坐标。
+
+`background-position` 可以用关键字指定（`left`、`top`、`bottom`、`right`、`center`）；百分比（`0%`，`25%` 等）；或长度（`0cm`，`3px` 等）。这些值可以组合在一起。
+
+### 默认值
+
+`background-position` 的默认值是 `0% 0%`，表示元素边框的左上角。
+
+```css
+header {
+  background-position: 0% 0%; /* top left */
+}
+```
+
+### 用法
+
+```css
+header {
+  background-position: top; /* 顶部居中 */
+  background-position: left; /* 左侧居中 */
+  background-position: center; /* 水平垂直居中 */
+  background-position: 20% 50%; /* 距左侧20% 距顶部50% */
+  background-position: bottom 20px left 50px; /* 距底部20% 距左侧50% */
+  background-position: left 2cm bottom 5cm; /* 距左侧2cm 距底部5cm */
+}
+```
+
+## `background-size`
+
+`background-size` 属性指定背景图像的大小。它定义了图像是被拉伸、以其原始大小显示还是填充整个可用空间。
+
+值得注意的是，现在图像大小覆盖的空间将填充背景色。
+
+### 关键字
+
+`background-size` 可以使用关键字、百分比或长度指定。
+
+- `cover`：将图像缩放到尽可能大的位置，但不会拉伸图像。它还可以垂直或水平裁剪图像以覆盖任何空白区域。
+- `contain`：将图像缩放到尽可能大的位置，但不会裁剪或拉伸图像。
+- `auto`：按相应方向缩放图像，使图像保持其原始比例
+
+### 默认值
+
+`background-size` 的默认值是 `auto`。
+
+```css
+header {
+  background-size: auto;
+}
+```
+
+### 用法
+
+```css
+header {
+  background-size: auto /* 默认值 */ | cover /* 拉伸以填充元素的框 */ | contain; /* 缩放图像而不剪切/剪切。图像可以重复以填充元素的框 */
+}
+
+/* 按 20% 宽度缩放图像，并自动调整高度。图像可以重复以填充元素的框 */
+header {
+  background-size: 20% auto;
+}
+
+/* 按 3em 宽和 25% 高缩放图像。图像可以重复以填充元素的框 */
+header {
+  background-size: 3em 25%;
+}
+
+/* 可以为多个背景指定更多值 */
+header {
+  background-size: 50%, 25%, 60%;
+}
+```
+
+## `background-repeat`
+
+`background-repeat` 属性定义背景图像的重复方式。背景图像可以沿着水平、垂直、水平垂直重复，或者根本不重复。
+
+由于默认情况下图像被剪裁为其元素的大小，因此也可以使用 `background-repeat` 属性缩放图像以适应或填充元素的区域。
+
+### 关键字
+
+`background-repeat` 属性是使用关键字值指定的。
+
+- `repeat`：重复图像以覆盖整个背景
+- `no-repeat`: 不会重复图片
+- `space`：重复图像而不剪裁，并在重复图像之间均匀分布空白
+- `round`：重复图像，并填充重复图像之间的空白
+- `repeat-x`：仅沿 x 轴重复图像
+- `repeat-y`：仅沿 y 轴重复图像
+
+### 默认值
+
+`background-repeat` 的默认值就是 `repeat`，它会重复图像，直到图像填充整个元素背景。
+
+```css
+header {
+  background-repeat: repeat;
+}
+```
+
+### 用法
+
+```css
+header {
+  background-repeat: repeat-x /* 相当于 repeat no-repeat */ | repeat-y
+    /* 相当于 no-repeat repeat */ | repeat /* 相当于 repeat repeat */ | space
+    /* 相当于 space space */ | round /* 相当于 round round */ | no-repeat; /* 相当于 no-repeat no-repeat */
+}
+```
+
+## `background-attachment`
+
+`background-attachment` 属性指定背景图像应可滚动还是固定到视口。
+
+### 关键字
+
+`background-attachment` 属性仅使用关键字指定。
+
+- `scroll`：将背景图像固定到其元素。不滚动包含内容的背景图像
+- `fixed`：将背景图像固定到视口。即使内容可滚动，背景图像也不会滚动
+- `local`：修复相对于元素内容的背景图像，从而允许背景图像随着内容滚动而滚动
+
+### 默认值
+
+`background-attachment` 的默认值为 `scroll`。
+
+```css
+header {
+  background-attachment: scroll;
+}
+```
+
+### 用法
+
+```css
+header {
+  background-attachment: scroll
+    /* 将图像固定到元素（仅当元素正在滚动而不是元素的内容时才能滚动） */ | fixed
+    /* 将图像固定到视口 */ | local; /* 滚动包含内容的图像 */
+}
+
+/* 在多个图像上，我们可以指定双值 */
+header {
+  background-image: url('pic1.gif'), url('pic2.gif');
+  background-attachment: fixed, scroll;
+}
+```
+
+## `background-origin`
+
+`background-origin` 属性指定在何处绘制背景图像。使用 `content-box` 值将跨越整个元素，在边框内使用 `border-box` 值或在填充内使用 `padding-box` 值。
+
+**请注意**，当 `background-attachment` 设置为 `fixed` 时，`background-origin` 将被忽略，并且 `background-origin` 与 `background-clip` 相同，只是它调整背景的大小而不是剪辑。
+
+### 关键字
+
+`background-origin` 属性是使用关键字值指定的。
+
+- `content-box`：相对于内容区域定位背景
+- `border-box`：相对于边框区域定位背景
+- `padding-box`：相对于填充区域定位背景
+
+### 默认值
+
+`background-origin` 的默认值是 `padding-box` 关键字。
+
+```css
+header {
+  background-origin: padding-box;
+}
+```
+
+### 用法
+
+```css
+header {
+  background-origin: border-box | padding-box | content-box;
+}
+
+/* 我们可以为多个图像指定双值 */
+header {
+  background-image: url('logo.jpg'), url('banner.png');
+  background-origin: content-box, padding-box;
+}
+```
+
+## `background-clip`
+
+`background-clip` 属性用于设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
+
+> **请注意**，此属性仅在指定了背景图像或背景颜色时才具有实际效果；否则，它将仅在边界上具有视觉效果。
+
+### 关键字
+
+`background-clip` 属性是使用关键字值指定的。
+
+- `border-box`：默认值，将背景延伸到元素的边框区域外沿
+- `content-box`：将背景裁剪至内容区域外沿。
+- `padding-box`：将背景延伸到元素的填充区域外沿
+- `text`：将背景被裁剪成文字的前景色。（**实验值**）
+
+### 默认值
+
+`background-clip` 的默认值是 `border-box` 关键字。
+
+```css
+header {
+  background-clip: border-box;
+}
+```
+
+### 用法
+
+```css
+header {
+  background-clip: border-box | padding-box | content-box;
+}
+```
diff --git "a/CSS/CSS content-visibility \345\261\236\346\200\247 \342\200\224 \346\216\250\350\277\237\345\206\205\345\256\271\346\270\262\346\237\223.md" "b/CSS/CSS content-visibility \345\261\236\346\200\247 \342\200\224 \346\216\250\350\277\237\345\206\205\345\256\271\346\270\262\346\237\223.md"
new file mode 100644
index 0000000..4b4417a
--- /dev/null
+++ "b/CSS/CSS content-visibility \345\261\236\346\200\247 \342\200\224 \346\216\250\350\277\237\345\206\205\345\256\271\346\270\262\346\237\223.md"	
@@ -0,0 +1,40 @@
+# CSS content-visibility 属性 — 推迟内容渲染
+
+[`content-visibility`](https://web.dev/content-visibility/) 是新的 CSS 属性，可以提高页面加载性能。对于具有大量内容块、图像和视频丰富的复杂布局，解码数据和渲染像素可能是一项非常昂贵的操作，尤其是在低端设备上。
+
+使用 `content visibility: auto`，我们可以在容器位于视口之外时提示浏览器跳过子对象的布局。
+
+例如，您可以跳过在初始加载时渲染 `footer`：
+
+```css
+footer {
+  content-visibility: auto;
+  /* 1000px 是尚未渲染的部分的估计高度。 */
+  contain-intrinsic-size: 1000px;
+}
+```
+
+它是新的属性，仅支持 Chrome 85+、Edge 85+ 和 Opera 71+ 等少部分主流浏览器。
+
+![2022/2/5：content-visibility 的支持情況](https://upload-images.jianshu.io/upload_images/18281896-ac3fe1a690335e52.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果您需要声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分，可以使用 [CSS contain](https://developers.google.com/web/updates/2016/06/css-containment) 属性。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。
+
+```css
+.ele {
+  contain: none | strict | content | [ size | layout | style | paint ];
+}
+```
+
+> **注意**：[`content-visibility: auto` 的行为类似于 `overflow: hidden;`](https://www.terluinwebdesign.nl/en/css/calculating-contain-intrinsic-size-for-content-visibility/)，但您可以通过应用 `padding-left/right` 来修复它，而不是使用默认的 `margin: 0 auto;` 以及声明的宽度。`padding` 基本上允许元素溢出 `content` 并进入 `padding`，而不会将盒模型作为一个整体离开并被切断。
+
+另外，请记住，当新内容最终渲染时，您可能会引入一些 [CLS](https://web.dev/cls/)（Cumulative Layout Shift，累积布局偏移），因此最好使用具有适当大小占位符的 `contain-intrinsic-size`。
+
+[一个关于 Content-visibility 的示例](https://codepen.io/vmpstr/pen/xxZoyMb)。
+
+## 更多资源
+
+- [content-visibility](https://css-tricks.com/almanac/properties/c/content-visibility/)
+- [Calculating 'contain-intrinsic-size' for 'content-visibility'](https://www.terluinwebdesign.nl/en/css/calculating-contain-intrinsic-size-for-content-visibility/)
+- [使用 CSS3 will-change 提高页面滚动、动画等渲染性能](https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/)
+- [content-visibility——只需一行 CSS 代码，让长列表网页的渲染性能提升几倍以上！](https://juejin.cn/post/6908521872577527822#heading-1)
diff --git "a/CSS/CSS outline \345\261\236\346\200\247.md" "b/CSS/CSS outline \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..8b065ab
--- /dev/null
+++ "b/CSS/CSS outline \345\261\236\346\200\247.md"	
@@ -0,0 +1,93 @@
+# CSS outline 属性
+
+CSS [`outline`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)（轮廓）是一个简写属性，用于围绕元素外部绘制一条线。它与 `a:focus` 选择器结合使用特别有用，可以更加强调链接或其他元素。
+
+`outline` 与 `border` 相似，不同之处在于 `outline` 在整个元素周围画了一条线；它不能像 `border` 那样，指定在元素的一个面上设置轮廓，也就是不能单独设置顶部轮廓、右侧轮廓、底部轮廓或左侧轮廓。
+
+## 语法
+
+```css
+outline: width | style | color;
+```
+
+`outline` 简写属性可以用一个、两个或三个值声明，并且它们的顺序可以任意更换。例如：
+
+```css
+outline: solid; /* 这仅指定样式值 */
+
+outline: dashed #eee; /* 这将指定颜色值和样式值 */
+
+outline: thick inset; /* 这将指定宽度值和样式值 */
+
+outline: 1px solid plum; /* 这将指定所有 3 个值 */
+```
+
+![outline](https://upload-images.jianshu.io/upload_images/18281896-4c29ac0c5fda6f5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+这里需要注意两点：
+
+- 当仅指定一个或两个值时，其他值将解析为其默认值。`outline` 只需设置其 `style` 值即可工作。
+- 如果未定义样式，许多元素的轮廓将不可见。这是因为样式默认为 `none`。一个例外是 `input` 元素，它们由浏览器赋予默认样式。
+
+## 属性
+
+`outline` 属性是由三个单独属性组成的缩写，用于定义轮廓的颜色、宽度和样式。我们将在下面逐一探讨。
+
+### `outline-width`
+
+`outline-width` 定义要绘制的线的厚度。其值可以是任意长度值，也可以是以下任意关键字：
+
+- `thin`
+- `medium`（默认值）
+- `thick`
+
+```css
+outline-width: 2 (px, em, rem) | thin | medium | thick;
+```
+
+### `outline-style`
+
+`outline-style` 定义要绘制的线的类型。它的值可以是以下任何关键字：
+
+- `auto`
+- `dotted`
+- `dashed`
+- `solid`
+- `double`
+- `groove`
+- `ridge`
+- `inset`
+- `outset`
+- `none`（默认值，没有轮廓）
+
+```css
+outline-style: auto | dotted | dashed | solid | double | groove | ridge | inset
+  | outset;
+```
+
+### `outline-color`
+
+`outline-color` 用于设置一个元素轮廓的颜色。它可以通过关键字、十六进制值、RGB/RGBA 值和 HSL/HSLA 值来指定。
+
+如果[浏览器支持](https://caniuse.com/?search=outline-color)，其默认值为 `invert`；否则，其默认值为 [`currentColor`](https://github.com/lio-zero/css-tricks#%E4%BD%BF%E7%94%A8-currentcolor-%E5%85%B3%E9%94%AE%E5%AD%97%E9%87%8D%E7%94%A8%E5%BD%93%E5%89%8D%E9%A2%9C%E8%89%B2)。
+
+```css
+outline-color: currentColor | red | #eee | rgb(255, 255, 255) | hsl(0, 0, 0);
+```
+
+## 有趣的用法
+
+尝试打开任何网站上的控制台并运行以下内容：
+
+```js
+document.head.insertAdjacentHTML(
+  'beforeend',
+  '<style>* { outline: 1px solid plum; }</style>'
+)
+```
+
+你们会看到很多网站都是这样的结构：
+
+![outline](https://upload-images.jianshu.io/upload_images/18281896-707c9f70b633ab55.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+默认情况下，`outline` 用于 `:focus` 样式。但请记住，如果删除轮廓样式，例如：`a:focus { outline: 0; }`，您需要使用其他视觉上不同的样式将它们添加回来。
diff --git "a/CSS/CSS scroll-behavior\345\261\236\346\200\247 \342\200\224 \347\272\257 CSS \345\271\263\346\273\221\346\273\232\345\212\250.md" "b/CSS/CSS scroll-behavior\345\261\236\346\200\247 \342\200\224 \347\272\257 CSS \345\271\263\346\273\221\346\273\232\345\212\250.md"
new file mode 100644
index 0000000..e717a9e
--- /dev/null
+++ "b/CSS/CSS scroll-behavior\345\261\236\346\200\247 \342\200\224 \347\272\257 CSS \345\271\263\346\273\221\346\273\232\345\212\250.md"	
@@ -0,0 +1,50 @@
+# CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
+
+CSS 中的 `scroll-behavior` 属性是一个非常新的属性。定义要求 `scroll-behavior`（尤其是在选择锚链接时）具有平滑的过渡动画外观，而不是默认的、更刺眼的即时跳转。
+
+```css
+html {
+  scroll-behavior: auto | smooth;
+}
+```
+
+`scroll-behavior` 属性接受两个值，将切换打开和关闭的平滑滚动功能。
+
+- `auto`（默认）：该值允许滚动框中的元素之间突然跳转。
+- `smooth`：顾名思义，该值是滚动框内元素之间的平滑的过渡动画。
+
+它是较新的属性，支持 Chrome 61+、Firefox 36+ 和 Opera 48+ 等主流浏览器。
+
+![2022/2/5：scroll-behavior 支持情况](https://upload-images.jianshu.io/upload_images/18281896-4b757024f53d4502.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 示例：返回顶部
+
+默认情况下，通过单击锚链接定位页面中的元素，浏览器将直接跳转到目标。
+
+在不使用任何 JavaScript 的情况下，我们可以使用简单的 CSS `scroll-behavior` 属性平滑地滚动到给定的元素。
+
+这里给出一个平滑滚动到顶部的示例，在 `<html>` 元素上提供以 ID 为目标的链接：
+
+```html
+<html id="top">
+  <body>
+    <a href="#top">跳转到页面顶部</a>
+  </body>
+</html>
+```
+
+将 `scroll-behavior` 属性设置为 `html` 元素可实现整个页面的平滑滚动效果：
+
+```css
+html {
+  scroll-behavior: smooth;
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/qBRxNQL)
+
+## 更多资料
+
+- [scroll-behavior](https://css-tricks.com/almanac/properties/s/scroll-behavior/)
+- [Downsides of Smooth Scrolling](https://css-tricks.com/downsides-of-smooth-scrolling/)
+- [滚动到页面顶部的多种实现](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%AE%9E%E7%8E%B0.md)
diff --git "a/CSS/CSS vertical-align \345\261\236\346\200\247.md" "b/CSS/CSS vertical-align \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..f8ee474
--- /dev/null
+++ "b/CSS/CSS vertical-align \345\261\236\346\200\247.md"	
@@ -0,0 +1,110 @@
+# CSS vertical-align 属性
+
+CSS [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) 属性控制在一行上相邻设置的元素如何对齐。
+
+```css
+img {
+  vertical-align: middle;
+}
+```
+
+> **注意**：为了使其正常工作，我们需要沿基线设置元素。如：`inline` 内联元素（例如 `<span>`，`<img>`）或 `inline-block` 内联块（例如，由 `display` 属性设置）元素。`vertical-align` 属性也适用于 `table-cell` 元素。
+
+## 语法
+
+```css
+elem {
+  vertical-align: baseline | top | bottom | middle | text-top | text-bottom |
+    sub | super | length units;
+}
+```
+
+## 关键字
+
+- `vertical-align` — 默认值。顾名思义，它将元素与父元素的基线对齐。
+- `top` — 将元素与一行中最高元素的顶部对齐。
+- `bottom` — 将元素与底部对齐，元素处于同一级别。
+- `middle` — 将元素与其父元素的中心对齐。
+- `text-top` — 使用其父元素行中最高字体的顶部对齐元素。
+- `text-bottom` — 使用其父元素行中最高字体的底部对齐元素。
+- `sub` — 将元素对齐到其父元素的基线下标。它的行为更像 `<sub>` 标签。
+- `super` — 将元素与父元素的基线上标对齐。它的行为更像 `<sup>` 标签。
+
+## 长度和百分比值
+
+将元素与给定单位对齐。正数将使元素与基线上方对齐，负值将使元素与基线下方对齐。
+
+这些值可以是任意长度单位：`px`，`em`，`%`，等。
+
+```css
+img {
+  vertical-align: 10px;
+}
+
+img {
+  vertical-align: 50%;
+}
+
+img {
+  vertical-align: 3em;
+}
+```
+
+## 全局值
+
+`initial` — 将元素的对齐方式设置为其默认值，即 `baseline`。
+
+```css
+img {
+  vertical-align: initial;
+}
+```
+
+`inherit` — 将元素的对齐方式设置为其父元素的值。
+
+```css
+img {
+  vertical-align: inherit;
+}
+```
+
+## 例子
+
+### 表格
+
+`vertical-align` 属性可以直接应用用于表格单元格，可以将对齐单元格内的内容。重要的一点是，它能很好的兼容浏览器在显示效果上的一致性。
+
+```css
+td {
+  height: 40px;
+  vertical-align: middle;
+}
+```
+
+效果如下：
+
+![vertical-align](https://upload-images.jianshu.io/upload_images/18281896-61ce21993fb07bdb.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### 垂直居中
+
+`vertical-align` 属性不允许您在另一个元素中 “垂直居中” 一个元素。我们更多的会使用 **Flexbox** 来做垂直居中。
+
+但是，您可能不知道，有一个 **ghost** 技巧可以帮助您垂直居中一个元素。
+
+```css
+p {
+  border: 1px solid plum;
+  display: table;
+  height: 100px;
+  width: 100px;
+}
+
+span {
+  display: table-cell;
+  vertical-align: middle;
+}
+```
+
+效果如下：
+
+![vertical-align](https://upload-images.jianshu.io/upload_images/18281896-a45337c39b47f83e.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/CSS/CSS will-change \345\261\236\346\200\247 \342\200\224 \344\274\230\345\214\226\346\270\262\346\237\223\346\200\247\350\203\275.md" "b/CSS/CSS will-change \345\261\236\346\200\247 \342\200\224 \344\274\230\345\214\226\346\270\262\346\237\223\346\200\247\350\203\275.md"
new file mode 100644
index 0000000..c847828
--- /dev/null
+++ "b/CSS/CSS will-change \345\261\236\346\200\247 \342\200\224 \344\274\230\345\214\226\346\270\262\346\237\223\346\200\247\350\203\275.md"	
@@ -0,0 +1,36 @@
+# CSS will-change 属性 — 优化渲染性能
+
+> **[`will-change`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change) 属性可以开启 GPU 硬件加速以提升/优化网站动画渲染性能。**
+
+`will-change` 通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。
+
+语法：
+
+```css
+will-change: <animateable-feature> = scroll-position | contents | <custom-ident>;
+```
+
+`will-change` 属性的取值：
+
+- `auto` — 应用标准浏览器优化。
+- `scroll-position` — 表示元素的滚动位置将在不久的将来某个时候设置动画，以便浏览器准备在元素的滚动窗口中看不到的内容。
+- `contents` — 表示希望在不久后改变元素内容中的某些东西，或者使它们产生动画。
+- `<custom>` — 任何用户定义的属性，比如 `transform` 或 `opacity`，表示希望在不久后改变指定的属性名或者使之产生动画，
+
+> **注意**：不要将 `will-change` 应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或消耗大量资源。详细内容查看 [will-change](https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change)。
+
+以下是 `will-change` 的支持情況：
+
+![2022/2/5：will-change 支持情況](https://upload-images.jianshu.io/upload_images/18281896-bcaa354083f45bef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[一个关于 will-change 的示例](https://codepen.io/nchan0154/pen/abVNYNo)
+
+## 更多资源
+
+- [will-change](https://css-tricks.com/almanac/properties/w/will-change/)
+- [Fix scrolling performance with CSS will-change property](https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/)
+- [My white whale: A use case for will-change](https://www.nicchan.me/blog/a-use-case-for-will-change/)
+- [Everything You Need to Know About the CSS will-change Property](https://dev.opera.com/articles/css-will-change-property/)
+- [An Introduction to the CSS will-change Property](https://www.sitepoint.com/introduction-css-will-change-property/)
+- [使用 CSS3 will-change 提高页面滚动、动画等渲染性能](https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/)
+- [How to create high-performance CSS animations](https://web.dev/animations-guide/)
diff --git "a/CSS/CSS \345\215\225\344\275\215\345\217\212\345\205\266\351\234\200\350\246\201\346\263\250\346\204\217\347\232\204\345\234\260\346\226\271.md" "b/CSS/CSS \345\215\225\344\275\215\345\217\212\345\205\266\351\234\200\350\246\201\346\263\250\346\204\217\347\232\204\345\234\260\346\226\271.md"
new file mode 100644
index 0000000..22fe510
--- /dev/null
+++ "b/CSS/CSS \345\215\225\344\275\215\345\217\212\345\205\266\351\234\200\350\246\201\346\263\250\346\204\217\347\232\204\345\234\260\346\226\271.md"	
@@ -0,0 +1,33 @@
+# CSS 单位及其需要注意的地方
+
+- `px`（Pixel）：绝对长度单位，绝对像素值，它取决于显示器的分辨率。一旦分辨率确定，设置为 `px` 的尺寸就成为固定尺寸，不会自动缩放。（1px = 1/96 英寸）
+- `em`：相对长度单位，相对于父元素的 `font-size`。如父元素未设置 `font-size`，则相对于浏览器的默认字体尺寸（`1em = 16px`，**注意**：浏览器的默认字体大小可以更改）。通常的做法是将默认的正文字体大小设置为 62.5％（等于 10px）。
+- `rem`（root em）：CSS3 新增的一个相对单位。相对于根元素的 `font-size`，其元素的大小都与根元素换算（默认浏览器的大小 `16px`）。
+- `%`：相对于父元素。例如：`font-size: 100%` 和 `font-size: 1em` 一样，它们都表示字体大小是默认（继承自父元素）字体大小的 2 倍；`line-height: 200%` 表示行高是自己字体大小的 2 倍。
+- `vw`：相对于视口的宽度，`1vw = 1% * viewport width`（视口宽度）
+- `vh`：相对于视口的高度，`1vh = 1% * viewport height`（视口高度）
+- `vmin`：相对于视口的较小尺寸（`vw` 和 `vh` 中的最小值），`1vmin = min`（`1vh`，`1vw`）
+- `vmax`：相对于视口的较大尺寸（`vw` 和 `vh` 中的最大值），`1vmax = max`（`1vh`，`1vw`）
+- `ch`：相对于元素字体的字形 `0` 的宽度，也就是 `1ch = 0`（一个 0 的宽度），`3ch = 000`（三个 0 的宽度）。允许完美的元素 + 文本缩放。
+- `in`（英寸）：`1in` = `2.54cm`=`96px`
+- `pc`（`Picas`，皮卡）：`1pc = 1in / 6 = 16px`，也就是大约 `6pt`，`1/6` 英寸，也就是 `1pc = 12pt = 1/6in`。
+- `pt`（`Point`，点）：`1pt = 1in / 72 = 1.333px`（大约），它是物理长度单位，相当于 `1/72` 英寸。通常在印刷中使用。（`1pt = 1/72in`）
+- `cm`（厘米）： `1cm = 96px / 2.54 = 37.8px`（大约）
+- `mm`（毫米）：`1mm = 1cm / 10 = 3.78px`（大约）
+
+## 注意点
+
+- `px` 和 `em` 都是长度单位，区别是 `px` 的值是固定的，计算比较容易。`em` 得值不是固定的，并且 `em` 会继承父级元素的字体大小。
+- 浏览器的默认字体大小都是 `16px`。所以未经调整的浏览器都符合: `1em = 16px`。那么 `12px = 0.75em`，`10px = 0.625em`。通常，我们会将浏览器的默认字体设置为 `62.5%`，此时 `1rem = 16px * 62.5% = 10px`（所以 `12px = 1.2rem`）；（1:10 的比例更好换算）
+- `%` 与 `em` 一样，都是级联的，意思是父元素的的字体大小会影响到子元素。
+- `em` 和 `rem` 单位可用于创建完美的可扩展布局，兼容多设备的不二之选！
+- 相对长度：`em`、`rem`、`vw`、`vh`、`vmin`、`vmax`、`%`、`ch`。其相对于另一个长度属性，在不同设备之间缩放表现得更好。
+- 绝对长度：`px`、`cm`、`mm`、`pt`、`pc`、`in`。其尺寸都是固定的，不同设备的尺寸不同，变化跨度大，所以不建议在屏幕上使用绝对长度单位。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。
+- 《CSS 权威指南》指出：`px` 是相对长度单位，而《The Lengths of CSS》指出：`px` 是绝对长度单位。权威文档 MDN 上将 `px` 定义为了绝对单位。（本文将其归为绝对单位）
+- **视口（Viewport）**：在桌面端，视口指的是浏览器内部的可视区域大小，即 `window.innerWidth/window.innerHeight` 大小，不包含任务栏、标题栏以及底部工具栏的浏览器区域大小；而在移动端较为复杂，它涉及到三个视口：分别是 `Layout Viewport`（布局视口）、`Visual Viewport`（视觉视口）、`Ideal Viewport`（理想视口）。 而视口单位中的**视口**，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 `Layout Viewport`。
+
+CSS 中的四个视口单位分部是 `vw`、`vh`、`vmin` 和 `vmax`。以下是它们的兼容情况：
+
+![vw，vh，vmin，vmax](https://upload-images.jianshu.io/upload_images/18281896-49bb83a48c764b3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**扩展**：如果您开发过微信小程序，你可能还使用 `rpx`，它是微信小程序独有的、解决屏幕自适应的尺寸单位。
diff --git "a/CSS/CSS \345\256\236\347\216\260\346\226\207\346\234\254\346\272\242\345\207\272\347\234\201\347\225\245\346\225\210\346\236\234.md" "b/CSS/CSS \345\256\236\347\216\260\346\226\207\346\234\254\346\272\242\345\207\272\347\234\201\347\225\245\346\225\210\346\236\234.md"
new file mode 100644
index 0000000..cc89bb9
--- /dev/null
+++ "b/CSS/CSS \345\256\236\347\216\260\346\226\207\346\234\254\346\272\242\345\207\272\347\234\201\347\225\245\346\225\210\346\236\234.md"	
@@ -0,0 +1,38 @@
+# CSS 实现文本溢出省略效果
+
+## 单行文本溢出
+
+以下是截断单行长文本的 CSS 片段：
+
+```css
+.truncate {
+  width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+```
+
+- `overflow: hidden` — 文字长度超出限定宽度，则隐藏超出的内容
+- `text-overflow: ellipsis` — 规定当文本溢出时，显示省略符号来代表被修剪的文本
+- `white-space: nowrap` — 设置文字在一行显示，不能换行
+
+## 多行文本溢出
+
+使用 `-webkit-line-clamp` 可以设置多行超出显示省略号，下面的 CSS 声明将行数限制为 2：
+
+```css
+.truncate {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+```
+
+> **注意**：`-webkit-line-clamp` 属性仅在具有 `display: -webkit-box` 和 `-webkit-box-orient: vertical` 声明时有效。
+
+## 更多资料
+
+[Line Clampin (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) 给出了更多灵活的文本溢出方案。
diff --git "a/CSS/CSS \347\233\222\346\250\241\345\236\213.md" "b/CSS/CSS \347\233\222\346\250\241\345\236\213.md"
new file mode 100644
index 0000000..ca04a61
--- /dev/null
+++ "b/CSS/CSS \347\233\222\346\250\241\345\236\213.md"	
@@ -0,0 +1,66 @@
+# CSS 盒模型
+
+CSS 是关于盒子的。页面上显示的所有内容都有一个框，[**盒模型**（box model）](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)描述了如何计算该框的大小 —— 考虑了边距（`margin`）、边框（`border`）、填充（`padding`）和内容（`content`）。
+
+以下图片说明了盒模型（Box Model）的层级分部：
+
+![CSS 盒模型](https://upload-images.jianshu.io/upload_images/18281896-1d9164962395e977.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+由内到外，分别是：
+
+- **`content`（内容）** — 盒子的内容，其中显示文本和图像
+- **`padding`（填充）** — 围绕内容的透明区域（即边框和内容之间的空间）
+- **`border`（边框）** — 围绕在内边距和内容外的边框。
+- **`margin`（边界）** — 边距周围的透明区域（即边距与任何相邻元素之间的空间）
+
+它们解释了元素的大小，对应着相应的 CSS 属性，除了 content（CSS 属性 `width/height`）。
+
+## IE 盒模型和 W3C 盒模型
+
+这里需要介绍一下 IE 盒模型和 W3C 盒模型的区别。
+
+盒模型分为两类：**W3C 标准盒模型和 IE 盒模型**。
+
+- W3C 标准盒模型 — 元素的宽度（`width`）和高度（`height`）只包含内容（`content`）。而 `width`、`padding` 和 `border` 一起决定了整个盒子的大小。
+- IE 盒模型 — 元素的宽度（`width`）和高度（`height`）包含了 `content`、`padding` 和 `border`。整个盒子的大小由 `width/height` 决定。
+
+```css
+.box {
+  width: 200px;
+  padding: 10px;
+  border: 5px solid plum;
+  margin: 0;
+}
+```
+
+以上元素的宽度在 IE 盒模型和 W3C 盒模型中是不同的：
+
+- W3C 盒模型 — `200px + 10px + 10px + 5px + 5px = 230px`。
+- IE 盒模型 — `200px`
+
+标准 CSS 盒模型采用给定元素的宽度，然后在该宽度上添加 `padding` 和 `border`，这意味着元素占用的空间大于给定的宽度。
+
+## 如何进行不同盒模型的切换？
+
+CSS3 `box-sizing` 属性提供给我们切换盒模型的权利，它有如下三个值：
+
+- `content-box` — 默认的标准（W3C）盒模型元素效果
+- `border-box` — 触发怪异（IE）盒模型元素的效果
+- `inherit` — 继承父元素 `box-sizing` 属性的值
+
+```css
+.box {
+  box-sizing: content-box | border-box | inherit;
+}
+```
+
+> **注意**：到 IE8+ 才支持使用 `box-sizing` 进行盒模型切换。
+
+我们可能不明确或者总是去计算加上 `padding` 和 `border` 才能获取元素的实际大小，这变的很麻烦。这时，我们可以使用 `box-sizing: border-box` 在设置有 `padding` 和 `border` 值时不把元素的宽度/高度撑开。
+
+## 更多资料
+
+- [MDN Docs：盒模型](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model) — 完整的介绍
+- [CSS Box Model Module Level 3](https://www.w3.org/TR/css-box-3/)
+- [BFC 及其应用](https://github.com/lio-zero/blog/blob/main/CSS/BFC%20%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8.md)
+- [CSS 盒模型之内边距、边框、外边距 十九问 （持续更新）](https://juejin.cn/post/6880111680153059341)
diff --git "a/CSS/CSS \347\273\247\346\211\277\343\200\201\347\272\247\350\201\224\345\222\214\347\211\271\345\274\202\346\200\247.md" "b/CSS/CSS \347\273\247\346\211\277\343\200\201\347\272\247\350\201\224\345\222\214\347\211\271\345\274\202\346\200\247.md"
new file mode 100644
index 0000000..003afa8
--- /dev/null
+++ "b/CSS/CSS \347\273\247\346\211\277\343\200\201\347\272\247\350\201\224\345\222\214\347\211\271\345\274\202\346\200\247.md"	
@@ -0,0 +1,394 @@
+# CSS 继承、级联和特异性
+
+如果你想更好的掌握 CSS，CSS 的特异性是一个重要的话题。应用于 CSS 选择器的一组规则决定了应用于元素的样式。为了更好地理解这一点，我们必须了解一个相关的主题 —— CSS 中的[**级联和继承**](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)。
+
+## CSS 的级联特性
+
+CSS **层叠/级联样式表（cascade Stylesheets）**—— 简单的说，CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。我们来看一个例子，理解这一点。
+我们将在一个元素中应用两个类，并为每个类提供一个不同的 `color`。
+
+```html
+<p class="color-pink color-plum">I'm Superman</p>
+```
+
+同时应用如下两个 CSS 类：
+
+```css
+.color-pink {
+  color: pink;
+}
+
+.color-plum {
+  color: plum;
+}
+```
+
+效果如下：
+
+![color-plum](https://upload-images.jianshu.io/upload_images/18281896-066db08968c00314.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**注意**，样式表中最后的 `color-plum` 将应用于元素。现在，您可能希望 CSS 总是这样将样式应用于元素，但情况并非总是如此。
+
+```html
+<p class="color-plum" id="paragraph">I'm Superman</p>
+```
+
+CSS 如下：
+
+```css
+#paragraph {
+  color: pink;
+}
+
+.color-plum {
+  color: plum;
+}
+```
+
+您希望将哪种样式应用于元素？`#paragraph` 还是 `.color-plum`？
+
+效果如下：
+
+![paragraph](https://upload-images.jianshu.io/upload_images/18281896-74f8aec7533425d0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**注意**，应用了第一个。`#paragraph` 是一个 ID 选择器，而 `.color-plum` 是一个类选择器。这是因为级联具有特异性，来确定哪些值应用于元素。那么，CSS 的特异性是什么呢？
+
+## CSS 继承的特性
+
+[继承](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance)定义了哪些属性由它们所应用于的元素的子元素继承。
+继承也需要在上下文中去理解 —— 一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
+
+```html
+<p>
+  <span>I'm Superman</span>
+</p>
+```
+
+CSS 如下：
+
+```css
+p {
+  color: plum;
+  font-size: 2rem;
+  border: medium solid;
+}
+```
+
+效果如下：
+
+![继承](https://upload-images.jianshu.io/upload_images/18281896-4111dc7006a56929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，`<span>` 继承了 `color`，但是没继承 `border`，因为 `border` 就是一个典型的非继承属性，
+
+这里顺带讲一下一些可以控制继承的一些属性。
+
+CSS 为控制继承提供了四个特殊的通用属性值。每个 CSS 属性都接收这些值。
+
+- `inherit` 设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".
+- `initial` 设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 `inherit` 。
+- `unset` 将属性重置为自然值，也就是如果属性是自然继承那么就是 `inherit`，否则和 `initial`一样
+- `revert` 只有很少的浏览器支持。
+
+```html
+<div>
+  <h2>I'm Superman</h2>
+</div>
+
+<div class="extra">
+  <h2>I'm Superman</h2>
+</div>
+```
+
+```css
+h2 {
+  color: plum;
+}
+
+.extra h2 {
+  color: inherit;
+}
+```
+
+![inherit](https://upload-images.jianshu.io/upload_images/18281896-120ddf5b10264ca3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，我们将 `<h2>` 的字体颜色设置为 `color: plum`，但是第二个 `<h2>` 确没有应用该颜色。原因是，我们在第二个 h2 中的 `color` 属性值使用了 `inherit`，该属性将继承父元素的值，没有设置将应用默认值。
+
+## CSS 哪些属性可以继承？哪些属性不可以继承？
+
+- 可以继承的样式：`font-size`、`font-family`、`color`、`list-style`、`cursor` 等。
+- 不可继承的样式：`width`、`height`、`border`、`padding`、`margin`、`background` 等。
+
+## CSS 特异性解释
+
+> 根据 MDN，浏览器通过[**特异性（优先级）**](http://www.w3.org/TR/selectors/#specificity)来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。特异性是基于不同种类选择器组成的匹配规则。
+
+简单地说，如果两个 CSS 选择器应用于同一个元素，则使用具有更高特定性的一个。这就是为什么在我们前面的示例中，应用 ID 选择器的属性值，因为它具有更高的特异性值。
+
+那么，如何计算选择器的特异性呢？
+
+## 特异性层次结构
+
+计算选择器的特异性值是相当棘手的。计算它的一种方法是使用权重系统对不同的选择器进行排序，以创建层次结构。我们将为每个选择器分配权重，以便更好地了解每个选择器的排名。让我们从最少的开始。
+
+### 元素和伪元素
+
+我们使用元素选择器（如 `a`、`p` 和 `div`）来设置所选元素的样式，而伪元素（如 `::after` 和 `::before`）用于设置元素特定部分的样式。
+
+```css
+/* 元素选择器 */
+p {
+  color: red;
+}
+
+/* 伪元素选择器 */
+p::before {
+  color: red;
+}
+```
+
+元素和伪元素选择器的特异性最低。在特异性权重系统中，它的值为 1。
+
+### 类、属性和伪类
+
+以下是类、属性和伪类示例
+
+```css
+/* 类选择器 */
+.person {
+  color: plum;
+}
+
+/* 属性选择器 */
+[type='radio'] {
+  color: plum;
+}
+
+/* 伪类选择器 */
+:focus {
+  color: plum;
+}
+```
+
+它比元素和伪元素选择器具有更高的特异性。在特异性权重系统中，它的值为 10。
+
+### ID 选择器
+
+ID 选择器用于使用元素的 ID 来定位元素。
+
+```css
+/* ID 选择器 */
+#header {
+  color: plum;
+}
+```
+
+ID 选择器比类和元素具有更高的特异性。在特异性权重系统中，它的值为 100。
+
+### 内联样式
+
+内联样式直接应用于 HTML 文档中的元素。这是一个例子：
+
+```html
+<p style="color: plum">I'm Superman</p>
+```
+
+内联样式具有最高的特异性。在特异性权重系统中，它的值为 1000。
+
+**总结**
+
+```text
+内联样式       - 1000
+ID 选择器      - 100
+类、属性和伪类  - 10
+元素和伪元素    - 1
+```
+
+权重较高的选择器的属性值将始终应用于权重较低的选择器。内联样式具有最高的权重，其属性值将覆盖应用于元素的其他选择器的值。例如，如果我们有一个元素，对于相同的属性 `color`，就有一个内联样式。如果类和 ID 选择器也具有相同属性的值，则内联样式将获胜。
+
+```html
+<p style="color: purple" class="color-plum" id="paragraph">I'm Superman</p>
+```
+
+```css
+#paragraph {
+  color: pink;
+}
+
+.color-plum {
+  color: plum;
+}
+```
+
+效果如下：
+
+![purple](https://upload-images.jianshu.io/upload_images/18281896-a2e73cb245fe730c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+当 ID 选择器和类选择器具有相同属性的值时，也会发生同样的情况。将应用 ID 选择器的属性值。
+
+**注意**，仅当不同的选择器具有**相同属性**的值时，权重才适用。
+
+### 多个元素选择器
+
+有时，多个选择器用于定位元素。例如，下面的列表：
+
+```html
+<ul class="list">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
+您可以针对这样的列表项目：
+
+```css
+.list > li {
+  color: pink;
+}
+```
+
+或
+
+```css
+ul > li {
+  color: plum;
+}
+```
+
+如果两个选择器都在同一个样式表上使用，将对列表项应用哪种样式？
+
+让我们回到我们的权重系统来计算两个选择器的特异性。
+
+对于`.list > li`，一个类选择器的权重是 10，一个元素选择器的权重是 1。它们的总和是 11。
+
+对于 `ul > li`，一个元素选择器的权重为 1。使用两个元素选择器，因此它们的和为 2。
+
+你认为哪些颜色值会被应用？
+
+如果您说将应用 `.list > li` 选择器的颜色，那就对了。它比其他选择器具有更高的特异性值。
+
+效果如下：
+
+![pink](https://upload-images.jianshu.io/upload_images/18281896-dddbbed3898002c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+让我们再试一个例子。鉴于此元素：
+
+```html
+<div class="first-block" id="box-1">
+  <div class="second-block" id="box-2">
+    <p class="text" id="paragraph">Item 1</p>
+  </div>
+</div>
+```
+
+CSS 如下：
+
+```css
+#box-1 > .second-block > .text {
+  color: pink;
+}
+
+.first-block > #box-2 > #paragraph {
+  color: plum;
+}
+```
+
+试着计算特异性并猜测哪个 `color` 值适用。
+
+效果如下：
+
+![plum](https://upload-images.jianshu.io/upload_images/18281896-dd59d0ba5fba24b6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+让我们使用我们的权重系统来理解为什么应用第二个选择器的颜色值。
+
+对于 `#box-1 > .second block > .text`，我们有一个 ID 选择器和两个类选择器。它们的权重之和是 `100 + 10 + 10 = 120`。
+
+对于 `.first block > #div-2> #paragraph`，我们有一个类选择器和两个 ID 选择器。它们的权重之和是 `10 + 100 + 100 = 210`。
+
+这就是为什么使用后一个选择器的值。
+
+我们再来看一个例子，以确保你已经掌握。
+
+```html
+<div class="first-block" id="box">
+  <ul class="first-list" id="list">
+    <li class="first-list-item" id="list-item">
+      First
+      <span class="first-span" id="span">item</span>
+    </li>
+  </ul>
+</div>
+```
+
+如果样式表中有以下样式，那么将对 `span` 应用哪种颜色？
+
+```css
+div#box > .first-list > #list-item > span {
+  color: pink;
+}
+
+#list > #list-item > #span {
+  color: purple;
+}
+
+#box > #list > .first-list-item > .first-span {
+  color: plum;
+}
+```
+
+尝试计算特异性，并将其与运行代码时得到的结果进行比较。
+
+## 关于 CSS 特异性的重要点
+
+- 分配给选择器的权重只是让我们知道将哪些规则应用到元素上。然而，这并不总是足够的。例如，您可以假设，如果使用 10 个以上的类（权重 >= 100）作为一个元素的目标，那么属性值将覆盖一个 ID 选择器的属性值。但事实并非如此。只要包含 10 个以上类的选择器且没有 ID 选择器，那么一个 ID 选择器将始终优先于它。
+- `!important` — 任何选择器的属性值都使其成为将应用于元素的值。无论选择器在特异性层次结构上的排名如何，都会发生这种情况。让我们用一个例子来理解这一点。
+
+```html
+<p class="plum" id="paragraph" style="color: blue">Item 1</p>
+```
+
+如果应用以下样式
+
+```css
+p {
+  color: pink !important;
+}
+
+.plum {
+  color: plum;
+}
+
+#paragraph {
+  color: purple;
+}
+```
+
+元素选择器 `p` 的值将被使用，因为 `!important` 附加在价值上。然而，如果另一个选择器具有 `!important` 标记附加到相同的属性，则使用后面选择器的值。
+
+![important](https://upload-images.jianshu.io/upload_images/18281896-d8581d40472552ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+这就是为什么应该避免使用 `!important`，因为这样很难覆盖样式。
+
+通常，要设置特定元素的样式，最好使用类。这使得在需要时更容易覆盖样式。
+
+## 总结
+
+1. 由于 CSS 的级联特性，如果对同一个元素应用两个规则，则最后一个规则就是将要使用的规则。
+2. CSS 特异性是一组规则，用于确定哪个样式适用于元素。
+
+3. 权重系统是计算不同选择器特异性的一种方法。
+
+**以下是权重总结**
+
+- 内联样式，如 `style="xxx"`，权值为 1000；
+- ID 选择器，如 `#content`，权值为 100；
+- 类、伪类和属性选择器，如 `.content`、`:hover`、`[attribute]`，权值为 10；
+- 元素选择器和伪元素选择器，如`div`、`p`，权值为 1。
+
+在同一组属性设置中，`!important` 优先级最高。无论选择器在何处，使用的特异性如何，将覆盖所有其他样式（包括行内样式）。
+
+- 相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式 > 导入样式。
+- 含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式。
+- 选择器优先级：`!important > id > class > tag`。
+
+- **需要注意的是：通用选择器（`*`）、子选择器（`>`）和相邻同胞选择器（`+`）并不在权重系统中，所以他们的权值都为 0**。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。
diff --git "a/CSS/CSS \351\200\211\346\213\251\345\231\250.md" "b/CSS/CSS \351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000..75edac9
--- /dev/null
+++ "b/CSS/CSS \351\200\211\346\213\251\345\231\250.md"	
@@ -0,0 +1,272 @@
+# CSS 选择器
+
+> [CSS 选择器](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)是 CSS 规则集的一部分，它实际上选择要设置样式的内容。
+
+## CSS 选择符
+
+**通用选择器**：`*` 将匹配文档的所有元素。不推荐使用通配选择器，因为它是性能最低的一个 CSS 选择器。
+
+```css
+/* 常用的是清除所有元素的 margin 和 padding */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* 也可以与子选择器一起使用。 */
+.container * {
+  border: 1px solid black;
+}
+```
+
+**元素选择器**：选择具有给定节点名称的所有元素。
+
+```css
+/* input 将匹配任何 <input> 元素 */
+input { }
+```
+
+**ID 选择器**：根据其 `id` 属性值选择一个元素。文档中应只有一个具有给定 ID 的元素。
+
+```css
+/* 将匹配 ID 为 app 的元素 */
+#app { }
+```
+
+**类选择器**：选择具有给定 `class` 属性的所有匹配的元素。
+
+```css
+/* 将匹配具有 .active 类的任何元素 */
+.active { }
+```
+
+**后代选择器**：` `（空格）选择器选择前一个元素的后代。
+
+```css
+/* 将匹配 div 元素内部的所有 span 元素（深层嵌套也将被匹配到） */
+div span { }
+```
+
+**子代选择器**：`>` 选择器选择前一个元素的直接子代的节点。
+
+```css
+/* 匹配直接嵌套在 ul 元素内的所有 li 元素（深层嵌套将匹配不到） */
+ul > li { }
+```
+
+**选择器列表**：`,` 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
+
+```css
+/* 会同时匹配 <div> 元素和 <span> 元素 */
+div, span { }
+```
+
+**通用兄弟选择器**：`~` 选择器选择兄弟元素，位置无须紧邻，只须同层级。
+
+```css
+/* 匹配同一父元素下，p 元素后的所有 span 元素 */
+p ~ span { }
+```
+
+**相邻兄弟选择器**：`+` 选择器选择相邻元素，当第二个元素*紧跟在*第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
+
+```css
+/* 会匹配所有相邻在 h2 元素后的 p 元素 */
+h2 + p { }
+```
+
+**属性选择器**：按照给定的属性，选择所有匹配的元素。
+
+```css
+/* 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么） */
+[autoplay] { }
+```
+
+**伪类**：`:` 伪选择器是添加到选择器的关键字，指定要选择的元素的特殊状态。
+
+```css
+/* 匹配所有曾被访问过的 <a> 元素 */
+a:visited { }
+```
+
+**伪元素**：`::` 伪元素选择器用于表示无法使用 HTML 语义表达的实体。
+
+```css
+/* 匹配所有 <p> 元素的第一行 */
+p::first-line { }
+```
+
+## 组合选择器
+
+> 组合选择器是将两个选择器连接在一起的选择器中的字符。组合选择器有四种类型。
+
+- **后代选择器（空格）**
+- **子代选择器（>）**
+- **通用兄弟选择器（~）**
+- **相邻兄弟选择器（+）**
+
+用法上一节已经讲到。
+
+## 属性选择器
+
+CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
+
+```css
+/* 匹配 title 属性的 <a> 元素 */
+a[title] {
+  color: pink;
+}
+
+/* 匹配 href 属性并且属性值为 http:.... 的 <a> 元素 */
+a[href='https://github.com/lio-zero/blog'] {
+  color: plum;
+}
+
+/* 匹配 lang 属性并且属性值为 zh-*（连字符）的 div 元素，例如：zh-CN 或 zh-TW */
+div[lang|='zh'] {
+  color: plum;
+}
+
+/* 将所有语言为美国英语的 <div> 元素的文本颜色设为蓝色 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* 匹配 href 属性并且属性值包含 www 的 <a> 元素 */
+a[href*='www'] {
+  color: pink;
+}
+
+/* 匹配 href 属性并且属性值开头是 https 的 <a> 元素 */
+a[href^='https'] {
+  color: pink;
+}
+
+/* 匹配 src 属性并且属性值结尾是 .jpg 的 <img> 元素 */
+img[src$='.jpg'] {
+  color: pink;
+}
+```
+
+匹配方式类似正则。
+
+属性选择器有多种匹配方式，这节进行扩展介绍。
+
+## 伪选择器
+
+### 伪类
+
+```css
+p:lang(language) 为 <p> 元素的 lang 属性选择一个开始值
+
+input:focus 选择元素输入后具有焦点
+a:link 选择所有未访问链接
+a:visited 选择所有访问过的链接
+a:active 选择正在活动链接
+a:hover 把鼠标放在链接上的状态
+input:valid  选择所有有效值的属性
+#line:target 选择当前活动 #line 元素(点击 URL 包含锚的名字)
+input:required 选择有 required 属性指定的元素属性
+input:read-write 选择没有只读属性的元素属性
+input:read-only 选择只读属性的元素属性
+input:out-of-range 选择指定范围以外的值的元素属性
+input:optional 选择没有 required 的元素属性
+
+/* CSS3 新增选择器 */
+input[type="text"] 属性选择器
+:root 选择文档的根元素，等同于 html 元素
+:empty 选择没有子元素的元素
+:target 选取当前活动的目标元素
+:not(selector) 选择除 selector 元素意外的元素
+
+/* 表单 */
+input:enabled 选择可用的表单元素
+input:disabled 选择禁用的表单元素
+input:checked 选择被选中的表单控件元素(单选框或复选框)
+
+p:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n。还有 add、oven
+p:nth-last-child(n) 选择所有 p 元素倒数的第二个子元素
+p:nth-of-type(n) 选择所有 p 元素第二个为 p 的子元素
+p:nth-last-of-type(n) 选择所有 p 元素倒数的第二个为 p 的子元素
+
+p:first-child 选择器匹配属于任意元素的第一个子元素的 p 元素
+p:last-child 选择所有 p 元素的最后一个子元素
+p:only-child 选择所有仅有一个子元素的 p 元素
+p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素
+p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
+p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素
+```
+
+### 伪元素
+
+```css
+p::selection 选择用户选择的元素部分。
+p::before 在每个 p 元素之前插入内容
+p::after 在每个 p 元素之后插入内容
+p::first-line 选择每个 p 元素的第一行
+p::first-letter 选择每个 p 元素的第一个字母
+```
+
+## 常见的问题
+
+### 伪类和伪元素之间有什么区别？
+
+伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿。
+
+CSS3 为了区分两者，明确规定伪类用一个冒号（`:`）来表示，而伪元素则用两个冒号（`::`）来表示。
+
+但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。
+
+表现形式上作区分：伪类表现的是某种状态被选择，例如 `:hover`、`:checked`，而伪元素表现的是选择元素的某个部分，使这部分看起来像一个独立的元素，例如 `::before` 、`::after`。抽象的说，伪类就是选择元素某种状态，伪元素就是创建一个 HTML 元素。
+
+还需要注意：
+
+- IE 6-7 不支持 `:focus`
+- 伪类名称对大小写不敏感
+- 伪元素也有人称为伪对象
+
+关于伪类/伪元素的示例可以查阅我最近新开的另一个仓库 [css-tricks](https://github.com/lio-zero/css-tricks)，里面提供了大量的 CSS 技巧（包括伪类/伪元素），也可以阅读 [An Ultimate Guide To CSS Pseudo Classes And Pseudo Elements](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/) 文章。
+
+### CSS `content` 属性有什么作用？
+
+`content` 属性专门应用在 `before/after` 伪元素上，用于插入额外内容或样式。
+
+```css
+/* <div data-icon="icon">...</div> */
+a::before {
+  content: attr(data-icon);
+}
+```
+
+### CSS 选择器的优先级（特异性）是什么？
+
+> MDN：浏览器通过**优先级**来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
+
+### CSS 权重和优先级
+
+权重分为四级，分别是：
+
+- 内联样式，如 `style="xxx"`，权值为 1000
+- ID 选择器，如 `#content`，权值为 100
+- 类、伪类和属性选择器，如 `.content`、`:hover` 和 `[attribute]`，权值为 10
+- 元素选择器和伪元素选择器，如 `div`、`p`，权值为 1
+
+相同权重，以定义最近者为准：行内样式 > 内部样式 > 外部样式 > 导入样式
+
+- 含外部载入样式时，后载入样式将覆盖其之前载入的样式和内部样式（只覆盖相同的 CSS 选择器）
+- 选择器优先级：`!important > id > class > tag`
+- 在同一组属性设置中，`!important` 优先级最高，高于行内样式
+
+> **注意：通用选择器（`*`）、子选择器（`>`）和相邻兄弟选择器（`+`）并不在这四个等级中，所以他们的权值都为 0**。权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。
+>
+> 详细内容请查看：[优先级](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity) 和 [CSS3 选择器优先级](http://www.w3.org/TR/selectors/#specificity)
+
+### 浏览器如何解析 CSS 选择器？
+
+浏览器**从右往左**解析 CSS 选择器，这样的匹配节点的方式能快速、准确的与 render 树上的节点进行匹配，避免了许多无效匹配。浏览器需要评估的规则越少，样式引擎执行的速度就越快。
+
+> 详细内容可查看：[Why do browsers match CSS selectors from right to left?](https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left)
+
+### 浏览器如何解析 CSS？
+
+浏览器如何解析 CSS？
diff --git "a/CSS/CSS \351\207\215\347\275\256\345\205\203\347\264\240\346\240\267\345\274\217.md" "b/CSS/CSS \351\207\215\347\275\256\345\205\203\347\264\240\346\240\267\345\274\217.md"
new file mode 100644
index 0000000..b53878c
--- /dev/null
+++ "b/CSS/CSS \351\207\215\347\275\256\345\205\203\347\264\240\346\240\267\345\274\217.md"	
@@ -0,0 +1,62 @@
+# CSS 重置元素样式
+
+## CSS 重置
+
+CSS 重置有助于在不同浏览器之间强制实现样式一致性，并为样式元素提供了一个干净的列表。您可以使用诸如 [Normalize](http://necolas.github.io/normalize.css/) 等 CSS 重置库，也可以使用更简化的重置方法：
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+```
+
+现在，元素将被去除 `margin` 和 `padding`，`box-sizing` 允许您使用 CSS 盒模型管理布局。
+
+**注意**：如果遵循下面的[继承 `box-sizing`](https://github.com/AllThingsSmitty/css-protips#inherit-box-sizing) 提示，您可能会选择在 CSS 重置中不包含 `box-sizing` 属性。
+
+## 继承 `box-sizing`
+
+从 `html` 元素继承 `box-sizing`：
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+```
+
+这使得在插件或其它组件中更改 `box-sizing` 变得更容易。
+
+## 使用 unset 而不是重置所有属性
+
+重置元素的属性时，不需要重置每个单独的属性：
+
+```css
+button {
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  padding: 0;
+}
+```
+
+你可以用 `all` 简写來指定所有元素的属性。 将该值设置为 `unset` 会将元素的属性更改为其初始值：
+
+```css
+button {
+  all: unset;
+}
+```
+
+> **注意**： IE11 不支持 `all` 和 `unset` 的简写。
diff --git "a/CSS/Flex \345\270\203\345\261\200.md" "b/CSS/Flex \345\270\203\345\261\200.md"
new file mode 100644
index 0000000..996ad92
--- /dev/null
+++ "b/CSS/Flex \345\270\203\345\261\200.md"	
@@ -0,0 +1,619 @@
+# Flex 布局
+
+Flex 是 Flexible Box 和分配容器中项目之间的空间，即使这些项目的大小未知或是动态。
+
+Flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地方式填充可用空间（主要是为了适应各种显示设备和屏幕大小）。flex 容器扩展项目以填充可用空间，或收缩项目以防止溢出。
+
+最重要的是，Flex 布局与常规布局（基于垂直的块和基于水平的内联）相比是方向无关的。虽然这些方法对页面很有效，但它们缺乏灵活性来支持大型或复杂的应用程序（尤其是在方向改变、调整大小、拉伸、收缩等方面）。
+
+Flex 布局在 2009 年由 W3C 提出的。它在所有的浏览器都支持：
+
+![Flex 支持情况](https://upload-images.jianshu.io/upload_images/18281896-edeae6574fa01df3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> **注意**：Flexbox 布局最适合应用程序的组件和小规模布局，而 Grid 布局则适用于大规模布局。
+
+以下内容参考 [Flexbox30](https://www.samanthaming.com/flexbox30/)，图片截自 [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+
+## 基础概念
+
+为了使 Flexbox 正常工作，你需要设置父子关系。父级是 Flex 容器，其中的所有内容都是子级或 Flex 项。
+
+**Flex 容器**仅环绕其直接子容器。因此，没有孙子或孙辈的关系。只有父母 <-> 直系子女！只要存在父子关系，就可以建立 Flexbox。因此，孩子也可以成为其孩子的伸缩容器。但这将是一个单独的 flex 容器。而且它不会继承祖父母的 flex 属性。
+
+还有一点，关于为什么不能将文本容器设置为 flexbox 容器，可以阅读 [Never make your text container a flexbox container](https://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p)。
+
+![flexbox 属性应用示意图](https://upload-images.jianshu.io/upload_images/18281896-d907e938cdf1d8b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+Flexbox 在 2 轴系统中运行：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴是你将伸缩项目如何放置在伸缩容器中的定义方向。确定横轴非常简单，它是在垂直于主轴的方向上进行的。
+
+记住不要把他比作数学上的 **x** 和 **y** 轴。因为 **x** 轴并不总是主轴。这可能会让你出错。
+
+在每个轴上都有一个起点和终点。如果在主轴上，则将起始位置称为 **main start**，将结束位置称为 **main end**。相同的概念适用于交叉轴。知道起点和终点很重要，因为你可以控制 flex 项目的放置位置。
+
+项目默认沿主轴排列。单个项目占据的主轴空间叫做 `main size`，占据的交叉轴空间叫做 `cross size`。
+
+## 属性
+
+父容器和子项目都有自己的一套属性。
+
+父容器：
+
+- `flex-direction`
+- `flex-wrap`
+- `flex-flow`
+- `justify-content`
+- `align-items`
+- `align-content`
+
+子项目：
+
+- `flex-grow`
+- `flex-shrink`
+- `flex-basis`
+- `flex`
+- `order`
+- `align-self`
+
+下面，我们会对它们一一讲解。
+
+## 父容器
+
+![父容器](https://upload-images.jianshu.io/upload_images/18281896-17095dabca7fddc9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+flex 容器有 2 种类型：`flex` 将创建一个块级 flex 容器，`inline-flex` 将创建一个 inline 级 flex 容器。
+
+```css
+.parent {
+  display: flex /* default */ | inline-flex;
+}
+```
+
+很简单地解释，块元素占据了容器的整个宽度。它们看起来像构建块，其中每个构建块彼此堆叠。内联元素仅占用其所需的空间。因此，它们似乎排成一行，或者彼此并排。
+
+### flex-direction
+
+`flex-direction` 定义主轴的属性。记住主轴可以是水平或垂直的。因此，如果我们希望主轴是水平的，则称为行。如果我们希望它是垂直的，那就叫做列。另外，请记住我们有一个主要的起点和终点。我们只需添加一个反向后缀即可将 **main start** 设置为反向。
+
+```css
+.parent {
+  flex-direction: row /* default */ | row-reverse | column | column-reverse;
+}
+```
+
+![flex-direction](https://upload-images.jianshu.io/upload_images/18281896-dc080b31fbfebcbb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### flex-wrap
+
+默认情况下，弹性项目将尝试使其自身收缩以适合一行，换句话说，不进行换行。但是，如果你希望 flex 项保持其大小并在容器中的多行中溢出，则可以使用 `flex-wrap: warp;`。此属性将使容器中的弹性项目占用多行。
+
+```css
+.parent {
+  flex-wrap: nowrap /* default */ | wrap | wrap-reverse;
+}
+```
+
+![flex-wrap](https://upload-images.jianshu.io/upload_images/18281896-78de20fd7401631e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+`flex-wrap` 允许 flex 项在单独的行上进行包装。但有了 `align-content` 属性，我们可以控制哪些项目行在横轴上的对齐方式。由于这仅适用于包装的项目，所以如果只有一行 flex 项，则此属性不会有任何效果。
+
+### flex-flow
+
+`flex-flow` 是 `flex-direction` 和 `flex-wrap` 的简写。默认值为 row nowrap。如果仅设置一个值，则未设置的属性将采用默认值。
+
+```css
+.parent {
+  flex-flow: row nowrap /* default */ | <flex-direction> <flex-wrap> |
+    <flex-direction> | <flex-wrap>;
+}
+```
+
+### justify-content
+
+`justify-content` 设置沿主轴对齐的属性。
+
+```css
+.parent {
+  justify-content: flex-start /* default */ | flex-end | center | space-around |
+    space-between | space-evenly;
+}
+```
+
+![justify-content](https://upload-images.jianshu.io/upload_images/18281896-93eed65c0780566c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+主轴也可以垂直放置。在这种情况下，将 `flex-direction` 设置为 `column`。
+
+```css
+.parent {
+  flex-direction: column;
+  justify-content: flex-start /* default */ | flex-end | center | space-around |
+    space-between | space-evenly;
+}
+```
+
+### align-items
+
+`align-items` 设置沿横轴对齐的属性。记住横轴始终垂直于主轴。
+
+```css
+.parent {
+  align-items: stretch /* default */ | flex-start | flex-end | center | baseline;
+}
+```
+
+![align-items](https://upload-images.jianshu.io/upload_images/18281896-5576f5eecc138a73.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+现在，让我们看一下如果交叉轴水平放置，则弹性项目如何对齐。换句话说，伸缩方向是列。
+
+```css
+.parent {
+  flex-direction: column;
+  align-items: stretch /* default */ | flex-start | flex-end | center | baseline;
+}
+```
+
+### align-content
+
+`align-content` 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
+
+```css
+.parent {
+  align-content: stretch /* default */ | flex-start | flex-end | center |
+    space-between | space-around;
+}
+```
+
+![align-content](https://upload-images.jianshu.io/upload_images/18281896-e69c1724d4bd3616.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### space-evenly 和 space-around
+
+在 `space-evenly` 中，弹性项目之间的空白空间始终相等。
+
+![space-evenly](https://upload-images.jianshu.io/upload_images/18281896-6a1282084a079582.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+但是，在 `space-around` 中，只有内部项目之间的间距相等。第一项和最后一项将仅分配一半的间距。使其具有更加分散的视觉外观：
+
+![space-around](https://upload-images.jianshu.io/upload_images/18281896-710888f334b0e3e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 子项目
+
+![子项目](https://upload-images.jianshu.io/upload_images/18281896-032d8f99bc950f09.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### order
+
+默认情况下，弹性项目的显示顺序与在代码中显示的顺序相同。但是，如果你要更改该怎么办？没问题！使用 `order` 属性更改项目的顺序。
+
+```css
+.child {
+  order: 0 /* default */ | <number>;
+}
+```
+
+![order](https://upload-images.jianshu.io/upload_images/18281896-4c9ebe0ac0136af5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### flex-grow
+
+Flexbox 非常适合响应式设计。`flex-grow` 属性允许我们的 flex 项在必要时增长。因此，如果我的容器中有多余的可用空间，我可以告诉某个特定项目按一定比例将其填满。
+
+```css
+.child {
+  flex-grow: 0 /* default */ | <number>;
+}
+```
+
+![flex-grow](https://upload-images.jianshu.io/upload_images/18281896-283032d1033b5b7f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### flex-shrink
+
+如果有伸缩空间，`flex-grow` 将会扩展以填充额外的空间。相反 `flex-shrink` 当空间不足时将会控制 flex 项目缩小到适合的程度。请注意，数字越大，缩小幅度越大。
+
+```css
+.child {
+  flex-shrink: 1 /* default */ | <number>;
+}
+```
+
+你可以在 [flex-grow-calculation](https://www.samanthaming.com/flexbox30/22-flex-grow-calculation/) 和 [flex-shrink-calculation](https://www.samanthaming.com/flexbox30/24-flex-shrink-calculation/) 查看浏览器如何帮我们自动处理 `flex-grow` 和 `flex-shrink`，它们是如何计算的出各自该占据多少空间（两者计算方式不同），以及对应的公式。
+
+如果你看完了，觉得自己理解了，可以尝试做一下以下两道题：
+
+- [求最终 left、right 的宽度（变形）](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/382)
+- [求最终 left、right 的宽度](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/381)
+
+### flex-basis
+
+使用 `flex-basis` 属性可以设置项目的初始大小。你可以将此属性视为 flex 项目的宽度。
+
+因此，你的下一个问题可能是 `width` 和 `flex-basis` 之间的区别是什么。当然，你仍然可以使用 `width`，它将仍然有效。
+
+它起作用的原因是，如果未设置 `flex-basis`，它将默认为 `width`。因此，你的浏览器将始终尝试查找 `flex-basis` 值作为大小指示符。如果找不到它，那么它别无选择，只能使用 `width` 属性。不要让浏览器做额外的工作。使用适当的 flex 方法并使用 `flex-basis`。
+
+```css
+.child {
+  flex-basis: auto /* default */ | <width>;
+}
+```
+
+当一个项目具有 `flex-basis` 和 `width` 时，浏览器将始终使用 `flex-basis` 设置的值。但要注意，如果同时设置了 `min-width` 和 `max-width`。在这些情况下，`flex-basis` 将丢失，并且不会用作宽度。
+
+### flex
+
+`flex` 属性是上面所提到的 `flex-grow`、`flex-shrink` 和 `flex-basis` 的简写形式。如果你足够了解它们的特性，请使用简写吧！
+
+```css
+.child {
+  flex: 1 0 auto /* default */ | <flex-grow> <flex-shrink> <flex-basis> |
+    <flex-grow> | <flex-basis> | <flex-grow> <flex-basis> | <flex-grow>
+    <flex-shrink>;
+
+  /* 相当于： */
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+```
+
+面试经常会问到的一道 CSS 题是[**弹性盒子中 `flex: 0 1 auto` 表示什么意思**](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/380)？从上面一路看下来，你应该也知道了它们各自表示什么意思。
+
+### align-self
+
+`align-items` 属性可以沿着横轴设置 flex 项。`align-items` 的问题是它强制所有 flex 项使用规则。
+
+但是如果你想让他们中的一个打破规则，你可以使用 `align-self`。此属性接受为 `align-items` 提供的所有相同值，因此你可以轻松脱离包装 😎
+
+```css
+.child-1 {
+  align-self: stretch /* default */ | flex-start | flex-end | center | baseline;
+}
+```
+
+![align-self](https://upload-images.jianshu.io/upload_images/18281896-cce21923c0d44473.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## flex 示例
+
+### 垂直水平居中元素
+
+方式一：
+
+```css
+.container {
+  display: flex;
+  justify-content: center; /* horizontal */
+  align-items: center; /* vertical */
+}
+```
+
+方式二：
+
+```css
+.container {
+  display: flex;
+}
+
+.container > div {
+  margin: auto;
+}
+```
+
+![水平垂直居中](https://upload-images.jianshu.io/upload_images/18281896-12c537f47dfc6abf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+对齐 Flexbox 子元素的另一种方法是使用自动外边距。尽管这不是 Flexbox 属性，但要意识到这一点仍然很重要，因为它与 Flexbox 有非常有趣的关系。[Bonus: Aligning with Auto Margins](https://www.samanthaming.com/flexbox30/31-flexbox-with-auto-margins/)
+
+### 重新排序
+
+```css
+.container > .top {
+  order: 1;
+}
+
+.container > .bottom {
+  order: 2;
+}
+```
+
+### 截断文本
+
+```scss
+.parent {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin: 30px 0;
+}
+
+.child {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.child > h2 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.truncated {
+  flex: 1;
+  h2 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/OJWXYzG)
+
+### 移动布局
+
+创建固定高度的顶栏和动态高度的内容区域。
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.container > .top {
+  flex: 0 0 60px;
+}
+
+.container > .content {
+  flex: 1 0 auto;
+}
+```
+
+### 流式布局
+
+自动用适当数量的盒子填充可用空间。
+
+```css
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 1rem;
+}
+
+.container > * {
+  flex: 1 1 10ch;
+}
+```
+
+![流式布局](https://upload-images.jianshu.io/upload_images/18281896-4b2aadd6f1437555.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/NWdKNyJ)
+
+### 响应导航栏
+
+```css
+.nav {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+
+  list-style: none;
+  margin: 0;
+  background: deepskyblue;
+}
+
+.nav a {
+  text-decoration: none;
+  display: block;
+  padding: 1em;
+  color: white;
+}
+
+.nav a:hover {
+  background: #1565c0;
+}
+
+@media all and (max-width: 800px) {
+  .nav {
+    justify-content: space-around;
+  }
+}
+
+@media all and (max-width: 600px) {
+  .nav {
+    flex-flow: column wrap;
+    padding: 0;
+  }
+  .nav a {
+    text-align: center;
+    padding: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .nav li:last-of-type a {
+    border-bottom: none;
+  }
+}
+```
+
+[演示地址](https://codepen.io/lio-zero/pen/xxWMNVX)
+
+### 固定脚部
+
+HTML 结构：
+
+```html
+<section>
+  <header></header>
+  <main></main>
+  <footer></footer>
+</section>
+```
+
+方式一：
+
+```css
+section {
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex-grow: 1;
+  /* flex: 1 0 auto; */
+}
+
+footer {
+  flex-shrink: 0;
+}
+```
+
+方式二：
+
+```css
+section {
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  margin-top: auto;
+}
+```
+
+> 推荐：[固定页脚](https://github.com/lio-zero/blog/blob/main/CSS%20Layout/%E5%9B%BA%E5%AE%9A%E9%A1%B5%E8%84%9A.md)
+
+### 砌体布局
+
+```scss
+.masonry-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  max-height: 600px;
+  .masonry-brick {
+    margin: 0 0.825rem 0.825rem 0;
+
+    border-radius: 1rem;
+  }
+}
+
+/* or */
+
+.masonry-container {
+  display: flex;
+  flex-wrap: wrap;
+  .masonry-brick {
+    flex: 1 0 auto;
+    height: 150px;
+    margin: 0 0.825rem 0.825rem 0;
+    border-radius: 1rem;
+  }
+}
+```
+
+![砌体布局](https://upload-images.jianshu.io/upload_images/18281896-81f3607683a8348f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/PobMdVE)
+
+### 圣杯布局
+
+HTML 结构：
+
+```html
+<div class="container">
+  <header>Lorem</header>
+  <main>
+    <aside>Lorem</aside>
+    <article>Lorem</article>
+    <nav>Lorem</nav>
+  </main>
+  <footer>Lorem</footer>
+</div>
+```
+
+CSS 样式：
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+aside {
+  width: 25%;
+}
+
+article {
+  flex-grow: 1;
+}
+
+nav {
+  width: 20%;
+}
+```
+
+[演示地址](https://codepen.io/lio-zero/pen/JjLxqKM)
+
+你也可以使用 `order` 去调整排列顺序。
+
+### 双飞翼布局
+
+双飞翼布局其实是根据圣杯布局演化出来的一种布局。
+
+```css
+.container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.left,
+.right {
+  width: 200px;
+  flex-shrink: 1;
+}
+
+.main {
+  flex-grow: 1;
+}
+```
+
+![双飞翼布局](https://upload-images.jianshu.io/upload_images/18281896-8859b7e288a661e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/xxgKORY)
+
+### 两列布局
+
+```css
+.container {
+  display: flex;
+}
+
+.left {
+  width: 200px;
+  height: 100%;
+}
+
+.right {
+  flex: 1;
+  height: 100%;
+}
+```
+
+![两列布局](https://upload-images.jianshu.io/upload_images/18281896-3d629d61426aec35.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/yLVmWRY)
+
+## 更多资料
+
+- [Basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+- [flex 备忘单](https://www.sketchingwithcss.com/samplechapter/cheatsheet.html)
+- [Flex 布局教程：语法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
+- [Flex 布局教程：实例篇](https://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
+- [What Happens When You Create A Flexbox Flex Container?](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
+- [Everything You Need To Know About Alignment In Flexbox](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)
+- [Flexbox: How Big Is That Flexible Box?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)
+- [Use Cases For Flexbox](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)
diff --git "a/CSS/Normalize \345\222\214 Reset \347\232\204\345\214\272\345\210\253.md" "b/CSS/Normalize \345\222\214 Reset \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..fa8210a
--- /dev/null
+++ "b/CSS/Normalize \345\222\214 Reset \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,67 @@
+# Normalize 和 Reset 的区别
+
+每个浏览器都提供一组默认样式，这些样式应用于它呈现的每个网页。默认样式表也称为用户代理样式表。
+
+您可以查看以下浏览器各自所提供的默认样式：
+
+- [Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
+- [Firefox](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css)
+- [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
+
+由于默认样式不相同，因此每个浏览器上的网页将具有不同的外观。Normalize 和 Reset CSS 都旨在解决这个问题。
+
+顾名思义，Reset CSS 将重置所有内置样式。
+
+最流行的 CSS 重置库是 [Meyer's reset](https://meyerweb.com/eric/tools/css/reset/reset.css)。你可以在这里看到完整的代码。例如，它会将 `body` 的 `margin` 重置为 0：
+
+```css
+body {
+  margin: 0;
+}
+```
+
+如果你使用 Chrome 浏览器的开发者工具，检查任何网页的 `body` 元素，你会发现默认情况下它有 8px 的边距，这是我们通常根本不想要的：
+
+```css
+body {
+  margin: 8px;
+}
+```
+
+Normalize CSS 是 Reset CSS 的另一种选择。
+
+最受欢迎的库是 [normalize.css](https://necolas.github.io/normalize.css/)。它试图使内置的浏览器样式在不同浏览器之间保持一致。
+
+除此之外，normalize.css 还使某些元素看起来像我们期望的。例如，Chrome、Firefox 和 Safari 浏览器对 `sub` 和 `sup` 标签使用以下样式：
+
+```css
+sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+```
+
+它修复跨浏览器的显示错误。你可以查看它的[源代码](https://github.com/necolas/normalize.css/blob/master/normalize.css)看到有很多针对不同浏览器的错误修复，比如 IE、Edge、Firefox 等。
+
+如果你使用流行的 CSS 库，你可能不需要在项目中包含 normalize.css。它已经包含在：
+
+- [Bootstrap's reboot](https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss#L3)
+- [Tachyons](https://github.com/tachyons-css/tachyons/blob/master/src/_normalize.css)
+- [TailwindCSS](https://unpkg.com/tailwindcss@1.1.4/dist/base.css)
+- etc
+
+## 更多资料
+
+- [sanitize.css](https://github.com/csstools/sanitize.css) 是一个 CSS 库，它提供一致的、跨浏览器的 HTML 元素默认样式以及有用的默认样式
+- [My Custom CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/) — Josh Comeau 的 CSS 重置
+- [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/) — Andy Bell 的 CSS 重置
+- [cssremedy](https://github.com/jensimmons/cssremedy/) — Jen Simmons 的 CSS Remedy
+- [Open Props](https://open-props.style/) — Adam Argyle 的 Open Props，包含一个自定义 normalize.css
+- [minireset](https://github.com/jgthms/minireset.css) 是另一个小型的现代 CSS 重置
+- [Browser Default Styles](https://browserdefaultstyles.com/) 允许我们获取特定元素的各种渲染引擎的默认样式
+- [CSS Reset 与 Sprites](https://github.com/lio-zero/blog/blob/master/CSS/CSS%20Reset%20%E4%B8%8E%20Sprites.md)
diff --git a/CSS/PostCSS.md b/CSS/PostCSS.md
new file mode 100644
index 0000000..7e8e611
--- /dev/null
+++ b/CSS/PostCSS.md
@@ -0,0 +1,96 @@
+# PostCSS
+
+> [PostCSS](https://postcss.org/)（后预处理器）是一种使用 JS 插件转换样式的工具。这些插件可以 lint 你的 CSS，支持变量和 `mixins`，转换未来的 CSS 语法，内联图像等。
+
+## 与其他 CSS 预处理器有何不同？
+
+PostCSS 相比 Sass 或 Less 等 CSS 预处理器提供的主要好处是能够选择自己的路径，并选择所需的功能，同时添加新功能。Sass 或 Less 是固定的，您可以获得许多您可能使用或不使用的功能，但您无法扩展它们。
+
+您完全可以使用 PostCSS 代替 Sass 或 Less，但如果你不喜欢，您仍然可以使用 Sass 或 Less，并使用 PostCSS 执行 Sass 无法执行的其他操作，如自动刷新或 linting。
+
+你可以编写自己的 [PostCSS 插件](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md)来做任何你想做的事情。
+
+## 安装 PostCSS
+
+全局安装 [postcss-cli](https://github.com/postcss/postcss-cli)：
+
+```bash
+pnpm i -g postcss-cli
+```
+
+输入以下命令确保其正常工作：
+
+```bash
+postcss --help
+```
+
+## 常用的插件
+
+### Autoprefixer
+
+[Autoprefixer](https://github.com/postcss/autoprefixer) 解析 CSS 并确定某些规则是否需要供应商前缀。
+
+它根据 [Can I Use](http://caniuse.com/) 数据执行此操作，因此您不必担心某个功能是否需要前缀，或者您使用的前缀是否因为过时而不再需要。
+
+你可以写出更简洁的 CSS。
+
+例子：
+
+```css
+a {
+  display: flex;
+}
+```
+
+被编译为：
+
+```css
+a {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+```
+
+### PostCSS Preset Env
+
+[PostCSS Preset Env](https://github.com/csstools/postcss-preset-env) 是 CSS 中的 Babel，允许您将现代 CSS 转换为大多数浏览器都能理解的内容，根据您的目标浏览器或运行时环境确定您需要的 polyfill：
+
+- 它使用 Autoprefixer 添加前缀（因此，如果使用它，则无需直接使用 Autoprefixer）
+- 它允许您使用 CSS 变量
+- 它允许您使用嵌套，就像在 Sass 中一样
+- etc
+
+### CSS Modules
+
+[PostCSS Modules](https://github.com/css-modules/postcss-modules) 允许您使用 CSS 模块。
+
+CSS 模块不是 CSS 标准的一部分，但它们是具有作用域选择器的构建步骤。
+
+### csslint
+
+Linting 可以帮助您编写正确的 CSS，避免错误或陷阱。[Stylelint](http://stylelint.io/) 插件允许您在构建时删除 CSS。
+
+### cssnano
+
+[cssnano](https://cssnano.co/) 缩小了 CSS 并对代码进行了优化，以在生产中交付最少量的代码。
+
+### 其他有用的插件
+
+[PostCSS Plugins](https://github.com/postcss/postcss/blob/main/docs/plugins.md#postcss-plugins) 提供了可用插件的完整列表。
+
+其中一些：
+
+- [LostGrid](https://github.com/peterramsing/lost) 是一个 PostCSS 网格系统
+- [postcss-nested](https://github.com/postcss/postcss-nested) 提供了使用 Sass 嵌套规则的能力
+- [postcss-nested-ancestors](https://github.com/toomuchdesign/postcss-nested-ancestors) 引用嵌套 CSS 中的任何祖先选择器
+- [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars) 使用类似 Sass 的变量
+- [PreCSS](https://github.com/jonathantneal/precss) 为您提供了 Sass 的许多功能，这是最接近于完整的 Sass 替代品的功能
+
+## 进一步阅读
+
+- [An Introduction to PostCSS](https://www.sitepoint.com/an-introduction-to-postcss/)
+- [How to Use PostCSS as a Configurable Alternative to Sass](https://www.sitepoint.com/postcss-sass-configurable-alternative/)
+- [PostCSS — A Comprehensive Introduction](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)
+- [From Sass to PostCSS](https://tylergaw.com/blog/sass-to-postcss/)
diff --git "a/CSS/SASS \351\242\204\345\244\204\347\220\206\345\231\250.md" "b/CSS/SASS \351\242\204\345\244\204\347\220\206\345\231\250.md"
new file mode 100644
index 0000000..510bab4
--- /dev/null
+++ "b/CSS/SASS \351\242\204\345\244\204\347\220\206\345\231\250.md"	
@@ -0,0 +1,470 @@
+# SASS 预处理器
+
+## 什么是 CSS 预处理器？
+
+> CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
+
+- 通过工具编译成 CSS：开发后，这些特定文件被编译成任何浏览器都可以理解的常规 CSS。
+- 能提升 CSS 文件的组织方式：预处理程序有助于在 CSS 中编写可重用，易于维护和可扩展的代码。
+- 基于 CSS 的另一种语言：CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作
+- 扩展 CSS：CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数、插值、mixin 等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等。
+
+目前主流的预处理器里有：[SASS（SCSS）](https://sass-lang.com/)、[Less](http://lesscss.org/)、[Stylus](https://stylus.bootcss.com/)、[PostCSS（后预处理器）](https://postcss.org/)
+
+下面我们将来介绍 `SASS` 预处理器。详细内容查阅 [SASS 文档](https://sass-lang.com/documentation) 。
+
+## 什么是 SASS？
+
+> SASS 是最早的 CSS 预处理语言，有比 Less 更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和 Ruby on Rails 的大力推动，逐渐被更多开发者使用。
+
+> SASS 是采用的 Ruby 语言编写的一款 CSS 预处理语言，它诞生于 2007 年，是最早成熟 CSS 预处理脚本语言，它被解释或编译成级联样式表。它允许您编写可维护的 CSS，并提供变量、嵌套、混合、扩展、函数、循环、条件等功能。最初它是为了配合 HAML 而设计的，因此有着和 HAML 一样的缩进式风格。
+
+## SASS 和 SCSS 有什么区别？
+
+> `SASS` 从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的 `CSS` 代码，这一代的 `SASS` 也被称为 `SCSS`。`SCSS` 完全继承了 `SASS` 中的功能，并引入了一些新语法特性。
+
+主要有两点不同：
+
+- 文件扩展：SASS 的后缀扩展名为 `.sass`，而 SCSS 的 后缀为扩展名为 `.scss`
+- 语法书写：SASS 是以严格的缩进式语法规则来书写，不带大括号 `{}` 和分号 `;`，而 SCSS 书写方式更像 CSS。
+
+## 变量
+
+`SASS` 变量很简单：您可以为以 `$` 开头的名称分配一个值，然后可以引用该名称而不是值本身。
+
+```scss
+$red: #833;
+
+body {
+  color: $red;
+}
+```
+
+变量可以减少重复，进行复杂的数学运算，配置库等。
+
+### CSS 变量与 SASS 变量的区别
+
+- `SASS` 变量都是由 `SASS` 编译出来的。CSS 变量包含在 CSS 中输出。
+- CSS 变量对于不同的元素可以有不同的值，但是 `SASS` 变量一次只有一个值。
+- `SASS` 变量是必需的，这意味着如果您使用一个变量然后更改它的值，那么前面的使用将保持不变。CSS 变量是声明性的，这意味着如果您更改该值，它将影响前面使用和后面使用的。
+
+## 嵌套
+
+`SASS` 允许开发人员以嵌套的方式使用 CSS。
+
+```scss
+.markdown-body {
+  a {
+    color: blue;
+    &:hover {
+      color: red;
+    }
+  }
+}
+```
+
+### 引用父级选择器 `&`
+
+`SASS` 允许在嵌套的代码块内，使用 `&` 引用父元素
+
+```scss
+a {
+  font-size: 14px;
+  font-weight: bold;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+    font-size: 20px;
+  }
+}
+```
+
+### 嵌套属性
+
+CSS 许多属性都位于相同的命名空间，例如 `text-align`、`text-decoration`、`text-transform` 都位于 font 命名空间下，`SASS` 当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下。
+
+```scss
+text: {
+  align: center; // 将编译为 text-align: center
+  decoration: underline; // 将编译为 text-decoration: underline
+  transform: uppercase; // 将编译为 text-transform: uppercase
+}
+```
+
+注意，`text` 后面必须加上冒号。
+
+## 注释
+
+```scss
+// 单行注释，该注释方式只保留在 SASS 源文件中，编译后被省略。此注释不会包含在 CSS 中。
+
+/* 多行注释，该注释方式会保留到编译后的文件。但压缩模式下，仍会被删除 */
+/* 多行注释可以使用插值表达式 #{1 + 1} */
+
+/*! 即使在压缩模式下也会包含此注释。*/
+```
+
+## 继承
+
+`@extend` 指令用于继承另一个选择器的样式。相同样式直接继承，不会造成代码冗余；
+
+```scss
+.button {
+  font-size: 14px;
+  color: plum;
+}
+
+.push-button {
+  @extend .button;
+}
+```
+
+## 混合
+
+混合（`Mixin`）允许您定义可以在整个样式表中重用的样式。
+
+**语法**
+
+```scss
+@mixin  { ... }
+
+// 带参数
+@mixin name(<arguments...>) { ... }
+```
+
+**示例**
+
+```scss
+@mixin heading-font {
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+h1 {
+  @include heading-font;
+}
+```
+
+`Mixin` 特性在添加浏览器兼容性前缀的时候非常有用。
+
+```scss
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -ms-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+.card {
+  @include border-radius(8px);
+}
+```
+
+### 参数
+
+你可以向 `Mixin` 传递变量参数来让代码更加灵活。
+
+```scss
+@mixin font-size($n) {
+  font-size: $n * 1.2em;
+}
+
+body {
+  @include font-size(2);
+}
+```
+
+### 具有默认值
+
+```scss
+@mixin pad($n: 10px) {
+  padding: $n;
+}
+
+body {
+  @include pad(15px);
+}
+```
+
+### 具有默认变量
+
+```scss
+// 设置默认值
+$default-padding: 10px;
+@mixin pad($n: $default-padding) {
+  padding: $n;
+}
+
+body {
+  @include pad(15px);
+}
+```
+
+## 引入 SCSS 模块
+
+`SASS` 能够将代码分割为多个片段，并以下划线作为其命名前缀。`SASS` 会通过这些下划线来辨别哪些文件是 `SASS` 片段，并且不让片段内容直接生成为 CSS 文件，只在使用 `@import` 指令的位置被导入。
+
+```scss
+// _variables.scss
+$gray-1: #eee;
+
+// index.scss
+@import './_variables';
+```
+
+`.scss` 或 `.sass` 扩展名是可选的。
+
+## 函数
+
+### 颜色功能
+
+**颜色设置**
+
+SASS 提供了一些内置的颜色函数，以便生成系列颜色。
+
+```scss
+// RGBA
+rgb(100, 120, 140)
+rgba(100, 120, 140, .5)
+rgba($color, .5)
+
+// 修改 HSLA
+complement($color)    // 像 adjust-hue(_, 180deg)
+invert($color)
+grayscale($color)
+hsla(hue, saturation, lightness, alpha)
+```
+
+**颜色操作**
+
+```scss
+// 混合
+mix($a, $b, 10%)   // 10% a, 90% b
+
+// 修改 HSLA
+darken($color, 5%)
+lighten($color, 5%)
+saturate($color, 5%)
+desaturate($color, 5%)
+adjust-hue($color, 15deg)
+fade-in($color, .5)   // 又名 opacify()
+fade-out($color, .5)  // aka transparentize() - 将不透明度减半
+rgba($color, .5)      // 将 alpha 设置为 .5
+
+// 调整
+// 按固定数量变动
+adjust-color($color, $blue: 5)
+adjust-color($color, $lightness: -30%)   // 像 darken(_, 30%)
+adjust-color($color, $alpha: -0.4)       // 像 fade-out(_, .4)
+adjust-color($color, $hue: 30deg)        // 像 adjust-hue(_, 15deg)
+
+// 通过百分比更改
+scale-color($color, $lightness: 50%)
+
+// 完全更改一个属性
+change-color($color, $hue: 180deg)
+change-color($color, $blue: 250)
+```
+
+支持：`$red`、`$green`、`$blue`、`$hue`、`$saturation`、`$lightness`、`$alpha`
+
+**颜色获取**
+
+```scss
+// HSLA
+hue($color)         // 0deg-360deg 返回颜色在 HSL 色值中的角度值 (0deg - 255deg)。
+saturation($color)  // 0%-100%
+lightness($color)   // 0%-100%
+alpha($color)       // 0-1 (类似 opacity())
+
+// RGB
+red($color)   // 从一个颜色中获取其中红色值（0-255）
+green($color)
+blue($color)
+```
+
+### 其他功能
+
+**字符串**
+
+```scss
+unquote('hello')
+quote(hello)
+to-upper-case(hello)
+to-lower-case(hello)
+str-length(hello world)
+str-slice(hello, 2, 5)      // "ello" - it's 1-based, not 0-based
+str-insert("abcd", "X", 1)  // "Xabcd"
+```
+
+**单位**
+
+```scss
+unit(3em)        // 'em'
+unitless(100px)  // false
+```
+
+**数字**
+
+```scss
+floor(3.5)
+ceil(3.5)
+round(3.5)
+abs(3.5)
+min(1, 2, 3)
+max(1, 2, 3)
+percentage(.5)   // 50%
+random(3)        // 0..3
+```
+
+**选择器**
+
+```scss
+selector-append('.menu', 'li', 'a')   // .menu li a
+selector-nest('.menu', '&:hover li')  // .menu:hover li
+selector-extend(...)
+selector-parse(...)
+selector-replace(...)
+selector-unify(...)
+```
+
+**其他**
+
+```scss
+variable-exists(red)    // 判断变量是否在当前的作用域下。
+mixin-exists(red-text)  // 检测指定混入 (mixinname) 是否存在。
+function-exists(redify) // 检测指定的函数是否存在
+global-variable-exists(red) // 检测某个全局变量是否定义。
+```
+
+## 循环语句
+
+SASS 提供了以下循环：
+
+**for 循环**
+
+```scss
+@for $i from 1 through 4 {
+  .item-#{$i} {
+    left: 20px * $i;
+  }
+}
+```
+
+**each 循环（简单）**
+
+```scss
+$menu-items: home about services contact;
+
+@each $item in $menu-items {
+  .photo-#{$item} {
+    background: url('images/#{$item}.jpg');
+  }
+}
+```
+
+**each 循环（嵌套）**
+
+```scss
+$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
+
+@each $id, $image in $backgrounds {
+  .photo-#{$id} {
+    background: url($image);
+  }
+}
+```
+
+**while 循环**
+
+```scss
+$i: 6;
+@while $i > 0 {
+  .item-#{$i} {
+    width: 2em * $i;
+  }
+  $i: $i - 2;
+}
+```
+
+## 条件语句
+
+```scss
+@if $position == 'left' {
+  position: absolute;
+  left: 0;
+} @else if $position == 'right' {
+  position: absolute;
+  right: 0;
+} @else {
+  position: static;
+}
+```
+
+## 插值语句
+
+通过 `#{}` 插值语句（interpolation）以在选择器或属性名中使用变量：
+
+```scss
+$name: card;
+$attr: border;
+
+.#{$class} {
+  #{$attr}-color: plum;
+}
+
+@media #{$tablet}
+
+font: #{$size}/#{$line-height}
+url("#{$background}.jpg");
+```
+
+## 列表
+
+> SASS 列表（List）函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。
+>
+> SASS 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。
+>
+> 列表的起始索引值为 1，记住不是 0。
+
+```scss
+$list: (a b c);
+
+nth($list, 1)  // 从 1 开始
+length($list)  // 返回列表的长度
+
+// 其他属性
+nth // 函数可以直接访问数组中的某一项
+join // 函数可以将多个数组连接在一起
+list-separator(list) // 返回一列表的分隔符类型。可以是空格或逗号。
+append(list, value, [separator]) // 将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格
+is-bracketed(list) // 判断列表中是否有中括号
+index(list, value) // 返回元素 value 在列表中的索引位置。
+zip($list)  	// 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。
+set-nth(list, n, value) // 设置列表第 n 项的值为 value。
+
+// 遍历列表中的每一项
+@each $item in $list { ... }
+```
+
+## Map
+
+> SASS Map（映射）对象是以一对或多对的 `key/value` 来表示。
+>
+> SASS Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。
+
+```scss
+$map: (key1: value1, key2: value2, key3: value3);
+
+map-get($map, key1)       // 返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。
+map-has-key($map, key1)	  // 判断 map 是否有对应的 key，存在返回 true，否则返回 false。
+map-keys($map)			  // 返回 map 中所有的 key 组成的队列。
+map-merge($map1, $map2)	  // 合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部
+map-remove($map, keys...) // 移除 map 中的 keys，多个 key 使用逗号隔开。
+map-values($map)		  // 返回 map 中所有的 value 并生成一个队列。
+```
+
+## 更多资料
+
+- [CSS Preprocessors Explained](https://www.freecodecamp.org/news/css-preprocessors/#:~:text=CSS%20Preprocessors%20compile%20the%20code,preprocessor%20were%20not%20in%20place.)
+- [What is a CSS Preprocessors & Why Use Them](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/)
diff --git "a/CSS/calc() \345\267\245\344\275\234\345\216\237\347\220\206.md" "b/CSS/calc() \345\267\245\344\275\234\345\216\237\347\220\206.md"
new file mode 100644
index 0000000..bc20895
--- /dev/null
+++ "b/CSS/calc() \345\267\245\344\275\234\345\216\237\347\220\206.md"	
@@ -0,0 +1,221 @@
+# calc() 工作原理
+
+CSS3 `calc()` 函数允许我们在声明 CSS 属性值时执行以下计算，也就数学运算（`+`、`-`、`*`、`/`）。
+
+例如，我们不必声明元素宽度的静态像素值，我们可以使用 `calc()` 来指定宽度是两个或多个数值相加的结果。
+
+```css
+.foo {
+  width: calc(100px + 20px);
+}
+```
+
+## `calc()`
+
+如果您使用过像 SASS 这样的 CSS 预处理器，你肯定遇到过上面的这种写法。
+
+```scss
+.nav {
+  width: 100px + 20px;
+}
+
+// SASS 中可以直接相加
+.foo {
+  width: 100px + 20px;
+}
+
+// 或者使用变量
+$first-width: 100px;
+$second-width: 20px;
+
+.bar {
+  width: $first-width + $second-width;
+}
+```
+
+但是，`calc()` 函数提供了一个更好的解决方案，原因有两个。
+
+- **我们可以合并不同的单位**。具体来说，我们可以将相对单位（如百分比（`%`）和视口单位（`vw`、`vh`、`vmax`、`vmin`））与绝对单位（如像素（`px`））混合。例如，我们可以创建一个表达式，用百分比值减去像素值。
+
+> 单位详细介绍可查看：[CSS 单位及其需要注意的地方](https://github.com/lio-zero/blog/blob/master/CSS/CSS%20%E5%8D%95%E4%BD%8D%E5%8F%8A%E5%85%B6%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9.md)。
+
+```css
+.sidebar {
+  width: calc(100% - 120px);
+}
+```
+
+在本例中，`.sidebar` 元素的宽度总是比其父元素宽度的 `100%` 小 `120px`。
+
+- 对于 `calc()`，**计算的值是表达式本身**，而不是表达式的结果值。使用 CSS 预处理器处理数学表达式时，给浏览器的值就是表达式的结果值。
+
+```scss
+// SCSS 中指定的值
+.foo {
+  width: 100px + 20px;
+}
+
+// 在浏览器中编译 CSS 和计算值
+.foo {
+  width: 120px;
+}
+```
+
+但是，浏览器解析的值是实际表达式。
+
+```scss
+// CSS 中指定的值
+.foo {
+  width: calc(100% - 120px);
+}
+
+// 浏览器中的计算值
+.foo {
+  width: calc(100% - 120px);
+}
+```
+
+这意味着浏览器中的值可以更动态，并随着视口的变化而调整。我们可以有一个高度为视口减去绝对值的元素，它将随着视口的变化而调整。
+
+## 使用 `calc()`
+
+`calc()` 函数可用于对数值执行**加减乘除**计算。也就是可以与 `<length>`、`<frequency>`、`<angle>`、`<time>`、`<number>`、`<integer>` 一起使用。
+
+```css
+.foo {
+  width: calc(50vmax + 3rem);
+  padding: calc(1vw + 1em);
+  transform: rotate(calc(1turn + 28deg));
+  background: hsl(100, calc(3 * 20%), 40%);
+  font-size: calc(50vw / 3);
+}
+```
+
+### 嵌套 `calc()`
+
+`calc()` 函数可以嵌套。但是，内部函数将被视为简单的括号表达式。以下面的嵌套表达式为例
+
+```css
+.foo {
+  width: calc(100% / calc(100px * 2));
+}
+```
+
+此函数的计算值如下
+
+```css
+.foo {
+  width: calc(100% / (100px * 2));
+}
+```
+
+### 提供后备方案
+
+对 `calc()` 的支持相对广泛，以下为其支持情况：
+
+![calc 支持情况](https://upload-images.jianshu.io/upload_images/18281896-94c1f36b7872f4a2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+基本上现代主流浏览器均支持该属性。但对于那些不支持的浏览器（你知道的），将忽略整个属性值表达式。这也意味着我们可以很容易地提供一个将由不支持的浏览器使用的回退静态值。
+
+```css
+.foo {
+  width: 90%; /* 旧浏览器的回退 */
+  width: calc(100% - 120px);
+}
+```
+
+## 应用
+
+`calc()` 函数在各种情况下都很有用。
+
+### 定位元素
+
+使用 `calc()` 为解决容器内元素水平垂直居中提供了另一种解决方法。如果我们已知子元素的尺寸，一个典型的解决方案是使用负边距将元素的高度和宽度移动一半，就像这样
+
+```scss
+.foo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -150px;
+  margin-left: -150px;
+  width: 300px;
+  height: 300px;
+}
+```
+
+使用 `calc()` 函数，我们只需在顶部和左侧使用属性即可实现所有这些操作。
+
+```scss
+.foo {
+  position: absolute;
+  top: calc(50% - 150px);
+  left: calc(50% - 150px);
+  width: 300px;
+  height: 300px;
+}
+```
+
+随着 Flexbox 的引入，这样的方法不太可能被需要。但是，在不能使用 Flexbox 的情况下，例如，如果元素需要绝对定位或固定，则此方法非常有用。
+
+### 创建根网格大小
+
+`calc()` 函数可用于在单元外创建基于视口的网格。我们可以将根元素的字体大小设置为整个视口宽度的一小部分。
+
+```css
+html {
+  font-size: calc(100vw / 30);
+}
+```
+
+现在，将关联到视口宽度的 `1/30`。对于我们页面上的任何文本，这意味着它将根据视口自动缩放。此外，给定相同的视区尺寸，无论视区的实际大小如何，屏幕上始终会有相同数量的文本。
+
+如果我们使用 `rem` 单位来调整页面上其他非文本元素的大小，它们也会遵循这种行为。宽度为 `1rem` 的元素始终为视口宽度的 `1/30`。
+
+### 清晰度
+
+`calc()` 有助于使任何正在进行的计算更加明显。例如，如果希望一组项的宽度为其父容器宽度的 1/6，可以这样编写
+
+```css
+.foo {
+  width: 16.666666667%;
+}
+```
+
+然而，阅读 CSS 的人更清楚的是如何编写
+
+```css
+.foo {
+  width: calc(100% / 6);
+}
+```
+
+### 创建网格系统
+
+对于创建 Grid 网格系统来说，`calc` 在好不过：
+
+```css
+img {
+  float: left;
+  margin: 10px;
+  width: calc(100% * 1 / 4 - 20px);
+}
+
+@media (max-width: 900px) {
+  img {
+    width: calc(100% * 1 / 3 - 20px);
+  }
+}
+
+@media (max-width: 600px) {
+  img {
+    width: calc(100% * 1 / 2 - 20px);
+  }
+}
+
+@media (max-width: 400px) {
+  img {
+    width: calc(100% - 20px);
+  }
+}
+```
diff --git "a/CSS/display-none \344\270\216 [hidden] \347\232\204\345\214\272\345\210\253.md" "b/CSS/display-none \344\270\216 [hidden] \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..3ec8183
--- /dev/null
+++ "b/CSS/display-none \344\270\216 [hidden] \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,26 @@
+# display-none 与 [hidden] 的区别
+
+HTML5 添加了 `hidden` 属性，该属性与 CSS `display: none` 具有相同的效果。如果使用 `hidden` 属性，则无论其值如何，都不会显示元素：
+
+```html
+<div hidden>
+  <!-- 这将从屏幕上消失 -->
+</div>
+```
+
+两者都会对屏幕阅读器隐藏内容。
+
+## 区别
+
+- `display: none` 和 `hidden` 属性的工作方式相同。但是 `hidden` 属性提供了更好的语义。
+- `display: none` 在旧浏览器中有效，但 IE 10 及更低版本原生不支持 `hidden`。
+
+为了解决这个问题，我们可以简单地设置：
+
+```css
+[hidden] {
+  display: none;
+}
+```
+
+它包含在现代 CSS 规范化库中，比如 [Normalize.css](https://necolas.github.io/normalize.css)。
diff --git "a/CSS/margin \344\270\216 padding \347\232\204\345\214\272\345\210\253.md" "b/CSS/margin \344\270\216 padding \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..619de5f
--- /dev/null
+++ "b/CSS/margin \344\270\216 padding \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,76 @@
+# margin 与 padding 的区别
+
+- `margin` 是元素周围的空间。
+
+```txt
+┌──────────────────────┐               ┌──────────────────────┐
+|                      |               |                      |
+|                      |               |                      |
+|   Element            |◀︎── margin ──▶︎|        Element       |
+|                      |               |                      |
+|                      |               |                      |
+└──────────────────────┘               └──────────────────────┘
+```
+
+而 `padding` 是元素与其内部内容之间的空间。`margin` 和 `padding` 都不包括元素的 `border`。
+
+```txt
+┌─────────────▲─────────────┐
+|             | Padding     |
+|             |             |
+|       ┌─────▼─────┐       |
+|       |           |       |
+|◀︎────▶︎|  Content  |◀︎────▶︎|  ◀︎── Element
+|       |           |       |
+|       |           |       |
+|       └─────▲─────┘       |
+|             |             |
+|             |             |
+└─────────────▼─────────────┘
+```
+
+- 上下边距是可重叠的。
+
+让我们考虑一个例子，我们有两个元素 `A` 和 `B`。`A` 元素在底部有 `30px` 的空间，而 `B` 在顶部有 `20px` 的空间。
+
+最后，两个元素之间的边距是两个边距值的最大数，即 `30px`，而不是它们的总和。
+
+```txt
+┌───────────────────────────┐
+|                           |
+|              A            |
+|                           |
+└───────┬───────▲───────────┘
+        |       |
+        |       |
+        |       |
+        |       |
+margin  |       | margin
+bottom  |       | top
+        |       |
+        |       |
+        |       |
+┌───────▼───────┴───────────┐
+|                           |
+|              B            |
+|                           |
+└───────────────────────────┘
+```
+
+左、右边距和任何 `padding` 值都不会出现这种情况。
+
+我们经常使用 `margin: auto` 使元素居中。
+
+`margin` 可以是任何浮点数，但 `padding` 不能是负数。
+
+```css
+div {
+  margin: -10px;
+  /* ❌ */
+  padding: -15px;
+}
+```
+
+## 更多资料
+
+[BFC 及其应用](https://github.com/lio-zero/blog/blob/main/CSS/BFC%20%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8.md)
diff --git "a/CSS/style='width__' \344\270\216 width='__'.md" "b/CSS/style='width__' \344\270\216 width='__'.md"
new file mode 100644
index 0000000..40b5cd8
--- /dev/null
+++ "b/CSS/style='width__' \344\270\216 width='__'.md"	
@@ -0,0 +1,56 @@
+# style="width: ___" 与 width="___"
+
+有两种方法可以定义图片的尺寸：
+
+- 使用 `height` 或 `width` 属性：
+
+```html
+<img height="100" />
+```
+
+- 或者在 CSS 样式中使用 `height` 或 `width` 属性：
+
+```html
+<img style="height: 100px" />
+```
+
+## 区别
+
+CSS `width` 和 `height` 属性可用于所有 HTML 元素。但 HTML `width` 和 `height` 属性仅适用于某些元素，如 `canvas`、`img`、`table`、`td` 等。
+
+```html
+<!-- 工作 -->
+<img width="200px" />
+
+<!-- 不起作用 -->
+<div width="200px"></div>
+```
+
+对于 `canvas` 元素，它们不会产生相同的结果。
+
+根据 [HTML 规范](https://html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width)，如果缺少 `width` 和 `height` 属性，`canvas` 将使用默认值。
+
+`width` 属性默认为 300，`height` 属性默认为 150。
+
+建议直接在 `canvas` 标签上添加这两个属性，或通过 JavaScript 设置 `canvas` 的 `height` 和 `width` 属性，以避免 `canvas` 拉伸的问题。
+
+```html
+<!-- 工作 -->
+<canvas height="100" width="100">
+  <!-- 不起作用 -->
+  <canvas style="height: 100px; width: 100px;"></canvas>
+</canvas>
+```
+
+`canvas` 的 `width` 和 `height` 属性必须是不带单位的正数。尽管您带了 `px`（或其他单位）或存在小数，它都是可以的，浏览器解析器会对 `px` 正常解析，其他单位忽略，小数部分进行取整。
+
+CSS 样式属性的优先级高于 HTML 属性。
+
+在以下示例中，`height: 200px` 属性将覆盖 `height="100px"` 属性：
+
+```html
+<!-- 图像的宽度为 200px -->
+<img height="100px" style="height: 200px" />
+```
+
+`width` 和 `height` 属性还广泛用于电子邮件中，我们必须支持多种屏幕大小（移动、桌面）和各种电子邮件客户端。
diff --git "a/CSS/\344\273\205 CSS \346\267\273\345\212\240\346\232\227\351\273\221\346\250\241\345\274\217.md" "b/CSS/\344\273\205 CSS \346\267\273\345\212\240\346\232\227\351\273\221\346\250\241\345\274\217.md"
new file mode 100644
index 0000000..cfca56a
--- /dev/null
+++ "b/CSS/\344\273\205 CSS \346\267\273\345\212\240\346\232\227\351\273\221\346\250\241\345\274\217.md"	
@@ -0,0 +1,42 @@
+# 仅 CSS 添加暗黑模式
+
+我们只需要添加以下 CSS 即可支持暗黑模式：
+
+```css
+html[theme='dark-mode'] {
+  filter: invert(1) hue-rotate(180deg);
+}
+```
+
+CSS `filter` 属性将模糊或颜色偏移等图形效果应用于元素。`filter` 通常用于调整图像、背景和边框的渲染。
+
+这里还使用到了 `filter` 的两个函数：`invert` 和 `hue-rotate`。
+
+- [`invert`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert) — 反转元素和图像的颜色。
+- [`hue-rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate) — 帮助我们处理所有其他非黑色和白色的颜色。将色调旋转 180 度，我们确保应用的颜色主题不会改变，而只是减弱其颜色。
+
+因为我们应用于整个文档，所以它会反转所有图像和视频。如果不想给图像、视频应用暗黑模式，可以添加：
+
+```css
+img,
+video {
+  filter: invert(1) hue-rotate(180deg);
+}
+```
+
+它将对所有图像和视频添加相同的规则，以逆转效果。
+
+## 更多资料
+
+如果你想要获取系统是否处于暗黑模式下，有两种方式可以做到，可以查看[检测暗模式](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%A3%80%E6%B5%8B%E6%9A%97%E6%A8%A1%E5%BC%8F.md)。
+
+推荐一些关于暗黑模式的文章：
+
+- [A Complete Guide to Dark Mode on the Web](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/)
+- [Dark Mode in CSS](https://css-tricks.com/dark-modes-with-css/)
+- [A Dark Mode Toggle with React and ThemeProvider](https://css-tricks.com/a-dark-mode-toggle-with-react-and-themeprovider/)
+- [prefers-color-scheme in SVG favicons for dark mode icons Thomas Steiner headshot](https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/)
+- [Dark mode and variable fonts](https://css-tricks.com/dark-mode-and-variable-fonts/)
+- [The Quest for the Perfect Dark Mode](https://www.joshwcomeau.com/react/dark-mode/)
+- [Dark mode in 5 minutes, with inverted lightness variables](https://lea.verou.me/2021/03/inverted-lightness-variables/)
+- [How to Implement Dark Background Mode in CSS](https://codehandbook.org/implement-dark-background-mode-css/)
diff --git "a/CSS/\344\273\205\344\275\277\347\224\250 CSS \347\232\204\346\211\223\345\255\227\346\234\272\346\225\210\346\236\234.md" "b/CSS/\344\273\205\344\275\277\347\224\250 CSS \347\232\204\346\211\223\345\255\227\346\234\272\346\225\210\346\236\234.md"
new file mode 100644
index 0000000..9e9b76a
--- /dev/null
+++ "b/CSS/\344\273\205\344\275\277\347\224\250 CSS \347\232\204\346\211\223\345\255\227\346\234\272\346\225\210\346\236\234.md"	
@@ -0,0 +1,55 @@
+# 仅使用 CSS 的打字机效果
+
+我们可以在完全不使用 JavaScript 的情况下，仅使用 CSS 一些小技巧便可以完成打字机效果。
+
+我们可以使用 `white-space: nowrap` 和 `overflow: hidden` 来隐藏溢出字符，定义等宽字体以使容器的宽度可预测，然后设置周围容器宽度的动画。闪烁的光标通过设置右边框的动画来实现。
+
+定义两个动画，`typing` 以设置角色动画和 `blink` 动画插入符号。
+
+```html
+<div class="type-writer">
+  <div class="text">All work and no play makes Jack a dull boy!</div>
+</div>
+```
+
+CSS 如下：
+
+```css
+.type-writer .text {
+  width: 43ch;
+  animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 3px solid;
+  font-family: monospace;
+  font-size: 1.5em;
+  margin: 1em auto;
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+}
+
+@keyframes blink {
+  50% {
+    border-color: transparent;
+  }
+}
+```
+
+👇 以下的输入是在没有 JavaScript 的情况下完成的！
+
+![打字机效果](https://upload-images.jianshu.io/upload_images/18281896-83c926ba8338b7f6.gif?imageMogr2/auto-orient/strip)
+
+你可能需要注意的是，你要根据你内容的长度对宽度进行调整，但整体效果还是不错吧！😃
+
+> [查看效果](https://codepen.io/lio-zero/pen/zYwLObL)
+
+## 更多资源
+
+- [Typewriter effect](https://www.30secondsofcode.org/css/s/typewriter-effect) 通过 JS 获取文本的长度，并为其设置一个 CSS 变量，动态设置元素的宽度。这里使用 `1ch` 单位，相当于一个字形的长度。
+- [typeit](https://github.com/alexmacarthur/typeit) 一个通用的 JavaScript 打字机效果。
+- [Typewriter Animation That Handles Anything You Throw at It](https://css-tricks.com/typewriter-animation-that-handles-anything-you-throw-at-it/)
+- [Typewriter Effect](https://css-tricks.com/snippets/css/typewriter-effect/)
diff --git "a/CSS/\344\275\277\347\224\250 CSS aspect-ratio \347\211\271\346\200\247\344\275\277 iframe \345\223\215\345\272\224\345\274\217\347\274\251\346\224\276.md" "b/CSS/\344\275\277\347\224\250 CSS aspect-ratio \347\211\271\346\200\247\344\275\277 iframe \345\223\215\345\272\224\345\274\217\347\274\251\346\224\276.md"
new file mode 100644
index 0000000..6fc90ea
--- /dev/null
+++ "b/CSS/\344\275\277\347\224\250 CSS aspect-ratio \347\211\271\346\200\247\344\275\277 iframe \345\223\215\345\272\224\345\274\217\347\274\251\346\224\276.md"	
@@ -0,0 +1,101 @@
+# 使用 CSS aspect-ratio 特性使 iframe 响应式缩放
+
+## iframe 响应式问题
+
+与 `img` 和原生 HTML5 `video` 元素不同，`iframe` 默认情况下不会响应式缩放。
+
+```css
+/**
+ * 这行不通
+ */
+iframe {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+## 解决此问题的旧方法
+
+从历史上看，要使 `iframe` 具有响应性，需要将 `iframe` 包装在 `div` 容器中。
+
+```html
+<div class="responsive-iframe">
+  <iframe
+    src="/path/to/file"
+    width="640"
+    height="360"
+    frameborder="0"
+    allow="autoplay; fullscreen; picture-in-picture"
+    allowfullscreen
+  >
+  </iframe>
+</div>
+```
+
+然后，您可以使用 CSS
+
+- 将 `iframe` 放在 `div` 的左上角。
+- 使其达到 `div` 元素 `height` 和 `width` 的 `100%`。
+- 为 `div` 的 `padding-top` 添加等于 `iframe` 的纵横比（对于高清视频，为 `56.25%` 或 `9/16*100`）。
+
+```css
+.responsive-iframe {
+  max-width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+  width: 100%;
+}
+
+.responsive-iframe iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+```
+
+如您所见，这是令人讨厌和复杂的。
+
+有一个 [FluidVids.js](https://github.com/toddmotto/fluidvids) 库，帮助我们减少这种操作。
+
+但是现在，有一个更好的方法！
+
+## CSS `aspect-ratio` 属性
+
+[CSS `aspect-ratio` 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/aspect-ratio)告诉浏览器，在向上或向下缩放某个元素时，要在该元素上保留特定的纵横比。
+
+我们可以使用几行 CSS 直接针对 `iframe` 元素，以在响应性布局中保留它们的尺寸，而不需要额外的元素进行包装。
+
+将 `iframe` 的 `height` 和 `width` 设置为 `100%`。然后将 `aspect-ratio` 属性的值指定为 `width / height`。对于高清视频，我们将使用 `16 / 9`。
+
+```css
+iframe {
+  aspect-ratio: 16 / 9;
+  height: 100%;
+  width: 100%;
+}
+```
+
+现在，我们可以按原样包含元素 `iframe`，它们会随着布局放大或缩小。
+
+```html
+<iframe
+  src="/path/to/file"
+  width="640"
+  height="360"
+  frameborder="0"
+  allow="autoplay; fullscreen; picture-in-picture"
+  allowfullscreen
+>
+</iframe>
+```
+
+[快速查看 `aspect-ratio` 兼容情况](https://caniuse.com/?search=aspect-ratio)：
+
+![aspect-ratio 的支持情况](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5a31663627d421cae14c0d8636b3e10~tplv-k3u1fbpfcp-zoom-1.image)
+
+以上是一个使用 `aspect-ratio` 解决 `iframe` 响应式缩放的示例。如需了解更多，这里还整理了关于 `aspect-ratio` 属性的相关文章供大家参考：
+
+- [Create Responsive Image Effects With CSS Gradients And aspect-ratio](https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/)
+- [Designing An Aspect Ratio Unit For CSS](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/)
diff --git "a/CSS/\344\275\277\347\224\250 CSS overscroll-behavior contain \346\235\245\351\230\262\346\255\242\346\273\232\345\212\250\351\223\276.md" "b/CSS/\344\275\277\347\224\250 CSS overscroll-behavior contain \346\235\245\351\230\262\346\255\242\346\273\232\345\212\250\351\223\276.md"
new file mode 100644
index 0000000..a90a870
--- /dev/null
+++ "b/CSS/\344\275\277\347\224\250 CSS overscroll-behavior contain \346\235\245\351\230\262\346\255\242\346\273\232\345\212\250\351\223\276.md"	
@@ -0,0 +1,19 @@
+# 使用 CSS overscroll-behavior: contain 来防止滚动链
+
+当用户滚动嵌入的网页（或网页上的任何嵌套滚动容器）并到达末尾时，浏览器将开始滚动外部页面。这被称为[滚动链](https://drafts.csswg.org/css-overscroll-behavior/#scroll-chaining)。
+
+> 滚动链是指滚动从一个滚动容器传播到滚动链后面的祖先滚动容器。
+
+一些用户可能会觉得这种行为很烦人。幸运的是，可以通过将 `overscroll-behavior: contain` 应用于嵌入页面（或滚动容器）的 `<body>` 元素来禁用滚动链接。。
+
+```css
+body {
+  overscroll-behavior: contain;
+}
+```
+
+Firefox、Chromium 和 Edge 通过 **[autoprefixer](https://github.com/postcss/autoprefixer)** 支持此功能，但 Safari 目前还不支持此功能：
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-671fb079086cac7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> [查看效果](https://codepen.io/lio-zero/pen/LYeLZqw)
diff --git "a/CSS/\344\275\277\347\224\250 CSS \345\210\233\345\273\272\344\270\200\344\270\252\344\270\211\350\247\222\345\275\242.md" "b/CSS/\344\275\277\347\224\250 CSS \345\210\233\345\273\272\344\270\200\344\270\252\344\270\211\350\247\222\345\275\242.md"
new file mode 100644
index 0000000..2882a17
--- /dev/null
+++ "b/CSS/\344\275\277\347\224\250 CSS \345\210\233\345\273\272\344\270\200\344\270\252\344\270\211\350\247\222\345\275\242.md"	
@@ -0,0 +1,65 @@
+# 使用 CSS 创建一个三角形
+
+假设我们有一个简单 `div` 标签：
+
+```html
+<div class="triangle"></div>
+```
+
+有什么办法可以画出一个三角形？本文将介绍几种方法实现它。
+
+## 使用 `border` 实现
+
+使用盒模型的 `border` 边框即可快速创建一个三角形。
+
+- 我们只需要使用其中的三个边框就可以创建一个三角形形状。
+- 所有边框应具有相同的 `border-width`。
+- 三角形指向的另一侧（即，如果三角形指向下方，则为顶部）应具有所需的 `border-color`。相邻边框（即左侧和右侧）的 `border-color` 应为 `transparent`。
+- 更改 `border-width` 值将更改三角形的比例。
+
+```css
+.triangle {
+  width: 0;
+  height: 0;
+  border-top: 20px solid #9c27b0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+
+  /* 简写形式 */
+  /* border: 20px solid transparent;
+  border-top-color: 20px solid plum; */
+}
+```
+
+## 使用 CSS `clip-path` 裁剪
+
+[`clip-path`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
+
+我们可以使用它的 `polygon` 函数实现一个三角形：
+
+```css
+.triangle {
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  height: 20px;
+  width: 40px;
+  background-color: plum;
+}
+```
+
+## 使用 `linear-gradient` 实现三角形
+
+[`linear-gradient()`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient) 函数用于创建一个表示两种或多种颜色线性渐变的图片。
+
+```css
+.triangle {
+  width: 20px;
+  height: 20px;
+  background: linear-gradient(
+    to bottom right,
+    #fff 0%,
+    #fff 50%,
+    plum 50%,
+    plum 100%
+  );
+}
+```
diff --git "a/CSS/\344\275\277\347\224\250 Sass \351\273\230\350\256\244\345\217\202\346\225\260\347\232\204\345\256\236\347\224\250\346\212\200\345\267\247.md" "b/CSS/\344\275\277\347\224\250 Sass \351\273\230\350\256\244\345\217\202\346\225\260\347\232\204\345\256\236\347\224\250\346\212\200\345\267\247.md"
new file mode 100644
index 0000000..909cf12
--- /dev/null
+++ "b/CSS/\344\275\277\347\224\250 Sass \351\273\230\350\256\244\345\217\202\346\225\260\347\232\204\345\256\236\347\224\250\346\212\200\345\267\247.md"	
@@ -0,0 +1,93 @@
+# 使用 Sass 默认参数的实用技巧
+
+Sass 提供[接受参数](https://sass-lang.com/documentation/at-rules/mixin#arguments)的函数和 `mixin`。您可以使用 Sass 默认参数，即具有值的参数，即使在调用函数或 `mixin` 时未提供这些参数。
+
+本文主要关注 `mixin`。以下是 `mixin` 的语法：
+
+```scss
+@mixin foo($a, $b, $c) {
+  // 我可以在这里使用 $a、$b 和 $c，但它们可能为空
+}
+
+.el {
+  @include foo(1, 2, 3);
+
+  // 如果我们试着使用 `@include foo`，不传任何参数，这是有效的语法
+  // 但会从 Sass 那里得到 Error: Missing argument $a
+}
+```
+
+在此 Sass `mixin` 中设置默认参数更安全、更有用：
+
+```scss
+@mixin foo($a: 1, $b: 2, $c: 3) {
+}
+
+.el {
+  @include foo;
+
+  @include foo('three', 'little', 'pigs');
+}
+```
+
+但是如果我想传递 `$b` 和 `$c`，但将 `$a` 保留为 Sass 默认参数，该怎么办？诀窍是您需要指定 `named` 参数：
+
+```scss
+@mixin foo($a: 1, $b: 2, $c: 3) {
+}
+
+.el {
+  @include foo($b: 2, $c: 3);
+}
+```
+
+## 使用 Sass 默认参数的示例
+
+这是一个快速的 `mixin`，它输出你需要的非常基本的样式滚动条（[Kitty 也有一个](https://css-tricks.com/snippets/sass/custom-scrollbars-mixin/)）：
+
+```scss
+@mixin scrollbar(
+  $size: 10px,
+  $foreground-color: #eee,
+  $background-color: #333
+) {
+  // 仅支持 WebKit 内核的浏览器
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $foreground-color;
+  }
+  &::-webkit-scrollbar-track {
+    background: $background-color;
+  }
+
+  // 标准版本（目前仅限 Firefox）
+  scrollbar-color: $foreground-color $background-color;
+}
+```
+
+现在我们可以以多种形式调用它：
+
+```scss
+.scrollable {
+  @include scrollbar;
+}
+
+.thick-but-otherwise-default-scrollable {
+  // 我可以跳过 $b 和 $c，因为它们是第二和第三
+  @include scrollbar(30px);
+}
+
+.custom-colors-scrollable {
+  // 如果所有其他参数都已命名，我可以跳过第一个参数。
+  @include scrollbar($foreground-color: orange, $background-color: black);
+}
+
+.totally-custom-scrollable {
+  @include scrollbar(20px, red, black);
+}
+```
+
+> **注意**：指定空字符串或 `null` 无法将不起作用。必须使用命名参数方法。
diff --git "a/CSS/\350\216\267\345\217\226\345\212\250\347\224\273 CSS \345\261\236\346\200\247\347\232\204\345\200\274.md" "b/CSS/\350\216\267\345\217\226\345\212\250\347\224\273 CSS \345\261\236\346\200\247\347\232\204\345\200\274.md"
new file mode 100644
index 0000000..5ff8dd9
--- /dev/null
+++ "b/CSS/\350\216\267\345\217\226\345\212\250\347\224\273 CSS \345\261\236\346\200\247\347\232\204\345\200\274.md"	
@@ -0,0 +1,24 @@
+# 获取动画 CSS 属性的值
+
+检查正在连续动画的值，我们可能第一时间想到的是 `setInterval`，但我们可以使用专门为动画而设计的 `requestAnimationFrame` 方法。
+
+假设我们需要获取一个盒子 `box` 动画过后顶部的值，你使用如下操作：
+
+```js
+function updateValue() {
+  const boxTopPosition = getComputedStyle(box).top
+  console.log(imageTopPosition)
+
+  requestAnimationFrame(updateValue)
+}
+
+requestAnimationFrame(updateValue)
+```
+
+**不使用 `Element.style.CSSPropertyName` 的原因**：它只获取由存在于每个元素上的 `style` 对象定义的值。换句话说，只有在 CSS 中明确定义或通过 JavaScript 设置的属性值才会出现。动画不属于这两类情况，所用使用它获取不到。
+
+CSS `animation` 属性及其值仅在运行时在浏览器内部深处确定。涉及检查 `style` 对象的浅层方法将不起作用。
+
+`requestAnimationFrame` 与浏览器的刷新率同步，所以每次帧更新都会调用 `updateValue` 方法。
+
+> [查看示例](https://codepen.io/lio-zero/pen/qBoNdVG)
diff --git "a/CSS/\351\201\277\345\205\215\344\275\277\347\224\250 CSS @import.md" "b/CSS/\351\201\277\345\205\215\344\275\277\347\224\250 CSS @import.md"
new file mode 100644
index 0000000..2790134
--- /dev/null
+++ "b/CSS/\351\201\277\345\205\215\344\275\277\347\224\250 CSS @import.md"	
@@ -0,0 +1,44 @@
+# 避免使用 CSS @import
+
+`@import` 函数允许我们包含来自外部文件的样式。当我们的项目有很多样式时，它非常有用。我们不需要创建一个文件来定义所有样式，而是可以将它们拆分为多个文件，并将它们组合到主文件中。
+
+```js
+/* 主文件 */
+@import 'common.css';
+@import 'components.css';
+@import 'pages.css';
+...
+```
+
+使用 `@import` 可以使我们的样式更有条理，更易于维护。但是，在继续渲染页面之前，浏览器必须逐个下载并解析每个 CSS 文件。CSS 文件按顺序下载，而不是并行下载。
+
+它还会根据 CSS 文件的数量来降低网站的速度。
+
+在风格仍然井然有序的情况下，有几种方法可以解决这些问题。
+
+## 使用 CSS 预处理器
+
+我们可以使用 CSS 预处理器，如 [Less](http://lesscss.org/)、[SASS](https://sass-lang.com/)。它们不仅提供了将 `@import` 作为普通 CSS 使用的功能，而且还可以将样式合并到单个最终 CSS 文件中。
+
+## 使用多个 link 标签
+
+每个 CSS 都可以通过单独的 `link` 标签下载，如下所示：
+
+```html
+<head>
+  <link rel="stylesheet" type="text/css" href="common.css" />
+  <link rel="stylesheet" type="text/css" href="components.css" />
+  ...
+</head>
+```
+
+> **注意**：在旧版本的 Internet Explorer 中，`@import` 函数的行为与在页面底部插入目标 CSS 的行为相同
+
+这里还涉及一道常见的面试题。
+
+## 页面导入样式时，使用 `link` 和 `@import` 有什么区别？
+
+- `link` 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 `rel` 连接属性等作用；而 `@import` 是 CSS 提供的，只能用于加载 CSS。
+- 页面被加载的时，`link` 会同时被加载，而 `@import` 引用的 CSS 会等到页面被加载完再加载。
+- `@import` 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 `link` 是 XHTML 标签，无兼容问题。
+- `link` 引入样式的方式权重高于 `@import` 的权重。
diff --git "a/CSS/\351\230\262\346\255\242\351\224\232\351\223\276\346\216\245\346\266\210\345\244\261\345\234\250\347\262\230\346\200\247\346\240\207\351\242\230\345\220\216\351\235\242.md" "b/CSS/\351\230\262\346\255\242\351\224\232\351\223\276\346\216\245\346\266\210\345\244\261\345\234\250\347\262\230\346\200\247\346\240\207\351\242\230\345\220\216\351\235\242.md"
new file mode 100644
index 0000000..ef4c083
--- /dev/null
+++ "b/CSS/\351\230\262\346\255\242\351\224\232\351\223\276\346\216\245\346\266\210\345\244\261\345\234\250\347\262\230\346\200\247\346\240\207\351\242\230\345\220\216\351\235\242.md"
@@ -0,0 +1,19 @@
+# 防止锚链接消失在粘性标题后面
+
+粘性标题是一种常见的布局，可以在许多网站上看到。问题是它不能很好地处理锚链接。
+
+假设我们有一个包含不同锚链接的目录。每个锚都会将用户带到页面中的特定 `section`。
+
+当用户单击定位点时，页面将滚动到目标 `section`。但该 `section` 的某些部分显示在标题下，这对用户来说不是一个好的体验。
+
+为了防止这种情况发生，我们希望在目标的顶部添加一个边距，但它仅在滚动时有效。此时，`scroll-margin-top` 就派上了用场。
+
+```css
+header {
+  height: 2rem;
+}
+
+section {
+  scroll-margin-top: 2rem;
+}
+```
diff --git "a/Canvas/\344\275\277\347\224\250 toBlob \344\270\213\350\275\275 Canvas API \347\224\237\346\210\220\347\232\204\345\233\276\345\203\217.md" "b/Canvas/\344\275\277\347\224\250 toBlob \344\270\213\350\275\275 Canvas API \347\224\237\346\210\220\347\232\204\345\233\276\345\203\217.md"
new file mode 100644
index 0000000..a3821d4
--- /dev/null
+++ "b/Canvas/\344\275\277\347\224\250 toBlob \344\270\213\350\275\275 Canvas API \347\224\237\346\210\220\347\232\204\345\233\276\345\203\217.md"	
@@ -0,0 +1,116 @@
+# 使用 toBlob 下载 Canvas API 生成的图像
+
+我们以一个 SVG 转为 Canvas 为例，使用 `toBlob` 方法下载 Canvas API 生成的图像。
+
+## 内联 SVG 到画布
+
+首先，您需要使用 DOM 方法来选择您的内联 SVG 元素。
+
+假设我们的 SVG 有一个值为 `my-svg` 的 id：
+
+```js
+const mySVG = document.getElementById('my-svg')
+```
+
+然后，使用 `XMLSerializer` 序列化 SVG 和 btoa（二进制到 ASCII）的内容来创建它的 base64 版本：
+
+```js
+const xml = new XMLSerializer().serializeToString(mySVG)
+const svg64 = btoa(xml)
+```
+
+然后，您可以直接从 base64 编码的字符串生成可下载的文件，但我们面临的问题是大多数浏览器对要作为文件下载的这种 base64 编码的字符串的大小施加了限制。所以，我们不得不从这一点开始努力绕过这个限制。
+
+创建一个新的 HTML `img` 元素并将其 `src` 属性设置为我们的 SVG 的 base64 版本：
+
+```js
+const image = new Image()
+const b64Start = 'data:image/svg+xml;base64,'
+image.src = b64Start + svg64
+```
+
+现在我们在页面上有一个带有 SVG 镜像的实际 HTML `img` 元素，我们可以将它绘制到 Canvas 2D 上下文中。
+
+首先，我们需要为我们的图像大小创建一个 Canvas 2D 上下文。假设您在页面上已经有一个 `canvas` 元素，其 id 值为 `my-canvas`：
+
+```js
+const canvas = document.getElementById('my-canvas')
+const ctx = canvas.getContext('2d')
+ctx.fillStyle = 'white'
+ctx.fillRect(0, 0, image.naturalWidth, image.naturalHeight)
+```
+
+我们可以在我们创建的 `img` 元素上监听 `onload` 事件，以便在 canvas 上下文对象上实际绘制它：
+
+```js
+image.addEventListener('load', () => {
+  ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight)
+})
+```
+
+现在，有了所有这些，我们就可以将内联 SVG 结果绘制到画布对象了。由于 canvas 的 `toBlob` 方法，我们可以生成一个可下载的文件。
+
+## 使用 `toBlob` 创建可下载的 JPEG 或 PNG 图像
+
+顾名思义，[`toBlob`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) 方法将画布绘制的图像转换为 blob（[Blob](https://github.com/lio-zero/blog/blob/main/JavaScript/Blob%20%E5%AF%B9%E8%B1%A1.md) 是字符串的二进制表示），然后可以将其作为文件下载到您的计算机上。
+
+首先，将回调函数作为 `toBlob` 参数，它接收 blob 本身，在回调中您可以继续对 blob 进行任何您想做的事情。
+
+toBlob 还可以有 2 个附加参数：
+
+- `type` — 它是一个 [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)，用于指定图片格式，默认格式为 `image/png`
+- `quality` — 它需要一个介于 0（0% 质量）和 1（100% 质量）之间的数字，这在使用有损 MIME 类型（如 `image/jpeg`）时指定图片展示质量。
+
+例如，这将创建一个质量为 90% 的 JPEG blob：
+
+```js
+canvas.toBlob(
+  (blob) => {
+    // do something
+  },
+  'image/jpeg',
+  0.9
+)
+```
+
+我们可以做的是使用 `URL.createObjectURL` 从内存中的 blob 创建一个 URL。
+
+我们可以在页面上选择一个锚标签并将其 `href` 属性设置为 URL：
+
+```js
+canvas.toBlob(
+  (blob) => {
+    const anchor = document.getElementById('download-link')
+    anchor.href = URL.createObjectURL(blob)
+  },
+  'image/jpeg',
+  0.9
+)
+```
+
+然后，用户只需单击锚点即可启动文件下载。
+
+但是我们可以做得更好，让文件下载自动开始，所以我们将使用一个小技巧，我们以编程方式创建一个锚元素 `a`，并以编程方式单击它以自动触发下载：
+
+```js
+canvas.toBlob(
+  (blob) => {
+    const anchor = document.createElement('a')
+    anchor.download = 'my-file-name.jpg'
+    anchor.href = URL.createObjectURL(blob)
+
+    anchor.click()
+
+    // 将其从内存中删除并保存在内存中
+    URL.revokeObjectURL(anchor.href)
+  },
+  'image/jpeg',
+  0.9
+)
+```
+
+您还会注意到，使用我们自动下载的图像，我们可以从内存释放/清理生成的 blob 到 URL 的映射，因为 blob 现在已作为文件下载到电脑上，因此我们完成了它。
+
+一旦我们想要保存的内容被绘制到画布上下文中，`toBlob` 方法可以很容易地允许以最适合您的应用需求的任何格式和质量保存为文件。
+
+[查看效果](https://code.juejin.cn/pen/7137572095852036110)
diff --git "a/Canvas/\345\234\250 HTML canvas \347\273\230\345\210\266\346\226\207\346\234\254.md" "b/Canvas/\345\234\250 HTML canvas \347\273\230\345\210\266\346\226\207\346\234\254.md"
new file mode 100644
index 0000000..15aad8e
--- /dev/null
+++ "b/Canvas/\345\234\250 HTML canvas \347\273\230\345\210\266\346\226\207\346\234\254.md"	
@@ -0,0 +1,84 @@
+# 在 HTML canvas 绘制文本
+
+绘制文本有两种方式：
+
+- `fillText(text, x, y)`
+- `strokeText(text, x, y)`
+
+下面，我们来看看如何在 `canvas` 上绘制文本。
+
+我们先创建一个 `canvas` 标签，并设置基本的宽高：
+
+```html
+<canvas width="200" height="400"></canvas>
+```
+
+首先，获取对画布的引用：
+
+```js
+const canvas = document.querySelector('canvas')
+```
+
+并从中创建一个上下文对象：
+
+```js
+const ctx = canvas.getContext('2d')
+```
+
+[`getContext()`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext) 方法根据作为参数传递的类型返回画布上的绘图上下文。
+
+有效值为：
+
+- `2d` 二维渲染上下文
+- `webgl` 使用 WebGL 版本 1
+- `webgl2` 使用 WebGL 版本 2
+- 与 [`ImageBitmap`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap) 一起使用的 `bitmaprenderer`
+
+[点击此处查看详细内容](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext#%E5%8F%82%E6%95%B0)。
+
+现在我们可以调用 `ctx` 对象的 `fillText()` 方法：
+
+```js
+ctx.fillText('Hello, Canvas!', 100, 100)
+```
+
+`fillText` 方法的后两个参数分别为 `x` 和 `y` 的坐标。
+
+在调用 `fillText()` 之前，还可以传递其他属性来自定义外观，例如：
+
+```js
+ctx.font = 'bold 20pt Menlo'
+ctx.fillStyle = '#ccc'
+ctx.fillText('Hello, Canvas!', 100, 100)
+```
+
+- `font` 属性更改字体样式
+- `fillStyle` 属性更改图形的填充颜色。默认值是 `#000`。
+
+如果画布看起来太小，你可以设置它的 `width` 和 `height` 属性：
+
+```js
+ctx.width = 600
+ctx.height = 600
+```
+
+另一种绘制文本的方式：
+
+```js
+ctx.strokeStyle = '#ccc'
+ctx.strokeText('Hello, Canvas!', 100, 100)
+```
+
+`strokeStyle` 属性更改图形的描边颜色。默认值是 `#000`。
+
+`fillStyle` 和 `strokeStyle` 接受任何有效的 CSS 颜色，包括字符串和 RGB 计算。
+
+您还可以更改与文本（`* = default`）相关的其他属性：
+
+- `textAlign: start*, end, left, right, center` — 文本的对齐方式
+- `textBaseline: top, hanging, middle, alphabetic*, ideographic, bottom` — 文本基线
+- `direction: ltr | rtl | inherit*` — 文本方向
+
+> 您可以在[此处](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)找到有关使用 `2d` 选项返回的所有 API 。
+
+[演示地址](https://code.juejin.cn/pen/7128056881381113892)
diff --git "a/Canvas/\345\260\206 canvas \346\211\223\345\215\260\345\210\260 Data URL.md" "b/Canvas/\345\260\206 canvas \346\211\223\345\215\260\345\210\260 Data URL.md"
new file mode 100644
index 0000000..ace6a00
--- /dev/null
+++ "b/Canvas/\345\260\206 canvas \346\211\223\345\215\260\345\210\260 Data URL.md"	
@@ -0,0 +1,48 @@
+# 将 canvas 打印到 Data URL
+
+[Data URL](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/Data%20URL.md) 是浏览器提供的一项有用的功能。
+
+通常，引用一张图片：
+
+```html
+<img src="image.png" />
+```
+
+它会在浏览器渲染到它时，发起请求获取到这张图片。
+
+而 Data URL 将图像嵌入 HTML 本身，如下所示：
+
+```js
+<img src='data:image/png;base64,iVBORw0KGgoAA...' />
+```
+
+Canvas 对象的 `toDataURL()` 方法，将 `canvas` 生成图像的 Data URL：
+
+```js
+canvas.toDataURL()
+```
+
+我认为，当您创建服务器端映像并希望在服务器端生成的网页中提供它时，这尤其有用。
+
+特别是，使用 [canvas](https://www.npmjs.com/package/canvas) 包，我们可以初始化一个画布：
+
+```js
+const { createCanvas, loadImage } = require('canvas')
+
+const canvas = createCanvas(200, 200)
+const ctx = canvas.getContext('2d')
+```
+
+例如，使用 `ctx.fillText('Hello，Canvas！', 50, 100)` 绘制，然后调用 `canvas.toDataURL()` 生成图像的 Data URL，然后我们可以将其以字符串形式附加到 HTML 中，如下所示：
+
+```js
+const imageHTML = `<img src="${canvas.toDataURL()}" />`
+```
+
+当然，您可以在前端执行相同的操作，但现在 `canvas` 对象是对要绘制的 HTML `<canvas>` 元素的引用：
+
+```js
+const canvas = document.getElementById('canvas')
+// ...
+const imageHTML = `<img src="${canvas.toDataURL()}" />`
+```
diff --git "a/Canvas/\345\274\200\345\247\213\344\275\277\347\224\250 Canvas.md" "b/Canvas/\345\274\200\345\247\213\344\275\277\347\224\250 Canvas.md"
new file mode 100644
index 0000000..ee0447d
--- /dev/null
+++ "b/Canvas/\345\274\200\345\247\213\344\275\277\347\224\250 Canvas.md"	
@@ -0,0 +1,80 @@
+# 开始使用 Canvas
+
+`canvas` 是 HTML5 新增的标签，它就像一块幕布，可以用 JavaScript 在上面绘制各种图表、动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
+
+```html
+<canvas>您的浏览器不支持 Canvas</canvas>
+```
+
+`canvas` 默认是看不见的，为了帮助我们可视化 `canvas` 元素，我们为它添加一个边框：
+
+```css
+canvas {
+  border: #333 10px solid;
+}
+```
+
+效果如下：
+
+![为 canvas 添加边框](https://upload-images.jianshu.io/upload_images/18281896-3dc8cffdcdbd92fa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 调整我们的 `canvas` 元素
+
+默认情况下，`canvas` 元素是宽 300 像素和高 150 像素，如果您需要更改 `canvas` 的大小，可以使用 `width` 和 `height` 属性：
+
+```html
+<canvas width="550" height="350"></canvas>
+```
+
+> 推荐：[style="width: ___" 与 width="___"](https://github.com/lio-zero/blog/blob/main/CSS/style%3D'width__'%20%E4%B8%8E%20width%3D'__'.md)
+
+## 绘制线条
+
+我们使用 [Canvas API](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) 来画一条对角线。
+
+首先，我们为 `canvas` 添加一个 `id`，方便我们使用 JS 去操作它：
+
+```html
+<canvas id="myCanvas" width="550" height="350"></canvas>
+```
+
+访问 `canvas` 元素：
+
+```js
+const canvas = document.querySelector('#myCanvas')
+```
+
+获取渲染上下文：
+
+```js
+const ctx = canvas.getContext('2d')
+```
+
+移动虚拟笔并指定起始坐标和结束坐标：
+
+```js
+ctx.beginPath()
+
+ctx.moveTo(50, 50)
+ctx.lineTo(450, 300)
+
+// 绘制完后，关闭路径
+ctx.closePath()
+```
+
+指定了绘制的线的厚度和颜色：
+
+```js
+ctx.lineWidth = 20
+ctx.strokeStyle = 'plum'
+```
+
+最后，将线绘制在 `canvas` 上：
+
+```js
+ctx.stroke()
+```
+
+最终效果如下：
+
+![使用 Canvas API 画一条直线](https://upload-images.jianshu.io/upload_images/18281896-e56812325cfd2c46.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/DOM/DOM \344\270\255 Element \344\270\216 Node \346\234\211\344\275\225\345\214\272\345\210\253.md" "b/DOM/DOM \344\270\255 Element \344\270\216 Node \346\234\211\344\275\225\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..3041087
--- /dev/null
+++ "b/DOM/DOM \344\270\255 Element \344\270\216 Node \346\234\211\344\275\225\345\214\272\345\210\253.md"	
@@ -0,0 +1,7 @@
+# DOM 中 Element 与 Node 有何区别
+
+Element 是 DOM 元素，Node 是节点，包含 Element，还有其他节点
+
+Element 继承于 Node，具有 Node 的方法，同时又拓展了很多自己的特有方法
+
+详细内容可以查看[浅析 Node 与 Element 的区别](https://zhuanlan.zhihu.com/p/165422508)
diff --git "a/DOM/DOMContentLoaded \344\270\216 load \347\232\204\345\214\272\345\210\253.md" "b/DOM/DOMContentLoaded \344\270\216 load \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..f8ac849
--- /dev/null
+++ "b/DOM/DOMContentLoaded \344\270\216 load \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,31 @@
+# DOMContentLoaded 与 load 的区别
+
+当页面中的所有节点都已在 DOM 树中构建时，将触发 `DOMContentLoaded` 事件。当所有资源（如图像和子帧）都已完全加载时，将触发 `load` 事件。
+
+## readyState 属性
+
+IE 8 和旧版本的 IE 不支持 `DOMContentLoaded` 事件。
+
+为了支持旧版本 IE 中的行为，我们可以使用 `readyState` 属性检查文档是否已完全加载：
+
+```js
+const ready = function (cb) {
+  if (document.readyState === 'loading') {
+    //文档仍在加载中
+    document.addEventListener('DOMContentLoaded', function (e) {
+      cb()
+    })
+  } else {
+    cb() // 文档已完全加载
+  }
+}
+```
+
+`ready` 函数接受一个函数，该函数将在文档准备好时被调用:
+
+```js
+ready(function () {
+  // 文件准备好后做些什么
+  // ...
+})
+```
diff --git "a/DOM/HTMLCollection \345\222\214 NodeList \347\232\204\345\214\272\345\210\253.md" "b/DOM/HTMLCollection \345\222\214 NodeList \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..41be1a9
--- /dev/null
+++ "b/DOM/HTMLCollection \345\222\214 NodeList \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,145 @@
+# HTMLCollection 和 NodeList 的区别
+
+HTMLCollection 和 NodeList 是 JavaScript 中两种不同的对象类型，它们都用于表示多个 DOM 元素。
+
+## HTMLCollection
+
+[`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) 表示一个包含了元素的集合，还提供了从该集合中选择元素的属性和方法。
+
+例如，使用 `getElementsByTagName()` 方法返回的就是一个 HTMLCollection 对象。
+
+HTMLCollection 对象中的属性和方法：
+
+- `item(index)` — 返回 HTMLCollection 中指定索引的元素，不存在返回 `null`。
+- `length`（只读）— 返回 HTMLCollection 中元素的数量。
+
+```js
+document.getElementsByTagName('body') instanceof HTMLCollection // true
+
+const htmlCollection = document.getElementsByTagName('body')
+console.log(htmlCollection.item(0)) // <body>...</body>
+console.log(htmlCollection.length()) // 1
+```
+
+## NodeList
+
+[`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) 对象是节点的集合。
+
+NodeList 对象可以通过 `Node.childNodes` 属性和 `document.querySelectorAll()` 方法获取。
+
+```js
+document.body.childNodes instanceof NodeList // true
+document.querySelectorAll('body') instanceof NodeList // true
+```
+
+NodeList 对象中的属性和方法：
+
+- `item()` — 返回某个元素基于文档树的索引。
+- `length` — 返回 NodeList 的节点数量。
+- `NodeList.forEach()` 方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的 `forEach` 方法完全一致。
+- `NodeList.keys()/values()/entries()` — 这三个方法都返回一个 ES6 的遍历器对象，可以通过 `for...of` 循环遍历获取每一个成员的信息。
+
+**区别**：`keys()` 返回键名的遍历器，`values()` 返回键值的遍历器，`entries()` 返回的遍历器同时包含键名和键值的信息。如果你还不熟悉，可以在我之前写过的一篇 [Object.keys/values/entries](https://github.com/lio-zero/blog/blob/master/JavaScript/Object.keys%E3%80%81values%E3%80%81entries.md) 了解它基本用法。
+
+```js
+const nodeList = document.querySelectorAll('body')
+
+console.log(nodeList.item(0)) // <body>...</body>
+console.log(nodeList.length) // 1
+console.log(nodeList.forEach(console.log)) // <body>...</body>
+
+for (let key of nodeList.keys()) {
+  console.log(nodeList[key]) // <body>...</body>
+}
+
+for (let value of nodeList.values()) {
+  console.log(value) // <body>...</body>
+}
+
+for (let entry of nodeList.entries()) {
+  console.log(entry) // [0, body]
+}
+```
+
+## 将 NodeList 或 HTMLCollection 转换为数组
+
+HTMLCollection 和 NodeList 是类数组对象，本身无法使用数组的方法。除非你把它转为一个数组。
+
+详细的类数组转数组可以查看：[类数组对象转数组](https://github.com/lio-zero/blog/blob/main/JavaScript/%E7%B1%BB%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E8%BD%AC%E6%95%B0%E7%BB%84.md)。
+
+## HTMLCollection 与 NodeList 的区别
+
+- HTMLCollection 是一个的动态集合，如果 DOM 树发生变化，HTMLCollection 也会随之变化，节点的增删是敏感的。
+- 在大部分情况下，NodeList 是一个静态集合，也就意味着随后对 DOM 的任何改动都不会影响集合的内容，比如 `document.querySelectorAll` 就会返回一个静态 NodeList（注意内容的修改会是实时）。但存在一个例外，DOM 树的变化会反映在 `Node.childNodes` 属性中，这时 NodeList 可以是一个动态集合。
+- HTMLCollection 元素可以通过 `name`、`id` 或 `index` 索引来获取。NodeList 只能通过 `index` 索引来获取。
+- 只有 NodeList 对象有包含属性节点和文本节点。
+
+注意
+
+## querySelectorAll 和 getElementsByTagName 的区别
+
+`querySelectorAll` 返回 `NodeList` 集合，而 `getElementsByTagName` 返回 `HTMLCollection` 集合。
+
+从上面的 HTMLCollection 与 NodeList 的区别可以知道，HTMLCollection 是一个动态集合，如果 DOM 树发生变化，HTMLCollection 也会随之变化。而 NodeList 既可以是静态集合也可以是动态集合，这与获取的方式有关，使用 `querySelectorAll` 获取到的是一个静态集合。
+
+下面是两个例子：
+
+```html
+<ul>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li>🤣</li>
+  <li></li>
+</ul>
+```
+
+NodeList 示例：
+
+```js
+const ul = document.querySelectorAll('ul')[0]
+const liList = document.querySelectorAll('li')
+
+console.log(liList) // NodeList(5) [li, li, li, li, li]
+console.log(liList.length) // 5
+
+ul.appendChild(document.createElement('li'))
+
+console.log(liList.length) // 5
+liList[liList.length - 1].innerHTML = '🤐'
+console.log(liList[liList.length - 1].innerHTML) // 🤐
+```
+
+可以看到，使用 `querySelectorAll` 获取 `<li>` 返回的是一个 NodeList 集合。页面 DOM 结构发生改变，其长度不会发生任何变化，而改变内容，则会发生相应的改变。
+
+使用 `Node.childNodes` 属性获取到的 NodeList 则是一个动态集合。
+
+```js
+const ul = document.querySelectorAll('ul')[0]
+
+console.log(ul.childNodes.length) // 11
+ul.appendChild(document.createElement('li'))
+console.log(ul.childNodes.length) // 12
+```
+
+HTMLCollection 示例：
+
+```js
+const ul = document.querySelectorAll('ul')[0]
+const liList = document.getElementsByTagName('li')
+
+console.log(liList) // HTMLCollection(5) [li, li, li, li, li]
+console.log(liList.length) // 5
+
+ul.appendChild(document.createElement('li'))
+
+console.log(liList.length) // 6
+```
+
+可以看到，使用 `getElementsByTagName` 获取 `<li>` 返回的是一个 HTMLCollection 集合。页面 DOM 结构发生改变，将动态获取其长度。
+
+## 哪种类型更好
+
+通常，拥有一个保持不变的列表是一件好事。但有时你可能需要一个自动更新以反映当前 UI 的列表。
+
+了解选择器方法是返回静态集合还是动态集合也有助于防止意外的副作用和错误。
diff --git "a/DOM/JavaScript \344\272\213\344\273\266\344\274\240\346\222\255\346\234\272\345\210\266.md" "b/DOM/JavaScript \344\272\213\344\273\266\344\274\240\346\222\255\346\234\272\345\210\266.md"
new file mode 100644
index 0000000..4209152
--- /dev/null
+++ "b/DOM/JavaScript \344\272\213\344\273\266\344\274\240\346\222\255\346\234\272\345\210\266.md"	
@@ -0,0 +1,247 @@
+# JavaScript 事件传播机制
+
+JavaScript 采用异步事件驱动编程模型，与 HTML 的交互是通过[事件](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)实现的。
+
+事件驱动编程是一种涉及构建发送和接收事件的应用的范例。当程序发出事件时，程序通过运行任何注册到该事件和上下文的回调函数来响应，并将相关数据传递给该函数。
+
+例如，监听元素的的 `click` 事件，其中在事件发生时运行回调函数。
+
+```js
+document.addEventListener('click', () => {
+  // 此回调函数在用户单击文档时运行
+})
+```
+
+当我们执行了特定的事件时，如在一个按钮上监听了 `click` 点击事件，当你按下按钮时，它将触发你给定的事件句柄/事件处理程序（也就是一个函数，其中执行一些 JS 语句）。**但这个触发过程是怎样的呢？**下面我们通过一些问题来看看本文要讲的事件的传播机制。
+
+## 什么是事件流？
+
+事件流是在网页上接收事件的顺序。当你单击嵌套在其他各种元素中的元素时，在你单击目标元素后，它会先触发目标元素上的 `click` 事件，在一层层往上触发事件，最终到达最顶层的 `window` 对象，这是浏览器默认的事件冒泡行为（IE 9+）。事件流有两种方式：
+
+- 从外到内（事件捕获）
+- 从内到外（事件冒泡）
+
+以下示例都用该结构：
+
+```html
+<ul id="emoji">
+  <li id="smile">😀</li>
+  <li>😁</li>
+  <li>😂</li>
+  <li>🤣</li>
+  <li>😃</li>
+  <li>😄</li>
+</ul>
+
+<script>
+  emoji.onclick = function (e) {
+    console.log(e.target.innerHTML)
+  }
+</script>
+```
+
+尝试运行上面示例，你会发现，单击每个 `<li>` 标签，你会得到其中的每个 `emoji`。
+
+> 你可以在这 👉[测试效果](https://codepen.io/lio-zero/pen/YzZLLqq)，配合下文进行阅读。
+
+能得到这样的结果是因为，它使用了事件冒泡一个最重要的原理：**事件委托（event delegation）**，后面我们会介绍到。
+
+## IE 中的事件流
+
+这里要介绍一下 IE 6-8 中的事件流，IE 6-8 中的事件流和标准的 DOM 事件流有（独）所（领）不（风）同（骚），IE 的事件流只支持事件冒泡，不支持事件捕获。
+
+IE 9 之前，它不支持 `addEventListener`，也就不能使用其第三个参数来表示是冒泡还是捕获，它提供了非标准的事件监听器 `attachEvent()` 方法。
+
+在这个模型中，事件对象使用 `event.srcElement` 属性，而不是 `event.target`，但两者的效果相同。
+
+```js
+emoji.attachEvent('onclick', function (e) {
+  var target = e.target || e.srcElement
+  console.log(target.innerHTML)
+})
+```
+
+## 什么是事件冒泡？
+
+**事件冒泡（默认模式）**是事件传播的一种，其中事件首先在目标元素上触发，然后在同一嵌套层次结构中依次在目标元素的祖先（父代）上触发，直到到达最外层的 DOM 元素。
+
+```js
+emoji.onclick = () => {
+  alert(11)
+}
+
+smile.onclick = () => {
+  alert(22)
+}
+```
+
+当你点击 `smile` 元素时，首先弹出 22，然后才是 11。同一层次结构的事件由内到外依次执行。
+
+## 什么是事件捕获？
+
+**事件捕获**也是事件传播的一种，其中事件首先被最外层的元素捕获，然后在同一嵌套层次结构中依次触发目标元素的后代（子元素），直到到达最里面的 DOM 元素。
+
+当一个事件发生以后，它会在不同的 DOM 节点之间传播（propagation）。[DOM 事件](http://www.w3.org/TR/DOM-Level-3-Events/)标准描述了事件传播的 3 个阶段：
+
+- **捕获阶段（capture phase）** — 事件从 `window` 对象向下传递到目标元素。
+- **目标阶段（target phase）** — 事件到达目标元素。
+- **冒泡阶段（bubbling phase）** — 事件从目标元素上开始冒泡。
+
+在捕获阶段中，事件从祖先元素向下传播到目标元素。当事件达到目标元素后，冒泡才开始。
+
+同时，这三个阶段的传播模型，会使得一个事件在多个节点上触发。
+
+因为浏览器默认是从事件冒泡开始，我们看不到事件捕获，所以想要测试事件捕获，我们需要使用到 `addEventListener` 方法，`addEventListener` 用于添加事件句柄、注册监听器，第三个参数还可以指定在捕获阶段还是冒泡阶段触发事件：
+
+- `false`（默认值）— 在冒泡阶段开始触发事件
+- `true` — 在捕获阶段开始触发事件
+
+```js
+smile.addEventListener('click', (e) => {
+  console.log(e.target.innerHTML)
+})
+
+emoji.addEventListener(
+  'click',
+  (e) => {
+    alert('Emoji List')
+  },
+  true
+)
+
+document.addEventListener('click', () => {
+  alert('document')
+})
+
+window.addEventListener('click', () => {
+  alert('window')
+})
+```
+
+运行上面代码，点击 `smile` 元素时，将依次输出 **'Emoji List' -> 😀 -> 'document' -> 'window'**。
+
+**原因**：由于 `ul` 被我们设置为捕获阶段，所以它先被触发，然后在触发点击的目标元素事件，然后在依次往上冒泡。
+
+> **注意**：捕获阶段不会在某些特殊事件（例如 `focus`）和 IE < 9 时出现。
+
+## 事件委托（Event Delegation）
+
+事件委托，也称为事件代理，是指将本要添加在自身的事件，添加到别人身上。通过冒泡的原理，将事件添加到父级，触发执行效果。
+
+例如本文的示例，我们不必为列表的每个子项添加事件，而是添加在其父级上，当我们触发某一项时，通过事件冒泡到父级，从而触发事件。
+
+```js
+emoji.addEventListener('click', (e) => {
+  console.log(e.target.innerHTML)
+})
+```
+
+**好处**：
+
+- 节省内存占用，减少事件注册
+- 新增子元素时，无需再对其进行事件绑定
+
+## 阻止事件传播
+
+你可以通过调用事件的 `event.stopPropagation()` 方法来阻止捕获和冒泡阶段中当前事件在 DOM 中的进一步传播。
+
+```js
+function handler(e) {
+  // do something...
+
+  // 通常在事件处理程序的末尾
+  e.stopPropagation()
+}
+```
+
+## 阻止事件的默认行为
+
+浏览器对某些事件操作有一些默认行为。例如：
+
+- `click` 事件 — 点击元素时会触发该事件，默认行为是跳转到链接指向的页面。
+- `submit` 事件 — 提交表单时会触发该事件，默认行为是提交表单数据到服务器。
+- `keydown` 事件 — 按下键盘按键时会触发该事件，默认行为取决于按下的按键。例如，按下 `Enter` 键会提交表单，按下 `Tab` 键会使焦点跳到下一个输入字段。
+- `dragstart` 事件 — 开始拖动元素时会触发该事件，默认行为是拖动元素。
+- `drop` 事件 — 在拖动元素上释放鼠标时会触发该事件，默认行为是将拖动的数据放入目标元素中。
+
+还有很多类型的事件，默认行为可能不同。为了确保页面的正常工作，如果在需要时，你可以使用以下方法来阻止默认行为的发生。
+
+### 对于 `on<event>` 返回 `false`
+
+```js
+ele.onclick = function (e) {
+  // do something
+
+  return false
+}
+```
+
+如果你使用内联属性，则情况相同：
+
+```html
+<form>
+  <button type="submit" onclick="return false">Click</button>
+</form>
+```
+
+我不推荐这种方法，因为：
+
+- 返回 `false` 没有意义
+- 它不适用于 `addEventListener()` 方法
+
+### 使用 `preventDefault()` 方法
+
+此方法适用于内联属性：
+
+```html
+<button type="submit" onclick="event.preventDefault()">Click</button>
+```
+
+和事件处理程序：
+
+```js
+ele.onclick = function (e) {
+  e.preventDefault()
+  // ...
+}
+
+ele.addEventListener('click', function (e) {
+  e.preventDefault()
+  // ...
+})
+```
+
+你还可以在事件对象中使用 `event.defaultPrevented` 查看是否使用了 `event.preventDefault()` 方法。
+
+它返回一个布尔值用来表明是否在特定元素中调用了 `event.preventDefault()`。
+
+```js
+function handler(e) {
+  e.preventDefault()
+  console.log(e.defaultPrevented) // true
+}
+```
+
+## 很高兴你知道
+
+- 事件本身在传播，而不是绑定在事件上的方法会传播。
+- 并非所有的事件都会传播，如 `focus`、`blur`、`mouseenter` 和 `mouseleave` 等事件传播。
+- 你应该知道哪些事件触发会有默认行为（如提交表单、点击链接等），并在需要时阻止它们。
+- 建议使用 `addEventListener` 来注册事件处理程序，不要使用 HTML 元素的属性来注册事件处理程序（如 `onclick`），因为这样可能会有潜在的安全隐患。如果传递给 `onclick` 属性的方法不存在，浏览器也不会发出警告。
+- 事件处理程序的返回值通常会被忽略，唯一的例外是使用 `on<event>` 分配的处理程序中返回 `return false`。在所有其他情况下，`return` 值都会被忽略，且返回 `true` 没有意义。
+- 如果是使用 `on<event>` 分配的处理程序，那么你可以使用 `return false` 来阻止默认行为。
+- 如果是使用 `addEventListener` 分配的处理程序，那么你可以使用 `event` 事件对象中的 `e.preventDefault()` 方法来阻止默认行为的发生。
+- `return false` 做着与 `event.stopPropagation()` 和 `event.preventDefault()` 类似的工作，但它们之间毫无关联。
+- 为了避免内存泄漏问题，请记住将不再使用的事件处理程序移除。
+
+```js
+const handler = (e) => {
+  // do something...
+
+  // 不在使用时，请移除它
+  ele.removeEventListener('click', handler)
+}
+
+// 附加事件监听器
+ele.addEventListener('click', handler)
+```
diff --git "a/DOM/clientY \344\270\216 pageY \347\232\204\345\214\272\345\210\253.md" "b/DOM/clientY \344\270\216 pageY \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..b726611
--- /dev/null
+++ "b/DOM/clientY \344\270\216 pageY \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,31 @@
+# clientY 与 pageY 的区别
+
+给定页面中的一个点，`clientY` 和 `pageY` 是从该点到视口和页面顶部的距离（以像素为单位）。
+
+在这里，page 是整个渲染的页面，其中可能有滚动条，而 viewport 是页面的可见部分。
+
+```
+┌─────────────────────────────┬─┐◀︎─── Web page      ▲
+|                             | |                   |
+|                             | |                   |
+|                             | |                   |
+|                             | |                   |
+|                             | |                   |
+|                             | |                   |
+|                             | |                 pageY
+|                             | |                   |
+├=============================┼─┤       ▲           |           ▲
+|                             | |       |           |           |
+|                             | |       |           |           |
+|       Scroll bar ──────────▶︎| |       |           |        clientY
+|                             | |     Browser       |           |
+|                             | |     window        |           |
+|       ● Point               | |       |           ▼           ▼
+|                             | |       |
+|                             | |       |
+├=============================┼─┤       ▼
+|                             | |
+|                             | |
+|                             | |
+└─────────────────────────────┴─┘
+```
diff --git "a/DOM/keydown\343\200\201keypress \345\222\214 keyup.md" "b/DOM/keydown\343\200\201keypress \345\222\214 keyup.md"
new file mode 100644
index 0000000..47da625
--- /dev/null
+++ "b/DOM/keydown\343\200\201keypress \345\222\214 keyup.md"	
@@ -0,0 +1,31 @@
+# keydown、keypress 和 keyup
+
+## 事件顺序
+
+当用户按下一个键或不同的组合键时，按以下顺序触发 `keydown`、`keypress` 和 `keyup`：
+
+- 当用户按下按键时，会首先触发 `keydown` 事件
+- 用户释放按键时，最后触发 `keyup` 事件
+- 在这之间，`keypress` 事件将被触发
+
+这些事件用于不同的目的。
+
+`keydown` 和 `keyup` 事件经常被用来处理物理按键，而 `keypress` 事件被用来处理其正在键入的字符。
+
+`keypress` 会忽略某些按键，诸如 `delete`、`arrows`、`page up`、`page down`、`home`、`end`、`ctrl`、`alt`、`shift` 和 `esc` 等。所以，如果我们需要处理这些键，最好使用两种 `keydown` 或 `keyup` 事件。
+
+> **Tips**：MDN 解释 `keypress` 事件因高度依赖硬件且已被弃用，建议不要在浏览器中使用它。
+
+下面的示例代码监听 `keydown` 事件，并在按下 `ESC` 键时执行一些操作：
+
+```js
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    // do something ...
+  }
+})
+```
+
+如果用户按住某个键，则 `keydown` 和 `keypress` 事件会触发多次。
+
+而 `keyup` 仅在用户释放按键时触发一次。
diff --git "a/DOM/key\343\200\201keyCode \345\222\214 which.md" "b/DOM/key\343\200\201keyCode \345\222\214 which.md"
new file mode 100644
index 0000000..515b1ec
--- /dev/null
+++ "b/DOM/key\343\200\201keyCode \345\222\214 which.md"	
@@ -0,0 +1,37 @@
+# key、keyCode 和 which
+
+`key`、`keyCode` 和 `which` 可用于确定按下哪个键。下面是处理文本框的按键事件的示例代码。
+
+它检查用户是否按下键码为 13 的 **Enter** 键：
+
+```js
+document.addEventListener('keydown', function (e) {
+  if (e.keyCode === 13) {
+    // do something ...
+  }
+})
+```
+
+## 区别
+
+根据 MDN 文档，[`keyCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) 和 [`which`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which) 都已弃用，将从 Web 标准中删除。
+
+除此之外，浏览器对这两个属性的支持也有所不同。有些浏览器使用 `keyCode`，有些浏览器使用 `which`。
+
+通常可以看到一些规范化的写法，如下所示：
+
+```js
+const key = 'which' in e ? e.which : e.keyCode
+// or
+const key = e.which || e.keyCode || 0
+```
+
+## 建议
+
+建议使用 [`key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) 属性。上面的示例代码可以重写为：
+
+```js
+if (e.key === 'Enter') {
+  // 按下回车键
+}
+```
diff --git "a/DOM/mouseenter \344\270\216 mouseover \347\232\204\345\214\272\345\210\253.md" "b/DOM/mouseenter \344\270\216 mouseover \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..a6bdf81
--- /dev/null
+++ "b/DOM/mouseenter \344\270\216 mouseover \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,12 @@
+# mouseenter 与 mouseover 的区别
+
+将鼠标移到元素或其子元素上时，将触发 `mouseenter` 和 `mouseover` 事件。但是它们之间有一些细微的差别：
+
+- `mouseenter` 事件仅在鼠标移入元素时触发，而不包括移入元素的子元素。对应的鼠标离开元素事件是 `mouseleave`。
+- `mouseover` 事件在鼠标移入元素或其任何子元素时触发，包括移入元素的子元素。对应的鼠标离开元素事件是 `mouseout`。
+
+## 建议
+
+因为 `mouseover` 事件是从子元素向上通过层次结构传播的，所以如果你正在对该事件执行资源密集型任务，你可能会注意到屏幕闪烁。
+
+**建议改用 `mouseenter` 和 `mouseleave`事件。**
diff --git "a/DOM/naturalWidth \344\270\216 width \347\232\204\345\214\272\345\210\253.md" "b/DOM/naturalWidth \344\270\216 width \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..8e9b9a5
--- /dev/null
+++ "b/DOM/naturalWidth \344\270\216 width \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,24 @@
+# naturalWidth 与 width 的区别
+
+`naturalWidth` 是元素的自然宽度，它永远不会改变。例如，即使使用 CSS 或 JavaScript 调整图像大小，100px 宽的图像的自然宽度始终为 100px。
+
+而 `width` 是 `width` 属性的值。它可能会发生更改，并且可以通过 CSS 或 JavaScript 进行更新。
+
+我们可以通过给定 `url` 加载的图像的获取自然宽度：
+
+```js
+const getNaturalWidth = (url) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.addEventListener('load', () => {
+      resolve(img.naturalWidth)
+    })
+    img.addEventListener('error', () => reject())
+    img.src = url
+  })
+}
+
+getNaturalWidth('https://path/to/image.png').then((naturalWidth) => {
+  // ...
+})
+```
diff --git "a/DOM/nodeName \344\270\216 tagName \347\232\204\345\214\272\345\210\253.md" "b/DOM/nodeName \344\270\216 tagName \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..5cc601f
--- /dev/null
+++ "b/DOM/nodeName \344\270\216 tagName \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,38 @@
+# nodeName 与 tagName 的区别
+
+`nodeName` 和 `tagName` 是获取 HTML 节点名称的属性。
+
+`tagName` 用于获取节点类型为 1 的元素节点的类型。对于属性、注释、文本等其他类型的节点，使用 `nodeName` 获取节点的名称。
+
+让我们看看下面的例子，我们有一个简单的按钮：
+
+```js
+<button id='login'>Login</button>
+```
+
+HTML 元素的 `nodeName` 和 `tagName` 属性相同：
+
+```js
+const button = document.getElementById('login')
+button.nodeType // 1
+button.nodeName // 'BUTTON'
+button.tagName // 'BUTTON'
+```
+
+让我们访问表示 `id` 属性的节点：
+
+```js
+const idNode = button.getAttributeNode('id')
+idNode.nodeType // 2
+idNode.nodeName // 'id'
+idNode.tagName // undefined
+```
+
+以类似的方式，按钮文本节点为 `nodeName` 和 `tagName` 提供不同的结果：
+
+```js
+const content = button.firstChild
+content.nodeType // 3
+content.nodeName // '#text'
+content.tagName // undefined
+```
diff --git "a/DOM/parentElement \344\270\216 parentNode \347\232\204\345\214\272\345\210\253.md" "b/DOM/parentElement \344\270\216 parentNode \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..d9cff24
--- /dev/null
+++ "b/DOM/parentElement \344\270\216 parentNode \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,52 @@
+# parentElement 与 parentNode 的区别
+
+首先，你需要知道元素和节点之间的区别。总之，元素是一种特殊类型的节点，它表示 DOM 树中的单个节点。它不仅可以是元素，还可以是注释、文档、文本节点等。
+
+- `parentElement` 属性返回当前元素的父元素。
+- `parentNode` 属性返回当前元素的父节点，即当前元素的直接父元素。
+
+在大多数情况下，`parentElement` 和 `parentNode` 属性返回相同的节点：
+
+```js
+// 两者都返回 <html> 元素
+document.body.parentNode
+document.body.parentElement
+```
+
+两者的行为相同。
+
+但是，当当前元素的父节点是文档片段（document fragment）时，两者的行为就不同了。`parentNode` 属性会返回文档片段，而 `parentElement` 属性则返回 `null`。
+
+```js
+// 返回文档节点
+document.documentElement.parentNode // document
+
+// 返回 null，因为 <html> 元素不存在父元素节点
+document.documentElement.parentElement // null
+```
+
+也就是说，如果父节点不是元素节点，则 `parentElement` 属性为 `null`。
+
+所以如果你想获取一个元素的父元素，最好使用 `parentElement`。
+
+## 提示
+
+通过检查父元素是否存在，我们可以从给定元素移动到 `html` 标签：
+
+```js
+while ((ele = ele.parentElement)) {
+  // ...
+}
+```
+
+下面的代码计算从给定元素到页面顶部的距离：
+
+```js
+const distanceToTop = (ele) => {
+  let x = 0
+  while ((ele = ele.parentElement)) {
+    x += ele.offsetTop
+  }
+  return x
+}
+```
diff --git "a/DOM/stopImmediatePropagation \344\270\216 stopPropagation.md" "b/DOM/stopImmediatePropagation \344\270\216 stopPropagation.md"
new file mode 100644
index 0000000..fe6ad9a
--- /dev/null
+++ "b/DOM/stopImmediatePropagation \344\270\216 stopPropagation.md"	
@@ -0,0 +1,26 @@
+# stopImmediatePropagation 与 stopPropagation
+
+`stopImmediatePropagation()` 方法可以防止事件像 `stopPropagation()` 方法一样冒泡到父元素。但是，它会阻止调用相同事件的其他监听器。
+
+假设我们将处理同一事件的不同侦听器附加到相同元素。当事件发生时，监听器的执行顺序与添加的顺序相同。
+
+如果在给定的监听器中调用 `stopImmediatePropagation()` 方法，则不会调用其余的监听器。
+
+在下面的示例代码中，有 3 个监听器处理由 `button` 表示的按钮的单击事件。
+
+```js
+button.addEventListener('click', function () {
+  console.log('foo')
+})
+
+button.addEventListener('click', function (e) {
+  console.log('bar')
+  e.stopImmediatePropagation()
+})
+
+button.addEventListener('click', function () {
+  console.log('baz')
+})
+```
+
+单击按钮将在控制台中打印 `foo` 和 `bar`。我们不会看到 `baz`，因为最后一个监听器没有被调用。
diff --git "a/DOM/\344\272\213\344\273\266\345\257\271\350\261\241\344\270\212\347\232\204 currentTarget \344\270\216 target \345\261\236\346\200\247.md" "b/DOM/\344\272\213\344\273\266\345\257\271\350\261\241\344\270\212\347\232\204 currentTarget \344\270\216 target \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..45d28af
--- /dev/null
+++ "b/DOM/\344\272\213\344\273\266\345\257\271\350\261\241\344\270\212\347\232\204 currentTarget \344\270\216 target \345\261\236\346\200\247.md"	
@@ -0,0 +1,73 @@
+# 事件对象上的 currentTarget 与 target 属性
+
+`currentTarget` 和 `target` 是监听特定事件时事件对象的属性，例如：
+
+```js
+document.addEventListener('click', (e) => {
+  console.log(e.currentTarget)
+  console.log(e.target)
+})
+```
+
+## 区别
+
+`currentTarget` 属性表示事件绑定到的当前元素。在上面的示例代码中，`e.currentTarget` 是 `document`。
+
+在 `click` 事件的情况下，`target` 是用户单击的元素。它可以是原始元素或其任何子元素，具体取决于用户单击的位置。
+
+## 用例
+
+下面是一个用例，演示了这两个属性的用法。
+
+假设我们在屏幕中央显示了一个模态框。模态框被放置在覆盖层内，覆盖层采用屏幕的全尺寸。
+
+结构非常简单，如下所示：
+
+```html
+<!-- 覆盖层 -->
+<div id="overlay">
+  <!-- 模态框内容 -->
+  <div id="modal">...</div>
+</div>
+```
+
+用户在单击覆盖层时关闭模态框是一种常见的体验。
+
+有两种方法可以做到这一点，但首先，我们需要获取模态框和覆盖层的元素：
+
+```js
+const overlay = document.getElementById('overlay')
+const modal = document.getElementById('modal')
+```
+
+**第一种方法**：当用户单击覆盖层时，我们关闭模态框：
+
+```js
+overlay.addEventListener('click', () => {
+  console.log('关闭模态框')
+})
+```
+
+**如果用户在模态框内单击会发生什么**？我们不希望事件冒泡到父元素（即覆盖层），因此调用 `stopPropagation` 方法：
+
+```js
+modal.addEventListener('click', (e) => {
+  e.stopPropagation()
+})
+```
+
+`stopPropagation()` 方法用于阻止捕获和冒泡阶段中当前事件在 DOM 中的进一步传播。示例中，我们阻止模态框的点击事件冒泡到父元素。
+
+> **Tips**：了解 [JavaScript 事件传播机制](https://github.com/lio-zero/blog/blob/main/DOM/JavaScript%20%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD%E6%9C%BA%E5%88%B6.md)可以帮助你更好的理解上面的做法。
+
+**第二种方法**：为了确保用户单击覆盖区域而不是模态内部，我们可以简单地检查 `currentTarget` 和 `target` 属性是否引用相同的元素：
+
+```js
+overlay.addEventListener('click', (e) => {
+  if (e.currentTarget === e.target) {
+    console.log('关闭模态框')
+  }
+})
+```
+
+第二种方法比第一种方法简单得多，并且不需要处理模态框的 `click` 事件。
diff --git "a/DOM/\344\273\216 DOM \344\270\255\347\247\273\351\231\244\344\270\200\344\270\252\345\205\203\347\264\240.md" "b/DOM/\344\273\216 DOM \344\270\255\347\247\273\351\231\244\344\270\200\344\270\252\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..aa91249
--- /dev/null
+++ "b/DOM/\344\273\216 DOM \344\270\255\347\247\273\351\231\244\344\270\200\344\270\252\345\205\203\347\264\240.md"	
@@ -0,0 +1,11 @@
+# 从 DOM 中移除一个元素
+
+- 使用 `Element.parentNode` 获得给定元素的父节点。
+- 使用 `Element.removeChild()` 从其父节点中删除给定元素。
+
+```js
+const removeElement = (el) => el.parentNode.removeChild(el)
+
+// 从 DOM 中移除 .ele
+removeElement(document.querySelector('.ele'))
+```
diff --git "a/DOM/\344\273\216 DOM \345\205\203\347\264\240\344\270\255\347\247\273\351\231\244\346\211\200\346\234\211\345\255\220\345\205\203\347\264\240.md" "b/DOM/\344\273\216 DOM \345\205\203\347\264\240\344\270\255\347\247\273\351\231\244\346\211\200\346\234\211\345\255\220\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..c912876
--- /dev/null
+++ "b/DOM/\344\273\216 DOM \345\205\203\347\264\240\344\270\255\347\247\273\351\231\244\346\211\200\346\234\211\345\255\220\345\205\203\347\264\240.md"	
@@ -0,0 +1,37 @@
+# 从 DOM 元素中移除所有子元素
+
+给定 DOM 中的一个项目列表，使用 `querySelector()` 获取它，如下所示：
+
+```js
+const parent = document.querySelector('.parent-element')
+```
+
+要删除其所有子元素，你有几个不同的解决方案。
+
+最快的解决方案是使用 DOM 元素的 `innerHTML` 或 `textContent` 属性来移除所有子元素：
+
+```js
+parent.innerHTML = ''
+```
+
+另一个解决方案是，创建一个循环，检查 `firstChild` 属性是否存在，然后使用 DOM 元素的 `removeChild()` 方法将其删除：
+
+```js
+while (parent.firstChild) {
+  parent.removeChild(parent.firstChild)
+}
+```
+
+当 `parent` 的所有子元素都被移除时，循环结束。
+
+还有一种方法是使用 `Node.remove()`，如果你的浏览器支持这个方法，可以直接调用：
+
+```js
+while (parent.firstElementChild) {
+  parent.firstElementChild.remove()
+}
+```
+
+## 更多资料
+
+[从 DOM 中移除一个元素](https://github.com/lio-zero/blog/blob/main/DOM/%E4%BB%8E%20DOM%20%E4%B8%AD%E7%A7%BB%E9%99%A4%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0.md)
diff --git "a/DOM/\344\273\216\347\273\231\345\256\232\346\226\207\346\234\254\344\270\255\345\216\273\351\231\244 HTML.md" "b/DOM/\344\273\216\347\273\231\345\256\232\346\226\207\346\234\254\344\270\255\345\216\273\351\231\244 HTML.md"
new file mode 100644
index 0000000..6039e5a
--- /dev/null
+++ "b/DOM/\344\273\216\347\273\231\345\256\232\346\226\207\346\234\254\344\270\255\345\216\273\351\231\244 HTML.md"	
@@ -0,0 +1,49 @@
+# 从给定文本中去除 HTML
+
+## 从伪元素获取文本内容（不推荐）
+
+```js
+const stripHTML = (html) => {
+  // 创建新元素
+  const ele = document.createElement('div')
+
+  // 设置它的 HTML
+  ele.innerHTML = html
+
+  // 只返回文本
+  return ele.textContent || ''
+}
+```
+
+不建议使用这种方法，因为如果 `html` 包含特殊的标记，例如 `<script>`，则可能会导致安全问题。但是，我们可以通过将 `div` 标签替换为 `textarea` 来防止执行 html：
+
+```js
+const stripHTML = function (html) {
+  const ele = document.createElement('textarea')
+  ele.innerHTML = html
+  return ele.textContent || ''
+}
+```
+
+## 使用 DOMParser
+
+[**`DOMParser`**](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser) 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM `Document`。
+
+```js
+const stripHTML = function (html) {
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+  return doc.body.textContent || ''
+}
+```
+
+## 使用 template
+
+`<template>` 标签包含一个不会立即渲染的 HTML 内容。但是，IE 11 等旧浏览器不支持这种功能。
+
+```js
+const stripHTML = (html) => {
+  const ele = document.createElement('template')
+  ele.innerHTML = html
+  return ele.content.textContent || ''
+}
+```
diff --git "a/DOM/\344\273\216\351\241\265\351\235\242\344\270\255\345\210\240\351\231\244\346\211\200\346\234\211 CSS.md" "b/DOM/\344\273\216\351\241\265\351\235\242\344\270\255\345\210\240\351\231\244\346\211\200\346\234\211 CSS.md"
new file mode 100644
index 0000000..6ca2514
--- /dev/null
+++ "b/DOM/\344\273\216\351\241\265\351\235\242\344\270\255\345\210\240\351\231\244\346\211\200\346\234\211 CSS.md"	
@@ -0,0 +1,13 @@
+# 从页面中删除所有 CSS
+
+我想看看没有 CSS 的页面是什么样子的。
+
+我们可以在 DevTools 的 Sources 面板看到 CSS 文件列表，将其删除即可。
+
+但有很多网站将 CSS 内嵌在 `style` 标签中。如果要将其删除，我们需要额外的 JS 操作，可以打开控制台并运行以下命令：
+
+```css
+document.querySelectorAll('style,link[rel="stylesheet"]').forEach(item => item.remove())
+```
+
+这将删除内联和链接的 CSS。
diff --git "a/DOM/\344\275\277\347\224\250 JavaScript \344\273\216\345\244\232\344\270\252\345\205\203\347\264\240\344\270\255\346\267\273\345\212\240\345\222\214\345\210\240\351\231\244 CSS \347\261\273.md" "b/DOM/\344\275\277\347\224\250 JavaScript \344\273\216\345\244\232\344\270\252\345\205\203\347\264\240\344\270\255\346\267\273\345\212\240\345\222\214\345\210\240\351\231\244 CSS \347\261\273.md"
new file mode 100644
index 0000000..15a5454
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 JavaScript \344\273\216\345\244\232\344\270\252\345\205\203\347\264\240\344\270\255\346\267\273\345\212\240\345\222\214\345\210\240\351\231\244 CSS \347\261\273.md"	
@@ -0,0 +1,121 @@
+# 使用 JavaScript 从多个元素中添加和删除 CSS 类
+
+假设我们有以下结构：
+
+```html
+<p class="color-purple">Hello</p>
+<p>there!</p>
+<p class="color-purple">How</p>
+<p>are</p>
+<p class="color-purple">you?</p>
+```
+
+样式如下：
+
+```css
+.color-plum {
+  color: plum;
+}
+
+.color-purple {
+  color: rebeccapurple;
+}
+```
+
+我们想要在多个元素上添加或删除某个类，下面我们来看看如何使用 JavaScript 从多个元素中添加和删除 CSS 类。
+
+## 获取所有元素
+
+想要获取所有的元素，可以使用 `document.querySelectorAll()` 方法。它可以传入任何有效的选择器，并返回一个 NodeList 匹配元素。
+
+```js
+let p = document.querySelectorAll('p')
+let purple = document.querySelectorAll('p.color-purple')
+```
+
+## 添加和删除类
+
+你可以使用 `Element.classList` API 从元素中添加和删除类。
+
+它提供了一些可用于添加、删除、切换和检查元素上的类的方法。我们可以使用 `add()` 方法添加类，以及 `remove()` 方法删除类。
+
+此方法仅适用于单个元素，而不适用于集合。
+
+```js
+let elem = document.querySelector('p.color-purple')
+
+elem.classList.add('color-blue')
+elem.classList.remove('color-purple')
+```
+
+如果要添加多个类，可以传入多个参数：
+
+```js
+elem.classList.add('color-blue', 'text-large')
+```
+
+## 循环遍历每个元素
+
+要从多个元素中添加和删除类，我们需要循环遍历从 `document.querySelectorAll()` 方法返回的 NodeList 中的每个类，并使用 `Element.classList` API。
+
+有很多方法可以做到这一点，但最简单的两种方法是 `NodeList.forEach()` 方法和 `for...of` 循环。
+
+- `for...of` 循环
+
+```js
+for (let elem of p) {
+  elem.classList.add('color-blue')
+}
+
+for (let elem of purple) {
+  elem.classList.remove('color-purple')
+}
+```
+
+- `NodeList.forEach()` 方法
+
+```js
+p.forEach((elem) => {
+  elem.classList.add('color-blue')
+})
+
+purple.forEach((elem) => {
+  elem.classList.remove('color-purple')
+})
+```
+
+`NodeList.forEach()` 方法也可以直接在 `document.querySelectorAll()` 方法返回的 NodeList 上调用，而无需将其保存到变量中。
+
+```js
+document.querySelectorAll('p').forEach((elem) => {
+  elem.classList.add('color-blue')
+})
+```
+
+这有时可能很有用。
+
+`classList` 对象还有 `toggle()` 方法来切换类，`contains()` 方法来检查元素是否包含某个类。这里就不详细展开。
+
+## 辅助函数
+
+创建一个辅助函数，帮助我们减少一些重复的操作：
+
+```js
+function addClass(elems, ...classes) {
+  // 添加 .color-blue 类
+  for (let elem of elems) {
+    elem.classList.add(...classes)
+  }
+}
+
+function removeClass(elems, ...classes) {
+  for (let elem of elems) {
+    elem.classList.remove(...classes)
+  }
+}
+```
+
+## 更多资料
+
+- [HTMLCollection 和 NodeList 的区别](https://github.com/lio-zero/blog/blob/master/DOM/HTMLCollection%20%E5%92%8C%20NodeList%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [切换 HTML 元素的类](https://github.com/lio-zero/blog/blob/master/DOM/%E5%88%87%E6%8D%A2%20HTML%20%E5%85%83%E7%B4%A0%E7%9A%84%E7%B1%BB.md)
diff --git "a/DOM/\344\275\277\347\224\250 JavaScript \345\260\206\346\226\207\346\234\254\345\222\214 HTML \346\263\250\345\205\245\345\205\203\347\264\240\347\232\204\345\233\233\347\247\215\344\270\215\345\220\214\346\226\271\346\263\225.md" "b/DOM/\344\275\277\347\224\250 JavaScript \345\260\206\346\226\207\346\234\254\345\222\214 HTML \346\263\250\345\205\245\345\205\203\347\264\240\347\232\204\345\233\233\347\247\215\344\270\215\345\220\214\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..8d04aea
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 JavaScript \345\260\206\346\226\207\346\234\254\345\222\214 HTML \346\263\250\345\205\245\345\205\203\347\264\240\347\232\204\345\233\233\347\247\215\344\270\215\345\220\214\346\226\271\346\263\225.md"	
@@ -0,0 +1,162 @@
+# 使用 JavaScript 将文本和 HTML 注入元素的四种不同方法
+
+本文将介绍四个用于**获取和设置 DOM 元素中的文本和 HTML**的属性。
+
+## `Element.innerHTML` 属性
+
+你可以使用 `Element.innerHTML` 属性来获取和设置元素内的 HTML 内容作为字符串。
+
+```html
+<div class="greeting">
+  <p>Hello world!</p>
+</div>
+```
+
+```js
+let greeting = document.querySelector('.greeting')
+
+// 获取 HTML 内容
+let html = greeting.innerHTML // "<p>Hello world!</p>"
+```
+
+设置 HTML 内容：
+
+```js
+// 这取代了已经存在的东西
+greeting.innerHTML =
+  '这是一段内容，并且还能包含标签，比如：<a href="#">这个链接</a>。'
+
+// 将 HTML 添加到元素现有内容的末尾
+greeting.innerHTML += ' 在已经存在的内容之后添加此内容。'
+
+// 将 HTML 添加到元素现有内容的开头
+greeting.innerHTML = '我们可以在开头加上这个。' + greeting.innerHTML
+
+// 也可以注入整个元素
+greeting.innerHTML += '<p>新段落</p>'
+```
+
+## `Element.outerHTML` 属性
+
+你可以使用 `Element.outerHTML` 属性来获取和设置包含元素的 HTML 内容。这与 `Element.innerHTML` 相同，但在获取和更新 HTML 内容时包括元素本身。
+
+```html
+<div class="greeting">
+  <p>Hello world!</p>
+</div>
+```
+
+```js
+let greeting = document.querySelector('.greeting')
+
+// 获取 HTML 内容
+let html = greeting.outerHTML // "<div class="greeting"><p>Hello world!</p></div>"
+```
+
+设置 HTML 内容：
+
+```js
+// 这将完全取代 <div class="greeting"></div> 元素及其所有内容
+greeting.outerHTML =
+  '<p class="outro">再见，朋友！<a href="exit.html">点击这里离开。</a>'
+
+// 在元素之后添加 HTML
+greeting.outerHTML += ' 在已经存在的内容之后添加此内容。'
+
+// 在元素之前添加 HTML
+greeting.outerHTML = '我们可以在开头加上这个。' + greeting.innerHTML
+```
+
+## `Node.textContent` 属性
+
+你可以使用 `Node.textContent` 属性来获取和设置元素的文本（并省略标记）作为字符串。
+
+在下面的示例中，你可能会注意到 `Node.textContent` 属性获取**所有**文本内容，包括元素内部的 CSS 属性 `style` 和 `hidden` UI 元素。
+
+使用该属性设置内容时，字符串中包含的任何 HTML 元素都会被 `Node.textContent` 自动编码并按原样渲染。
+
+```html
+<div class="greeting">
+  <style type="text/css">
+    p {
+      color: rebeccapurple;
+    }
+  </style>
+  <p hidden>这是不渲染的。</p>
+  <p>Hello world!</p>
+</div>
+```
+
+```js
+let greeting = document.querySelector('.greeting')
+
+// 获取文本内容
+let text = greeting.textContent // "p {color: rebeccapurple;} 这是不渲染的。Hello world!"
+```
+
+设置文本内容：
+
+```js
+// 这将完全替换所有的内容，包括任何 HTML 元素
+greeting.textContent = '我们可以动态更改内容。'
+
+// 将文本添加到元素现有内容的末尾
+greeting.textContent += ' 在已经存在的内容之后添加此内容。'
+
+// 将文本添加到元素现有内容的开头
+greeting.textContent = '我们可以在开头加上这个。' + greeting.textContent
+
+// HTML 元素按原样自动编码和渲染
+greeting.textContent = '<p>回头见！</p>'
+```
+
+## `Element.innerText` 属性
+
+`Element.innerText` 属性获取和设置元素的**渲染文本**（并省略标记）。
+
+与 `Node.textContent` 属性不同，`Element.innerText` 属性仅返回渲染文本，类似于用户在突出显示文本时可以使用光标或键盘选择的内容。
+
+就像 `Node.textContent`，设置内容时字符串中包含的任何 HTML 元素都会自动编码并按原样渲染。
+
+```html
+<div class="greeting">
+  <style type="text/css">
+    p {
+      color: rebeccapurple;
+    }
+  </style>
+  <p hidden>这是不渲染的。</p>
+  <p>Hello world!</p>
+</div>
+```
+
+```js
+let elem = document.querySelector('.greeting')
+
+// 获取文本内容
+let text = elem.innerText // "Hello world!"
+```
+
+设置文本内容：
+
+```js
+// 这将完全替换那里的内容，包括任何 HTML 元素
+elem.innerText = '我们可以动态更改内容。'
+
+// 将文本添加到元素现有内容的末尾
+elem.innerText += ' 在已经存在的内容之后添加此内容。'
+
+// 将文本添加到元素现有内容的开头
+elem.innerText = '我们可以在开头加上这个。' + elem.innerText
+
+// HTML 元素按原样自动编码和渲染
+elem.innerText = '<p>回头见！</p>'
+```
+
+## 如何选择？
+
+一般来说，如果你只是修改文本，那么使用 `Node.textContent` 属性是最好、最安全的选择。
+
+对于修改 HTML，`Element.innerHTML` 属性非常有用，但它确实存在一些问题，它会删除事件监听器，并且存在一些安全问题。
+
+> 推荐：[什么是 XSS 攻击？](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20XSS%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)
diff --git "a/DOM/\344\275\277\347\224\250 JavaScript \346\243\200\346\237\245\345\244\215\351\200\211\346\241\206\346\230\257\345\220\246\350\242\253\351\200\211\344\270\255.md" "b/DOM/\344\275\277\347\224\250 JavaScript \346\243\200\346\237\245\345\244\215\351\200\211\346\241\206\346\230\257\345\220\246\350\242\253\351\200\211\344\270\255.md"
new file mode 100644
index 0000000..b0e0ade
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 JavaScript \346\243\200\346\237\245\345\244\215\351\200\211\346\241\206\346\230\257\345\220\246\350\242\253\351\200\211\344\270\255.md"	
@@ -0,0 +1,42 @@
+# 使用 JavaScript 检查复选框是否被选中
+
+假设你有这个复选框：
+
+```html
+<input type="checkbox" class="checkbox" />
+```
+
+想要检查复选框是否被选中，可以检查元素的 `checked` 属性：
+
+```js
+document.querySelector('.checkbox').checked
+```
+
+你还可以检查查找 `.checkbox:checked` 是否不返回 `null`：
+
+```js
+document.querySelector('.checkbox:checked') !== null
+```
+
+但我认为 `.checked` 更简洁。
+
+通过 `addEventListener` 监听 `change` 事件来动态检查复选框是否被选中，可以跟踪 `checkbox` 的状态。
+
+```js
+document.querySelector('.checkbox').addEventListener('change', () => {
+  console.log(this.checked)
+})
+```
+
+不要使用 `getAttribute()` 查找 `checked` 属性值，因为如果复选框默认以这种方式被选中，那么它总是成立的：
+
+```html
+<input type="checkbox" checked />
+```
+
+也不要检查 `checkbox` 元素的 `value`。它始终处于启用状态，无论复选框是否选中。
+
+## 进一步阅读
+
+- [The “Checkbox Hack” (and things you can do with it)](https://css-tricks.com/the-checkbox-hack/)
+- 关于如何自定义复选框 — [Custom checkbox](https://www.30secondsofcode.org/css/s/custom-checkbox)
diff --git "a/DOM/\344\275\277\347\224\250 JavaScript \347\246\201\347\224\250\346\214\211\351\222\256.md" "b/DOM/\344\275\277\347\224\250 JavaScript \347\246\201\347\224\250\346\214\211\351\222\256.md"
new file mode 100644
index 0000000..55e5ed3
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 JavaScript \347\246\201\347\224\250\346\214\211\351\222\256.md"	
@@ -0,0 +1,31 @@
+# 使用 JavaScript 禁用按钮
+
+HTML 按钮是少数具有自己状态的元素之一，以及几乎所有的表单控件。
+
+一个常见的需求是使用 JavaScript 以编程方式禁用/启用按钮。
+
+例如，你只想在填充文本输入元素时启用按钮。
+
+或者当点击一个特定的复选框时，比如你看到的那些说**我阅读了条款和条件**，实际上没有人阅读的东西。
+
+这是如何做到的。
+
+选择元素：
+
+```js
+const button = document.querySelector('button')
+```
+
+如果有多个按钮，则可能需要使用 `document.querySelectorAll()` 并循环遍历结果。
+
+无论如何，一旦有了元素引用，就可以将其 `disabled` 属性设置为 `true` 以禁用它：
+
+```js
+button.disabled = true
+```
+
+要再次启用它，请将其设置为 `false` 以再次启用：
+
+```js
+button.disabled = false
+```
diff --git "a/DOM/\344\275\277\347\224\250 JavaScript \350\216\267\345\217\226\343\200\201\350\256\276\347\275\256\345\222\214\345\210\240\351\231\244\345\261\236\346\200\247.md" "b/DOM/\344\275\277\347\224\250 JavaScript \350\216\267\345\217\226\343\200\201\350\256\276\347\275\256\345\222\214\345\210\240\351\231\244\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..eaf0fe2
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 JavaScript \350\216\267\345\217\226\343\200\201\350\256\276\347\275\256\345\222\214\345\210\240\351\231\244\345\261\236\346\200\247.md"	
@@ -0,0 +1,98 @@
+# 使用 JavaScript 获取、设置和删除属性
+
+## `Element.*Attribute()` 方法
+
+你可以使用 `Element.getAttribute()`、`Element.setAttribute()`、`Element.removeAttribute()` 和 `Element.hasAttribute()` 方法分别获取、设置、删除和检查元素上是否存在属性（包括 `data-*` 的自定义属性）。
+
+```js
+let elem = document.querySelector('#lunch')
+
+// 获取 [data-message] 属性的值，如果元素上不存在属性，则返回 `null`
+let message = elem.getAttribute('data-message')
+
+// 设置 [data-message] 属性的值
+elem.setAttribute('data-message', 'Hello World!')
+
+// 移除 [data-id] 属性
+elem.removeAttribute('data-id')
+
+// 检查一个元素是否有 [data-name] 属性
+elem.hasAttribute('data-name') // true or false
+```
+
+> [获取、设置和删除 data-\* 属性](https://github.com/lio-zero/blog/blob/master/DOM/%E8%8E%B7%E5%8F%96%E3%80%81%E8%AE%BE%E7%BD%AE%E5%92%8C%E5%88%A0%E9%99%A4%20data-%20%E5%B1%9E%E6%80%A7.md)
+
+## 元素属性
+
+HTML 元素有许多可以直接访问的属性。
+
+其中一些是只读的，这意味着你可以获取它们的值，但不能设置它。其他的可用于读取和设置值。
+
+> 详细内容你可以在 [Mozilla 开发者网络上找到完整的列表](https://developer.mozilla.org/en-US/docs/Web/API/element)。
+
+```js
+let elem = document.querySelector('#main')
+
+// 获取元素的 ID
+let id = elem.id // "main"
+
+// 设置元素的 ID
+elem.id = 'details-overlay'
+
+// 获取元素的 parentNode
+// 该属性是只读的
+let parent = elem.parentNode
+```
+
+## Attributes 和 Properties 有什么区别？
+
+在 JavaScript 中，元素具有 `Attributes` 和 `Properties`。这些术语通常可以互换使用，但它们实际上是两个不同的东西。
+
+`Attributes` 是在 DOM 中渲染时的初始状态。而 `Properties` 是当前状态。
+
+在大多数情况下，它俩会自动保持同步。例如，当你使用 `Element.setAttribute()` 更新 ID 属性时，`id` 属性也会更新。
+
+```html
+<p>Hello</p>
+```
+
+```js
+let p = document.querySelector('p')
+
+// 更新 ID
+p.setAttribute('id', 'first-paragraph')
+
+// 它们都返回 "first-paragraph"
+let id1 = p.getAttribute('id')
+let id2 = p.id
+```
+
+但是，用户可更改的表单属性（尤其是 `value`、`checked`、`selected` 以及视频/音频的 `muted`）不会自动同步。
+
+```html
+<label for="greeting">Greeting</label>
+
+<input type="text" id="greeting" />
+```
+
+```js
+let greeting = document.querySelector('#greeting')
+
+// 更新值
+greeting.setAttribute('value', 'Hello World!')
+
+// 如果你没有对该字段进行任何更新，那么它们都将返回 Hello World!
+// 如果你已经更新了字段，val1 将返回任何在字段中输入的内容
+let val1 = greeting.value
+let val2 = greeting.getAttribute('value')
+```
+
+如果你尝试直接更新 `value` 属性，这会更新 UI。
+
+```js
+greeting.value = 'Hello World!'
+```
+
+这允许你根据是否要覆盖用户更新来选择不同的方法。
+
+如果你想更新一个字段，但只是在用户没有做任何更改的情况下，请使用 `Element.setAttribute()`。如果你想要覆盖他们所做的任何事情，请使用 `value` 属性。
diff --git "a/DOM/\344\275\277\347\224\250 JavaScript \350\216\267\345\217\226\345\222\214\350\256\276\347\275\256 CSS \345\261\236\346\200\247\347\232\204\344\270\211\347\247\215\346\226\271\346\263\225.md" "b/DOM/\344\275\277\347\224\250 JavaScript \350\216\267\345\217\226\345\222\214\350\256\276\347\275\256 CSS \345\261\236\346\200\247\347\232\204\344\270\211\347\247\215\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..b8a6e45
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 JavaScript \350\216\267\345\217\226\345\222\214\350\256\276\347\275\256 CSS \345\261\236\346\200\247\347\232\204\344\270\211\347\247\215\346\226\271\346\263\225.md"	
@@ -0,0 +1,80 @@
+# 使用 JavaScript 获取和设置 CSS 属性的三种方法
+
+JavaScript 使用驼峰式版本的属性与 CSS 中使用的属性一一对应。
+
+例如，CSS 中的 `background-image` 就是 JavaScript 中的 `backgroundImage`。CSS 中的 `font-weight` 属性在 JavaScript 中是 `fontWeight`。
+
+> 详细可查看 [Mozilla 提供了最常见的 CSS 属性的列表，以及它们在 DOM 表示法中的等效属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)。
+
+## `Element.style` 属性
+
+你可以使用 `Element.style` 属性获取和设置元素的内联样式。
+
+```html
+<p class="elem" style="background-color: plum; color: white;">Hello World!</p>
+```
+
+```js
+let elem = document.querySelector('.elem')
+
+// 如果这个样式没有直接在元素上设置为内联样式，它将返回一个空字符串
+let bgColor = elem.style.backgroundColor // 'plum'
+let fontWeight = elem.style.fontWeight // ''
+
+// 设置 background-color 样式属性
+elem.style.backgroundColor = 'purple'
+```
+
+你还可以使用 `Element.style.csstext` 属性在元素上获取和设置整个内联 `style` 属性的字符串表示。
+
+```js
+// 获取元素的样式
+let styles = sandwich.style.cssText // 'background-color: plum; color: white;'
+
+// 完全替换元素上的内联样式
+sandwich.style.cssText = 'font-size: 2em; font-weight: bold;'
+
+// 添加额外的样式
+sandwich.style.cssText += 'color: purple;'
+```
+
+## `window.getComputedStyle()` 方法
+
+`window.getComputedStyle()` 方法获取元素的实际计算样式。这会影响浏览器默认样式以及页面上使用的外部样式表。
+
+```js
+let elem = document.querySelector('.elem')
+let bgColor = window.getComputedStyle(elem).backgroundColor
+```
+
+这是只读的，不能用于实际修改元素的样式。
+
+## 向文档添加样式
+
+`Element.style` 属性对于向特定元素添加内联样式很有用。
+
+但是，如果你想为所有匹配特定选择器的元素添加样式怎么办？你可以遍历每个匹配元素并使用 `Element.style` 属性添加样式。
+
+```js
+let elems = document.querySelectorAll('.elem')
+
+for (let el of elems) {
+  el.style.backgroundColor = 'rebeccapurple'
+  el.style.color = 'white'
+}
+```
+
+或者，你可以通过创建一个 `style` 元素并将其附加到 DOM 中来直接向文档中添加 CSS。
+
+首先，使用 `document.createElement()` 方法创建一个 `style` 元素。然后，使用 `Element.textContent` 属性将你的 CSS 添加到其中。
+
+最后，你可以使用 `Element.append()` 方法将其注入到文档中。
+
+```js
+let style = document.createElement('style')
+style.textContent = `.elem {
+    background-color: rebeccapurple
+    color: white;
+  }`
+document.head.append(style)
+```
diff --git "a/DOM/\344\275\277\347\224\250 closest \345\222\214 matches \346\226\271\346\263\225\346\235\245\346\243\200\346\265\213\345\205\203\347\264\240\346\230\257\345\220\246\345\255\230\345\234\250\346\237\220\351\200\211\346\213\251\345\231\250.md" "b/DOM/\344\275\277\347\224\250 closest \345\222\214 matches \346\226\271\346\263\225\346\235\245\346\243\200\346\265\213\345\205\203\347\264\240\346\230\257\345\220\246\345\255\230\345\234\250\346\237\220\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000..f1c0fc4
--- /dev/null
+++ "b/DOM/\344\275\277\347\224\250 closest \345\222\214 matches \346\226\271\346\263\225\346\235\245\346\243\200\346\265\213\345\205\203\347\264\240\346\230\257\345\220\246\345\255\230\345\234\250\346\237\220\351\200\211\346\213\251\345\231\250.md"	
@@ -0,0 +1,31 @@
+# 使用 closest 和 matches 方法来检测元素是否存在某选择器
+
+我们可以使用 `closest` 和 `matches` 方法来检测元素是否存在某选择器。
+
+- [`closest()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) 方法遍历元素及其父元素（指向根文档 — `document`），如果当前元素与给定选择器匹配，则返回当前元素，否则返回与给定选择器匹配的最近祖先元素，如果都没有则返回 `null`。
+- [`matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) 方法检查 DOM 元素是否与给定的选择器匹配。
+
+假设我们有以下 HTML 结构：
+
+```html
+<article class="post cat-5">
+  <header>
+    <h2>Title</h2>
+  </header>
+  <div class="post-content">
+    <p class="summary">summary</p>
+  </div>
+</article>
+```
+
+这两个方法配合可以匹配同一层次结构下是否存在某一元素：
+
+```js
+const summary = document.querySelector('.summary')
+const post = summary.closest('.post')
+
+post.matches('article') // true
+post.matches('.post') // true
+post.matches('.post.cat-5') // true
+post.matches('div.post') // false
+```
diff --git "a/DOM/\344\275\277\351\241\265\351\235\242\345\234\250\346\265\217\350\247\210\345\231\250\344\270\255\345\217\257\347\274\226\350\276\221.md" "b/DOM/\344\275\277\351\241\265\351\235\242\345\234\250\346\265\217\350\247\210\345\231\250\344\270\255\345\217\257\347\274\226\350\276\221.md"
new file mode 100644
index 0000000..cc25e68
--- /dev/null
+++ "b/DOM/\344\275\277\351\241\265\351\235\242\345\234\250\346\265\217\350\247\210\345\231\250\344\270\255\345\217\257\347\274\226\350\276\221.md"
@@ -0,0 +1,29 @@
+# 使页面在浏览器中可编辑
+
+当你将页面设置为设计模式时，你可以直接在浏览器页面内编辑页面内容，这对于测试一些原型或检查新标题的外观非常方便。
+
+**你如何启用它？**打开 DevTools 控制台，然后输入：
+
+```js
+document.designMode = 'on'
+```
+
+要关闭设计模式，只需要刷新页面或键入：
+
+```js
+document.designMode = 'off'
+```
+
+你可以编辑、删除文本，还可以拖动图像来重新定位它们。
+
+另一种方式是，通过在 `body` 元素上添加 `contentEditable` 属性可以触发相同的结果。也可以通过 JS 动态设置，如下所示：
+
+```js
+document.body.contentEditable = true
+// 关闭内容可编辑状态
+document.body.contentEditable = false
+```
+
+几乎所有浏览器都支持此功能，包括 IE。
+
+由于它对任何内容都可以编辑，所以有必要对一些用户输入进行校验，避免带来一些安全隐患。
diff --git "a/DOM/\345\210\207\346\215\242 HTML \345\205\203\347\264\240\347\232\204\347\261\273.md" "b/DOM/\345\210\207\346\215\242 HTML \345\205\203\347\264\240\347\232\204\347\261\273.md"
new file mode 100644
index 0000000..3c8ff6d
--- /dev/null
+++ "b/DOM/\345\210\207\346\215\242 HTML \345\205\203\347\264\240\347\232\204\347\261\273.md"	
@@ -0,0 +1,9 @@
+# 切换 HTML 元素的类
+
+使用 `Element.classList` 和 `DOMTokenList.toggle()` 切换元素的指定类。
+
+```js
+const toggleClass = (el, className) => el.classList.toggle(className)
+
+toggleClass(document.querySelector('p.hdfp'), 'hdfp')
+```
diff --git "a/DOM/\345\210\207\346\215\242\347\261\273.md" "b/DOM/\345\210\207\346\215\242\347\261\273.md"
new file mode 100644
index 0000000..6ff2958
--- /dev/null
+++ "b/DOM/\345\210\207\346\215\242\347\261\273.md"
@@ -0,0 +1,7 @@
+# 切换类
+
+一行代码，轻松在任何元素上切换类：
+
+```html
+<div onclick="this.classList.toggle('active')"></div>
+```
diff --git "a/DOM/\345\210\233\345\273\272\344\270\200\346\254\241\346\200\247\344\272\213\344\273\266\345\244\204\347\220\206\347\250\213\345\272\217.md" "b/DOM/\345\210\233\345\273\272\344\270\200\346\254\241\346\200\247\344\272\213\344\273\266\345\244\204\347\220\206\347\250\213\345\272\217.md"
new file mode 100644
index 0000000..d0973fa
--- /dev/null
+++ "b/DOM/\345\210\233\345\273\272\344\270\200\346\254\241\346\200\247\344\272\213\344\273\266\345\244\204\347\220\206\347\250\213\345\272\217.md"
@@ -0,0 +1,26 @@
+# 创建一次性事件处理程序
+
+将处理程序附加到给定事件时，你可以传递 `{ once: true }` 给 `addEventListener` 方法的最后一个参数：
+
+```js
+const handler = function (e) {
+  // ...
+}
+
+ele.addEventListener('event-name', handler, { once: true })
+```
+
+请注意，IE 不支持此选项。
+
+## 自行移除处理程序
+
+```js
+const handler = function (e) {
+  // ...
+
+  // 移除处理程序
+  e.target.removeEventListener(e.type, handler)
+}
+
+ele.addEventListener('event-name', handler)
+```
diff --git "a/DOM/\345\210\233\345\273\272\345\205\203\347\264\240.md" "b/DOM/\345\210\233\345\273\272\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..bc6ba46
--- /dev/null
+++ "b/DOM/\345\210\233\345\273\272\345\205\203\347\264\240.md"
@@ -0,0 +1,23 @@
+# 创建元素
+
+从字符串创建元素（不将其附加到文档）。如果给定的字符串包含多个元素，则只返回第一个元素。
+
+- 使用 `Document.createElement()` 创建一个新的元素。
+- 使用 `Element.innerHTML`，将它的内部 HTML 设置为以参数提供的字符串。
+- 使用 `ParentNode.firstElementChild` 返回字符串的元素版本。
+
+```js
+const createElement = (str) => {
+  const el = document.createElement('div')
+  el.innerHTML = str
+  return el.firstElementChild
+}
+
+const el = createElement(
+  `<div class="container">
+    <p>Hello!</p>
+  </div>`
+)
+
+console.log(el.className) // 'container'
+```
diff --git "a/DOM/\345\210\233\345\273\272\350\207\252\345\267\261\347\232\204\346\237\245\350\257\242\351\200\211\346\213\251\345\231\250\347\256\200\345\206\231.md" "b/DOM/\345\210\233\345\273\272\350\207\252\345\267\261\347\232\204\346\237\245\350\257\242\351\200\211\346\213\251\345\231\250\347\256\200\345\206\231.md"
new file mode 100644
index 0000000..0d079c6
--- /dev/null
+++ "b/DOM/\345\210\233\345\273\272\350\207\252\345\267\261\347\232\204\346\237\245\350\257\242\351\200\211\346\213\251\345\231\250\347\256\200\345\206\231.md"
@@ -0,0 +1,15 @@
+# 创建自己的查询选择器简写
+
+我们大多数人都熟悉 JQuery，可能相当多的人都熟悉 Chrome 控制台的查询选择器的缩写 `$` 和 `$$`。我最近找到了一种方法在我的代码中复制这些简写，`Document.querySelector()`、`Document.querySelectorAll()` 和 `Function.prototype.bind()`。
+
+以下是如何做到这一点，只要确保在仍在使用 jQuery 时不要将它们与 jQuery 混淆：
+
+```js
+const $ = document.querySelector.bind(document)
+const $$ = document.querySelectorAll.bind(document)
+
+const mainContent = $('.main-content')
+const externalLinks = $$('a[target="_blank"]')
+```
+
+以上片段来自 [Tip: Create your own query selector shorthand](https://www.30secondsofcode.org/articles/s/javascript-query-selector-shorthand)
diff --git "a/DOM/\345\210\244\346\226\255\351\241\265\351\235\242\346\230\257\345\220\246\345\212\240\350\275\275\345\256\214\346\210\220.md" "b/DOM/\345\210\244\346\226\255\351\241\265\351\235\242\346\230\257\345\220\246\345\212\240\350\275\275\345\256\214\346\210\220.md"
new file mode 100644
index 0000000..c31bd23
--- /dev/null
+++ "b/DOM/\345\210\244\346\226\255\351\241\265\351\235\242\346\230\257\345\220\246\345\212\240\350\275\275\345\256\214\346\210\220.md"
@@ -0,0 +1,27 @@
+# 判断页面是否加载完成
+
+要判断页面是否加载完成，可以监听 `load` 事件。
+
+在 `window` 对象上监听 `load` 事件是一种常用的方法。它会在页面（包括文档、图片和其他资源）加载完成后触发。
+
+```js
+window.addEventListener('load', () => {})
+```
+
+也可以使用 `DOMContentLoaded` 事件：
+
+```js
+document.addEventListener('DOMContentLoaded', () => {})
+```
+
+需要注意:
+
+- `load` 事件触发代表所有资源已经加载完成，可能图片和其他资源会导致页面加载缓慢。
+- `DOMContentLoaded` 事件触发代表初始的页面结构已经被解析完成并构建，不需要等待页面中的图片和其他资源完成加载。
+
+> **注意**：CSS 加载不会阻塞 DOM 树的解析，但会阻塞 DOM 树的渲染和后面 JS 的执行，JS 会阻塞 DOM 解析。
+
+## 更多资料
+
+- [页面生命周期：DOMContentLoaded，load，beforeunload，unload](https://zh.javascript.info/onload-ondomcontentloaded)
+- [CSS 会阻塞 DOM 解析吗？](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/510)
diff --git "a/DOM/\345\214\271\351\205\215\345\205\203\347\264\240.md" "b/DOM/\345\214\271\351\205\215\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..bfc7857
--- /dev/null
+++ "b/DOM/\345\214\271\351\205\215\345\205\203\347\264\240.md"
@@ -0,0 +1,22 @@
+# 匹配元素
+
+查找元素的所有祖先，直到元素与指定的选择器匹配为止。
+
+- 使用 `Node.parentNode` 和 `while` 循环向上移动元素的祖先树。
+- 使用 `Array.prototype.unshift()` 将每个新祖先添加到数组的开头。
+- 使用 `Element.matches()` 检查当前元素是否与指定的选择器匹配。
+
+```js
+const getParentsUntil = (el, selector) => {
+  let parents = [],
+    _el = el.parentNode
+  while (_el && typeof _el.matches === 'function') {
+    parents.unshift(_el)
+    if (_el.matches(selector)) return parents
+    else _el = _el.parentNode
+  }
+  return []
+}
+
+getParentsUntil(document.querySelector('#home-link'), 'header') // [header, nav, ul, li]
+```
diff --git "a/DOM/\345\214\272\345\210\206\351\274\240\346\240\207\345\267\246\351\224\256\345\222\214\345\217\263\351\224\256\345\215\225\345\207\273.md" "b/DOM/\345\214\272\345\210\206\351\274\240\346\240\207\345\267\246\351\224\256\345\222\214\345\217\263\351\224\256\345\215\225\345\207\273.md"
new file mode 100644
index 0000000..7abd8bf
--- /dev/null
+++ "b/DOM/\345\214\272\345\210\206\351\274\240\346\240\207\345\267\246\351\224\256\345\222\214\345\217\263\351\224\256\345\215\225\345\207\273.md"
@@ -0,0 +1,19 @@
+# 区分鼠标左键和右键单击
+
+可以通过 `mousedown` 和 `mouseup` 事件处理程序来检测鼠标单击事件，并在其中区分左键和右键的单击。
+
+```js
+document.addEventListener('mousedown', (e) => {
+  // e.button === 0 or e.buttons === 1 => 鼠标左键被按下
+  // e.button === 1 or e.buttons === 4 => 鼠标中键被按下
+  // e.button === 2 or e.buttons === 2 => 鼠标右键被按下
+  // e.button === 3 or e.buttons === 8 => 浏览器的返回键被按下
+  // e.button === 4 or e.buttons === 16 => 浏览器前进键被按下
+})
+```
+
+需要注意：
+
+- 在某些浏览器中，`e.button` 属性可能被废弃，并且可能存在兼容性问题。因此建议使用 `e.buttons` 属性来确定鼠标按键单击事件。
+- 关于浏览器兼容性问题，`event.button` 在 IE 中返回的是键盘按键 ASCLL 码，且需要使用 `mousedown` 事件。
+- 在部分现代浏览器中，在触摸设备上双击事件会被触发为两个单击事件，这些事件是不能区分左键和右键的。
diff --git "a/DOM/\345\234\250\346\214\207\345\256\232\345\205\203\347\264\240\347\232\204\345\274\200\345\244\264\344\271\213\345\211\215\346\210\226\346\234\253\345\260\276\344\271\213\345\220\216\346\217\222\345\205\245 HTML \345\255\227\347\254\246\344\270\262.md" "b/DOM/\345\234\250\346\214\207\345\256\232\345\205\203\347\264\240\347\232\204\345\274\200\345\244\264\344\271\213\345\211\215\346\210\226\346\234\253\345\260\276\344\271\213\345\220\216\346\217\222\345\205\245 HTML \345\255\227\347\254\246\344\270\262.md"
new file mode 100644
index 0000000..de3d33b
--- /dev/null
+++ "b/DOM/\345\234\250\346\214\207\345\256\232\345\205\203\347\264\240\347\232\204\345\274\200\345\244\264\344\271\213\345\211\215\346\210\226\346\234\253\345\260\276\344\271\213\345\220\216\346\217\222\345\205\245 HTML \345\255\227\347\254\246\344\270\262.md"	
@@ -0,0 +1,23 @@
+# 在指定元素的开头之前或末尾插入 HTML 字符串
+
+使用位置为 `beforebeagin` 的 `Element.insertAdjacentHTML()` 解析 `htmlString` 并将其插入 `el` 开始之前。
+
+```js
+const insertBefore = (el, htmlString) =>
+  el.insertAdjacentHTML('beforebegin', htmlString)
+
+insertBefore(document.querySelector('#myId'), '<p>before</p>')
+// <p>before</p> <div id="myId">...</div>
+```
+
+使用位置为 `afterend` 的 `Element.insertAdjacentHTML()` 解析 `htmlString` 并将其插入 `el` 末尾之后。
+
+```js
+const insertAfter = (el, htmlString) =>
+  el.insertAdjacentHTML('afterend', htmlString)
+
+insertAfter(document.getElementById('myId'), '<p>after</p>')
+// <div id="myId">...</div> <p>after</p>
+```
+
+<!-- https://flaviocopes.com/insertadjacenthtml/ -->
diff --git "a/DOM/\345\234\250\346\214\207\345\256\232\347\232\204 DOM \345\205\203\347\264\240\344\270\255\346\270\262\346\237\223\347\273\231\345\256\232\347\232\204 DOM \346\240\221.md" "b/DOM/\345\234\250\346\214\207\345\256\232\347\232\204 DOM \345\205\203\347\264\240\344\270\255\346\270\262\346\237\223\347\273\231\345\256\232\347\232\204 DOM \346\240\221.md"
new file mode 100644
index 0000000..0e293be
--- /dev/null
+++ "b/DOM/\345\234\250\346\214\207\345\256\232\347\232\204 DOM \345\205\203\347\264\240\344\270\255\346\270\262\346\237\223\347\273\231\345\256\232\347\232\204 DOM \346\240\221.md"	
@@ -0,0 +1,43 @@
+# 在指定的 DOM 元素中渲染给定的 DOM 树
+
+- 将第一个参数分解为 `type` 和 `props`。使用 `type` 确定给定元素是否为文本元素。
+- 根据元素的 `type`，使用 `Document.createTextNode()` 或 `Document.createElement()` 创建 DOM 元素。
+- 根据需要，使用 `Object.keys()` 向 DOM 元素添加属性并设置事件监听器。
+- 使用递归渲染 `props.children`（如果有）。
+- 最后，使用 `Node.appendChild()` 将 DOM 元素附加到指定的容器中。
+
+```js
+const renderElement = ({ type, props = {} }, container) => {
+  const isTextElement = !type
+  const element = isTextElement
+    ? document.createTextNode('')
+    : document.createElement(type)
+
+  const isListener = (p) => p.startsWith('on')
+  const isAttribute = (p) => !isListener(p) && p !== 'children'
+
+  Object.keys(props).forEach((p) => {
+    if (isAttribute(p)) element[p] = props[p]
+    if (!isTextElement && isListener(p))
+      element.addEventListener(p.toLowerCase().slice(2), props[p])
+  })
+
+  if (!isTextElement && props.children && props.children.length)
+    props.children.forEach((childElement) =>
+      renderElement(childElement, element)
+    )
+
+  container.appendChild(element)
+}
+const myElement = {
+  type: 'button',
+  props: {
+    type: 'button',
+    className: 'btn',
+    onClick: () => alert('Clicked'),
+    children: [{ props: { nodeValue: 'Click me' } }]
+  }
+}
+
+renderElement(myElement, document.body)
+```
diff --git "a/DOM/\345\256\236\347\216\260\351\241\265\351\235\242\346\226\207\346\234\254\345\206\205\345\256\271\344\270\215\345\217\257\351\200\211\344\270\255 \342\200\224 \344\270\215\345\217\257\345\244\215\345\210\266.md" "b/DOM/\345\256\236\347\216\260\351\241\265\351\235\242\346\226\207\346\234\254\345\206\205\345\256\271\344\270\215\345\217\257\351\200\211\344\270\255 \342\200\224 \344\270\215\345\217\257\345\244\215\345\210\266.md"
new file mode 100644
index 0000000..f7d7ede
--- /dev/null
+++ "b/DOM/\345\256\236\347\216\260\351\241\265\351\235\242\346\226\207\346\234\254\345\206\205\345\256\271\344\270\215\345\217\257\351\200\211\344\270\255 \342\200\224 \344\270\215\345\217\257\345\244\215\345\210\266.md"	
@@ -0,0 +1,30 @@
+# 实现页面文本内容不可选中 — 不可复制
+
+## CSS
+
+使用 `user-select: none` 不可选中，也就不可以复制。
+
+```css
+body {
+  user-select: none;
+}
+```
+
+## 使用 JS
+
+- 监听 `selectstart` 事件，禁止选中。
+- 监听 `copy` 事件，不可复制。
+
+当用户选中一片区域时（包括点击），将触发 `selectstart` 事件，Selection API 将会选中一片区域。禁止选中区域（使用 `preventDefault` 阻止事件的默认行为）即可实现页面文本不可复制。
+
+```js
+// 不可选中
+document.documentElement.onselectstart = (e) => {
+  e.preventDefault()
+}
+
+// 不可复制
+document.documentElement.oncopy = (e) => {
+  e.preventDefault()
+}
+```
diff --git "a/DOM/\345\260\206\345\205\211\346\240\207\347\247\273\345\212\250\345\210\260\350\276\223\345\205\245\346\241\206\347\232\204\346\234\253\345\260\276.md" "b/DOM/\345\260\206\345\205\211\346\240\207\347\247\273\345\212\250\345\210\260\350\276\223\345\205\245\346\241\206\347\232\204\346\234\253\345\260\276.md"
new file mode 100644
index 0000000..f13d5c9
--- /dev/null
+++ "b/DOM/\345\260\206\345\205\211\346\240\207\347\247\273\345\212\250\345\210\260\350\276\223\345\205\245\346\241\206\347\232\204\346\234\253\345\260\276.md"
@@ -0,0 +1,25 @@
+# 将光标移动到输入框的末尾
+
+假设我们有一个表示用户全名的文本字段。还有一个编辑按钮用于更新 `fullName`。
+
+```html
+<input type="text" id="fullName" />
+
+<button id="edit">编辑</button>
+```
+
+有一个常见的需求，即单击编辑按钮将焦点放在文本字段上，并将光标移动到文本字段的末尾：
+
+```js
+const fullNameEle = document.getElementById('fullName')
+const editEle = document.getElementById('edit')
+
+editEle.addEventListener('click', function (e) {
+  // 聚焦 fullName 元素
+  fullNameEle.focus()
+
+  // 将光标移动到最后
+  const length = fullNameEle.value.length
+  fullNameEle.setSelectionRange(length, length)
+})
+```
diff --git "a/DOM/\345\260\206\347\273\231\345\256\232\347\232\204 CSS \344\273\243\347\240\201\346\263\250\345\205\245\345\275\223\345\211\215\346\226\207\346\241\243.md" "b/DOM/\345\260\206\347\273\231\345\256\232\347\232\204 CSS \344\273\243\347\240\201\346\263\250\345\205\245\345\275\223\345\211\215\346\226\207\346\241\243.md"
new file mode 100644
index 0000000..6d734c1
--- /dev/null
+++ "b/DOM/\345\260\206\347\273\231\345\256\232\347\232\204 CSS \344\273\243\347\240\201\346\263\250\345\205\245\345\275\223\345\211\215\346\226\207\346\241\243.md"	
@@ -0,0 +1,18 @@
+# 将给定的 CSS 代码注入当前文档
+
+- 使用 `Document.createElement()` 创建一个新的 `style` 元素，并将其类型设置为 `text/css`。
+- 使用 `Element.innerText` 将值设置为给定的 CSS 字符串。
+- 使用 `Document.head` 和 `Element.appendChild()` 将新元素附加到文档头部。
+- 返回新创建的 `style` 元素。
+
+```js
+const injectCSS = (css) => {
+  let el = document.createElement('style')
+  el.type = 'text/css'
+  el.innerText = css
+  document.head.appendChild(el)
+  return el
+}
+injectCSS('body { background-color: #000 }')
+// '<style type="text/css">body { background-color: #000 }</style>'
+```
diff --git "a/DOM/\346\211\223\345\274\200\346\250\241\346\200\201\346\227\266\351\230\262\346\255\242\350\272\253\344\275\223\346\273\232\345\212\250.md" "b/DOM/\346\211\223\345\274\200\346\250\241\346\200\201\346\227\266\351\230\262\346\255\242\350\272\253\344\275\223\346\273\232\345\212\250.md"
new file mode 100644
index 0000000..43c8ae1
--- /dev/null
+++ "b/DOM/\346\211\223\345\274\200\346\250\241\346\200\201\346\227\266\351\230\262\346\255\242\350\272\253\344\275\223\346\273\232\345\212\250.md"
@@ -0,0 +1,13 @@
+# 打开模态时防止身体滚动
+
+打开模态时禁止在 `body` 元素上滚动
+
+```js
+document.body.style.overflow = 'hidden'
+```
+
+关闭模态时允许滚动
+
+```js
+document.body.style.removeProperty('overflow')
+```
diff --git "a/DOM/\346\230\276\347\244\272\346\214\207\345\256\232\347\232\204\346\211\200\346\234\211\345\205\203\347\264\240.md" "b/DOM/\346\230\276\347\244\272\346\214\207\345\256\232\347\232\204\346\211\200\346\234\211\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..ba8a86d
--- /dev/null
+++ "b/DOM/\346\230\276\347\244\272\346\214\207\345\256\232\347\232\204\346\211\200\346\234\211\345\205\203\347\264\240.md"
@@ -0,0 +1,10 @@
+# 显示指定的所有元素
+
+使用扩展运算符（`...`）和 `Array.prototype.forEach()` 移除每个指定元素的 `display` 属性。
+
+```js
+const show = (...el) => [...el].forEach((e) => (e.style.display = ''))
+
+// 显示页面上的所有 <img> 元素
+show(...document.querySelectorAll('img'))
+```
diff --git "a/DOM/\346\234\200\345\260\217\345\214\226 DOM \350\256\277\351\227\256.md" "b/DOM/\346\234\200\345\260\217\345\214\226 DOM \350\256\277\351\227\256.md"
new file mode 100644
index 0000000..572faf9
--- /dev/null
+++ "b/DOM/\346\234\200\345\260\217\345\214\226 DOM \350\256\277\351\227\256.md"	
@@ -0,0 +1,27 @@
+# 最小化 DOM 访问
+
+DOM 操作，包括访问 DOM，通常速度较慢。这通常不是问题，除非你必须执行许多 DOM 操作，并且 JavaScript 应用程序的性能开始受到影响。提高性能的一个非常快速的技巧是，如果你计划多次访问 DOM 元素或其值，则将其存储在局部变量中。
+
+```js
+// 这很慢，它会多次访问 DOM 元素
+document.querySelector('.ele').classList.add('my-class')
+document.querySelector('.ele').textContent = 'hello'
+document.querySelector('.ele').hidden = false
+
+// 这会更快，因为它将 DOM 元素存储在一个变量中
+const myElement = document.querySelector('.ele')
+myElement.classList.add('my-class')
+myElement.textContent = 'hello'
+myElement.hidden = false
+```
+
+**注意**，虽然这个技巧可能会派上用场，但它附带了一条警告：如果以后删除 DOM 元素，并且仍然将其存储在变量中，则应将该变量设置为 `null`，以避免潜在的内存泄漏。
+
+## 对 DOM 操作的一些建议
+
+- 尽量减少对 DOM 的查询。使用变量缓存 DOM 元素可以减少对 DOM 的重复查询。例如，如果你需要在多个地方访问同一个元素，可以将其存储在变量中，而不是每次都重新查询。
+- 使用事件委托可以减少对 DOM 的访问。事件委托是将事件监听器添加到父元素上，而不是每个子元素上。这样可以减少对 DOM 的查询和事件监听器的数量。
+- 尽量减少对 DOM 的修改。修改 DOM 会导致浏览器重新渲染页面，这可能会影响性能。如果可能的话，应该尽量减少对 DOM 的修改次数，并在一次性修改多个元素。
+- 使用 `requestAnimationFrame` 函数来优化动画性能。这个函数会在下一次浏览器重绘时调用回调函数，这样可以在动画运行时减少对 DOM 的访问。
+
+最小化 DOM 访问可以提高网页性能，帮助网页更快地加载和更流畅地运行。
diff --git "a/DOM/\346\237\245\346\211\276\345\205\203\347\264\240\346\234\200\350\277\221\347\232\204\347\233\270\345\257\271\344\275\215\347\275\256\347\245\226\345\205\210.md" "b/DOM/\346\237\245\346\211\276\345\205\203\347\264\240\346\234\200\350\277\221\347\232\204\347\233\270\345\257\271\344\275\215\347\275\256\347\245\226\345\205\210.md"
new file mode 100644
index 0000000..21ae533
--- /dev/null
+++ "b/DOM/\346\237\245\346\211\276\345\205\203\347\264\240\346\234\200\350\277\221\347\232\204\347\233\270\345\257\271\344\275\215\347\275\256\347\245\226\345\205\210.md"
@@ -0,0 +1,63 @@
+# 查找元素最近的相对位置祖先
+
+你是否曾经遇到过 CSS 定位困境，即带有 `position: absolute` 的元素没有按预期进行定位？
+
+我们知道，在元素上设置绝对位置将使其相对于最近的祖先进行定位，最近的祖先将其 `position` 设置为 `static`（默认值）以外的值。
+
+![两个示例显示了当父元素具有相对位置时紫色元素的位置与另一个祖先具有相对位置时紫色元素的位置](https://upload-images.jianshu.io/upload_images/18281896-615f45adbdf7c2f4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+在上图中，绝对定位元素在两个示例中都使用相同的 CSS 定位：
+
+```css
+.absolute {
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+```
+
+但在每个例子中，结果都不一样。这是因为在第一个示例中，它的父元素（粉色元素）具有 `position: relative`，而在第二个示例中，它是另一个具有相对位置的祖先（灰色元素）。
+
+> 值得注意的是，如果没有定位祖先，那么带有 `position: absolute` 的元素将相对于 `<body>` 放置。
+
+在这样一个相对简单的示例中，快速检查 CSS 可以很容易地确定哪个祖先具有相对位置，如果样式没有达到预期效果，我们可以相应地调整样式。但有时，在更复杂的代码库中（尤其是在有大量嵌套元素的情况下），查找元素的哪个祖先具有相对定位可能会有点困难。
+
+在构建复杂的全宽下拉子菜单的标题时，这种情况最常见：我通常需要将它们相对于整个标题进行定位，但在某个地方我无意中在其他元素上设置了 `position: relative`，这会破坏所需的行为。
+
+浏览所有代码很费时间，有一种简单的方法可以在 JavaScript 中找到最近的父级 —— 我们可以在浏览器控制台中正确地找到。
+
+在 Chrome 和 Firefox 中，如果我们打开开发工具中的 **Console** 选项卡，我们可以通过键入 `$0` 来获取当前选中的元素。然后，我们可以使用 `offsetParent` 对象属性来查找 `position` 设置为 `static` 以外的元素的最近祖先。
+
+尝试选择一个元素（`Ctrl + Shift + C`），并将以下内容键入控制台：
+
+```js
+$0.offsetParent
+```
+
+它将返回我们选中的元素。
+
+接下来，我们可以使用 `getComputedStyle` 来找出元素的 `position` 属性的值：
+
+```js
+getComputedStyle($0.offsetParent).position
+```
+
+还有一种更加快速的方法，我们还可以使用 `$_` 对上次执行的结果进行引用：
+
+```js
+$0.offsetParent // <div class="trans-right">...</div>
+$_ //<div class="trans-right">...</div>
+getComputedStyle($0.offsetParent).position // "relative"
+$_ // relative
+```
+
+通过在控制台中键入 `$_` 我们可以将最近计算的表达式作为变量进行检索，这也可以加快检索速度：
+
+```js
+$0.offsetParent // <div class="trans-right">...</div>
+getComputedStyle($_).position // "relative"
+```
+
+上面代码将检索其 `position` 值。
+
+> **注意**：使用 [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) 时，如果元素的 `position` 设置为 `fixed` 或其本身或其父元素的 `display: none` 将返回 `null`。
diff --git "a/DOM/\346\243\200\346\237\245\345\205\203\347\264\240\346\230\257\345\220\246\345\217\257\346\273\232\345\212\250.md" "b/DOM/\346\243\200\346\237\245\345\205\203\347\264\240\346\230\257\345\220\246\345\217\257\346\273\232\345\212\250.md"
new file mode 100644
index 0000000..c23c2b2
--- /dev/null
+++ "b/DOM/\346\243\200\346\237\245\345\205\203\347\264\240\346\230\257\345\220\246\345\217\257\346\273\232\345\212\250.md"
@@ -0,0 +1,17 @@
+# 检查元素是否可滚动
+
+如果 `ele` 元素可滚动，则以下函数返回 `true`。
+
+```js
+const isScrollable = (ele) => {
+  // 比较高度以查看元素是否具有可滚动内容
+  const hasScrollableContent = ele.scrollHeight > ele.clientHeight
+
+  // 考虑元素的 overflow-y 样式是否设置为 hidden 或 hidden !important
+  // 在这些情况下，不会显示滚动条。
+  const overflowYStyle = window.getComputedStyle(ele).overflowY
+  const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1
+
+  return hasScrollableContent && !isOverflowHidden
+}
+```
diff --git "a/DOM/\346\243\200\346\237\245\345\205\203\347\264\240\346\230\257\345\220\246\345\234\250\350\247\206\345\217\243\344\270\255.md" "b/DOM/\346\243\200\346\237\245\345\205\203\347\264\240\346\230\257\345\220\246\345\234\250\350\247\206\345\217\243\344\270\255.md"
new file mode 100644
index 0000000..1bbfa7e
--- /dev/null
+++ "b/DOM/\346\243\200\346\237\245\345\205\203\347\264\240\346\230\257\345\220\246\345\234\250\350\247\206\345\217\243\344\270\255.md"
@@ -0,0 +1,34 @@
+# 检查元素是否在视口中
+
+可以使用 [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 方法获取元素的大小及其相对于视口的位置。
+
+当元素完全在视口中时，它的 `top` 和 `left` 属性都大于等于 0，`bottom` 和 `right` 属性都小于等于可视区域的高度和宽度。
+
+如果 `ele` 在视口中可见，则以下函数返回 `true`：
+
+```js
+const isInViewport = function (ele) {
+  const rect = ele.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+```
+
+我们通过 `getBoundingClientRect()` 获取元素的位置信息，然后使用 `window.innerHeight` 和 `window.innerWidth` 来获取可视区域的高度和宽度。
+
+在这个例子中，我们是判断了 `top`、`left`、`bottom` 和 `right` 都在视口内，这样可以保证元素完全在可视区域内。
+
+需要注意的是，这个函数并不能准确地检查元素是否被遮挡，只能检查元素是否在可视区域内。
+
+**什么情况下会出现元素被遮挡**？
+
+当一个元素完全或部分被其他元素遮挡时，我们就说这个元素被遮挡了。比如说当一个浮动层元素出现在另一个元素上面，这时你想判断这个底下的元素是否被遮挡了，这就是被遮挡的情况。
+
+另一个例子是检查一个图片是否完全被父元素的 `overflow`（溢出）隐藏掉了。如果这个图片是在父元素的可视区域内，但是被父元素的 `overflow` 属性隐藏了，这时候我们就说这个元素被遮挡了。
+
+如果你需要检查元素是否被遮挡你可以使用 [IntersectionObserver API](https://github.com/lio-zero/blog/blob/main/Web%20API/Intersection%20Observer.md)。
diff --git "a/DOM/\346\243\200\346\237\245\347\210\266\345\205\203\347\264\240\346\230\257\345\220\246\345\214\205\345\220\253\345\255\220\345\205\203\347\264\240.md" "b/DOM/\346\243\200\346\237\245\347\210\266\345\205\203\347\264\240\346\230\257\345\220\246\345\214\205\345\220\253\345\255\220\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..5396249
--- /dev/null
+++ "b/DOM/\346\243\200\346\237\245\347\210\266\345\205\203\347\264\240\346\230\257\345\220\246\345\214\205\345\220\253\345\255\220\345\205\203\347\264\240.md"
@@ -0,0 +1,13 @@
+# 检查父元素是否包含子元素
+
+- 检查 `parent` 是否包含 `child`。
+- 使用 `Node.contains()` 以检查 `parent` 元素包含的 `child` 元素。
+
+```js
+const elementContains = (parent, child) =>
+  parent !== child && parent.contains(child)
+
+elementContains(document.querySelector('head'), document.querySelector('title')) // true
+
+elementContains(document.querySelector('body'), document.querySelector('body')) // false
+```
diff --git "a/DOM/\346\243\200\346\237\245\347\224\250\346\210\267\346\230\257\345\220\246\346\273\232\345\212\250\345\210\260\351\241\265\351\235\242\345\272\225\351\203\250.md" "b/DOM/\346\243\200\346\237\245\347\224\250\346\210\267\346\230\257\345\220\246\346\273\232\345\212\250\345\210\260\351\241\265\351\235\242\345\272\225\351\203\250.md"
new file mode 100644
index 0000000..7807bcf
--- /dev/null
+++ "b/DOM/\346\243\200\346\237\245\347\224\250\346\210\267\346\230\257\345\220\246\346\273\232\345\212\250\345\210\260\351\241\265\351\235\242\345\272\225\351\203\250.md"
@@ -0,0 +1,9 @@
+# 检查用户是否滚动到页面底部
+
+```js
+const isAtBottom = () =>
+  document.documentElement.clientHeight + window.scrollY >=
+  document.documentElement.scrollHeight
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/wvqQxbb)
diff --git "a/DOM/\346\243\200\346\237\245\347\273\231\345\256\232\345\205\203\347\264\240\346\230\257\345\220\246\345\205\267\346\234\211\346\214\207\345\256\232\347\232\204\347\261\273.md" "b/DOM/\346\243\200\346\237\245\347\273\231\345\256\232\345\205\203\347\264\240\346\230\257\345\220\246\345\205\267\346\234\211\346\214\207\345\256\232\347\232\204\347\261\273.md"
new file mode 100644
index 0000000..800f930
--- /dev/null
+++ "b/DOM/\346\243\200\346\237\245\347\273\231\345\256\232\345\205\203\347\264\240\346\230\257\345\220\246\345\205\267\346\234\211\346\214\207\345\256\232\347\232\204\347\261\273.md"
@@ -0,0 +1,9 @@
+# 检查给定元素是否具有指定的类
+
+使用 `Element.classList` 和 `DOMTokenList.contains()` 检查元素是否具有指定的类。
+
+```js
+const hasClass = (el, className) => el.classList.contains(className)
+
+hasClass(document.querySelector('p.hdfp'), 'hdfp') // true
+```
diff --git "a/DOM/\346\243\200\346\265\213\345\205\203\347\264\240\346\230\257\345\220\246\350\242\253\350\201\232\347\204\246.md" "b/DOM/\346\243\200\346\265\213\345\205\203\347\264\240\346\230\257\345\220\246\350\242\253\350\201\232\347\204\246.md"
new file mode 100644
index 0000000..bdbbc59
--- /dev/null
+++ "b/DOM/\346\243\200\346\265\213\345\205\203\347\264\240\346\230\257\345\220\246\350\242\253\350\201\232\347\204\246.md"
@@ -0,0 +1,9 @@
+# 检测元素是否被聚焦
+
+假设 `ele` 表示要检查当前是否具有焦点的元素：
+
+```js
+const hasFocus = ele === document.activeElement
+```
+
+> **Tips**：按住 `Tab` 键可以切换焦点。
diff --git "a/DOM/\346\267\273\345\212\240\346\240\267\345\274\217.md" "b/DOM/\346\267\273\345\212\240\346\240\267\345\274\217.md"
new file mode 100644
index 0000000..b32e989
--- /dev/null
+++ "b/DOM/\346\267\273\345\212\240\346\240\267\345\274\217.md"
@@ -0,0 +1,14 @@
+# 添加样式
+
+将提供的样式添加到给定元素。
+
+使用 `Object.assign()` 和 `ElementCSSInlineStyle.style` 将提供的 `styles` 对象合并到给定元素的样式中。
+
+```js
+const addStyles = (el, styles) => Object.assign(el.style, styles)
+addStyles(document.getElementById('my-element'), {
+  background: 'red',
+  color: '#ffff00',
+  fontSize: '3rem'
+})
+```
diff --git "a/DOM/\346\273\232\345\212\250\347\274\251\346\224\276.md" "b/DOM/\346\273\232\345\212\250\347\274\251\346\224\276.md"
new file mode 100644
index 0000000..faf5adf
--- /dev/null
+++ "b/DOM/\346\273\232\345\212\250\347\274\251\346\224\276.md"
@@ -0,0 +1,40 @@
+# 滚动缩放
+
+使用鼠标滚轮（或触控板）可以用来放大和缩小工作区域。
+
+这并不难，使用 `wheel` 事件和 CSS `transform` 属性便可做到。
+
+```html
+<div class="workspace">
+  <h1>使用滚轮或触摸板滚动</h1>
+</div>
+```
+
+```css
+.workspace {
+  display: grid;
+  place-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  font: 700 12px system-ui;
+}
+```
+
+```js
+const zoomElement = document.querySelector('.workspace')
+let zoom = 1
+const ZOOM_SPEED = 0.1
+
+document.addEventListener('wheel', function (e) {
+  if (e.deltaY > 0) {
+    zoomElement.style.transform = `scale(${(zoom += ZOOM_SPEED)})`
+  } else {
+    zoomElement.style.transform = `scale(${(zoom -= ZOOM_SPEED)})`
+  }
+})
+```
+
+[查看示例](https://code.juejin.cn/pen/7127608934470254627)
diff --git "a/DOM/\347\273\237\350\256\241\345\275\223\345\211\215\351\241\265\351\235\242\345\207\272\347\216\260\347\232\204\346\211\200\346\234\211\346\240\207\347\255\276.md" "b/DOM/\347\273\237\350\256\241\345\275\223\345\211\215\351\241\265\351\235\242\345\207\272\347\216\260\347\232\204\346\211\200\346\234\211\346\240\207\347\255\276.md"
new file mode 100644
index 0000000..8f5bd24
--- /dev/null
+++ "b/DOM/\347\273\237\350\256\241\345\275\223\345\211\215\351\241\265\351\235\242\345\207\272\347\216\260\347\232\204\346\211\200\346\234\211\346\240\207\347\255\276.md"
@@ -0,0 +1,44 @@
+# 统计当前页面出现的所有标签
+
+- `document.querySelectorAll('*')`
+- `document.getElementsByTagName('*')` 其获取的是一个 NodeList 的类数组。
+- `$$('*')`
+- `document.all` — 已废弃，不建议使用
+
+获取到所以标签后，我们可以进一步的操作。
+
+## 获取标签名数组
+
+```js
+const tagNameList = [...document.getElementsByTagName('*')].map(
+  (v) => v.tagName
+)
+```
+
+## 标签种类统计
+
+```js
+const tagNameNums = new Set([
+  ...[...document.getElementsByTagName('*')].map((v) => v.tagName)
+])
+
+tagNameNums.size
+```
+
+## 统计标签出现的次数
+
+```js
+const reduceResult = [...document.getElementsByTagName('*')]
+  .map((v) => v.tagName)
+  .reduce((obj, item) => {
+    obj[item] = obj[item] ? obj[item] + 1 : 1
+    return obj
+  }, {})
+
+// 转为数组
+const reduceResultEntries = Object.entries(reduceResult)
+// 排序
+const sortReduceList = Object.entries(reduceResult).sort((a, b) => b[1] - a[1])
+// 输出前三名
+sortReduceList.slice(0, 3)
+```
diff --git "a/DOM/\350\216\267\345\217\226\343\200\201\350\256\276\347\275\256\345\222\214\345\210\240\351\231\244 data- \345\261\236\346\200\247.md" "b/DOM/\350\216\267\345\217\226\343\200\201\350\256\276\347\275\256\345\222\214\345\210\240\351\231\244 data- \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..41fdd3d
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\343\200\201\350\256\276\347\275\256\345\222\214\345\210\240\351\231\244 data- \345\261\236\346\200\247.md"	
@@ -0,0 +1,32 @@
+# 获取、设置和删除 data-* 属性
+
+## 获取 `data-*` 属性的值
+
+获取`ele`元素的`data-message`属性
+
+```js
+const message = ele.getAttribute('data-message')
+
+// Or
+const message = ele.dataset.message
+```
+
+## 设置 `data-*` 属性的值
+
+```js
+ele.setAttribute('data-message', 'Hello World')
+
+// Or
+ele.dataset.message = 'Hello World'
+```
+
+## 删除 `data-*` 属性
+
+```js
+ele.removeAttribute('data-message')
+
+// Or
+delete ele.dataset.message
+```
+
+> **注意**，调用 `delete ele.dataset` 不会删除所有 `data` 属性。
diff --git "a/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\232\204 CSS \346\240\267\345\274\217.md" "b/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\232\204 CSS \346\240\267\345\274\217.md"
new file mode 100644
index 0000000..0890c21
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\232\204 CSS \346\240\267\345\274\217.md"	
@@ -0,0 +1,29 @@
+# 获取元素的 CSS 样式
+
+我们可以使用 `getComputedStyle` 方法获取 `ele` 元素的所有 CSS 样式：
+
+```js
+const styles = window.getComputedStyle(ele, null)
+```
+
+访问特定样式的值：
+
+```js
+// 获取背景颜色
+const bgColor = styles.backgroundColor
+```
+
+对于供应商前缀以连字符（`-`）开头的样式，我们可以通过传递样式来获取样式值：
+
+```js
+const textSizeAdjust = styles['-webkit-text-size-adjust']
+```
+
+`getPropertyValue` 方法产生相同的结果：
+
+```js
+const bgColor = styles.getPropertyValue('background-color')
+
+// 或者把参数转成 camelCase 格式：
+const bgColor = styles.getPropertyValue('backgroundColor')
+```
diff --git "a/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\233\270\345\257\271\344\272\216\345\217\246\344\270\200\344\270\252\345\205\203\347\264\240\347\232\204\344\275\215\347\275\256.md" "b/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\233\270\345\257\271\344\272\216\345\217\246\344\270\200\344\270\252\345\205\203\347\264\240\347\232\204\344\275\215\347\275\256.md"
new file mode 100644
index 0000000..8a90d1e
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\233\270\345\257\271\344\272\216\345\217\246\344\270\200\344\270\252\345\205\203\347\264\240\347\232\204\344\275\215\347\275\256.md"
@@ -0,0 +1,13 @@
+# 获取元素相对于另一个元素的位置
+
+测量 `ele` 元素相对于 `target` 元素的顶部和左侧位置：
+
+```js
+// 获取两个元素距视口的坐标
+const eleRect = ele.getBoundingClientRect()
+const targetRect = ele.getBoundingClientRect()
+
+// 计算顶部和左侧的位置
+const top = eleRect.top - targetRect.top
+const left = eleRect.left - targetRect.left
+```
diff --git "a/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\233\270\345\257\271\344\272\216\346\226\207\346\241\243\347\232\204\344\275\215\347\275\256.md" "b/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\233\270\345\257\271\344\272\216\346\226\207\346\241\243\347\232\204\344\275\215\347\275\256.md"
new file mode 100644
index 0000000..30136f1
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\345\205\203\347\264\240\347\233\270\345\257\271\344\272\216\346\226\207\346\241\243\347\232\204\344\275\215\347\275\256.md"
@@ -0,0 +1,23 @@
+# 获取元素相对于文档的位置
+
+要获取元素相对于文档的位置，可以使用 `getBoundingClientRect()` 方法。这个方法返回一个 DOMRect 对象，包含了元素的 `left`、`top`、`right`、`bottom`、`width` 和 `height` 属性，表示元素相对于视口的位置。
+
+```js
+// 获取元素相对于视口的位置
+const rect = ele.getBoundingClientRect()
+
+// 添加滚动位置以获取与元素的完整距离到文档的顶部左侧
+const x = rect.left + window.pageXOffset
+const y = rect.top + window.pageYOffset
+```
+
+这里，我们首先使用 `getBoundingClientRect()` 方法获取元素相对于视口的位置，然后将 `left` 和 `top` 属性加上页面的水平和垂直滚动偏移量，就可以得到元素相对于文档的位置。
+
+如果你需要计算元素相对于父元素的位置，则可以使用 `element.offsetTop` 和 `element.offsetLeft` 属性来获取。
+
+```js
+const x = element.offsetLeft
+const y = element.offsetTop
+```
+
+这里，我们获取到了元素相对于它父元素左上角的水平和垂直偏移量。
diff --git "a/DOM/\350\216\267\345\217\226\345\275\223\345\211\215\351\200\211\344\270\255\347\232\204\346\226\207\346\234\254.md" "b/DOM/\350\216\267\345\217\226\345\275\223\345\211\215\351\200\211\344\270\255\347\232\204\346\226\207\346\234\254.md"
new file mode 100644
index 0000000..a39b6ee
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\345\275\223\345\211\215\351\200\211\344\270\255\347\232\204\346\226\207\346\234\254.md"
@@ -0,0 +1,13 @@
+# 获取当前选中的文本
+
+使用 `window.getSelection()` 和 `Selection.toString()` 获取当前选中的文本。
+
+`getSelection()` 返回一个 [`Selection`](https://developer.mozilla.org/zh-CN/docs/Web/API/Selection) 对象，表示用户选择的文本范围或光标的当前位置。
+
+```js
+const getSelectedText = () => window.getSelection().toString()
+
+getSelectedText() // ... => 当前选中的内容
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/qBjebeQ)
diff --git "a/DOM/\350\216\267\345\217\226\346\210\226\350\256\276\347\275\256\346\226\207\346\241\243\346\240\207\351\242\230.md" "b/DOM/\350\216\267\345\217\226\346\210\226\350\256\276\347\275\256\346\226\207\346\241\243\346\240\207\351\242\230.md"
new file mode 100644
index 0000000..72dc2ff
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\346\210\226\350\256\276\347\275\256\346\226\207\346\241\243\346\240\207\351\242\230.md"
@@ -0,0 +1,13 @@
+# 获取或设置文档标题
+
+获取文档标题
+
+```js
+const title = document.title
+```
+
+设置文档标题
+
+```js
+document.title = 'Hello World'
+```
diff --git "a/DOM/\350\216\267\345\217\226\346\226\207\346\241\243\351\253\230\345\272\246\345\222\214\345\256\275\345\272\246.md" "b/DOM/\350\216\267\345\217\226\346\226\207\346\241\243\351\253\230\345\272\246\345\222\214\345\256\275\345\272\246.md"
new file mode 100644
index 0000000..c2818e0
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\346\226\207\346\241\243\351\253\230\345\272\246\345\222\214\345\256\275\345\272\246.md"
@@ -0,0 +1,35 @@
+# 获取文档高度和宽度
+
+## 获取文档高度
+
+我们可以通过使用 `documentElement.scrollWidth/scrollHeight` 来测量文档的完整大小。
+
+但是在该元素上，对于整个文档，这些属性均无法正常工作。在 Chrome/Safari/Opera 中，如果没有滚动条，`documentElement.scrollHeight` 甚至可能小于 `documentElement.clientHeight`
+
+为了可靠地获得完整的文档高度，我们应该采用以下这些属性的最大值：
+
+```js
+// 全高，包括滚动部分
+const fullHeight = Math.max(
+  document.body.scrollHeight,
+  document.documentElement.scrollHeight,
+  document.body.offsetHeight,
+  document.documentElement.offsetHeight,
+  document.body.clientHeight,
+  document.documentElement.clientHeight
+)
+```
+
+## 获取文档宽度
+
+```js
+// 全宽，包括滚动部分
+const fullWidth = Math.max(
+  document.body.scrollWidth,
+  document.documentElement.scrollWidth,
+  document.body.offsetWidth,
+  document.documentElement.offsetWidth,
+  document.body.clientWidth,
+  document.documentElement.clientWidth
+)
+```
diff --git "a/DOM/\350\216\267\345\217\226\346\240\267\345\274\217.md" "b/DOM/\350\216\267\345\217\226\346\240\267\345\274\217.md"
new file mode 100644
index 0000000..36f598a
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\346\240\267\345\274\217.md"
@@ -0,0 +1,9 @@
+# 获取样式
+
+使用 `Window.getComputedStyle()` 获取指定元素的 CSS 规则的值。
+
+```js
+const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]
+
+getStyle(document.querySelector('p'), 'font-size') // '16px'
+```
diff --git "a/DOM/\350\216\267\345\217\226\347\210\266\347\272\247\345\205\203\347\264\240.md" "b/DOM/\350\216\267\345\217\226\347\210\266\347\272\247\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..9a62077
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\347\210\266\347\272\247\345\205\203\347\264\240.md"
@@ -0,0 +1,93 @@
+# 获取父级元素
+
+## Element.parentNode 属性
+
+你可以使用 `Element.parentNode` 属性来获取元素的父级。
+
+```html
+<div id="app">
+  <h1>Hello, world!</h1>
+</div>
+```
+
+```js
+let h1 = document.querySelector('h1')
+
+// 获取 #app 元素
+let parent = h1.parentNode // div#app{}
+```
+
+你还可以将它们串在一起以提升几个级别。
+
+```js
+let levelUpParent = h1.parentNode.parentNode // body
+```
+
+## Element.closest() 方法
+
+你可以使用 `Element.closest()` 方法获取与选择器匹配的 DOM 树上最近的父级。
+
+`Element.closest()` 方法从元素本身开始。你可以通过将第一个父元素与 `Node.parentNode` 属性配对来开始。
+
+```html
+<main>
+  <div class="hero">
+    <div id="app">
+      <h1 data-sandwich>Hello, world!</h1>
+    </div>
+  </div>
+</main>
+```
+
+```js
+let h1 = document.querySelector('h1')
+
+// 返回 .hero 元素
+let hero = h1.closest('.hero') // div.hero
+
+// 返回 h1 元素本身
+let sandwich = h1.closest('[data-sandwich]') // h1
+
+// 从元素的父元素开始检查是否存在 data-sandwich 属性
+let sandwich2 = h1.parentNode.closest('[data-sandwich]') // null
+```
+
+## Element.closest() 方法的用途
+
+可能最常用的是使用 `Element.closest()` 方法来检查元素是否在某个父元素中。
+
+它与事件侦听器的事件委托配合时特别有用。
+
+例如，假设你有一些按钮，其中包含一些嵌套的 HTML，如下所示。
+
+```html
+<button class="click-me">
+  <span class="text-large">点击我！</span>
+  <br />
+  <span class="text-small">(限时优惠)</span>
+</button>
+```
+
+你的 JavaScript 监听这些按钮的点击看起来像这样。
+
+```js
+document.addEventListener('click', (e) => {
+  if (!e.target.matches('.click-me')) return
+  alert('想屁吃')
+})
+```
+
+这将永远不会运行，因为点击事件的目标几乎总是 `.text-large` 或 `.text-small` 元素。仅当你单击按钮中的文本之外时才有效。
+
+为了解决这个问题，我们可以使用 `Element.closest()` 方法。
+
+```html
+document.addEventListener('click', e => { if (!e.target.closest('.click-me'))
+return alert('想屁吃') })
+```
+
+`Element.closest()` 方法有很多用途 ，这只是其中之一。
+
+## 更多资料
+
+[使用 closest 和 matches 方法来检测元素是否存在某选择器](https://github.com/lio-zero/blog/blob/master/DOM/%E4%BD%BF%E7%94%A8%20closest%20%E5%92%8C%20matches%20%E6%96%B9%E6%B3%95%E6%9D%A5%E6%A3%80%E6%B5%8B%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8%E6%9F%90%E9%80%89%E6%8B%A9%E5%99%A8.md)
diff --git "a/DOM/\350\216\267\345\217\226\347\245\226\345\205\210\345\205\203\347\264\240.md" "b/DOM/\350\216\267\345\217\226\347\245\226\345\205\210\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..c751c43
--- /dev/null
+++ "b/DOM/\350\216\267\345\217\226\347\245\226\345\205\210\345\205\203\347\264\240.md"
@@ -0,0 +1,19 @@
+# 获取祖先元素
+
+返回从文档根到给定元素的元素的所有祖先元素。
+
+- 使用 `Node.parentNode` 和 `while` 循环向上移动元素的祖先树。
+- 使用 `Array.prototype.unshift()` 将每个新祖先添加到数组的开头。
+
+```js
+const getAncestors = (el) => {
+  let ancestors = []
+  while (el) {
+    ancestors.unshift(el)
+    el = el.parentNode
+  }
+  return ancestors
+}
+
+getAncestors(document.querySelector('nav')) // [document, html, body, header, nav]
+```
diff --git "a/DOM/\350\247\206\345\217\243\343\200\201\350\256\276\345\244\207\345\222\214\346\226\207\346\241\243\345\244\247\345\260\217.md" "b/DOM/\350\247\206\345\217\243\343\200\201\350\256\276\345\244\207\345\222\214\346\226\207\346\241\243\345\244\247\345\260\217.md"
new file mode 100644
index 0000000..fcc0117
--- /dev/null
+++ "b/DOM/\350\247\206\345\217\243\343\200\201\350\256\276\345\244\207\345\222\214\346\226\207\346\241\243\345\244\247\345\260\217.md"
@@ -0,0 +1,57 @@
+# 视口、设备和文档大小
+
+视口是指浏览器中实际用于显示网页的部分，要测量视口的宽度和高度，请检查 `document.documentElement` 对象中的 `clientWidth` 和 `clientHeight` 属性。
+
+```js
+const viewportWidth = document.documentElement.clientWidth
+const viewportHeight = document.documentElement.clientHeight
+```
+
+> **注意**：视口值不包括水平或垂直滚动条。
+
+如果要计算包含滚动条的大小，请使用 `window.innerWidth` 和 `window.innerHeight` 属性。
+
+```js
+window.innerWidth
+window.innerHeight
+```
+
+如果你想获得**整个浏览器窗口**的大小，请使用 `window.outerWidth` 和 `window.outerHeight` 属性。它们返回浏览器窗口的完整大小，包括标题栏。
+
+```js
+window.outerWidth
+window.outerHeight
+```
+
+## 设备大小
+
+`screen.width` 和 `screen.height` 属性返回当前屏幕的宽度和高度，其包含底部的任务栏：
+
+```js
+const fullWidth = screen.width
+const fullHeight = screen.height
+```
+
+![包含任务栏](https://upload-images.jianshu.io/upload_images/18281896-564671477b6e4f5d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+而 `screen.availWidth` 和 `screen.availHeight` 属性返回可用的屏幕宽度和高度，其不包含任务栏，
+
+```js
+const availableWidth = screen.availWidth
+const availableHeight = screen.availHeight
+```
+
+![不包含任务栏](https://upload-images.jianshu.io/upload_images/18281896-51484ca736dbd8c1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+注意，设备可以隐藏底部任务栏。如果隐藏了任务栏，那么 `availHeight` 和 `height` 相等。
+
+## 文档大小
+
+![文档大小](https://upload-images.jianshu.io/upload_images/18281896-1d399c2f145e0c94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+使用 `document.body` 上的 `clientWidth` 和 `clientHeight` 属性来获取 `document` 的大小。
+
+```js
+const docWidth = document.body.clientWidth
+const docHeight = document.body.clientHeight
+```
diff --git "a/DOM/\350\247\246\345\217\221\344\272\213\344\273\266.md" "b/DOM/\350\247\246\345\217\221\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..f5e0a6e
--- /dev/null
+++ "b/DOM/\350\247\246\345\217\221\344\272\213\344\273\266.md"
@@ -0,0 +1,60 @@
+# 触发事件
+
+在 JavaScript 中有几种方法可以触发事件，具体取决于要触发事件的元素类型和事件类型。
+
+- `click()` 方法只能用于触发 `click` 事件。通过调用该方法可以模拟用户点击按钮的行为。
+
+```js
+// 对于任何元素
+ele.click()
+```
+
+- `reset()` 方法触发表单的重置事件，而 `submit()` 方法触发表单的提交事件。
+
+```js
+// 对于表单元素
+formEle.reset()
+formEle.submit()
+```
+
+- `focus()` 和 `blur()` 方法分别可以用来触发 `focus` 和 `blur` 事件。
+
+```js
+// 用于文本框和文本区域
+ele.focus()
+ele.blur()
+```
+
+## 触发原生事件
+
+`dispatchEvent()` 方法允许在指定元素上触发一个事件。需要传递一个事件对象作为参数。
+
+```js
+const trigger = function (ele, eventName) {
+  const e = document.createEvent('HTMLEvents')
+  e.initEvent(eventName, true, false)
+  ele.dispatchEvent(e)
+}
+```
+
+你可以触发 `change`、`keyup`、`mousedown` 以及更多的调用。
+
+```js
+trigger(ele, 'mousedown')
+```
+
+## 触发自定义事件
+
+下面的示例代码触发了一个以 `hello` 命名的自定义事件传递 `{ message: 'Hello World' }`：
+
+```js
+const e = document.createEvent('CustomEvent')
+e.initCustomEvent('hello', true, true, { message: 'Hello World' })
+
+// 触发事件
+ele.dispatchEvent(e)
+```
+
+> **更新**：不在建议使用 `document.createEvent` 来创建自定义事件，它的很多方法已经废弃，例如以上示例的 `initCustomEvent` 方法。
+>
+> 推荐阅读：[JavaScript 中的自定义事件](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.md)
diff --git "a/DOM/\350\256\276\347\275\256\346\240\267\345\274\217.md" "b/DOM/\350\256\276\347\275\256\346\240\267\345\274\217.md"
new file mode 100644
index 0000000..a8407c6
--- /dev/null
+++ "b/DOM/\350\256\276\347\275\256\346\240\267\345\274\217.md"
@@ -0,0 +1,10 @@
+# 设置样式
+
+使用 `ElementCSSInlineStyle.style` 将指定元素的 CSS 规则的值设置为 `val`。
+
+```js
+const setStyle = (el, rule, val) => (el.style[rule] = val)
+
+// 页面上的第一个 <p> 元素的字体大小为 18px
+setStyle(document.querySelector('p'), 'font-size', '18px')
+```
diff --git "a/DOM/\350\277\224\345\233\236\345\214\205\345\220\253\347\273\231\345\256\232\345\205\203\347\264\240\347\232\204\346\211\200\346\234\211\345\220\214\347\272\247\347\232\204\346\225\260\347\273\204.md" "b/DOM/\350\277\224\345\233\236\345\214\205\345\220\253\347\273\231\345\256\232\345\205\203\347\264\240\347\232\204\346\211\200\346\234\211\345\220\214\347\272\247\347\232\204\346\225\260\347\273\204.md"
new file mode 100644
index 0000000..6f8fa49
--- /dev/null
+++ "b/DOM/\350\277\224\345\233\236\345\214\205\345\220\253\347\273\231\345\256\232\345\205\203\347\264\240\347\232\204\346\211\200\346\234\211\345\220\214\347\272\247\347\232\204\346\225\260\347\273\204.md"
@@ -0,0 +1,11 @@
+# 返回包含给定元素的所有同级的数组
+
+- 使用 `Node.parentNode` 和 `Node.childNodes` 获取元素父级中包含的所有元素的 `NodeList`。
+- 使用扩展运算符（`...`）和 `Array.prototype.filter()` 转换为数组并从中删除给定元素。
+
+```js
+const getSiblings = (el) =>
+  [...el.parentNode.childNodes].filter((node) => node !== el)
+
+getSiblings(document.querySelector('head')) // ['body']
+```
diff --git "a/DOM/\351\200\211\346\213\251\345\205\203\347\264\240\347\232\204\346\226\207\346\234\254\345\206\205\345\256\271.md" "b/DOM/\351\200\211\346\213\251\345\205\203\347\264\240\347\232\204\346\226\207\346\234\254\345\206\205\345\256\271.md"
new file mode 100644
index 0000000..d816197
--- /dev/null
+++ "b/DOM/\351\200\211\346\213\251\345\205\203\347\264\240\347\232\204\346\226\207\346\234\254\345\206\205\345\256\271.md"
@@ -0,0 +1,13 @@
+# 选择元素的文本内容
+
+以下方法选择 `ele` 元素的文本内容：
+
+```js
+const selectText = function (ele) {
+  const selection = window.getSelection()
+  const range = document.createRange()
+  range.selectNodeContents(ele)
+  selection.removeAllRanges()
+  selection.addRange(range)
+}
+```
diff --git "a/DOM/\351\200\232\350\277\207\347\273\231\345\256\232\347\232\204\351\200\211\346\213\251\345\231\250\350\216\267\345\217\226\346\234\200\350\277\221\347\232\204\345\205\203\347\264\240.md" "b/DOM/\351\200\232\350\277\207\347\273\231\345\256\232\347\232\204\351\200\211\346\213\251\345\231\250\350\216\267\345\217\226\346\234\200\350\277\221\347\232\204\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..dce332b
--- /dev/null
+++ "b/DOM/\351\200\232\350\277\207\347\273\231\345\256\232\347\232\204\351\200\211\346\213\251\345\231\250\350\216\267\345\217\226\346\234\200\350\277\221\347\232\204\345\205\203\347\264\240.md"
@@ -0,0 +1,38 @@
+# 通过给定的选择器获取最近的元素
+
+## 使用原生的 `closest()` 方法
+
+`Element.closest()` 方法用来获取匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 `null`。
+
+```js
+const result = ele.closest(selector)
+```
+
+请注意，IE 不支持 [closest](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) 方法。
+
+## 向上遍历直到找到匹配元素
+
+```js
+const matches = function (ele, selector) {
+  return (
+    ele.matches ||
+    ele.matchesSelector ||
+    ele.msMatchesSelector ||
+    ele.mozMatchesSelector ||
+    ele.webkitMatchesSelector ||
+    ele.oMatchesSelector
+  ).call(ele, selector)
+}
+
+// 找到最接近 `ele` 的元素并匹配 `selector`
+const closest = function (ele, selector) {
+  let e = ele
+  while (e) {
+    if (matches(e, selector)) {
+      break
+    }
+    e = e.parentNode
+  }
+  return e
+}
+```
diff --git "a/DOM/\351\207\215\347\275\256\350\241\250\345\215\225.md" "b/DOM/\351\207\215\347\275\256\350\241\250\345\215\225.md"
new file mode 100644
index 0000000..7d9fafe
--- /dev/null
+++ "b/DOM/\351\207\215\347\275\256\350\241\250\345\215\225.md"
@@ -0,0 +1,30 @@
+# 重置表单
+
+包含表单的网页上的一个常见需求是将其重置为原始状态。
+
+有两种方式将表单重置为原始状态：
+
+- 重置按钮
+- `reset()` 方法
+
+重置按钮是一个 `input` 元素 `type="reset"`：
+
+```html
+<input type="reset" />
+```
+
+你也可以使用 JavaScript 以编程方式重置表单。
+
+你只需要引用表单元素：
+
+```js
+const form = document.querySelector('form')
+```
+
+然后你可以调用 `reset()` 方法：
+
+```js
+form.reset()
+```
+
+这将清除表单中的所有元素，将它们恢复到原始状态。
diff --git "a/DOM/\351\232\220\350\227\217\346\211\200\346\234\211\346\214\207\345\256\232\347\232\204\345\205\203\347\264\240.md" "b/DOM/\351\232\220\350\227\217\346\211\200\346\234\211\346\214\207\345\256\232\347\232\204\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..48dd733
--- /dev/null
+++ "b/DOM/\351\232\220\350\227\217\346\211\200\346\234\211\346\214\207\345\256\232\347\232\204\345\205\203\347\264\240.md"
@@ -0,0 +1,10 @@
+# 隐藏所有指定的元素
+
+使用扩展运算符（`...`）和 `Array.prototype.forEach()` 将 `display: none` 应用于指定的每个元素。
+
+```js
+const hide = (...el) => [...el].forEach((e) => (e.style.display = 'none'))
+
+// 隐藏页面上的所有 <img> 元素
+hide(...document.querySelectorAll('img'))
+```
diff --git "a/Git \345\222\214 Github/Git .gitignore.md" "b/Git \345\222\214 Github/Git .gitignore.md"
new file mode 100644
index 0000000..c9d2ad1
--- /dev/null
+++ "b/Git \345\222\214 Github/Git .gitignore.md"	
@@ -0,0 +1,76 @@
+# Git .gitignore
+
+[`.gitignore`](https://git-scm.com/docs/gitignore) 用于指定有意忽略的未跟踪文件。
+
+## Git 忽略文件或目录
+
+与他人共享您的代码时，通常有您不想共享的文件或项目的一部分。例如：
+
+- 日志文件
+- 临时文件
+- 隐藏文件
+- 个人档案
+- etc
+
+Git 可以使用 `.gitignore` 文件指定 Git 应忽略项目的哪些文件或目录。
+
+Git 不会跟踪 `.gitignore` 中指定的文件和文件夹。但是，`.gitignore` 文件本身由 Git 跟踪。
+
+## 创建 `.gitignore`
+
+转到项目的根目录，然后创建 `.gitignore` 文件：
+
+```bash
+touch .gitignore
+```
+
+在文件中添加两条规则：
+
+- 忽略任何带有 `.log` 扩展名的文件
+- 忽略任何名为 `temp` 的目录中的所有内容
+
+```txt
+*.log
+temp/
+```
+
+现在，Git 将忽略所有 `.log` 文件和 `temp` 文件夹中的任何内容。
+
+另外，在这种情况下，我们使用单个 `.gitignore` 适用于整个存储库。但也可以有额外的子目录中的 `.gitignore` 文件。这些仅适用于该目录中的文件或文件夹。
+
+## .gitignore 的规则
+
+`.gitignore` 文件中匹配模式的基本规则可以查阅 [PATTERN FORMAT](https://git-scm.com/docs/gitignore#_pattern_format)。
+
+## 本地和个人 Git 忽略规则
+
+也可以忽略文件或文件夹，但不在分布式 `.gitignore` 文件中显示。
+
+这些类型的忽略在 `.git/info/exclude` 文件中指定。它的工作原理与 `.gitignore` 相同，但不会显示给其他任何人。
+
+## 全局排除文件
+
+我们可以在全局创建一个 `.gitignore_global` 文件，用于每个储存库排除一些文件。
+
+运行以下命令以定义 `.gitignore_global` 为 `core.excludesfile` 选项：
+
+```bash
+git config --global core.excludesfile ~/.gitignore_global
+```
+
+此命令在全局 `.gitconfig` 中创建以下设置：
+
+```bash
+# .gitconfig
+[core]
+  excludesfile = ~/.gitignore_global
+```
+
+创建一个 `.gitignore_global` 文件，并添加要排除的文件。
+
+```bash
+# .gitignore_global
+.DS_Store
+```
+
+您永远不必担心 `DS_Store` 文件再次提交！
diff --git "a/Git \345\222\214 Github/Git Amend.md" "b/Git \345\222\214 Github/Git Amend.md"
new file mode 100644
index 0000000..2b737f1
--- /dev/null
+++ "b/Git \345\222\214 Github/Git Amend.md"	
@@ -0,0 +1,44 @@
+# Git Amend
+
+`commit --amend` 用于修改最近的 `commit`。
+
+它将**暂存区（staging environment）**中的更改与最新 `commit` 相结合，并创建一个新的 `commit`。
+
+这个新的 `commit` 完全取代之前的 `commit`。
+
+## Git 修改提交信息
+
+使用 `--amend` 可以做的最简单的事情之一就是更改 `commit` 消息。
+
+假设现在我们修改了 `README.md` 的内容，并且已经 `commit`。
+
+```bash
+git add README.md
+git commit -m "Adding lines to readme"
+```
+
+查找日志：
+
+```bash
+git log --oneline
+```
+
+发现存在一个拼写错误。我们可以使用 `amend` 提交一个新的 `commit` 去替换它：
+
+```bash
+git commit --amend -m "Added lines to README.md"
+```
+
+重新查看日志：
+
+```bash
+git log --oneline
+```
+
+您会发现它已经被替换了。
+
+> **注意**：弄乱 `commit` 存储库的历史可能很危险。通常可以对您自己的本地存储库进行此类更改。但是，您应该避免将历史重写到远程存储库的更改，尤其是在其他人正在使用它们的情况下。
+
+## Git 修改文件
+
+添加文件 `--amend` 的方式与上述相同。只需在提交之前将它们添加到暂存区。
diff --git "a/Git \345\222\214 Github/Git Cherry Pick.md" "b/Git \345\222\214 Github/Git Cherry Pick.md"
new file mode 100644
index 0000000..3d3f5d4
--- /dev/null
+++ "b/Git \345\222\214 Github/Git Cherry Pick.md"	
@@ -0,0 +1,76 @@
+# Git Cherry Pick
+
+Git 中的 [Cherry Pick](http://git-scm.com/docs/git-cherry-pick) 意味着从一个分支中选择一个提交，并将其应用到另一个分支上。
+
+这与其他方式形成了对比，例如 `merge` 和 `rebase`，它们通常将许多提交应用于另一个分支。
+
+## 用法
+
+- 确保您位于要将提交应用到的分支上。
+
+```bash
+git switch master
+# or
+git checkout master
+```
+
+执行以下操作：
+
+```bash
+git cherry-pick <commit-hash>
+```
+
+以上命令将指定的提交 `commit-hash`，应用于当前分支。这会在当前分支产生一个新的提交，当然它们的哈希值会不一样。
+
+假设您有 `master` 和 `develop` 分支，现在需要将 `develop` 分支的某一个提交，如 `x` 应用到 `master` 分支，步骤如下：
+
+```bash
+git checkout master
+git cherry-pick x
+```
+
+- 切换到对应分支（这里是 `master`）
+- `cherry-pick` 对应的提交（这里是 `x`）
+
+这将在 `master` 分支的末尾增加了一个提交 `x`。
+
+应用 `develop` 分支的最近一次提交，可以直接使用分支名：
+
+```bash
+git cherry-pick develop
+```
+
+转移多个提交：
+
+```bash
+git cherry-pick <HashA> <HashB>
+```
+
+## 注意
+
+- 如果您从公共分支中挑选，您应该考虑使用：
+
+```bash
+git cherry-pick -x <commit-hash>
+```
+
+这将生成一个标准化的提交消息。这样，您（和您的同事）仍然可以跟踪提交的来源，并且可以避免将来发生合并冲突。
+
+- 如果您在提交中附加了注释，则它们不会遵循 `cherry-pick`。要将它们也带过来，您必须使用：
+
+```bash
+git notes copy <from> <to>
+```
+
+至于其他的情况，例如：配置项、代码冲突和转移到另一个代码库，
+
+推荐阅读阮一峰老师的 [git cherry-pick 教程](https://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html)，其中介绍了其他的示例，例如：配置项、代码冲突和转移到另一个代码库。
+
+## 进一步阅读
+
+- [Git Cherry Pick](https://www.atlassian.com/git/tutorials/cherry-pick)
+- [How to cherry-pick a range of commits and merge them into another branch?](https://stackoverflow.com/questions/1994463/how-to-cherry-pick-a-range-of-commits-and-merge-them-into-another-branch)
+- [What does cherry-picking a commit with Git mean?](https://stackoverflow.com/questions/9339429/what-does-cherry-picking-a-commit-with-git-mean)
+- [How to git-cherry-pick only changes to certain files?](https://stackoverflow.com/questions/5717026/how-to-git-cherry-pick-only-changes-to-certain-files)
+- [Is it possible to cherry-pick a commit from another git repository?](https://stackoverflow.com/questions/5120038/is-it-possible-to-cherry-pick-a-commit-from-another-git-repository)
+- [How to cherry-pick multiple commits](https://stackoverflow.com/questions/1670970/how-to-cherry-pick-multiple-commits)
diff --git "a/Git \345\222\214 Github/Git Diff.md" "b/Git \345\222\214 Github/Git Diff.md"
new file mode 100644
index 0000000..101c973
--- /dev/null
+++ "b/Git \345\222\214 Github/Git Diff.md"	
@@ -0,0 +1,68 @@
+# Git Diff
+
+当我们执行 `git fetch` 拉取远程最新代码到本地，但想要在 `git merge` 合并之前查看一些文件的变动时，可以使用 `git diff` 命令。
+
+> 如果是少量代码的改动，`git diff` 还是挺方便的，但如果代码量较大，建议使用 GUI 工具。
+
+本文整理了一些常用的命令。
+
+## 查看变化中的差异
+
+`git diff` 显示暂存区和工作区的差异：
+
+```bash
+# 所有文件的差异
+git diff
+
+# 具体某个文件的差异
+git diff [file]
+```
+
+## 显示暂存区与上次 commit 的差异
+
+`--cached` 和 `--staged` 都可以用于显示暂存区与上次 commit 的差异：
+
+```bash
+git diff --cached [file]
+git diff --staged [file]
+```
+
+## 查看两个分支之间的差异
+
+使用 `git diff <branch>...<other-branch>` 查看 `<branch>` 和 `<other-branch>` 之间的差异 。
+
+- `git diff <branch>...<other-branch>` 比较两个分支。
+- `git diff 76ce3e6...e251d8d` 比较两个特定的提交。
+
+```bash
+$ git diff <branch>...<other-branch>
+$ git diff patch-1...patch-2
+# 显示分支 patch-1 和 patch-2 之间的差异
+```
+
+## 统计数据
+
+`--stat` 生成差异统计。
+
+```bash
+$ git diff --stat
+
+# app/a.txt    | 2 +-
+# app/b.txt    | 8 ++----
+# 2 files changed, 10 insertions(+), 84 deletions(-)
+```
+
+`--shortstat` 是 `--stat` 选项的简化版本，它不显示具体的文件名及一些图形部分，只输出最后一行统计数据。
+
+显示今天写了多少行代码：
+
+```bash
+git diff --shortstat "@{0 day ago}"
+# 10 files changed, 62 insertions(+), 15 deletions(-)
+```
+
+## 仅显示修改过的文件名
+
+```bash
+git diff --summary
+```
diff --git "a/Git \345\222\214 Github/Git hooks.md" "b/Git \345\222\214 Github/Git hooks.md"
new file mode 100644
index 0000000..744dc1b
--- /dev/null
+++ "b/Git \345\222\214 Github/Git hooks.md"	
@@ -0,0 +1,63 @@
+# Git hooks
+
+Git hooks 是每次 Git 存储库中发生特定事件时自动运行的脚本。它们允许您定制 Git 的内部行为，并在开发生命周期的关键点触发可定制的操作。
+
+![在提交创建过程中执行的 hooks](https://wac-cdn.atlassian.com/dam/jcr:ac22adee-d740-4216-a92a-33c14b5623e5/01.svg?cdnVersion=396)
+
+Git hooks 的常见用例包括鼓励提交策略、根据存储库的状态改变项目环境，以及实现连续集成工作流。但是，由于脚本是无限可定制的，您可以使用 Git hooks 来自动化或优化开发工作流的几乎任何方面。但如果添加的 Hook 脚本未正常运行，则 Git 操作将不会通过。
+
+Hook 脚本置于目录 `~/.git/hooks` 中，以可执行文件的形式存在。
+
+```bash
+$ ls -lah .git/hooks
+applypatch-msg.sample     pre-push.sample
+commit-msg.sample         pre-rebase.sample
+fsmonitor-watchman.sample pre-receive.sample
+post-update.sample        prepare-commit-msg.sample
+pre-applypatch.sample     update.sample
+pre-commit.sample         push-to-checkout.sample
+pre-merge-commit.sample
+```
+
+以上常用 hooks 有：
+
+- `pre-commit`
+- `pre-push`
+- `commit-msg`
+
+另外 git hooks 可使用 `core.hooksPath` 自定义脚本位置。
+
+```bash
+# 可通过命令行配置 core.hooksPath
+$ git config 'core.hooksPath' .husky
+
+# 也可通过写入文件配置 core.hooksPath
+$ cat .git/config
+[core]
+  hooksPath = .husky
+```
+
+在前端工程化中，husky 即通过自定义 [`core.hooksPath`](https://git-scm.com/docs/git-config#Documentation/git-config.txt-corehooksPath) 并将 `npm scripts` 写入其中的方式来实现此功能。
+
+[Husky](https://github.com/typicode/husky) 允许您安装钩子，包括用 JavaScript 编写的钩子。
+
+`~/.husky` 目录下手动创建 hook 脚本。
+
+```bash
+# 手动创建 pre-commit hook
+$ vim .husky/pre-commit
+```
+
+在 `pre-commit` 中进行代码风格校验：
+
+```bash
+#!/bin/sh
+
+npm run lint
+```
+
+## 更多资料
+
+- [Git Hooks](https://www.atlassian.com/git/tutorials/git-hooks)
+- [Can Git hook scripts be managed along with the repository?](https://stackoverflow.com/questions/427207/can-git-hook-scripts-be-managed-along-with-the-repository)
+- [How I Learned to Stop Worrying and Love Git Hooks](https://css-tricks.com/how-i-learned-to-stop-worrying-and-love-git-hooks/)
diff --git "a/Git \345\222\214 Github/Git restore.md" "b/Git \345\222\214 Github/Git restore.md"
new file mode 100644
index 0000000..748e3f8
--- /dev/null
+++ "b/Git \345\222\214 Github/Git restore.md"	
@@ -0,0 +1,19 @@
+# Git restore
+
+[`git restore`](https://git-scm.com/docs/git-restore) 用于恢复工作树文件。
+
+`git restore` 的作用是将工作区但是不在暂存区的文件撤销更改。
+
+也就是还未使用 `git add` 将文件添加到暂存区。这时，我们可以使用 `git restore [file]` 将文件内容恢复到还未修改之前的状态。
+
+```bash
+git restore
+```
+
+而添加 `--staged` 选项可以将暂存区的文件撤出，但不会更改文件的内容。
+
+```bash
+git restore [file] --staged
+```
+
+每个 Git 命令的可选项有很多，详细内容请查阅文档。
diff --git "a/Git \345\222\214 Github/Git status \347\232\204\347\256\200\347\237\255\347\211\210\346\234\254\345\222\214\344\270\215\345\220\214\347\232\204 --porcelain \346\250\241\345\274\217.md" "b/Git \345\222\214 Github/Git status \347\232\204\347\256\200\347\237\255\347\211\210\346\234\254\345\222\214\344\270\215\345\220\214\347\232\204 --porcelain \346\250\241\345\274\217.md"
new file mode 100644
index 0000000..7c0660d
--- /dev/null
+++ "b/Git \345\222\214 Github/Git status \347\232\204\347\256\200\347\237\255\347\211\210\346\234\254\345\222\214\344\270\215\345\220\214\347\232\204 --porcelain \346\250\241\345\274\217.md"	
@@ -0,0 +1,71 @@
+# Git status 的简短版本和不同的 --porcelain 模式
+
+通常，我们需要查看工作区文件的状态，可以使用 `git status`：
+
+```bash
+$ git status
+Your branch is up to date with 'origin/master'.
+
+Changes not staged for commit:
+  (use "git add/rm <file>..." to update what will be committed)
+  (use "git restore <file>..." to discard changes in working directory)
+        deleted:    demo.js
+        modified:   package.json
+
+Untracked files:
+  (use "git add <file>..." to include in what will be committed)
+        config.js
+
+no changes added to commit (use "git add" and/or "git commit -a")
+```
+
+但它输出了很多冗长的内容，可能我们只想关心文件及其状态。
+
+我们可以执行带有 `--porcelain` 标志的 `git status` 命令，显示的信息如下：
+
+```bash
+$ git status --porcelain
+ D demo.js
+ M package.json
+?? config.js
+```
+
+使用带有 `--porcelain` 标志的 `git status` 更有效。但在阅读了 [git status 文档](https://git-scm.com/docs/git-status)之后，我发现还有一个更简便的 `-s` 或 `--short` 标志。
+
+```bash
+$ git status -s
+# or
+$  git status --short
+ D demo.js
+ M package.json
+?? config.js
+```
+
+乍一看，它们似乎非常相似，但有一个区别只在终端可见。
+
+![git status --porcelain](https://upload-images.jianshu.io/upload_images/18281896-4fe01be5800c3a0a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![git status -s](https://upload-images.jianshu.io/upload_images/18281896-43a825add2d35225.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+`git status -s` 突出显示文件状态信息的字符。这种高亮显示使阅读更容易。当使用 `--porcelain` 时，这种格式和颜色高亮显示是缺失的。
+
+## `git status -s` 和 `--porcelain` 的区别
+
+**`--porcelain` 标志是用来生成脚本易于解析的输出的。**假设您运行了一些自动化程序，在运行进一步的命令之前检查 `git` 仓库的状态。在这种情况下，您不希望在输出中包含帮助文本和终端颜色。
+
+此外，你也不希望 git 版本之间的输出变化或不同。**`--porcelain` 保证输出不会出现向后不兼容的变化**，这样你的脚本就不会因为 git 更新而中断。
+
+对于包含一些彩色指导的紧凑显示，你可以使用 `git status -s`，如果你要自动化 git 工作流，你可以使用 `git status -porcelain`。
+
+## 不同版本的 `git status --porcelain`
+
+`--porcelain` 有不同的包含版本（**记住它是向后兼容的**)。没有定义的版本 `--porcelain` 默认使用 `v1` 格式。以下是使用 `v2` 输出的内容：
+
+```bash
+$ git status --porcelain=v2
+1 .D N... 100644 100644 000000 a191d470f17410f90643ef91ba02af6edd6c1fc8 a191d470f17410f90643ef91ba02af6edd6c1fc8 demo.js
+1 .M N... 100644 100644 100644 00580fb668d16dda922edf2b05517d15daa7059e 00580fb668d16dda922edf2b05517d15daa7059e package.json
+? config.js
+```
+
+`v2` 包含更多的附加信息。如果您想了解关于 v2 的更多信息，请访问 [git status 文档](https://git-scm.com/docs/git-status#_porcelain_format_version_2)。
diff --git "a/Git \345\222\214 Github/Git \344\270\216 SVN \347\232\204\345\214\272\345\210\253\357\274\237.md" "b/Git \345\222\214 Github/Git \344\270\216 SVN \347\232\204\345\214\272\345\210\253\357\274\237.md"
new file mode 100644
index 0000000..4bfa7d9
--- /dev/null
+++ "b/Git \345\222\214 Github/Git \344\270\216 SVN \347\232\204\345\214\272\345\210\253\357\274\237.md"	
@@ -0,0 +1,12 @@
+# Git 与 SVN 的区别？
+
+Git 和 SVN 最大的区别在于 Git 是**分布式**的，而 SVN 是**集中式**的。因此我们不能再离线的情况下使用 SVN。如果服务器出现问题，我们就没有办法使用 SVN 来提交我们的代码。
+
+SVN 中的分支是整个版本库的复制的一份完整目录，而 Git 的分支是指针指向某次提交，因此 Git 的分支创建更加开销更小并且分支上的变化不会影响到其他人。SVN 的分支变化会影响到所有的人。
+
+SVN 的概念指令相对于 Git 来说要简单一些，比 Git 更容易上手。
+
+详细资料可以查阅：
+
+- [Comparing Workflows](https://www.atlassian.com/git/tutorials/comparing-workflows)
+- [前端必须知道的 Git 和 SVN 的区别](https://juejin.cn/post/6960836262894764039)
diff --git "a/Git \345\222\214 Github/Git \345\270\270\347\224\250\351\205\215\347\275\256\345\222\214\346\212\200\345\267\247.md" "b/Git \345\222\214 Github/Git \345\270\270\347\224\250\351\205\215\347\275\256\345\222\214\346\212\200\345\267\247.md"
new file mode 100644
index 0000000..43e6f4f
--- /dev/null
+++ "b/Git \345\222\214 Github/Git \345\270\270\347\224\250\351\205\215\347\275\256\345\222\214\346\212\200\345\267\247.md"	
@@ -0,0 +1,290 @@
+# Git 常用配置和技巧
+
+以下使用 `--global` 标志为全局配置命令，可以在全局的 `~/.gitconfig` 文件下查看。
+
+## 创建别名
+
+[Git Aliases](https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases) 允许我们为 Git 命令设置别名，极大地提高效率。
+
+使用下面的命令创建别名，将 `<alias>` 替换为别名名称，将 `<command>` 替换为要使用别名的命令：
+
+```bash
+git config --global alias.<alias> <command>
+```
+
+例如：
+
+```bash
+git config --global alias.co checkout
+git config --global alias.br branch
+```
+
+常用的别名有：
+
+```bash
+# 使用你喜欢的或自己的
+[alias]
+  co = checkout
+  cob = checkout -b
+  coo = !git fetch && git checkout
+  br = branch
+  brd = branch -d
+  st = status
+  aa = add -A .
+  unstage = reset --soft HEAD^
+  cm = commit -m
+  amend = commit --amend -m
+  fix = commit --fixup
+  undo = reset HEAD~1
+  rv = revert
+  cp = cherry-pick
+  pu = !git push origin `git branch --show-current`
+  fush = push -f
+  mg = merge --no-ff
+  rb = rebase
+  rbc = rebase --continue
+  rba = rebase --abort
+  rbs = rebase --skip
+  rom = !git fetch && git rebase -i origin/master --autosquash
+  save = stash push
+  pop = stash pop
+  apply = stash apply
+  rl = reflog
+  last = log -1 HEAD
+  logl = log --oneline
+  nah = git reset --hard; git clean -df
+  gac = git add . && git commit -a -m
+  wip = git add . && git commit -a -m 'WIP'
+```
+
+如果别名很多，你不必一条条设置，可以打开 `~/.gitconfig` 文件，将别名粘贴到 `[alias]` 下即可。
+
+接下来，试下效果：
+
+```bash
+git st
+git cm "chore: xxx"
+```
+
+> 请注意，您只能在 Git 2.20+ 中为别名设置别名。
+
+## shell 别名
+
+Git 别名还可以使用另一个强大的功能：shell 别名。如果在别名值前添加一个 `!`，则可以运行任何 shell 命令。
+
+例如，您可以添加以下别名，以便在每次输入 `git hello` 时打印出 `hello`。
+
+```bash
+git config --global alias.hello "!echo hello"
+```
+
+## 更好的 git 日志
+
+在我写的另一篇 [Git 日志](https://github.com/lio-zero/blog/blob/main/Git%20%E5%92%8C%20Github/Git%20%E6%97%A5%E5%BF%97.md#%E8%8E%B7%E5%8F%96%E6%BC%82%E4%BA%AE%E7%9A%84%E6%97%A5%E5%BF%97) 中，介绍了如何打印漂亮的 Git 日志。
+
+我们可以将其设置为一个别名：
+
+```bash
+git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
+```
+
+每次需要查看日志时，可以输入：
+
+```bash
+git lg
+```
+
+![Git 日志](https://upload-images.jianshu.io/upload_images/18281896-9eba90dfcbd93ae9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+或者，查看更改的行：
+
+```bash
+git lg -p
+```
+
+![Git 日志](https://upload-images.jianshu.io/upload_images/18281896-3e842e6049c04ec8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 更安全的强制推送
+
+有时，您需要将更改推送到远程存储库并覆盖文件。您可能习惯于使用 `git push --force` 或 `-f`。
+
+但是如果其他人已经将更改推送到同一分支，会发生什么？您的命令将清除他们的提交。**这肯定是不行的**。
+
+Git 有一种更安全的方式来推送更改和覆盖您的提交。您可以使用 `--force with lease`，而不是使用 `--force` 标志。此标志将防止您意外覆盖其他人的提交。
+
+您可以使用 `force-push` 为此编写别名：
+
+```bash
+git config --global alias.force-push "push --force-with-lease"
+```
+
+现在您可以运行 `git force-push`，这更容易记住。当然，为了节省几次按键操作，您还可以添加此别名的简短版本。
+
+```bash
+git config --global alias.fp force-push
+```
+
+## 设置默认推送分支名称
+
+默认情况下，推送时使用当前分支的名称作为远程分支的名称。
+
+- 使用 `git config push.default current` 将远程分支的名称设置为当前本地分支的名称作为默认名称。
+- 可以使用 `--global` 标志全局配置此选项。
+
+```bash
+$ git config --global push.default current
+
+$ git checkout -b my-branch
+$ git push -u
+# 推送 origin/my-branch
+```
+
+## 默认情况下禁用快进合并
+
+- 使用 `git config --add merge.ff false` 禁用所有分支的快进合并。
+- 您可以使用 `--global` 标志全局配置此选项。
+
+```bash
+$ git config --global --add merge.ff false
+
+$ git checkout master
+$ git merge my-branch
+# 即使有可能也不会快进合并
+```
+
+## 列出所有 Git 别名
+
+- 使用 `git config -l` 列出的配置文件中设置的所有变量。
+- 使用管道运算符（`|`）管道输出，`grep alias` 表示仅保留别名。
+- 使用管道运算符（`|`）管道传输，并使用 `sed` 的 `/^alias\.//g'` 删除别名。 每个别名的一部分。
+
+```bash
+$ git config -l | grep alias | sed 's/^alias\.//g'
+# st=status
+# co=checkout
+# rb=rebase
+```
+
+## 添加提交消息模板
+
+为当前存储库设置提交消息模板。可以使用 `git config commit.template` 指定 `<file>` 的提交当前库信息模板。
+
+```bash
+git config commit.template <file>
+```
+
+假设我们使用 `"commit-template"`作为我们的提交消息模板：
+
+```bash
+git config commit.template "commit-template"
+```
+
+`commit-template` 参考如下：
+
+```bash
+fix(<模块>): <描述>
+
+#<具体描述>
+
+#<问题单号>
+
+# type 字段包含:
+# feat：新功能（feature）
+# fix：修补bug
+# docs：文档（documentation）
+# style： 格式（不影响代码运行的变动）
+# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
+# test：增加测试
+# chore：构建过程或辅助工具的变动
+# scope：用于说明 commit 影响的范围，比如数据层、控制层、视图层等等。
+# subject：是 commit 目的的简短描述，不超过50个字符
+# Body：部分是对本次 commit 的详细描述，可以分成多行
+# Footer：用来关闭 Issue或以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法
+```
+
+详细的 Git 提交规范，可以参考 [Vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 或 [Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) 规范。
+
+## 配置 Git 用户信息
+
+- 使用 `git config user.email <email>` 为当前储存库设置用户的电子邮件。
+- 使用 `git config user.name <name>` 为当前储存库设置的用户名。
+- 您可以使用 `--global` 标志来配置全局用户信息。
+
+```bash
+git config [--global] user.email <email>
+git config [--global] user.name <name>
+```
+
+配置当前存储库的用户：
+
+```bash
+git config user.email "your_email@example.com"
+git config user.name "your_name"
+```
+
+配置全局 Git 用户：
+
+```bash
+git config --global user.email "your_email@example.com"
+git config --global user.name "your_name"
+```
+
+## 配置存储库的行尾
+
+- 使用 `git config core.eol [lf | crlf]` 配置行尾。
+- `lf` 是 UNIX 行的结尾（`\n`），而 `crlf` 是 DOS 行的结尾（`\r\n`）。
+
+```bash
+git config core.eol [lf | crlf]
+```
+
+配置为使用 UNIX 行结束符：
+
+```bash
+git config core.eol lf
+```
+
+## 自动更正 Git 命令
+
+为 Git 配置自动更正键入错误的命令。可以使用 `git config --global help.autocorrect 1` 使 Git 的自动更正。
+
+```bash
+git config --global help.autocorrect 1
+git sttaus # 自动改为 "git status" 运行
+```
+
+## 配置 Git 文本编辑器
+
+默认情况下打开 Git 使用的是 `vi` 编辑器，如果你没怎么使用过 UNIX 系统的话，可能不是很熟。你可以通过下面的命令来使用其他编辑器打开 Git。
+
+```bash
+git config --global core.editor <editor-command>
+```
+
+它通过调用 `<editor-command>` 作为 Git 文本编辑器。
+
+例如，将 VS Code 设置为 Git 文本编辑器：
+
+```bash
+git config --global core.editor "code --wait"
+```
+
+将 `vi` 作为 Git 的文本编辑器：
+
+```bash
+git config --global core.editor "vi"
+```
+
+## 编辑 Git 配置文件
+
+使用 `git config -e` 将在默认 Git 文本编辑器（如果未配置）中打开 Git 当前项目的配置文件：
+
+```bash
+git config -e
+```
+
+如果想查看全局配置文件，可以添加 `--global` 标志：
+
+```bash
+git config --global -e
+```
diff --git "a/Git \345\222\214 Github/Git \346\227\245\345\277\227.md" "b/Git \345\222\214 Github/Git \346\227\245\345\277\227.md"
new file mode 100644
index 0000000..4ed4bbb
--- /dev/null
+++ "b/Git \345\222\214 Github/Git \346\227\245\345\277\227.md"	
@@ -0,0 +1,97 @@
+# Git 日志记录
+
+查看日志，是我们经常需要使用到的操作，本文将带你了解的一些日志操作。
+
+[`git log`](https://git-scm.com/docs/git-log) 显示当前分支的提交日志。
+
+```bash
+git log
+```
+
+显示 `commit` 历史，以及每次 `commit` 发生变更的文件
+
+```bash
+git log --stat
+```
+
+## 保持日志列表简洁
+
+`--oneline` 选项可以保持日志列表简洁。
+
+```bash
+git log --oneline
+# or
+git log --pretty=oneline --abbrev-commit
+```
+
+## 指定提交数
+
+指定最近几个提交可以带上 `-*`（`*` 表示数字）
+
+```bash
+git log --oneline -5
+```
+
+## 显示特定分支的提交
+
+```bash
+git log master             # branch
+git log origin/master      # branch, remote
+git log v1.0.0             # tag
+git log master develop     # 多个分支 master 和  develop
+```
+
+## 获取漂亮的日志
+
+[`--pretty=format`](https://git-scm.com/docs/git-log#Documentation/git-log.txt---prettyltformatgt) 选项以给定格式漂亮地打印提交日志的内容：
+
+```bash
+git log --pretty=format:"%h - %an, %ar : %s"
+```
+
+为输出日志设置颜色：
+
+```bash
+git log --pretty=format:"`%Cred`%h`%Creset` - %Cgreen(%an, %ar)%Creset : %s"
+```
+
+- `%Cred` 将颜色切换为红色
+- `%Cgreen` 将颜色切换为绿色
+- `%Cblue` 将颜色切换为蓝色
+- `%Creset` 重置颜色
+
+详细查阅[文档](https://git-scm.com/docs/git-log#Documentation/git-log.txt-emCredem)。
+
+## 显示一个漂亮的提交历史图表
+
+`--graph` 选项可以以**图形**方式展示日志：
+
+```bash
+git log --graph
+git log --pretty=format:"%h %s" --graph
+```
+
+## 基于时间的日志记录
+
+您可以在特定时间范围内记录条目。非常适合检查每日项目的提交记录。
+
+```bash
+git log --since="yesterday" --oneline
+git log --since="last month" --oneline
+```
+
+如果需要找到给定日期范围之间的提交。可以使用 `--after` 和 `--before` 选项：
+
+```bash
+git log --after="2022-6-30" --before="2022-7-1" --oneline
+```
+
+## git reflog
+
+另外的一个常用的 [`git reflog`](https://git-scm.com/docs/git-reflog) 命令，它管理 reflog 信息，常用来恢复本地错误操作很重要的一个命令。
+
+```bash
+git reflog
+```
+
+即使执行 `git reset` 命令之后，您也可以使用 `git reflog` 命令找回那些丢弃掉的提交。
diff --git "a/Git \345\222\214 Github/GitHub repo \345\277\253\351\200\237\347\255\233\351\200\211\346\226\207\344\273\266.md" "b/Git \345\222\214 Github/GitHub repo \345\277\253\351\200\237\347\255\233\351\200\211\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..973bed6
--- /dev/null
+++ "b/Git \345\222\214 Github/GitHub repo \345\277\253\351\200\237\347\255\233\351\200\211\346\226\207\344\273\266.md"	
@@ -0,0 +1,9 @@
+# GitHub repo 快速筛选文件
+
+在任何 GitHub repo 存储库上，按下按键 `t` 按名称筛选文件，不再需要点击嵌套目录。
+
+![按名称筛选文件](https://upload-images.jianshu.io/upload_images/18281896-dbe062c2e1bebe23.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 更多资料
+
+[从 GitHub 快速转至 VS Code](https://github.com/lio-zero/blog/blob/main/VS%20Code/%E4%BB%8E%20GitHub%20%E5%BF%AB%E9%80%9F%E8%BD%AC%E8%87%B3%20VSCode.md)
diff --git "a/Git \345\222\214 Github/git clean \345\210\240\351\231\244\346\234\252\350\267\237\350\270\252\347\232\204\346\226\207\344\273\266\346\210\226\347\233\256\345\275\225.md" "b/Git \345\222\214 Github/git clean \345\210\240\351\231\244\346\234\252\350\267\237\350\270\252\347\232\204\346\226\207\344\273\266\346\210\226\347\233\256\345\275\225.md"
new file mode 100644
index 0000000..3301f5e
--- /dev/null
+++ "b/Git \345\222\214 Github/git clean \345\210\240\351\231\244\346\234\252\350\267\237\350\270\252\347\232\204\346\226\207\344\273\266\346\210\226\347\233\256\345\275\225.md"	
@@ -0,0 +1,32 @@
+# git clean 删除未跟踪的文件或目录
+
+删除未跟踪的文件或目录，是指未写在 `.gitignore` 文件中，并且未使用 `git add` 将变更的文件从工作区添加到暂存区的文件。
+
+要删除未跟踪的文件和目录，您可以执行：
+
+```bash
+# 删除未跟踪的文件。
+# f
+$ git clean -f
+
+# 删除未跟踪的文件和目录。
+# d
+$ git clean -fd
+```
+
+如果您还想删除被 `.gitignore` 隐藏的文件，可以使用以下命令：
+
+```bash
+# 忽略的文件、未被跟踪的文件和文件夹
+# x
+$ git clean -xfd
+```
+
+如果想要先查看哪些文件可能会被删除，而不执行删除动作，可以执行以下命令：
+
+```bash
+# n
+$ git clean -xfdn
+```
+
+> **使用时，要注意！**
diff --git "a/Git \345\222\214 Github/git init \345\222\214 git init --bare \346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md" "b/Git \345\222\214 Github/git init \345\222\214 git init --bare \346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md"
new file mode 100644
index 0000000..c3c5bea
--- /dev/null
+++ "b/Git \345\222\214 Github/git init \345\222\214 git init --bare \346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md"	
@@ -0,0 +1,46 @@
+# git init 和 git init --bare 有什么区别？
+
+- `git init` 创建非裸存储库
+- `git init --bare` 创建裸存储库
+
+裸存储库是没有工作副本的 git 存储库，因此 .git 的内容是该目录的顶级内容。
+
+查看以下区别：
+
+![git init](https://upload-images.jianshu.io/upload_images/18281896-acc0ee3a74899419.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![git init --bare](https://upload-images.jianshu.io/upload_images/18281896-c3630be5960c1a8e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+使用非裸存储库在本地工作，并使用裸存储库作为中央服务器与其他人共享您的更改。例如，当您在 `github.com` 上创建存储库时，它被创建为一个裸存储库。
+
+因此，在您的计算机中：
+
+```bash
+git init
+touch README
+git add README
+git commit -m "initial commit"
+```
+
+在服务器上：
+
+```bash
+cd /www/project
+git init --bare
+```
+
+在客户端，你推送：
+
+```bash
+git push username@server:/www/project main
+```
+
+然后，您可以通过将其添加为远程来保存键入内容。
+
+服务器端的存储库将通过拉取和推送的方式获得提交，而不是通过您编辑文件然后在服务器中提交文件，因此它是一个裸存储库。
+
+> 记住：`--bare` 用于远程存储库，而非本地存储库。
+
+## 更多资料
+
+[What is the difference between "git init" and "git init --bare"?](https://stackoverflow.com/questions/7861184/what-is-the-difference-between-git-init-and-git-init-bare)
diff --git "a/Git \345\222\214 Github/git pull \345\222\214 git fetch \347\232\204\345\214\272\345\210\253.md" "b/Git \345\222\214 Github/git pull \345\222\214 git fetch \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..b3179ab
--- /dev/null
+++ "b/Git \345\222\214 Github/git pull \345\222\214 git fetch \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,14 @@
+# git pull 和 git fetch 的区别
+
+来自 Git 文档 [`git pull`](http://git-scm.com/docs/git-pull)：
+
+> 在默认模式下，`git pull` 是 `git fetch` 后跟的简写 `git merge FETCH_HEAD`。
+
+- 当你 `pull` 时，Git 会尝试自动合并。它是上下文敏感的，因此 Git 会将任何拉入的提交合并到您当前工作的分支中。`pull` 自动合并提交，而不让您先查看它们。如果你不小心管理你的分支，你可能会经常遇到冲突。
+- 当你 `fetch` 时，Git 从目标分支收集当前分支中不存在的任何提交，并将其存储在本地存储库中。但是，它不会将它们与当前分支合并。如果您需要使存储库保持最新状态，但正在处理更新文件可能会导致冲突时，这一点尤其有用。要将提交集成到当前分支中，必须在之后使用 `merge`。
+
+当你 `fetch` 时，你可以先使用 `diff` 查看更新后的差异，在选择 `merge`。
+
+## 更多资料
+
+[What is the difference between 'git pull' and 'git fetch'?](https://stackoverflow.com/questions/292357/what-is-the-difference-between-git-pull-and-git-fetch)
diff --git "a/Git \345\222\214 Github/\344\270\272\344\270\215\345\220\214\347\232\204 GitHub \345\270\220\346\210\267\344\275\277\347\224\250\345\244\232\344\270\252 SSH \345\257\206\351\222\245.md" "b/Git \345\222\214 Github/\344\270\272\344\270\215\345\220\214\347\232\204 GitHub \345\270\220\346\210\267\344\275\277\347\224\250\345\244\232\344\270\252 SSH \345\257\206\351\222\245.md"
new file mode 100644
index 0000000..a92db9b
--- /dev/null
+++ "b/Git \345\222\214 Github/\344\270\272\344\270\215\345\220\214\347\232\204 GitHub \345\270\220\346\210\267\344\275\277\347\224\250\345\244\232\344\270\252 SSH \345\257\206\351\222\245.md"	
@@ -0,0 +1,79 @@
+# 为不同的 GitHub 帐户使用多个 SSH 密钥
+
+您通常使用 SSH 密钥来访问 GitHub 存储库，而不是输入用户名和密码，也就是免密码登录。这是与远程 GitHub 服务器通信的一种更安全、更推荐的方式。
+
+有时候你有不止一个 GitHub 账户。例如，一个用于访问个人存储库，另一个用于您的日常工作。
+
+问题是本地 Git 如何重新授权 GitHub 帐户附带的存储库。本文可能对您有所帮助。
+
+## 创建不同的密钥
+
+假设 `foo` 和 `bar` 是您希望在同一台计算机中使用的两个 GitHub 用户名。您可以按照[官方的 GitHub 指南生成 SSH 密钥](https://docs.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)。
+
+```bash
+# 为 foo 生成 SSH 密钥
+$ ssh-keygen -t ed25519 -C "foo@domain.com"
+```
+
+当要求您指定要保存密钥的文件时，不要使用默认密钥。将文件名更改为与帐户关联的名称，例如：
+
+```bash
+Enter a file in which to save the key (/home/you/.ssh/id_ed25519):
+`/home/you/.ssh/id_foo`
+```
+
+对 `bar` 帐户重复相同的步骤。现在，我们有两个私钥，`id_foo` 和 `id_bar` 位于 `~/.ssh` 文件夹中。
+
+## 向 SSH 代理添加密钥
+
+```bash
+# 删除缓存的密钥
+$ ssh-add -D
+
+# 在后台启动 ssh-agent
+$ eval "$(ssh-agent -s)"
+
+# 将 SSH 私钥添加到 ssh-agent
+$ ssh-add ~/.ssh/id_foo
+$ ssh-add ~/.ssh/id_bar
+```
+
+## 将密钥映射到 GitHub repo
+
+这一步让 SSH 知道应该为特定主机使用哪个私钥。
+
+```bash
+cd ~/.ssh
+touch config
+```
+
+将以下内容添加到 `config` 文件：
+
+```bash
+Host github.com-foo
+  HostName github.com
+  User git
+  IdentityFile ~/.ssh/id_foo
+  IdentitiesOnly yes
+
+Host github.com-bar
+  HostName github.com
+  User git
+  IdentityFile ~/.ssh/id_bar
+  IdentitiesOnly yes
+```
+
+您会发现，`github.com-foo` 和 `github.com-bar` 看起来是无效的主机，但实际上它们被视为别名。SSH 使用 `HostName` 选项对其进行映射，并在 `IdentityFile` 选项中使用私钥。
+
+## 更改 GitHub 设置
+
+假设 `foo` 帐户访问一个 GitHub 存储库，其 URL 为 `github.com/foo/a-foo-repos`。转到其克隆文件夹，并更改 `.git/config` 文件，如下所示。
+
+```bash
+[remote "origin"]
+  url = git@github.com-foo:foo/a-foo-repos.git
+```
+
+注意，这里使用了在上一步中创建的 SSH Host `github.com-foo`：
+
+为 `bar` 存储库应用类似的设置。
diff --git "a/Git \345\222\214 Github/\344\273\216 GitHub \345\277\253\351\200\237\350\275\254\350\207\263 VS Code.md" "b/Git \345\222\214 Github/\344\273\216 GitHub \345\277\253\351\200\237\350\275\254\350\207\263 VS Code.md"
new file mode 100644
index 0000000..ca85166
--- /dev/null
+++ "b/Git \345\222\214 Github/\344\273\216 GitHub \345\277\253\351\200\237\350\275\254\350\207\263 VS Code.md"	
@@ -0,0 +1,25 @@
+# 从 GitHub 快速转至 VS Code
+
+一旦您在 GitHub 上发现了一段代码，如果您想立即在项目中使用它，该怎么办？
+
+## github1s
+
+您可以使用 [github1s](https://github.com/conwnet/github1s)，而不是克隆 repo 并查找所需的文件。只需在 URL 中的 github 后添加 1s，按 **Enter** 键，repo 或单个文件将直接在 VS Code 中打开。
+
+例如，下面是 [awesome](https://github1s.com/sindresorhus/awesome) 打开后的效果：
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-b6f1a8d315a4241b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 快捷键 `.`
+
+另一种方式更加便捷，按一下键盘上的 `.` 键，即可打开线上 VS Code 编辑环境，您可以同步本地 VS Code 的配置。
+
+![线上 VS Code 编辑器](https://cdn.beekka.com/blogimg/asset/202108/bg2021082509.jpg)
+
+## Gitpod
+
+相比于前两种，[Gitpod](https://www.gitpod.io/) 提供了即时编码的开发环境。
+
+![Gitpod 演示](https://user-images.githubusercontent.com/22498066/135150975-23bba3a6-f099-48c5-83ed-a1a6627ff0e9.png)
+
+只需要在 GitHub 托管的项目地址前添加 `gitpod.io/#` 即可。
diff --git "a/Git \345\222\214 Github/\345\210\240\351\231\244\346\234\254\345\234\260\345\222\214\350\277\234\347\250\213 Git \345\210\206\346\224\257.md" "b/Git \345\222\214 Github/\345\210\240\351\231\244\346\234\254\345\234\260\345\222\214\350\277\234\347\250\213 Git \345\210\206\346\224\257.md"
new file mode 100644
index 0000000..d1d8eef
--- /dev/null
+++ "b/Git \345\222\214 Github/\345\210\240\351\231\244\346\234\254\345\234\260\345\222\214\350\277\234\347\250\213 Git \345\210\206\346\224\257.md"	
@@ -0,0 +1,56 @@
+# 删除本地和远程 Git 分支
+
+## 删除本地分支
+
+要删除本地分支，可以使用以下方法之一：
+
+```bash
+git branch -d <branch_name>
+git branch -D <branch_name>
+```
+
+- `-d` 选项是 `--delete` 的别名，它只在分支已经完全合并到其上游分支时删除该分支。如果您尝试删除当前选定的分支，您将收到错误消息。
+- `-D` 选项是 `--delete --force` 的别名，它删除“无论其合并状态如何”的分支。（强制删除）
+
+## 删除远程分支
+
+Git v1.5.0 删除远程分支使用：
+
+```bash
+git push <remote_name> :<branch_name>
+```
+
+Git v1.7.0 删除远程分支使用：
+
+```bash
+git push <remote_name> --delete <branch_name>
+```
+
+从 Git v2.8.0 开始，我们可以使用 `-d` 选项作为 `--delete` 的别名。使用这些语法取决于你使用的 Git 版本。
+
+示例：
+
+```bash
+git push origin :next
+```
+
+上面命令表示删除 `origin` 主机的 `next` 分支。
+
+## 删除本地远程跟踪分支
+
+如果需要删除远程上不再存在的任何远程分支的所有过时的本地远程跟踪分支，可以使用：
+
+```bash
+$ git branch --delete --remotes <remote_name>/<branch_name>
+$ git branch -dr <remote_name>/<branch_name>
+
+# 从 Git v1.6.6 开始
+$ git fetch <remote_name> --prune # 删除多个过时的远程跟踪分支
+$ git fetch <remote_name> -p      # 简写
+```
+
+> **注意**：在大多数情况下，`<remote_name>` 将是 `origin`
+
+## 更多资料
+
+[How do I delete a Git branch locally and remotely?](https://stackoverflow.com/questions/2003505/how-do-i-delete-a-git-branch-locally-and-remotely)
diff --git "a/Git \345\222\214 Github/\345\220\214\346\227\266\346\216\250\351\200\201\345\210\260 2 \344\270\252\345\255\230\345\202\250\345\272\223\345\271\266\344\277\235\346\214\201\345\220\214\346\255\245.md" "b/Git \345\222\214 Github/\345\220\214\346\227\266\346\216\250\351\200\201\345\210\260 2 \344\270\252\345\255\230\345\202\250\345\272\223\345\271\266\344\277\235\346\214\201\345\220\214\346\255\245.md"
new file mode 100644
index 0000000..8a2a4f0
--- /dev/null
+++ "b/Git \345\222\214 Github/\345\220\214\346\227\266\346\216\250\351\200\201\345\210\260 2 \344\270\252\345\255\230\345\202\250\345\272\223\345\271\266\344\277\235\346\214\201\345\220\214\346\255\245.md"	
@@ -0,0 +1,21 @@
+# 同时推送到 2 个存储库并保持同步
+
+我需要有 2 个 GitHub 存储库，具有相同的内容。
+
+每当我推送我的更改时，这些更改都必须发送到这两个存储库，而不需要任何额外的工作。
+
+我已经有一个包含一些代码的工作存储库，在 Git 中设置为 origin remote。
+
+我在 GitHub 上创建了一个新的空存储库，并在原有的储存库中设置添加一条新的 origin remote 与新的存储库建立连接：
+
+```bash
+git remote set-url --add --push origin git@github.com:lio-zero/blog.git
+git remote set-url --add --push origin git@github.com:lio-zero/news.git
+```
+
+- 使用 `--push` 可以操作推送 URL，而不是获取 URL。
+- 使用 `--add` 将添加新的 URL，而不是更改现有的 URL。
+
+就是这样。现在，执行 `git push` 将更改发送到两个存储库。
+
+当然，你可以同步更多。
diff --git "a/Git \345\222\214 Github/\345\234\250 Git \345\222\214 GitHub \344\270\255\351\207\215\345\221\275\345\220\215\351\273\230\350\256\244\345\210\206\346\224\257.md" "b/Git \345\222\214 Github/\345\234\250 Git \345\222\214 GitHub \344\270\255\351\207\215\345\221\275\345\220\215\351\273\230\350\256\244\345\210\206\346\224\257.md"
new file mode 100644
index 0000000..5ffff20
--- /dev/null
+++ "b/Git \345\222\214 Github/\345\234\250 Git \345\222\214 GitHub \344\270\255\351\207\215\345\221\275\345\220\215\351\273\230\350\256\244\345\210\206\346\224\257.md"	
@@ -0,0 +1,47 @@
+# 在 Git 和 GitHub 中重命名默认分支
+
+之前我在 GitHub 创建仓库使用的默认分支为 `master`。最近，我将默认分支切换为 `main`。
+
+为了同步本地分支与远程分支，我们需要采取一些步骤。
+
+下面图示是我在 GitHub 切换仓库的默认分支时，提供给我们如何同步本地分支与远程分支的步骤。
+
+![重命名默认分支](https://upload-images.jianshu.io/upload_images/18281896-0dc6ae649d923d99.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+以下是上图 👆 命令的大致分析。
+
+使用 `-m` 标志在本地移动默认分支。
+
+```bash
+git branch -m master main
+```
+
+上面的 `master` 是旧分支名称，`main` 是新分支名称。
+
+拉取最新代码，并建立本地分支与远程分支的追踪关系：
+
+```bash
+git fetch origin
+git branch -u origin/main main
+```
+
+将当前本地 HEAD 分支设置为指向 GitHub 上的新分支。
+
+```bash
+git remote set-head origin main
+# or
+git remote set-head origin -a
+```
+
+你可以显示的设置新的分支名，也可以使用 `-a` 将自动查询远程以确定其 HEAD。
+
+现在，您可以正常的推送消息了。
+
+但是如果你不知道远程默认分支名已被修改，您未切换和跟踪默认分支。这时您推送了新的提交，本来仓库的 `master` 分支就没了，这时推送会再次新建 `master` 分支。可以运行以下命令以删除旧的默认分支名。
+
+```bash
+$ git push origin --delete master
+
+To github.com:lio-zero/mail-push.git
+ - [deleted]         master
+```
diff --git "a/Git \345\222\214 Github/\345\234\250\344\270\215\345\210\207\346\215\242\345\210\206\346\224\257\347\232\204\346\203\205\345\206\265\344\270\213\346\237\245\347\234\213\344\270\215\345\220\214\345\210\206\346\224\257\344\270\255\347\232\204\346\226\207\344\273\266.md" "b/Git \345\222\214 Github/\345\234\250\344\270\215\345\210\207\346\215\242\345\210\206\346\224\257\347\232\204\346\203\205\345\206\265\344\270\213\346\237\245\347\234\213\344\270\215\345\220\214\345\210\206\346\224\257\344\270\255\347\232\204\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..b4905a6
--- /dev/null
+++ "b/Git \345\222\214 Github/\345\234\250\344\270\215\345\210\207\346\215\242\345\210\206\346\224\257\347\232\204\346\203\205\345\206\265\344\270\213\346\237\245\347\234\213\344\270\215\345\220\214\345\210\206\346\224\257\344\270\255\347\232\204\346\226\207\344\273\266.md"	
@@ -0,0 +1,20 @@
+# 在不切换分支的情况下查看不同分支中的文件
+
+我们可以使用以下命令查看另一个分支上特定文件的内容：
+
+```bash
+git show branch:file
+```
+
+- `branch` 表示目标分支的名称
+- `file` 表示文件的相对路径
+
+例如，`git show feature/tip:css/styles.css` 显示了位于 `feature/tip` 分支中的 `css/styles.css` 的文件内容。
+
+你也可以在你喜欢的编辑器中打开文件，例如 Vim 或 VS Code 编辑器：
+
+```bash
+git show branch:file | vim -
+# or
+git show branch:file | code -
+```
diff --git "a/Git \345\222\214 Github/\345\260\206\346\234\254\345\234\260 git \346\240\207\347\255\276\346\216\250\351\200\201\345\210\260 GitHub \344\270\212\347\232\204\350\277\234\347\250\213\344\273\223\345\272\223.md" "b/Git \345\222\214 Github/\345\260\206\346\234\254\345\234\260 git \346\240\207\347\255\276\346\216\250\351\200\201\345\210\260 GitHub \344\270\212\347\232\204\350\277\234\347\250\213\344\273\223\345\272\223.md"
new file mode 100644
index 0000000..3a8e5ca
--- /dev/null
+++ "b/Git \345\222\214 Github/\345\260\206\346\234\254\345\234\260 git \346\240\207\347\255\276\346\216\250\351\200\201\345\210\260 GitHub \344\270\212\347\232\204\350\277\234\347\250\213\344\273\223\345\272\223.md"	
@@ -0,0 +1,49 @@
+# 将本地 Git 标签推送到 GitHub 上的远程仓库
+
+## 将标签推送到 GitHub
+
+在 git 中推送标签类似于推送分支。唯一的区别是，它需要特定的标签名。
+
+```bash
+git push -u origin <tag_name>
+```
+
+以下示例，将 v0.1 标签推送至 GitHub：
+
+```bash
+git push -u origin v0.1
+
+Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
+To github.com:lio-zero/xxx.git
+ * [new tag]         v0.1 -> v0.1
+```
+
+## 检查标签是否已被推送
+
+要检查标签是否仅在本地可用，请运行：
+
+```bash
+git push --tags --dry-run
+```
+
+`--dry-run` 选项总结了下一次提交中将包含的内容。
+
+如果上述命令的输出状态为 **Everything up-to-date**，则表示没有可推送的标签。
+
+如果上述命令返回如下输出，则表示该标签可以推送。
+
+```bash
+To github.com:lio-zero/xxx.git
+ * [new tag]         v0.1 -> v0.1
+```
+
+## 其他常用命令
+
+- `git tag` 显示本地所有标签
+- `git ls-remote --tags` 查看远程所有标签
+- `git push -d origin <tag_name>` 删除远程特定标签
+- `git tag <tag_name>` 创建轻量标签
+- `git tag -a <tag_name> -m "message"` 创建带注释的标签
+- `git push --tags` 将所有标签推送到远程仓库
+- `git show <tag_name>` 显示特定标签的标签数据
+- `git tag -d <tag_name>` 删除特定标签
diff --git "a/Git \345\222\214 Github/\346\233\264\346\224\271 Git remote.md" "b/Git \345\222\214 Github/\346\233\264\346\224\271 Git remote.md"
new file mode 100644
index 0000000..314d8a5
--- /dev/null
+++ "b/Git \345\222\214 Github/\346\233\264\346\224\271 Git remote.md"	
@@ -0,0 +1,43 @@
+# 更改 Git remote
+
+假设您需要拷贝当前文件夹作为一个副本，存放在另一个 GitHub repo 中，接着该如何操作？
+
+首先，我们在终端运行：
+
+```bash
+git remote -v
+```
+
+这将列出现有的 GitHub **origin** 远程存储库。
+
+然后，运行：
+
+```bash
+git remote rm origin
+# or
+git remote remove origin
+```
+
+这删除了 origin remote，因此再次运行 `git remote -v` 不再返回任何内容。
+
+现在，你可以重新将本地仓库与远程仓库建立连接：
+
+```bash
+git remote add origin <url>
+```
+
+> origin 默认是远程仓库别名，url 可以是 https 或者 ssh 的方式建立链接。
+
+你还可以使用 `set-url` 命令在不删除远程 remote 的情况下，直接切换 origin URL：
+
+```bash
+git remote set-url origin <url>
+```
+
+## 其他常用 remote 命令
+
+其他常用的 [git-remote 命令](https://git-scm.com/docs/git-remote)：
+
+- `git remote show <name>` 显示某个远程仓库的信息
+- `git remote rename <old_name> <new_name>` 远程仓库重新命名
+- `git remote prune <name>` 删除与 `<name>` 关联的过时引用
diff --git "a/Git \345\222\214 Github/\347\224\250\344\272\216 GitHub markdown \345\222\214 Git \346\217\220\344\272\244\347\232\204 emoji \350\241\250\346\203\205.md" "b/Git \345\222\214 Github/\347\224\250\344\272\216 GitHub markdown \345\222\214 Git \346\217\220\344\272\244\347\232\204 emoji \350\241\250\346\203\205.md"
new file mode 100644
index 0000000..e54fb0e
--- /dev/null
+++ "b/Git \345\222\214 Github/\347\224\250\344\272\216 GitHub markdown \345\222\214 Git \346\217\220\344\272\244\347\232\204 emoji \350\241\250\346\203\205.md"	
@@ -0,0 +1,23 @@
+# 用于 GitHub markdown 和 Git 提交的 emoji 表情
+
+- [emoji](https://github.com/muan/emoji) 找到与您的想法相呼应的表情符号
+
+![emoji](https://upload-images.jianshu.io/upload_images/18281896-69fdceb3d31f315c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+其还提供了表情符号关键字库 [emojilib](https://github.com/muan/emojilib)。
+
+- [gitmoji](https://gitmoji.dev/) 提交消息的表情符号指南。
+
+![gitmoji](https://upload-images.jianshu.io/upload_images/18281896-2ba77d7303188e89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+它还提供了 [gitmoji-cli](https://github.com/carloscuesta/gitmoji-cli) 交互式命令行工具，用于在提交时使用表情符号。
+
+- [emoji-cheat-sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) 一份表情符号备忘单。
+
+![emoji-cheat-sheet](https://upload-images.jianshu.io/upload_images/18281896-ada16db4f6548c54.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+- [gist:7360908](https://gist.github.com/rxaviers/7360908) github markdown emoji 标记的完整列表
+- [git-commit-emoji-cn](https://github.com/liuchengxu/git-commit-emoji-cn) 😁 git commit message emoji 使用指南
+- [EMOJIALL](https://www.emojiall.com/) 提供了众多的 Emoji，并且支持多语言查找等
+
+![EMOJIALL](https://upload-images.jianshu.io/upload_images/18281896-a2494d99ab33e100.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/Git \345\222\214 Github/\350\256\276\347\275\256 Git SSH \345\257\206\351\222\245.md" "b/Git \345\222\214 Github/\350\256\276\347\275\256 Git SSH \345\257\206\351\222\245.md"
new file mode 100644
index 0000000..fe0fc2a
--- /dev/null
+++ "b/Git \345\222\214 Github/\350\256\276\347\275\256 Git SSH \345\257\206\351\222\245.md"	
@@ -0,0 +1,63 @@
+# 设置 Git SSH 密钥
+
+使用命令行使用 Git 时，最常见的处理身份验证的方法是使用 SSH 密钥。
+
+大多数基于 GUI 的客户端（如 [GitHub Desktop](https://desktop.github.com/)）都可以为您处理这个问题，但有时您需要命令行，因此设置 SSH 密钥非常有用。
+
+此外，有时您需要 SSH 密钥来执行有用的操作，例如在远程服务器上拉取存储库。
+
+## 计算机上的密钥
+
+SSH 密钥存储在 `~/.ssh` 文件夹中。
+
+您可以在其中拥有多个密钥，因为 SSH 密钥用于 Git 以外的其他事物。
+
+您可以通过以下命令列出所有 SSH 密钥：
+
+```bash
+ls -al ~/.ssh
+```
+
+如果你有现有的密钥，你会注意到它们成对存在，一个文件和另一个类似命名的以 `.pub` 结尾的文件：
+
+`.pub` 文件包含公钥，而另一个文件包含不应在任何地方共享的私钥。
+
+您不应该在任何地方共享私钥。如果丢失了私钥，则必须重新生成新的私钥/公钥对，因为没有私钥部分，身份验证无法成功完成。
+
+## 生成新密钥
+
+您可以使用 `ssh-keygen` 命令生成一个新的 SSH 密钥。它适用于所有 macOS、Linux 和现代 Windows 计算机，带有 Linux 子系统或 Git for Windows 包。
+
+以下是您使用的命令：
+
+```bash
+ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
+```
+
+最后一部分（在本例中填充了电子邮件地址）是注释。您可以输入任何您想要的电子邮件，它不必是您的 GitHub 帐户，甚至可以是一个随机字符串。如果可能存在歧义，了解谁生成了密钥会很有用。
+
+密钥生成程序将询问您要将密钥保存在哪里。如果这是第一个密钥，建议您使用 `id_rsa` 作为文件名，但您最好选择一个能够记住为其生成服务的文件名，例如 `github_rsa`。
+
+您可以选择添加密码。我强烈建议设置密码。macOS 会将密码存储在钥匙链中，这样您就不必每次都重复。
+
+## 将密钥添加到 GitHub
+
+在 GitHub **Setting** 中，找到 **SSH and GPG keys** 菜单，并点击 **New SSH key**：
+
+![New SSH key](https://upload-images.jianshu.io/upload_images/18281896-94295e0b44fe9f08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+设置一个有意义的标题，并在 **key** 部分填上，上面生成的秘钥。
+
+您可以打开 `.pub` 密钥文件，复制其内容并将其粘贴到此框中。也可以使用任何 CLI 命令（如 `cat id_rsa.pub`）来执行此操作。
+
+一旦您将该字符串保存到 GitHub，您的 Git 客户端将拥有与删除服务器通信所需的凭据。
+
+## 使用多个键
+
+建议对每个要使用的服务使用不同的 SSH 密钥。
+
+如果您决定更新它，则可以很容易地使特定服务上的密钥无效，而无需在您使用的所有服务上更改它，无论是因为泄露/公开暴露其他其他原因。
+
+## 更多资料
+
+[为不同的 GitHub 帐户使用多个 SSH 密钥](https://github.com/lio-zero/blog/blob/main/Git%20%E5%92%8C%20Github/%E4%B8%BA%E4%B8%8D%E5%90%8C%E7%9A%84%20GitHub%20%E5%B8%90%E6%88%B7%E4%BD%BF%E7%94%A8%E5%A4%9A%E4%B8%AA%20SSH%20%E5%AF%86%E9%92%A5.md)
diff --git "a/HTML/Element \344\270\216 Node \347\232\204\345\214\272\345\210\253.md" "b/HTML/Element \344\270\216 Node \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..0a6fe05
--- /dev/null
+++ "b/HTML/Element \344\270\216 Node \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,39 @@
+# Element 与 Node 的区别
+
+一个网页是由一个节点树构成的。考虑到常见 HTML 页面的结构如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body></body>
+</html>
+```
+
+树的根节点是一个文档节点，它有两个子节点，`doctype` 和 `html` 标签。`html` 标签由其子项 `head` 和 `body` 等构成。
+
+每个节点都有一个名为 `nodeType` 的属性，该属性是标识其类型的数字。它可以用来区分节点的类型。例如，以下 `div` 只有一个子节点，其值为 `Hello`：
+
+```html
+<div id="ele">Hello</div>
+```
+
+`div` 节点是元素节点，而其子节点 `Hello` 是文本节点。下表取自 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)，显示了常用的节点类型：
+
+- `Node.ELEMENT_NODE` (`1`) — 一个元素节点，它是一个 HTML 标签，如 `<div>`、`<p>` 等。
+- `Node.TEXT_NODE` (`3`) — 元素节点内的实际文本。
+- `Node.COMMENT_NODE` (`8`) — 注释节点，例如 `<!-...-->`。
+- `Node.DOCUMENT_NODE` (`9`) — 文档节点。
+- `Node.DOCUMENT_TYPE_NODE` (`10`) — 文档类型节点，例如 `<!DOCTYPE html>`。
+- etc
+
+```js
+document.nodeType // 9
+```
+
+**简而言之，Node 表示文档树中的单个节点，Element 是一种特定类型的节点，即 HTML 标签。**
diff --git "a/HTML/Emmet VS Code \346\214\211\351\224\256\347\273\221\345\256\232\344\273\245\346\217\220\345\215\207 HTML \347\274\226\350\276\221\346\225\210\347\216\207.md" "b/HTML/Emmet VS Code \346\214\211\351\224\256\347\273\221\345\256\232\344\273\245\346\217\220\345\215\207 HTML \347\274\226\350\276\221\346\225\210\347\216\207.md"
new file mode 100644
index 0000000..a3a361a
--- /dev/null
+++ "b/HTML/Emmet VS Code \346\214\211\351\224\256\347\273\221\345\256\232\344\273\245\346\217\220\345\215\207 HTML \347\274\226\350\276\221\346\225\210\347\216\207.md"	
@@ -0,0 +1,121 @@
+# Emmet VS Code 按键绑定以提升 HTML 编辑效率
+
+Emmet 是一个自动将代码片段扩展为 HTML 的工具。它包含在 VS Code 中。
+
+例如以下片段：
+
+```txt
+div.someClass>span*5
+```
+
+将展开为：
+
+```html
+<div class="someClass">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+</div>
+```
+
+Emmet 还提供了其他一些快捷方式提升 HTML 开发效率。
+
+> 推荐：[Emmet 语法](https://github.com/lio-zero/blog/blob/master/HTML/Emmet%20%E8%AF%AD%E6%B3%95.md)
+
+## 添加 VS Code 快捷方式
+
+> 组合键：`Ctrl + K` 和 `Ctrl + S` 打开键盘快捷键窗口，在搜索框输入 Emmet，可以找出内置 Emmet 可以绑定热键的特定操作。
+
+按住 `Ctrl + Shift + p` 打开命令面板，输入 `shortcut`，找到**打开键盘快捷键方式**的选项。
+
+将打开一个按键绑定的 `keybindings.json` 文件：
+
+```json
+[]
+```
+
+每个添加的自定义快捷方式都反映在此文件中，并具有以下结构：
+
+```json
+{
+  "key": "<key combination>",
+  "command": "<command to run>"
+}
+```
+
+## VS Code 中可用的 Emmet 命令
+
+Emmet 的可用命令如下：
+
+```txt
+editor.emmet.action.balanceIn
+editor.emmet.action.balanceOut
+editor.emmet.action.decrementNumberByOne
+editor.emmet.action.decrementNumberByOneTenth
+editor.emmet.action.decrementNumberByTen
+editor.emmet.action.evaluateMathExpression
+editor.emmet.action.incrementNumberByOne
+editor.emmet.action.incrementNumberByOneTenth
+editor.emmet.action.incrementNumberByTen
+editor.emmet.action.matchTag
+editor.emmet.action.mergeLines
+editor.emmet.action.nextEditPoint
+editor.emmet.action.prevEditPoint
+editor.emmet.action.reflectCSSValue
+editor.emmet.action.removeTag
+editor.emmet.action.selectNextItem
+editor.emmet.action.selectPrevItem
+editor.emmet.action.splitJoinTag
+editor.emmet.action.toggleComment
+editor.emmet.action.updateImageSize
+editor.emmet.action.updateTag
+editor.emmet.action.wrapIndividualLinesWithAbbreviation
+editor.emmet.action.wrapWithAbbreviation
+```
+
+以下是其中的部分示例。我们使用 `alt + e` 和 `alt + *` 组合，按键可能会因为系统和其他软件冲突，调整到自己舒服即可。
+
+**平滑向内/平滑向外** — 从当前插入符号位置搜索标签或标签的内容边界并选择它。
+
+```json
+[
+  {
+    "key": "alt+e alt+i",
+    "command": "editor.emmet.action.balanceIn"
+  },
+  {
+    "key": "alt+e alt+o",
+    "command": "editor.emmet.action.balanceOut"
+  }
+]
+```
+
+**转到配对标签** — 在开始和结束元素标签之间跳转。
+
+```json
+[
+  {
+    "key": "alt+e alt+e",
+    "command": "editor.emmet.action.matchTag"
+  }
+]
+```
+
+**删除标签** — 从 HTML 树中删除标签但保留其内部 HTML。
+
+```json
+[
+  {
+    "key": "alt+e alt+d",
+    "command": "editor.emmet.action.removeTag"
+  }
+]
+```
+
+另外，如果你不想自己配置热键，可以安装 [Emmet Keybindings](https://marketplace.visualstudio.com/items?itemName=agutierrezr.emmet-keybindings) 扩展，它是一组用于 VS Code 的 Emmet 键绑定。它可以用作预定义的键绑定组，以防你不知道映射到哪个键。
+
+## 更多资料
+
+还有许多有用的缩写，例如 [Wrap with Abbreviation](https://docs.emmet.io/actions/wrap-with-abbreviation/) 和 [Remove Tag](https://docs.emmet.io/actions/remove-tag/) ，查阅它们以了解更多。
diff --git "a/HTML/Emmet \350\257\255\346\263\225.md" "b/HTML/Emmet \350\257\255\346\263\225.md"
new file mode 100644
index 0000000..18cf1bd
--- /dev/null
+++ "b/HTML/Emmet \350\257\255\346\263\225.md"	
@@ -0,0 +1,253 @@
+# Emmet 语法
+
+[Emmet](https://docs.emmet.io/)（前身为 Zen Coding）是许多流行的文本编辑器的插件，可以极大地改善 HTML 和 CSS 工作流程，提高前端开发效率。
+
+Emmet 在大部分编辑器都支持，如：Sublime Text、VS Code 等。使用时，按下面所接受的基本语法编写，按 **tab** 键或者回车就会自动生成对应的 HTML 标签。
+
+官网也提供了一份超详细的[备忘单](https://docs.emmet.io/cheat-sheet/) 和 [PDF 文档](https://docs.emmet.io/cheatsheet-a5.pdf)。以下内容将以备忘单为参考，提供常用的基本语法。
+
+## HTML 模板
+
+从 HTML 模板开始，在空的 html 文件中输入 `!` 会触发 Emmet 的建议：
+
+```html
+!
+```
+
+它将生成一个 HTML5 基本模板。
+
+## 后代节点：>
+
+```css
+nav>ul>li
+```
+
+效果如下：
+
+```html
+<nav>
+  <ul>
+    <li></li>
+  </ul>
+</nav>
+```
+
+## 兄弟节点：+
+
+```css
+section>p+p+p
+```
+
+效果如下：
+
+```html
+<section>
+  <p></p>
+  <p></p>
+  <p></p>
+</section>
+```
+
+## 上级节点：^
+
+```css
+section>header>h1^footer
+```
+
+效果如下：
+
+```html
+<section>
+  <header>
+    <h1></h1>
+  </header>
+  <footer></footer>
+</section>
+```
+
+当嵌套过深，可以使用多個 `^^`
+
+```css
+.container>header>h1>span^^footer
+```
+
+效果如下：
+
+```html
+<div class="container">
+  <header>
+    <h1><span></span></h1>
+  </header>
+  <footer></footer>
+</div>
+```
+
+## ID（#）和类（.）
+
+```css
+ul.menu>li.menu__item+li#id_item+li.menu__item#active
+```
+
+效果如下：
+
+```html
+<ul class="menu">
+  <li class="menu__item"></li>
+  <li id="id_item"></li>
+  <li class="menu__item" id="active"></li>
+</ul>
+```
+
+## 分组：()
+
+```css
+section>(header>nav>ul>li)+footer>p
+```
+
+效果如下：
+
+```html
+<section>
+  <header>
+    <nav>
+      <ul>
+        <li></li>
+      </ul>
+    </nav>
+  </header>
+  <footer>
+    <p></p>
+  </footer>
+</section>
+```
+
+可以与 `*` 结构，生成重复结构
+
+```css
+ul>(li>a[href="#"]{item $})*3
+```
+
+效果如下：
+
+```html
+<ul>
+  <li><a href="#">item 1</a></li>
+  <li><a href="#">item 2</a></li>
+  <li><a href="#">item 3</a></li>
+</ul>
+```
+
+## 重复：*
+
+```css
+ul>li*3
+```
+
+效果如下：
+
+```html
+<ul>
+  <li></li>
+  <li></li>
+  <li></li>
+</ul>
+```
+
+## 编号：$
+
+当 `$` 符号出现一次时，从 1 开始。当 `$$...` 出现多个时，从 0 开始。
+
+```css
+ul>li.item$*3
+ul>li.item$$*3
+ul>li.item$@-*3
+ul>li.item$@3*5
+```
+
+效果如下：
+
+```html
+<ul>
+  <li class="item1"></li>
+  <li class="item2"></li>
+  <li class="item3"></li>
+</ul>
+<ul>
+  <li class="item01"></li>
+  <li class="item02"></li>
+  <li class="item03"></li>
+</ul>
+<ul>
+  <li class="item3"></li>
+  <li class="item2"></li>
+  <li class="item1"></li>
+</ul>
+<ul>
+  <li class="item3"></li>
+  <li class="item4"></li>
+  <li class="item5"></li>
+</ul>
+<ul>
+  <li class="item3"></li>
+  <li class="item4"></li>
+  <li class="item5"></li>
+  <li class="item6"></li>
+  <li class="item7"></li>
+</ul>
+```
+
+## 属性：[]
+
+```css
+input[type="text"]
+div[data-attr="test"]
+```
+
+效果如下：
+
+```html
+<input type="text" />
+<div data-attr="test"></div>
+```
+
+## 文本：{}
+
+```css
+p{一段文本}
+```
+
+效果如下：
+
+```html
+<p>一段文本</p>
+```
+
+## 隐式标签
+
+隐式标签表示 Emmet 可以省略某些标签名。
+
+```css
+.container
+em>.default-inline
+ul>.default-list
+table>.default-table-row>.default-table-column
+select>.default-select
+```
+
+效果如下：
+
+```html
+<div class="container"></div>
+<em><span class="text"></span></em>
+<ul>
+  <li class="list"></li>
+</ul>
+<table>
+  <tr class="table-row">
+    <td class="table-column"></td>
+  </tr>
+</table>
+<select name="" id="">
+  <option class="select"></option>
+</select>
+```
diff --git "a/HTML/HTML HTML5 \345\237\272\347\241\200\347\237\245\350\257\206 \342\200\224 \351\235\242\350\257\225\351\242\230\344\270\223\347\224\250.md" "b/HTML/HTML HTML5 \345\237\272\347\241\200\347\237\245\350\257\206 \342\200\224 \351\235\242\350\257\225\351\242\230\344\270\223\347\224\250.md"
new file mode 100644
index 0000000..505c7a9
--- /dev/null
+++ "b/HTML/HTML HTML5 \345\237\272\347\241\200\347\237\245\350\257\206 \342\200\224 \351\235\242\350\257\225\351\242\230\344\270\223\347\224\250.md"	
@@ -0,0 +1,1965 @@
+# HTML HTML5 基础知识 — 面试题专用
+
+## DTD 介绍
+
+- DTD（Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏 览器将使用这些规则检查页面的有效性并且采取相应的措施。
+- DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）
+
+## 什么是 HTML？
+
+HTML 是网页的基础。它代表**超文本标记语言**。
+
+作为一个 Web 用户，当你访问本页面时，这个过程看起来是这样的：
+
+- 在设备上打开 Web 浏览器应用程序。
+- 单击指向此页面的链接或直接在地址栏中键入 URL。
+- 运行此网站的 Web 服务器接收来自您和您的浏览器的请求，并向浏览器发送一些 HTML 代码。
+- 浏览器下载 HTML 代码，对其进行解析，并在屏幕上显示结果。
+
+这就是为什么这个页面会显示你现在正在阅读的内容。HTML 是用来表示构成此页面的各种元素的语言。
+
+## SGML 、 HTML 、XML 和 XHTML 的区别？
+
+- SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言， 是所有电子文档标记语言的起源
+- HTML（HyperText Markup Language）是超文本标记语言，它定义了网页内容的含义和结构。
+- XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
+- XHTML 是一个基于 XML 的标记语言，他与 HTML 没什么本质的区别，但他比 HTML 更加严格。
+- 为了规范 HTML，W3C 结合 XML 制定了 XHTML1.0 标准，这个标准没有增加任何新的标签，只是按照 XML 的要求来规范 HTML。两者最主要的区别是：
+  - 文档顶部 `doctype` 声明不同，XHTML 的 doctype 顶部声明中明确规定了 xhtml DTD 的写法
+  - 元素必须始终正确嵌套
+  - 标签必须始终关闭
+  - 标签名必须小写
+  - 特殊字符必须转义
+  - 文档必须有根元素
+  - 属性值必须用双引号 `""` 括起来
+  - 禁止属性最小化（例如，必须使用 `checked="checked"` 而不是 `checked`）
+
+## DOCTYPE 有什么用？
+
+- [`<!DOCTYPE>`](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) 声明位于 HTML 文档中的第一行，处于 `<html>` 标签之前。告知浏览器的解析器使用标准模式渲染文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
+
+```js
+// 返回当前文档关联的文档类型定义（DTD），如果当前文档没有 DTD，则该属性返回 null。
+document.doctype
+```
+
+## 标准模式与兼容模式各有什么区别？它们有何意义？
+
+- **标准模式**：又称严格模式，是指浏览器按照 W3C 标准解析代码。
+  - 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
+- **兼容模式**：又称怪异模式或混杂模式，是指浏览器用自己的方式解析代码。
+  - 在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
+- **如何区分**：
+  - 在 HTML4.01 标准中，浏览器解析时到底使用标准模式还是兼容模式，与网页中的 DTD 直接相关，因为 HTML 4.01 基于 SGML，DTD 规定了标记语言的规则，这样浏览器才能正确地呈现。 且有三种
+  - HTML5 不基于 SGML，因此不需要对 DTD 进行引用。只需要在顶部声明 `<!DOCTYPE html>`
+- **目的**：防止呈现文档时浏览器切换到 “兼容模式”。
+- [怪异模式和标准模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)
+- [怪异模式（Quirks Mode）对 HTML 页面的影响](https://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)
+
+## 页面导入样式时，使用 link 和 @import 有什么区别？
+
+- `link` 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 `@import` 是 CSS 提供的，只能用于加载 CSS；
+- 页面被加载的时，`link` 会同时被加载，而 `@import` 引用的 CSS 会等到页面被加载完再加载；
+- `@import` 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 `link` 是 XHTML 标签，无兼容问题；
+- `link` 方式的样式的权重高于 `@import` 的权重。
+
+## HTML 中 form 里 action 方法的 Get 和 Post 有什么区别？
+
+- Get：Form 的默认方法。
+- Get 是用来从服务器上获得数据。Post 是用来向服务器上传递数据
+- Get 将表单中数据的按照 name=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用 "?" 连接，而各个变量之间使用 "&" 连接。Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL
+- Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中。Post 的所有操作对用户来说都是不可见的，其放置 request body 中
+- Get 传输的数据量小，这主要是因为受 URL 长度限制。Post 可以传输大量的数据，所以在上传文件只能使用 Post
+- Get 限制 Form 表单的数据集的值必须为 ASCII 字符。Post 支持整个 ISO10646 字符集
+- Get 请求浏览器会主动 cache。Post 支持不会
+- Get 请求参数会被完整保留在浏览历史记录中。Post 中的参数不会被保留。
+- GET 和 POST 本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
+- GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。
+
+## Meta viewport 原理是什么？
+
+- meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时当设置 `user-scalbale="no"` 时不允许用户进行手动缩放
+- viewport 的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport；目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；
+- **viewport 属性值**
+
+| 属性          | 描述                                   |
+| ------------- | -------------------------------------- |
+| width         | 设备的虚拟视口的宽度。                 |
+| height        | 设备的虚拟视口的高度。                 |
+| device-width  | 设备屏幕的物理宽度。                   |
+| device-height | 设备屏幕的物理高度。                   |
+| initial-scale | 访问页面时的初始缩放。1.0 无法缩放。   |
+| user-scalable | 允许设备放大和缩小，值为 yes 或 no。   |
+| minimum-scale | 允许用户的最小缩放值，1.0 表无法缩放。 |
+| maximum-scale | 允许用户的最大缩放值，1.0 表无法缩放。 |
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+```
+
+## Meta 的目的是什么？
+
+- `meta` 元素可用于包含描述 HTML 文档属性的名称/值对，如作者，字符编号，关键字列表，文档作者等信息
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- 推荐 Meta Tags -->
+    <meta charset="utf-8" />
+    <meta name="language" content="english" />
+    <meta http-equiv="content-type" content="text/html" />
+    <meta name="author" content="Author Name" />
+    <meta name="designer" content="Designer Name" />
+    <meta name="publisher" content="Publisher Name" />
+    <meta name="no-email-collection" content="name@email.com" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <!-- 搜索引擎优化 Meta Tags -->
+    <meta name="description" content="Project Description" />
+    <meta
+      name="keywords"
+      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
+    />
+    <meta name="robots" content="index,follow" />
+    <meta name="revisit-after" content="7 days" />
+    <meta name="distribution" content="web" />
+    <meta name="robots" content="noodp" />
+
+    <!-- 可选 Meta Tags-->
+    <meta name="distribution" content="web" />
+    <meta name="web_author" content="" />
+    <meta name="rating" content="" />
+    <meta name="subject" content="Personal" />
+    <meta name="title" content=" - Official Website." />
+    <meta name="copyright" content="Copyright 2020" />
+    <meta name="reply-to" content="" />
+    <meta name="abstract" content="" />
+    <meta name="city" content="Bangalore" />
+    <meta name="country" content="INDIA" />
+    <meta name="distribution" content="" />
+    <meta name="classification" content="" />
+
+    <!-- 移动设备上 HTML 页面的 Meta Tgas -->
+    <meta name="format-detection" content="telephone=yes" />
+    <meta name="HandheldFriendly" content="true" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+
+    <!-- http-equiv Tags -->
+    <meta http-equiv="Content-Style-Type" content="text/css" />
+    <meta http-equiv="Content-Script-Type" content="text/javascript" />
+
+    <title>HTML5 Meta Tags</title>
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
+- Meta Refresh
+
+```html
+<!-- 在5秒钟内重定向到提供的 URL。设置为0可立即重定向 -->
+<meta
+  http-equiv="refresh"
+  content="3;url=https://juejin.cn/user/96412754251390"
+/>
+```
+
+- Note：如果你的网站不是专门为响应而设计的，并且在这个尺寸下工作得很好，不要使用响应元标签，因为它会让体验变得更糟。
+- [Stop using the viewport meta tag (until you know how to use it)](http://www.javierusobiaga.com/blog/stop-using-the-viewport-tag-until-you-know-ho/)
+- [metatags](https://www.metatags.org/all-meta-tags-overview/)
+
+## 什么是替换元素与非替换元素
+
+- **替换元素**：就是浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸（宽高或宽高比）。
+  - 在 html 中像这样的元素有 `img`，`input`，`textarea`，`select`，`object`，这些都是替换元素，这些元素都没有实际的内容。
+- **非替换元素**：html 中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来。
+  - 如：p 标签，浏览器会直接显示 p 标签里的内容。
+- tips：替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比如嵌入的文档 `iframe`，`audio`，`canvas` 在某些情况下也为替换元素。
+
+## 块级元素和行内元素的区别？
+
+- HTML4.01 中，元素被分成两大类：[inlink（行内元素）](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements) 与 [block（块级元素）](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements)。区别如下：
+
+| 块级元素                       | 行内元素                                                                                       |
+| ------------------------------ | ---------------------------------------------------------------------------------------------- |
+| 独占一行                       | 不独占一行                                                                                     |
+| 可以设置宽高（盒模型）         | 不可以设置宽高，宽高由元素内部的内容决定，`padding` 和 `margin` 的 `top/bottom` 不会对元素生效 |
+| 可以包含行内元素和其他块级元素 | 行内元素只能包含文本和其他行内元素。                                                           |
+
+- 默认情况下是这样，但可以利用 `display` 来修改其为块级还是行内
+
+## 块级元素和行内元素分别有哪些？ 空（void）元素有哪些？
+
+- CSS 规范规定，每个元素都有 `display` 属性，每个元素都有默认的 `display` 值。例如：
+  - div 默认`display` 属性值为 `block`，为块级元素；
+  - span 默认 `display` 属性值为 `inline`，为行内元素。
+- 块级元素：
+  - `<h1>-<h6>`、`<p>`、`<div>`、`<ul>`、`<ol>`、`<form>`、`<table>`、`<address>`、`<blockquote>`、`<center>`、`<dir>`、`<dl>`、`<fieldset>`、`<hr>`、`<menu>`、`<noscript>`、`<pre>`、`<noframes>`、`<isindex>`
+  - 当元素的 `display` 属性为 `block`、`list-item` 或 `table` 时，该元素将成为 “块级元素”。
+- 行内元素：
+  - `<a>`、`<img>`、`<input>`、`<span>`、`<textarea>`、`<label>`、`<select>`、`<abbr>`、`<acronym>`、`<b>`、`<bdo>`、`<big>`、`<br>`、`<cite>`、`<code>`、`<dfn>`、`<em>`、`<font>`、`<i>`、`<kbd>`、`<q>`、`<s>`、`<samp>`、`<small>`、`<strike>`、`<strong>`、`<sub>`、`<sup>`、`<tt>`、`<u>`
+  - 当元素的 `display` 属性为 `inline`、`inline-block` 或 `inline-table` 时，该元素将成为 “行内元素”
+- 常见的空元素：标签内没有内容的 HTML 标签被称为空元素。
+  - `<br>`、`<hr>`、`<img>`、`<input>`、`<link>`、`<meta>`
+- 不常见的空元素：`<area>`、`<base>`、`<col>`、`<command>`、`<embed>`、`<keygen>`、`<param>`、`<source>` `<track>`、`<wbr>`
+
+## 什么是可选标签？为什么要使用它？
+
+- 在 HTML 中，某些元素具有可选标签。实际上，即使元素本身是必需的，也可以从 HTML 文档中完全删除某些元素的开始和结束标签。
+
+- `p`，`li`，`td`，`tr`，`th`，`html`，`head`，`body` 等。如：
+
+```html
+<p>Paragraph one.</p>
+<p>Paragraph two.</p>
+<p>Paragraph three.</p>
+```
+
+- 您不必提供 `</p>` 结束标签。浏览器会检测到它需要它们，并且无论如何都会正确显示在 DOM 中。但这可能带给你编写上的困难！
+- 您可以节省一些字节并减少需要在 html 文件中下载的字节。
+
+> 为了便于阅读，当您的标签内有内容/文本时，带上结束标签。
+
+## 简述一下 src 与 href 的区别？
+
+- src 用于引用资源，替换当前元素；href 用于在当前文档和引用资源之间确立联系。
+- href（hyperReference）即超文本引用：浏览器遇到并行下载资源，不阻塞页面解析，与 link 引入 css 一样，浏览器并行下载 css 不阻塞页面解析
+  - href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
+- src （resource）即资源：当浏览器遇到 src 时，会暂停页面解析，直到该资源下载或执行完毕，这也是 script 标签之所以放底部的原因
+  - src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
+  - 在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
+  - 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。
+
+## img 上 title 与 alt
+
+- `title` 是鼠标放在图片上面时显示的文字，`title` 是对图片的描述和进一步的说明。
+- `alt` 定义了图像的备用文本描述。
+- tips：浏览器并非总是会显示图像。当有下列情况时，`alt` 属性可以为图像提供替代的信息：
+  - 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
+  - 用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）
+  - 图像文件无效，或是使用了[不支持的格式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#Supported_image_formats)
+  - 浏览器禁用图像等
+  - tips：建议尽可能地通过 `alt` 属性提供一些有用的信息。
+
+```html
+<!-- × -->
+<img src="wenhao.jpg" alt="图片" />
+
+<!-- √ -->
+<img src="wenhao.jpg" alt="满脸问号的男人" />
+```
+
+### **图像上 alt 属性的用途是什么？**
+
+- 如果用户无法查看图像，`alt` 属性将为图像提供可选信息。`alt` 属性应该用来描述任何图像，除了那些仅用于装饰目的的图像，在这种情况下，应该将其留空。
+- 装饰性图像应具有空 `alt` 属性。
+- 网络爬虫使用 `alt` 标签来理解图像内容，因此它们被认为对搜索引擎优化（SEO）很重要。
+- 在 `alt` 标签的末尾增加可访问性。
+
+## 为什么在 img 标签中使用 srcset 属性？请描述浏览器遇到该属性后的处理过程。
+
+- 为了设计响应式图片。我们可以使用两个新的属性 `srcset` 和 `sizes` 来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
+- **srcset**：定义了我们允许浏览器选择的图像集，以及每个图像的大小。
+- **sizes**：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
+- 处理过程：
+  - 查看设备宽度
+  - 检查 sizes 列表中哪个媒体条件是第一个为真
+  - 查看给予该媒体查询的槽大小
+  - 加载 srcset 列表中引用的最接近所选的槽大小的图像
+
+```html
+<img
+  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
+  src="..."
+  alt=""
+/>
+```
+
+- [响应式图像：如果您只是在更改分辨率，请使用 srcset。](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)
+- [响应式图像教程](http://www.ruanyifeng.com/blog/2019/06/responsive-images.html)
+
+## noscript 标签的作用
+
+`<noscript>` 标签用来定义在脚本未被执行时的替代内容（文本）。
+
+`<noscript>` 标签中的内容只有在下列情况下才会显示出来：
+
+- 浏览器不支持脚本
+- 浏览器支持脚本，但脚本被禁用
+
+```html
+<!-- 给予用户友好的提示! -->
+<noscript>您的浏览器不支持 JavaScript！</noscript>
+```
+
+## label 的作用是什么？是怎么用的？
+
+`label` 标签定义表单控件的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
+
+有两种 HTML 原生方法可以将 `label` 元素与 `input` 元素连接起来。一种是 `id` 绑定，一种是嵌套
+
+```html
+<label for="select">爱我</label>
+<input type="radio" id="select" name="love" value="love" />
+
+<!-- 用 label 包装 input 元素 -->
+<label>
+  恨我
+  <input type="radio" name="hate" value="hate" />
+</label>
+```
+
+> **注意**：点击 `label` 的时候，事件冒泡一次，`label` 会触发关联 `input` 的 `click` 事件，导致事件再次触发事件。
+
+## title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
+
+### `<title>` 与 `<h1>` 的区别
+
+- `<title>` 用于网站信息标题，一个网站可以有多个 `title`，seo 权重高于 `h1`；
+- `<h1>` 概括的是文章主题，一个页面最好只用一个 `h1`，seo 权重低于 `title`。
+
+### `<b>` 与 `<strong>` 的区别
+
+- `<b>` 为了加粗而加粗
+- `<strong>` 为了标明重点内容而加粗，有语气加强的含义
+
+### `<i>` 与 `<em>` 的区别
+
+`<i>` 为了斜体而斜体，`<em>` 为了标明重点而斜体，且对于搜索引擎来说 `<strong>` 和 `<em>` 比 `<b>` 和 `<i>` 要重视的多
+
+## `rel="noopener"` 应在什么场景下使用，为什么？
+
+- `rel="noopener"` 是 `<a>` 标签的一个属性。他可以禁止打开的新页面中使用 `window.opener` 属性，这样一来打开的新页面就不能通过 `window.opener` 去操作你的页面。
+- 新页面可以通过 `window.opener.location = newURL` 将你的页面导航至任何网址。
+
+```html
+<!-- home.html -->
+<a href="./home.html" target="_blank">home</a>
+<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->
+
+<!-- details.html -->
+<h1>点关注 不迷路！</h1>
+<script>
+  window.opener.location = 'https://juejin.cn/user/96412754251390'
+</script>
+```
+
+- 如果您正在使用带有 `target ="_ blank"` 的外部链接，则您的链接应具有 `rel="noopener"` 属性，以防止标签被挪用。如果您需要支持旧版本的 Firefox，请使用 `rel="noopener noreferrer"`
+- 总结：`rel="noopener"` 应用于超链接，防止打开的链接操纵源页面
+
+## 为什么最好把 link 标签放在 head 之间？
+
+- 把 `<link>` 标签放在 `<head></head>` 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。
+- 将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。
+- 一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。
+- 这种做法可以防止呈现给用户空白的页面或没有样式的内容。
+
+## 为什么最好把 JS 的 script 标签放在 body 之前，有例外情况吗？
+
+- 脚本在下载和执行期间会阻止 HTML 解析。把 `<script>` 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。
+- 例外情况：当你的脚本里包含 `document.write()` 时。
+  - 但是现在，`document.write()` 不推荐使用。
+  - 同时，将 `<script>` 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。对此比较好的做法是，`<script>` 使用 `defer` 属性，放在 `<head>` 中。
+
+## HTML 全局属性（global attribute）有哪些
+
+- `accesskey`：设置快捷键，提供快速访问元素
+- `class`：为元素设置类标识，多个类名用空格分开，CSS 和 JavaScript 可通过 class 属性获取元素
+- `contenteditable`：指定元素内容是否可编辑
+- `contextmenu`：自定义鼠标右键弹出菜单内容
+- `data-*`：为元素增加自定义属性
+- `dir`：设置元素文本方向
+- `draggable`：设置元素是否可拖拽
+- `dropzone`：设置元素拖放类型： copy，move，link
+- `hidden`：表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
+- `id`：元素 id，文档内唯一
+- `lang`：元素内容的的语言
+- `spellcheck`：是否启动拼写和语法检查
+- `style`：行内 CSS 样式
+- `tabindex`：设置元素可以获得焦点，通过 tab 可以导航
+- `title`：元素相关的建议信息
+- `translate`：元素和子孙节点内容是否需要本地化
+
+## 请描述下 SEO 中的 TDK？
+
+在 SEO 中，所谓的 TDK 其实就是 `title`、`description`、`keywords` 这三个标签
+
+- `title` 标题标签
+- `description` 描述标签
+- `keywords` 关键词标签
+
+## 你有使用过什么模板引擎？为什么使用它？
+
+- 常用模板引擎：[Pug](https://pugjs.org/)（以前叫 Jade）、 [Haml](http://haml.info/docs.html)、[Handlebars](http://handlebarsjs.com/)、[art-template](https://aui.github.io/art-template/) 等
+- 这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能
+- 大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
+
+```jade
+!!! 5
+html
+  head
+    title = HelloWorld
+  body
+    h1使用Jade创建HelloWorld网页
+```
+
+编译为
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HelloWorld</title>
+  </head>
+  <body>
+    <h1>使用Jade创建HelloWorld网页</h1>
+  </body>
+</html>
+```
+
+- 它帮助我们用更少的代码更快地编写 HTML 代码。
+
+## iframe 是什么？有什么优缺点？
+
+- HTML 内联框架元素 [`<iframe>`](<[iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)>) 表示嵌入的[浏览上下文](https://developer.mozilla.org/en-US/docs/Glossary/browsing_context)。它能够将另一个 HTML 页面嵌入到当前页面中。
+- iframe 是用来在网页中插入第三方页面，早期的页面使用 iframe 主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
+
+> **Tips**：可以将提示文字放在 `<iframe></iframe>` 之间，来提示某些不支持 iframe 的浏览器
+
+### 优点
+
+- 便于修改，模拟分离，像一些信息管理系统会用到。
+- iframe 能够原封不动的把嵌入的网页展现出来。
+- 如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
+- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
+- 并行加载脚本
+- security sandbox（安全沙盒）
+- 解决加载缓慢的第三方内容。如：图标和广告等的加载问题。
+
+### 缺点
+
+- 没有语意。搜索引擎无法解读这种页面，不利于 SEO
+- 会产生很多页面，不容易管理。
+- 即使内容为空，加载也需要时间。
+- iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级
+- 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
+- iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。
+- iframe 会阻塞主页面的 onload 事件。
+- iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
+- 如果需要使用 iframe，最好通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题
+- iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
+
+> **Tips**：除非特殊需要，一般不推荐使用。目前 iframe 的优点完全可以使用 AJAX 实现，因此已经没有必要使用 iframe 了。
+
+## div+css 的布局较 table 布局有什么优点？
+
+分离方便、改版快、清晰简洁、seo
+
+- 表现与结构相分离。
+- 改版的时候更方便，只要改 css 文件。
+- 页面加载速度更快、结构化清晰、页面显示简洁。
+- 易于优化（seo）搜索引擎更友好，排名更容易靠前。
+
+## 很多网站不常用 table，iframe 这两个元素，知道原因吗？
+
+因为浏览器页面渲染的时候是从上至下的，而 `table` 和 `iframe` 这两种元素会改变这样渲染规则，他们需要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。
+
+- 还有一些其他的影响：详细参考[为什么我们不建议用 Table 布局](https://www.html5tricks.com/why-not-table-layout.html)，`iframe` 的话本文有所提及，可以翻阅查找
+
+## HTML 中的 lang 属性有什么作用？
+
+- 通过在 `css:lang()` 伪类拼写和语法检查器中使用页面样式来帮助搜索引擎进行语言检测
+
+```css
+:lang(zh) {
+  font-size: 1.5em;
+}
+```
+
+- [HTML 的 lang 属性的作用](https://www.cnblogs.com/wangmeijian/p/6815375.html)
+- [HTML 中 html 元素的 lang 属性的说明](https://blog.csdn.net/mirro81/article/details/75213031)
+- [网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？](https://www.zhihu.com/question/20797118/answer/16809331)
+
+## 什么 `enctype='multipart/form-data'` 意思？
+
+`enctype` 属性指定将表单数据提交到服务器时应如何编码。
+
+## HTML5
+
+HTML5 是 HTML（超文本标记语言）最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。
+
+### HTML5 向后兼容旧浏览器吗？
+
+HTML5 被设计成尽可能向后兼容现有的 web 浏览器
+
+### HTML5 为什么只需要写 `<!DOCTYPE html>`？
+
+- HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览 器的行为（让浏览器按照它们应该的方式来运行）
+- HTML4.01 基于 SGML，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。
+- 其中，SGML 是标准通用标记语言，简单的说，就是比 HTML，XML 更老的标准，这两者都是由 SGML 发展而来的。但是，HTML5 不是。
+
+### HTML5 文档类型和字符集是？
+
+- HTML5 文档类型：`<!DOCTYPE html>`
+- HTML5 字符集编码：`<meta charset="UTF-8" />`
+
+### HTML5 有哪些新特性
+
+- 在 HTML5 中，DOM 拓展了三种选择器 `document.querySelector`、`document.querySelectorAll`、`matchesSelector()`
+- 拖拽释放（Drag and drop）API
+- 绘画 `canvas`，支持内联 SVG。支持 MathML
+- 媒体播放的 `video` 和 `audio` 元素
+- 本地离线存储 `localStorage` 长期存储数据，浏览器关闭后数据不丢失；`sessionStorage` 的数据在浏览器关闭后自动删除
+- 更好的实践 web 语义化，比如 `article`、`footer`、`header`、`nav`、`section` 等语义标签
+- 表单控件：`calendar`、`date`、`time`、`email`、`url` 等
+- 新增表单元素：`datalist`、`keygen`、`output`
+- 新的技术：多线程编程的 `webWorker`， 全双工通信协议 `WebSocket` 和地理定位 `Geolocation`
+
+### 什么是 data-\* 属性？
+
+- 自定义数据属性以 data 开始，并将根据您的需求进行命名
+- 您可以使用 JavaScript 获得这些属性的值
+
+- 在 JavaScript 框架变得流行之前，前端开发者经常使用 `data-*` 属性，把额外数据存储在 DOM 自身中，而当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。它用于存储页面或应用程序专用的自定义数据，对于这些数据，没有更合适的属性或元素。
+- 而现在，不鼓励使用 `data-*` 属性。原因：
+  - 用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据
+  - 数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新
+
+### HTML5 中不推荐使用哪些 HTML 标签？
+
+- `<acronym>`：建议用 `<abbr>`
+- `<applet>`：建议用 `<object>`
+- `<basefont>`：建议用 `<font>`
+- `<bgsound>`：建议用 `<audio>`
+- `<b>`：不推荐使用，建议用 `font-weight` 代替
+- `<big>`：不推荐使用，建议用 `font-size` 代替
+- `<blink>`：建议采用 `animation` 代替
+- `<center>`：不推荐使用，建议用 `text-align: center` 代替
+- `<dir>`：建议根据语义采用 `<ul>`、`<ol>` 或者 `<dl>`
+- `<font>`：不推荐使用，建议用 CSS 代替，以便更好控制。
+- `<frame>`：不推荐使用，建议用 `<iframe>` 代替。但 `<iframe>` 现在又可以用 ajax 来代替
+- `<frameset>`：不推荐使用
+- `<hgroup>`：不推荐使用
+- `<isindex>`：建议用 `<input>`
+- `<listing>`：建议用 `<pre>` 或使用语义更好的 `<code>`
+- `<marquee>`：不推荐使用
+- `<multicol>`：建议用 `<input>`
+- `<nobr>`：不推荐使用，建议用 `white-space` 代替
+- `<noframes>`：不推荐使用，建议用 帧 CSS 代替
+- `<plaintext>`：建议用 `<pre>` 或使用语义更好的 `<code>`
+- `<u>`：不推荐使用，建议用 帧 `font-style` 代替
+- `<spacer>`：不推荐使用
+- `<strike>`：建议用语义更好的 `<del>` 或 `<s>`
+- `<tt>`：建议用 `<code>` 或 `<span>`
+- `<xmp>`：建议用带有 CSS 的 `<pre>` 或使用语义更好的 `<code>`
+- [HTML5 Differences from HTML4](http://www.w3.org/TR/html5-diff)
+- [HTML 元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)
+
+### 你如何理解 Web 的语义化?
+
+Web 语义化是指通过 HTML 标签表示页面包含的信息，包含了 HTML 标签的语义化和 CSS 命名的语义化。
+
+- HTML 标签的语义化 — 通过使用包含语义的标签（如 `h1-h6`）恰当地表示文档结构
+- CSS 命名的语义化 — 为 HTML 标签添加有意义的 `class`，`id` 补充未表达的语义，如 [Microformat](http://en.wikipedia.org/wiki/Microformats) 通过添加符合规则的 `class` 描述信息
+
+#### HTML 为什么需要结构语义化
+
+- 便于团队开发和维护。
+- 在没有 CSS 样式的情况下，能让页面呈现清晰的结构。
+- 屏幕阅读器（如果访客有视障）会完全根据你的标签来 "读" 你的网页。
+- 搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，利于 SEO。
+
+> 它用于改进文档的自动化处理。自动处理发生的频率比你意识到的要高，搜索引擎中的每个网站排名都是从所有网站的自动处理中派生出来的。
+
+```html
+<!-- 机器：这种结构看起来可能是导航元素？ -->
+<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
+
+<!-- 机器: 这是导航元素！ -->
+<nav class="some-meaningless-class"><ul><li><a>...</nav>
+```
+
+#### 什么是语义和非语义元素？
+
+- **语义元素**：对浏览器和开发人员都清楚地描述了其含义。例如：`<form>`，`<table>`，`<figcaption>`，`<figure>`，`<header>`，`<footer>`，`<main>`，`<aside>`，`<article>`，`<section>`，`<nav>`，`<mark>`，`<h1~h6>`，`<details>`，`<summary>`，`<time>` 明确规定其含义。
+- **非语义元素**：`<div>`，`<span>` 等不包含任何含义。
+
+#### 简述 HTML5 一些语义的用法
+
+- `<header>` 用于包含有关页面某个部分的介绍性和导航信息。这可以包括章节标题、作者姓名、出版时间和日期、目录或其他导航信息。
+- `<article>` 是用来存放一个自成体系的作文，在逻辑上可以在页面之外独立地重新创建，而不会失去它的意义。个人博客文章或新闻故事就是很好的例子。
+- `<section>` 是一个灵活的容器，用于保存共享公共信息主题或目的的内容。
+- `<footer>` 用于保存应该出现在内容节末尾的信息，并包含有关该节的附加信息。作者姓名、版权信息和相关链接是此类内容的典型示例。
+- `<main>` 元素表示 `body` 文档的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
+- 查看 [Semantic in HTML5](https://htmlreference.io/semantic/) 以了解其他的语义标签。
+- [Why use an HTML5 semantic tag instead of div?](https://stackoverflow.com/questions/17272019/why-use-an-html5-semantic-tag-instead-of-div)
+- [Should I use <i> tag for icons instead of <span>? [closed]](https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span)
+- [What is the difference between <section> and <div>?](https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div)
+- [How To Write Semantic HTML](https://hackernoon.com/how-to-write-semantic-html-dkq3ulo)
+
+### Canvas 和 SVG
+
+- [Canvas](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas) 和 [SVG](https://developer.mozilla.org/zh-CN/docs/Glossary/SVG) 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
+
+#### SVG
+
+> SVG 意为可缩放矢量图形（Scalable Vector Graphics）是一种基于 [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML) 的图像格式，用于为 web 定义基于向量的二维图形。与光栅图像（例如 .jpg、.gif、.png 等）不同，矢量图像可以在不损失图像质量的情况下进行任何程度的放大或缩小。
+
+```html
+<!-- SVG 是矢量和声明性的 -->
+<svg viewBox="0 0 200 200">
+  <circle cx="10" cy="10" r="10" />
+</svg>
+```
+
+#### Canvas
+
+> Canvas 是一个 HTML5 元素，用于在网页上绘制图形。它是一个带有 "立即模式" 图形应用程序编程接口（API）的位图，用于在其上绘图。`<canvas>` 元素只是图形的容器。为了绘制图形，你应该使用 js 画布在绘制路径、方框、圆、文本和添加图像时有几种策略。
+
+- HTML `<canvas>` 元素提供了一个空白绘图区域，可通过 JavaScript API（[Canvas](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) API 或 [WebGL](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API) API）绘制图形及图形动画
+  - 通过 JavaScript 来绘制 2D 图形
+  - 是逐像素进行渲染的
+  - 其位置发生改变，会重新进行绘制
+
+```html
+<canvas id="myCanvas" width="578" height="200"></canvas>
+<script>
+  var canvas = document.getElementById('myCanvas')
+  var context = canvas.getContext('2d')
+  var centerX = canvas.width / 2
+  var centerY = canvas.height / 2
+  var radius = 70
+
+  context.beginPath()
+  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false)
+  context.fillStyle = 'green'
+  context.fill()
+</script>
+```
+
+- Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
+- Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作
+
+#### Canvas 和 SVG 的区别
+
+| Canvas                                             | SVG                                                      |
+| -------------------------------------------------- | -------------------------------------------------------- |
+| 基于栅格（由像素组成）                             | 基于矢量（由形状组成），非常适合 UI/UX 动画              |
+| 依赖分辨率                                         | 不依赖分辨率                                             |
+| 不支持事件处理器                                   | 支持事件处理器                                           |
+| 文本渲染能力差                                     | 良好的文字渲染功能                                       |
+| 使用更多的对象或更小的曲面或两者都提供更好的性能   | 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）  |
+| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用                                           |
+| 仅通过脚本修改                                     | 通过脚本和 CSS 修改                                      |
+| 能够以 .png 或 .jpg 格式保存结果图像               | 多个图形元素，成为页面 DOM 树的一部分                    |
+| 可伸缩性差。不适合以较高分辨率打印。可能发生像素化 | 更好的可扩展性。可以任何分辨率高质量打印。不会发生像素化 |
+
+#### 100 \* 100 的 canvas 占多少内存？
+
+- [100\*100 的 canvas 占多少内存](https://juejin.cn/post/6844903704139661326)
+
+#### 您如何为您的网站选择 svg 或 canvas？
+
+- 如果你知道你需要矢量艺术，则选择 SVG。与 JPG 之类的栅格图形相比，矢量艺术在视觉上是清晰的，并且文件大小通常较小。
+- 像一个小的平面颜色图标，这显然是 SVG 的领域。
+- 像互动游戏，那显然是 Canvas。
+
+#### 参考
+
+- [Canvas API](https://www.bookstack.cn/books/webapi-tutorial)
+- [SVG 图像](https://www.bookstack.cn/read/webapi-tutorial/docs-svg.md)
+
+- [How to Choose Between Canvas and SVG](https://www.sitepoint.com/how-to-choose-between-canvas-and-svg/)
+- [何时使用 SVG 与何时使用 canvas](https://css-tricks.com/when-to-use-svg-vs-when-to-use-canvas/)
+
+### 新标签
+
+#### 新语义和结构元素
+
+- `canvas` 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
+
+```html
+<canvas width="300" height="300"> 抱歉，您的浏览器不支持canvas元素 </canvas>
+```
+
+- `figure` 是当您想要显示带有标题的图像时经常使用的语义标签。经常与 `img` 和 `figcaption` 标签配合使用。
+- `figcaption` 标签包含标题文本。
+
+```html
+<style>
+  figure {
+    border: thin #c0c0c0 solid;
+    display: flex;
+    flex-flow: column;
+    padding: 5px;
+    max-width: 220px;
+    margin: auto;
+  }
+
+  img {
+    max-width: 220px;
+    max-height: 150px;
+  }
+
+  figcaption {
+    background-color: #222;
+    color: #fff;
+    font: italic smaller sans-serif;
+    padding: 3px;
+    text-align: center;
+  }
+</style>
+
+<figure>
+  <img src="avatar.jpg" alt="D.O" />
+  <figcaption>An elephant at sunset</figcaption>
+</figure>
+```
+
+- `summary` 利用了一个 `details` 元素的一个内容的摘要，标题或图例。
+- `details` 可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
+  - 标签用于描述文档或文档某个部分的细节。
+  - 给他来点动画效果：[如何对 Details 元素进行动画处理](https://css-tricks.com/how-to-animate-the-details-element/)
+
+```html
+<style>
+  details {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0.5em 0.5em 0;
+  }
+  summary {
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+  }
+  details[open] {
+    padding: 0.5em;
+  }
+  details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: 0.5em;
+  }
+</style>
+
+<details>
+  <summary>Details</summary>
+  Something small enough to escape casual notice.
+</details>
+```
+
+- `header`、`nav`、`main`、`footer`、`section`、`article`
+
+```html
+<section>
+  <header></header>
+  <main>
+    <nav></nav>
+  </main>
+  <footer></footer>
+</section>
+<article></article>
+```
+
+- `map` 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像
+  - area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
+
+```html
+<div>
+  <img
+    src="../img/cs.jpg"
+    width="500"
+    height="500"
+    alt="pic"
+    usemap="#circusmap"
+  />
+  <map name="circusmap">
+    <area shape="rect" coords="90,18,202,186" href="https://www.baidu.com/" />
+    <area
+      shape="rect"
+      coords="222,141,318, 256"
+      href="https://www.baidu.com/"
+    />
+    <area
+      shape="circle"
+      coords="343,111,455, 267"
+      href="https://www.baidu.com/"
+    />
+    <area shape="rect" coords="35,328,143,500" href="https://www.baidu.com/" />
+  </map>
+</div>
+```
+
+- `mark` 突出显示 html 中的文本。在这个标签出现之前，常使用使用 `em` 或 `strong` 赋予突出显示的内容一些语义。现在不推荐了。如果需要突出显示，请使用此标签
+
+```html
+<p><mark>Lio</mark></p>
+```
+
+默认背景颜色 `<mark>` 是黄色
+
+```css
+/* default style */
+mark {
+  background: yellow;
+  color: black;
+}
+```
+
+可以使用 CSS 自定义样式
+
+```css
+mark {
+  background: red;
+  color: white;
+}
+```
+
+- `meter` 标签定义已知范围或分数值内的标量测量，也被称为 gauge（尺度）。它不应用于指示进度（在进度条中）。如果标记进度条，请使用 `progress` 标签。
+
+```html
+<div>
+  <meter value="4" min="0" max="10">4/10</meter><br />
+  <meter value="0.6">60%</meter>
+</div>
+```
+
+- `progress` 标签标示任务的进度（进程）。
+
+```html
+<label for="file">Downloading progress:</label>
+<progress id="file" value="32" max="100">32%</progress>
+```
+
+- `time` 定义日期或时间。Edge、Firefox 和 Safari 都支持 `<time>` 元素。
+  - `datetime` 属性可用于提供机器可读的日期、时间、时区偏移量或持续时间形式。HTML 标准列出了这个属性的有效语法。几个例子：
+
+```html
+<time datetime="2011-11">November, 2011</time>
+<time datetime="2009-08-29">two days ago</time>
+<time datetime="2011-11-18T15:00-08:00">3pm</time>
+```
+
+- `bdi` 允许您设置一段文本，使其脱离其父元素的文本方向设置。
+
+```html
+<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>
+```
+
+- `dialog` 标签定义一个对话框、确认框或窗口。
+
+```html
+<dialog open>
+  <p>Greetings, one and all!</p>
+</dialog>
+```
+
+#### 新多媒体元素
+
+- `source` 定义视频源 `<video>` 和 `<audio>`
+- `track` 定义文本轨道
+- `video` 定义视频元素
+  - HTML5 支持 mp4、webm 和 ogg 格式的视频。其中 Ogg 格式在 IE 中不受任何方式的支持
+  - `src` 指定视频的来源。
+  - 当不给 `video` 设置高度和宽度时，浏览器不知道视频的大小，当视频加载时，页面将发生变化或闪烁
+
+```html
+<!-- 1. 用 src 属性定义 -->
+<video src="video.mp4" controls></video>
+
+<!-- 2. 定义 source 标签 -->
+<video controls>
+  <source src="video.mp4" type="video/mp4" />
+  你的浏览器不支持 HTML5 viedo 标签。
+</video>
+```
+
+- `embed` 将外部内容嵌入文档中的指定位置。
+
+```html
+<embed src="https://juejin.cn/user/96412754251390" height="700" width="100%" />
+
+<embed
+  type="video/webm"
+  src="/media/cc0-videos/flower.mp4"
+  height="700"
+  width="100%"
+/>
+```
+
+- `audio` 定义音频内容
+  - HTML5 支持 MP3、Wav 和 Ogg 格式的音频。
+
+```html
+<audio controls>
+  <source src="sound.ogg" type="audio/ogg" />
+  <source src="sound.mp3" type="audio/mpeg" />
+  您的浏览器不支持 HTML5 audio 标签。
+</audio>
+```
+
+#### 新表单元素
+
+- `datalist`
+  - `<datalist>` 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
+  - datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
+  - 使用 input 元素的 list 属性来绑定 datalist
+
+```html
+<label for="course">选择学习课程：</label>
+<input list="target" name="course" id="course" />
+<datalist id="target">
+  <option value="HTML"></option>
+  <option value="CSS"></option>
+  <option value="JavaScript"></option>
+  <option value="Node"></option>
+  <option value="Vue"></option>
+  <option value="React"></option>
+  <option value="Webpack"></option>
+</datalist>
+```
+
+- `keygen` 该元素有助于生成密钥和通过表单提交。
+
+  - `keygen` 必须在表单内使用。
+  - `keygen` 已经从 Web 标准中删除，请使用 JavaScript 生成密钥
+  - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/keygen)
+
+- `output` 标签定义不同类型的输出，比如脚本的输出。
+
+```html
+<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
+  0 <input type="range" id="a" value="50" /> 100 *
+  <input type="number" id="b" value="1" /> =
+  <output name="x" for="a b"></output>
+</form>
+```
+
+#### HTML5 之前的一些元素
+
+- `pre` 标签可定义预格式化的文本。被包围在 `<pre>` 标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
+- `strong` 用于指示比周围文本更重要的文本，例如警告或错误。从语义上讲，它的重要性。它显示为粗体
+- `b` 与 `strong` 非常相似，因为它也显示为粗体。然而，与它不同的是，它并没有真正传达出任何重要性，它更像是一种文体而非语义。
+- `em` 用于强调某个词。它显示为斜体
+
+```html
+<strong>lorem</strong>
+<b>lorem</b>
+<em>lorem</em>
+```
+
+- `q` 和 `blockquote`
+  - `q` 引号
+  - `blockquote` 块引号
+
+```html
+<q>lorem</q>
+<blockquote>lorem</blockquote>
+```
+
+- `bdo` 可以更改 HTML 文本的方向。
+  - `rtl`：从右到左。`ltr`：从左到右。
+
+```html
+<p><bdo dir="rtl">This text will go right to left.</bdo></p>
+```
+
+- 使用 `abbr` 标签缩写您的代码，当你传递一个标题时，它将创建一个工具提示
+  - `<abbr>` 不同浏览器的默认样式有些不同。在 Chrome 和 Firefox 中，它将带有下划线，并且在悬停时将带有 `title` 传递的值的工具提示。如果您在 Safari 上打开此页面，则不会出现下划线。此外，仅当您具有 `title` 属性时才显示下划线。
+  - 由于跨浏览器的差异，建议为 `<abbr>` 代码加上自定义样式。这样，您将在浏览器之间拥有一致的外观
+
+定义术语时，可以与 `dfn` 混合使用
+
+```html
+<dfn> <abbr title="Today I learned">TIL</abbr> something awesome! </dfn>
+```
+
+指示的非缩写词并将其输出到页面上的括号中
+
+```css
+abbr[title]::after {
+  content: ' (' attr(title) ')';
+}
+```
+
+利用 `hover` 状态仅在点击时显示非缩写词
+
+```css
+abbr[title]:hover::after {
+  content: ' (' attr(title) ')';
+}
+```
+
+使用 `abbr` 标签来指示在顺序键盘导航中是可聚焦的 `tabindex="0"`，然后在聚焦时触发我们的非缩写内容。
+
+```html
+<abbr title="Today I learned" tabindex="0">TIL</abbr>
+```
+
+```css
+abbr[title]:focus::after {
+  content: ' (' attr(title) ')';
+}
+```
+
+也可以使用一些提示工具，如 Bootstrap 的[工具提示](https://getbootstrap.com/docs/4.5/components/tooltips/)组件。
+
+- `kbd` 和 `code`
+  - `kbd`：表示用户从键盘、语音输入或任何其他文本输入设备输入的文本。
+  - `code`：表示计算机代码的简短片段的文本。
+  - 两者使用同样的 `monospace` 字体。但是在语义上它们是不同的。最好使用 `kbd` 代替 `code`
+
+```html
+<kbd>Ctrl</kbd> + <kbd>C</kbd> <code>Ctrl</code> + <code>C</code>
+```
+
+```css
+/* Default Style */
+kbd {
+  font-family: monospace;
+}
+
+kbd,
+code {
+  border: 1px solid gray;
+  border-radius: 5px;
+  padding: 5px;
+}
+```
+
+- `s` 和 `del` 删除线
+  - `s` 当您尝试表示不再相关或不再准确的事物时，使用它。
+  - `del` 当您要指示某些内容已从文档中删除时，使用它。
+  - 它们都是删除线。但是，它们传达了关于内容的不同含义。
+
+```html
+<s>Lorem ipsum dolor sit amet.</s>
+
+<!-- 常使用于商品价格折扣 -->
+<span><s>$1999</s></span>
+<span style="color: red;">$99</span>
+
+<del>Lorem ipsum dolor sit amet.</del>
+
+<!-- 常使用于待办事项清单 -->
+<ul>
+  <li><del>打卡</del></li>
+  <li>喝杯咖啡</li>
+</ul>
+```
+
+- `ins`
+
+```html
+<p>
+  Lorem ipsum
+  <ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
+</p>
+```
+
+- [20 HTML Elements for Better Text Semantics](https://www.sitepoint.com/20-html-elements-better-text-semantics/)
+
+- [有哪些被低估未被广泛使用的有用的 HTML 标签？](https://www.zhihu.com/question/396745068/answer/1262953923)
+
+### 新属性
+
+- `contenteditable`
+  - `contenteditable` 属性应用于任何 HTML 元素，它可以像 `input` 或 `<textare>` 那样工作编辑它们
+  - 您可以为其添加事件监听器，监听其内容变化
+  - `contenteditable` 属性值有 3 个不同的值：true、false、inherit
+
+```html
+<div contenteditable="true">
+  <h1>元素可编辑</h1>
+</div>
+<div contenteditable="false">
+  <h1>元素不可编辑</h1>
+</div>
+<div contenteditable="inherit">
+  <h1>元素继承其父元素的可编辑状态</h1>
+</div>
+```
+
+- `input`
+  - `required` 必须输入内容。
+  - `autofocus` 属性能够让 `button`，`input` 或 `textarea` 元素在页面加载完成时自动成为页面焦点
+  - `pattern` 用正则表达式验证
+
+```html
+<!-- required -->
+<input type="text" id="username1" name="username" required />
+
+<!-- autofocus -->
+<input type="text" id="username2" name="username" />
+
+<!-- pattern -->
+<input
+  type="password"
+  name="password"
+  placeholder="请输入密码"
+  pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
+  required
+/>
+```
+
+- **HTML5 新的表单输入类型？**
+  - 新输入类型（type 13 种）：`date`、`month`、`week`、`time`、`number`、`range`、`email`、`url`、`color`、`datatime-local`、`datetime`、`search`、`tel`
+  - `search`：用于搜索域，比如站点搜索或 Google 搜索，域显示为常规的文本域。
+  - `url` ：用于应该包含 URL 地址的输入域在提交表单时，会自动验证 url 域的值。
+  - `email`：用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。
+  - `datetime`：选取时间、日、月、年（UTC 时间）
+  - `date`：选取日、月、年
+  - `month`：选取月、年
+  - `week`：选取周和年
+  - `time`：选取时间（小时和分钟）
+  - `datetime-local`：选取时间、日、月、年（本地时间）
+  - `number`：用于应该包含数值的输入域，您还能够设定对所接受的数字的限定。
+  - `range`：用于应该包含一定范围内数字值的输入域，类型显示为滑动条。
+  - `color`：定义拾色器。
+  - `tel`：定义用于输入电话号码的字段。
+  - 其中 `datetime` 不在被推荐使用，转而使用 `datatime-local`
+
+```html
+<!-- url -->
+<input type="url" />
+
+<!-- tel -->
+<input type="tel" name="tel" />
+
+<!-- search -->
+<input type="search" />
+
+<!-- email -->
+<form action="/">
+  <input type="email" />
+  <input type="submit" value="提交" />
+</form>
+
+<!-- date -->
+<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />
+
+<!-- time -->
+<input type="time" value="12:00" />
+
+<!-- datetime -->
+<input type="datetime" value="2020-09-12T23:00Z" />
+
+<!-- week -->
+<input type="week" />
+
+<!-- month -->
+<input type="month" value="2020-06-01" />
+
+<!-- datetime-local -->
+<input type="datetime-local" value="2020-09-06T23:00" />
+
+<!-- number -->
+<input type="number" name="number" min="2" max="10" value="3" />
+
+<!-- color -->
+<input type="color" onchange="showColor(event)" />
+
+<!-- range -->
+<input type="range" name="range" min="0" max="100" step="1" value="" />
+```
+
+- `hiden` 属性规定对元素进行隐藏。
+  - 可以对 `hidden` 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
+
+```html
+<div hidden>lorem</div>
+```
+
+- `Download`
+  - 锚点标签的默认设置是导航链接，它将转到您在 `href` 属性中指定的链接
+  - 添加 `download` 属性时，它将变成一个下载链接。提示您要下载的文件。下载的文件将具有与原始文件名相同的名称。但是，您也可以通过将值传递给 `download` 属性来设置自定义文件名
+  - `download` 属性仅适用于同源 URL。如果的 `href` 来源与网站的来源不同，那么它将无法正常工作。换句话说，您只能下载属于该网站的文件。此属性遵循**同源策略**中的相同规则概述。
+
+```html
+<a href="../img/cs.jpg" download> 使用原始文件名下载本地文件 </a>
+
+<a href="../img/cs.jpg" download="logo"> 使用自定义文件名下载 logo.png </a>
+```
+
+- [同源政策](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
+- [浏览器同源政策及其规避方法](http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)
+
+### HTML5 的 form 如何关闭自动完成功能？
+
+- 将 `input` 设置为 [`autocomplete=off`](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion)
+
+```html
+<!-- 不使用 autocomplete -->
+<input type="email" name="email" />
+
+<!-- 使用 autocomplete -->
+<form action="/post">
+  <input type="email" name="email" autocomplete="off" />
+  <input type="submit" value="提交" />
+</form>
+```
+
+### `<script>` 标签上的 `defer` 和 `async` 属性是什么？
+
+- `<script>`：当遇到脚本时，HTML 停止解析，脚本被获取并立即执行。执行结束后，HTML 解析继续。
+- `defer` 和 `async` 的作用：都是让脚本的下载和执行不阻塞页面的渲染
+
+区别：
+
+- `defer` 是推迟执行，它是等到页面渲染完毕，所有脚本下载完成，在 DOMContentLoaded 事件前按照脚本的在文档中的顺序执行；
+- `async` 是立即下载并执行，加载和渲染后续文档元素的过程将和 js 脚本的加载与执行并行进行（异步）
+
+1. 关于 `defer`，我们还要记住的是它是按照加载顺序执行脚本的
+2. 标签为 `async` 的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
+3. `async` 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。
+
+```html
+<script src="longTime.js"></script>
+<script src="longTime.js" defer></script>
+<script src="longTime.js" async></script>
+```
+
+> **注意**：没有 `src` 属性的脚本（即不是内联脚本），`async` 和 `defer` 属性会被忽略。
+
+### 如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
+
+- IE6-8 支持通过 `document.createElement` 方法产生的标签，利用这一特性让这些浏览器支持 HTML5 新标签
+- 使用 [html5shiv](https://github.com/aFarkas/html5shiv) 框架
+
+- HTML5：
+  - DOCTYPE 声明
+  - 新增的语义元素（`<header>`、`<section>` 等）
+  - 新增功能元素
+
+### HTML5 的构成要素是什么？
+
+- 语义：提供更准确地描述内容。
+- 连接：提供新的方式与服务器通信。
+- 离线和存储：允许网页在本地存储数据并有效地离线运行。
+- 多媒体：在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
+- 2D/3D 图形和特效：提供更多种演示选项。
+- 性能和集成：提供更快的访问速度和性能更好的计算机硬件。
+- 设备访问：允许使用各种输入、输出设备。
+- 外观：可以开发丰富的主题。
+- [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
+
+### Modernizr
+
+- [Modernizr](https://github.com/Modernizr/Modernizr) 是一个用来检测浏览器功能支持情况的 JavaScript 库。
+- 通过这个库我们可以检测不同的浏览器对于 HTML5 特性的支持情况。
+
+```html
+<article>
+  <h1>通过 Modernizr 检测 HTML5 特性</h1>
+</article>
+<script
+  crossorigin="anonymous"
+  integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm"
+  src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js"
+></script>
+<script>
+  window.onload = function () {
+    //通过Modernizr.对浏览器canvas功能进行检测
+    if (Modernizr.canvas) {
+      console.log('本浏览器支持Canvas API')
+    } else {
+      console.log('本浏览器不支持Canvas API')
+    }
+  }
+</script>
+```
+
+### HTML5 存储
+
+#### localStorage
+
+[`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 持久化的本地存储，除非是通过 js 删除，或者清除浏览器缓存，否则数据永远不会过期，关闭浏览器也不会丢失。
+
+- HTML5 修订 `localStorage` 取代 `globalStorage`
+- 在同源的所有标签页和窗口之间共享数据
+- 数据仅保存在客户端，不与服务器进行通信，对数据的操作是同步的
+- 大小限制为 5M；但实际 JavaScript 中的字符串为 UTF-16，因此每个字符需要两个字节的内存。这意味着尽管许多浏览器的限制为 5MB，但您只能存储 2.5M 个字符。
+- 浏览器的支持情况：IE7 及以下版本不支持 web storage。但在 IE5-7 中有个 userData，其实也是用于本地存储。
+
+#### sessionStorage
+
+[`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) 存储对象存储一个会话的数据，数据会在浏览器关闭后自动删除。
+
+- 跟 `localStorage` 一样，大小限制最多为 5M。
+- 同一个会话的页面才能访问并且当会话结束后数据也会随之销毁，因此 sessionStorage 不是一种持久化的本地存储
+- 与 `localStorage` 拥有统一的 API 接口；
+- `localStorage` 有自己独立的存储空间；
+- 对数据的操作是同步的。
+- [localStorage 还能这么用](https://iammapping.com/the-other-ways-to-use-localstorage/)
+- [给 localStorage 加上过期时间](https://juejin.im/post/6844903825304731656)
+- [不同类型浏览器存储的入门](https://css-tricks.com/a-primer-on-the-different-types-of-browser-storage/)
+- [前端存储除了 localStorage 还有啥](https://juejin.cn/post/6844904192549584903#heading-12)
+
+#### cookie、sessionStorage 和 localStorage 的区别
+
+- 都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串。
+
+|                                                    | cookie                                             | localStorage | sessionStorage |
+| -------------------------------------------------- | -------------------------------------------------- | ------------ | -------------- |
+| 由谁初始化                                         | 客户端或服务器，服务器可以使用`Set-Cookie`请求头。 | 客户端       | 客户端         |
+| 过期时间                                           | 手动设置                                           | 永不过期     | 当前页面关闭时 |
+| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间                           | 是           | 否             |
+| 是否随着每个 HTTP 请求发送给服务器                 | 是，Cookies 会通过`Cookie`请求头，自动发送给服务器 | 否           | 否             |
+| 容量（每个域名）                                   | 4kb                                                | 5MB          | 5MB            |
+| 访问权限                                           | 任意窗口                                           | 任意窗口     | 当前页面窗口   |
+
+#### 什么是 WebSQL？
+
+- WebSQL 是使用 SQL 的客户端（浏览器）的数据库 API。
+- Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
+- 并非所有浏览器都支持[WebSQL](https://caniuse.com/#search=websql)。
+- 现在[不推荐使用](https://www.w3.org/TR/webdatabase/) WebSQL ，而是使用 IndexedDB 代替它。
+
+#### 什么是 IndexedDB？
+
+> IndexedDB 是一种底层异步 API，浏览器内置的数据库，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。
+
+- 它将将数据存储为键值对。
+- 大多数浏览器都支持 [IndexedDB](http://caniuse.com/#feat=indexeddb)。
+
+> IndexedDB API 功能强大，但对于简单的情况可能看起来太复杂如果你更喜欢一个简单的 API，请尝试 [localForage](https://localforage.github.io/localForage/)，[dexie.js](http://www.dexie.org/)，[PouchDB](https://pouchdb.com/)，[IDB](https://www.npmjs.com/package/idb)，[IDB-KEYVAL](https://www.npmjs.com/package/idb-keyval)，[JsStore](https://jsstore.net/) 或者 [lovefield](https://github.com/google/lovefield) 之类的库，这些库使 IndexedDB 对开发者来说更加友好。
+
+- [IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)
+- [浏览器数据库 IndexedDB 入门教程](http://www.ruanyifeng.com/blog/2018/07/indexeddb.html)
+
+#### 为什么在 HTML5 中使用 IndexedDB 代替 WebSQL？
+
+IndexedDB 像一个 NoSQL 数据库，而 WebSQL 像关系型数据库，使用 SQL 查询数据。W3C WebSQL 已经不再支持这种技术。
+
+#### HTML5 应用程序缓存（Application Cache）
+
+根据最新的标准，该特性已经从 Web 标准中删除，建议使用 [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) 代替。这里找了一些资料，感兴趣了解一下。
+
+- [有趣的 HTML5：离线存储](http://segmentfault.com/a/1190000000732617)
+- [Using the application cache](https://developer.mozilla.org/en-us/docs/Web/HTML/Using_the_application_cache)
+- [HTML5-离线缓存（Application Cache）](https://mp.weixin.qq.com/s/Q-Z8kYWSUJpkpAkTBv1Igw)
+
+### 什么是 Web Workers？
+
+- Web Workers 帮助我们在后台运行 JavaScript 代码，而不会阻止应用程序。
+- Web Workers 在一个隔离的（新的）线程中运行，用于执行 JavaScript 代码，并且通过 postMessage 将结果回传到主线程。这样就不会阻塞主线程的运行。
+- Web Workers 通常用于大型任务。
+- Web Workers 需要一个单独的文件来存储我们的 JavaScript 代码。
+- Web Workers 文件是异步下载的 。
+- 所有最新的浏览器均支持 [Web Worker](https://caniuse.com/webworkers)。
+
+客户端 js：
+
+```js
+var myWebWorker = new Worker('task.js') // 创建 worker
+
+// 监听 task.js worker 消息
+worker.addEventListener(
+  'message',
+  function (event) {
+    console.log('Worker said: ', event.data)
+  },
+  false
+)
+
+// 启动工作程序
+worker.postMessage('From web worker file')
+```
+
+task.js（工作文件）文件：
+
+```js
+// 监听客户端 JS 文件发布消息
+self.addEventListener(
+  'message',
+  function (event) {
+    // 处理后的数据发送到客户端监听 JS 文件
+    self.postMessage(event.data)
+  },
+  false
+)
+```
+
+- [使用 Web Worker 加速 JavaScript 应用程序](https://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications)
+
+### WebSocket
+
+- WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
+- WebSocket 是一种在客户端与[服务器](https://developer.mozilla.org/zh-CN/docs/Glossary/Server)之间保持[TCP](https://developer.mozilla.org/zh-CN/docs/Glossary/TCP)长连接的[网络协议](https://developer.mozilla.org/zh-CN/docs/Glossary/Protocol)，可以随时进行信息交换。
+- WebSocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。
+- 默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。
+
+**WebSocket 如何兼容低浏览器？**
+
+- Adobe Flash Socket
+- ActiveX HTMLFile（IE）
+- 基于 multipart 编码发送 XHR
+- 基于长轮询的 XHR
+
+**websocket 与 socket 的区别**：
+
+Socket 是传输控制层协议，WebSocket 是应用层协议。更多请看参考
+
+**更多学习资料**：
+
+- [WebSocket 介绍和 Socket 的区别](https://blog.csdn.net/qushaming/article/details/90747326)
+- [WebSocket 教程](http://www.ruanyifeng.com/blog/2017/05/websocket.html)
+- [WebSocket](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket)
+- [WebSocket 是什么原理？为什么可以实现持久连接？](https://www.zhihu.com/question/20215561/answer/40316953)
+
+### Geolocation API 如何在 HTML5 中工作？
+
+- HTML5 [Geolocation API](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/geolocation)（地理定位）允许用户在需要时向 web 应用程序提供用户的位置。出于隐私原因，用户需要获得报告位置信息的权限。
+- JavaScript 可以捕获你的纬度和经度，并可以发送到后端 Web 服务器，做一些奇特的位置感知的事情，比如找到本地企业或在地图上显示你的位置
+- 如今，大多数浏览器和移动设备都[支持](https://www.caniuse.com/?search=geolocation) Geolocation API
+- Geolocation API 通过 `navigator` 获取对象。
+
+```js
+if ('geolocation' in navigator) {
+  /* geolocation 是可用的 */
+} else {
+  /* geolocation 是不可用的 */
+}
+```
+
+- 使用 `navigator.geolocation.getCurrentPosition()` 方法获取用户的位置
+
+### 页面可见性（Page Visibility）API 可以有哪些用途？
+
+- 页面可见性 API 提供了您可以观察的事件，刹车了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。
+- 使用选项卡式浏览，任何给定网页都有可能在后台，因此对用户不可见。页面可见性 API 提供了您可以观察的事件，以便了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。
+- `document.hidden` 返回一个布尔值。
+  - true 表示页面可见，false 则表示页面隐藏。
+  - 不同页面之间来回切换，将触发 [visibilitychange](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event) 事件。
+- `document.visibilityState`：表示页面所处的状态，当前页面的可见性，有四个取值
+  - `visible`：页面彻底不可见。
+  - `hidden`：页面至少一部分可见。
+  - `prerender`：页面即将或正在渲染，处于不可见状态。
+  - `unloaded`：已被废弃，不在使用。
+- 只要 `document.visibilityState` 属性发生变化，就会触发 `visibilitychange` 事件
+
+```js
+// 打开新的页面，来回切换标签页，观察页面标题的变化
+document.addEventListener('visibilitychange', function () {
+  if (document.visibilityState === 'hidden') {
+    document.title = '爱我'
+  } else {
+    document.title = '恨我'
+  }
+})
+```
+
+**用途**：
+
+- 动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭
+- 完成登陆后，无刷新自动同步其他页面的登录状态
+
+```js
+// 视频暂停或播放
+document.addEventListener('visibilitychange', function () {
+  if (document.visibilityState === 'hidden') {
+    video.pause()
+  } else if (document.visibilityState === 'visible') {
+    video.play()
+  }
+})
+```
+
+- tips：页面可见性 API 对于节省资源和提高性能特别有用，它使页面在文档不可见时避免执行不必要的任务。
+- [Page Visibility（页面可见性）](https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API)
+- [Page Visibility API 教程](http://www.ruanyifeng.com/blog/2018/10/page_visibility_api.html)
+
+### 说一下 HTML5 Drag And Drop API
+
+> **HTML 拖放（Drag and Drop）**接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。
+
+| Event     | Description                                                                                    |
+| --------- | ---------------------------------------------------------------------------------------------- |
+| Drag      | 每次拖动对象时移动鼠标时，它都会激发。事件主体是被拖放元素，在正在拖放被拖放元素时触发。       |
+| Dragstart | 当用户开始拖动对象时触发。事件主体是被拖放元素，在开始拖放被拖放元素时触发。                   |
+| Dragenter | 当用户将鼠标光标移到目标元素上时，它将激发。事件主体是目标元素，在被拖放元素进入某元素时触发。 |
+| Dragover  | 当鼠标移到某个元素上时触发此事件。事件主体是目标元素，在被拖放在某元素内移动时触发。           |
+| Dragleave | 当鼠标离开元素时触发此事件。事件主体是目标元素，在被拖放元素移出目标元素是触发。               |
+| Drop      | 拖放操作结束时触发。事件主体是目标元素，在目标元素完全接受被拖放元素时触发。                   |
+| Dragend   | 当用户释放鼠标按钮以完成拖动操作时触发。事件主体是被拖放元素，在整个拖放操作结束时触发         |
+
+[draggable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable) 是可枚举的属性指示该元素是否可以拖动，用于标识元素是否允许使用 [HTML 拖放 API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
+
+```html
+<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+<img
+  id="drag1"
+  src="img_logo.gif"
+  draggable="true"
+  ondragstart="drag(event)"
+  width="336"
+  height="69"
+/>
+<script>
+  function allowDrop(e) {
+    e.preventDefault()
+  }
+
+  function drag(e) {
+    e.dataTransfer.setData('text', e.target.id)
+  }
+
+  function drop(ev) {
+    e.preventDefault()
+    var data = e.dataTransfer.getData('text')
+    e.target.appendChild(document.getElementById(data))
+  }
+</script>
+```
+
+- [HTML Drag and Drop API](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)
+- [确定从 Dragenter 和 Dragover 事件中拖动的内容](https://stackoverflow.com/questions/11065803/determine-what-is-being-dragged-from-dragenter-dragover-events)
+- [触摸屏设备上的 HTML5 Drag and Drop API](https://stackoverflow.com/questions/3382393/html5-drag-and-drop-api-on-touch-screen-devices)
+- [HTML5 在窗口间 drag and drop](https://stackoverflow.com/questions/3694631/html5-drag-and-drop-between-windows)
+
+### 其他 HTML5 API
+
+#### document.querySelector() 和 document.querySelectorAll()
+
+- `querySelector()`：根据 css 选择器返回第一个匹配的元素，如果没有匹配返回 null
+- `querySelectorAll()`：方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。如果 querySelectorAll 没有匹配的内容返回的是一个空数组。
+
+#### classList
+
+- 控制 CSS 的 增、删、切换、是否存在某个类
+
+```js
+ele.classList.add('addClass')
+ele.classList.remove('removeClass')
+ele.classList.toggle('toggleClass')
+ele.classList.contains('containsClass')
+```
+
+#### contextMenu
+
+- 它并不会替换原有的右键菜单，而是将你的自定义右键菜单添加到浏览器的右键菜单里
+
+```html
+<div id="menu">Lorem ipsum dolor sit amet.</div>
+<script>
+  menu.addEventListener('contextmenu', function () {
+    alert('点我！')
+  })
+</script>
+```
+
+你也可以阻止它，显示自己自定义的菜单
+
+```js
+menu.addEventListener('contextmenu', function (e) {
+  e.preventDefault()
+  // ...
+})
+```
+
+- [如何为您的 Web 应用程序创建自定义上下文菜单](https://dev.to/iamafro/how-to-create-a-custom-context-menu--5d7p)
+
+#### dataset
+
+- 通过 [`dataset`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset) 可以方便的获取或设置 `data-*` 自定义数据属性集
+
+```html
+<div
+  class="avatar"
+  data-user="lisi"
+  data-avatar-type="circle"
+  data-animateSpeed
+>
+  lorem
+</div>
+<script>
+  const avatar = document.querySelector('.avatar')
+  avatar.dataset.user === 'lisi' // true
+  avatar.dataset.avatarType === 'circle' // true
+  avatar.dataset.animateSpeed = 4000
+
+  // 添加不存在的属性
+  avatar.dataset.id = 'user'
+  // console.log(avatar.dataset)
+</script>
+```
+
+#### tabindex
+
+- `tabindex` 属性规定当使用 "tab" 键进行导航时元素的顺序。
+- 在 HTML4.01 中，tabindex 属性可用于：`<a>`，`<area>`，`<button>`，`<input>`，`<object>`，`<select>` 和 `<textarea>`。
+  - 在 HTML5 中，`tabindex` 属性可用于任何的 HTML 元素（它会验证任何 HTML 元素。但不一定是有用）
+
+```html
+<ul>
+  <li tabindex="2">HTML</li>
+  <li tabindex="1">CSS</li>
+  <li tabindex="3">JAVASCRIPT</li>
+</ul>
+```
+
+#### accessKey
+
+- `accessKey` 属性规定激活（使元素获得焦点）元素的快捷键。
+- 不同浏览器使用的快捷键方法不同：
+  - IE，Chrome，Safari，Opera 15+：[ALT] + accesskey
+  - Opera prior version 15：[SHIFT] [ESC] + accesskey
+  - Firefox：[ALT] [SHIFT] + accesskey
+
+```html
+<input accesskey="b" />
+<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>
+```
+
+#### FullScreen（全屏）
+
+- [FullScreen](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/fullScreen) API 是一个新的 JavaScript API
+- 全屏显示可以是任意元素
+- HTML5 API 存在兼容性问题（IE9+），即使高版本浏览器也有兼容性问题
+- 不同浏览器需要添加不同的前缀 webkit、moz、o、ms
+
+```js
+const fullscreen = (mode = true, el = 'body') =>
+  mode
+    ? document.querySelector(el).requestFullscreen()
+    : document.exitFullscreen()
+
+fullscreen() // 默认全屏模式打开 "body"
+fullscreen(false) // 退出全屏模式
+```
+
+`:fullscreen` CSS 伪元素代表一个元素，当浏览器是在全屏模式下的显示。
+
+```css
+.elem:fullscreen {
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+### 预加载
+
+- 预取 CSS 文件，预渲染整个页面或提前解析域
+- 浏览器有一个简单的内置方式来完成所有这些事情。有六个 `<link rel>` 标签指示浏览器预加载内容：
+
+```html
+<link rel="prefetch" href="/index.css" as="style" />
+<link rel="preload" href="/index.css" as="style" />
+<link rel="preconnect" href="https://example.com" />
+<link rel="dns-prefetch" href="https://example.com" />
+<link rel="prerender" href="https://example.com/about.html" />
+<link rel="modulepreload" href="/index.js" />
+```
+
+#### preload
+
+- 使用 `preload` 作为 `rel` 属性的属性值。还需要通过 `href` 和 `as` 属性指定需要被预加载资源的资源路径及其类型。
+
+```html
+<link rel="preload" href="index.css" as="style" />
+```
+
+- 使用 `as` 来指定将要预加载的内容的类型，将使得浏览器能够：
+  - 更精确地优化资源加载优先级。
+  - 匹配未来的加载需求，在适当的情况下，重复利用同一资源。
+  - 为资源应用正确的[内容安全策略](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)。
+  - 为资源设置正确的 [`Accept`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept) 请求头。
+  - [MDN 完整列表](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#what_types_of_content_can_be_preloaded)
+
+#### prefetch
+
+- `<link rel="prefetch">` 要求浏览器在后台下载并缓存资源（例如 JS 或 CSS）。下载的优先级较低，因此不会干扰更重要的资源。当您知道在下一个页面上需要该资源，并且想要提前对其进行缓存时，这将很有帮助。
+- 下载资源后，浏览器不执行任何操作。不执行 JS，不应用 CSS。它只是被缓存了，因此当其他需求时，它立即可用。
+- 通过 `link` 标签的 `rel` 属性指定为 `"prefetch"`，在 `href` 属性里指定要加载资源的地址
+
+```html
+<!-- 预加载整个页面 -->
+<link rel="prefetch" href="https://juejin.cn/user/96412754251390" />
+
+<!-- 预加载一个图片 -->
+<link
+  rel="prefetch"
+  href="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+/>
+```
+
+#### preconnent
+
+- `<link rel="preconnect">` 要求浏览器提前执行到域的连接。
+
+```html
+<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390" />
+```
+
+#### dns-prefetch
+
+- `DNS-prefetch`（DNS 预获取）是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。
+
+```html
+<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390" />
+```
+
+**链接预加载的一些注意事项**
+
+- 预加载可以跨域进行，当然，请求时 cookie 等信息也会被发送。
+- 预加载可能破坏网站统计数据，而用户并没有实际访问。
+- 浏览器兼容性不是很好
+
+#### prerender
+
+- `<link rel="prerender">` 要求浏览器加载 URL 并将其呈现在不可见的标签中。当用户单击指向该 URL 的链接时，应立即呈现该页面。当您确实确定用户接下来将访问特定页面并且想要更快地呈现它时，这将很有帮助。
+
+```html
+<link rel="prerender" href="https://juejin.cn/user/96412754251390" />
+```
+
+- 当您确定大多数用户将导航到特定页面时，您希望加快速度，那么你可以使用它
+
+#### modulepreload
+
+- `<link rel="modulepreload">` 告诉浏览器尽快下载，缓存和编译 JS 模块脚本。
+- 使用它可以更快地加载您的 ES 模块应用程序。此标签仅适用于预加载 ES 模块——即您通过 `import ...` 或导入的模块 `<script type="module">`。
+
+```html
+<link rel="modulepreload" href="/static/Header.js" />
+```
+
+- [Preload, prefetch and other `<link>` tags](https://3perf.com/blog/link-rels/#preload)
+- [dns-prefetch](https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch)
+- [通过 rel="preload"进行内容预加载](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content)
+- [预取，预加载，预浏览](https://css-tricks.com/prefetching-preloading-prebrowsing/)
+
+## 其他
+
+### 对于 WEB 标准以及 W3C 的理解与认识问题
+
+- **web 标准**简单来说可以分为**结构、表现和行为**。
+  - 结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。
+  - 表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。
+  - 行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是由 js 组成。
+- web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
+- 万维网联盟（[W3C](https://www.w3.org/)）是一个国际组织，它开发开放标准以确保 Web 的长期发展。
+- W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范：
+  - web 标准规范要求，书写标签**必须闭合、标签小写、不乱嵌套**，标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助
+  - 建议使用外链 CSS 和 JS 脚本，从而达到结构、表现与行为的分离，提高页面的渲染速度，提高用户的体验
+  - 样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版方便
+  - 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；
+  - 遵循 w3c 制定的 web 标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
+
+### 前端页面有哪三层构成，分别是什么？作用是什么？
+
+- 分成：结构层、表示层、行为层。
+- 结构层（structural layer）：由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
+- 表示层（presentation layer）：由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
+- 行为层（behaviorlayer）：负责回答“内容应该如何对事件做出反应”这一问题。这是 JavaScript 语言和 DOM 主宰的领域。
+
+### 什么是渐进式渲染？
+
+- 渐进式渲染（Progressive rendering）：是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
+- 此类技术的示例：
+  - 图片懒加载：页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
+  - 确定显示内容的优先级（Hierarchical rendering）：为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听 `DOMContentLoaded`/`load` 事件加载其他资源和内容。
+  - 异步加载 HTML 片段：当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。
+- [异步片段：使用 Marko 重新发现渐进式 HTML 渲染](https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/)
+- [什么是渐进式渲染？](https://stackoverflow.com/questions/33651166/what-is-progressive-rendering)
+
+### 你能描述一下渐进增强和优雅降级之间的不同吗？
+
+[渐进增强（Progressive enhancement）](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)
+
+[优雅降级（Graceful degradation）](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation)
+
+### 什么是微格式？在前端构建中应该考虑微格式吗？
+
+- 微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
+- 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（如：豆瓣，有兴趣自行 google）
+- [Microformats](https://developer.mozilla.org/en-US/docs/Web/HTML/microformats)
+
+### 什么是字符编码？
+
+- 字符编码是一种将字节转换为字符的方法。为了正确地验证或显示 HTML 文档，程序必须选择适当的字符编码。这是在标签中指定的：
+
+```html
+<meta charset="UTF-8" />
+```
+
+- **UTF-8**：Unicode 转换格式，以 8 位为单位，即以字节为单位。UTF8 中的字符长度可以从 1 到 4 个字节，从而使 UTF8 的宽度可变。
+
+### 什么是 WHATWG？
+
+[WHATWG](https://whatwg.org/)（Web 超文本应用技术工作组）是一个对通过标准和测试来发展 Web 感兴趣的人们组成的社区。
+
+### 什么是 WebP？
+
+- [WebP](https://developers.google.com/speed/webp/) 类似于 JPG、PNG 这样的图像格式，它的大小比其他格式小大约 10-20%。
+- 由 Google 在 2010 年开发和推出。
+- 并非所有浏览器都支持 WebP。
+- 可以使用插件将其他格式转换为 WebP。
+
+### 什么是 Web 组件？
+
+> [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。不需要需要任何外部库来工作。
+
+**特征**：
+
+- **Custom elements（自定义元素）**
+- **Shadow DOM（影子 DOM）**
+- **HTML templates（HTML 模板）**
+- **HTML Import** 允许导入的外部 HTML 文档。
+
+**更多资料**
+
+- [Web 组件入门实例教程](http://www.ruanyifeng.com/blog/2019/08/web_components.html)
+
+### Web 应用程序中的可访问性？
+
+> 维基百科：可访问性是最常用于描述设施或设施，帮助残疾人，如“轮椅”。这可以扩展到盲文标识、轮椅坡道，音频信号在人行横道，轮廓人行道，网站设计，等等。
+
+### 什么是 ARIA？
+
+> **[Accessible Rich Internet Applications（ARIA）**](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由 JavaScript 开发的）的一套机制。
+
+- ARIA 通过 HTML 属性为屏幕阅读器提供了额外的信息。其不影响元素如何被呈现在浏览器中。
+- 您可以通过遵循 ARIA 标准（例如：HTML 语义，alt 属性并以预期的方式使用 `[role = button]`）来使您的网站更易于访问
+
+```html
+<style>
+  [role='note'] {
+    padding: 10px;
+    border: 1px solid;
+    border-left: 5px solid rebeccapurple;
+    color: rebeccapurple;
+    border-radius: 5px;
+  }
+</style>
+<section>
+  <div role="note">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
+    totam.
+  </div>
+</section>
+```
+
+- ARIA `role` 没有为大多数元素的默认语义添加任何内容
+- 在某些情况下，HTML 元素的语义可以通过 ARIA `role`，状态或属性来表达。常被称为元素的“[默认隐式 ARIA 语义](https://www.w3.org/TR/wai-aria-1.1/#implicit_semantics)”
+- ARIA 允许开发人员以有意义的方式重新发明和扩展原生 HTML 特性。但它的特性与内置技术相比是脆弱的。
+
+一些冗余 ARIA 的示例：
+
+```html
+<button role="button">关注</button>
+<a href="https://github.com/lio-zero" role="link">lio-zero</a>
+<input type="checkbox" role="checkbox" />
+<input type="radio" role="radio" />
+```
+
+HTML5 使用默认的隐式语义定义了一组新的结构和分段元素，这些语义与 ARIA `role` 匹配（在某些情况下）：
+
+- 使用 `role = button` 时，考虑使用 `<button>` 元素，或者其他各种原生 HTML 按钮类型。
+- 使用 `role=link` 时，考虑改用 `<a href>` 元素。
+- 使用 `role=heading` 和 `aria-level="1-6"`，考虑改用 `<h1>` 到 `<h6>` 元素。
+- 使用 `role=list` 和 `role=listitem` 时，考虑改用 `<ol>` 或 `<ul>` 和 `<li>` 元素。
+- 使用 `role=listbox` 和 `role=option`，考虑改用 `<select>` 和 `<option>` 元素。
+- 使用 `role=checkbox` 或 `role=radio` 时，考虑改用 `<input type="checkbox">` 或 `<input type="radio">` 元素。
+- 使用 `role=textbox`，可以考虑使用 `<input type="text">` 或搜索、电子邮件、url 或电话。
+- `article`、`aside`、`footer`、`header`、`main`、`nav`、`section` 等等。
+
+这意味着在实现后，浏览器将公开该元素的默认隐式语义，因此您不必这样做。
+
+更多资料：
+
+- [在 HTML 和 ARIA 大括号上（默认的隐式 ARIA 语义，他们不想让你知道）](http://html5doctor.com/on-html-belts-and-aria-braces/)
+- [HTML5 – W3C 建议书 2014 年 10 月 28 日](http://www.w3.org/TR/html5/)
+- [在 HTML 中使用 ARIA 的注意事项](http://w3c.github.io/aria-in-html/)
+
+### 什么是屏幕阅读器？
+
+屏幕阅读器是提供辅助技术的软件程序，该技术可以使残障人士（例如，没有视力，声音或滑鼠能力的人）使用 Web 应用程序。
+
+## HTML 开发准则
+
+- [符合 W3C](https://validator.w3.org/?ref=frontendchecklist)：所有页面都需要使用 W3C 验证程序进行测试，以识别 HTML 代码中可能存在的问题。
+- 清理注释：在将页面发送到生产环境之前，需要删除不必要的代码。
+- 错误页面：每个网站都应该存在错误 404 页面和 5xx。
+- [HTML5 语义元素](https://htmlreference.io/semantic/)：适当使用了 HTML5 语义元素（`<header>`，`<section>`，`<footer>`，`<main>`...）
+- [HTMLHint](https://htmlhint.com/)：我使用工具来帮助我分析我的 HTML 代码可能遇到的任何问题。
+  - [Dirty markup](https://dirtymarkup.com/?ref=frontendchecklist)
+  - [webhint](https://webhint.io/?ref=frontendchecklist) 是一个可自定义的整理工具，可通过检查代码中的最佳做法和常见错误来帮助您提高网站的可访问性，速度，跨浏览器兼容性以及其他功能。
+- [链接检查器](https://validator.w3.org/checklink?ref=frontendchecklist)：检查页面链接是否可用，请确认您没有任何 404 错误。
+- [Noopener](https://mathiasbynens.github.io/rel-noopener/?ref=frontendchecklist)：如果您正在使用带有 `target ="_ blank"` 的外部链接，则您的链接应具有 `rel="noopener"` 属性，以防止标签被挪用。如果您需要支持旧版本的 Firefox，请使用 `rel="noopener noreferrer"`
+- [HTML 代码规范](https://codeguide.co/#html)：开发一致、灵活和可持续的 HTML 和 CSS 的标准。
+- 使用出色的开源工具 [W3C tools](https://w3c.github.io/developers/tools/) 将代码发挥最大潜能。
+
+## HTML 性能优化
+
+- [为页面测速](https://varvy.com/pagespeed/style-script-order.html)制定样式和脚本
+- 压缩 HTML：将注释、空格和空行从生产文件中删除。
+  - 删除所有不必要的空格、注释和中断行将减少 HTML 的大小，加快网站的页面加载时间，并显著减少用户的下载时间。
+  - 可以使用 Glup 等构建工具进行删除
+  - [HTML minifier | Minify Code](http://minifycode.com/html-minifier/)
+  - [Experimenting with HTML minifier — Perfection Kills](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype)
+- 删除不必要的属性：像 `type="text/javascript"` or `type="text/css"` 这样的属性应该被移除。
+  - 类型属性不是必需的，因为 HTML5 把 `text/css` 和 `text/javascript` 作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。
+  - 确保所有和 `<script>` 标签都没有任何 `type` 属性。
+  - [The Script Tag | CSS-Tricks](https://css-tricks.com/the-script-tag/)
+- 避免脚本阻塞加载。确保在使用 JavaScript 代码之前加载 CSS。
+  - 在引用 JavaScript 之前引用 CSS 可以实现更好地并行下载，从而加快浏览器的渲染速度。
+  - 确保 `<link>` 和 `<style>` 始终位于 `<script>` 之前。
+  - [合理安排 styles 和 scripts 来提高网页速度](https://varvy.com/pagespeed/style-script-order.html)
+- 尽可能使用 `async` 和 `defer`
+  - 确保 JavaScript 脚本兼容 `async` 和 `defer`，任何时候都要尽可能使用 `async`，特别是当你有较多的 `script` 标签时。
+  - 这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 `script` 标签后就不会重绘任何东西。
+  - [消除渲染阻塞资源](https://web.dev/render-blocking-resources/)
+- DNS 预取：一次 DNS 查询时间大概在 60-120ms 之间或者更长，提前解析网页中可能的网络连接域名
+
+```html
+<link rel="dns-prefetch" href="http://example.com/" />
+```
+
+- 减少内联脚本的数量
+  - 内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。
+  - 通常，尽量少的使用内联脚本和减少用 `document.write()` 来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用 `document.write()` 的传统方法。
+- 缩小和压缩图像
+  - 较大的图像会导致页面需要更多的时间来加载。在将图像添加到页面之前，请考虑使用 Photoshop 等图像处理工具内置的压缩功能，或使用 [Compress JPEG](https://compressjpeg.com/) 或 [Tiny PNG](https://tinypng.com/) 等专用工具对图像进行压缩
+- 最小化文件数量
+  - 减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的 [HTTP](https://developer.mozilla.org/en-US/docs/HTTP) 请求数量，从而减少这些请求的收发时间。
+  - 根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 [If-Modified-Since](https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since) 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。
+- 最小化 `iframe` 的数量：仅在没有任何其他技术可行性时才使用 `iframe`。
+- 避免节点深层级嵌套：深层级嵌套的节点在初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，这与浏览器构建 DOM 文档的机制有关。浏览器会把整个 HTML 文档的结构存储为 DOM "树" 结构。当文档节点的嵌套层次越深，构建的 DOM 树层次也会越深。
+- 页面缓存：在不设置页面缓存的情况下，每次刷新页面会重新读取服务器文件。设置页面缓存，每次刷新可从本地读取，提高页面加载效率
+  - 通过设置页面头的 `expires` 来定义页面过期时间，将过期时间定久一点就达到了 "永久" 缓存。
+
+```html
+<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
+```
+
+- 避免 Table 布局：`table` 比其它 HTML 标签占更多的字节（造成下载时间延迟，占用服务器更多流量资源）
+  - 不使用 `table` 布局，而应运用 `float`，`position`，`flex` 或 `grid` 来布局。
+  - 当然，`table` 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 `table`。
+  - 参考：[为什么我们不建议用 Table 布局](https://www.html5tricks.com/why-not-table-layout.html) 和 [最小化布局](https://medium.com/better-programming/web-performance-dom-reflow-76ac7c4d2d4f)
+- [如何制作快速加载的 HTML 页面](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages) 中还有其他方面的例子，如：高效地排列页面组件、合理的选择 user-agent 等
+- [优先分配资源](https://web.dev/prioritize-resources/)
+- [预加载关键资源以提高加载速度](https://web.dev/preload-critical-assets/)
+- [尽早建立网络连接以提高感知的页面速度](https://web.dev/preconnect-and-dns-prefetch/)
+- [预取资源以加速将来的导航](https://web.dev/link-prefetch/)
+- [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html)
+- [基于 JavaScript 和网络信息 API 的自适应服务](https://addyosmani.com/blog/adaptive-serving/)
+
+## 参考资料
+
+- [HTML 最佳实践](https://github.com/hail2u/html-best-practices)
+- [W3C](https://www.w3.org/)
+- [维基百科](https://zh.wikipedia.org/wiki/Wikipedia:%E9%A6%96%E9%A1%B5)
+- [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)
+- [HTML 标准](https://html.spec.whatwg.org/multipage/)
+- [front-end-interview-handbook](https://github.com/yangshun/front-end-interview-handbook)
+- [front-end-Interview-Questions](https://github.com/khan4019/front-end-Interview-Questions)
+- [Front-End-Performance-Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist)
+- [Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist)
+- [30-seconds-of-interviews](https://github.com/30-seconds/30-seconds-of-interviews)
+- [HTML 备忘单](https://htmlcheatsheet.com/)
diff --git "a/HTML/HTML autocomplete \345\261\236\346\200\247.md" "b/HTML/HTML autocomplete \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..c348578
--- /dev/null
+++ "b/HTML/HTML autocomplete \345\261\236\346\200\247.md"	
@@ -0,0 +1,58 @@
+# HTML autocomplete 属性
+
+HTML `autocomplete` 属性为表单元素 `<input>` 字段提供了各种各样的选项。其作用是向浏览器指示值是否应在适当时自动填充。
+
+`autocomplete` 允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
+
+其最常见的两个常规值：
+
+- `on`（默认）— 允许浏览器自动完成输入。没有提供有关该字段中期望的数据类型的指导，因此浏览器可以使用自己的判断。
+- `off` — 浏览器不允许为此字段自动输入或选择一个值。文档或应用程序可能提供其自己的自动完成功能，或者出于安全方面的考虑，要求不要自动输入该字段的值。
+- 完整的 `autocomplete` 可选项可查看 [autocomplete#values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)。
+
+```html
+<input type="text" name="username" autocomplete="off">
+```
+
+这样，浏览器将不会对 `username` 这个输入框提供自动完成。
+
+在表单中使用 `autocomplete` 属性可以帮助用户输入更快，但是在有敏感信息的场合，应该禁用自动完成。
+
+> **注意**：许多现代浏览器在某些情况下故意忽略某些字段上的 `off` 值，以便让用户对自动填充字段有更多的控制。一个例子是使用密码管理器。另外，`autocomplete` 属性并不能完全禁止浏览器保存表单数据，只是在自动填充时不显示之前输入过的数据。
+
+下面是另一个常用的值 `new-password`，它将用于密码输入框。
+
+## new-password
+
+`new-password` 值表示这个元素是新密码字段，如果用户在浏览器中已经保存了这个网站的用户名和密码，那么在输入新密码时，浏览器将不会自动填充密码，以免密码被错误地填充到错误的地方。
+
+```html
+<form action="signup" method="post">
+  <input type="text" autocomplete="username" />
+  <input type="password" autocomplete="new-password" />
+  <input type="submit" value="注册" />
+  <button type="reset">重置</button>
+</form>
+```
+
+此外，如果表单包含第二个密码字段，要求用户重新键入新创建的密码，则两个密码字段都应使用 `autocomplete="new-password"`。
+
+以下是 Chrome 的密码管理器，你可以在**设置/自动填充/密码**下管理它们：
+
+![new-password](https://upload-images.jianshu.io/upload_images/18281896-f41a2b2eb765766c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![建议一个安全密码](https://upload-images.jianshu.io/upload_images/18281896-646c3b3067cab408.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![密码管理器](https://upload-images.jianshu.io/upload_images/18281896-35f7ea4b24423251.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![管理](https://upload-images.jianshu.io/upload_images/18281896-a0ab823aa26b6e8f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 其他注意点
+
+`autocomplete` 属性适用于下面的 `<input>` 类型控件：`text`、`search`、`url`、`tel`、`email`、`password`、`datepickers`、`range` 和 `color`。
+
+**注意**：在某些浏览器中，你可能需要手动启用自动完成功能（在浏览器菜单的**参数设置**中进行设置）。
+
+以下是 Can I Use 下 [autocomplete](https://caniuse.com/?search=autocomplete%20) 的支持情况
+
+![autocomplete 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-278c20c2ee90c614.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/HTML/HTML data \345\205\203\347\264\240.md" "b/HTML/HTML data \345\205\203\347\264\240.md"
new file mode 100644
index 0000000..b7b2691
--- /dev/null
+++ "b/HTML/HTML data \345\205\203\347\264\240.md"	
@@ -0,0 +1,36 @@
+# HTML data 元素
+
+`data` 元素表示其内容，以及值属性中这些内容的机器可读形式。Edge、Firefox 和 Safari 都支持 `<data>` 元素。
+
+`value` 属性是必需的，其值必须以机器可读的格式表示元素的内容。[HTML 标准建议](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-data-element)如下：
+
+> 元素可以与页面中的脚本一起使用，当脚本有一个文本值与一个人类可读的值一起存储时。（用法近似于 `data-*`）
+
+```html
+<script src="sortable.js"></script>
+<table class="sortable">
+ <thead> <tr> <th> Game <th> Corporations <th> Map Size
+ <tbody>
+  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
+  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
+  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
+</table>
+```
+
+另一个示例：
+
+```html
+<p>New Products:</p>
+<ul>
+  <li><data value="398">Mini Ketchup</data></li>
+  <li><data value="399">Jumbo Ketchup</data></li>
+  <li><data value="400">Mega Jumbo Ketchup</data></li>
+</ul>
+```
+
+```css
+data:hover::after {
+  content: ' (ID ' attr(value) ')';
+  font-size: 0.7em;
+}
+```
diff --git "a/HTML/HTML iframe \346\240\207\347\255\276.md" "b/HTML/HTML iframe \346\240\207\347\255\276.md"
new file mode 100644
index 0000000..5826d8d
--- /dev/null
+++ "b/HTML/HTML iframe \346\240\207\347\255\276.md"	
@@ -0,0 +1,107 @@
+# HTML iframe 标签
+
+HTML [`iframe` 标签](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)用于在网页中嵌入另一个网页。
+
+从技术上讲，`iframe` 创建了一个新的嵌套浏览上下文。这意味着 `iframe` 中的任何内容都不会干扰父页面，反之亦然。JavaScript 和 CSS 不会泄漏到 `iframe` 或从 `iframe` 中泄漏。
+
+许多网站使用 `iframe` 执行各种操作。你可能熟悉 [CodePen](https://codepen.io/)、[Glitch](https://glitch.com/)、[CodeSandbox](https://codesandbox.io/) 或其他允许你在页面的某个部分编码的网站，并在一个框中看到结果。那个框便是 `iframe`。
+
+你可以这样创建：
+
+```html
+<iframe src="page.html" />
+```
+
+
+你也可以加载绝对 URL：
+
+```html
+<iframe src="https://example.com/page.html" />
+```
+
+你可以设置一组 `width` 和 `height` 参数（或使用 CSS 设置），否则 `iframe` 将使用默认值，即 `300 x 150` 像素的框：
+
+```html
+<iframe src="page.html" width="800" height="400" />
+```
+
+## Srcdoc
+
+`srcdoc` 属性允许你指定一些要显示的内联 HTML。它是 `src` 的替代品，[但完全不支持 IE 浏览器](https://caniuse.com/?search=Srcdoc)：
+
+```html
+<iframe srcdoc="<p>Hello iframe!</p>" />
+```
+
+## Sandbox
+
+`sandbox` 属性允许我们限制 `iframe` 中允许的操作。
+
+如果我们省略它，一切都是允许的：
+
+```html
+<iframe src="page.html" />
+```
+
+如果我们将其设置为 `''`（空），则不允许：
+
+```html
+<iframe src="page.html" sandbox="" />
+```
+
+我们可以通过在 `sandbox` 属性中添加选项来选择允许的内容。你可以通过在中间添加空格来允许多个。以下是你可以使用的选项的不完整列表：
+
+- `allow-forms` 允许提交表单
+- `allow-modals` 允许打开模态窗口，包括在 JavaScript 调用 `alert()`
+- `allow-orientation-lock` 允许锁定屏幕方向
+- `allow-popups` 允许弹出窗口、使用 `window.open()` 和 `target="_blank"` 链接
+- `allow-same-origin` 将正在加载的资源视为同一来源
+- `allow-scripts` 让加载的 `iframe` 运行脚本（但不创建弹出窗口）。
+- `allow-top-navigation` 允许访问 `iframe` 以访问顶级浏览上下文
+
+## Allow
+
+目前只是实验性的，并且只支持基于 Chromium 的浏览器，这是父窗口和 `iframe` 之间资源共享的未来。
+
+它类似于 `sandbox` 属性，但允许我们使用特定的功能，包括：
+
+- `accelerometer` 提供对 [Sensors API Accelerometer](https://developer.mozilla.org/en-US/docs/Web/API/Accelerometer) 接口的访问权限
+- `ambient-light-sensor` 提供对 [Sensors API AmbientLightSensor](https://developer.mozilla.org/en-US/docs/Web/API/AmbientLightSensor) 接口的访问权限
+- `autoplay` 允许自动播放视频和音频文件
+- `camera` 允许从 [getUserMedia API](<https://github.com/lio-zero/blog/blob/main/Web%20API/getUserMedia()%20%E6%96%B9%E6%B3%95.md>) 访问相机
+- `display-capture` 允许使用 [getDisplayMedia API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) 访问屏幕内容
+- `fullscreen` 允许访问全屏模式
+- `geolocation` 允许访问 [Geolocation API](https://github.com/lio-zero/blog/blob/main/Web%20API/Web%20Geolocation%20API.md)
+- `gyroscope` 提供对 [Sensors API Gyroscope](https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope) 接口的访问权限
+- `magnetometer` 提供对 [Sensors API Magnetometer](https://developer.mozilla.org/en-US/docs/Web/API/Magnetometer) 接口的访问权限
+- `microphone` 使用 [getUserMedia API](https://github.com/lio-zero/blog/blob/main/Web%20API/getUserMedia()%20%E6%96%B9%E6%B3%95.md) 访问设备麦克风
+- `midi` 允许访问 [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API)
+- `payment` 提供对 [Payment Request API](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API) 的访问权限
+- `speaker` 允许通过设备扬声器播放音频
+- `usb` 提供对 [WebUSB API](https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API) 的访问权限
+- `vibrate` 提供对 [Vibration API](https://github.com/lio-zero/blog/blob/main/Web%20API/Web%20Vibration%20API.md) 的访问权限
+- `vr` 提供对 [WebVR API](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API) 的访问权限
+
+这些都是实验性，完整内容查看 👉 [特征策略](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Feature_Policy)。
+
+## Referrer
+
+加载 `iframe` 时，浏览器会在 `Referer` 标题中向其发送有关谁正在加载它的重要信息（请注意单个 `r`，我们必须忍受的拼写错误）。
+
+> [wiki](https://zh.wikipedia.org/wiki/HTTP%E5%8F%83%E7%85%A7%E4%BD%8D%E5%9D%80#.E6.8B.BC.E5.86.99.E9.97.AE.E9.A2.98)：Referer 的正确英语拼法是 referrer。这是早期 HTTP 规范当中存在的拼写错误，后来为保持向下兼容将错就错。
+
+[`referrerpolicy` 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe#attr-referrerpolicy)允许我们设置在加载时发送到 `iframe` 的 referrer。referrer 是一个 HTTP 头，让页面知道谁在加载它。以下是允许的值：
+
+- `no-referrer` 不发送 referrer 标头
+- `no-referrer-when-downgrade` 是默认值，即当前页面通过 HTTPS 加载，并且 `iframe` 在 HTTP 协议上加载时发送 referrer 来源网址
+- `origin` 发送 referrer 来源网址，仅包含来源（端口、协议和域），而不包含默认来**源和路径**
+- `origin-when-cross-origin` 当从 `iframe` 中的同源（端口、协议、域）加载时，referrer 以其完整形式（来源 + 路径）发送。否则只发送原点
+- `same-origin` 仅当从 `iframe` 中的同源（端口、协议、域）加载时，才会发送 referrer 来源网址
+- `strict-origin` 如果当前页面通过 HTTPS 加载，并且 `iframe` 也通过 HTTPS 协议加载，那么发送源作为 referrer。如果 `iframe` 通过 HTTP 加载，则不发送任何内容
+- `strict-origin-when-cross-origin` 在同源上工作时，将**来源和路径**作为 referrer 发送。如果当前页面通过 HTTPS 加载，并且 `iframe` 也通过 HTTPS 协议加载，那么发送源作为 referrer。如果 `iframe` 通过 HTTP 加载，则不发送任何内容
+- `unsafe-url` 即使从 HTTP 加载资源，并且当前页面是通过 HTTPS 加载的，也会将**源和路径**作为 referrer 发送
+
+## 更多资料
+
+- [iframe 是什么？有什么优缺点？](https://github.com/lio-zero/blog/blob/main/HTML/HTML%20HTML5%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%20%E2%80%94%20%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B8%93%E7%94%A8.md#iframe-%E6%98%AF%E4%BB%80%E4%B9%88%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E7%BC%BA%E7%82%B9)
+- [Making Embedded Content Work In A Responsive iFrame](https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/)
diff --git "a/HTML/HTML picture \346\240\207\347\255\276.md" "b/HTML/HTML picture \346\240\207\347\255\276.md"
new file mode 100644
index 0000000..c4586cf
--- /dev/null
+++ "b/HTML/HTML picture \346\240\207\347\255\276.md"	
@@ -0,0 +1,39 @@
+# HTML picture 标签
+
+[`picture` 标签](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture)是 HTML5 中新增的一个元素，用来实现响应式图像。它可以根据屏幕大小和其他条件来选择最合适的图像进行加载。
+
+它与 `img` 标签的 `srcset` 属性非常相似，并且差异非常细微。
+
+当你想要完全改变文件，而不是仅仅服务于一个小版本的文件时，你就可以使用 `picture`。或者提供不同的图像格式。
+
+我发现的最佳用例是在提供 [WebP 图像](https://github.com/lio-zero/blog/blob/main/WTF/WebP%20%E5%9B%BE%E5%83%8F%E6%A0%BC%E5%BC%8F.md)时，它虽然已经在主流浏览器中得到广泛支持，但你知道的，IE 是个例外。
+
+在 `picture` 标签中，你指定了一个图像列表，并将按顺序使用这些图像，因此以下示例中，支持 WebP 的浏览器将使用第一个图像，如果不支持则回退到 JPG：
+
+```html
+<picture>
+  <source type="image/webp" srcset="image.webp" />
+  <img src="image.jpg" alt="An image" />
+</picture>
+```
+
+`source` 标签定义了图像的一种（或多种）格式。如果浏览器非常旧并且不支持 `picture` 标签，`img` 标签是备用的。
+
+在 `picture` 内的 `source` 标签中，你可以添加 `media` 属性以设置媒体查询。
+
+下面的示例类似于上述 `srcset` 示例：
+
+```html
+<picture>
+  <!--  -->
+  <source media="(min-width: 500w)" srcset="avatar-500.png" sizes="100vw" />
+  <source media="(min-width: 800w)" srcset="avatar-800.png" sizes="100vw" />
+  <source media="(min-width: 1000w)" srcset="avatar-1000.png" sizes="800px" />
+  <source media="(min-width: 1400w)" srcset="avatar-1400.png" sizes="800px" />
+  <img src="avatar.png" alt="An image" />
+</picture>
+```
+
+## 更多资料
+
+[使用 srcset 的响应式图像](https://github.com/lio-zero/blog/blob/main/HTML/%E4%BD%BF%E7%94%A8%20srcset%20%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%9B%BE%E5%83%8F.md)
diff --git "a/HTML/HTML title \345\261\236\346\200\247.md" "b/HTML/HTML title \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..1783747
--- /dev/null
+++ "b/HTML/HTML title \345\261\236\346\200\247.md"	
@@ -0,0 +1,40 @@
+# HTML title 属性
+
+> **先总结**：除非在特殊情况下，否则不要使用 [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) 属性。
+
+HTML `title` 全局属性包含表示与其所属元素相关的建议信息的文本。也就是指定元素的提示文本。
+
+当鼠标移动到带有 `title` 属性的元素上时，提示文本将作为工具提示（tooltip）显示出来。可以说，`title` 是对该元素的描述和进一步的说明。
+
+但在一些情况下，它可能是不必要的。
+
+我们都知道，`title` 属性通常被用于可访问性和 SEO 的优化。但对于屏幕阅读器用户来说，`title` 属性中包含的内容通常是不必要的、多余的，甚至可能没有使用。在大多数情况下，放置在 `title` 属性中的内容对（可能的）大多数用户是隐藏的。如果信息对大多数用户都是隐藏的，那么可能就没有存在的必要了。
+
+以下是常见适合使用 `title` 属性的情况：
+
+- 对于 `<frame>` 和 `<iframe>` 元素
+- 用于在文本标签多余时提供标签
+
+如果想要在 `<img>` 标签上使用 `title`，请保持与 `alt` 相同的值。
+
+根据文本替代计算的预期行为，计算文本替代的优先级应该是：
+
+- [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) —— 该属性用来表明某些元素的 `id` 是某一对象的标签。
+- [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) —— 该属性用来给当前元素加上的标签描述，接受字符串作为参数。
+- `alt`
+- `title`
+
+在使用上述两种或两种以上的情况下，列表中最高的就成为所使用的。考虑以下示例：
+
+```html
+<img src="logo.png" alt="" title="logo" />
+```
+
+在这种情况下，`alt` 实际上成为了首要方案，因为它的优先级更高。因此，即使 `title` 拥有有用的内容，它也不会被使用，因为 `alt` 在那里。
+
+对于一个普遍可靠的文本替代图像，`alt` 属性应该是首选方法。在提供 `title` 属性的情况下，它应该与 `alt` 具有相同的值。
+
+## 更多资料
+
+- [The Trials and Tribulations of the Title Attribute](https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/)
+- [Using the HTML title attribute](https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/)
diff --git "a/HTML/HTML translate \345\261\236\346\200\247.md" "b/HTML/HTML translate \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..aa29dda
--- /dev/null
+++ "b/HTML/HTML translate \345\261\236\346\200\247.md"	
@@ -0,0 +1,22 @@
+# HTML translate 属性
+
+HTML 标准规定，默认情况下，所有 HTML 元素都处于**启用翻译的状态**，这意味着它们的文本内容和一些属性（包括 `alt` 和 `placeholder`）**在页面本地化时将被翻译**。
+
+HTML5 新增了一个 `translate` 属性，通过将 `translate` 属性设置为 `no`，网页可以将特定 HTML 元素的这种状态更改为 [`no-translate`](https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute)。
+
+> [WHATWG](https://blog.whatwg.org/weekly-translate-attribute) 博客写道：默认情况下，所有内容都可以翻译。你可以通过将 `translate` 属性设置为 `"no"` 值来覆盖它。这可用于名称、计算机代码、仅在给定语言中有意义的表达式等。
+
+`translate="no"` 属性指示在线翻译服务以网页的原始语言保留单词或短语。
+
+例如，在一个用德语编写的网页上，句子 “Mein Kampf wurde 1923 veröffentlicht” 被谷歌翻译成 “我的战斗发表于 1923 年”。在这种情况下，将书名包含在 `translate="no"` 元素中将产生最佳翻译（“Mein Kampf 于 1923 年出版”）：
+
+```html
+<p>
+  <em translate="no" class="notranslate">Mein Kampf</em>
+  wurde 1923 veröffentlicht.
+</p>
+```
+
+**Mein Kampf** 将不会被翻译。
+
+[W3C 使用 HTML 的 `translate` 属性](https://www.w3.org/International/questions/qa-translate-flag)指南也提供了多个使用示例。
diff --git "a/HTML/HTML \346\240\207\345\207\206 FAQ.md" "b/HTML/HTML \346\240\207\345\207\206 FAQ.md"
new file mode 100644
index 0000000..c7d311d
--- /dev/null
+++ "b/HTML/HTML \346\240\207\345\207\206 FAQ.md"	
@@ -0,0 +1,29 @@
+# HTML 标准 FAQ
+
+首先，我们先了解一下什么是 **WHATWG** 和 **W3C**。
+
+## 什么是 WHATWG？
+
+[WHATWG](https://whatwg.org/)（Web 超文本应用技术工作组）是一个对通过标准和测试来发展 Web 感兴趣的人们组成的社区。
+
+## 什么是 W3C？
+
+[W3C](https://www.w3.org/)（万维网联盟）是一个国际组织，它开发开放标准以确保 Web 的长期发展。
+
+W3C 对 Web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范，例如：
+
+- Web 标准规范要求，书写标签**必须闭合、标签小写、不乱嵌套**，标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助
+- 建议使用外链 CSS 和 JS 脚本，从而达到结构、表现与行为的分离，提高页面的渲染速度，提高用户的体验
+- 样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版方便
+- 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；
+- 遵循 W3C 制定的 Web 标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
+
+## HTML 标准 FAQ
+
+WHATWG 维护着 [HTML 标准 FAQ（常见问题解答）](https://github.com/whatwg/html/blob/master/FAQ.md)，为 HTML 标准规范提供常见的问题解答。
+
+[HTML 功能提案](https://github.com/whatwg/html/blob/master/FAQ.md#html-feature-proposals)部分回应了一些常见的功能请求，例如允许 `href` 所有元素上的属性，Web 开发人员被邀请在 [WICG 论坛](https://discourse.wicg.io/)上讨论提案 ，并概述了向 Web 平台添加新功能的成本。
+
+W3C 和 WHATWG 规范在某些主题上存在分歧，并且这些差异在任何地方都没有记录。
+
+> 详细查阅 [The HTML Standard FAQ](https://webplatform.news/issues/2017-08-11#the-html-standard-faq)。
diff --git "a/HTML/HTML \347\232\204\345\256\236\344\275\223\347\274\226\347\240\201\357\274\210HTML Entity Encode\357\274\211.md" "b/HTML/HTML \347\232\204\345\256\236\344\275\223\347\274\226\347\240\201\357\274\210HTML Entity Encode\357\274\211.md"
new file mode 100644
index 0000000..807ae4c
--- /dev/null
+++ "b/HTML/HTML \347\232\204\345\256\236\344\275\223\347\274\226\347\240\201\357\274\210HTML Entity Encode\357\274\211.md"	
@@ -0,0 +1,29 @@
+# HTML 的实体编码（HTML Entity Encode）
+
+[HTML 实体](https://developer.mozilla.org/zh-CN/docs/Glossary/Entity)编码是将特殊字符编码为一个符号，这样就可以在 HTML 中使用这些字符而不会影响文档的结构。
+
+例如：
+
+- 不可分的空格 — `&nbsp;`
+- `<`（小于符号） — `&lt;`
+- `>`（大于符号） — `&gt;`
+- `&`（与符号） — `&amp;`
+- `"`（双引号） — `&quot;`
+- `'`（单引号） — '`&apos;`
+- `©`（版权符号）— `&copy;`
+
+以上列出的一些实体比较容易记忆，但有一些不容易记住的你可以查看 WHATWG 提供的[字符实体的官方列表](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)或使用[解码工具](https://mothereff.in/html-entities)。
+
+HTML 实体是一段以连字符号（`&`）开头，以分号（`;`）结尾的字符串。用以显示不可见字符及保留字符（如 HTML 标签）
+
+在前端，一般为了避免 [XSS 攻击](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20XSS%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)，会将 `<>` 编码为 `&lt;` 与 `&gt;`，这些就是 HTML 实体编码。
+
+在 HTML 转义时，仅仅只需要对六个字符进行编码：`&`、`<`、`>`、`"`、`'` 以及 **`**。我们可以使用 [he](https://www.npmjs.com/package/he) 或 [DOMPurify](https://github.com/cure53/DOMPurify) 库进行编码及转义。
+
+```js
+// 实体编码
+he.encode('<img src=""></img>') // '&#x3C;img src=&#x22;&#x22;&#x3E;&#x3C;/img&#x3E;'
+
+// 转义
+he.escape('<img src=""></img>') // '&lt;img src=&quot;&quot;&gt;&lt;/img&gt;'
+```
diff --git "a/HTML/Web \345\272\224\347\224\250\344\270\255\347\232\204\345\217\257\350\256\277\351\227\256\346\200\247.md" "b/HTML/Web \345\272\224\347\224\250\344\270\255\347\232\204\345\217\257\350\256\277\351\227\256\346\200\247.md"
new file mode 100644
index 0000000..6e80892
--- /dev/null
+++ "b/HTML/Web \345\272\224\347\224\250\344\270\255\347\232\204\345\217\257\350\256\277\351\227\256\346\200\247.md"	
@@ -0,0 +1,205 @@
+# Web 应用中的可访问性
+
+> 维基百科：可访问性是最常用于描述设施或设施，帮助残疾人，如“轮椅”。这可以扩展到盲文标识、轮椅坡道，音频信号在人行横道，轮廓人行道，网站设计，等等。
+
+我们在设计 HTML 时要考虑到可访问性，这一点很重要。
+
+具有可访问的 HTML 意味着残疾人可以使用 Web。它们中有完全失明或视力受损的用户，有听力损失问题的人和许多其他不同的残疾。
+
+如果一个人看不到你的页面，但仍想消费其内容，该怎么办？首先，他们是如何做到的？他们不能使用鼠标，他们使用一种叫做屏幕阅读器的东西。你不必想象。你现在可以试试：谷歌提供免费的 [ChromeVox Chrome 扩展](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn/)。可访问性还必须考虑允许工具轻松选择元素或在页面中导航。
+
+网页和 Web 应用程序并不总是以可访问性作为其首要目标之一，也许版本 1 可能发布时无法访问，但可以在发布后使网页可访问。越早越好，但永远不会太晚。
+
+这很重要，对于美国网站来说，有时这是[法定要求](http://www.section508.gov/)，政府或其他公共组织建立的网站必须可以访问的。
+
+以下是一部分你需要考虑的主要事项。
+
+> **注意**：还有其他一些事情需要注意，可能会出现在 CSS 主题中，例如颜色、对比度和字体。或者如何使 SVG 图像可访问。我不在这里谈论他们。
+
+## 使用 HTML 语义
+
+语义 HTML 非常重要，它是你需要注意的主要事项之一。让我举例说明几个常见的场景。
+
+使用正确的标题标签结构很重要。最重要的是 h1，对于不太重要的标题使用较大的数字，但所有相同级别的标题应该具有相同的含义（将其视为树结构）
+
+```txt
+h1
+h2
+h3
+h2
+h2
+h3
+h4
+```
+
+使用 `strong` 和 `em` 代替 `b` 和 `i`。从视觉上看，它们看起来是一样的，但前 2 个与它们相关的含义更多。`b` 和 `i` 是更多的视觉元素。
+
+> 推荐：[避免使用 b、i、s 和 u 标签](https://github.com/lio-zero/blog/blob/main/HTML/%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%20b%E3%80%81i%E3%80%81s%20%E5%92%8C%20u%20%E6%A0%87%E7%AD%BE.md)
+
+列表很重要。屏幕阅读器可以检测列表并提供概述，然后让用户选择是否进入列表。
+
+一个表应该有一个 `caption` 描述其内容的标题：
+
+```html
+<table>
+  <caption>
+    Example Caption
+  </caption>
+  <tr>
+    <th>Login</th>
+    <th>Email</th>
+  </tr>
+  <tr>
+    <td>user1</td>
+    <td>user1@sample.com</td>
+  </tr>
+  <tr>
+    <td>user2</td>
+    <td>user2@sample.com</td>
+  </tr>
+</table>
+```
+
+## 对图像使用 alt 属性
+
+所有图像必须具有描述图像内容的 `alt` 标签。这不仅仅是一个好的做法，它是 HTML 标准所要求的，没有它的 HTML 将不会被验证。
+
+```html
+<img src="avatar.png" alt="一张图片" />
+```
+
+这对搜索引擎也有好处，如果这是你添加它的动机的话。
+
+## 使用 role 属性
+
+`role` 属性允许你为页面中的各种元素分配特定角色。
+
+`role` 没有为大多数元素的默认语义添加任何内容，你可以手动分配许多不同的角色，例如：checkbox、img、list、grid、switch、feed 等等。
+
+为了了解它们，你可以在参考 [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)。但你不需要为页面中的每个元素分配角色。在大多数情况下，屏幕阅读器可以从 HTML 标签推断。例如，你不需要将角色标签添加到诸如 `nav`、`button` 和 `form` 之类的语义标签中。
+
+让我们以 `nav` 标签为例。你可以使用它来定义页面导航，如下所示：
+
+```html
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/blog">Blog</a></li>
+  </ul>
+</nav>
+```
+
+如果你被迫使用 `div` 标签而不是 `nav`，你将使用 `navigation` 角色：
+
+```html
+<div role="navigation">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/blog">Blog</a></li>
+  </ul>
+</div>
+```
+
+当标签没有传达意义时，`role` 用来分配一个有意义的值。
+
+一些冗余 ARIA 的示例：
+
+```html
+<button role="button">关注</button>
+<a href="https://github.com/lio-zero" role="link">lio-zero</a>
+<input type="checkbox" role="checkbox" />
+<input type="radio" role="radio" />
+```
+
+HTML5 使用[默认的隐式语义](https://www.w3.org/TR/wai-aria-1.1/#implicit_semantics)定义了一组新的结构和分段元素，这些语义与 ARIA `role` 匹配（在某些情况下）：
+
+- 使用 `role = button` 时，考虑使用 `<button>` 元素，或者其他各种原生 HTML 按钮类型。
+- 使用 `role=link` 时，考虑改用 `<a href>` 元素。
+- 使用 `role=heading` 和 `aria-level="1-6"`，考虑改用 `<h1>` 到 `<h6>` 元素。
+- 使用 `role=list` 和 `role=listitem` 时，考虑改用 `<ol>` 或 `<ul>` 和 `<li>` 元素。
+- 使用 `role=listbox` 和 `role=option`，考虑改用 `<select>` 和 `<option>` 元素。
+- 使用 `role=checkbox` 或 `role=radio` 时，考虑改用 `<input type="checkbox">` 或 `<input type="radio">` 元素。
+- 使用 `role=textbox`，可以考虑使用 `<input type="text">` 或搜索、电子邮件、url 或电话。
+- `article`、`aside`、`footer`、`header`、`main`、`nav`、`section` 等等
+
+这意味着在实现后，浏览器将公开该元素的默认隐式语义，因此你不必这样做。
+
+## 使用 tabindex 属性
+
+`tabindex` 属性允许你更改按 **Tab** 键选择**可选**元素的顺序。默认情况下，只有链接和表单元素可以通过使用 **Tab** 键进行导航来选择它们（你不需要在它们上设置 `tabindex`）。
+
+添加 `tabindex="0"` 使元素可选择：
+
+```html
+<div tabindex="0">...</div>
+```
+
+使用 `tabindex="-1"` 可以从基于选项卡的导航中删除一个元素，这非常有用。
+
+## 使用 aria 属性
+
+ARIA 是一个首字母缩略词，表示可访问的富互联网应用程序，并定义了可应用于元素的语义。
+
+> **[Accessible Rich Internet Applications（ARIA）**](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由 JavaScript 开发的）的一套机制。
+
+ARIA 通过 HTML 属性为屏幕阅读器提供了额外的信息。其不影响元素如何被渲染在浏览器中。
+
+### aria-label
+
+该属性用于添加一个字符串来描述一个元素。
+
+示例：
+
+```html
+<p aria-label="产品描述">...</p>
+```
+
+### aria-labelledby
+
+此属性设置当前元素与标记它的元素之间的相关性。
+
+如果你知道如何将 `input` 元素与 `label` 元素相关联，这是类似的。
+
+我们传递描述当前元素的项 `id`。
+
+示例：
+
+```html
+<h3 id="description">The description of the product</h3>
+
+<p aria-labelledby="description">...</p>
+```
+
+### aria-describedby
+
+这个属性让我们将一个元素与另一个用作描述的元素相关联。
+
+示例：
+
+```html
+<button aria-describedby="payNowDescription">立即付款</button>
+
+<div id="payNowDescription">点击按钮将发送到我们的表单！</div>
+```
+
+### 使用 aria-hidden 隐藏内容
+
+有一些内容对于阅读障碍的人来说是无用的，例如：视觉效果的暗模式、图标、图片等。
+
+添加 `aria-hidden="true"` 属性将告诉屏幕阅读器忽略该元素。
+
+## 更多资料
+
+- [WAI-ARIA](http://www.w3.org/WAI/intro/aria)
+- [A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/)
+- [Using ARIA](https://w3c.github.io/using-aria/)
+- [MDN: ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
+- [Accessibility](https://web.dev/accessibility/)
+- [WebAIM](https://webaim.org/)
+- [On HTML belts and ARIA braces (The Default Implicit ARIA semantics they didn’t want you to know about)](http://html5doctor.com/on-html-belts-and-aria-braces/)
+- [Tools for Developing Accessible Websites](https://bitsofco.de/tools-for-developing-accessible-websites/)
+- [Four Ways Design Systems Can Promote Accessibility — and What They Can’t Do](https://24ways.org/2019/four-ways-design-systems-can-promote-accessibility/)
+- [The 6 Most Common Accessibility Problems (and How to Fix Them)](https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html#empty-links-and-empty-buttons)
+- [在 HTML 中使用 ARIA 的规则](https://github.com/lio-zero/blog/blob/main/HTML/%E5%9C%A8%20HTML%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ARIA%20%E7%9A%84%E8%A7%84%E5%88%99.md)
+- [webhint](https://webhint.io) 是一个可自定义的整理工具，可通过检查代码中的最佳做法和常见错误来帮助你提高网站的可访问性，速度，跨浏览器兼容性以及其他功能。
+- [Accessibility Tutorial](https://www.w3schools.com/accessibility/index.php)
diff --git "a/HTML/alt \345\222\214 title \347\232\204\345\214\272\345\210\253.md" "b/HTML/alt \345\222\214 title \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..2d42ac8
--- /dev/null
+++ "b/HTML/alt \345\222\214 title \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,55 @@
+# alt 和 title 的区别
+
+`alt` 和 `title` 是 HTML 中用来描述图像和其他元素的两个属性。
+
+它们有以下区别：
+
+- `alt`（alternative text）属性是当元素不能正常呈现时用作元素内容的替代文本。[`<img>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) 是使用 `alt` 属性的最常用标签。当图像无法显示时，浏览器将在其位置显示 `alt` 文本，以便用户了解包含图像的含义。还可以被屏幕阅读器读取，帮助残疾人理解图像的意义。
+- `title` 属性用来为元素提供附加信息，当鼠标悬停在元素上时，`title` 文本会显示出来。
+
+**注意**，浏览器并非总是会显示图像。当有下列情况时，`alt` 属性可以为图像提供替代的信息：
+
+- 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
+- 用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）
+- 图像文件无效，或是使用了[不支持的格式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#Supported_image_formats)
+- 浏览器禁用图像等
+
+## 良好做法
+
+始终为 `<img>` 标签使用 `alt` 属性，以提供一些有用的信息。
+
+```html
+<!-- × -->
+<img src="wenhao.jpg" alt="图片" />
+
+<!-- √ -->
+<img src="wenhao.jpg" alt="满脸问号的男人" />
+```
+
+谷歌和其他搜索引擎无法读取图像，但可以看到 `alt` 文本。设置 `alt` 属性是 SEO（搜索引擎优化）的一个良好实践。
+
+通常不会为 `<img>` 设置 `title` 属性，除非它确实提供了有关图像的更多信息。但有人可能会争辩说，如果你必须用标题文本来解释你的图片，也许有更好的图片可以使用。
+
+所以，我们可以总结一下：
+
+- `alt` 属性是必须的，而 `title` 属性是可选的。
+- `alt` 是为了在图像加载不出来或不能访问时，给用户补充语义上的信息，而 `title` 是鼠标悬停时的额外说明。
+
+## 技巧
+
+这里有两个选项可以确保在 `img` 标签上始终包含 `alt` 属性。
+
+使用 CSS 为任何缺少或空白 `alt` 属性的 `img` 提供红色轮廓：
+
+```css
+img:not([alt]),
+img[alt=''] {
+  outline: 8px solid red;
+}
+```
+
+如果你使用的是 VS Code，则可以安装 [webhint](https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint) 扩展。
+
+当你将鼠标悬停在元素上时，它将自动检测问题并显示详细信息。
+
+![使用 webhint 检测缺少的备用文本](https://upload-images.jianshu.io/upload_images/18281896-dec384ace4201f38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/HTML/button \344\270\216 input type=\342\200\234button\342\200\235 \347\232\204\345\214\272\345\210\253.md" "b/HTML/button \344\270\216 input type=\342\200\234button\342\200\235 \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..f354bbe
--- /dev/null
+++ "b/HTML/button \344\270\216 input type=\342\200\234button\342\200\235 \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,20 @@
+# button 与 input type="button" 的区别
+
+- `<button>` 是行内块元素，其可以放置在文档的任意位置，并且可以包含文本和其他 HTML 元素。`<input type="button" />` 是空元素（如 `br`、`hr` 和 `image`），因此不能包含内容。
+- `<button>` 支持伪元素，例如 `::after` 和 `::before`，这对于设置按钮样式非常有用。而 `<input type="button" />` 没有。
+- 默认情况下，`<button>` 具有默认属性 `type="submit"`，也就是自带 `submit` 事件。这意味着，如果没有指定 `type` 属性，单击该按钮将提交其封闭表单。
+
+如果你希望 `input` 作为提交按钮，我们必须将 `type` 属性更改为 `submit`。
+
+## 建议
+
+- `button` 元素比 `button` 类型的 `input` 更具语义。如果要创建可单击的按钮，建议使用 `button` 元素。
+- 始终指定 `button` 元素的 `type` 属性。
+
+可能的值是：
+
+| 值       | 描述                             |
+| -------- | -------------------------------- |
+| `submit` | 按钮将表单数据提交到服务器       |
+| `reset`  | 将表单输入重置为初始值           |
+| `button` | 默认情况下，按下时不执行任何操作 |
diff --git "a/HTML/label \346\240\207\347\255\276\350\247\246\345\217\221\347\233\270\345\205\263 input \347\232\204\347\212\266\346\200\201.md" "b/HTML/label \346\240\207\347\255\276\350\247\246\345\217\221\347\233\270\345\205\263 input \347\232\204\347\212\266\346\200\201.md"
new file mode 100644
index 0000000..802659e
--- /dev/null
+++ "b/HTML/label \346\240\207\347\255\276\350\247\246\345\217\221\347\233\270\345\205\263 input \347\232\204\347\212\266\346\200\201.md"	
@@ -0,0 +1,31 @@
+# label 标签触发相关 input 的状态
+
+`label` 标签可以通过 `for` 属性和 `input` 的 `id` 值关联起来来触发相关 `input` 的状态。当用户点击 `label` 标签时，会触发相关联的 `input` 元素的焦点，并将光标移动到该元素上。
+
+`input` 元素的其他伪类，如 `:hover` 和 `:active` 也是如此，当用户在 `label` 标签上悬停时将被触发。
+
+```html
+<label for="name">Name: </label>
+<input id="name" />
+```
+
+```css
+#name:hover {
+  background: yellow;
+}
+```
+
+在上面的例子中，当你将鼠标悬停在 `label` 标签上时，输入框将显示为黄色。
+
+`label` 标签还可以通过包含在 `input` 元素内来触发相关 `input` 的状态。这样，当用户点击 `label` 标签时，会触发相关联的 `input` 元素的焦点。
+
+```html
+<label for="foo">
+  Name:
+  <input id="foo" />
+</label>
+```
+
+另外，`label` 标签还可以通过点击 `label` 标签来更改相关联的 `input` 的状态。如对于复选框和单选按钮，点击 `label` 标签可以切换选中/未选中状态。这样做可以方便用户的操作，提高表单的可用性。
+
+> **注意**：当你单击一个与 `label` 标签相关的表单元素时，表单元素上的 `click` 事件将会被触发。
diff --git "a/HTML/script \346\240\207\347\255\276\344\270\212\347\232\204 defer \345\222\214 async \345\261\236\346\200\247\346\230\257\344\273\200\344\271\210\357\274\237.md" "b/HTML/script \346\240\207\347\255\276\344\270\212\347\232\204 defer \345\222\214 async \345\261\236\346\200\247\346\230\257\344\273\200\344\271\210\357\274\237.md"
new file mode 100644
index 0000000..870bc1e
--- /dev/null
+++ "b/HTML/script \346\240\207\347\255\276\344\270\212\347\232\204 defer \345\222\214 async \345\261\236\346\200\247\346\230\257\344\273\200\344\271\210\357\274\237.md"	
@@ -0,0 +1,103 @@
+# script 标签上的 defer 和 async 属性是什么？
+
+我们经常使用 `script` 标签向页面插入一个常规的 JavaScript 文件：
+
+```html
+<script src="/path/to/script.js"></script>
+```
+
+当浏览器看到普通脚本标签声明时，它将执行以下步骤：
+
+- 暂停 HTML 文档解析器
+- 创建新请求以下载脚本
+- 在脚本完全下载后立即执行脚本
+- 执行结束后，继续解析 HTML 文档
+
+![解析过程](https://upload-images.jianshu.io/upload_images/18281896-f73699ab4fde8302.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+此流程提供了糟糕的用户体验，假如脚本下载时间过长，用户将无法与页面交互。在看到整个页面被解析之前，他们必须等待所有脚本被下载并完全执行。
+
+为了解决这个问题，HTML5 为 `script` 标签提供了两个属性。它们是 `async` 和 `defer`：
+
+```html
+<script src="/path/to/script.js" async></script>
+<script src="/path/to/script.js" defer></script>
+```
+
+**`async` 和 `defer` 的作用是**让浏览器知道脚本可以与文档解析器过程并行下载，从而不阻塞页面的渲染。
+
+但是，它们之间也存在一些本质的区别。
+
+## 区别
+
+`async` 和 `defer` 脚本在不同的时刻执行。
+
+下载 `async` 脚本后，浏览器将暂停文档解析器，执行脚本并继续解析文档。
+
+- 解析文档
+- 下载脚本
+- 暂停解析
+- 执行脚本
+- 恢复解析
+
+另一方面，只有当解析器完成其工作时，才会执行 `defer` 脚本。
+
+- 解析文档
+- 下载脚本
+- 执行脚本
+
+> **注意**：这个过程文档是不会停止解析的。
+
+`async` 脚本在完全下载后立即执行，加载和渲染后续文档元素的过程将和 JS 脚本的加载与执行并行进行（异步），因此它们的执行顺序可能与页面中显示的顺序不同（这个时候操作 DOM 可能会获取不到）。
+
+另一方面，`defer` 脚本**保证执行顺序**。它是等到页面渲染完毕，所有脚本下载完成，在 `DOMContentLoaded` 事件前按照脚本的在文档中的顺序执行。
+
+```html
+<script src="longTime.js"></script>
+<script src="longTime.js" defer></script>
+<script src="longTime.js" async></script>
+```
+
+> **注意**：没有 `src` 属性的脚本（即不是内联脚本），`async` 和 `defer` 属性会被忽略。
+
+## 尽可能使用 `async` 和 `defer`
+
+确保 JavaScript 脚本兼容 `async` 和 `defer`，任何时候都要尽可能使用 `async`，特别是当你有较多的 `script` 标签时。
+
+这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 `script` 标签后就不会重绘任何东西。
+
+> [消除渲染阻塞资源](https://web.dev/render-blocking-resources/)
+
+## 一些好的做法
+
+对不依赖于其他脚本的脚本使用 `async`。统计脚本（例如：[百度统计](https://tongji.baidu.com/)或 [Google Analytic](https://analytics.google.com/)）将适合此用例。
+
+通常，将脚本放在 `</body>` 之前。
+
+```html
+<body>
+  <!-- ... -->
+  <script src="/path/to/script.js"></script>
+  <script src="/path/to/script.js"></script>
+  <script src="/path/to/script.js"></script>
+</body>
+```
+
+默认情况下，注入页面动态的脚本是异步的。但是，如果需要，可以将 `async` 属性设置为 `false`。
+
+```js
+const script = document.createElement('script')
+script.src = '/path/to/script.js'
+script.async = false
+document.head.appendChild(script)
+```
+
+## 总结
+
+- 关于 `defer`，我们还要记住的是它是按照加载顺序执行脚本的
+- 标记为 `async` 的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
+- `async` 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。
+
+## 更多资料
+
+[脚本：async，defer](https://zh.javascript.info/script-async-defer)
diff --git "a/HTML/\344\270\215\350\246\201\344\275\277\347\224\250 submit \346\235\245\345\221\275\345\220\215\346\217\220\344\272\244\346\214\211\351\222\256.md" "b/HTML/\344\270\215\350\246\201\344\275\277\347\224\250 submit \346\235\245\345\221\275\345\220\215\346\217\220\344\272\244\346\214\211\351\222\256.md"
new file mode 100644
index 0000000..a961945
--- /dev/null
+++ "b/HTML/\344\270\215\350\246\201\344\275\277\347\224\250 submit \346\235\245\345\221\275\345\220\215\346\217\220\344\272\244\346\214\211\351\222\256.md"	
@@ -0,0 +1,16 @@
+# 不要使用 submit 来命名提交按钮
+
+给定表单元素，我们通常在验证表单字段后调用 `submit()` 方法来提交表单。
+
+如果表单的提交按钮具有 `name="submit"` 或 `id="submit"` 属性，则 `formEle.submit` 将返回提交按钮实例。因此，`formEle.submit()` 抛出异常，因为它不再是实际函数。
+
+在使用特殊的表单属性（如 `reset`、`length`、`method`）时，我们可能会遇到类似的问题。
+
+```html
+<!-- 不要这样做 -->
+<button type="submit" name="submit">Submit</button>
+<button type="submit" id="submit">Submit</button>
+
+<!-- 这样做 -->
+<button type="submit" name="submitButton">Submit</button>
+```
diff --git "a/HTML/\344\275\277 abbr \345\205\203\347\264\240\351\200\202\347\224\250\344\272\216\350\247\246\346\221\270\345\261\217\343\200\201\351\224\256\347\233\230\345\222\214\351\274\240\346\240\207.md" "b/HTML/\344\275\277 abbr \345\205\203\347\264\240\351\200\202\347\224\250\344\272\216\350\247\246\346\221\270\345\261\217\343\200\201\351\224\256\347\233\230\345\222\214\351\274\240\346\240\207.md"
new file mode 100644
index 0000000..e50b31c
--- /dev/null
+++ "b/HTML/\344\275\277 abbr \345\205\203\347\264\240\351\200\202\347\224\250\344\272\216\350\247\246\346\221\270\345\261\217\343\200\201\351\224\256\347\233\230\345\222\214\351\274\240\346\240\207.md"	
@@ -0,0 +1,109 @@
+# 使 abbr 元素适用于触摸屏、键盘和鼠标
+
+`abbr`（abbreviation）元素用于表示和定义首字母缩略词，可以通过 `title` 属性为其定义完整的描述。
+
+```html
+<abbr title="我是超人">I am Superman</abbr>
+```
+
+如果用户将鼠标悬停在缩写词上，则完整定义将显示在本机浏览器工具提示中。
+
+![abbr 提示](https://upload-images.jianshu.io/upload_images/18281896-425c0d50a7114037.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> **注意**：`<abbr>` 元素不同浏览器的默认样式有些不同。在 Chrome 和 Firefox 中，它将带有下划线，并且在悬停时将带有 `title` 传递的值的工具提示。如果你在 Safari 上打开此页面，则不会出现下划线。此外，仅当你具有 `title` 属性时才显示下划线。
+
+定义术语时，你还可以与 `<dfn>` 混合使用：
+
+```html
+<dfn> <abbr title="Today I learned">TIL</abbr> something awesome! </dfn>
+```
+
+## `abbr` 元素的问题
+
+只要用户与定点设备交互，`<abbr>` 元素就可以在桌面设备上正常工作。但是，对于通过键盘或触摸屏设备与页面交互的用户来说，它失败了。这是因为两件事：
+
+- `<abbr>` 元素无法聚焦，例如，键盘用户按下 `tab` 键。
+- 移动浏览器不会在用户的任何交互上显示 **Tooltip**。
+
+而且还存在着一个问题是，原本的 **Tooltip** 会在大约 2 秒的时间才会出现，这与 Web 上的大多数其他交互相比非常慢。
+
+## 修复 `abbr` 元素
+
+可以通过修改 HTML 和添加一些自定义样式来修复这些问题，从而以更有效的方式重新实现本机浏览器工具提示。
+
+### 启用焦点
+
+我们需要做的第一件事是让 `<abbr>` 元素成为焦点，让键盘用户能够与之交互。通过向元素添加 `tabindex` 属性来实现这一点，指示在顺序键盘导航中是可聚焦的，然后在聚焦时触发我们的非缩写内容。
+
+```html
+<abbr title="我是超人" tabindex="0">I am Superman</abbr>
+```
+
+`tabindex` 值为 `0` 时，元素将按默认的焦点顺序放置，该顺序由元素在 HTML 文档中的位置决定。
+
+### 显示 `title` 元素
+
+接下来，我们需要一种向用户显示 `title` 元素内容的方法。这可以通过使用 `attr()` 函数来实现，该函数允许我们检索并使用任何元素属性的内容作为 CSS 值。
+
+例如，我们可以获取 `<abbr>` 的标题，并在 `::after` 伪元素中的元素之后立即显示它。
+
+```css
+abbr[title]::after {
+  content: attr(title);
+}
+```
+
+## 在鼠标悬停、键盘焦点或手指点击时显示自定义工具提示
+
+尽管我们可以把它放在显示 `<abbr>` 元素的 `title` 之后，但我们的目标是重新创建一个 **Tooltip**。因此，我们可以先等待所需的用户交互，而不是在默认情况下简单地显示 `title`。
+
+为了在我们想要的三种场景（鼠标悬停、键盘焦点或手指点击）中显示自定义工具提示，我们需要将伪元素的显示与 `:hover` 和 `:focus` 伪类结合起来。
+
+```css
+abbr[title]:hover::after,
+abbr[title]:focus::after {
+  content: attr(title);
+}
+```
+
+`:focus` 伪类负责用户通过键盘将元素置于焦点。通过我们添加的 `tabindex` 属性，用户现在可以这样做了。
+
+### 设置工具提示的样式
+
+由于跨浏览器的差异，我们建议为 `<abbr>` 代码加上自定义样式。这样，你将在浏览器之间拥有一致的外观，且使其显示为 **Tooltip**，而不仅仅是元素旁边的文本。
+
+```css
+abbr[title] {
+  position: relative;
+  /* 确保跨浏览器的样式一致 */
+  text-decoration: underline dotted;
+}
+
+abbr[title]:hover::after,
+abbr[title]:focus::after {
+  content: attr(title);
+  position: absolute;
+  left: 0;
+  bottom: -30px;
+  width: auto;
+  white-space: nowrap;
+  background-color: #1e1e1e;
+  color: #fff;
+  border-radius: 3px;
+  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
+  font-size: 14px;
+  padding: 3px 5px;
+}
+```
+
+最终效果如下：
+
+![更改后的样式](https://upload-images.jianshu.io/upload_images/18281896-a80548e76d99737f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> 👉 [查看效果](https://codepen.io/lio-zero/pen/NWBvYKJ)
+
+## 最后
+
+对比原来的效果，明显更加好看了一些，如果你想要更加好看的工具提示，可以继续更改其外观，或者使用现有的一些提示工具，如 Bootstrap 的 [Tooltips](https://getbootstrap.com/docs/4.5/components/tooltips/) 组件。
+
+> **更新**：在需要确保访问性的情况下，应该使用 `label` 元素来描述缩写词，而不是使用 `abbr` 元素。
diff --git "a/HTML/\344\275\277\347\224\250 HTML5 download \345\261\236\346\200\247\345\210\233\345\273\272\345\217\257\344\270\213\350\275\275\347\232\204\351\223\276\346\216\245.md" "b/HTML/\344\275\277\347\224\250 HTML5 download \345\261\236\346\200\247\345\210\233\345\273\272\345\217\257\344\270\213\350\275\275\347\232\204\351\223\276\346\216\245.md"
new file mode 100644
index 0000000..48ccdd6
--- /dev/null
+++ "b/HTML/\344\275\277\347\224\250 HTML5 download \345\261\236\346\200\247\345\210\233\345\273\272\345\217\257\344\270\213\350\275\275\347\232\204\351\223\276\346\216\245.md"	
@@ -0,0 +1,23 @@
+# 使用 HTML5 download 属性创建可下载的链接
+
+HTML5 引入了许多我们日常开发经常用到的一些方便的特性。其中之一便是在 `<a>` 标签上的 `download` 属性。
+
+默认情况下，锚定标签 `<a>` 的默认值是导航链接，它将转到你在 `href` 属性中指定的链接。
+
+当你添加 `download` 属性时，它表示浏览器应下载锚定指向的资源，而不是导航到该资源。并且你可以向 `download` 属性传递一个字符串值作为可下载文件的名称：
+
+```html
+<a href="/logo.png" download>download logo</a>
+<!-- 下载的文件名为 logo -->
+<a href="/logo.png" download="My Logo.png">download logo</a>
+```
+
+> **注意**：IE 11 不支持 `download` 属性。虽然不支持，但也有其专门的 [`polyfill`](https://www.npmjs.com/package/dwnld-attr-polyfill) 来支持在这些不支持的环境中运行该属性。
+
+## 下载限制
+
+值得注意的是，只有当文件与当前网站属于同一个域时，`download` 属性才起作用。如果 `href` 属性与站点的来源不同，则该属性无效。
+
+这是因为资源的请求受浏览器的同源策略所限制，详细内容可以阅读[浏览器同源策略](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.md)。
+
+> 更多：[MDN 给出 `download` 的注意事项](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)
diff --git "a/HTML/\344\275\277\347\224\250 loading \345\261\236\346\200\247\345\273\266\350\277\237\345\212\240\350\275\275\345\233\276\347\211\207.md" "b/HTML/\344\275\277\347\224\250 loading \345\261\236\346\200\247\345\273\266\350\277\237\345\212\240\350\275\275\345\233\276\347\211\207.md"
new file mode 100644
index 0000000..8ef5153
--- /dev/null
+++ "b/HTML/\344\275\277\347\224\250 loading \345\261\236\346\200\247\345\273\266\350\277\237\345\212\240\350\275\275\345\233\276\347\211\207.md"	
@@ -0,0 +1,43 @@
+# 使用 loading 属性延迟加载图片
+
+我们经常需要对网站中的图像进行优化，其中一项技术便是懒加载，通常是延迟加载初始视口外的图像，直到我们滚动页面，达到图像与底部视口的交汇处才开始加载图像。
+
+通常情况下，我们都是使用 JS 编写方法（例如 [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) ）或外部库延迟加载图像。而 HTML 标准中已经存在 `loading` 属性，可以精确的感知这种行为。
+
+`loading` 总共有三个值来控制图片的加载：
+
+- `eager` — 立即加载图片
+- `lazy` — 延迟加载图片，只在需要时加载
+- `auto` — 浏览器自行决定是否延迟加载图片
+
+以下是 [Can I Use](https://caniuse.com/?search=loading) 给出其的兼容情况：
+
+![loading 支持情况](https://upload-images.jianshu.io/upload_images/18281896-92dbbb81ce60d7bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，大部分现代浏览器基本上都实现了对 `loading` 属性的支持。
+
+其用法很简单，我们只需要在想到延迟加载的图像上添加 `loading="lazy"` 属性即可：
+
+```html
+<img src="/img/logo.png" alt="website logo" loading="lazy" />
+```
+
+浏览器现在将延迟加载图像，直到它们在视口中可见。
+
+当图像完全加载时，通常会看到布局发生移动。为避免此问题，建议使用内联样式或属性设置图像的大小：
+
+```html
+<img
+  src="/img/logo.png"
+  alt="website logo"
+  loading="lazy"
+  height="200"
+  width="300"
+/>
+```
+
+你可以自行设置 `loading` 属性的值查看效果。
+
+> [演示地址](https://codepen.io/lio-zero/pen/oNeQKXq)
+>
+> **Tips**：你可以打开控制台的 **Network** 选项卡边滚动边查看效果，**注意浏览器版本**。
diff --git "a/HTML/\344\275\277\347\224\250 mark \345\205\203\347\264\240\347\252\201\345\207\272\346\230\276\347\244\272\346\226\207\346\234\254.md" "b/HTML/\344\275\277\347\224\250 mark \345\205\203\347\264\240\347\252\201\345\207\272\346\230\276\347\244\272\346\226\207\346\234\254.md"
new file mode 100644
index 0000000..f6d0927
--- /dev/null
+++ "b/HTML/\344\275\277\347\224\250 mark \345\205\203\347\264\240\347\252\201\345\207\272\346\230\276\347\244\272\346\226\207\346\234\254.md"	
@@ -0,0 +1,21 @@
+# 使用 mark 元素突出显示文本
+
+HTML5 中的语义化 `<mark>` 元素可用于突出显示文本。它可以将文本的背景颜色设置为黄色，表示该文本为重点。
+
+突出显示搜索结果中的关键字是使用 `<mark>` 元素的一个流行示例。
+
+```html
+Smooth <mark>scrolling</mark> with pure CSS
+```
+
+这样，文本 **scrolling** 会被突出显示出来。
+
+默认情况下，`mark` 元素会使用浏览器默认的黄色背景颜色，但是你可以使用 CSS 更改你想要的效果。
+
+```css
+mark {
+  background: plum;
+  color: white;
+  font-size: 1.2em;
+}
+```
diff --git "a/HTML/\344\275\277\347\224\250 pattern \345\261\236\346\200\247\351\252\214\350\257\201\350\276\223\345\205\245\345\200\274.md" "b/HTML/\344\275\277\347\224\250 pattern \345\261\236\346\200\247\351\252\214\350\257\201\350\276\223\345\205\245\345\200\274.md"
new file mode 100644
index 0000000..f357696
--- /dev/null
+++ "b/HTML/\344\275\277\347\224\250 pattern \345\261\236\346\200\247\351\252\214\350\257\201\350\276\223\345\205\245\345\200\274.md"	
@@ -0,0 +1,26 @@
+# 使用 pattern 属性验证输入值
+
+在处理输入字段时，根据特定规则验证用户输入是一件常见的事情。在不使用外部验证库的情况下，我们可以使用一些内置的 HTML5 `input` 类型来严格控制值。
+
+具体来说，以下 `input` 类型强制用户输入有效字符：
+
+| input 类型      | 描述                     |
+| --------------- | ------------------------ |
+| `type="color"`  | 只接受颜色               |
+| `type="date"`   | 只接受日期               |
+| `type="email"`  | 只接受有效的电子邮件地址 |
+| `type="number"` | 只接受数字               |
+| `type="tel"`    | 只接受电话号码           |
+| `type="url"`    | 只接受 URL               |
+
+尽管这些 `input` 类型很有用，但它们不能满足输入必须匹配给定正则表达式的情况。
+
+例如，我们如何在使用 `type="tel"` 属性时强制用户输入电话号码的 11 位数字。这就是 `pattern` 属性的用武之地。
+
+下面的示例代码解决了前面提到的问题：
+
+```html
+<input type="tel" pattern="^\d{11}$" title="请输入11位数字" />
+```
+
+建议使用 `title` 属性，以便用户知道正确的值是什么。
diff --git "a/HTML/\344\275\277\347\224\250 srcset \347\232\204\345\223\215\345\272\224\345\274\217\345\233\276\345\203\217.md" "b/HTML/\344\275\277\347\224\250 srcset \347\232\204\345\223\215\345\272\224\345\274\217\345\233\276\345\203\217.md"
new file mode 100644
index 0000000..e5eb1fe
--- /dev/null
+++ "b/HTML/\344\275\277\347\224\250 srcset \347\232\204\345\223\215\345\272\224\345\274\217\345\233\276\345\203\217.md"	
@@ -0,0 +1,60 @@
+# 使用 srcset 的响应式图像
+
+`img` 标签的 [`srcset` 属性](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/srcset)允许你根据你的喜好设置浏览器可以使用的响应图像，具体取决于像素密度或窗口宽度。通过这种方式，它只能下载渲染页面所需的资源，而不需要下载更大的图片（如果它是在移动设备上）。
+
+下面是一个例子，我们为 4 种不同的屏幕尺寸提供了 4 个额外的图像:
+
+```html
+<img
+  src="avatar.png"
+  alt="一张头像"
+  srcset="
+    avatar-500.png 500w,
+    avatar-800.png 800w,
+    avatar-1000.png 1000w,
+    avatar-1400.png 1400w
+  "
+/>
+```
+
+在 `srcset` 中，我们使用 `w` 度量值来指示图像的宽度。
+
+我们还需要使用 [`sizes` 属性](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)，它允许你为每个媒体条件列表指定图像的布局宽度：
+
+```html
+<img
+  src="avatar.png"
+  alt="一张头像"
+  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
+  srcset="
+    avatar-500.png 500w,
+    avatar-800.png 800w,
+    avatar-1000.png 1000w,
+    avatar-1400.png 1400w
+  "
+/>
+```
+
+在本例中，`sizes` 属性中的 `(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px` 字符串描述了图像相对于视口的大小，多个条件用逗号分隔。
+
+媒体条件 `max-width: 500px` 设置与视口宽度相关的图像大小。简而言之，如果窗口大小为 `< 500px`，它将以 100% 的窗口大小渲染图像。
+
+如果窗口大小较大但 `< 900px`，它将以窗口大小的 50% 渲染图像。
+
+如果再大一些，它会渲染 `800px` 的图像。
+
+`vw` 的测量单位表示，`1vw` 是窗口宽度的 `1%`，所以 `100vw` 是窗口宽度的 `100%`。
+
+## 更多资料
+
+- [CSS 单位及其需要注意的地方](https://github.com/lio-zero/blog/blob/main/CSS/CSS%20%E5%8D%95%E4%BD%8D%E5%8F%8A%E5%85%B6%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9.md)
+- [Responsive Image Breakpoints Generator](https://responsivebreakpoints.com/) 网站可以用来生成 `srcset` 和逐渐变小的图片。
+- [响应式图像教程](http://www.ruanyifeng.com/blog/2019/06/responsive-images.html)
+- [Responsive Images: If you’re just changing resolutions, use srcset.](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)
+- [Responsive Images Done Right: A Guide To `<picture>` And srcset](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/)
+- [Responsive Image Breakpoints Generator, A New Open Source Tool](https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/)
+- [Leaner Responsive Images With Client Hints](https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/)
+- [How To Solve Adaptive Images In Responsive Web Design](https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/)
+- [Picturefill 2.0: Responsive Images And The Perfect Polyfill](https://www.smashingmagazine.com/2014/05/picturefill-2-0-responsive-images-and-the-perfect-polyfill/)
+- [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/)
+- [Picturefill](https://scottjehl.github.io/picturefill/)
diff --git "a/HTML/\345\210\233\345\273\272\347\274\226\345\217\267\351\241\271\347\233\256\347\232\204\351\231\215\345\272\217\345\210\227\350\241\250.md" "b/HTML/\345\210\233\345\273\272\347\274\226\345\217\267\351\241\271\347\233\256\347\232\204\351\231\215\345\272\217\345\210\227\350\241\250.md"
new file mode 100644
index 0000000..616d544
--- /dev/null
+++ "b/HTML/\345\210\233\345\273\272\347\274\226\345\217\267\351\241\271\347\233\256\347\232\204\351\231\215\345\272\217\345\210\227\350\241\250.md"
@@ -0,0 +1,21 @@
+# 创建编号项目的降序列表
+
+默认情况下，有序列表元素（`ol` 标签）将按升序显示每个项目的编号。第一项显示为数字 1。第二项是数字 2，以此类推。
+
+有些情况下，我们希望颠倒数字的顺序，但保留实际项目。如前 5 部电影、前 10 首歌曲等是该用例的最佳示例。
+
+为此，我们只需添加 `reversed` 属性：
+
+```html
+<ol reversed start="5">
+  <li>Item 5</li>
+  <li>Item 4</li>
+  <li>Item 3</li>
+  <li>Item 2</li>
+  <li>Item 1</li>
+</ol>
+```
+
+这样将显示降序列表，第一项为 5，第二项为 4，以此类推。
+
+你可以使用 `start` 属性来指示开始编号。
diff --git "a/HTML/\345\234\250 Google \345\255\227\344\275\223\350\257\267\346\261\202\344\270\255\345\212\240\350\275\275\347\273\231\345\256\232\345\255\227\347\254\246.md" "b/HTML/\345\234\250 Google \345\255\227\344\275\223\350\257\267\346\261\202\344\270\255\345\212\240\350\275\275\347\273\231\345\256\232\345\255\227\347\254\246.md"
new file mode 100644
index 0000000..5c53297
--- /dev/null
+++ "b/HTML/\345\234\250 Google \345\255\227\344\275\223\350\257\267\346\261\202\344\270\255\345\212\240\350\275\275\347\273\231\345\256\232\345\255\227\347\254\246.md"	
@@ -0,0 +1,22 @@
+# 在 Google 字体请求中加载特定字符
+
+默认情况下，[Google Fonts](https://fonts.google.com/) 加载包含其支持的完整字符集的完整字体。
+
+我们可以要求谷歌下载包含所需字符的部分字体，而不是下载整个字体。
+
+我们可以将字符传递给 `text` 参数：
+
+```html
+<link
+  href="https://fonts.googleapis.com/css2?family=Sacramento&text=MyHeading"
+  rel="stylesheet"
+/>
+```
+
+如果希望使用 Unicode 字符，那么使用其 UTF-8 表示形式对其进行编码。例如，`tips & tricks` 表示为 `tips+%26+tricks`。
+
+减小字体文件的大小可以缩短加载时间，尤其是在网络速度通常有限的设备上。
+
+## 更多资料
+
+[结合 Google 字体请求](https://github.com/lio-zero/blog/blob/main/HTML/%E7%BB%93%E5%90%88%20Google%20%E5%AD%97%E4%BD%93%E8%AF%B7%E6%B1%82.md)
diff --git "a/HTML/\345\234\250 HTML \344\270\255\344\275\277\347\224\250 ARIA \347\232\204\350\247\204\345\210\231.md" "b/HTML/\345\234\250 HTML \344\270\255\344\275\277\347\224\250 ARIA \347\232\204\350\247\204\345\210\231.md"
new file mode 100644
index 0000000..b17923c
--- /dev/null
+++ "b/HTML/\345\234\250 HTML \344\270\255\344\275\277\347\224\250 ARIA \347\232\204\350\247\204\345\210\231.md"	
@@ -0,0 +1,181 @@
+# 在 HTML 中使用 ARIA 的规则
+
+## 什么是 ARIA？
+
+> [ARIA](https://www.w3.org/WAI/intro/aria)（Accessible Rich Internet Applications）是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由 JavaScript 开发的）的一套机制。最值得注意的是，它包含了一组属性，我们可以添加到 HTML 元素中，将更多的语义信息嵌入其中，这些信息可以被辅助技术读取。
+
+- ARIA 可以通过 HTML 属性为屏幕阅读器提供额外的信息。其不影响元素如何被渲染在浏览器中。
+- ARIA `role` 没有为大多数元素的默认语义添加任何内容。
+- 你可以通过遵循 ARIA 标准（例如：HTML 语义，使用 `alt` 属性并以预期的方式使用 `[role = button]`）来使你的网站更易于访问。
+
+一个例子：
+
+```html
+<style>
+  [role='note'] {
+    padding: 10px;
+    border: 1px solid;
+    border-left: 5px solid rebeccapurple;
+    color: rebeccapurple;
+    border-radius: 5px;
+  }
+</style>
+<section>
+  <div role="note">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
+    totam.
+  </div>
+</section>
+```
+
+它将向用户代理暗示，这是一个 `note`，用来记录一些你需要留意的事情。
+
+尽管 ARIA 非常有用，但我们必须注意何时以及如何使用它。
+
+## 使用 HTML5 语义以支持 ARIA
+
+> 你应该使用已经内置了所需语义和行为的原生 HTML 元素或属性，而不是重新使用 HTML 元素并添加 ARIA `role`、状态或属性使其可访问。
+
+在 HTML 中使用 ARIA 的首要规则是尽量不要在标准的 HTML 标签和属性中使用 ARIA（如果不需要的话）。HTML5 语义元素为我们提供了一系列具有隐式含义的元素，类似于我们可以使用 ARIA 定义的显式含义，常被称为元素的[默认隐式 ARIA 语义](https://www.w3.org/TR/wai-aria-1.1/%23implicit_semantics)。
+
+因此，只要有可能，我们就应该使用 HTML 语义元素来代替 ARIA 属性。
+
+例如下面这个例子：
+
+```html
+<div role="button">Click Me</div>
+```
+
+上面的写法是错误的，你不应该使用 `<div>` 和 ARIA `role` 来创建一个按钮。
+
+我们应该只使用一个明确其语义的 `<button>` 元素，就像这样：
+
+```html
+<button>Click Me</button>
+```
+
+## 不要使用 `role` 属性改变语义元素的含义
+
+> 不要改变原生语义，除非你真的必须这样做。
+
+正如我们提到的，许多 HTML 语义元素对它们都有隐含的意义。
+
+例如：
+
+- 当我们使用 `<button>` 元素时，它向用户代理暗示这是一个交互元素（通过光标单击、回车键或空格键进行交互），它将触发页面上的一些交互。
+- 如果我们使用一个 `<a>` 元素，那么对用户代理来说，与该元素交互（通过光标单击或回车键）会将用户从页面导航到另一个位置，或者导航到同一页面上的不同位置。
+
+由于这些元素中的许多元素都具有隐含的含义，因此建议不要使用 ARIA `role` 来更改它们。以下是一个例子：
+
+```html
+<h1 role="button">Heading Button</h1>
+```
+
+以上写法是错误的，我们应该使用适当的元素，而不是重新调整语义元素的用途。
+
+```html
+<h1>
+  <button>Heading Button</button>
+</h1>
+```
+
+或者，我们可以将 ARIA `role` 应用到一个没有任何含义的元素上（你觉得有必要的话），如 `<span>`。
+
+```html
+<h1><span role="button">Heading Button</span></h1>
+```
+
+就像这样，我们使用 ARIA `role` 属性来补充标准标签 `<span>` 的信息，表明 `<span>` 是充当一个按钮角色。
+
+其他一些冗余 ARIA 的示例：
+
+```html
+<button role="button">戳我</button>
+<a href="https://www.baidu.com" role="link">你敢点我吗？</a>
+<input type="checkbox" role="checkbox" />
+<input type="radio" role="radio" />
+```
+
+HTML5 使用默认的隐式语义定义了一组新的结构和分段元素，这些语义与 [ARIA `role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role) 匹配（在某些情况下）：
+
+- 使用 `role=button` 时，考虑使用 `<button>` 元素，或者其他各种原生 HTML 按钮类型。
+- 使用 `role=link` 时，考虑改用 `<a href>` 元素。
+- 使用 `role=heading` 和 `aria-level="1-6"`，考虑改用 `<h1>` 到 `<h6>` 元素。
+- 使用 `role=list` 和 `role=listitem` 时，考虑改用 `<ol>` 或 `<ul>` 和 `<li>` 元素。
+- 使用 `role=listbox` 和 `role=option`，考虑改用 `<select>` 和 `<option>` 元素。
+- 使用 `role=checkbox` 或 `role=radio` 时，考虑改用 `<input type="checkbox">` 或 `<input type="radio">` 元素。
+- 使用 `role=textbox`，可以考虑使用 `<input type="text">` 或搜索、电子邮件、URL 或电话。
+- 其他一些语义元素：`article`、`aside`、`footer`、`header`、`main`、`nav`、`section` 等等。
+
+这意味着在实现后，浏览器将公开该元素的默认隐式语义，因此你不必这样做。
+
+## 交互式 ARIA 元素必须被所有媒体访问
+
+> 所有交互式 ARIA 控件必须与键盘一起使用。
+
+在元素上使用 ARIA `role` 并不足以真正改变元素的 `role`。例如，如果我们试图将一个 `<div>` 更改为一个 `<button>`，则需要手动添加适合 `<button>` 的交互功能。
+
+在 ARIA 指南中，有一个每个元素应该具有的功能列表。例如，一个有效的按钮必须满足以下要求：必须可以用光标、回车键、空格键单击（配合 JS 可以轻松实现）。
+
+在使用 ARIA `role` 时，我们需要了解这些需求。使元素看起来像按钮并不能使它成为按钮。我们需要考虑所有媒介中的用户如何与元素交互。
+
+## 对可见的可聚焦元素使用适当的角色
+
+> 不要在可见的可聚焦元素上使用 `role="presentation"` 或 `aria-hidden="true"`。
+
+ARIA `role="presentation"` 属性意味着元素仅用于视觉目的，并且不以任何方式交互。`aria-hidden="true"` 属性表示元素不应可见。
+
+当我们使用这些属性时，我们需要知道它们所应用到的元素以及它们的可见性和交互状态。例如，这两个按钮都会导致一些用户关注他们不存在的元素。
+
+```html
+<button role="presentation">Click Me</button>
+<button aria-hidden="true">Click Me</button>
+```
+
+以上写法都是不正确，这些属性只能应用于非交互或不可见的元素。
+
+```html
+<button role="presentation" tabindex="-1">Don't Click Me</button>
+<button aria-hidden="true" style="display: none;">Don't Click Me</button>
+```
+
+## 交互元素必须具有可访问的名称
+
+> 所有交互元素必须具有可访问的名称。
+
+可以与之交互的元素，例如按钮和链接，需要有一个**可访问的名称（Accessible Name）**。可访问名称是在可访问性 API 属性具有有效值时确定的。
+
+可以根据元素的类型指定元素的可访问名称。例如，表单 `<input>` 元素通常从相应的 `<label>` 元素获取其可访问的名称。
+
+```html
+<label>
+  Username
+  <input type="text" />
+</label>
+
+<label for="password">Password</label>
+<input type="password" id="password" />
+```
+
+其他元素，例如按钮和链接，可以从它们的文本内容或标签属性中获得它们的可访问名称。
+
+## 总结
+
+在 HTML 中使用 ARIA 的规则如下：
+
+- 注意 ARIA 并不能替代原本标准 HTML 本身的可访问性，只是为了解决一些 HTML 本身无法解决的问题，所以在使用 ARIA 时需要注意基础的 HTML 可访问性。
+- 在有标准标签和属性的情况下，应该使用标准标签和属性。否则，使用 ARIA 的属性来补充标准标签和属性的信息（没有任何语义的情况下），如说明组件的角色和状态。
+- 交互式 ARIA 元素必须被所有媒体访问。对一个没有语义的标准标签定义 ARIA `role` 远远不够，还需要为元素添加相应的交互功能。
+- 使用正确的 ARIA 角色和属性。每个 ARIA 角色和属性都有自己的用途和意义，应该使用正确的角色和属性来描述组件。
+- 确保 ARIA 属性的值合法。每个 ARIA 属性都有自己的值域，应该使用合法的值来设置 ARIA 属性。
+- 一些 ARIA 属性的使用需要满足一些前提条件，例如使用 `aria-labelledby` 属性前需要先使用 `id` 属性，所以在使用 ARIA 时需要先确定基本的 HTML 结构.
+- 测试网页的可访问性。使用工具来测试网页的可访问性，确保网页能够被尽可能多的用户访问和使用。如 [axe](https://www.deque.com/axe/) 和 [WAVE](https://wave.webaim.org/) 等。
+
+我在 [Web 应用中的可访问性](https://github.com/lio-zero/blog/blob/main/HTML/Web%20%E5%BA%94%E7%94%A8%E4%B8%AD%E7%9A%84%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7.md)部分 ARIA 属性的用法，感兴趣的可以了解一下。
+
+## 更多资源
+
+- [MDN：ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) —— MDN 上丰富的 ARIA 资料
+- [在 HTML 和 ARIA 大括号上（默认的隐式 ARIA 语义，他们不想让你知道）](http://html5doctor.com/on-html-belts-and-aria-braces/)
+- [HTML5 – W3C 建议书 2014 年 10 月 28 日](https://www.w3.org/TR/html5/)
+- [在 HTML 中使用 ARIA 的注意事项](http://w3c.github.io/aria-in-html/)
diff --git "a/HTML/\345\234\250\346\226\260\346\240\207\347\255\276\351\241\265\344\270\255\346\211\223\345\274\200\346\211\200\346\234\211\351\223\276\346\216\245.md" "b/HTML/\345\234\250\346\226\260\346\240\207\347\255\276\351\241\265\344\270\255\346\211\223\345\274\200\346\211\200\346\234\211\351\223\276\346\216\245.md"
new file mode 100644
index 0000000..9f34b15
--- /dev/null
+++ "b/HTML/\345\234\250\346\226\260\346\240\207\347\255\276\351\241\265\344\270\255\346\211\223\345\274\200\346\211\200\346\234\211\351\223\276\346\216\245.md"
@@ -0,0 +1,43 @@
+# 在新标签页中打开所有链接
+
+我们都知道，将 `target="_blank"` 属性设置为单个链接将在新选项卡中打开它。
+
+在一个真实的用例中，你希望在一个新选项卡中打开页面上的所有链接，这是很少见的。一个只收集外部资源链接的网站可能就是一个例子。
+
+在这种情况下，你只需将其设置为 `base` 标签，而不是将属性添加到所有链接：
+
+```html
+<head>
+  <base target="_blank" />
+  ...
+</head>
+<body>
+  <a href="https://www.baidu.com">百度一下，你就知道</a>
+</body>
+```
+
+**注意**，就像我们说的那样，链接会在新窗口中打开，即使链接中没有 `target="_blank"` 属性。这是因为 `base` 元素的 `target` 属性已经被设置为 `_blank` 了。
+
+你还可以为所有 `a` 标签上 `href` 属性为空的链接添加一个 URL 指向：
+
+```js
+<head>
+  <base href="https://www.baidu.com" />
+  <base target="_blank" />
+  ...
+</head>
+<body>
+  <a href="https://www.baidu.com">百度一下，你就知道</a>
+</body>
+```
+
+当然，你也可以使用 JavaScript 来设置所有链接的 `target` 属性为 `_blank`。例如：
+
+```js
+const links = document.getElementsByTagName('a');
+for (let i = 0; i < links.length; i++) {
+  links[i].target = '_blank'
+}
+```
+
+但显然，如果需要使网站的所有链接都在新标签页中打开，`base` 标签是最方便的选择。
diff --git "a/HTML/\345\234\250\346\232\227\346\250\241\345\274\217\344\270\213\346\233\264\346\224\271 HTML \345\233\276\347\211\207 URL.md" "b/HTML/\345\234\250\346\232\227\346\250\241\345\274\217\344\270\213\346\233\264\346\224\271 HTML \345\233\276\347\211\207 URL.md"
new file mode 100644
index 0000000..be2f790
--- /dev/null
+++ "b/HTML/\345\234\250\346\232\227\346\250\241\345\274\217\344\270\213\346\233\264\346\224\271 HTML \345\233\276\347\211\207 URL.md"	
@@ -0,0 +1,22 @@
+# 在暗模式下更改 HTML 图片 URL
+
+如果系统处于暗模式，使用 CSS 很容易应用更改，使用 `prefers-color-scheme` 媒体功能。
+
+但如何更改 HTML 中定义的图像，而不是 CSS 规则？
+
+事实证明，有一种简单的 HTML 方法可以做到这一点，而无需涉及任何 CSS 或 JavaScript。
+
+我们可以使用 `picture` 标签来包装 `img` 标签：
+
+```html
+<picture>
+  <source srcset="dark.png" media="(prefers-color-scheme: dark)" />
+  <img src="light.png" />
+</picture>
+```
+
+如果支持并启用暗模式，则 `dark.png` 图像将用作 `img` 标签的源。
+
+该标签得到很好的支持，而不支持它或不支持暗模式的旧浏览器将退回到显示 `light.png` 图像。
+
+需要注意的是，在任何情况下，浏览器都不会下载 2 张图片：如果是暗模式，在这个例子中，它只会下载 `dark.png` 图像，如果是亮模式，它只会下载 `light.png`，因此不会浪费带宽。
diff --git "a/HTML/\345\234\250\346\232\227\346\250\241\345\274\217\344\270\213\346\233\264\346\224\271\347\275\221\347\253\231\345\233\276\346\240\207.md" "b/HTML/\345\234\250\346\232\227\346\250\241\345\274\217\344\270\213\346\233\264\346\224\271\347\275\221\347\253\231\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..27c8e4c
--- /dev/null
+++ "b/HTML/\345\234\250\346\232\227\346\250\241\345\274\217\344\270\213\346\233\264\346\224\271\347\275\221\347\253\231\345\233\276\346\240\207.md"
@@ -0,0 +1,43 @@
+# 在暗模式下更改网站图标
+
+将一个白色的图像作为图标，在亮模式下，它几乎是看不见的！
+
+事实证明，对于 PNG/JPG 位图图像，目前还没有这样做的方法，但我们可以使用 SVG 矢量图像技巧来实现这一点。
+
+我们可以在 SVG 图像中嵌入 CSS。
+
+如果图像足够简单，我们可以识别颜色并在暗模式下更改它，那么我们可以为这两种模式使用不同的颜色。
+
+以下是一个网站图标的 SVG：
+
+```html
+<svg
+  width="37"
+  height="45"
+  viewBox="0 0 37 45"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <style>
+    path {
+      fill: #ccc;
+    }
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: #fff;
+      }
+    }
+  </style>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z"
+  />
+</svg>
+```
+
+SVG 图像非常简单，它是一个半月形。
+
+在亮模式下用 `#ccc` 填充路径颜色，在暗模式下用 `#fff` 填充路径颜色。
+
+我们将其保存为 `.svg` 文件，然后在项目中使用它。
diff --git "a/HTML/\345\234\250\351\223\276\346\216\245\344\270\255\344\275\277\347\224\250 # \347\254\246\345\217\267\346\234\211\344\273\200\344\271\210\347\224\250\357\274\237.md" "b/HTML/\345\234\250\351\223\276\346\216\245\344\270\255\344\275\277\347\224\250 # \347\254\246\345\217\267\346\234\211\344\273\200\344\271\210\347\224\250\357\274\237.md"
new file mode 100644
index 0000000..8eb48b9
--- /dev/null
+++ "b/HTML/\345\234\250\351\223\276\346\216\245\344\270\255\344\275\277\347\224\250 # \347\254\246\345\217\267\346\234\211\344\273\200\344\271\210\347\224\250\357\274\237.md"	
@@ -0,0 +1,61 @@
+# 在链接中使用 # 符号有什么用？
+
+当你在网页上工作时，你可能会看到这样的链接:
+
+```html
+<a href="#">features</a>
+```
+
+`href="#"` 是一个占位符。链接不会指向任何特定的东西。
+
+有时这意味着应用程序正在进行中，稍后我们将填充该链接 `href` 属性。
+
+其他时候你会看到：
+
+```html
+<a href="#features">features</a>
+```
+
+在这种情况下，链接引用同一页面中的一个点。
+
+你会有一个这样的元素:
+
+```html
+<a id="features">Features</a>
+```
+
+它也可以是一个空元素，它会在那里，但被隐藏：
+
+```html
+<a id="features"></a>
+```
+
+注意，这里我们使用了 `id`（它不必是 `a` 标签，可以是任何带有相同 `id` 值的标签）。
+
+单击下面链接：
+
+```html
+<a href="#features">features</a>
+```
+
+它将带我们滚动至 `id` 等于 `features` 的位置。
+
+如果链接是：
+
+```html
+<a href="/features">features</a>
+```
+
+点击这个，浏览器将打开一个单独的 URL。
+
+你也可以把它们结合起来：
+
+```html
+<a href="/features#first">features</a>
+```
+
+它将打开 `/features` URL，并滚动到 `<a>` 上带有 `id="first"` 的标签。
+
+## 更多资料
+
+在[滚动到页面顶部的多种实现](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%AE%9E%E7%8E%B0.md)文章中，我们的第一种返回顶部便使用到了这种方式。
diff --git "a/HTML/\345\243\260\346\230\216\345\274\217 Shadow DOM.md" "b/HTML/\345\243\260\346\230\216\345\274\217 Shadow DOM.md"
new file mode 100644
index 0000000..d8e61a4
--- /dev/null
+++ "b/HTML/\345\243\260\346\230\216\345\274\217 Shadow DOM.md"	
@@ -0,0 +1,39 @@
+# 声明式 Shadow DOM
+
+[Shadow DOM](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM) 在 Web 组件的世界中扮演着重要的角色，因为它们提供了一种简单的封装方式，但它是使用 JavaScript 强制创建的，具有以下特性：
+
+```js
+class FancyElement extends HTMLElement {
+  constructor() {
+    super()
+    this.ShadowRoot = this.attachShadow({ mode: 'open' })
+    this.ShadowRoot.innerHTML = 'Shadow DOM imperative'
+  }
+}
+
+customElements.get('imperative-fancy-element') ||
+  customElements.define('imperative-fancy-element', FancyElement)
+```
+
+这仅对客户端的应用程序有效，但是在服务器渲染（SSR）上表达和构建它们有很多挑战，声明式 Shadow 出现帮我们解决这个问题！
+
+声明式 Shadow DOM（DSD）帮助我们轻松地将 Shadow DOM 发送到服务器，上面的示例命令式示例如下所示：
+
+```html
+<imperative-fancy-element>
+  <h1>Imperative Shadow DOM</h1>
+</imperative-fancy-element>
+
+<fancy-element>
+  <template shadowroot="open">
+    <slot></slot>
+  </template>
+  <h2>Declarative Shadow DOM</h2>
+</fancy-element>
+```
+
+> **注意**：`chrome://flags/#enable-experimental-web-platform-features` 应在浏览器启用才能使用此功能。
+
+## 更多资料
+
+它是 Web components 的一部分，推荐阅读[无框架 Web 组件](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%97%A0%E6%A1%86%E6%9E%B6%20Web%20%E7%BB%84%E4%BB%B6.md)。
diff --git "a/HTML/\345\257\271\344\272\216\345\234\250\346\226\260\346\240\207\347\255\276\351\241\265\344\270\255\346\211\223\345\274\200\347\232\204\351\223\276\346\216\245\357\274\214\345\247\213\347\273\210\344\275\277\347\224\250 \342\200\235noopener\342\200\234 \346\210\226 \342\200\235noreferrer\342\200\234.md" "b/HTML/\345\257\271\344\272\216\345\234\250\346\226\260\346\240\207\347\255\276\351\241\265\344\270\255\346\211\223\345\274\200\347\232\204\351\223\276\346\216\245\357\274\214\345\247\213\347\273\210\344\275\277\347\224\250 \342\200\235noopener\342\200\234 \346\210\226 \342\200\235noreferrer\342\200\234.md"
new file mode 100644
index 0000000..55db7eb
--- /dev/null
+++ "b/HTML/\345\257\271\344\272\216\345\234\250\346\226\260\346\240\207\347\255\276\351\241\265\344\270\255\346\211\223\345\274\200\347\232\204\351\223\276\346\216\245\357\274\214\345\247\213\347\273\210\344\275\277\347\224\250 \342\200\235noopener\342\200\234 \346\210\226 \342\200\235noreferrer\342\200\234.md"	
@@ -0,0 +1,27 @@
+# 对于在新标签页中打开的链接，始终使用 "noopener" 或 "noreferrer"
+
+为了在新选项卡中打开链接，我们使用 `target="_blank"` 属性。然而，如果你稍不留意，它可能会导致一些问题。
+
+首先，新打开的选项卡使用与打开的选项卡相同的进程。因此，它会降低页面速度。更重要的是，新选项卡能够通过 `window.opener` 对象访问 `opener` 页面的 `window` 对象。假设新选项卡执行以下代码：
+
+```js
+window.opener.location = 'https://example.com'
+```
+
+正如代码所暗示的，它将原始选项卡重定向到一个假网站。如果假网站的用户界面与真网站相同，会发生什么？由于用户已经打开了它，他们可能没有意识到他们正在查看的网站不是真实的。
+
+添加 `rel="noopener"` 修复了这些问题。它不仅修复了 `noopener` 所做的问题，而且还阻止了 `Referer` 头被发送到新选项卡。
+
+```html
+<!-- 不要这样做 -->
+<a target="_blank">...</a>
+
+<!-- 像这样 -->
+<a target="_blank" rel="noopener">...</a>
+
+<!-- 或者 -->
+<a target="_blank" rel="noreferrer">...</a>
+<a target="_blank" rel="noopener noreferrer">...</a>
+```
+
+一些现代浏览器，如 Chrome 88+，如果缺少 `noopener` 行为，会自动添加它。但是，仍然建议手动添加 `rel="noopener"` 或 `rel="noreferrer"`，以避免旧浏览器中的安全性和性能问题。
diff --git "a/HTML/\345\257\271\344\272\216\347\211\271\345\256\232\344\272\216\350\257\255\350\250\200\347\232\204\346\240\267\345\274\217\357\274\214\345\234\250 lang \345\261\236\346\200\247\351\200\211\346\213\251\345\231\250\344\270\212\344\275\277\347\224\250 lang \344\274\252\347\261\273.md" "b/HTML/\345\257\271\344\272\216\347\211\271\345\256\232\344\272\216\350\257\255\350\250\200\347\232\204\346\240\267\345\274\217\357\274\214\345\234\250 lang \345\261\236\346\200\247\351\200\211\346\213\251\345\231\250\344\270\212\344\275\277\347\224\250 lang \344\274\252\347\261\273.md"
new file mode 100644
index 0000000..652a007
--- /dev/null
+++ "b/HTML/\345\257\271\344\272\216\347\211\271\345\256\232\344\272\216\350\257\255\350\250\200\347\232\204\346\240\267\345\274\217\357\274\214\345\234\250 lang \345\261\236\346\200\247\351\200\211\346\213\251\345\231\250\344\270\212\344\275\277\347\224\250 lang \344\274\252\347\261\273.md"	
@@ -0,0 +1,135 @@
+# 对于特定于语言的样式，在 lang 属性选择器上使用 lang 伪类
+
+HTML 文档的内容可以是多种不同的语言。
+
+为了指定文档的主要语言，我们可以在根元素上使用 `lang` 属性。
+
+```html
+<html lang="zh"></html>
+```
+
+我们还可以在页面中使用 `lang` 属性来划分与文档主语言不同语言的特定元素或部分。
+
+```html
+<html lang="zh">
+  <head></head>
+  <body>
+    <p lang="en">I am Superman</p>
+  </body>
+</html>
+```
+
+我们为页面上的 `p` 元素设置了 `lang` 属性，并设置了 `en`（英语）语言，如果我们想要给它设置样式，我们可以使用 `[lang]` 属性选择器来选择具有特定语言属性的所有元素或元素的子元素。
+
+```css
+[lang='en'] p {
+  font-size: 1.2em;
+  color: plum;
+}
+```
+
+## `[lang]` 属性选择器不知道该元素的语言
+
+使用基于 `[lang]` 属性选择器的特定于语言的样式的问题在于，选择器实际上并不知道元素的语言。它就像任何其他属性选择器一样。
+
+如果一个文档包含多个不同语言的嵌套元素，这可能会成为一个问题。
+
+让我们看下面这一节。该节具有法语 `lang` 属性，但在该节中，我们有一个西班牙语引用。
+
+```html
+<section lang="zh">
+  <p>注意：xxx</p>
+  <blockquote lang="en">
+    <p>I am Superman</p>
+  </blockquote>
+</section>
+```
+
+在我们的 CSS 中，我们可能只是简单地用一个特定的 `lang` 属性及其后代来设置所有元素的样式。
+
+```css
+[lang='en'] p {
+  padding: 10px;
+  border: 1px solid;
+  border-left: 5px solid rebeccapurple;
+  color: rebeccapurple;
+  border-radius: 5px;
+}
+
+[lang='zh'] p {
+  padding: 10px;
+  border: 1px solid;
+  border-left: 5px solid plum;
+  color: plum;
+  border-radius: 5px;
+}
+```
+
+效果如下：
+
+![设置样式](https://upload-images.jianshu.io/upload_images/18281896-8cd0f01ff1286191.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+CSS 没有优先考虑更接近的父级的概念。因此，无论哪个 `lang` 属性谁更接近谁，都会根据我们声明的 CSS 样式的顺序设置样式。所以这里的样式设置为了 `zh`，但我们本想区分两者。该怎么办？
+
+接下来就需要使用到 `:lang` 伪类选择器了。
+
+## `:lang` 伪类
+
+`:lang` 是一个语言选择器，会根据 `html` 设置的语言应用对应的样式。可以有两种方式设置 `lang` 属性的样式：
+
+- 它使用所选元素的实际语言
+- 它可以应用于任何元素，而不是直接基于 `lang` 属性
+
+### `:lang` 和内容语言
+
+`:lang` 伪类用于根据元素的内容语言选择元素。元素的内容语言由以下三个因素决定：
+
+- 任何 `lang` 属性
+- 元标签，例如 `<meta http-equiv="content-language" content="en">`
+- HTTP 头，例如 `Content-language: en`
+
+这意味着 `:lang` 伪类即使在没有指定 `lang` 属性的情况下也可以使用。
+
+### `:lang` 和嵌套
+
+作为一个伪类，`:lang` 最好用于特定的元素，而不是子元素。
+
+使用与上面相同的示例，我们可以切换到使用 `:lang()` 属性来选择 `p` 元素。但是，我们不必选择指定语言的子 `p` 元素，而是可以选择本身属于指定语言的 `p` 元素。
+
+```css
+p:lang(zh) {
+  padding: 10px;
+  border: 1px solid;
+  border-left: 5px solid rebeccapurple;
+  color: rebeccapurple;
+  border-radius: 5px;
+}
+
+p:lang(en) {
+  padding: 10px;
+  border: 1px solid;
+  border-left: 5px solid plum;
+  color: plum;
+  border-radius: 5px;
+}
+```
+
+即使 `p` 元素本身没有 `lang` 属性，我们仍然可以使用伪类，因为 `p` 元素的内容语言是从其父级继承的。
+
+## `lang` 属性不能应用的元素
+
+`lang` 属性不能应用于以下元素（不包含不推荐使用的标签）：
+
+- `br`
+- `iframe`
+- `script`
+- `base`
+- `param`
+
+## HTML 中的 `lang` 属性有什么作用？
+
+- 根据 `lang` 属性来设定不同语言的 `css` 样式，或者字体
+- 告诉搜索引擎做精确的识别
+- 让语法检查程序做语言识别
+- 帮助翻译工具做识别
+- 帮助网页阅读程序做识别等等
diff --git "a/HTML/\345\274\272\345\210\266\346\265\217\350\247\210\345\231\250\344\270\213\350\275\275\346\226\260\347\232\204 favicon.md" "b/HTML/\345\274\272\345\210\266\346\265\217\350\247\210\345\231\250\344\270\213\350\275\275\346\226\260\347\232\204 favicon.md"
new file mode 100644
index 0000000..9fbef51
--- /dev/null
+++ "b/HTML/\345\274\272\345\210\266\346\265\217\350\247\210\345\231\250\344\270\213\350\275\275\346\226\260\347\232\204 favicon.md"	
@@ -0,0 +1,19 @@
+# 强制浏览器下载新的 favicon
+
+为了减少加载时间，浏览器通常会缓存静态资源，例如图像、JavaScript、CSS 文件等。favicon 就是其中之一。
+
+一些浏览器，例如 Chrome 浏览器，维护一个单独的存储来缓存网站 favicon，因为它们经常在不同的地方使用，例如书签、历史记录。
+
+当我们用新的 favicon 替换旧的 favicon 时，我们的访问者可能仍然会看到旧的 favicon，即使他们清除了浏览器缓存。
+
+为了防止这种情况发生，我们可以通过添加查询参数来强制浏览器下载新的 favicon。
+
+例如，如果你的 favicon 的原始 URL 为 `example.com/favicon.ico`，可以将其更改为 `example.com/favicon.ico?v=2` 或 `example.com/favicon.ico?t=20221231`，这样浏览器就会认为这是一个新的 favicon，而不是缓存中的版本。
+
+```html
+<link rel="icon" href="/favicon.png?v=2" />
+```
+
+当然，你可以选择参数的另一个名称和值（如版本号或时间戳）。
+
+此外，更改 HTML 文件中的 favicon 引用路径也可以强制浏览器重新下载 favicon。
diff --git "a/HTML/\346\214\207\345\256\232\346\226\207\346\241\243\347\261\273\345\236\213.md" "b/HTML/\346\214\207\345\256\232\346\226\207\346\241\243\347\261\273\345\236\213.md"
new file mode 100644
index 0000000..d9a7aca
--- /dev/null
+++ "b/HTML/\346\214\207\345\256\232\346\226\207\346\241\243\347\261\273\345\236\213.md"
@@ -0,0 +1,36 @@
+# 指定文档类型
+
+在互联网的旧时代，**Netscape Navigator** 和 **Microsoft Internet Explorer** 是流行的浏览器。他们有不同的规则集，因此网页有两个不同的版本为他们服务。
+
+后来，更多的浏览器出现了，互联网也有了标准规范。但他们必须支持两种不同的方式来渲染网页：标准和怪癖模式。标准模式用于使用标准 Web 规范渲染页面，而怪癖模式用于支持传统网站。
+
+这两种模式的区别在于 `doctype`，它引用文档类型定义（或 `DTD`）。它为特定的 HTML 版本定义了一组规则。下面是 `doctype` 声明的示例：
+
+```html
+<!-- HTML 4.01 -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
+<!-- HTML 5 -->
+<!DOCTYPE html>
+```
+
+如果一个页面没有指定 `doctype`，它将以怪癖模式渲染网页。因此，它会导致页面出现一些奇怪的外观问题。
+
+从 HTML5 开始，我们只需将其 `doctype` 添加到页面顶部：
+
+```html
+<!DOCTYPE html>
+<html>
+  ...
+</html>
+```
+
+## 更多资料
+
+以下是一些 HTML Skeleton 的介绍（包括一些奇特的现象）：
+
+- [HTML5 Template: A Basic Boilerplate for Any Project](https://www.sitepoint.com/a-basic-html5-template/)
+- [Explain the First 10 Lines of Twitter’s Source Code to Me](https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/)
+- [HTML Skeleton](https://www.joshwcomeau.com/snippets/html/html-skeleton/)
+- [What does `<meta http-equiv="X-UA-Compatible" content="IE=edge">` do?](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do)
+- [Why does HTML think “chucknorris” is a color?](https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color)
diff --git "a/HTML/\346\214\211\346\227\266\351\227\264\351\227\264\351\232\224\345\210\267\346\226\260\351\241\265\351\235\242\357\274\210\344\270\215\344\275\277\347\224\250 JavaScript\357\274\211.md" "b/HTML/\346\214\211\346\227\266\351\227\264\351\227\264\351\232\224\345\210\267\346\226\260\351\241\265\351\235\242\357\274\210\344\270\215\344\275\277\347\224\250 JavaScript\357\274\211.md"
new file mode 100644
index 0000000..5d2d401
--- /dev/null
+++ "b/HTML/\346\214\211\346\227\266\351\227\264\351\227\264\351\232\224\345\210\267\346\226\260\351\241\265\351\235\242\357\274\210\344\270\215\344\275\277\347\224\250 JavaScript\357\274\211.md"	
@@ -0,0 +1,14 @@
+# 按时间间隔刷新页面（不使用 JavaScript）
+
+```html
+<!-- 5 秒后刷新页面 -->
+<meta http-equiv="refresh" content="5" />
+<!-- 5 秒后刷新并重定向到 https://juejin.cn/user/96412754251390 -->
+<meta http-equiv="refresh" content="5;https://juejin.cn/user/96412754251390" />
+```
+
+> **注意**：如果你的网站不是专门为响应而设计的，并且在这个尺寸下工作得很好，不要使用响应 `meta` 标签，因为它会让体验变得更糟。
+
+## 更多资源
+
+[Stop using the viewport meta tag (until you know how to use it)](http://www.javierusobiaga.com/blog/stop-using-the-viewport-tag-until-you-know-ho/)
diff --git "a/HTML/\346\224\271\351\200\240\347\272\257\345\217\257\346\212\230\345\217\240 details \345\205\203\347\264\240.md" "b/HTML/\346\224\271\351\200\240\347\272\257\345\217\257\346\212\230\345\217\240 details \345\205\203\347\264\240.md"
new file mode 100644
index 0000000..a802320
--- /dev/null
+++ "b/HTML/\346\224\271\351\200\240\347\272\257\345\217\257\346\212\230\345\217\240 details \345\205\203\347\264\240.md"	
@@ -0,0 +1,89 @@
+# 改造纯可折叠 details 元素
+
+我们可以创建一个带有纯 HTML 标签的可扩展元素，如下所示：
+
+```html
+<details>
+  <summary>Details</summary>
+  <!-- 单击 summary 标签时显示的隐藏内容。 -->
+  Something small enough to escape casual notice.
+</details>
+```
+
+[`<details>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details) 元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。[`<summary>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary) 元素可为该部件提供概要或者标签。
+
+在没有添加任何样式的情况下，效果如下：
+
+![纯可折叠元素.gif](https://upload-images.jianshu.io/upload_images/18281896-b3816915c4ac3922.gif?imageMogr2/auto-orient/strip)
+
+我们给它加一点样式：
+
+```css
+details {
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  padding: 0.5em 0.5em 0;
+  background: #282828;
+  color: #fff;
+}
+
+summary {
+  display: block;
+  background: #333;
+  font-weight: bold;
+  margin: -0.5em -0.5em 0;
+  padding: 1rem;
+  padding-left: 2.2rem;
+  position: relative;
+  cursor: pointer;
+}
+
+summary:before {
+  content: '';
+  border-width: 0.4rem;
+  border-style: solid;
+  border-color: transparent transparent transparent #fff;
+  position: absolute;
+  top: 1.3rem;
+  left: 1rem;
+  transform: rotate(0);
+  transform-origin: 0.2rem 50%;
+  transition: 0.25s transform ease;
+}
+
+details[open] > summary:before {
+  transform: rotate(90deg);
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+details[open] {
+  padding: 0.5em;
+}
+
+details[open] summary {
+  border-bottom: 1px solid #aaa;
+  margin-bottom: 0.5em;
+}
+```
+
+在给它来点动画效果：[How to Animate the Details Element](https://css-tricks.com/how-to-animate-the-details-element/)
+
+效果如下：
+
+![纯可折叠元素](https://upload-images.jianshu.io/upload_images/18281896-2f95bdf9149d4db0.gif?imageMogr2/auto-orient/strip)
diff --git "a/HTML/\346\230\276\347\244\272\346\227\245\346\234\237\343\200\201\346\227\266\351\227\264\346\227\266\344\275\277\347\224\250 datetime \345\261\236\346\200\247.md" "b/HTML/\346\230\276\347\244\272\346\227\245\346\234\237\343\200\201\346\227\266\351\227\264\346\227\266\344\275\277\347\224\250 datetime \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..5ca1ee3
--- /dev/null
+++ "b/HTML/\346\230\276\347\244\272\346\227\245\346\234\237\343\200\201\346\227\266\351\227\264\346\227\266\344\275\277\347\224\250 datetime \345\261\236\346\200\247.md"	
@@ -0,0 +1,14 @@
+# 显示日期、时间时使用 datetime 属性
+
+HTML5 中的 `datetime` 属性可用于在页面上显示日期、时间。它可以使日期、时间具有语义化，并且能被屏幕阅读器读取。
+
+你可能知道语义 `<time>` 标签可用于显示日期或时间。建议将其与 `datetime` 属性一起使用，这会带来一些好处：
+
+- 搜索引擎产生更好的结果
+- 它可以被一些设备使用，允许你轻松添加提醒或日历事件
+
+```html
+<div>会议将于<time>09:00</time>开始</div>
+
+<div>会议将于<time datetime="09:00">09:00</time>开始</div>
+```
diff --git "a/HTML/\346\255\243\347\241\256\345\212\240\350\275\275 SVG Favicon.md" "b/HTML/\346\255\243\347\241\256\345\212\240\350\275\275 SVG Favicon.md"
new file mode 100644
index 0000000..f6058cb
--- /dev/null
+++ "b/HTML/\346\255\243\347\241\256\345\212\240\350\275\275 SVG Favicon.md"	
@@ -0,0 +1,20 @@
+# 正确加载 SVG Favicon
+
+SVG Favicon 几乎是跨浏览器支持的。不幸的是，Safari 还不支持，这就是为什么我们仍然需要定义 `ico` favicon。
+
+![2022/2/8：SVG Favicon 支持情况](https://upload-images.jianshu.io/upload_images/18281896-a7514d4e17a64e0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+使用 `sizes="any"` 属性避免 Chromium 浏览器同时加载 favicon 文件（`ico` 和 `svg`）。
+
+```html
+<!-- 避免 Chromium 同时加载 ico 和 svg -->
+<link rel="icon" href="/favicon.ico" sizes="any" />
+<link rel="icon" href="/favicon.svg" />
+```
+
+## 更多资料
+
+- [强制浏览器下载新的 favicon](https://github.com/lio-zero/blog/blob/main/HTML/%E5%BC%BA%E5%88%B6%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8B%E8%BD%BD%E6%96%B0%E7%9A%84%20favicon.md)
+- [We Analyzed 425,909 Favicons](https://iconmap.io/blog#before-we-begin---favicon-best-practices)
+- [Definitive edition of "How to Favicon in 2021"](https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7)
+- [创建自动更改的 Favicon](https://css-tricks.com/how-to-create-a-favicon-that-changes-automatically/)
diff --git "a/HTML/\346\267\273\345\212\240\351\224\256\347\233\230\345\277\253\346\215\267\351\224\256.md" "b/HTML/\346\267\273\345\212\240\351\224\256\347\233\230\345\277\253\346\215\267\351\224\256.md"
new file mode 100644
index 0000000..e750ac9
--- /dev/null
+++ "b/HTML/\346\267\273\345\212\240\351\224\256\347\233\230\345\277\253\346\215\267\351\224\256.md"
@@ -0,0 +1,60 @@
+# 添加键盘快捷键
+
+通过使用 `accesskey` 属性，我们可以为用户指定一个快捷键来激活或聚焦元素。属性的值必须是单个字符。
+
+值得注意的是，每个浏览器都提供了不同的组合键来访问快捷方式。
+
+| 浏览器  | macOS              | Windows             | Linux               |
+| ------- | ------------------ | ------------------- | ------------------- |
+| Chrome  | `alt + ctrl` + key | `alt` + key         | `alt` + key         |
+| Firefox | `alt + ctrl` + key | `alt + shift` + key | `alt + shift` + key |
+| Safari  | `alt + ctrl` + key | N/A                 | N/A                 |
+
+在以下示例代码中，在 Chrome macOS 上按下组合 `alt + ctrl + e` 将触发按钮的 `click` 事件。
+
+```html
+<button accesskey="e" onclick="alert('Edit')">Edit</button>
+
+<input accesskey="b" />
+<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>
+```
+
+更多时候，我们会使用 JS 以编程式绑定形式添加快捷键：
+
+```js
+document.addEventListener('keydown', (e) => {
+  if (e.keyCode === 13) {
+    // do something ...
+  }
+})
+```
+
+通过监听键盘事件，我们可以自由的统一不同浏览器的按键访问。
+
+> **推荐**：[key、keyCode 和 which](https://github.com/lio-zero/blog/blob/main/DOM/key%E3%80%81keyCode%20%E5%92%8C%20which.md) 和 [keydown、keypress 和 keyup](https://github.com/lio-zero/blog/blob/main/DOM/keydown%E3%80%81keypress%20%E5%92%8C%20keyup.md)。
+
+另外，我们还可以使用封装好的第三方库 [keymaster](https://github.com/madrobby/keymaster)，它是一个用于定义和调度键盘快捷键的简单微型库，且没有任何第三方依赖关系。
+
+例如，以下是 keymaster 文档提供的示例：
+
+```js
+import key from 'keymaster'
+
+// 为按键 A 绑定快捷键
+key('a', function () {
+  alert('you pressed a!')
+})
+
+// 返回 false 将停止事件并阻止浏览器默认事件行为
+key('ctrl+r', function () {
+  alert('stopped reload!')
+  return false
+})
+
+// 绑定多个快捷键，做同一件事
+key('⌘+r, ctrl+r', function () {})
+```
+
+详细用法请查阅文档。
+
+keymaster 已有好几年未进行维护，社区出现了一份维护版 [hotkeys](https://github.com/jaywcjlove/hotkeys)。
diff --git "a/HTML/\347\234\201\347\225\245 HTML \345\270\203\345\260\224\345\261\236\346\200\247\347\232\204\345\200\274.md" "b/HTML/\347\234\201\347\225\245 HTML \345\270\203\345\260\224\345\261\236\346\200\247\347\232\204\345\200\274.md"
new file mode 100644
index 0000000..781e973
--- /dev/null
+++ "b/HTML/\347\234\201\347\225\245 HTML \345\270\203\345\260\224\345\261\236\346\200\247\347\232\204\345\200\274.md"	
@@ -0,0 +1,25 @@
+# 省略 HTML 布尔属性的值
+
+有一些 HTML 布尔属性，如 `checked`、`disabled`、`readonly`、`required`、`selected` 等。
+
+根据 [HTML 规范](https://html.spec.whatwg.org/#boolean-attribute)，布尔属性有三种可能的声明。所有这些都具有相同的效果：
+
+```html
+<input readonly />
+<input readonly="" />
+<input readonly="readonly" />
+```
+
+`true` 和 `false` 是无效值：
+
+```html
+<!-- 不允许 -->
+<button disabled="true">...</button>
+<button disabled="false">...</button>
+```
+
+表示 `false` 值的唯一方法是删除该属性。因此，为了避免错误和误导性用法，建议不为布尔属性赋值：
+
+```html
+<input readonly />
+```
diff --git "a/HTML/\347\241\256\344\277\235\350\276\223\345\205\245\345\255\227\346\256\265\345\217\252\350\203\275\344\270\212\344\274\240\345\233\276\347\211\207.md" "b/HTML/\347\241\256\344\277\235\350\276\223\345\205\245\345\255\227\346\256\265\345\217\252\350\203\275\344\270\212\344\274\240\345\233\276\347\211\207.md"
new file mode 100644
index 0000000..c82f940
--- /dev/null
+++ "b/HTML/\347\241\256\344\277\235\350\276\223\345\205\245\345\255\227\346\256\265\345\217\252\350\203\275\344\270\212\344\274\240\345\233\276\347\211\207.md"
@@ -0,0 +1,57 @@
+# 确保输入字段只能上传图片
+
+想要上传图片，只需要为 `input` 添加 `type="file"` 字段：
+
+```html
+<input type="file" />
+```
+
+我只希望图片被允许由浏览器上传。
+
+这是一件很常见的事情，但是我总是忘记怎么做，我需要把这些记录下来。
+
+使用 `accept` 属性和传递 `image/*` 允许所有图片：
+
+```html
+<input type="file" accept="image/*" />
+```
+
+或者 `image/png` 只接受 PNG 格式的图片：
+
+```html
+<input type="file" accept="image/png" />
+```
+
+同样的语法也可以仅接受视频：
+
+```html
+<input type="file" accept="video/*" />
+```
+
+或音频：
+
+```html
+<input type="file" accept="audio/*" />
+```
+
+或它们的组合：
+
+```html
+<input type="file" accept="image/*,audio/*,video/*" />
+```
+
+添加 `multiple` 以允许上传多个：
+
+```html
+<input type="file" multiple accept="image/*" />
+```
+
+当然这只是客户端验证，你还可以在服务器收到文件时，验证文件的 [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)来确保只能上传图片。
+
+你也可以在文件上传之前获取文件的 MIME 类型，比对是否是图片的 MIME 类型，如果不是则不让文件上传。
+
+这样就可以在浏览器和服务器端确保只能上传图片了。
+
+## 更多资料
+
+[过滤文件输入的文件类型](https://github.com/lio-zero/blog/blob/main/HTML/%E8%BF%87%E6%BB%A4%E6%96%87%E4%BB%B6%E8%BE%93%E5%85%A5%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B.md)
diff --git "a/HTML/\347\273\223\345\220\210 Google \345\255\227\344\275\223\350\257\267\346\261\202.md" "b/HTML/\347\273\223\345\220\210 Google \345\255\227\344\275\223\350\257\267\346\261\202.md"
new file mode 100644
index 0000000..c4b8a13
--- /dev/null
+++ "b/HTML/\347\273\223\345\220\210 Google \345\255\227\344\275\223\350\257\267\346\261\202.md"	
@@ -0,0 +1,34 @@
+# 结合 Google 字体请求
+
+通常我们在加载不同的 [Google fonts](https://fonts.google.com/) 时添加单独的链接，如下所示：
+
+```html
+<link
+  href="https://fonts.googleapis.com/css?family=Open+Sans:400,600"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:400,700"
+  rel="stylesheet"
+/>
+```
+
+发送到 Google 的 HTTP 请求数量可以根据我们要加载的字体数量增加。它会影响页面的加载时间。
+
+建议使用 `|` 字符将请求合并为单个请求。链接可能如下所示：
+
+```html
+<link
+  href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,700"
+  rel="stylesheet"
+/>
+```
+
+请注意，使用 Google Font v2 时，语法略有不同。它允许传递多个 `family` 参数：
+
+```html
+<link
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400,600&family=Roboto:wght@400,700"
+  rel="stylesheet"
+/>
+```
diff --git "a/HTML/\350\207\252\345\212\250\346\226\255\345\255\227\344\276\235\350\265\226\344\272\216\345\267\262\345\256\232\344\271\211\347\232\204\346\226\207\346\241\243\350\257\255\350\250\200.md" "b/HTML/\350\207\252\345\212\250\346\226\255\345\255\227\344\276\235\350\265\226\344\272\216\345\267\262\345\256\232\344\271\211\347\232\204\346\226\207\346\241\243\350\257\255\350\250\200.md"
new file mode 100644
index 0000000..373f277
--- /dev/null
+++ "b/HTML/\350\207\252\345\212\250\346\226\255\345\255\227\344\276\235\350\265\226\344\272\216\345\267\262\345\256\232\344\271\211\347\232\204\346\226\207\346\241\243\350\257\255\350\250\200.md"
@@ -0,0 +1,66 @@
+# 自动断字依赖于已定义的文档语言
+
+自动断字是指在网页或文档中文字过长超出容器宽度时，将其自动断开并在该行末添加断字符号（如破折号、连字符等）来换行显示，以保证文本的可读性。
+
+自动断字依赖于已定义的文档语言，因为不同语言对于断字的处理方式和断字符号是不同的。例如，英语和汉语断字的方式是不同的，前者是在单词中间断开，后者是在字符之间断开。
+
+在 HTML 中，可以使用 CSS 的 `word-break` 属性来控制文本的断字处理方式，可以使用 `normal`、`break-all`、`keep-all` 等值来指定断字的方式。
+
+但在最近，我了解到 `lang` 属性和另一个 CSS 属性的配合还会影响浏览器处理长单词和连字符的方式。
+
+## `hyphens: auto` 和 `lang` 属性
+
+HTML `lang` 属性（例如 `lang="en"`）对于创建可访问的网站是必不可少的。没有它，浏览器和辅助技术只能猜测网站的语言，导致糟糕的用户体验。
+
+如果在窄容器中显示带有长单词的文本，可能会遇到溢出情况。长单词会从容器中跳出来。
+
+![长单词溢出](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/864425f88e80473097326cd875a278d7~tplv-k3u1fbpfcp-watermark.image?)
+
+如果你查看溢出的单词和容器宽度，唯一的解决方案是将单词拆分成几段并添加连字符。
+
+而 CSS `hyphens` 属性可以在这里提供帮助。
+
+## 定义手动打断长单词的位置
+
+`hyphens` 属性的默认值为 `manual`。通过手动断字，你可以定义何时以及如何分割单词。使用可见连字符（`U+2010`/`&dash;`）或不可见的“软”连字符（`U+00AD`/`&shy;`）来定义断字断点。
+
+这两种字符提示都用于分隔单词。不幸的是，`manual` 方式无法扩展。
+
+```html
+<!-- 太复杂了 👇 -->
+<div>un&shy;imaginative&shy;ly</div>
+```
+
+这种方式不实用，且复杂。
+
+想象一下一个包含数百个由不同人员维护的页面的网站。然后，根据响应布局，需要在不同的单词位置渲染连字符。移动设备上的长单词可能需要连字符，而在大屏幕布局中可能可以接受相同的单词。一个一直可见的连字符是不行的！
+
+## 让浏览器自动断字长词
+
+另一种方法是使用 `hyphens: auto`。有了这个 CSS 声明，你将单词连字符的负担抛到了浏览器端。
+
+> [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)：`auto` 使浏览器可以根据其选择的任何规则，在适当的断字点自动断开单词。
+
+在处理了包含长单词的文本之后，**我了解到文档语言在浏览器连字号中起到了作用。**
+
+以下示例给出 `lang` 属性如何影响自动断字。
+
+```html
+<div lang="en" class="wrapper">
+  <div>
+    This is an English sentence with purposefully, unnecessary and
+    unimaginatively long words.
+  </div>
+
+  <div>
+    Das ist ein deutscher Satz mit außergewöhnlich und unglaublich langen
+    Wörtern.
+  </div>
+</div>
+```
+
+我不是 100% 确定如何正确地用连字符连接英语单词，但我想用正确的语言连接会更好。
+
+在这里，`lang` 属性不仅使网站更容易访问，而且还影响单词的分割长度。我们最好确定它的定义。
+
+[演示地址](https://code.juejin.cn/pen/7125449154242805767)
diff --git "a/HTML/\350\277\207\346\273\244\346\226\207\344\273\266\350\276\223\345\205\245\347\232\204\346\226\207\344\273\266\347\261\273\345\236\213.md" "b/HTML/\350\277\207\346\273\244\346\226\207\344\273\266\350\276\223\345\205\245\347\232\204\346\226\207\344\273\266\347\261\273\345\236\213.md"
new file mode 100644
index 0000000..9aae99f
--- /dev/null
+++ "b/HTML/\350\277\207\346\273\244\346\226\207\344\273\266\350\276\223\345\205\245\347\232\204\346\226\207\344\273\266\347\261\273\345\236\213.md"
@@ -0,0 +1,21 @@
+# 过滤文件输入的文件类型
+
+默认情况下，单击文件输入（`<input type="file"/>`）时，浏览器将列出目标文件夹中的所有文件。
+
+文件输入提供 [`accept` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)，该属性提示浏览器列出特定的文件类型。属性值可以是一个或多个文件扩展名、[`MIME` 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)，用逗号分隔。
+
+例如，要求用户选择的图像类型如下所示：
+
+```html
+<!-- 文件扩展名 -->
+<input type="file" accept=".png, .jpg, .jpeg" />
+
+<!-- MIME 类型 -->
+<input type="file" accept="image/png, image/jpeg" />
+```
+
+`accept` 属性不阻止用户选择类型不在列表中的文件。不要使用它来验证所选文件。
+
+## 更多资料
+
+阿宝哥的 [JavaScript 如何检测文件的类型？](https://juejin.cn/post/6971935704938971173) 解读了另一种检查文件类型的方式：读取文件的二进制数据。具体看原文。
diff --git "a/HTML/\351\201\277\345\205\215\344\275\277\347\224\250 b\343\200\201i\343\200\201s \345\222\214 u \346\240\207\347\255\276.md" "b/HTML/\351\201\277\345\205\215\344\275\277\347\224\250 b\343\200\201i\343\200\201s \345\222\214 u \346\240\207\347\255\276.md"
new file mode 100644
index 0000000..194939c
--- /dev/null
+++ "b/HTML/\351\201\277\345\205\215\344\275\277\347\224\250 b\343\200\201i\343\200\201s \345\222\214 u \346\240\207\347\255\276.md"	
@@ -0,0 +1,75 @@
+# 避免使用 b、i、s 和 u 标签
+
+这些标签通常用于设置样式。建议不要使用它们。相反，使用提供相同外观的语义标签或 CSS 样式。
+
+| 标签  | 推荐方式                        |
+| ----- | ------------------------------- |
+| `<b>` | `<strong>`                      |
+| `<i>` | `<em>`                          |
+| `<s>` | `text-decoration: line-through` |
+| `<u>` | `text-decoration: underline`    |
+
+## <b>、<i> 与 <strong>、<em> 的区别
+
+默认情况下，`b` 和 `strong` 标签使文本加粗。默认情况下，`i` 和 `em` 标签将文本设置为斜体。
+
+每个浏览器都有自己的默认样式，但会产生类似的外观。以下是它们在流行浏览器中的样式：
+
+[Chrome](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css):
+
+```css
+strong,
+b {
+  font-weight: bold;
+}
+
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: italic;
+}
+```
+
+[Firefox](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css):
+
+```css
+b,
+strong {
+  font-weight: bolder;
+}
+
+i,
+cite,
+em,
+var,
+dfn {
+  font-style: italic;
+}
+```
+
+[Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css):
+
+```css
+strong,
+b {
+  font-weight: bold;
+}
+
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: italic;
+}
+```
+
+尽管它们的外观相似，但 `strong` 和 `em` 标签为所附文本添加了额外的语义，而 `b` 和 `i` 则纯粹是视觉上的。
+
+根据 HTML5 规范，`strong` 和 `em` 标签分别表示重要性和强调。
+
+就可访问性而言，虽然特定的屏幕阅读软件可能会或可能不会以不同的方式发音，但使用 `<strong>` 或 `<em>` 至少可以打开这种可能性，而屏幕阅读软件永远不会以不同的方式发音 `<b>` 或 `<i>` 中的文本。
diff --git "a/HTML/\351\201\277\345\205\215\346\257\217\344\270\252\351\241\265\351\235\242\344\275\277\347\224\250\345\244\232\344\270\252 h1 \346\240\207\347\255\276.md" "b/HTML/\351\201\277\345\205\215\346\257\217\344\270\252\351\241\265\351\235\242\344\275\277\347\224\250\345\244\232\344\270\252 h1 \346\240\207\347\255\276.md"
new file mode 100644
index 0000000..545b9d8
--- /dev/null
+++ "b/HTML/\351\201\277\345\205\215\346\257\217\344\270\252\351\241\265\351\235\242\344\275\277\347\224\250\345\244\232\344\270\252 h1 \346\240\207\347\255\276.md"	
@@ -0,0 +1,31 @@
+# 避免每个页面使用多个 h1 标签
+
+`<h1>` 标签通常用在页面顶部，以表明页面内容的总体目的。它在 SEO 中扮演着重要的角色，因为搜索引擎比其他因素更重视它。它也可用于显示在搜索结果中。
+
+另外，在 HTML 的旧版本中，特别是 HTML 4，允许每个页面有一个 `<h1>` 标签，这一点也很好。HTML5 允许多个 `<h1>` 标签，用于每个 `section`。
+
+这意味着使用多个 `<h1>` 标签在 HTML 语法方面是有效的，但它不被认为是最佳实践。
+
+```html
+<!-- 👎 不要这样做 -->
+<h1>Main heading</h1>
+
+<section>
+  <h1>A section heading</h1>
+</section>
+
+<section>
+  <h1>Another section heading</h1>
+</section>
+
+<!-- 👍 这样做 -->
+<h1>Main heading</h1>
+
+<section>
+  <h2>A section heading</h2>
+</section>
+
+<section>
+  <h2>Another section heading</h2>
+</section>
+```
diff --git "a/HTML/\351\230\262\346\255\242\346\265\217\350\247\210\345\231\250\350\246\201\346\261\202\347\277\273\350\257\221.md" "b/HTML/\351\230\262\346\255\242\346\265\217\350\247\210\345\231\250\350\246\201\346\261\202\347\277\273\350\257\221.md"
new file mode 100644
index 0000000..bea33a1
--- /dev/null
+++ "b/HTML/\351\230\262\346\255\242\346\265\217\350\247\210\345\231\250\350\246\201\346\261\202\347\277\273\350\257\221.md"
@@ -0,0 +1,21 @@
+# 防止浏览器要求翻译
+
+如果一个网站的内容是用一种特定的语言编写的，那么访问者在使用某些浏览器时可能会被提示将其翻译成另一种语言（例如谷歌浏览器）。
+
+你可以通过为整个文档设置 `translate` 属性来防止这种情况发生：
+
+```html
+<html translate="no"></html>
+```
+
+`translate` 属性对某些翻译工具（如 [Google translate](https://translate.google.com/)）有影响。
+
+此外，它是一个全局属性，意味着我们可以对任何元素使用它。
+
+如果我们不想翻译一个特定的标题，即使页面已翻译，它也非常有用：
+
+```html
+<h1 translate="no">Title</h1>
+```
+
+另外，你也可以在网页的 HTTP header 中添加 `Content-Language` 字段，指明网页的语言。这样浏览器就不会询问是否翻译了。
diff --git "a/HTML/\351\232\220\345\274\217\350\241\250\345\215\225\346\217\220\344\272\244\345\271\266\344\270\215\346\200\273\346\230\257\346\234\211\346\225\210.md" "b/HTML/\351\232\220\345\274\217\350\241\250\345\215\225\346\217\220\344\272\244\345\271\266\344\270\215\346\200\273\346\230\257\346\234\211\346\225\210.md"
new file mode 100644
index 0000000..c61885b
--- /dev/null
+++ "b/HTML/\351\232\220\345\274\217\350\241\250\345\215\225\346\217\220\344\272\244\345\271\266\344\270\215\346\200\273\346\230\257\346\234\211\346\225\210.md"
@@ -0,0 +1,37 @@
+# 隐式表单提交并不总是有效
+
+隐式表单提交是指在表单中不使用提交按钮，而是在聚焦 `input` 元素时，使用其他方式（如回车键、JavaScript 等）来触发表单提交。
+
+事实证明，这只在两种情况下是可能的：
+
+- 表单有一个提交按钮
+- 表单只有一个 `input` 元素
+
+```html
+<form onsubmit="alert(1)">
+  <!-- 当 foo 被聚焦时，如果你按下回车，这将发出警告 -->
+  <input name="foo" />
+</form>
+
+<form onsubmit="alert(2)">
+  <!-- 这不会 -->
+  <input name="foo" />
+  <input name="bar" />
+</form>
+```
+
+但你可以通过添加一个隐藏的提交按钮来解决这个问题。
+
+```html
+<input type="submit" hidden />
+```
+
+> 它也明确在[规范](https://www.w3.org/TR/html5/forms.html#implicit-submission)定义。
+
+虽然隐式表单提交在某些情况下是可行的，但它并不总是有效。
+
+例如，在使用隐式表单提交时，可能会导致用户在不知情的情况下提交表单，从而导致意外的数据提交。
+
+另外当使用回车键来触发表单提交时，在文本输入框中回车将会提交表单，这可能不是用户想要的操作。如果使用 JavaScript 触发表单提交，可能会导致在 JavaScript 功能被禁用的情况下无法提交表单。
+
+因此，使用显示的提交按钮是更好的选择，以确保用户能够明确地知道表单正在被提交并能够控制提交的时机。
diff --git "a/HTML/\351\262\234\344\270\272\344\272\272\347\237\245\347\232\204 HTML \345\261\236\346\200\247.md" "b/HTML/\351\262\234\344\270\272\344\272\272\347\237\245\347\232\204 HTML \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..8e3a905
--- /dev/null
+++ "b/HTML/\351\262\234\344\270\272\344\272\272\347\237\245\347\232\204 HTML \345\261\236\346\200\247.md"	
@@ -0,0 +1,449 @@
+# 鲜为人知的 HTML 属性
+
+## contenteditable
+
+`contenteditable` 表示元素内容是否可被用户编辑。
+
+它可以有以下值：
+
+- `true` 或者空字符串，表示元素是可被编辑的。
+- `false` 表示元素不可被编辑。
+- `inherit` 表示元素继承其父元素的可编辑状态。
+
+```html
+<div contenteditable="true">
+  <h1>元素可编辑</h1>
+</div>
+<div contenteditable="">
+  <h1>元素可编辑</h1>
+</div>
+<div contenteditable="false">
+  <h1>元素不可编辑</h1>
+</div>
+<div contenteditable="inherit">
+  <h1>元素继承其父元素的可编辑状态</h1>
+</div>
+```
+> 推荐：[为 contenteditable 元素添加占位符](https://github.com/lio-zero/blog/blob/main/JavaScript/%E4%B8%BA%20contenteditable%20%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E5%8D%A0%E4%BD%8D%E7%AC%A6.md)。
+
+## dir
+
+`dir` 属性规定元素内容的文本方向。
+
+它的取值如下：
+
+- `ltr`（默认）— 从左向右的文本方向。常用于那种从左向右书写的语言（比如英语）。
+- `rtl` — 从右向左的文本方向。常用于那种从右向左书写的语言（比如阿拉伯语）。
+- `auto` — 让浏览器根据内容来判断文本方向。它在解析元素中字符时会运用一个基本算法，直到发现一个具有强方向性的字符，然后将这一方向应用于整个元素。仅在文本方向未知时推荐使用。
+
+```html
+<p dir="rtl">
+  This paragraph is in English but incorrectly goes right to left.
+</p>
+<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>
+<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
+<p dir="auto">
+  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
+</p>
+```
+
+## hidden
+
+`hidden` 用于指定元素是否隐藏，可用于动态隐藏/显示元素而不用修改元素的 CSS 样式。
+
+```html
+<div hidden>lorem</div>
+<div hidden="true">lorem</div>
+<div hidden="false">lorem</div>
+```
+
+你可以配合 JS 来改变其值为 `true` 或 `false`，让浏览器知道是否需要渲染此类元素。
+
+## title
+
+HTML `title` 包含表示与其所属元素相关的建议信息的文本。也就是指定元素的提示文本。
+
+```html
+<p title="爱在这">爱在这</p>
+```
+
+当鼠标移动到带有 `title` 属性的元素上时，提示文本将作为工具提示（tooltip）显示出来。可以说，`title` 是对该元素的描述和进一步的说明。
+
+推荐阅读 [HTML title 属性](https://github.com/lio-zero/blog/blob/master/HTML/HTML%20title%20%E5%B1%9E%E6%80%A7.md)和 [alt 和 title 的区别](https://github.com/lio-zero/blog/blob/main/HTML/alt%20%E5%92%8C%20title%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)关于使用上需要注意的地方。
+
+## accesskey
+
+`accessKey` 属性规定激活（使元素获得焦点）当前元素的快捷键。
+
+```html
+<input accesskey="b" />
+<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>
+```
+
+注意，不同浏览器使用的快捷键方法不同：
+
+- **IE，Chrome，Safari，Opera 15+**：`[ALT] + accesskey`
+- **Opera prior version 15**：`[SHIFT] [ESC] + accesskey`
+- **Firefox**：`[ALT] [SHIFT] + accesskey`
+
+## tabindex
+
+`tabindex` 属性规定当使用键盘上的 **tab** 键进行导航时元素的顺序。
+
+在 HTML4.01 中，`tabindex` 属性可用于：`<a>`、`<area>`、`<button>`、`<input>`、`<object>`、`<select>` 和 `<textarea>`。
+
+在 HTML5 中，`tabindex` 属性可用于任何的 HTML 元素（它会验证任何 HTML 元素，但不一定是有用）
+
+```html
+<ul>
+  <li tabindex="2">HTML</li>
+  <li tabindex="1">CSS</li>
+  <li tabindex="3">JAVASCRIPT</li>
+</ul>
+```
+
+## download
+
+在锚定上使用时，`download` 属性表示浏览器应下载锚定指向的资源，而不是导航到该资源。
+
+```html
+<a href="/logo.png" download></a>
+<!-- 下载的文件名为 'logo' -->
+<a href="/logo.png" download="logo">logo</a>
+```
+
+详细内容可查看[使用 HTML5 download 属性创建可下载的链接](https://github.com/lio-zero/blog/blob/master/HTML/%E4%BD%BF%E7%94%A8%20HTML5%20download%20%E5%B1%9E%E6%80%A7%E5%88%9B%E5%BB%BA%E5%8F%AF%E4%B8%8B%E8%BD%BD%E7%9A%84%E9%93%BE%E6%8E%A5.md)。
+
+## autocomplete
+
+HTML `autocomplete` 属性为 `<input>` 字段提供了各种各样的选项。其作用是向浏览器指示值是否应在适当时自动填充。
+
+```html
+<input autocomplete="on|off" />
+```
+
+当要求用户创建新密码时，可以使用 `new-password` 值。此值可确保浏览器不会意外填写现有密码，同时还允许浏览器建议一个安全密码：
+
+```html
+<form action="signup" method="post">
+  <input type="text" autocomplete="username" />
+  <input type="password" autocomplete="new-password" />
+  <input type="submit" value="注册" />
+  <button type="reset">重置</button>
+</form>
+```
+
+详细内容可查看 [HTML autocomplete 属性](https://github.com/lio-zero/blog/blob/main/HTML/HTML%20autocomplete%20%E5%B1%9E%E6%80%A7.md)。
+
+## loading
+
+我们经常需要对网站中的图像进行优化，其中一些技术便是懒加载，通常是延迟加载初始视口外的图像，直到我们滚动页面，达到图像与底部视口的交汇处才开始加载图像。
+
+通常情况下，我们都是使用 JS 编写该方法。而 HTML 标准中已经存在 `loading` 属性，可以精确的感知这种行为。
+
+我们只需要在想到延迟加载的图像上添加 `loading="lazy"` 属性即可：
+
+```html
+<img src="/img/logo.png" alt="website logo" loading="lazy" />
+```
+
+以下是 Can I Use 给出其的兼容情况：
+
+![loading 支持情况](https://upload-images.jianshu.io/upload_images/18281896-ad5bc70865973a6f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**注意**：大多数现代浏览器都支持 `loading` 属性，但 Safari 和 IE 11 则不支持该属性。
+
+详细内容可查看[使用 loading 属性延迟加载图片](https://github.com/lio-zero/blog/blob/master/HTML/%E4%BD%BF%E7%94%A8%20loading%20%E5%B1%9E%E6%80%A7%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87.md)。
+
+## 自定义有序列表的属性
+
+### reversed 和 start
+
+HTML `reversed` 属性可以帮助我们创建一个降序的编号列表。此布尔属性特定于 `<ol>` 元素，并指定列表元素的顺序相反（即从高到低编号）。
+
+对列表顺序进行降序：
+
+```html
+<ol reversed>
+  <li>item 3</li>
+  <li>item 2</li>
+  <li>item 1</li>
+</ol>
+<!--
+ 3. item 3
+ 2. item 2
+ 1. item 1
+-->
+```
+
+`start` 和 `reversed` 属性一样，都用于有序列表 `<ol>` 元素，它的值为一个整数，用于指定列表计数器的初始值。两者结合可以指定任意的以哪个倒序数字开始。
+
+例如，如果你想在一个反向的 3 项列表中显示数字 101 到 99，只需添加 `start="101"`。
+
+```html
+<ol reversed start="101">
+  <li>item 101</li>
+  <li>item 100</li>
+  <li>item 99</li>
+</ol>
+<!--
+item 101
+item 100
+item 99
+-->
+```
+
+> [创建编号项目的降序列表](https://github.com/lio-zero/blog/blob/main/HTML/%E5%88%9B%E5%BB%BA%E7%BC%96%E5%8F%B7%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%99%8D%E5%BA%8F%E5%88%97%E8%A1%A8.md)
+
+### type 和 value
+
+`value` 属性用于在特定列表项上指定自定义数字。
+
+```html
+<ol>
+  <li>item 1</li>
+  <li value="101">item 101</li>
+  <li>item 102</li>
+</ol>
+<!--
+item 1
+item 101
+item 102
+-->
+```
+
+`type` 属性用于指定有序列表项目的编号类型，可能的值有 `a`、`A`、`i`、`I` 和 `1`。
+
+```html
+<ol type="a">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ol>
+<!--
+a. item 1
+b. item 2
+c. item 3
+-->
+```
+
+## data-* 和 dataset
+
+`data-*` 属性是 HTML5 中引入的，它们允许开发者在 HTML 元素中存储自定义数据。这些属性以 `data-` 为前缀，后面跟着自定义的名称。
+
+这些属性可以应用于任何 HTML 元素。
+
+```html
+<div class="avatar" data-user="IU" data-avatar-type="circle" data-animateSpeed>
+  <img src="avatar.png" alt="avatar" />
+</div>
+```
+
+另外，针对这种自定义属性，HTML5 提供了 `dataset` 属性可以方便的获取或设置 `data-*` 自定义数据属性集。
+
+```js
+const avatar = document.querySelector('.avatar')
+
+avatar.dataset.user === 'IU' // true
+avatar.dataset.avatarType === 'circle' // true
+
+avatar.dataset.animateSpeed = 4000
+
+// 添加不存在的属性
+avatar.dataset.id = 'user'
+console.log(avatar.dataset)
+/*
+DOMStringMap {
+  user: 'IU',
+  avatarType: 'circle',
+  animatespeed: '',
+  animateSpeed: '4000',
+  id: 'user'
+}
+*/
+```
+
+## autofocus
+
+`autofocus` 属性是 HTML5 中引入的，用于指定一个元素在页面加载完成后自动获取焦点。这个属性可以让开发者让用户不用手动点击就可以直接输入，提升用户体验。
+
+这个属性可以应用于 `<input>`、`<select>`、`<textarea>` 和 `<button>` 元素。
+
+```html
+<input type="text" autofocus />
+```
+
+当页面加载完成后，带有 `autofocus` 属性的元素将自动获得焦点。
+
+需要注意的是，如果有多个元素有 `autofocus` 属性，只有第一个会获得焦点。也有一些浏览器不支持 `autofocus` 属性。
+
+## spellcheck
+
+`spellcheck` 属性是 HTML5 中引入的，用于指定输入字段是否需要拼写检查。
+
+这个属性可以应用于 `<input>` 和 `<textarea>` 元素。它支持以下值:
+
+- `true`（默认值）— 启用拼写检查
+- `false` — 禁用拼写检查
+
+```html
+<input type="text" spellcheck="true" />
+```
+
+当启用拼写检查功能时，浏览器会检查用户输入的文本中是否有拼写错误。如果发现拼写错误，浏览器可能会在文本上显示错误提示。
+
+当拼写检查用户键入的内容妨碍到你时，可以选择关闭它。
+
+可以配合使用 `lang` 属性，用于检查使用哪种语言。
+
+需要注意的是，不同的浏览器可能对拼写检查的支持程度不同，且拼写检查的语言可能需要在浏览器或系统设置中设置.
+
+## datalist
+
+`<datalist>` 标签是 HTML5 中引入的，用于为输入字段提供一组可选的值。这个标签可以让开发者为输入字段提供自动完成功能，让用户在输入过程中获得提示。
+
+`<datalist>` 标签包含一组 `<option>` 标签，每个 `<option>` 标签都包含一个可选的值。
+
+```html
+<label for="course">选择学习课程：</label>
+<input list="target" name="course" id="course" />
+<datalist id="target">
+  <option value="HTML" />
+  <option value="CSS" />
+  <option value="JavaScript" />
+  <option value="Node" />
+  <option value="Vue" />
+  <option value="React" />
+  <option value="Vite" />
+</datalist>
+```
+
+使用 `input` 元素的 `list` 属性来绑定 `datalist`。
+
+`<input>` 标签的 `list` 属性指向 `<datalist>` 标签的 `id` 属性。当用户在输入字段中输入文本时，浏览器会显示一个下拉列表，其中包含所有匹配的值。
+
+## poster
+
+[poster](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster) 属性是 HTML5 中引入的，用于为 `<video>` 元素指定一个预览图像。这个属性可以改善用户体验，因为它可以在视频加载之前显示一张图像，而不是黑屏。
+
+当视频加载完成后，预览图像会被视频内容替换。
+
+```html
+<video
+  controls
+  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
+  width="620"
+></video>
+```
+
+需要注意的是，如果视频没有加载或加载失败，预览图像将一直保留。
+
+如果未指定该属性，则在视频第一帧可用之前不会显示任何内容（黑屏），当视频的第一帧可用时，将其作为海报（poster）帧来显示。
+
+## inputmode
+
+[`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) 属性是 HTML5 新引入的一个全局的枚举属性，用于指定输入字段的键盘布局。这个属性可以让开发者提供不同类型的输入，例如数字、字母、符号等。
+
+`inputmode` 属性可以应用于 `<input>` 和 `<textarea>` 元素。它支持以下值：
+
+- `verbatim` — 使用标准键盘布局。
+- `latin` — 使用字母键盘布局。
+- `latin-name` — 使用字母键盘布局，带有大写字母。
+- `latin-prose` — 使用字母键盘布局，带有标点符号。
+- `full-width-latin` — 使用全宽字符键盘布局。
+- `kana` — 使用日语 kana 键盘布局。
+- `katakana` — 使用日语 katakana 键盘布局。
+- `numeric` — 使用数字键盘布局。
+- `tel` — 使用电话键盘布局。
+- `email` — 使用电子邮件键盘布局。
+- `url` — 使用 URL 键盘布局。
+
+设置 `inputmode` 属性可以提供更好的用户体验，因为它可以让浏览器在输入字段上提供相应的键盘布局。例如，如果输入字段是用于输入电话号码的，则可以使用 `inputmode="tel"`，这样浏览器就会在输入字段上提供电话键盘布局。
+
+```html
+Tel: <input type="text" inputmode="tel" />
+```
+
+![Tel](https://upload-images.jianshu.io/upload_images/18281896-b0ff27275d97d1e2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+```html
+Email: <input type="text" inputmode="email" />
+```
+
+![Email](https://upload-images.jianshu.io/upload_images/18281896-92574394b7031980.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## decoding
+
+`<img>` 标签的 `decoding` 属性用于指定图像的解码方式。它可以有三个可能的值：
+
+- `async` — 同步解码图像。在图像加载完成前阻塞页面的渲染。
+- `sync` — 异步解码图像。图像加载完成之前继续渲染页面。
+- `auto`（默认值）— 由浏览器自行决定。
+
+```html
+<img src="/path/to/image.png" alt="image" decoding="sync" />
+```
+
+当图像加载完成之前，浏览器可以使用预解码数据来渲染页面。这可以提高页面的加载速度，因为图像可以在后台加载，而不会阻塞页面的渲染。
+
+- 使用 `decoding="async"` 时，如果图像在加载完成之前不能显示，则可以使用其他图像来替换它。这可以通过使用 `srcset` 和 `sizes` 属性来实现。
+- 使用 `decoding="auto"` 时，浏览器根据图像大小和当前网络状况来决定是否使用异步解码。
+
+需要注意的是这个属性不能保证图像总是使用异步解码，因为最终决策权还是在浏览器手中。
+
+## enterkeyhint
+
+[`enterkeyhint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) 属性是 HTML5 中新增的属性，它可以用来提示浏览器在输入框中按下回车键时应该采取什么操作。
+
+```html
+<input enterkeyhint="enter" />
+```
+
+该属性值可以是以下中的任意一个：
+
+- `enter` 提示浏览器将输入的值提交或结束输入。
+- `done` 与 `enter` 的意思类似。
+- `go` 提示浏览器执行某种操作，例如搜索。
+- `next` 提示浏览器将焦点转移到下一个输入框。
+- `previous` 提示浏览器将焦点转移到上一个输入框。
+- `search` 提示浏览器执行搜索操作。
+- `send` 提示浏览器将输入的值发送给接收方。这个值通常用于即时通信应用，比如聊天工具或社交应用。
+
+```html
+Enter: <input type="text" enterkeyhint="enter">
+```
+
+在手机键盘中进行输入时，可以看到键盘的 **enter** 键显示不同的操作：
+
+![Enter](https://upload-images.jianshu.io/upload_images/18281896-4d553c36c936255c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+```html
+Next: <input type="text" enterkeyhint="next">
+```
+
+![Next](https://upload-images.jianshu.io/upload_images/18281896-5647efdadd1c1ee7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+```html
+Search: <input type="text" enterkeyhint="search">
+```
+
+![Search](https://upload-images.jianshu.io/upload_images/18281896-33fa3998809df287.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 更多资料
+
+> 需要注意，不同浏览器对以上介绍的属性支持程度可能不同，详细支持情况请查阅 MDN 或 Can I Use。
+
+可以进一步阅读以下内容，其中或多或少都讲到了一些你可能没有使用过的 HTML 属性，例如表单上传目录的 `webkitdirectory` 属性，语言翻译 `translate` 属性等。
+
+- [自动断字依赖于已定义的文档语言](https://github.com/lio-zero/blog/blob/main/HTML/%E8%87%AA%E5%8A%A8%E6%96%AD%E5%AD%97%E4%BE%9D%E8%B5%96%E4%BA%8E%E5%B7%B2%E5%AE%9A%E4%B9%89%E7%9A%84%E6%96%87%E6%A1%A3%E8%AF%AD%E8%A8%80.md)
+- [前端文件上传](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%89%8D%E7%AB%AF%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0.md)
+- [确保输入字段只能上传图片](https://github.com/lio-zero/blog/blob/main/HTML/%E7%A1%AE%E4%BF%9D%E8%BE%93%E5%85%A5%E5%AD%97%E6%AE%B5%E5%8F%AA%E8%83%BD%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87.md)
+- [过滤文件输入的文件类型](https://github.com/lio-zero/blog/blob/main/HTML/%E8%BF%87%E6%BB%A4%E6%96%87%E4%BB%B6%E8%BE%93%E5%85%A5%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B.md)
+- [按时间间隔刷新页面（不使用 JavaScript）](https://github.com/lio-zero/blog/blob/main/HTML/%E6%8C%89%E6%97%B6%E9%97%B4%E9%97%B4%E9%9A%94%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%EF%BC%88%E4%B8%8D%E4%BD%BF%E7%94%A8%20JavaScript%EF%BC%89.md)
+- [防止浏览器要求的翻译](https://github.com/lio-zero/blog/blob/main/HTML/%E9%98%B2%E6%AD%A2%E6%B5%8F%E8%A7%88%E5%99%A8%E8%A6%81%E6%B1%82%E7%BF%BB%E8%AF%91.md)
+- [HTML translate 属性](https://github.com/lio-zero/blog/blob/main/HTML/HTML%20translate%20%E5%B1%9E%E6%80%A7.md)
+- [10 useful HTML5 features, you may not be using](https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0)
+- [HTML5 Feature Tips](https://html5-tips.netlify.app/) & [GitHub 地址](https://github.com/atapas/html-tips-tricks)
+- [使用 srcset 的响应式图像](https://github.com/lio-zero/blog/blob/main/HTML/%E4%BD%BF%E7%94%A8%20srcset%20%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%9B%BE%E5%83%8F.md)
+- [HTML iframe 标签](https://github.com/lio-zero/blog/blob/main/HTML/HTML%20iframe%20%E6%A0%87%E7%AD%BE.md)
diff --git "a/JavaScript/++value \345\222\214 value++ \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/++value \345\222\214 value++ \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..ba2484a
--- /dev/null
+++ "b/JavaScript/++value \345\222\214 value++ \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,49 @@
+# ++value 和 value++ 的区别
+
+`++` 是在操作数上加 `1` 的自增操作符。操作符有两个变量使用 `++` 作为前缀或后缀：`++value` 和 `value++`。
+
+它们在 `for` 循环中也有同样的作用。下面的循环输出从 `0` 到 `4` 的相同结果:
+
+```js
+for (let i = 0; i < 5; i++) {
+  console.log(i)
+}
+
+for (let i = 0; i < 5; ++i) {
+  console.log(i)
+}
+```
+
+## 区别
+
+当返回一个值时，`return value++` 在值增加之前返回原始值。而 `return ++value` 则增加值并返回更新后的值。
+
+下面的 `foo` 和 `bar` 函数返回不同的结果:
+
+```js
+const foo = (x) => x++
+const bar = (x) => ++x
+
+foo(1) // 1
+bar(1) // 2
+```
+
+## 扩展
+
+`value += 1` 是后缀递增值 `++` 的另一种选择。值得注意的是，当使用 `string` 时，它们可以提供不同的结果。
+
+后缀递增值 `++` 将先将值转换为数字，然后再递增值:
+
+```js
+let value = '5'
+value++
+value // 6
+```
+
+另一方面，如果 `value` 是字符串，`value += 1` 首先将第二个参数（`1`）转换为字符串，然后将它们连接在一起。
+
+```js
+let value = '5'
+value += 1
+value // '51'
+```
diff --git "a/JavaScript/6\344\270\252\345\270\270\347\224\250\347\232\204\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/JavaScript/6\344\270\252\345\270\270\347\224\250\347\232\204\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
new file mode 100644
index 0000000..0afd06a
--- /dev/null
+++ "b/JavaScript/6\344\270\252\345\270\270\347\224\250\347\232\204\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
@@ -0,0 +1,120 @@
+# 6 个常用的正则表达式
+
+> 本文译自 [6 JavaScript Regular Expression features you can use today](https://www.30secondsofcode.org/articles/s/6-javascript-regexp-tricks)
+
+正则表达式虽然非常强大，但众所周知很难掌握。这里有 6 个有用的特性，可以帮助你开始在你的 JavaScript 项目中使用它们：
+
+## 捕获组
+
+捕获组允许您获取匹配字符串的特定部分，只需将部分正则表达式括在括号中即可 `(...)`：
+
+```js
+const str = 'JavaScript is a programming language'
+;/(JavaScript) is a (.*)/.exec(str)
+/*
+  [
+    0: 'JavaScript is a programming language',
+    1: 'JavaScript',
+    2: 'programming language'
+    ...
+  ]
+*/
+```
+
+## 非捕获组
+
+非捕获组用于匹配某些内容而不捕获它，例如您并不真正需要的一个 `/` 或匹配组。它们的定义类似于捕获组，但前缀为 `?:`：
+
+```js
+const str = 'JavaScript is a programming language'
+;/(?:JavaScript|Python) is a (.+)/.exec(str)
+/*
+  [
+    0: 'JavaScript is a programming language',
+    1: 'programming language'
+    ...
+  ]
+*/
+```
+
+## 命名捕获组
+
+命名捕获组允许您命名捕获组，通过在它前面加上前缀 `<name>`：
+
+```js
+const str = 'JavaScript is a programming language'
+;/(?<subject>.+) is a (?<description>.+)/.exec(str)
+/*
+  [
+    0: 'JavaScript is a programming language',
+    1: 'JavaScript',
+    2: 'programming language',
+    groups: {
+      subject: 'JavaScript,
+      description: 'programming language'
+    }
+    ...
+  ]
+*/
+```
+
+## 捕获组反向引用
+
+反向引用帮你写较短的正则表达式，通过重复现有的捕获组，使用 `\1`，`\2` 等等。同样地，你也可以重复命名捕捉使用群体 `\k` `<name>`：
+
+```js
+const str =
+  'JavaScript is a programming language - an awesome programming language JavaScript is'
+;/(.+) is a (?<description>.+) - an awesome \k<description> \1 is/.exec(str)
+/*
+  [
+    0: 'JavaScript is a programming language - an awesome programming language JavaScript is',
+    1: 'JavaScript',
+    2: 'programming language',
+    groups: {
+      description: 'programming language'
+    }
+    ...
+  ]
+*/
+```
+
+## 前瞻
+
+前瞻（Lookaheads）允许您检查某些内容是否遵循特定模式，而无需实际匹配它。您可以使用以下方法创建正先行断言（`?=`）和负先行断言（`?!`）：
+
+```js
+const str = 'JavaScript is not the same as Java and you should remember that';
+/Java(?=Script)(.*)/.exec(str)
+/*
+  [
+    0: 'JavaScript is not the same as Java and you should remember that',
+    1: 'Script is not the same as Java and you should remember that'
+    ...
+  ]
+*/
+
+/Java(?!Script)(.*)/.exec(str)
+/*
+  [
+    0: 'Java and you should remember that',
+    1: ' and you should remember that'
+    ...
+  ]
+*/
+```
+
+## Unicode 字符
+
+最后，您可以匹配 unicode 字符，使用 `/p{...}` 和 `/u` 标志。示例包括但不限于 `{Emoji}`，`{Math_Symbols}` 和 `{Script=Greek}`：
+
+```js
+const str = 'Greek looks like this: γεια'
+;/\p{Script=Greek}+/u.exec(str)
+/*
+  [
+    0: 'γεια'
+    ...
+  ]
+*/
+```
diff --git "a/JavaScript/== \344\270\216 === \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/== \344\270\216 === \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..af5a459
--- /dev/null
+++ "b/JavaScript/== \344\270\216 === \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,21 @@
+# == 与 === 的区别
+
+## 区别
+
+`==`（相等运算符）和 `===`（严格相等运算符）是比较两个操作数的运算符。
+
+`==` 运算符在比较值之前进行类型转换。另一方面，`===` 运算符不执行任何类型转换。
+
+这意味着如果两个操作数具有相同的类型和值，则 `===` 运算符返回 `true`。
+
+例如：
+
+```js
+// true 被转换为 1，然后与 1 进行比较
+true == 1 // true
+true === 1 // false
+```
+
+> 建议始终使用 `===` 比较值。
+
+至于 `==` 运算符的类型转换，详细内容可以查阅[抽象相等比较](https://262.ecma-international.org/11.0/#sec-abstract-equality-comparison)。
diff --git a/JavaScript/ArrayBuffer.md b/JavaScript/ArrayBuffer.md
new file mode 100644
index 0000000..e237ed2
--- /dev/null
+++ b/JavaScript/ArrayBuffer.md
@@ -0,0 +1,64 @@
+# ArrayBuffer
+
+正如 Blob 是磁盘上可用数据的不透明表示一样，[`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 是内存中可用字节的不透明表示。
+
+`ArrayBuffer` 是 JavaScript 中的一种数据类型，它表示一段连续的内存空间，可以用来存储二进制数据。
+
+其构造函数接受一个参数，以字节为单位的长度：
+
+```js
+const buffer = new ArrayBuffer(64)
+```
+
+`ArrayBuffer` 值具有一个（只读）属性：`byteLength`，顾名思义，它以字节为单位表示其长度。
+
+```js
+buffer.byteLength // 64
+```
+
+它还提供了一个 `slice()` 实例方法，可以从现有的 `ArrayBuffer` 创建一个新的 `ArrayBuffer`，取一个起始位置和一个可选的长度：
+
+```js
+const buffer = new ArrayBuffer(64)
+const newBuffer = buffer.slice(32, 8)
+```
+
+`ArrayBuffer` 本身并不能直接读写数据，必须使用类型化数组或 `DataView` 对象来对 `ArrayBuffer` 进行操作。
+
+例如，下面的代码创建了一个 8 字节的 `ArrayBuffer`，并使用 `Uint8Array` 类型化数组来读写数据：
+
+```js
+const buffer = new ArrayBuffer(8)
+const view = new Uint8Array(buffer)
+
+view[0] = 10
+view[1] = 20
+console.log(view[0], view[1]) // 10 20
+```
+
+可以使用类型化数组或 `DataView` 对象来读写 `ArrayBuffer` 中的各种数据类型，例如整数、浮点数和字符串。`ArrayBuffer` 还可以用于在不同的 JavaScript 环境之间传输二进制数据，例如在 Web Worker 和主线程之间传输数据。
+
+`ArrayBuffer` 和类型化数组是 JavaScript 中用于处理二进制数据的重要工具，可以在处理文件、网络请求和其他二进制数据时使用。
+
+## 从互联网上以 `ArrayBuffer` 的形式下载数据
+
+我们可以从互联网上下载一个 blob，并使用 XHR 将其存储到 `ArrayBuffer` 中：
+
+```js
+const downloadBlob = (url, callback) => {
+  const xhr = new XMLHttpRequest()
+  xhr.open('GET', url)
+  xhr.responseType = 'arraybuffer'
+
+  xhr.onload = () => {
+    callback(xhr.response)
+  }
+
+  xhr.send(null)
+}
+```
+
+## 更多资料
+
+- [ECMAScript 6 入门：ArrayBuffer](https://es6.ruanyifeng.com/#docs/arraybuffer)
+- [ArrayBuffer，二进制数组](https://zh.javascript.info/arraybuffer-binary-arrays)
diff --git a/JavaScript/ArrayBufferView.md b/JavaScript/ArrayBufferView.md
new file mode 100644
index 0000000..a668ac2
--- /dev/null
+++ b/JavaScript/ArrayBufferView.md
@@ -0,0 +1,13 @@
+# ArrayBufferView
+
+`ArrayBufferView` 是 `ArrayBuffer` 的一部分。
+
+它有一个偏移量和一个长度。
+
+创建后，它提供 3 个只读属性：
+
+- `buffer` 指向原始的 ArrayBuffer
+- `byteOffset` 是该缓冲区的偏移量
+- `byteLength` 是其内容的长度（以字节为单位）
+
+类型化数组（`Typed Arrays`） 和 `DataView` 是 `ArrayBufferView` 的实例。
diff --git "a/JavaScript/Blob \345\257\271\350\261\241.md" "b/JavaScript/Blob \345\257\271\350\261\241.md"
new file mode 100644
index 0000000..2127913
--- /dev/null
+++ "b/JavaScript/Blob \345\257\271\350\261\241.md"	
@@ -0,0 +1,160 @@
+# Blob 对象
+
+Web 浏览器实现了一个 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 对象，该对象负责保存数据。
+
+Blob 的意思是“二进制大对象”，它是字节块的不透明表示。
+
+Blob 用于许多事情：
+
+- Blob 可以从网络内容中创建，可以保存到磁盘，也可以从磁盘读取。Blob 是 `FileReader` API 中使用的文件的底层数据结构。
+- Blob 可以使用 [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 在 [Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 和 [iFrame](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) 之间发送，也可以使用 [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) 从服务器发送到客户端。
+- 使用 URL 引用 Blob。
+- 您可以提取存储在 Blob 中的文本（或字节），Blob 甚至可以直接存储在 [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) 中，也可以从那里检索它们。
+
+## 基本用法
+
+创建 Blob 的方式：
+
+- 使用 `Blob()` 构造函数
+- 从另一个 Blob，使用 `Blob.slice()` 实例方法
+
+构造函数接受一个值数组。即使只有一个字符串要放入 Blob，也必须将其包装在数组中。
+
+语法：
+
+```js
+const Blob = new Blob(array, options)
+```
+
+例子：
+
+```js
+const data = new Blob(['Test'])
+```
+
+`array` 可以是：
+
+- 字符串（包括 [DOMString](https://developer.mozilla.org/zh-CN/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String_6fa58bba0570d663099f0ae7ae8883ab)）
+- [ArrayBuffer](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+- [ArrayBufferView](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
+- 另一个 Blob
+
+Blob 构造函数接受一个可选的第二个参数，该参数表示 [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)：
+
+```js
+const data = new Blob(['Test'], { type: 'text/plain' })
+```
+
+一旦拥有 Blob 对象后，可以访问其 2 个属性：
+
+- `size` 返回 Blob 内容的长度（以字节为单位）
+- `type` 与之关联的 MIME 类型
+- 你可以调用它唯一的 `slice()` 方法
+
+调用 `slice()` 时，你可以检索 Blob 的一部分。
+
+这是从 `aBlob` 字节 10 到 20 创建新 blob 的示例：
+
+```js
+const partialBlob = aBlob.slice(10, 20)
+```
+
+## 上传 Blob
+
+此代码用作对输入类型或拖放的回调。我们使用 XHR 将 Blob 加载到 URL，使用 `trackProgress` 函数来跟踪进度：
+
+```js
+const uploadBlob = (url, blob, trackProgress) => {
+  const xhr = new XMLHttpRequest()
+  xhr.open('POST', url)
+  xhr.send(blob)
+  xhr.upload.onprogress = trackProgress
+}
+```
+
+## 以 Blob 形式从互联网下载数据
+
+我们可以从互联网下载数据，并使用以下语法将其存储到 Blob 对象中：
+
+```js
+const downloadBlob = (url, callback) => {
+  const xhr = new XMLHttpRequest()
+  xhr.open('GET', url)
+  xhr.responseType = 'blob'
+
+  xhr.onload = () => {
+    callback(xhr.response)
+  }
+
+  xhr.send(null)
+}
+```
+
+## Blob URL
+
+前面说过，Blob 也可以使用 URL 来引用。
+
+Blob URL 由浏览器生成，是内部引用。给定一个 Blob，您可以使用该 URL 生成指向它的 `URL.createObjectURL()` 函数。
+
+Blob URL 以 `blob://` 开头。
+
+一旦浏览器看到该 URL，它将提供存储在内存或磁盘中的相应 Blob。
+
+Blob URL 不同于 Data URL（以 `data:` 开头），因为它们不将数据存储在 URL 中。它也不同于 File URL（以 `file:` 开头），因为它们不会显示文件路径等敏感信息。
+
+如果您访问一个不再存在的 Blob URL，您将收到来自浏览器的 404 错误。
+
+生成 Blob URL 后，可以通过调用 [`URL.revokeObjectURL()`](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/revokeObjectURL) 并传递 URL 来删除它。
+
+## 示例：从页面上的本地磁盘加载文件并获取
+
+在这个示例代码中，我们有一个 `input` 元素来选择图像。一旦选择了图像，我们删除输入元素并显示图像。我们还会在完成图像显示后清除 Blob：
+
+```html
+<input type="file" allow="image/*" />
+```
+
+```js
+const input = document.querySelector('input')
+
+input.addEventListener('change', (e) => {
+  const img = document.createElement('img')
+  const imageBlob = URL.createObjectURL(input.files[0])
+  img.src = imageBlob
+
+  img.onload = function () {
+    URL.revokeObjectURL(imageBlob)
+  }
+
+  input.parentNode.replaceChild(img, input)
+})
+```
+
+## 从 Blob 中读取
+
+您不能直接访问 Blob 中包含的数据。
+
+为此，我们必须使用 [`FileReader`](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader) 对象。
+
+```js
+const reader = new FileReader()
+
+reader.addEventListener('load', () => {
+  console.log(reader.result) // 'Test'
+})
+
+reader.readAsText(data)
+```
+
+Blob 中的内容的另一种读取方式是使用响应对象。
+
+```js
+const text = await new Response(data).text()
+text // 'Test'
+```
+
+## 更多资料
+
+- [Blob](https://zh.javascript.info/blob)
+- [你不知道的 Blob](https://juejin.cn/post/6844904178725158926)
+- [《你不知道的 Blob》番外篇](https://juejin.cn/post/6844904183661854727)
diff --git "a/JavaScript/Clipboard \342\200\224 \345\211\252\350\264\264\346\235\277\346\223\215\344\275\234.md" "b/JavaScript/Clipboard \342\200\224 \345\211\252\350\264\264\346\235\277\346\223\215\344\275\234.md"
new file mode 100644
index 0000000..ebcf47a
--- /dev/null
+++ "b/JavaScript/Clipboard \342\200\224 \345\211\252\350\264\264\346\235\277\346\223\215\344\275\234.md"	
@@ -0,0 +1,121 @@
+# Clipboard — 剪贴板操作
+
+<!-- https://davidwalsh.name/navigator-clipboard-api -->
+
+四种实现剪贴板的操作：
+
+- 原生 `document.execCommand()` 方法
+- 异步的 Clipboard API
+- `copy` 事件和 `paste` 事件
+- 第三方库 [clipboard.js](https://github.com/zenorocha/clipboard.js)
+
+前三个的详细内容可以查阅阮一峰老师的[剪贴板操作 Clipboard API 教程](http://www.ruanyifeng.com/blog/2021/01/clipboard-api.html)。我们来看看第四种使用 clipboard.js 库简化原生操作。
+
+## 第三方库 Clipboard.js
+
+首先，在我们的项目中使用 NPM 引入 clipboard：
+
+```js
+npm i clipboard
+```
+
+或者使用 CDN：
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
+```
+
+[Clipboard.js](https://github.com/zenorocha/clipboard.js) 的文档已经很全面了，以下是一些简单的实例。
+
+### 复制文本
+
+通过 `data-clipboard-target` 绑定相对应的 id 进行匹配：
+
+```html
+<!-- Target -->
+<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
+
+<!-- Trigger -->
+<button class="btn" data-clipboard-target="#foo">
+  <img src="assets/clippy.svg" alt="Copy to clipboard" />
+</button>
+```
+
+更简便的方法是，使用 `data-clipboard-text` 属性设置您想包含的内容即可。
+
+```html
+<button class="btn" data-clipboard-text="Copy to Clipboard"></button>
+```
+
+### 剪切文本
+
+定义 `data-clipboard-action` 属性，以指定是要 `copy` 还是 `cut` 内容。
+
+```html
+<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">
+  Cut to clipboard
+</button>
+```
+
+> **注意**：`cut` 操作仅适用于 `<input>` 或 `<textarea>` 元素。
+
+### 事件
+
+`success` 和 `error` 让您监听和实现您的自定义逻辑。
+
+```js
+const clipboard = new ClipboardJS('.btn')
+
+clipboard.on('success', (e) => {
+  console.info('Action:', e.action)
+  console.info('Text:', e.text)
+  console.info('Trigger:', e.trigger)
+
+  e.clearSelection()
+})
+
+clipboard.on('error', (e) => {
+  console.error('Action:', e.action)
+  console.error('Trigger:', e.trigger)
+})
+```
+
+还有一些[高级选项](https://github.com/zenorocha/clipboard.js#advanced-options)，详细见文档。
+
+## 示例：添加著作权
+
+我们在很多知识分享平台都可以看到，当我们复制一段超过一定字数的内容时，会在您复制的内容最后追加上一段标注：
+
+```txt
+作者：xxx
+链接：xxx
+来源：xxx
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
+```
+
+我们使用 `copy` 事件来实现（这里不对复制多少字数做判断）：
+
+```js
+document.addEventListener('copy', (e) => {
+  const selection = document.getSelection()
+  const ct = `作者：lio
+链接：https://github.com/lio-zero
+来源：简书
+著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`
+  e.clipboardData.setData('text/plain', selection.toString() + '\n' + ct)
+  e.preventDefault()
+})
+```
+
+复制这段代码到控制台，试着随意复制一段文本到其他地方。
+
+尝试着，使用其他以上所讲述的任何方法，来修改这个示例，以加深印象。
+
+## 更多资料
+
+- [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript)
+- [Unblocking clipboard access](https://web.dev/async-clipboard/)
+- [Interact with the clipboard](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard)
+- [Multi-MIME Type Copying with the Async Clipboard API](https://blog.tomayac.com/2020/03/20/multi-mime-type-copying-with-the-async-clipboard-api/)
+- [利用剪切板 JS API 优化输入框的粘贴体验](https://www.zhangxinxu.com/wordpress/2018/09/js-clipboard-api-paste-input/)
+- [js+flash(as3)实现复制文字内容到剪切板](https://www.zhangxinxu.com/wordpress/2010/08/jsflashcs3%e5%ae%9e%e7%8e%b0%e5%a4%8d%e5%88%b6%e6%96%87%e5%ad%97%e5%86%85%e5%ae%b9%e5%88%b0%e5%89%aa%e5%88%87%e6%9d%bf/)
diff --git "a/JavaScript/DataView \345\257\271\350\261\241.md" "b/JavaScript/DataView \345\257\271\350\261\241.md"
new file mode 100644
index 0000000..306f0fd
--- /dev/null
+++ "b/JavaScript/DataView \345\257\271\350\261\241.md"	
@@ -0,0 +1,78 @@
+# DataView 对象
+
+[`DataView`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView) 是 `ArrayBuffer` 的视图，与[类型化数组（Typed Arrays）](https://github.com/lio-zero/blog/blob/main/JavaScript/%E7%B1%BB%E5%9E%8B%E5%8C%96%E6%95%B0%E7%BB%84.md)类似，但在这种情况下，数组中的项可以具有不同的大小和类型。
+
+这是一个例子：
+
+```js
+const buffer = new ArrayBuffer(64)
+const view = new DataView(buffer)
+```
+
+由于这是缓冲区上的视图，我们可以指定要从哪个字节开始，以及长度：
+
+```js
+const view = new DataView(buffer, 10) // 从字节 10 开始
+const view = new DataView(buffer, 10, 30) // 从字节 10 开始，添加 30 项
+```
+
+如果我们不添加这些附加参数，视图将从位置 0 开始，并加载缓冲区中存在的所有字节。
+
+我们可以使用一组方法将数据添加到缓冲区中：
+
+- `setInt8()`
+- `setInt16()`
+- `setInt32()`
+- `setUint8()`
+- `setUint16()`
+- `setUint32()`
+- `setFloat32()`
+- `setFloat64()`
+
+以下是如何调用其中一种方法：
+
+```js
+const buffer = new ArrayBuffer(64)
+const view = new DataView(buffer)
+view.setInt16(0, 2019)
+```
+
+默认情况下，使用**大字节序（Big-Endian）**存储数据。您可以通过添加第三个具有 `true` 值的参数来覆盖此设置并使用小字节序（Little-Endian）：
+
+```js
+const buffer = new ArrayBuffer(64)
+const view = new DataView(buffer)
+view.setInt16(0, 2019, true)
+```
+
+以下是我们如何从视图中获取数据：
+
+- `getInt8()`
+- `getInt16()`
+- `getInt32()`
+- `getUint8()`
+- `getUint16()`
+- `getUint32()`
+- `getFloat32()`
+- `getFloat64()`
+
+例子：
+
+```js
+const buffer = new ArrayBuffer(64)
+const view = new DataView(buffer)
+view.setInt16(0, 2019)
+view.getInt16(0) // 2019
+```
+
+由于 `DataView` 是 `ArrayBufferView`，因此我们有以下 3 个只读属性：
+
+- `buffer` 指向原始的 ArrayBuffer
+- `byteOffset` 是该缓冲区的偏移量
+- `byteLength` 是其内容的长度（以字节为单位）
+
+需要记住的一点是，类型化数组不允许我们控制字节序：**它使用系统的字节序**。一般来说，这很好，因为我们所说的主要用例是使用一个多媒体 API 在本地使用数组。
+
+如果您在另一个系统上传输类型化数组的数据，如果它使用大字节序而您使用小字节序，则数据可能不会被错误编码。
+
+如果您需要这种控制，**DataView** 是一个完美的选择。
diff --git "a/JavaScript/ES JSON \346\250\241\345\235\227\346\217\220\346\241\210.md" "b/JavaScript/ES JSON \346\250\241\345\235\227\346\217\220\346\241\210.md"
new file mode 100644
index 0000000..33a5cae
--- /dev/null
+++ "b/JavaScript/ES JSON \346\250\241\345\235\227\346\217\220\346\241\210.md"	
@@ -0,0 +1,9 @@
+# ES JSON 模块提案
+
+JSON 模块已经存在于 Chrome 91，它看起来就像一个 ES Modules 风格的导入，只是你在最后设置了类型。
+
+```js
+import configData from './config-data.json' assert { type: 'json' }
+```
+
+**好处**：一行代码获取 JSON 数据
diff --git "a/JavaScript/ES2016\357\274\210ES7\357\274\211.md" "b/JavaScript/ES2016\357\274\210ES7\357\274\211.md"
new file mode 100644
index 0000000..7d736d8
--- /dev/null
+++ "b/JavaScript/ES2016\357\274\210ES7\357\274\211.md"
@@ -0,0 +1,75 @@
+# ES2016（ES7）
+
+ES2016 包含了两个新的功能：
+
+- 幂运算符（`**` 和 `**=`）
+- 数组方法 `Array.prototype.includes`
+
+## Array.prototype.includes()
+
+[`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 确定给定元素是否包含在指定数组中。如果存在返回 `true`，否则返回 `false`。
+
+```js
+const arr = [10, 11, 3, 20, 5]
+
+const includesTwenty = arr.includes(20)
+console.log(includesTwenty) // true
+```
+
+`includes` 方法还接受一个可选参数来指定要从中搜索的索引。默认情况下，`index` 参数为零。
+
+```js
+const arr = [1, 2, 3, 4, 5]
+
+if(arr.includes(3, 2)) {
+  console.log('item found')
+} else {
+  console.log('item not found')
+}
+```
+
+### 拓展
+
+`includes` 类似于 `indexOf`：
+
+```js
+arr.includes(x)
+arr.indexOf(x) >= 0
+```
+
+主要区别在于 `includes()` 查找 `NaN`，而 `indexOf()` 没有：
+
+```js
+[NaN].includes(NaN) // true
+[NaN].indexOf(NaN) // -1
+```
+
+`includes` 不区分 `+0` 和 `-0`，几乎所有 JavaScript 都是这样工作的（除了 `Object.is`）：
+
+```js
+[-0].includes(+0) //true
+Object.is(+0, -0) // false
+```
+
+类型化数组也将有一个方法 `includes()`：
+
+```js
+let tarr = Uint8Array.of(12, 5, 3)
+console.log(tarr.includes(5)) // true
+```
+
+## 幂运算符（`**` 和 `**=`）
+
+ES7 中引入了**幂运算符（Exponentiation operator）`**`**，`**` 具有与 `Math.pow(..)` 等效的计算结果。
+
+例如：`a ** b` 是 `Math.pow(a, b)` 的简写，`a **= b` 是 `a = a ** b` 的简写
+
+```js
+console.log(2 ** 3) // 8
+console.log(Math.pow(2, 3)) // 8
+
+let num = 2
+console.log(num **= 3) // 8
+```
+
+幂赋值运算符使一个变量为底数、以右值为指数的指数运算（乘方）结果赋给该变量。
diff --git "a/JavaScript/ES2017\357\274\210ES8\357\274\211.md" "b/JavaScript/ES2017\357\274\210ES8\357\274\211.md"
new file mode 100644
index 0000000..f55f5a0
--- /dev/null
+++ "b/JavaScript/ES2017\357\274\210ES8\357\274\211.md"
@@ -0,0 +1,248 @@
+# ES2017（ES8）
+
+ES2017 新特性：
+
+- `async` 函数
+- `Object.values/Object.entries`
+- 字符串填充：`String.prototype.padStart()` 和 `String.prototype.padEnd()`
+- `Object.getOwnPropertyDescriptors()`
+- 函数参数列表和调用中的尾随逗号
+
+## `async` 函数
+
+ES8 引入了 [`async` 函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)。`async` 函数基本上是 [co](https://github.com/tj/co) 的专用语法：
+
+```js
+async function fetchJson(url) {
+  try {
+    let request = await fetch(url)
+    let text = await request.text()
+    return JSON.parse(text)
+  } catch (error) {
+    console.log(`ERROR: ${error.stack}`)
+  }
+}
+```
+
+在内部，`async` 函数的工作方式与 Generator 非常相似，但它们不会转换为生成器函数。
+
+异步函数存在以下变体：
+
+- 异步函数声明：`async function foo() {}`
+- 异步函数表达式：`const foo = async function () {}`
+- 异步方法定义：`let obj = { async foo() }`
+- 异步箭头函数：`const foo = async () => {}`
+
+进一步阅读:
+
+- [async 函数](https://es6.ruanyifeng.com/#docs/async)
+- [Generator 函数的含义与用法](https://www.ruanyifeng.com/blog/2015/04/generator.html)
+- [Thunk 函数的含义与用法](https://www.ruanyifeng.com/blog/2015/05/thunk.html)
+- [co 函数库的含义与用法](https://www.ruanyifeng.com/blog/2015/05/co.html)
+- [async 函数的含义和用法](https://www.ruanyifeng.com/blog/2015/05/async.html)
+
+## Object.values()
+
+`Object.values()` 是一个与 `Object.keys()` 类似的新方法，但返回的是 `Object` 自身属性的所有值，不包括继承的值。
+
+假设我们要遍历如下对象 `obj` 的所有值：
+
+```js
+const obj = {
+  a: 1,
+  b: 2,
+  c: 3,
+  [Symbol()]: 123
+}
+```
+
+以前的写法如下：
+
+```js
+const val = Object.keys(obj).map((key) => obj[key])
+console.log(val) // [1, 2, 3]
+```
+
+使用 `Object.values()`：
+
+```js
+const val = Object.values(obj)
+console.log(val) // [1, 2, 3]
+```
+
+从上述代码中可以看出 `Object.values()` 为我们省去了遍历 key，并根据这些 key 获取 value 的步骤。
+
+> **注意**：您可能注意到了，它会忽略键为 `Symbol` 的属性，`Object.keys`、`Object.values`，以及接下来的 `Object.entries` 也一样。
+
+## Object.entries()
+
+`Object.entries()` 方法接受一个对象（可枚举）作为参数，并返回一个数组。
+
+以下是遍历 `obj` 对象的所有属性的 `key` 和 `value`：
+
+```js
+const obj = {
+  a: 1,
+  b: 2,
+  c: 3
+}
+
+Object.keys(obj).forEach((key) => {
+  console.log(`key: ${key}, value: ${obj[key]}`)
+})
+// key: a, value: 1
+// key: b, value: 2
+// key: c, value: 3
+```
+
+使用 `Object.entries()`：
+
+```js
+for (let [key, value] of Object.entries(obj)) {
+  console.log(`key: ${key} value: ${value}`)
+}
+// key: a, value: 1
+// key: b, value: 2
+// key: c, value: 3
+```
+
+`Object.entries()` 还允许您通过对象设置 `map`。这比使用二维数组更简洁，但键只能是字符串。
+
+```js
+let map = new Map(
+  Object.entries({
+    one: 1,
+    two: 2
+  })
+)
+
+console.log(JSON.stringify([...map])) // [["one",1],["two",2]]
+```
+
+假如您有一个午餐订单对象，以及订购的每件商品的数量。
+
+```js
+let lunch = {
+  soup: 2,
+  bread: 1,
+  sandwich: 3,
+  lemonade: 7,
+  tea: 2,
+  pastaSalad: 4
+}
+```
+
+您想从订购最多到订购最少的顺序订购这些。
+
+我们可以使用 `entries` 方法将对象转为数组，保留 `key/value` 关系，在使用 `sort` 排序：
+
+```js
+let sorted = Object.entries(lunch).sort((a, b) => {
+  if (a[1] > b[1]) return -1
+  return 1
+})
+
+/*
+[
+  [ 'lemonade', 7 ],
+  [ 'pastaSalad', 4 ],
+  [ 'sandwich', 3 ],
+  [ 'soup', 2 ],
+  [ 'tea', 2 ],
+  [ 'bread', 1 ]
+]
+*/
+```
+
+## Object.getOwnPropertyDescriptors()
+
+`Object.getOwnPropertyDescriptors()` 方法返回对象的所有自身属性的属性描述符。如果没有，则返回空对象。
+
+```js
+const obj = {
+  name: 'UI',
+  get age() {
+    return 18
+  },
+  [Symbol('foo')]: 123
+}
+
+console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj), null, 2))
+
+/*
+{
+  "name": {
+    "value": "UI",
+    "writable": true,
+    "enumerable": true,
+    "configurable": true
+  },
+  "age": {
+    "enumerable": true,
+    "configurable": true
+  }
+}
+*/
+```
+
+## String.prototype.padStart() 和 String.prototype.padEnd()
+
+在 ES8 中 `String` 新增了两个实例函数 `padStart()` 和 `padEnd()`，其接受两个参数，第一个是重复次数，第二个是要添加的字符串，并在给定字符串的开头或结尾填充。
+
+语法：
+
+```js
+String.prototype.padStart(maxLength, (fillString = ' '))
+String.prototype.padEnd(maxLength, (fillString = ' '))
+```
+
+如果字符串比 `maxLength` 短，使用 `fillString` 填充剩余长度：
+
+```js
+'0.0'.padStart(5, '10') // '100.0'
+```
+
+如果字符串和 `maxLength` 一样长，或者比 `maxLength` 更长，则原样返回：
+
+```js
+'abcd'.padStart(4, '*') // abcd
+'abcdefg'.padStart(4, '*') // 'abcdefg'
+```
+
+如果 `fillString` 省略，则使用默认值，包含单个空格的字符串 `' '`：
+
+```js
+'x'.padStart(3) // '  x'
+```
+
+`padEnd` 与 `padStart` 类似，一个用于开头，一个用于末尾。
+
+## 函数参数列表和调用中的尾随逗号
+
+在 ES8 之前，我们只有在对象字面量和数组字面量中的[尾随逗号](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas#trailing_commas_in_functions)才被忽略：
+
+```js
+let obj = {
+  first: 'D.',
+  last: 'O'
+}
+
+let arr = ['red', 'green', 'blue']
+console.log(arr.length) // 3
+```
+
+它有两个好处：
+
+- 重新排列项目更简单，因为如果最后一个项目改变了它的位置，您不必添加和删除逗号。
+- 它帮助版本控制系统跟踪实际更改的内容。方便使用 Git 进行多人协作开发时修改同一个函数减少不必要的行变更。
+
+鉴于可选和忽略尾随逗号的好处，建议的功能是将它们带到参数定义和函数调用中。
+
+```js
+const foo = (a) => {}
+
+foo(a)
+foo(a)
+```
+
+`(a) => {}` 和 `(a,) => {}` 都是有效的函数定义，`foo(a)` 和 `foo(a,)` 都是有效的函数调用。
diff --git "a/JavaScript/ES2018\357\274\210ES9\357\274\211.md" "b/JavaScript/ES2018\357\274\210ES9\357\274\211.md"
new file mode 100644
index 0000000..631a6f4
--- /dev/null
+++ "b/JavaScript/ES2018\357\274\210ES9\357\274\211.md"
@@ -0,0 +1,285 @@
+# ES2018（ES9）
+
+ES2018 主要新特性：
+
+- 异步迭代
+- Rest/Spread 运算符
+
+新的正则表达式功能：
+
+- RegExp 命名捕获组
+- RegExp Unicode 属性转义
+- RegExp 后行断言（lookbehind）
+- RegExp dotAll（`s` 标志）模式
+
+其他新功能：
+
+- `Promise.prototype.finally()`
+- 模板字符串修订
+
+## 异步迭代
+
+`for-await-of` 是 `for-of` 迭代语句的变体，可用于异步可迭代对象。
+
+在 `async/await` 的某些时刻，你可能尝试在同步循环中调用异步函数。例如：
+
+```js
+async function process(array) {
+  for (let i of array) {
+    await doSomething(i)
+  }
+}
+```
+
+这段代码不会正常运行，下面这段同样也不会：
+
+```js
+async function process(array) {
+  array.forEach(async (i) => {
+    await doSomething(i)
+  })
+}
+```
+
+这段代码中，循环本身依旧保持同步，并在内部异步函数之前全部调用完成。
+
+ES2018 引入**异步迭代器（asynchronous iterators）**，这就像常规迭代器，除了 `next()` 方法返回一个 Promise。因此 `await` 可以和 `for...of` 循环一起使用，以串行的方式运行异步操作。例如：
+
+```js
+async function process(array) {
+  for await (let i of array) {
+    doSomething(i)
+  }
+}
+```
+
+## Rest/Spread 运算符
+
+Rest（剩余）运算符收集数组中的值。Spread（扩展）运算符在迭代器中展开值。
+
+ES6 引入了 Rest 参数和 Spread 运算符。三个点（`...`）仅用于数组。Rest 参数语法允许我们将一个不定数量的参数表示为一个数组。
+
+```js
+function restParam(p1, p2, ...p3) {
+  // p1 = 1
+  // p2 = 2
+  // p3 = [3, 4, 5]
+}
+
+restParam(1, 2, 3, 4, 5)
+```
+
+扩展运算符以相反的方式工作，将数组转换成可传递给函数的单独参数。例如 `Math.max()` 返回给定数字中的最大值：
+
+```js
+const values = [99, 100, -1, 48, 16]
+console.log(Math.max(...values)) // 100
+```
+
+ES2018 为对象解构提供了和数组一样的 Rest 参数和 Spread 运算符，一个简单的例子：
+
+```js
+const myObject = {
+  a: 1,
+  b: 2,
+  c: 3
+}
+
+const { a, ...x } = myObject
+// a = 1
+// x = { b: 2, c: 3 }
+```
+
+或者你可以使用它给函数传递参数：
+
+```js
+restParam({
+  a: 1,
+  b: 2,
+  c: 3
+})
+
+function restParam({ a, ...x }) {
+  // a = 1
+  // x = { b: 2, c: 3 }
+}
+```
+
+跟数组一样，Rest 参数只能在声明的结尾处使用。此外，它只适用于每个对象的顶层，如果对象中嵌套对象则无法适用。
+
+扩展运算符可以在其他对象内使用，例如：
+
+```js
+const obj1 = { a: 1, b: 2, c: 3 }
+const obj2 = { ...obj1, z: 26 }
+
+obj2 // { a: 1, b: 2, c: 3, z: 26 }
+```
+
+可以使用扩展运算符拷贝一个对象，像是这样 `obj2 = { ...obj1 }`，但是**这只是一个对象的浅拷贝**。这意味着，如果一个对象 A 的某个属性（假如为 `cloneB`）是对象 B，那么在克隆后 `cloneB` 属性将指向对象 B。这时，如果对象 B 有深层的嵌套对象，任何对 `cloneB` 的修改将同样影响对象 B。
+
+另外，它们还可以用于字符串。
+
+> 关于对象的深浅拷贝，可以查阅：[浅拷贝和深拷贝](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D.md#%E6%B5%85%E6%8B%B7%E8%B4%9D)。
+
+## 正则表达式的改进
+
+### RegExp 命名捕获组
+
+JavaScript 正则表达式可以返回一个匹配的对象，一个包含匹配字符串的类数组。例如：以 `YYYY-MM-DD` 的格式解析日期：
+
+```js
+const reDate = /(\d{4})-(\d{2})-(\d{2})/
+const [match, year, month, day] = reDate.exec('2022-12-02')
+
+match // '2022-12-02'
+year // '2022'
+month // '12'
+day // '02'
+```
+
+这样的代码很难读懂，并且改变正则表达式的结构有可能改变匹配对象的索引。
+
+ES9 允许命名捕获组使用符号 `?<name>`，在打开捕获括号 `(` 后立即命名，示例如下：
+
+```js
+const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
+const [match, year, month, day] = reDate.exec('2022-12-02')
+
+match // '2022-12-02'
+year // '2022'
+month // '12'
+day // '02'
+```
+
+任何匹配失败的命名组都将返回 `undefined`。
+
+命名捕获也可以使用在 `replace()` 方法中。例如将日期转换为美国的 `MM-DD-YYYY` 格式：
+
+```js
+const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
+const today = '2022-12-02'
+const usDate = today.replace(reDate, '$<month>-$<day>-$<year>')
+
+usDate // '12-02-2022'
+```
+
+### RegExp Unicode 属性转义
+
+在 ES9 之前，在正则表达式中访问 Unicode 字符属性是不被允许的。
+
+ES9 添加了 Unicode 属性转义，形式为 `\p{...}` 和 `\P{...}`，在正则表达式中使用标记 `u`（unicode）设置，在 `\p` 块内，可以以键值对的方式设置需要匹配的属性而非具体内容。例如：
+
+```js
+const reGreekSymbol = /\p{Script=Greek}/u
+reGreekSymbol.test('π') // true
+```
+
+此特性可以避免使用特定 Unicode 区间来进行内容类型判断，提升可读性和可维护性。
+
+### RegExp 后行断言
+
+在 ES9 之前，JavaScript 在正则表达式中仅支持**先行断言**（lookahead）。这意味着匹配会发生，但不会有任何捕获，并且断言没有包含在整个匹配字段中。
+
+例如从价格中捕获货币符号：
+
+```js
+const reLookahead = /\D(?=\d+)/
+const match = reLookahead.exec('$123.89')
+
+console.log(match[0]) // $
+```
+
+`/\D(?=\d+)/` 表示仅在后面是 `\d+` 的情况下匹配 `\D`。
+
+ES9 引入以相同方式工作但是匹配前面的**后行断言**（lookbehind），这样我们就可以忽略货币符号，单纯的捕获价格的数字：
+
+```js
+const reLookbehind = /(?<=\D)\d+/
+const match = reLookbehind.exec('$123.89')
+
+console.log(match[0]) // 123.89
+```
+
+以上是**肯定后行断言**，表示匹配 `\d+`，但仅在前面是 `\D` 的情况下。
+
+同样的，还存在**否定后行断言**，表示一个值必须不存在。
+
+例如：
+
+```js
+const reLookbehindNeg = /(?<!\D)\d+/
+const match = reLookbehind.exec('$123.89')
+
+console.log(match[0]) // null
+```
+
+表示匹配 `\d+`，但仅在前面不是 `\D` 的情况下。
+
+四种断言语法如下：
+
+- 先行断言
+  - 肯定先行断言 — `X(?=Y)`
+  - 否定先行断言 — `X(?!Y)`
+- 后行断言
+  - 肯定先行断言 — `(?<=Y)X`
+  - 否定先行断言 — `(?<!Y)X`
+
+> **推荐**：详细内容可以查阅[前瞻断言与后瞻断言](https://zh.javascript.info/regexp-lookahead-lookbehind)。
+
+### 正则表达式 dotAll 模式
+
+**dotAll 模式**，即点（dot）代表一切字符。所以，正则表达式中点（`.`）匹配除行终止符外的任何单字符，ES9 引入 `s` 修饰符可以改变这种行为，允许**行终止符（line terminator character）**的出现。
+
+所谓行终止符，就是该字符表示一行的终结。以下四个字符属于“行终止符”。
+
+- U+000A 换行符（`\n`）
+- U+000D 回车符（`\r`）
+- U+2028 行分隔符（line separator）
+- U+2029 段分隔符（paragraph separator）
+
+```js
+;/hello.world/.test('hello\nworld') // false
+;/hello.world/s.test('hello\nworld') // true
+```
+
+正则表达式还引入了一个 `dotAll` 属性，返回一个布尔值，表示该正则表达式是否处在 **dotAll 模式**。
+
+```js
+const reg = /foo.bar/s
+
+reg.test('foo\nbar') // true
+reg.dotAll // true
+reg.flags // 's'
+```
+
+`/s` 修饰符和多行修饰符 `/m` 不冲突，两者一起使用的情况下，`.` 匹配所有字符，而 `^` 和 `$` 匹配每一行的行首和行尾。
+
+## Promise.prototype.finally()
+
+`finally` 被引入来注册一个回调函数，该函数在一个 Promise 被解决（`resolve` 或 `reject`）时运行。
+
+一个 Promise 调用链要么成功到达最后一个 `then()`，要么失败触发 `catch()`。在某些情况下，你想要在无论 Promise 运行成功还是失败，运行相同的代码，例如清除 `loading`、关闭数据库连接等。
+
+`finally()` 允许你指定最终的逻辑：
+
+```js
+function doSomething() {
+  doSomething1()
+    .then(doSomething2)
+    .then(doSomething3)
+    .catch((err) => {
+      console.log(err)
+    })
+    .finally(() => {
+      // finish here!
+    })
+}
+```
+
+## 更多资料
+
+- [ECMAScript 2018: the final feature set](https://2ality.com/2017/02/ecmascript-2018.html)
+- [异步迭代和 generator](https://zh.javascript.info/async-iterators-generators)
+- [JavaScript RegExp 对象 — 正则表达式](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20RegExp%20%E5%AF%B9%E8%B1%A1%20%E2%80%94%20%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.md)
+- [精读《正则 ES2018》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/91.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%AD%A3%E5%88%99%20ES2018%E3%80%8B.md)
diff --git "a/JavaScript/ES2019\357\274\210ES10\357\274\211.md" "b/JavaScript/ES2019\357\274\210ES10\357\274\211.md"
new file mode 100644
index 0000000..335aead
--- /dev/null
+++ "b/JavaScript/ES2019\357\274\210ES10\357\274\211.md"
@@ -0,0 +1,113 @@
+# ES2019（ES10）
+
+主要新特性：
+
+- `Array.prototype.{flat,flatMap}`
+- `Object.fromEntries`
+
+次要新功能：
+
+- `String.prototype.{trimStart,trimEnd}`
+- `Symbol.prototype.description`
+- 可选的 `catch` 绑定
+- `Array.prototype.sort()`
+
+主要是内部的变化：
+
+- [`JSON.stringify`](https://2ality.com/2019/01/well-formed-stringify.html)
+- [JSON 超集](https://2ality.com/2019/01/json-superset.html)
+- [`Function.prototype.toString`](https://2ality.com/2016/08/function-prototype-tostring.html)
+
+> 从 V8 v7.3 / Chrome 73 开始，所有这些 ES2019 功能都默认可用。
+
+## Array.prototype.flat() 和 Array.prototype.flatMap()
+
+[`flat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) 方法创建一个新数组，其中所有子数组元素递归连接到该数组中，直到指定的深度。默认深度为 1。
+
+```js
+const arr1 = [1, 2, [3, 4]]
+arr1.flat() // [1, 2, 3, 4]
+
+const arr2 = [1, 2, [3, 4, [5, 6]]]
+arr2.flat() // [1, 2, 3, 4, [5, 6]]
+
+const arr3 = [1, 2, [3, 4, [5, 6]]]
+arr3.flat(2) // [1, 2, 3, 4, 5, 6]
+
+const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
+arr4.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+```
+
+> 更多实现技巧可查阅[数组扁平化](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96.md)。
+
+[`flatMap()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) 方法实际上是 `map` 和 `flat()` 方法的组合。
+
+首先，它使用 `map` 方法映射每个元素，然后将结果压缩成一个新数组。它与 `map` 连着深度值为 1 的 `flat` 几乎相同，但 `flatMap` 通常在合并成一种方法的效率稍微高一些。
+
+```js
+const arr = [1, 2, 3, 4]
+
+arr.flatMap((x) => x * 2) // [2, 4, 6, 8]
+arr.flatMap((x) => [x * 2]) // [2, 4, 6, 8]
+
+// 只有一层是扁平的
+arr.flatMap((x) => [[x * 2]]) // [[2], [4], [6], [8]]
+```
+
+## Object.fromEntries()
+
+[`Object.fromEntries()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) 从给定的键值对构建一个对象。
+
+它接收一个键值对列表，并返回一个对象，其属性由条目给出。它的功能与 `Object.entries()` 相反。
+
+```js
+const entries = new Map([
+  ['apple', 'origin'],
+  ['grapes', 'peach']
+])
+
+console.log(Object.fromEntries(entries)) // { apple: 'origin', grapes: 'peach' }
+```
+
+我们可以看到，当我们向 `fromEntries()` 函数提供一个映射（它成对存储值）时，我们得到了一个对象，该对象与映射中的相应键值对相同。
+
+## String.prototype.trimStart() 和 String.prototype.trimEnd()
+
+它原本的名称为 `trimRight` 和 `trimLeft`，但在 ES2019 中，名称被更改为 `trimStart` 和 `trimEnd`，以使它看起来更直观。
+
+`trimStart` 修剪给定字符串的开头。`trimEnd` 修剪给定字符串的结尾。
+
+```js
+let message = '     Hello      '
+message.trimStart() // "Hello      "
+message.trimEnd() // "Hello"
+```
+
+> **推荐**：[如何在 JavaScript 对字符串去空](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E5%AF%B9%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8E%BB%E7%A9%BA.md)
+
+## Symbol.prototype.description
+
+当我们在 JS 中创建一个 `Symbol` 时，可以指定一个描述，用于以后的调试。取回这个描述的过程有点乏味。我们必须重新构造 `Symbol`，并借助 `toString()` 方法访问描述。
+
+ES10 添加了一个名为 `description` 的新只读属性，该属性返回 `Symbol` 的描述。
+
+```js
+const symbol = Symbol('This is a Symbol')
+console.log(symbol.toString()) // Symbol(This is a Symbol)
+console.log(symbol.description) // This is a Symbol
+```
+
+我们可以看到，我们直接使用 `description` 属性得到 `Symbol` 的描述。
+
+## 可选 `catch` 绑定
+
+在 ES10 之前，语法迫使我们为 `catch` 子句绑定一个异常变量，不管它是否必要。很多时候可以注意到，`catch` 块只是多余的。ES10 提案使我们能够完全忽略变量，让我们少关心一件事。
+
+```js
+try {
+  const data = JSON.parse(obj)
+  return true
+} catch {
+  return false
+}
+```
diff --git "a/JavaScript/ES2020\357\274\210ES11\357\274\211.md" "b/JavaScript/ES2020\357\274\210ES11\357\274\211.md"
new file mode 100644
index 0000000..c6cc6c3
--- /dev/null
+++ "b/JavaScript/ES2020\357\274\210ES11\357\274\211.md"
@@ -0,0 +1,412 @@
+# ES2020（ES11）
+
+新特性：
+
+- `String.prototype.matchAll`
+- `import()`
+- `import.meta`
+- `BigInt` — 任意精度整数
+- `Promise.allSettled`
+- `globalThis`
+- `for-in`
+- 可选链 — `?.`
+- 空值合并运算符 — `??`
+- `export * as ns from "mod"`
+
+## String.prototype.matchAll()
+
+`matchAll()` 返回全局正则表达式的所有匹配项。
+
+给定一个字符串或一个正则表达式，`matchAll()` 在所有匹配项的匹配对象上返回一个可迭代对象。
+
+```js
+let regexp = /t(e)(st(\d?))/
+let str = 'test1test2'
+
+// 使用扩展运算符 `(...)` 将可迭代对象转换为数组：
+let array = [...str.matchAll(regexp)]
+
+array[0] // ["test1", "e", "st1", "1"]
+array[1] // ["test2", "e", "st2", "2"]
+```
+
+> **注意**：必须设置 `g` 修饰符
+
+### `RegExp.prototype.exec()` 与 `/g`
+
+在以下示例中，我们收集数组匹配中组 1 的所有捕获：
+
+```js
+function collectGroup1(regExp, str) {
+  const matches = []
+  while (true) {
+    const match = regExp.exec(str)
+    if (match === null) break
+    // 将组 1 的捕获添加到 matches
+    matches.push(match[1])
+  }
+  return matches
+}
+
+collectGroup1(/"([^"]*)"/gu, `"foo" and "bar" and "baz"`) // [ 'foo', 'bar', 'baz' ]
+```
+
+没有标志 `/g`，`exec()` 始终只返回第一个匹配项：
+
+```js
+const re = /[abc]/
+re.exec('abc') // [ 'a', index: 0, input: 'abc' ]
+
+re.exec('abc') // [ 'a', index: 0, input: 'abc' ]
+```
+
+这对 `collectGroup1()` 来说是个坏消息，因为如果 `regExp` 没有标志 `/g`，它将永远不会完成。
+
+### `String.prototype.match()` 与 `/g`
+
+如果你使用 `match()`，使用设置了标志 `/g` 的正则表达式，可以在一个数组中获得它的所有完整匹配项（换句话说，捕获组被忽略）：
+
+```js
+'abab'.match(/a/gu) // [ 'a', 'a' ]
+```
+
+如果未设置 `/g`，`match()` 的工作原理与 `RegExp.prototype.exec()` 类似：
+
+```js
+'abab'.match(/a/u) // [ 'a', index: 0, input: 'abab' ]
+```
+
+### `String.prototype.replace()` 与 `/g`
+
+你可以使用一个技巧通过收集捕获 `replace()`：我们使用一个函数来计算替换值。该函数接收所有捕获信息。但是，它不计算替换值，而是在数组匹配中收集感兴趣的数据：
+
+```js
+function collectGroup1(regExp, str) {
+  const matches = []
+  function replacementFunc(all, first) {
+    matches.push(first)
+  }
+  str.replace(regExp, replacementFunc)
+  return matches
+}
+
+collectGroup1(/"([^"]*)"/gu, `"foo" and "bar" and "baz"`) // [ 'foo', 'bar', 'baz' ]
+```
+
+对于不带标志 `/g` 的正则表达式，`replace()` 只访问第一个匹配项。
+
+### `RegExp.prototype.test()`
+
+`test()` 只要正则表达式匹配，就返回 `true`：
+
+```js
+const regExp = /a/gu
+const str = 'aa'
+
+regExp.test(str) // true
+regExp.test(str) // true
+regExp.test(str) // false
+```
+
+### `String.prototype.split()`
+
+`split()` 可以拆分字符串并使用字符串或正则表达式指定分隔符。如果该正则表达式至少包含一个捕获组，则 `split()` 返回一个数组，其中子字符串与第一个组捕获的内容交错：
+
+```js
+const regExp = /<(-+)>/gu
+const str = 'a<--->b<->c'
+
+str.split(regExp) // [ 'a', '---', 'b', '-', 'c' ]
+```
+
+## 动态导入 `import()`
+
+在此之前，我们只能使用静态导入，它只接受模块路径的字符串。使用动态导入，我们必须使用 Promise 有条件地导入模块。
+
+```html
+<nav>
+  <a href="books.html" data-entry-module="books">Books</a>
+  <a href="movies.html" data-entry-module="movies">Movies</a>
+  <a href="video-games.html" data-entry-module="video-games">Video Games</a>
+</nav>
+
+<main>Content will load here!</main>
+```
+
+```js
+const main = document.querySelector('main')
+for (const link of document.querySelectorAll('nav > a')) {
+  link.addEventListener('click', (e) => {
+    e.preventDefault()
+
+    import(`./section-modules/${link.dataset.entryModule}.js`)
+      .then((module) => {
+        module.loadPageInto(main)
+      })
+      .catch((err) => {
+        main.textContent = err.message
+      })
+  })
+}
+```
+
+> 点击此处 👉 [Loading modules dynamically via import()](https://exploringjs.com/impatient-js/ch_modules.html#dynamic-imports) 了解更多内容。
+
+## `import.meta`
+
+用于保存有关当前模块的特定于主机的元数据的[元属性](https://tc39.es/proposal-import-meta/)。
+
+```js
+;(async () => {
+  const response = await fetch(new URL('../hamsters.jpg', import.meta.url))
+  const blob = await response.blob()
+
+  const size = import.meta.scriptElement.dataset.size || 300
+
+  const image = new Image()
+  image.src = URL.createObjectURL(blob)
+  image.width = image.height = size
+
+  document.body.appendChild(image)
+})()
+```
+
+> 点击此处 👉 [import.meta – metadata for the current module](https://exploringjs.com/impatient-js/ch_modules.html#import.meta) 了解更多内容。
+
+## `BigInt` — 任意精度整数
+
+`BigInt` 一种用于大整数运算的新原始数据类型，表示大于 2⁵³ 的数字。
+
+`BigInt` 使用一系列数字，后缀为 `n`。
+
+```js
+const theBiggestInt = 9886881870000166n
+
+const alsoHuge = BigInt(9886881870000166) // 9007199254740991n
+
+const hugeButString = BigInt('9886881870000166') // 9886881870000166n
+```
+
+`typeof` 的返回值为 `bigint`：
+
+```js
+typeof 123n // 'bigint'
+```
+
+## `Promise.allSettled()`
+
+当所有给定的 Promise 都得到解决时返回（`resolved` 或 `rejected`，无关紧要）。
+
+```js
+const sleep = (sm) =>
+  new Promise((resolve) => setTimeout(() => resolve(sm), sm))
+const err = (ms) => sleep(ms).then(() => Promise.reject(ms))
+
+Promise.allSettled([1, 2, 3]).then(console.log)
+Promise.allSettled([sleep(300), sleep(100), sleep(200)]).then(console.log)
+Promise.allSettled([sleep(3000), err(100), sleep(2000)]).then(console.log)
+Promise.allSettled([err(50), err(60)]).then(console.log)
+```
+
+## `globalThis`
+
+在此之前，全局对象由于不同的 JavaScript 环境有不同的语法：
+
+- 在 Web 浏览器可以是 `window`，`self`，`frames` 或 `this`。
+- 对于 Web Worker 来说，它是 `self`。
+- 在 Node.js 中，它是 `global`。
+
+[`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) 为所有 JavaScript 环境中的全局对象提供了单一语法。
+
+```js
+// node 环境
+console.log(globalThis)
+
+/**
+<ref *1> Object [global] {
+  global: [Circular *1],
+  clearInterval: [Function: clearInterval],
+  clearTimeout: [Function: clearTimeout],
+  setInterval: [Function: setInterval],
+  setTimeout: [Function: setTimeout] {
+    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
+  },
+  queueMicrotask: [Function: queueMicrotask],
+  clearImmediate: [Function: clearImmediate],
+  setImmediate: [Function: setImmediate] {
+    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
+  }
+}
+*/
+
+// 浏览器
+globalThis // Window {0: global, 1: global, window: Window, self: Window, ...}
+```
+
+> **注意**：`globalThis` 并不总是直接指向全局对象。详细可查阅 [In browsers, globalThis does not point directly to the global object](https://exploringjs.com/deep-js/ch_global-scope.html#window-proxy)。
+
+但 `globalThis` 会对性能产生负面影响，也可能会产生一些不到的错误，建议使用 ES6 的一些特性避免全局对象，例如：
+
+- 声明在 `const`、`let` 和 `class` 全局作用域内，使用时不会创建全局对象属性。
+- 每个 ES 模块都有自己的局部作用域。（默认开启严格模式）
+
+## 可选链 — `?.`
+
+可选链 `?.` 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在，也不会出现错误。
+
+如果问号前面的值不是 `undefined` 也不是 `null`，则执行问号后面的操作。否则，返回 `undefined`。它有如下三种语法：
+
+```js
+obj?.prop // 可选的静态属性访问
+obj?.[prop] // 可选的动态属性访问
+func?.(...args) // 可选方法调用
+```
+
+- `obj?.prop` — 如果 `obj` 存在则返回 `obj.prop`，否则返回 `undefined`。
+- `obj?.[prop]` — 如果 `obj` 存在则返回 `obj[prop]`，否则返回 `undefined`。
+- `obj.method?.(...args)` — 如果 `obj.method` 存在则调用 `obj.method()`，否则返回 `undefined`。
+
+```js
+const user = {}
+
+user.address.street // TypeError
+user?.address?.street // undefined
+```
+
+### 可选链的替代方案
+
+#### &&
+
+```js
+user && user.address && user.address.street // undefined
+```
+
+**缺点**：
+
+- 语法冗长
+- 如果失败，`&&`返回其左侧，而 `?.` 始终返回 `undefined`：
+- `&&` 对所有虚值的左侧都失败，而 `?.` 只对`undefined` 和 `null` 失败：
+
+#### 解构
+
+您还可以使用解构来处理链式属性访问，但这并不美观：
+
+```js
+const { address: { street = undefined } = {} } = user
+
+street // undefined
+```
+
+#### 第三方库：Lodash 库的 `get()` 方法
+
+```js
+_.get(user, 'address.street')
+```
+
+### 支持情况
+
+可选链（`?.`）已经支持大部分的主流浏览器：
+
+![可选链](https://upload-images.jianshu.io/upload_images/18281896-6268201ef1e6d507.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果您需要支持 IE 或更低版本浏览器，babel 有一个插件 — [`@babel/plugin-proposal-optional-chaining`](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)。
+
+> 点击此处 👉 [可选链 "?."](https://zh.javascript.info/optional-chaining) 了解更多内容。
+
+## 空值合并运算符 — `??`
+
+`??` 为二元运算符。如果左侧表达式的值为 `null` 或 `undefined`，则计算运算符的右侧。
+
+```js
+const data = {
+  nullValue: null,
+  height: 400,
+  animationDuration: 0,
+  headerText: '',
+  showSplashScreen: false
+}
+
+console.log(data.undefinedValue ?? 'some other default') // 'some other default'
+console.log(data.nullValue ?? 'some other default') // 'some other default'
+console.log(data.headerText ?? 'Hello, world!') // ''
+console.log(data.animationDuration ?? 300) // 0
+console.log(data.showSplashScreen ?? true) // false
+```
+
+可以看到，它只关心左侧的值是否为 `null` 或 `undefined`，而不在乎是否为虚值。
+
+> 点击此处 👉 [空值合并运算符 '??'](https://zh.javascript.info/nullish-coalescing-operator) 了解更多内容。
+
+## `export * as ns from 'mod'`
+
+语法：
+
+```js
+export * as ns from 'module'
+```
+
+示例：
+
+```js
+export * as ns from './utils'
+
+// 👆 等同于 👇
+
+import * as ns from './utils'
+export { ns }
+```
+
+### 扩展
+
+[Airbnb 规范](https://github.com/airbnb/javascript)建议我们不要使用通配符导入。
+
+> **原因**：确保您有一个默认导出。
+
+```js
+// bad
+import * as AirbnbStyleGuide from './AirbnbStyleGuide'
+
+// good
+import AirbnbStyleGuide from './AirbnbStyleGuide'
+```
+
+并且不要直接从 `import` 中 `export`
+
+> **原因**：尽管单行代码很简洁，但是使用一种清晰的导入方式和一种清晰的导出方式可以使事情保持一致。
+
+```js
+// bad
+// es6.js
+export { es6 as default } from './AirbnbStyleGuide'
+
+// good
+// es6.js
+import { es6 } from './AirbnbStyleGuide'
+export default es6
+```
+
+> 点击此处 👉[Normative: Add export \* as ns from "mod” to Export production and Module Semantic](https://github.com/tc39/ecma262/pull/1174) 了解更多详情。
+
+## 指定 `for-in` 枚举顺序
+
+不同的引擎已就如何指定 [`for-in`](https://github.com/bakkot/for-in-exploration) 枚举顺序达成一致，从而使行为标准化。
+
+```js
+let obj = {
+  p1: 'p1',
+  p2: 'p2',
+  p3: 'p3'
+}
+
+let keys = []
+for (let key in o) {
+  if (key === 'p1') {
+    o.p4 = 'p4'
+  }
+  keys.push(key)
+}
+```
+
+## 更多资料
+
+[ECMAScript 2020: the final feature set](https://2ality.com/2019/12/ecmascript-2020.html)
diff --git "a/JavaScript/ES2021\357\274\210ES12\357\274\211.md" "b/JavaScript/ES2021\357\274\210ES12\357\274\211.md"
new file mode 100644
index 0000000..9b9b475
--- /dev/null
+++ "b/JavaScript/ES2021\357\274\210ES12\357\274\211.md"
@@ -0,0 +1,256 @@
+# ES2021（ES12）
+
+ES2021 新增了以下功能：
+
+- `String.prototype.replaceAll()`
+- `Promise.any()` 和 `AggregateError`
+- 数字分隔符（`_`）
+- 逻辑赋值运算符
+- `WeakRefs`
+
+## `String.prototype.replaceAll()`
+
+[`replaceAll()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) 替换正则表达式或字符串的所有匹配项。
+
+```js
+String.prototype.replaceAll(searchValue, replaceValue)
+```
+
+`searchValue` 可以是一个字符串或正则表达式。
+
+```js
+console.log('x'.replace('', '_')) // '_x'
+console.log('xxx'.replace(/(?:)/g, '_')) // '_x_x_x_'
+
+console.log('xxx'.replaceAll('', '_')) // '_x_x_x_'
+
+// 不带 /g 的情况下，将报错
+console.log('aaa'.replaceAll(/a/, 'x')) // TypeError: String.prototype.replaceAll called with a non-global RegExp argument
+
+console.log('aaa'.replaceAll(/a/g, 'x')) // 'xxx'
+```
+
+在匹配的子字符串之前、内部和之后插入文本：
+
+```js
+console.log('a1 a2'.replaceAll(/a/g, "($`|$&|$')")) // '(|a|1 a2)1 (a1 |a|2)2'
+```
+
+插入位置组的捕获：
+
+```js
+const regExp = /^([A-Za-z]+): (.*)$/gu
+
+'first: Jane'.replaceAll(regExp, 'KEY: $1, VALUE: $2') // 'KEY: first, VALUE: Jane'
+```
+
+- `.*` — 单个字符匹配任意次，即贪婪匹配
+- `u` — Unicode 模式
+- `g` — 全局匹配，查找所有的匹配项
+
+插入命名组的捕获：
+
+```js
+const regExp = /^(?<key>[A-Za-z]+): (?<value>.*)$/gu
+
+'first: Jane'.replaceAll(regExp, 'KEY: $<key>, VALUE: $<value>') // 'KEY: first, VALUE: Jane'
+```
+
+> 推荐：[JavaScript RegExp 对象 — 正则表达式](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20RegExp%20%E5%AF%B9%E8%B1%A1%20%E2%80%94%20%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.md)
+
+## `Promise.any()` 和 `AggregateError`
+
+[`Promise.any()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/any) 返回一个 Promise，它的解决方式取决于参数 `promises`（它指的是一个可迭代的 Promises）。
+
+- 如果第一个 Promise 完成，则使用 Promise `resolved`
+
+```js
+const promises = [
+  Promise.reject('ERROR A'),
+  Promise.reject('ERROR B'),
+  Promise.resolve('result')
+]
+
+Promise.any(promises).then(console.log) // 'result'
+```
+
+- 如果所有的 Promise 都被拒绝，将返回一个包含所有拒绝值的 [`AggregateError`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) 实例。
+
+```js
+const promises = [
+  Promise.reject('ERROR A'),
+  Promise.reject('ERROR B'),
+  Promise.reject('ERROR C')
+]
+
+Promise.any(promises).catch((aggregateError) =>
+  console.log(aggregateError.errors)
+)
+
+// ['ERROR A', 'ERROR B', 'ERROR C']
+```
+
+## 数字分隔符
+
+为了增加更大数字的可读性，从 ES2021 开始，我们可以在数字中使用下划线（`_`）作为分隔符。
+
+数字组之间的视觉分离：
+
+```js
+console.log(1_234_456_789.01) // 1234456789.01
+console.log(1_000_000_000) // 1000000000
+
+const fileSystemPermission = 0b111_111_000 // 504
+const bytes = 0b1111_10101011_11110000_00001101 // 262926349
+const words = 0xa0_b0_c0 // 10531008
+```
+
+我们还可以在分数和指数中使用分隔符：
+
+```js
+0.000_001 // 0.000001
+1e10_000 // Infinity
+
+const massOfElectronInKg = 9.109_383_56e-31 // 9.10938356e-31
+const trillionInShortScale = 1e1_2 // 1000000000000
+```
+
+分隔符的位置有两种限制：
+
+- 我们只能在两位数之间加下划线。因此，以下所有数字都是非法的：
+
+```js
+3_.141
+3._141
+
+1_e12
+1e_12
+
+_1464301
+1464301_
+
+0_b111111000
+0b_111111000
+```
+
+- 我们不能连续使用多个下划线：
+
+```js
+123__456 // 不允许
+```
+
+这些限制背后的动机是保持解析简单并避免奇怪的边缘情况。
+
+以下解析数字的函数不支持分隔符：
+
+- `Number()`
+- `parseInt()`
+- `parseFloat()`
+
+```js
+console.log(Number('123_456')) // NaN
+console.log(parseInt('123_456')) // 123
+console.log(parseFloat('123_456.123')) // 123
+```
+
+理由是数字分隔符用于代码。其他类型的输入应该以不同的方式处理。
+
+### 下划线（`_`）作为 `bigint` 文本中的分隔符
+
+`Bigint` 通常用于代表金融技术领域的货币。我们可以在 `bigint` 类型中使用下划线（`_`）作为分隔符：
+
+```js
+const massOfEarthInKg = 1_000_00n // 100000n
+```
+
+与数字一样，有两个限制：
+
+- 我们只能在两位数之间加一个下划线。
+- 我们最多可以连续使用一个下划线。
+
+## 逻辑赋值运算符
+
+`||=`、`&&=` 和 `??=`，它们都是二元运算符，增加了赋值功能。
+
+| 赋值运算符 | 相当于         | 仅当 a 是 |
+| ---------- | -------------- | --------- | --- | --- | -------- | ------- |
+| `a         |                | = b`      | `a  |     | (a = b)` | `false` |
+| `a &&= b`  | `a && (a = b)` | `true`    |
+| `a ??= b`  | `a ?? (a = b)` | `null`    |
+
+### 逻辑或赋值运算符（`||=`）
+
+对于 `||=`，如果左侧为 `false`，则评估右侧表达式并将其分配给左侧变量。
+
+```js
+let x = 0
+let y = 1
+
+console.log((x ||= y)) // 1
+console.log(x || (x = y)) // 1
+
+const updateID = (user) => {
+  if (!user.id) user.id = 1
+
+  // Or
+  user.id = user.id || 1
+
+  // 使用逻辑或赋值运算符
+  user.id ||= 1
+}
+```
+
+### 逻辑与赋值运算符（`&&=`）
+
+对于 `&&=`，如果左侧为 `true`，则评估右侧表达式并将其分配给左侧的变量。
+
+```js
+let x = 1
+let y = 2
+
+console.log((x &&= y)) // 2
+console.log(x && (x = y)) // 2
+```
+
+### 逻辑空赋值运算符（`??=`）
+
+对于 `??=`，如果左侧值为 `null` 或 `undefined`，则评估右侧表达式并将其分配给左侧的变量。
+
+```js
+console.log((x ??= y))
+console.log(x ?? (x = y))
+
+function setOpts(opts) {
+  opts.cat ??= 'meow'
+  opts.dog ??= 'bow'
+  return opts
+}
+
+setOpts({ cat: 'meow' }) // {cat: 'meow', dog: 'bow'}
+```
+
+> 推荐：[JavaScript 运算符总结](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E8%BF%90%E7%AE%97%E7%AC%A6%E6%80%BB%E7%BB%93.md)
+
+## `WeakRef` 和 `FinalizationRegistry` 对象
+
+[`WeakRef`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) 是一个帮助您创建对象的弱引用的类，因此它们可以被垃圾收集。而 [`FinalizationRegistry`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry) 对象可以让你在对象被垃圾回收时请求一个回调。
+
+```js
+let target = {}
+let wr = new WeakRef(target)
+
+// wr 和 target 是不一样的
+
+// 创建新注册表
+const registry = new FinalizationRegistry((heldValue) => {
+  // ...
+})
+
+registry.register(myObject, 'some value', myObject)
+// ...过了一段时间，如果你不再关心 myObject
+registry.unregister(myObject)
+```
+
+## 更多资料
+
+[New in ECMAScript 2021](https://exploringjs.com/impatient-js/ch_new-javascript-features.html#new-in-es2021)
diff --git "a/JavaScript/JS \344\275\234\347\224\250\345\237\237\345\222\214\344\275\234\347\224\250\345\237\237\351\223\276.md" "b/JavaScript/JS \344\275\234\347\224\250\345\237\237\345\222\214\344\275\234\347\224\250\345\237\237\351\223\276.md"
new file mode 100644
index 0000000..7ffada7
--- /dev/null
+++ "b/JavaScript/JS \344\275\234\347\224\250\345\237\237\345\222\214\344\275\234\347\224\250\345\237\237\351\223\276.md"	
@@ -0,0 +1,128 @@
+# JS 作用域和作用域链
+
+## 作用域
+
+> JavaScript 中的作用域是我们可以有效访问变量或函数的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。
+
+JavaScript 有两种类型的作用域：全局作用域、局部作用域。局部作用域又可以分为：函数作用域、块作用域（ES6）和其他更具体的作用域。
+
+### 全局作用域
+
+```js
+let age = 18
+
+function foo() {
+  // 不是嵌套函数
+  // 函数内部可以访问函数外部变量
+  return age
+}
+
+foo() // 18
+```
+
+### 函数作用域
+
+```js
+function text() {
+  var age = 18
+}
+
+// 函数外部访问不到函数内部变量
+console.log(age) // ReferenceError
+```
+
+### 块作用域
+
+```js
+{
+  let age = 18
+}
+
+// let、const 关键字声明的变量，只在其所在的代码块 {} 内有效。
+console.log(age) // error
+```
+
+## 词法作用域和动态作用域
+
+> **词法作用域**是在定义时确定的，它关注函数在何处声明。
+>
+> **动态作用域**是在运行时确定的（`this` 也是），它关注函数从何处调用（常与 `this` 挂钩）。
+
+JavaScript 采用的是词法作用域，又称静态作用域。下面我们来看看示例：
+
+```js
+var value = 1
+
+function foo() {
+  console.log(value)
+}
+
+function bar() {
+  var value = 2
+  foo()
+}
+
+bar() // 1
+```
+
+分析：
+
+如果是词法作用域，调用 `foo` 函数时，会先在其内部作用域中查找，如果找不到，往上一层查找，找到了 `value`，结果为 1。
+
+如果是动态作用域，调用 `foo` 函数时，同样会先在其内部作用域中查找，如果找不到，会到调用 `foo` 函数的作用域中查找（这里是 `bar`），结果为 2。
+
+## 作用域链
+
+一般情况下，变量取值应到创建这个变量的函数的作用域中取值。如果在当前作用域找不到，向上级作用域查找，直到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
+
+1. 每当编译器遇到变量或对象时，它都会遍历当前执行上下文的整个作用域链（Scope chain），以查找它。
+2. 如果没有在那里找到它，它遍历原型链（prototype chain），如果它也没有找到，它会抛出未定义的错误。
+3. 编译器通过查看函数在代码中的位置来创建函数的作用域。
+4. 编译器创建称为作用域链（Scope chain） 的等级层次结构，全局作用域（Global Scope） 位于此层次结构的顶部。
+5. 当代码中使用变量时，编译器会向后查看作用域链，如果找不到，则抛出未定义的错误。
+
+来看一下下面两道题：
+
+```js
+var name = 'O.O'
+
+;(function () {
+  if (typeof name == 'undefined') {
+    name = 'D.O'
+    console.log('Goodbye ' + name)
+  } else {
+    console.log('Hello ' + name)
+  }
+})()
+
+// Hello O.O
+```
+
+首先进入函数作用域当中，判断是否存在 `name` 属性，然而 JS 解析器发现在当前作用域中并没有找到 `name` 属性，接着会通过作用域链找到最外层，得到 `name` 属性，最后执行 `else` 的内容，得到 `Hello O.O`。
+
+看下面这一道：
+
+```js
+var name = 'O.O'
+
+;(function () {
+  if (typeof name == 'undefined') {
+    var name = 'D.O'
+    console.log('Goodbye ' + name)
+  } else {
+    console.log('Hello ' + name)
+  }
+})()
+
+// Goodbye O.O
+```
+
+仔细看一下，你会发现在立即执行函数中，`name` 变量前使用了 `var` 变量声明，它存在一个变量提升，`name` 属性会提升到当前作用域的最顶部，但不会提升赋值，在 `if` 语句判断时，`name` 属性暂时没有赋值的情况下为 `undefined`，所以打印 `Goodbye O.O`。
+
+## 更多资料
+
+- [JavaScript 深入之词法作用域和动态作用域](https://github.com/mqyqingfeng/Blog/issues/3)
+- [JavaScript 深入之作用域链](https://github.com/mqyqingfeng/Blog/issues/6)
+- [变量作用域，闭包](https://zh.javascript.info/closure)
+- [ES6: var, let and const — The battle between function scope and block scope](https://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/)
+- [You Don't Know JS Yet: Scope & Closures - 2nd Edition](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures)
diff --git a/JavaScript/JSDoc.md b/JavaScript/JSDoc.md
new file mode 100644
index 0000000..0a9961e
--- /dev/null
+++ b/JavaScript/JSDoc.md
@@ -0,0 +1,82 @@
+# JSDoc
+
+[JSDoc](https://jsdoc.app/) 是许多代码库中使用的一种流行的内联文档方法。
+
+编写 JSDoc 是为了增强代码的可读性，以及方便导出 API 文档。
+
+## 为什么要使用 JSDoc？
+
+JSDoc 是 DocBlock 的 JavaScript 实现，DocBlock 是一种用于各种编程语言（包括 PHP、Ruby 和 Python）的文档方法。
+
+它提供了一种一致且可识别的文档方法。还有几个工具可以根据 [JSDoc](https://github.com/jsdoc/jsdoc) 注释自动生成文档。
+
+## 将文档注释添加到您的代码
+
+JSDoc 的目的是记录您的 JavaScript 应用程序或库的 API。假设您需要为模块、命名空间、类、方法和方法参数等内容添加注释。
+
+最简单的方法是创建一个带有两个前导星号 ( `/**`) 的注释，以及对函数功能的描述。
+
+```js
+/**
+ * 将两个数字相加
+ */
+function add(num1, num2) {
+  return num1 + num2
+}
+```
+
+添加描述很简单，只需在文档注释中键入您想要的描述即可。
+
+特殊的 **JSDoc 标签**可用于提供更多信息。最常用的是 `@param`，它描述了一个函数参数，和 `@return`，它描述了返回的内容。
+
+使用 JSDoc 标签来描述您的代码：
+
+```js
+/**
+ * 将两个数字相加
+ * @param  {Number} num1 要添加的第一个数字
+ * @param  {Number} num2 要添加的第二个数字
+ * @return {Number}      总数
+ */
+function add(num1, num2) {
+  return num1 + num2
+}
+```
+
+更多标签可用于添加更多信息。有关 JSDoc 的完整标签列表，请参阅 [Block Tags](https://jsdoc.app/index.html#block-tags)。
+
+## 生成网站
+
+添加代码注释后，您可以使用 JSDoc 工具从源文件生成 HTML 网站。
+
+默认情况下，JSDoc 使用内置的**默认**模板将文档转换为 HTML。您可以编辑此模板以满足您自己的需求，或者创建一个全新的模板。
+
+在命令行上运行文档生成器：
+
+```bash
+npx jsdoc index.js
+```
+
+此命令将在当前工作目录中创建以 `/out` 命名的目录。在该目录中，您将找到生成的 HTML 页面。
+
+以上述的代码为例，生成的页面如下：
+
+![JSDoc 生成文档](https://upload-images.jianshu.io/upload_images/18281896-1490cc4c5508fda3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 最后
+
+我相信，很多开发人员都不喜欢写注释。
+
+很多开发人员都追求**代码的自我描述性**，代码的目的非常明显，不需要文档。
+
+对你来说显而易见的东西可能对阅读你代码的其他人来说并不明显。适当的添加一些注释，可以帮助他们更快、更容易地工作。
+
+好的文档不仅仅描述发生了什么，还描述了为什么要这样做。一年后，当你去看一段时间没有接触过的代码时，你会忘记这些内容。
+
+## 更多资料
+
+[Document This](https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.docthis) 是一个 VS Code 扩展，可以自动为 TypeScript 和 JavaScript 文件生成详细的 JSDoc 注释。
+
+另一个不错的 JSDoc 注释 扩展 — [Add jsdoc comments](https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments)
+
+![演示](https://github.com/Microsoft/vscode-comment/raw/master/images/addDocComments.gif)
diff --git "a/JavaScript/JavaScript BOM \350\257\246\350\247\243.md" "b/JavaScript/JavaScript BOM \350\257\246\350\247\243.md"
new file mode 100644
index 0000000..61fb86d
--- /dev/null
+++ "b/JavaScript/JavaScript BOM \350\257\246\350\247\243.md"	
@@ -0,0 +1,37 @@
+# JavaScript BOM
+
+## 什么是 BOM？
+
+**BOM**（Browser Object Model）即浏览器对象模型是一组对象，它们提供了与浏览器相关的功能，并且可以用来操作浏览器窗口以及与浏览器交互。
+
+BOM 不是标准化的，最初是 Netscape 浏览器标准的一部分，它可以根据不同的浏览器进行更改。
+
+BOM 与文档对象模型（DOM）是相互独立的，但是通常被用来一起操作网页。DOM 是一组对象，它们表示网页的结构和内容，而 BOM 则提供了对浏览器的控制。
+
+例如，可以使用 BOM 的 `window` 对象来控制浏览器窗口的大小和位置，并使用 DOM 的 `document` 对象来操作网页中的元素。
+
+## `window` 对象
+
+所有浏览器都支持 [`window`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window) 对象。它表示浏览器窗口，是 BOM 的根对象，代表整个浏览器环境。
+
+所有 JavaScript 全局对象、函数以及 `var` 声明的变量（`let` 和 `const` 除外）均自动成为 `window` 对象的成员。另外，ES6 的 `class` 不会附加到 `window` 对象上。
+
+> **注意**：在立即执行函数内，声明的函数和变量都不会附加到 `window` 对象上，但如果变量不声明，那么变量则会附加到 `window` 对象上。
+
+使用 `window` 上的属性和方法时，可以不带 `window` 调用它们。比如 `window.location.href` 可以直接写成 `location.href`。
+
+## 其他对象
+
+除了上一节所说的 `window` 对象，还有：
+
+- `location` 浏览器当前 URL 信息。
+- `navigator` 表示浏览器的信息，如浏览器名称、版本号和用户代理字符串。
+- `screen` 表示用户的屏幕信息，如分辨率和颜色深度。
+- `history` 表示浏览器的历史记录，可以用来操作浏览器的前进、后退和加载历史记录中的网页。
+
+详细可以阅读：
+
+- [Location 对象](https://github.com/lio-zero/blog/blob/main/JavaScript/Location%20%E5%AF%B9%E8%B1%A1.md)
+- [Navigator 对象](https://github.com/lio-zero/blog/blob/main/JavaScript/Navigator%20%E5%AF%B9%E8%B1%A1.md)
+- [History API](https://github.com/lio-zero/blog/blob/main/Web%20API/History%20API.md)
+- [Screen 对象](https://github.com/lio-zero/blog/blob/main/JavaScript/Screen%20%E5%AF%B9%E8%B1%A1.md)
diff --git a/JavaScript/JavaScript Eval.md b/JavaScript/JavaScript Eval.md
new file mode 100644
index 0000000..0735f24
--- /dev/null
+++ b/JavaScript/JavaScript Eval.md	
@@ -0,0 +1,44 @@
+# JavaScript Eval
+
+> 先说明。[`eval`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) 已过时，尽量不要在使用它。
+
+`eval` 执行包含代码的字符串，例如：
+
+```js
+eval('var x = "Hello eval!"')
+x // 'Hello eval!'
+```
+
+`eval` 存在几个问题：
+
+- 安全性：您的字符串可以通过第三方脚本或用户输入注入其他命令。
+- 调试：很难调试错误，您没有行号或明显的故障点。
+- 优化：JavaScript 解释器不一定能预编译代码，因为它可能会发生变化。虽然解释器的效率越来越高，但几乎可以肯定它的运行速度会比本地代码慢。
+- 性能：非常耗性能，它会执行 2 次，一次解析成 JS 语句，一次执行。
+
+不幸的是，`eval` 非常强大，但经验不足的开发人员很容易过度使用该命令。
+
+尽管有警告，但 `eval` 仍然可以工作（即使在严格模式下），但您通常可以避免它。
+
+过去，它主要用于对 `JSON` 字符串进行反序列化：
+
+```js
+const json = '{"name":"O.O","age":20}'
+
+eval('(' + json + ')') // {name: 'O.O', age: 20}
+```
+
+但现在我们有了更安全的 `JSON.parse` 方法：
+
+```js
+JSON.parse(json) // {name: 'O.O', age: 20}
+```
+
+## 更多资料
+
+更多详细内容可以查看：
+
+- [Eval：执行代码字符串](https://zh.javascript.info/eval)
+- [Why is using the JavaScript eval function a bad idea?](https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea)
+- [既然不提倡在 JavaScript 中使用 eval，为什么还要设计出来？](https://www.zhihu.com/question/545741796)
+- [Reasons Why You Should Never Use eval() in JavaScript](https://www.digitalocean.com/community/tutorials/js-eval)
diff --git a/JavaScript/JavaScript JSON.md b/JavaScript/JavaScript JSON.md
new file mode 100644
index 0000000..fab80f7
--- /dev/null
+++ b/JavaScript/JavaScript JSON.md	
@@ -0,0 +1,287 @@
+# JavaScript JSON
+
+[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)（JavaScript Object Notation）是一种轻量级的用于存储和传输数据的文本格式，2001 年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式。
+
+它具有**自我描述的**且易于理解，同时也易于机器解析和生成，并有效地提升网络传输效率。
+
+> **注意**：JSON 与任何语言无关，可以在任何编程语言中使用。
+
+## 为什么需要 JSON？
+
+在浏览器和服务器之间传输数据时，数据只能是文本。由于 JSON 格式仅为文本，因此可以轻松地与服务器之间进行传输，并且可以通过任何编程语言将其用作数据格式。
+
+## JSON 语法规则
+
+- 数据在键/值对中，并且都必须使用双引号包裹
+- 数据用逗号分隔
+- 花括号容纳对象
+- 方括号包含数组
+- 不能有尾随逗号
+
+以下是一个正确的示例：
+
+```json
+{
+  "name": "O.O",
+  "place": "China",
+  "friend": {
+    "name": "K.O"
+  },
+  "hobby": ["sing", "jump", "rap", "basketball"],
+  "number": [1, 2, 3, 4, 5, 6, 7, 8, 9]
+}
+```
+
+## JSON 的典型错误
+
+```json
+{ "surname": 'Smith' } // ❌ 值使用的是单引号（必须使用双引号）
+
+{ 'isAdmin': false } // ❌ 键使用的是单引号（必须使用双引号）
+
+{ "birthday": new Date(2000, 2, 3) } // ❌ 属性值不能使用函数和日期对象
+
+[32, 64, 128, 0xFFF] // ❌ 不能使用十六进制值
+
+{ "name": "O.O", "age": undefined } // ❌ 不能使用 undefined
+
+// ❌ 不能有尾随逗号
+{ "name": "O.O", }
+{ "hobby": ["sing", ] }
+{
+  "friend": {
+    "name": "K.O",
+  }
+}
+```
+
+> **注意**：`null`、空数组（`[]`）和空对象（`{}`）都是合法的 JSON 值。
+
+## JavaScript JSON 方法
+
+JavaScript 提供了两个方法用于处理 JSON 数据格式，如下：
+
+- `JSON.stringify` 将对象转换为 JSON。
+- `JSON.parse` 将 JSON 转换回对象。
+
+> 推荐：[格式化输出 JSON](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%A0%BC%E5%BC%8F%E5%8C%96%E8%BE%93%E5%87%BA%20JSON.md)
+
+### JSON.stringify
+
+JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。
+
+[`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 方法将 JavaScript 对象转换为字符串。
+
+```js
+let json = JSON.stringify(value[, replacer, space])
+```
+
+- `value` — 要编码的值。
+- `replacer` — 要编码的属性数组或映射函数 `function(key, value)`。
+- `space` — 用于格式化的空格数量
+
+示例：
+
+```js
+var user = {
+  name: 'O.O',
+  age: 18
+}
+
+var json = JSON.stringify(user)
+console.log(json) // "{"name": "O.O","age": 18}"
+```
+
+得到的 JSON 字符串是一个被称为 **JSON 编码（JSON-encoded）**或**序列化（serialized）**或**字符串化（stringified）** 或 **编组化（marshalled）** 的对象。
+
+请注意，JSON 编码的对象与对象字面量有几个重要的区别：
+
+- 字符串使用双引号。JSON 中没有单引号或反引号。所以 `'O.O'` 被转换为 `"O.O"`。
+- 对象属性名也是双引号的，这是强制性的。所以 `age: 18` 被转换成 `"age": 18`。
+
+`JSON.stringify` 也可以应用于原始（primitive）数据类型。
+
+JSON 值支持以下数据类型：
+
+- 引用类型的 `Object` 和 `Array`
+- 原始类型的 `string`、`number`、`boolean` 和 `null`
+
+```js
+// 数字在 JSON 还是数字
+console.log(JSON.stringify(1)) // 1
+
+// 字符串在 JSON 中还是字符串，只是被双引号扩起来
+console.log(JSON.stringify('test')) // "test"
+console.log(JSON.stringify(true)) // true
+console.log(JSON.stringify([1, 2, 3])) // [1, 2, 3]
+```
+
+JSON 是语言无关的纯数据规范，因此一些特定于 JavaScript 的对象属性会被 `JSON.stringify` 跳过。
+
+例如：
+
+- 函数/方法
+- Symbol、bigInt 类型的属性
+- 存储 `undefined` 的属性
+- 以及一些特殊的对象类型：例如 `set`、`map` 等。
+
+```js
+let user = {
+  sayHi() {
+    // 被忽略
+    console.log('Hello World')
+  },
+  [Symbol('id')]: 123, // 被忽略
+  something: undefined // 被忽略
+}
+
+console.log(JSON.stringify(user)) // {}（空对象）
+```
+
+#### `replacer` 参数
+
+大部分情况，`JSON.stringify` 仅与第一个参数一起使用。但是，如果我们需要微调替换过程，比如过滤掉循环引用，我们可以使用 `JSON.stringify` 的第二个参数。
+
+作为函数：
+
+```js
+function replacer(key, value) {
+  // 筛选出属性
+  if (typeof value === 'string') {
+    return undefined
+  }
+  return value
+}
+
+let foo = {
+  foundation: 'Mozilla',
+  model: 'box',
+  week: 45,
+  transport: 'car',
+  month: 7
+}
+
+JSON.stringify(foo, replacer)
+// '{"week":45,"month":7}'
+```
+
+作为数组：
+
+```js
+JSON.stringify(foo, ['week', 'month'])
+// '{"week":45,"month":7}', only keep "week" and "month" properties
+```
+
+#### 格式化：`space` 参数
+
+`JSON.stringify(value, replacer, spaces)` 的第三个参数是用于优化格式的空格数量。
+
+这里的 `space = 2` 告诉 JavaScript 在多行中显示嵌套的对象，对象内部缩紧 2 个空格：
+
+```json
+let user = {
+  name: "O.O",
+  age: 18,
+  address: {
+    street: 'xxx-xxx'
+  }
+}
+
+console.log(JSON.stringify(user, null, 2))
+/*
+  {
+    "name": "O.O",
+    "age": 18,
+    "address": {
+      "street": "xxx-xxx"
+    }
+  }
+*/
+```
+
+`spaces` 参数仅用于日志记录和美化输出。
+
+#### 自定义 toJSON
+
+像 `toString` 进行字符串转换，对象也可以提供 `toJSON` 方法来进行 JSON 转换。如果可用，`JSON.stringify` 会自动调用它。
+
+```js
+let user = {
+  age: 18,
+  toJSON() {
+    return this.age
+  }
+}
+
+let editor = {
+  name: 'li',
+  user
+}
+
+console.log(JSON.stringify(user)) // 18
+console.log(JSON.stringify(editor)) // {"name":"li","user":18}
+```
+
+`toJSON` 既可以用于直接调用 `JSON.stringify(user)` 也可以用于当 `user` 嵌套在另一个编码对象中。
+
+### `JSON.parse` 方法
+
+JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。
+
+[`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) 方法将数据转换为 JavaScript 对象。
+
+```js
+let value = JSON.parse(str, [reviver])
+```
+
+- `str` — 要解析的 JSON 字符串。
+- `reviver` — 可选的函数 `function(key, value)`，该函数将为每个 `(key, value)` 对调用，并可以对值进行转换。
+
+示例：
+
+```js
+JSON.parse('{}') // {}
+JSON.parse('true') // true
+JSON.parse('"foo"') // "foo"
+JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
+JSON.parse('null') // null
+```
+
+对于对象：
+
+```js
+var userData = '{ "name": "O.O", "age": 18 }'
+
+var user = JSON.parse(userData)
+
+console.log(user) // {name: "O.O", age: 18}
+```
+
+#### `reviver` 参数
+
+```js
+let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'
+
+let meetup = JSON.parse(str, function (key, value) {
+  if (key == 'date') return new Date(value)
+  return value
+})
+
+console.log(meetup.date.getDate())
+```
+
+上面代码中，将字符串对象**反序列（deserialize）**为 JavaScript 对象，使用 `JSON.parse` 的第二个参数，返回一个 Date 对象，供后面调用。
+
+## 总结
+
+- JSON 是一种数据格式，具有自己的独立标准和大多数编程语言的库。
+- JSON 支持 `object`、`array`、`string`、`number`、`boolean` 和 `null` 作为其值。
+- JavaScript 提供序列化（serialize）成 JSON 的方法 `JSON.stringify` 和解析 JSON 的方法 `JSON.parse`。
+- 这两种方法都支持用于智能读/写的转换函数。
+- 如果一个对象具有 `toJSON`，那么它会被 `JSON.stringify` 调用。
+
+## 更多资料
+
+- [What is the correct JSON content type?](https://stackoverflow.com/questions/477816/what-is-the-correct-json-content-type)
+- [JSON 方法，toJSON](https://zh.javascript.info/json#pai-chu-he-zhuan-huan-replacer)
+- [数据类型和 JSON 格式](http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html)
diff --git "a/JavaScript/JavaScript RegExp \345\257\271\350\261\241 \342\200\224 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/JavaScript/JavaScript RegExp \345\257\271\350\261\241 \342\200\224 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
new file mode 100644
index 0000000..888cb1c
--- /dev/null
+++ "b/JavaScript/JavaScript RegExp \345\257\271\350\261\241 \342\200\224 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"	
@@ -0,0 +1,413 @@
+# JavaScript RegExp 对象 — 正则表达式
+
+> [**正则表达式（Regular Expression）**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)是一组由字母和符号组成的特殊文本，它可以用来从文本中找出满足你想要的格式的句子。
+
+![regexp](https://upload-images.jianshu.io/upload_images/18281896-075994f1598bbddb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+创建正则表达式的两种方法：字面量、`RegExp` 构造函数
+
+**字面量**，以斜杠表示开始和结束：
+
+```js
+const regex = /abc/
+```
+
+`RegExp` 构造函数：
+
+```js
+const regex = new RegExp('abc')
+```
+
+`RegExp` 构造函数还可以接受第二个参数，表示修饰符：
+
+```js
+const regex = new RegExp('abc', 'i')
+```
+
+## 实例方法
+
+### test()
+
+`test()` 方法返回一个布尔值，表示当前模式是否能匹配参数字符串。
+
+```js
+;/lit/.test('I am a lit') // true
+```
+
+### exec()
+
+`exec()` 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 `null`。
+
+```js
+const str = '_x_x'
+
+/x/.exec(str) // ['x', index: 1, input: '_x_x', groups: undefined]
+/y/.exec(str) // null
+```
+
+## 实例属性
+
+- `ignoreCase` 只读属性。返回一个布尔值，表示是否设置了 `i` 修饰符。
+- `multiline` 只读属性。返回一个布尔值，表示是否设置了 `m` 修饰符。
+- `global` 只读属性。返回一个布尔值，表示是否设置了 `g` 修饰符。
+
+```js
+const reg = /abc/gim
+
+reg.ignoreCase // true
+reg.global // true
+reg.multiline // true
+```
+
+> **Tips**：这些修饰符的作用下文有做解释。
+
+`lastIndex` 可读可写。返回一个数值，表示下一次开始搜索的位置。
+
+```js
+;/(hi)?/g.lastIndex // 0
+```
+
+`source` 只读属性。返回正则表达式的字符串形式（不包括反斜杠）。
+
+```js
+;/abc/gim.source // "abc"
+```
+
+`unicode` 只读属性。属性表明正则表达式带有 `u` 修饰符。
+
+```js
+;/\u{61}/u.unicode // true
+```
+
+`sticky` ES6 新增的只读属性。表示是否设置了`y`修饰符。
+
+```js
+;/foo/y.sticky // true
+```
+
+`flags` ES6 新增。该属性返回一个字符串，由当前正则表达式对象的修饰符组成，以字典序排序（从左到右，即 `"gimuy"`）。
+
+```js
+;/foo/gi.flags / // "gi"
+  bar /
+  myu.flags.flags // "muy"
+```
+
+## 字符串的正则方法
+
+### match()
+
+`match()` 方法检索返回一个字符串匹配正则表达式的结果数组。
+
+```js
+'The fat cat sat on the mat.'.match(/a/g) // ["a", "a", "a", "a"]
+```
+
+### split()
+
+`split()` 按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。
+
+语法：
+
+```js
+str.split(separator, [limit])
+```
+
+该方法接受两个参数，第一个参数是正则表达式，表示分隔规则，第二个参数是返回数组的最大成员数。
+
+示例：
+
+```js
+'The fat cat sat on the mat.'.split(' ', 3) // ["The", "fat", "cat"]
+
+'Hello 1 word. Sentence number 2.'.split(/(\d)/) // ["Hello ", "1", " word. Sentence number ", "2", "."]
+```
+
+### replace()
+
+`replace()` 按照给定的正则表达式进行替换，返回替换后的字符串。
+
+语法：
+
+```js
+str.replace(regexp|substr, newSubStr|function)
+```
+
+示例：
+
+```js
+const str = 'Twas the night before Xmas...'
+const newstr = str.replace(/xmas/i, 'Christmas')
+
+str // "Twas the night before Xmas..."
+newstr // "Twas the night before Christmas..."
+```
+
+原字符串不会改变。
+
+### search()
+
+`search()` 按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。如果没有任何匹配，则返回 `-1`。
+
+```js
+'The fat cat sat on the mat.'.search('at') // 5
+
+'The fat cat sat on the mat.'.search('v') // -1
+```
+
+### matchAll()
+
+`matchAll()` ES2020 新增方法。该方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器（Iterator）。
+
+```js
+const str = 'test1test2'
+const reg = /t(e)(st(\d?))/g
+
+for (const match of str.matchAll(reg)) {
+  console.log(match)
+}
+// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
+// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]
+
+// 转为数组
+const array = [...str.matchAll(reg)]
+// const array = Array.from(str.matchAll(reg))
+
+array[0] // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
+array[1] // ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]
+```
+
+## 元字符
+
+| 元字符   | 描述                                                          |
+| -------- | ------------------------------------------------------------- |
+| `.`      | 匹配任意单个任何字符，除了换行符                              |
+| `[ ]`    | 字符种类。匹配方括号内的任意字符。                            |
+| `[^]`    | 否定的字符种类。匹配除了方括号里的任意字符。                  |
+| `*`      | 匹配 `>=0` 个重复的在 `*` 号之前的字符。                      |
+| `+`      | 匹配 `>=1` 个重复的 `+` 号前的字符。                          |
+| `?`      | 标记 `?` 之前的字符为可选。                                   |
+| `{n, m}` | 匹配 `num` 个大括号之前的字符或字符集 (n <= num <= m)。       |
+| `(xyz)`  | 字符集，匹配与 `xyz` 完全相等的字符串。                       |
+| `\`      | 转义字符，用于匹配一些保留的字符 `[ ] ( ) { } . \* + ? ^ $ \  |
+| `^`      | 从开始行开始匹配。                                            |
+| `$`      | 从末端开始匹配。                                              |
+
+![管道符](https://upload-images.jianshu.io/upload_images/18281896-e1ea39893d001ced.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+使用或运算符（`|`）在用 Markdown 表格上显示有问题，贴出图片。（倒数第三个元字符描述缺少 `|` 同样问题）
+
+### 分组
+
+| `(abc)`   | 捕获组               |
+| --------- | -------------------- |
+| `(?:abc)` | 匹配，但不捕获 `abc` |
+
+![(a|b)](https://upload-images.jianshu.io/upload_images/18281896-d14694efdd1fc9cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### 量词
+
+| `a*`     | 匹配 0 或更多     |
+| -------- | ----------------- |
+| `a+`     | 匹配 1 或更多     |
+| `a?`     | 匹配 0 或 1       |
+| `a{5}`   | 精确匹配 5        |
+| `a{,3}`  | 最多匹配 3 个     |
+| `a{3,}`  | 匹配 3 或更多     |
+| `a{1,3}` | 1 和 3 之间的匹配 |
+
+### 锚点
+
+| `\G`      | 匹配开始       |
+| --------- | -------------- |
+| `^`、`\A` | 字符串开头     |
+| `$`、`\Z` | 字符串结尾     |
+| `\z`      | 字符串绝对结尾 |
+| `\b`      | 单词边界       |
+| `\B`      | 非单词边界     |
+| `^abc`    | 以 `abc` 结尾  |
+| `abc$`    | 以 `abc` 开头  |
+
+### 转义字符
+
+上面所提到的有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。比如要匹配 `+`，就要写成 `\+`。
+
+| `\. \* \\` | 正则表达式使用的转义特殊字符 |
+| ---------- | ---------------------------- |
+| `\t`       | Tab 制表键                   |
+| `\n`       | 换行符                       |
+| `\r`       | 回车                         |
+
+```js
+;/1+1/
+  .test('1+1')(
+    // false
+
+    /1\+1/
+  )
+  .test('1+1') // true
+```
+
+如果使用 `RegExp` 方法生成正则对象，转义需要使用两个斜杠，因为字符串内部会先转义一次。
+
+```js
+const reg = new RegExp('1+1')
+reg.test('1+1') // false
+
+const reg1 = new RegExp('1\\+1')
+reg1.test('1+1') // true
+```
+
+### 字符集
+
+字符集也叫做字符类。方括号 `[]` 用来指定一个字符集。 在方括号中使用连字符来指定字符集的范围。 在方括号中的字符集不关心顺序。
+
+| `[abc]`       | `a`、`b` 或 `c` 中的任何一种        |
+| ------------- | ----------------------------------- |
+| `[a-z]`       | 介于和 `a` 和 `z` 之间的字符        |
+| `[1-9]`       | 介于和 `1` 和 `9` 之间的数字        |
+| `[[:print:]]` | 包括空格在内的任何可打印字符        |
+| `[^abc]`      | 除了 `a`、`b` 或 `c` 以外的任何字符 |
+
+## 简写字符集
+
+| `.`  | 除换行符外的所有字符                                                     |
+| ---- | ------------------------------------------------------------------------ |
+| `\w` | 文字（字母、数字、下划线）。相当于 `[A-Za-z0-9_]`                        |
+| `\d` | 数字。相当于 `[0-9]`                                                     |
+| `\s` | 空白（任何空白字符，包括空格、制表符、换页符等）。相当于 `[ \f\n\r\t\v]` |
+| `\W` | 非文字                                                                   |
+| `\D` | 非数字                                                                   |
+| `\S` | 非空白                                                                   |
+| `\f` | 匹配一个换页符                                                           |
+| `\n` | 匹配一个换行符                                                           |
+| `\r` | 匹配一个回车符                                                           |
+| `\t` | 匹配一个制表符                                                           |
+| `\v` | 匹配一个垂直制表符                                                       |
+| `\p` | 匹配 CR/LF（等同于 `\r\n`），用来匹配 DOS 行终止符                       |
+
+## 标志
+
+标志也叫模式修饰符，用来修改表达式的搜索结果，它们可以任意组合。
+
+| 修饰符 | 描述                                                                                             |
+| :----- | :----------------------------------------------------------------------------------------------- |
+| `i`    | 忽略大小写。                                                                                     |
+| `g`    | 全局匹配（查找所有匹配而非在找到第一个匹配后停止）。                                             |
+| `m`    | 多行匹配：锚点元字符 `^` `$` 工作范围在每行的起始。                                              |
+| `u`    | Unicode 模式                                                                                     |
+| `y`    | 粘连（sticky），与 `g` 修饰符类似，也是全局匹配。`y` 修饰符确保匹配必须从剩余的第一个位置开始    |
+| `s`    | ES2018 引入 `s` 修饰符，使得 `.` 可以匹配任意单个字符。 `dotAll` 模式。即点（dot）代表一切字符。 |
+
+### 忽略大小写 (Case Insensitive)
+
+修饰语 `i` 用于忽略大小写。
+
+```js
+'The fat cat sat on the mat.'.match(/The/gi) // ['The', 'the']
+```
+
+### 全局搜索 (Global search)
+
+修饰符 `g` 常用于执行一个全局搜索匹配，即（不仅仅返回第一个匹配的，而是返回全部）。
+
+```js
+'The fat cat sat on the mat.'.match(/.(at)/g) // ['fat', 'cat', 'sat', 'mat']
+```
+
+### 多行修饰符 (Multiline)
+
+多行修饰符 `m` 常用于执行一个多行匹配。
+
+像之前介绍的 `(^,$)` 用于检查格式是否是在待检测字符串的开头或结尾。但我们如果想要它在每行的开头和结尾生效，我们需要用到多行修饰符 `m`。
+
+```js
+'The fat cat sat on the mat.'.match(/.at(.)?$/gm) // ['mat.']
+```
+
+## 零宽度断言（前后预查）
+
+先行断言和后发断言都属于**非捕获簇**（不捕获文本 ，也不针对组合计进行计数）。 先行断言用于判断所匹配的格式是否在另一个确定的格式之前，匹配结果不包含该确定格式（仅作为约束）。
+
+例如，我们想要获得所有跟在 `$` 符号后的数字，我们可以使用正后发断言 `(?<=\$)[0-9\.]*`。 这个表达式匹配 `$` 开头，之后跟着 `0,1,2,3,4,5,6,7,8,9,.` 这些字符可以出现大于等于 0 次。
+
+```js
+'$'.match(/(?<=\$)[0-9\.]*/) // ['', index: 1, input: '$', groups: undefined]
+'$1'.match(/(?<=\$)[0-9\.]*/) // ['1', index: 1, input: '$1', groups: undefined]
+```
+
+| 符号  | 描述            |
+| ----- | --------------- |
+| `?=`  | 正先行断言-存在 |
+| `?!`  | 负先行断言-排除 |
+| `?<=` | 正后发断言-存在 |
+| `?<!` | 负后发断言-排除 |
+
+### `?=` 正先行断言
+
+`?=` 正先行断言，表示第一部分表达式之后必须跟着 `?=...`定义的表达式。
+
+返回结果只包含满足匹配条件的第一部分表达式。 定义一个正先行断言要使用 `()`。在括号内部使用一个问号和等号： `(?=...)`。
+
+正先行断言的内容写在括号中的等号后面。
+
+```js
+'The fat cat sat on the mat.'.match(/(T|t)he(?=\sfat)/) // ['The', 'T', index: 0, input: 'The fat cat sat on the mat.', groups: undefined]
+'The fat cat sat on the mat.'.match(/(T|t)he(?=\sfat)/) // ['The', 'T', index: 0, input: 'The fat cat sat on the mat.', groups: undefined]
+```
+
+### `?!` 负先行断言
+
+`?!` 负先行断言，用于筛选所有匹配结果，筛选条件为 其后不跟随着断言中定义的格式。 正先行断言定义和负先行断言一样，区别就是 `=` 替换成 `!` 也就是 `(?!...)`。
+
+```js
+;/(T|t)he(?!\sfat)/.exec('The fat cat sat on the mat.') // ['the', 't', index: 19, input: 'The fat cat sat on the mat.', groups: undefined]
+```
+
+### `?<=` 正后发断言
+
+`?<=` 正后发断言，用于筛选所有匹配结果，筛选条件为 其前跟随着断言中定义的格式。
+
+```js
+;/(?<=(T|t)he\s)(fat|mat)/.exec('The fat cat sat on the mat.') // ['fat', 'T', 'fat', index: 4, input: 'The fat cat sat on the mat.', groups: undefined]
+```
+
+### `?<!` 负后发断言
+
+`?<!` 负后发断言，用于筛选所有匹配结果，筛选条件为 其前不跟随着断言中定义的格式。
+
+```js
+;/(?<!(T|t)he\s)(cat)/.exec('The fat cat sat on the mat.') // ['cat', undefined, 'cat', index: 8, input: 'The fat cat sat on the mat.', groups: undefined]
+```
+
+## 贪婪匹配与惰性匹配（Greedy vs lazy matching）
+
+正则表达式默认采用贪婪匹配模式，在该模式下意味着会匹配尽可能长的子串。我们可以使用 `?` 将贪婪匹配模式转化为惰性匹配模式。
+
+- `*?`：表示某个模式出现 0 次或多次，匹配时采用非贪婪模式。
+- `+?`：表示某个模式出现 1 次或多次，匹配时采用非贪婪模式。
+
+```js
+'The fat cat sat on the mat.'.match(/(.*at)/) // ['The fat cat sat on the mat', 'The fat cat sat on the mat', index: 0, input: 'The fat cat sat on the mat.', groups: undefined]
+
+'The fat cat sat on the mat.'.match(/(.*?at)/) // ['The fat', 'The fat', index: 0, input: 'The fat cat sat on the mat.', groups: undefined]
+```
+
+## 更多资料
+
+- [xregexp](https://github.com/slevithan/xregexp) 扩展的 JavaScript 正则表达式
+- [learn-regex](https://github.com/ziishaned/learn-regex)
+- [regexr](https://regexr.com/) RegExr 是基于 HTML/JS 的工具，用于创建，测试和学习正则表达式。
+- [RegExper](https://regexper.com/) 可以将正则表达式转成解释图片。
+- [RegExLib](https://regexlib.com/) 收集各种常用的正则表达式，比如搜索 "email"，会返回该站点收集的所有关于 📪 正则表达式。
+- [RegexBuddy](https://www.regexbuddy.com/)
+- [RegexMagic](https://www.regexmagic.com/)
+- [Rubular](https://rubular.com/)
+- [OWASP Validation Regex Repository](https://owasp.org/www-community/OWASP_Validation_Regex_Repository)
+- [CyrilEx Regex Tester](https://extendsclass.com/regex-tester.html)
+- [一份 PDF 备忘单（英文）](https://appletree.or.kr/quick_reference_cards/Regular_Expressions/regex-cheatsheet.pdf)
+- [The Complete Guide to Regular Expressions (Regex)](https://dev.to/coderpad/the-complete-guide-to-regular-expressions-regex-1m6)
+- [Regex Cheat Sheet](https://dev.to/emmabostian/regex-cheat-sheet-2j2a)
+- [iHateRegex](https://ihateregex.io/)
+- [JS 正则表达式完整教程（略长）](https://juejin.cn/post/6844903487155732494)
+- [正则表达式不要背](https://juejin.cn/post/6844903845227659271)
diff --git "a/JavaScript/JavaScript V8 \345\274\225\346\223\216.md" "b/JavaScript/JavaScript V8 \345\274\225\346\223\216.md"
new file mode 100644
index 0000000..73e4ddd
--- /dev/null
+++ "b/JavaScript/JavaScript V8 \345\274\225\346\223\216.md"	
@@ -0,0 +1,55 @@
+# JavaScript V8 引擎
+
+[V8](https://github.com/v8/v8) 是支持 Google Chrome 的 JavaScript 引擎的名称。它使用我们的 JavaScript，并在使用 Chrome 浏览器浏览时执行它的东西。
+
+V8 提供了 JavaScript 执行的运行时环境。DOM 和其他 Web 平台 API 由浏览器提供。
+
+很酷的一点是 JavaScript 引擎是独立于它所在的浏览器的。这个关键特性促成了 Node.js 的兴起。早在 2009 年，V8 就被选为支持 Node.js 的引擎，随着 Node.js 的流行，V8 成为了现在支持大量 JavaScript 编写的服务器端代码的引擎。
+
+Node.js 生态系统非常庞大，多亏了它，V8 也支持桌面应用程序，比如 Electron 等项目。
+
+## 其他 JS 引擎
+
+其他浏览器都有自己的 JavaScript 引擎:
+
+- Firefox 有 SpiderMonkey
+- Safari 有 JavaScriptCore（也称为 Nitro）
+- Edge 有 Chakra
+- 还有很多其他的
+
+你可以在我的另一篇文章[浏览器内核](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8.md)。
+
+所有这些引擎都实现了 ECMA ES-262 标准，也称为 ECMAScript，这是 JavaScript 使用的标准。
+
+## 对性能的追求
+
+V8 是用 C++ 编写的，并且还在不断改进。它是可移植的，可以在 Mac、Windows、Linux 和其他一些系统上运行。
+
+在本文 V8 的介绍中，我将忽略 V8 的实现细节：它们可以在更权威的网站上找到（例如 V8 的官网），并且它们会随着时间的推移而变化，而且通常会发生根本性的变化。
+
+与其他 JavaScript 引擎一样，V8 总是在不断发展，以加快 Web 和 Node.js 生态系统。
+
+在 Web 上，多年来一直存在着一场性能竞赛，我们（作为用户和开发人员）从这场竞争中受益良多，因为我们年复一年地获得更快和更优化的机器。
+
+## 汇编
+
+JavaScript 通常被认为是一种解释型语言，但现代 JavaScript 引擎不再只是解释 JavaScript，而是编译它。
+
+自从 2009 年 SpiderMonkey JavaScript 编译器被添加到 Firefox 3.5 之后，每个人都遵循这个想法。
+
+JavaScript 由 V8 内部编译，采用即时编译（JIT）来加快执行速度。
+
+这看起来似乎有悖直觉，但自从 2004 年引入谷歌地图以来，JavaScript 已经从一种通常执行几十行代码的语言发展为在浏览器中运行数千到数十万行代码的完整应用程序。
+
+我们的应用程序现在可以在浏览器中运行数小时，而不仅仅是一些表单验证规则或简单的脚本。
+
+编译 JavaScript 非常有意义，因为尽管准备好 JavaScript 可能需要更多的时间，但一旦完成，它的性能将比纯解释代码的性能好得多。
+
+## 更多资料
+
+- [Vyacheslav Egorov](https://mrale.ph/) 是一名 V8 引擎工程师，你可以关注它的博客。
+- [V8 blog](http://v8project.blogspot.com/)
+- [V8 是怎么跑起来的 —— V8 的 JavaScript 执行管道](https://juejin.cn/post/6844903990073753613)
+- [V8 编译浅谈](https://juejin.cn/post/7041021350114230285)
+- [认识 V8 引擎](https://zhuanlan.zhihu.com/p/27628685)
+- [How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e)
diff --git "a/JavaScript/JavaScript \344\270\245\346\240\274\346\250\241\345\274\217\357\274\210'use-strict'\357\274\211.md" "b/JavaScript/JavaScript \344\270\245\346\240\274\346\250\241\345\274\217\357\274\210'use-strict'\357\274\211.md"
new file mode 100644
index 0000000..6ebecd0
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\245\346\240\274\346\250\241\345\274\217\357\274\210'use-strict'\357\274\211.md"	
@@ -0,0 +1,150 @@
+# JavaScript 严格模式（'use-strict'）
+
+[严格模式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)（`'use strict'`）是 ES5 中的一个新特性，它允许您将程序或函数置于“严格”操作上下文中。这种严格的上下文阻止执行某些操作，并引发更多异常。
+
+您可以对整个文件应用“严格模式”。或者，将其用于特定函数：
+
+```js
+'use strict'
+
+// Non-strict code...
+;(function () {
+  'use strict'
+
+  // Define your library strictly...
+})()
+
+// Non-strict code...
+```
+
+> **Tips**：ES6 的原生模块（`import` 和 `export`）和类（`class`）默认启动严格模式。
+
+## 设立 "严格模式" 的目的
+
+严格模式有以下几种帮助：
+
+- 消除 JavaScript 语法的一些不合理、不严谨之处，减少一些怪异行为。
+- 当采取相对“不安全”的操作（例如访问全局对象）时，它可以防止或引发错误。
+- 提高编译器效率，增加运行速度。
+- 它捕获一些常见的编码错误，通过**抛出异常**来消除了一些原有**静默错误**。
+- 它会禁用令人困惑或考虑不周的功能，包括在 ECMAScript 的未来版本中可能会定义的一些语法。
+
+严格模式主要删除了 ES3 中可能的功能，并且自 ES5 以来已被弃用（但由于向后兼容性要求而未被删除）
+
+IE6-9 不支持严格模式，详细的支持情况如下：
+
+![严格模式](https://upload-images.jianshu.io/upload_images/18281896-182e8f905fe2a70c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 严格模式主要有以下限制
+
+- 变量必须声明后再使用
+
+```js
+'use strict'
+x = 1 // Error（x 未定义）
+```
+
+在函数内部声明是局部作用域（只在函数内使用严格模式）
+
+```js
+x = 1
+
+func()
+function func() {
+  'use strict'
+  y = 2 // Error
+}
+```
+
+- 函数的参数不能有同名属性，否则报错
+
+```js
+'use strict'
+function func(x, x) {} // Error
+```
+
+- 在带有默认参数的函数中不允许使用**严格模式**
+
+```js
+function func(a = 1, b = 2) {
+  'use strict'
+  return a + b
+} // SyntaxError
+```
+
+- 不能使用 `with` 语句
+
+```js
+'use strict'
+with (Math) {
+  x = cos(2)
+} // SyntaxError
+```
+
+- 不能对只读属性赋值，否则报错
+
+```js
+'use strict'
+let obj = {}
+Object.defineProperty(obj, 'x', {
+  value: 0,
+  writable: false
+})
+
+obj.x = 1 // TypeError
+```
+
+- 不能使用前缀 0 表示八进制数，否则报错
+
+```js
+'use strict'
+var x = 010 // SyntaxError
+
+// 它有时会令人混淆
+
+// 但您仍然可以使用以下 0oXX 语法在严格模式下启用八进制数：
+0o10
+```
+
+- 不能删除不可删除的属性，否则报错
+
+```js
+'use strict'
+
+delete Object.prototype // TypeError
+```
+
+- 不能删除变量 delete prop，会报错，只能删除属性 `delete global[prop]`
+
+```js
+'use strict'
+
+let obj = {
+  name: 'lio'
+}
+
+delete obj // SyntaxError
+delete obj[name] // √
+```
+
+- 由于一些安全原因，在作用域 `eval()` 创建的变量不能被调用
+
+```js
+'use strict'
+
+eval('var x = 2')
+console.log(x) // ReferenceError
+```
+
+其他：
+
+- `eval` 和 `arguments` 不能被重新赋值
+- `arguments` 不会自动反映函数参数的变化
+- 不能使用 `arguments.callee` 和 `arguments.caller`
+- 禁止 `this` 指向全局对象
+- 不能使用 `fn.caller` 和 `fn.arguments` 获取函数调用的堆栈
+- 增加了保留字（比如 `protected`、`static` 和 `interface` 等）
+
+## 更多资料
+
+[What does "use strict" do in JavaScript, and what is the reasoning behind it?](https://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it)
diff --git "a/JavaScript/JavaScript \344\270\255\345\223\215\345\272\224\345\233\276\345\203\217\347\232\204\346\234\200\345\244\247\345\256\275\345\272\246\345\222\214\351\253\230\345\272\246.md" "b/JavaScript/JavaScript \344\270\255\345\223\215\345\272\224\345\233\276\345\203\217\347\232\204\346\234\200\345\244\247\345\256\275\345\272\246\345\222\214\351\253\230\345\272\246.md"
new file mode 100644
index 0000000..9b7217a
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\345\223\215\345\272\224\345\233\276\345\203\217\347\232\204\346\234\200\345\244\247\345\256\275\345\272\246\345\222\214\351\253\230\345\272\246.md"	
@@ -0,0 +1,46 @@
+# JavaScript 中响应图像的最大宽度和高度
+
+当我们操作砌体布局时，经常需要获取图像的当前宽度和高度，现代浏览器为我们提供了两个属性来方便的获取这些值。
+
+现代浏览器（包括 IE9）为 `<img>` 元素提供 `naturalWidth` 和 `naturalHeight` 属性。这些属性包含图像的实际、未修改的宽度和高度。
+
+```js
+const maxWidth = document.getElementById('img').naturalWidth
+const maxHeight = document.getElementById('img').naturalHeight
+```
+
+`naturalWidth` 和 `naturalHeight` 提供给我们图像的像素值，以下是这两个属性的支持情况：
+
+![naturalWidth 和 naturalHeight 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-1250e8e4c0984d79.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+它们支持几乎所有主流的浏览器。
+
+IE8 或更低版本不支持 `naturalWidth` 和 `naturalHeight` 属性。
+
+如果你需要支持例如 IE8 以下的浏览器，你可以试着创建一个 `image` 对象，来增加对旧浏览器的支持。
+
+```js
+// 例如：获取图像的 max-width:100%; 以像素为单位
+function getMaxWidth(img) {
+  let maxWidth
+
+  // 检查是否支持 naturalWidth
+  if (img.naturalWidth !== undefined) {
+    maxWidth = img.naturalWidth
+    // 不支持，创建回退解决方案
+  } else {
+    const image = new Image()
+    image.src = img.src
+    maxWidth = image.width
+  }
+
+  // 返回 max-width
+  return maxWidth
+}
+```
+
+**注意**：你应该确保图像必须已加载完成，然后再检查宽度，以确保图像有尺寸：
+
+```js
+const hasDimensions = (img) => !!((img.complete && typeof img.naturalWidth !== 'undefined') || img.width)
+```
diff --git "a/JavaScript/JavaScript \344\270\255\345\256\232\344\271\211\345\207\275\346\225\260\347\232\204\346\226\271\346\263\225.md" "b/JavaScript/JavaScript \344\270\255\345\256\232\344\271\211\345\207\275\346\225\260\347\232\204\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..ebb993f
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\345\256\232\344\271\211\345\207\275\346\225\260\347\232\204\346\226\271\346\263\225.md"	
@@ -0,0 +1,249 @@
+# JavaScript 中定义函数的方法
+
+通常，函数是一系列指令或“子程序”，可由该函数外部（或内部）的代码调用。本质上，函数“封装”了一个特定的任务。
+
+函数是 JavaScript 的基本构建块之一，真正理解函数有助于解决 JavaScript 的一些奇怪的行为。
+
+以下是函数可视化图（来自...忘了，找找）：
+
+![JS 函数可视图](https://upload-images.jianshu.io/upload_images/18281896-fe7fd7cf900b314d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## JavaScript 中的函数
+
+需要注意的是，JavaScript 中的函数是一等对象。这基本上意味着 JavaScript 中的函数可以像对待任何其他 JavaScript 对象一样对待，可以作为其他变量引用或作为参数传递给函数。
+
+函数甚至可以具有属性和其他方法，就像任何其他 JavaScript 对象一样。函数和其他对象之间的关键区别在于可以调用函数。
+
+JavaScript 中的每个函数都是一个 `Function` 对象。尝试在控制台执行：
+
+```js
+function typeCheck() {}
+
+typeCheck instanceof Function // true
+```
+
+`Function` 对象有一些特定的方法和属性，如 `apply`、`call`、`bind` 和 `isGenerator` 等，这些方法和属性在其他对象中是不可用的。
+
+有几种不同的方式可以在 JavaScript 中定义函数，定义函数的方式会影响函数行为。
+
+### 函数声明
+
+这可能是定义函数最常见的方法。函数声明包含一个名称，前面是强制 `function` 关键字，后面是所需括号 `()` 内的可选参数列表。
+
+```js
+function sum(param1, param2) {
+  return param1 + param2
+}
+```
+
+**关于这种形式的函数定义，有两点需要注意**：
+
+- 保存函数对象的变量在当前作用域中创建，其标识符与提供的函数名相同 —— 在我们的示例中为 `sum`。
+- 变量被**提升**到当前作用域的顶部。
+
+为了更好地理解提升，让我们看一个例子：
+
+```js
+sayHi() // 'Hi'
+
+function sayHi() {
+  return 'Hi'
+}
+```
+
+我们能够在定义之前调用 `sayHi` 函数。
+
+还有一点：在非严格模式下，函数允许我们使用重复的命名参数。
+
+```js
+function double(x, x) {
+  return x + x
+}
+
+double(3, 2) // 4
+double(3, 5) // 10
+```
+
+在严格模式下：
+
+```js
+'use strict'
+function double(x, x) {}
+
+// ERROR: Duplicate parameter name not allowed
+```
+
+### 函数表达式
+
+函数表达式在语法上与函数声明非常相似。主要区别在于函数表达式不需要函数名。
+
+```js
+let sum = function (param1, param2) {
+  return param1 + param2
+}
+```
+
+函数表达式是另一个语句的一部分。在上面的例子中，函数表达式是 `sum` 变量赋值的一部分。
+
+与函数声明不同，函数表达式不会被提升。
+
+```js
+sayHi() // Uncaught ReferenceError: sayHi is not defined
+
+let sayHi = function () {
+  return 'Hi'
+}
+```
+
+函数表达式的一个有趣用例是它们能够创建 IIFE（立即执行函数表达式）。在某些情况下，我们可能想要定义一个函数并在定义后立即调用它，但不会再次调用。
+
+当然，它可以通过函数声明来完成，但是为了使它更具可读性，并确保我们的程序不会意外地访问它，我们使用了 IIFE。考虑这个例子：
+
+```js
+function callImmediately(foo) {
+  console.log(foo)
+}
+```
+
+我们创建了一个名为 `callImmediately` 的函数，它接受一个参数并打印它，然后我们立即调用它。通过这样做可以获得相同的结果：
+
+```js
+;(function (foo) {
+  console.log(foo)
+})('foo') // 'foo'
+```
+
+关键的区别在于，在第一种情况下，函数声明会污染全局命名空间，并且命名函数 `callImmediately` 需要它之后很长时间就挂起了。IIFE 是匿名的，因此将来无法调用。
+
+> 推荐：[JavaScript 立即执行函数表达式（IIFE）](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%88IIFE%EF%BC%89.md)
+
+### 箭头函数
+
+箭头函数是 ES6 的一个补充，是函数表达式的语法紧凑的替代品。箭头函数是使用一对包含参数列表的圆括号定义的，后跟一个 `=>` 和带有大括号 `{}` 的函数语句。
+
+```js
+let sum = (param1, param2) => {
+  return param1 + param2
+}
+```
+
+由于箭头函数主要目的是语法紧凑性，如果箭头函数中唯一的语句是 `return`，我们可以删除大括号和 `return` 关键字，如下所示：
+
+```js
+let sum = (param1, param2) => param1 + param2
+```
+
+它使代码更具可读性。
+
+此外，如果我们只有一个参数传递给箭头函数，则可以消除括号：
+
+```js
+let double = param1 => param1 * 2
+```
+
+**关于这种形式的函数定义，有几点需要注意**：
+
+- 箭头函数没有自己的 `this`，它使用封闭词法作用域的 `this` 值。
+
+```js
+let user = {
+  name: 'O.O',
+  getUserNameArrow: () => {
+    console.log(this.name)
+  },
+  getUserNameExpression: function () {
+    console.log(this.name)
+  }
+}
+user.getUserNameArrow() // ''
+user.getUserNameExpression() // O.O
+```
+
+在上面的示例中，我们有一个箭头函数和一个函数表达式，它使用 `this` 函数打印 `user.name`。
+
+- 箭头函数没有 `prototype` 属性。
+
+```js
+let foo = () => {}
+console.log(foo.prototype) // 'undefined'
+```
+
+- 箭头函数中没有自己的 `arguments` 对象。在箭头函数中访问 `arguments` 对象实际上是获取的是外部函数执行环境中的值。
+
+```js
+function add(a, b) {
+  console.log('outer', ...arguments)
+  return (argument) => {
+    console.log('inner', ...arguments)
+  }
+}
+add(1, 2)()
+// outer 1 2
+// inner 1 2
+```
+
+- `call`、`apply` 和 `bind` 不会影响箭头函数 `this` 值。
+
+```js
+const a = () => {
+  console.log(this)
+}
+
+const b = function () {
+  console.log(this)
+}
+
+const user = { name: 'O.O' }
+
+a.call(user) // window { ... }
+b.call(user) // {name: 'O.O'}
+```
+
+- 箭头函数不能当作 `Generator` 函数，不能使用 `yield` 关键字。
+- 箭头函数不能使用 `new` 关键字，箭头函数没有 `prototype`、没有自己的 `this` 指向、不可以使用 `arguments`，自然不可以 `new`。
+- 箭头函数中的不同参数不能使用相同的名称，无论启用严格模式还是非严格模式。
+
+### `Function` 构造函数
+
+前面说过，JavaScript 中的每个函数都是 `Function` 对象，因此要定义函数，我们还可以直接调用 `Function` 对象的构造函数。
+
+```js
+let sum = new Function('param1', 'param2', 'return param1 + param2')
+```
+
+参数以逗号分隔字符串 `'param1', 'param2', ..., 'paramN'` 的列表形式传递，最后一个参数是以字符串形式传递的函数体。
+
+就性能而言，这种定义函数的方法不如函数声明或函数表达式有效。每次调用构造函数时，都会解析使用 `Function` 构造函数定义的函数，因为每次都需要解析函数体字符串，而其他函数体字符串则与其余代码一起解析。
+
+以这种方式定义函数的一个用例是访问 Node 中的 `global` 对象或浏览器中的 `window` 对象。这些函数始终在全局作用域中创建，并且无权访问当前作用域。
+
+### Generator 函数
+
+`Generator` 是 ES6 的补充，译为**生成器**。生成器是一种特殊类型的函数，与传统函数不同，生成器在每个请求的基础上生成多个值，同时在这些请求之间暂停执行。
+
+```js
+function* idMaker() {
+  let index = 0
+  while (true) yield index++
+}
+
+let gen = idMaker()
+
+console.log(gen.next().value) // 0
+console.log(gen.next().value) // 1
+console.log(gen.next().value) // 2
+```
+
+`function*` 和 `yield` 关键字对于生成器是唯一的。生成器是通过在函数关键字末尾添加 `*` 来定义的。这使我们能够在生成器主体中使用 `yield` 关键字来根据请求生成值。
+
+## 结论
+
+选择使用哪种定义类型取决于情况和您要实现的目标。记住的几个基本要点：
+
+- 如果您想利用函数提升，请使用函数声明。例如，为了清晰起见，您希望将函数实现细节移到底部，而只将抽象流程移到顶部。
+- 箭头函数非常适合于短回调函数，更重要的是，当需要的 `this` 是封闭函数时。
+- 避免使用 `Function` 构造函数来定义函数。如果烦人的语法还不足以让您远离，那么它会非常慢，因为每次调用该函数时都会对其进行解析。
+
+## 更多资料
+
+关于函数内部 this 的区别，可以阅读 [JavaScript 中的 “this” 关键字](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%20%E2%80%9Cthis%E2%80%9D%20%E5%85%B3%E9%94%AE%E5%AD%97.md)
diff --git "a/JavaScript/JavaScript \344\270\255\345\276\252\347\216\257\344\271\213\351\227\264\347\232\204\345\267\256\345\274\202.md" "b/JavaScript/JavaScript \344\270\255\345\276\252\347\216\257\344\271\213\351\227\264\347\232\204\345\267\256\345\274\202.md"
new file mode 100644
index 0000000..978b6a7
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\345\276\252\347\216\257\344\271\213\351\227\264\347\232\204\345\267\256\345\274\202.md"	
@@ -0,0 +1,153 @@
+# JavaScript 中循环之间的差异
+
+在 JavaScript 中使用循环时，需要正确定义两个关键内容：可枚举属性（`enumerable properties`）和可迭代对象（`iterable objects`）。
+
+## 可枚举的属性
+
+可枚举对象的一个定义特征是，当我们通过赋值运算符将属性赋值给对象时，我们将内部可枚举标志（`enumerable`）设置为 `true`。这是默认值。
+
+但是，我们可以通过将其设置为 `false` 来更改此行为。
+
+经验法则是，可枚举属性总是出现在 `for...in` 循环中。
+
+让我们看看这一点：
+
+```js
+const users = {}
+users.languages = 'JavaScript'
+
+Object.getOwnPropertyDescriptor(users, 'languages')
+// output -> { value: 'JavaScript', writable: true, enumerable: true, configurable: true }
+
+// 在循环中对我们使用的属性进行更多的控制
+Object.defineProperty(users, 'role', {
+  value: 'Admin',
+  writable: true,
+  enumerable: false
+})
+// {languages: 'JavaScript', role: 'Admin'}
+
+for (const item in users) {
+  console.log(item) // languages
+}
+```
+
+可以看到，我们为 `users` 变量添加了一个 `languages` 属性，使用 `Object.getOwnPropertyDescriptor` 方法输出 `languages` 属性描述符的 `enumerable` 属性为 `true`。
+
+使用 `Object.defineProperty` 为添加 `role` 属性，并将 `enumerable` 设置为 `false`，在 `for...in` 循环中并没有输出 `role` 属性。即 `for...in` 循环中的属性为可枚举属性。
+
+### 可迭代对象
+
+如果一个对象定义了它的迭代行为，那么它是可迭代的。在本例中，将在 `for...of` 构造中循环的值将定义其迭代行为。可迭代的内置类型包括 `Array`、`String`、`Set` 和 `Map`，而 `Object` 不可迭代，因为它没有指定 `@iterator` 方法。
+
+> 推荐：阮一峰老师的 [Iterator 和 for...of 循环](https://es6.ruanyifeng.com/#docs/iterator)，也可以看看冴羽的 [ES6 系列之迭代器与 for of](https://github.com/mqyqingfeng/Blog/issues/90)。
+
+基本上，在 JavaScript 中，**所有可迭代对象都是可枚举对象，但并非所有可枚举对象都是可迭代对象**。
+
+这里有一种概念化的方法：`for...in` 查找数据中的对象，而 `for...of` 查找重复序列。
+
+让我们看看这一切在与 `Array` 数据类型一起使用时的效果：
+
+```js
+const languages = ['JavaScript', 'Python', 'Go']
+
+// 与 for...in 循环一起使用
+for (const language in languages) {
+  console.log(language)
+}
+// output：
+// 0
+// 1
+// 2
+
+// 与 for...of 循环一起使用
+for (const language of languages) {
+  console.log(author)
+}
+// output：
+// JavaScript
+// Python
+// Go
+```
+
+在使用这种构造时，需要牢记的一点是，如果调用了 `typeof`，并且输出为 `object`，那么您可以使用 `for...in` 循环。
+
+让我们看看这个对 `languages` 变量的操作：
+
+```js
+typeof languages // "object" -> 因此我们可以在中使用 for
+```
+
+乍一看，这可能令人惊讶，但需要注意的是，数组是一种特殊类型的对象，以索引为键。知道 `for...in` 将在构造中查找对象可以极大地帮助我们。当 `for...in` 循环找到一个对象时，它将在每个键上循环。
+
+我们可以将 `for...in` 循环在 `languages` 数组上的方式可视化如下：
+
+```js
+const languages = {
+  0: 'JavaScript',
+  1: 'Python',
+  2: 'Go'
+}
+```
+
+**注意**：如果它可以被追踪到一个对象（或者从对象原型链继承它），`for...in` 将以没有特定顺序遍历键。
+
+同时，如果它实现了一个迭代器 `for...of` 构造，它将在每次迭代中循环遍历该值。
+
+## `forEach` 和 `map` 方法
+
+虽然 `forEach` 和 `map` 方法可以用来实现相同的目标，但它们的行为和性能特性有所不同。
+
+当函数被调用时，它们都会接收一个回调作为参数。
+
+考虑以下片段：
+
+```js
+const scoresEach = [2, 4, 8, 16, 32]
+const scoresMap = [2, 4, 8, 16, 32]
+const square = (num) => num * num
+```
+
+让我们详细介绍一下它们在操作上的一些差异。
+
+`forEach` 返回 `undefined`，而 `map` 返回一个新的 `array`：
+
+```js
+let newScores = []
+const resultWithEach = scoresEach.forEach((score) => {
+  const newScore = square(score)
+  newScores.push(newScore)
+})
+
+const resultWithMap = scoresMap.map(square)
+
+console.log(resultWithEach) // undefined
+console.log(resultWithMap) // [4, 16, 64, 256, 1024]
+```
+
+`Map` 是一个纯函数，同时 `forEach` 执行一些突变：
+
+```js
+console.log(newScores) // [4, 16, 64, 256, 1024]
+```
+
+在我看来，`map` 支持函数式编程范式。我们不必总是执行突变来获得期望的结果，不像 `forEach`，我们必须突变 `newScores` 变量。在每次运行时，当提供相同的输入时，`map` 函数将产生相同的结果。同时，`forEach` 对应项将从上一个突变的先前值中提取。
+
+### 链式调用
+
+使用 `map` 可以进行链式调用，因为返回的结果是一个数组。因此，可以对结果立即调用任何其他数组方法。换句话说，我们可以调用 `filter`、`reduce`、`some` 等方法。这在 `forEach` 中是不可能的，因为返回的值为 `undefined` 的。
+
+### 性能
+
+`map` 方法的性能往往优于 `forEach` 方法。
+
+检查使用 `map` 和 `forEach` 实现的等效代码块的性能。平均而言，您将看到 `map` 函数的执行速度至少快 50%。
+
+## 结论
+
+在上面讨论的所有循环结构中，给我们最多控制权的是 `for...of` 循环。我们可以将其与关键字 `return`、`continue` 和 `break` 一起使用。这意味着我们可以指定对数组中的每个元素要发生什么，以及是否要提前离开或跳过。
+
+## 更多资料
+
+- [Array Iteration](https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff)
+- [JavaScript 数组方法总结](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md)
diff --git "a/JavaScript/JavaScript \344\270\255\346\270\205\347\251\272\346\225\260\347\273\204.md" "b/JavaScript/JavaScript \344\270\255\346\270\205\347\251\272\346\225\260\347\273\204.md"
new file mode 100644
index 0000000..289bcd0
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\346\270\205\347\251\272\346\225\260\347\273\204.md"	
@@ -0,0 +1,122 @@
+# JavaScript 中清空数组
+
+## Array.prototype.splice()
+
+使用 `Array.prototype.splice()` 方法通过删除或替换现有元素来修改原数组的内容。
+
+```js
+let course = ['HTML', 'CSS', 'JavaScript']
+
+course.splice(0)
+console.log(course.length) // 0
+```
+
+> **注意**：此方法会影响其他引用。
+
+```js
+let course = ['HTML', 'CSS', 'JavaScript']
+let other = course
+
+course.splice(0)
+course // []
+other // []
+```
+
+由于 `splice()` 返回一个已删除项目的数组，您可以通过将结果分配给一个新变量来获取原始数组的副本：
+
+```js
+let foo = ['hello', 'world']
+
+// 清空并创建一个 foo 的副本
+let bar = foo.splice(0, foo.length)
+
+console.log(foo) // []
+console.log(bar) // ['hello', 'world']
+```
+
+## 将 length 设置为 0
+
+将数组的长度设置为零。
+
+```js
+let course = ['HTML', 'CSS', 'JavaScript']
+course.length = 0
+console.log(course) // []
+```
+
+## 分配新的空数组
+
+将新的空数组分配给现有数组也会使数组为空。
+
+```js
+let course = ['HTML', 'CSS', 'JavaScript']
+course = []
+console.log(course.length) // 0
+```
+
+## pop/shift
+
+循环判断数组的 `length` 属性，在每次循环都移除一个元素。
+
+```js
+let course = ['HTML', 'CSS', 'JavaScript']
+
+while (course.length > 0) {
+  course.pop()
+  // course.shift()
+}
+
+console.log(course) // 0
+```
+
+## length = 0 和 Array = [] 之间的差异？
+
+在大多数情况下，将变量重新分配给空数组是更好的选择。它比调整 `length` 属性更短、更明确。
+
+但有时，你有一个数组是通过引用分配的，你想让它们保持引用。
+
+假如我们有一个 `foo` 数组，我们还有一个 `bar` 变量，我将它的值设置为 `foo` 数组。
+
+```js
+let foo = ['hello', 'world']
+
+// 添加引用
+let bar = foo
+```
+
+如果我重新分配 `foo` 的值为 `[]` 空数组，`bar` 变量仍指向分配给它的原始数组。
+
+```js
+foo = []
+
+// bar 不受影响
+console.log(bar) // ['hello', 'world']
+```
+
+`foo = []` 将一个新的数组的引用赋值给变量，其他引用并不受影响。这意味着以前数组的内容被引用的话将依旧存在于内存中，这将导致内存泄漏。
+
+如果我改为 `foo.length = 0`，删除数组里的所有内容，也将影响到其他引用。
+
+```js
+let foo = ['hello', 'world']
+let bar = foo
+
+foo.length = 0
+
+// `bar` 受影响
+console.log(bar) // []
+```
+
+如果数组被声明为常量，则不能将其重新分配给 `[]`。这时我们应该使用 `lenght = 0`。
+
+```js
+const course = ['HTML', 'CSS', 'JavaScript']
+course = [] // 会抛出异常："Assignment to constant variable"
+
+// 使用 length = 0
+course.length = 0
+```
+
+## 更多资料
+
+你可以在 [How do I empty an array in JavaScript?](https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript) 和 [Difference between Array.length = 0 and Array =[]?](https://stackoverflow.com/questions/4804235/difference-between-array-length-0-and-array) 查看更多详细的内容，比如这些方法的性能测试，进行讨论。
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204 Generator \345\222\214 Iterator.md" "b/JavaScript/JavaScript \344\270\255\347\232\204 Generator \345\222\214 Iterator.md"
new file mode 100644
index 0000000..af73d27
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204 Generator \345\222\214 Iterator.md"	
@@ -0,0 +1,212 @@
+# JavaScript 中的 Iterator 和 Generator
+
+## Iterator
+
+迭代是编程中的一种常见做法，通常用于循环一组值，或者转换每个值，或者以某种方式使用或保存它以供以后使用。
+
+在 JavaScript 中，我们经常使用类似以下的 `for` 循环：
+
+```js
+for (var i = 0; i < foo.length; i++) {
+  // ...
+}
+```
+
+但 ES6 为我们提供了另一种选择：
+
+```js
+for (const i of foo) {
+  // ...
+}
+```
+
+这无疑是一种更简洁、更易于使用的方式。但关于这种新的迭代，还有一点非常重要：它允许您直接与数据集的元素交互。
+
+假设我们要找到数组中大于 `20` 的元素放置到另一个数组中：
+
+```js
+const arr = [73, 6, 90, 19, 15]
+const newArr = []
+
+for (var i = 0; i < arr.length; i++) {
+  if (arr[i] > 20) {
+    newArr.push(arr[i])
+  }
+}
+
+newArr // [73, 90]
+```
+
+它可以工作，但它很笨重，而且这种笨重很大程度上取决于 JavaScript 处理 `for` 循环的方式。然而，对于 ES6，我们在新的迭代器中可以这样写：
+
+```js
+const arr = [73, 6, 90, 19, 15]
+const newArr = []
+
+for (const i of arr) {
+  if (i > 20) {
+    newArr.push(i)
+  }
+}
+
+newArr // [73, 90]
+```
+
+这要干净得多，但最引人注目的是 `for` 循环。变量 `i` 现在表示数组中名为 `newArr` 的实际项。所以，我们不再需要通过索引来调用它。这意味着，我们可以直接调用 `i`，而不是调用循环中的 `newArr[i]`。
+
+在这背后，这种迭代利用了 ES6 的 [Symbol.iterator()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) 方法。它负责描述迭代，并在被调用时返回一个 JavaScript 对象，其中包含循环中的 `next` 值和一个 `done` 键，该键是 `true` 还是 `false` 取决于循环是否完成。
+
+### Symbol.iterator
+
+以下是一个数组：
+
+```js
+const numbers = [1, 2, 3]
+numbers[Symbol.iterator] // function values() { [native code] }
+```
+
+ES6 规范定义了对象的非字符串 `symbol` 属性名称，以描述特定行为。`Symbol.iterator` 是其中之一，它描述了迭代是如何工作的。
+
+```js
+const numbersIterator = numbers[Symbol.iterator]()
+
+numbersIterator.next() // { value: 1, done: false }
+numbersIterator.next() // { value: 2, done: false }
+numbersIterator.next() // { value: 3, done: false }
+numbersIterator.next() // { value: undefined, done: true }
+```
+
+以上是 `for (var num of numbers)` 在 JS 引擎下所做的事情。
+
+当我们调用 `numbers[Symbol.iterator]` 时，会返回一个带有 `next` 方法的对象。调用 `next` 会给我们一个包含 `value` 的对象，或者表示没有其他值了。
+
+### 自己实现一个
+
+让我们创建一个对象来迭代字符串中的 `Words`（以一种非常简单的方式）。
+
+首先，创建一个构造函数：
+
+```js
+function Words(str) {
+  this._str = str
+}
+```
+
+然后，创建一个迭代器工厂：
+
+```js
+Words.prototype[Symbol.iterator] = function () {
+  const re = /\S+/g
+  const str = this._str
+
+  return {
+    next() {
+      const match = re.exec(str)
+      if (match) {
+        return { value: match[0], done: false }
+      }
+      return { value: undefined, done: true }
+    }
+  }
+}
+```
+
+我们返回一个带有 `next` 方法的对象，它返回 `{ value: nextWordInTheString, done: false }`，直到没有 `next` 的方法。
+
+```js
+const helloWorld = new Words('Hello world')
+
+for (var word of helloWorld) {
+  console.log(word)
+}
+// 'Hello'
+// 'world'
+```
+
+它可以正常工作！
+
+## Generator
+
+Generator 译为生成器，也称为“迭代器工厂”，是 ES6 JavaScript 函数的一个补充，用于创建特定的迭代。它们为你提供了特殊的、自定义的循环方法。
+
+它是一种特殊的函数，能够暂停自身，稍后再恢复，同时允许其他代码运行。
+
+代码决定它必须等待，因此它允许“队列中”的其他代码运行，并保留在“等待的事情”完成时恢复其操作的权利。
+
+所有这些都是用一个简单的关键字完成的：`yield`。当生成器包含该关键字时，执行将暂停。
+
+生成器可以包含许多 `yield` 关键字，因此会多次停止，它由 `function *` 关键字标识。
+
+生成器支持 JavaScript 编程的全新范例，允许：
+
+- 生成器运行时的双向通信
+- 不会冻结程序的长寿命 `while` 循环
+
+使用 `function*` 定义的生成器是创建迭代器工厂的一种更方便的方式。
+
+从生成器中，你 `yield` 你想要提供的值，它会为你处理 `value/done` 对象:
+
+```js
+function* someNumbers() {
+  yield 1
+  yield 2
+  yield 3
+}
+
+// 初始化
+const iter = someNumbers()
+
+iter.next() // { value: 1, done: false }
+iter.next() // { value: 2, done: false }
+iter.next() // { value: 3, done: false }
+iter.next() // { value: undefined, done: true }
+```
+
+这一切都发生在您使用 `yield` 关键字暂停代码的运行，以及是否调用 `next` 方法再次启动迭代器。
+
+我们可以使用 `for...of` 循环它：
+
+```js
+for (var num of someNumbers()) {
+  console.log(num)
+}
+// 1
+// 2
+// 3
+```
+
+尽管上面的 `for...of` 循环看起来很直观，但它只是通过一点小技巧才能工作。`for...of` 调用对象的 `Symbol.iterator` 方法来获得迭代器，但我们给出的 `someNumbers()` 已经是一个迭代器了。为了解决这个问题，生成器返回的迭代器有一个 `Symbol.iterator` 方法返回自身，表示 `iter[Symbol.iterator]() === iter`。这有点奇怪，但它使上述代码按预期工作。
+
+```js
+iter[Symbol.iterator]() // Object [Generator] {}
+iter[Symbol.iterator]() === iter // true
+```
+
+生成器通常是描述迭代的一种更简单的方法。对于我们的上述的 `Words` 示例，它要简单得多：
+
+```js
+Words.prototype[Symbol.iterator] = function* () {
+  const re = /\S+/g
+  const str = this._str
+  let match
+  while ((match = re.exec(str))) {
+    yield match[0]
+  }
+}
+```
+
+> **注意**：箭头函数不能作为 Generator 函数，不能使用 `yield` 关键字。
+
+另外，当值以异步方式出现时，将使用 `Symbol.asyncIterator` 替代 `Symbol.iterator`。
+
+本文更多详细的内容可以阅读下文提供的资料。
+
+## 更多资料
+
+- [Generator 函数的语法](https://es6.ruanyifeng.com/#docs/generator)
+- [Generator 函数的异步应用](https://es6.ruanyifeng.com/#docs/generator-async)
+- [Generator，高级 iteration](https://zh.javascript.info/generators-iterators)
+- [ES6 系列之 Generator 的自动执行](https://github.com/mqyqingfeng/Blog/issues/99)
+- [Generators in JavaScript](https://yagrawal.dev/generators-in-javascript)
+- [JavaScript 中循环之间的差异](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E5%BE%AA%E7%8E%AF%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82.md)
+- [迭代协议](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204 setTimeout \345\222\214 setInterval \346\226\271\346\263\225.md" "b/JavaScript/JavaScript \344\270\255\347\232\204 setTimeout \345\222\214 setInterval \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..a95c9ca
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204 setTimeout \345\222\214 setInterval \346\226\271\346\263\225.md"	
@@ -0,0 +1,153 @@
+# JavaScript 中的 setTimeout 和 setInterval 方法
+
+有时您不希望函数立即运行。您希望它重新执行，甚至在特定时间间隔后重复运行。JavaScript 为我们提供了两种实现方法： `setTimeout` 和 `setInterval`。下面，我们将来理解这两个方法。
+
+## setTimeout
+
+`setTimeout` 方法在停止后运行给定的函数。它设置一个定时器，并在时间终止时执行给定的函数（回调）。
+
+`setTimeout` 方法的语法如下：
+
+```js
+const timerID = setTimeout(fn, delay, arg1, arg2, ...)
+```
+
+- `fn` — 在给定的延迟时间后要执行的函数。
+- `delay`（可选） — 定时器在执行函数之前应该等待的时间（以毫秒为单位）。如果未指定，则使用替换值 0。
+- `arg1, arg2, ...argN`（可选） — 给定函数的参数。
+
+`setTimeout` 方法返回一个整数值，用于标识创建的定时器。这个整数用于清除定时器。
+
+**示例**
+
+```js
+function sayHello() {
+  console.log('Hello')
+}
+
+setTimeout(sayHello, 2000) // 'Hello'
+```
+
+2 秒后，将在控制台打印 `'hello'`。
+
+如果这个 `sayHello` 函数接受参数，我们可以创建：
+
+```js
+function sayHello(name) {
+  console.log(`Hello, ${name}`)
+}
+
+setTimeout(sayHello, 1000, 'IU')
+```
+
+这将在 2 秒后打印 `'Hello，IU'`。
+
+`setTimeout` 还接受第三个参数，作为 `fn` 函数的参数：
+
+```js
+for (var i = 0; i < 3; i++) {
+  setTimeout(console.log, 1000 * i, i) // 0  1 2
+}
+```
+
+它可以巧妙的解决一个闭包问题。通过给 `setTimeout` 的回调函数传参的方式，保存了每次循环中 `i` 的值。
+
+## clearTimeout
+
+`clearTimeout` 方法用于取消定时器。例如，我们可能希望在定时器执行函数之前取消它。`setTimeout` 方法会返回一个 `ID`，这个 `ID` 可以用于取消定时器。
+
+```js
+function sayHello(name) {
+  console.log(`Hello, ${name}`)
+}
+
+const timerID = setTimeout(sayHello, 3000, 'IU')
+
+clearTimeout(timerID)
+```
+
+以上示例中，定时器永远不会运行。
+
+## setInterval
+
+`setInterval` 方法用于安排函数在一段时间后**重复**执行。该方法的语法如下：
+
+```js
+const timerID = setInterval(fn, delay, arg1, arg2, ...)
+```
+
+在这种情况下，延迟是定时器应该延迟函数的连续执行的时间（毫秒）。`setInterval` 方法还返回用于清除定时器的 ID。
+
+**示例**
+
+```js
+function sayHello(name) {
+  console.log(`Hello, ${name}`)
+}
+
+setInterval(sayHello, 3000, 'IU') // 'IU'
+```
+
+上面的代码将在 3 秒钟后重复打印 `'Hello IU'`。
+
+`setInterval` 的语法与 `setTimeout` 非常相似。主要区别在于：
+
+- `setTimeout` 方法只在定时器过期后触发一次。
+- `setInterval` 方法会重复运行函数，除非它被取消。
+
+为了阻止 `setInterval` 持续运行，我们可以使用 `clearInterval` 方法。
+
+## clearInterval
+
+`clearInterval` 方法用于停止 `setInterval` 方法的执行。它接受定时器 `ID` 作为参数，并使用该 `ID` 停止定时器。
+
+```js
+let counter = 0
+function sayHello(name) {
+  console.log(`Hello, ${name}`)
+  counter++
+
+  if (counter === 3) {
+    clearInterval(timerID)
+  }
+}
+
+let timerID = setInterval(sayHello, 3000, 'IU')
+console.log(1)
+```
+
+`sayHello` 函数只执行 3 次。
+
+您可能会想知道 `if` 语句为什么在函数内部，而不是函数之外，例如：
+
+```js
+let counter = 0
+function sayHello(name) {
+  console.log(`Hello, ${name}`)
+  counter++
+}
+
+let timerID = setInterval(sayHello, 3000, 'IU')
+
+if (counter === 3) {
+  clearInterval(timerID)
+}
+```
+
+此时，我们需要了解 JavaScript 执行 `setInterval` 和 `setTimeout` 方法的方式。
+
+## 非阻塞 I/O 操作
+
+与其他语言不同，JavaScript 有一个执行任务的线程，它逐行执行任务。这意味着一行代码必须在继续下一行之前完成执行。换句话说，JavaScript 代码的执行是阻塞的。
+
+但是，有一些非阻塞 I/O 操作是由底层引擎处理的。例如 `AJAX`、`setTimeout` 和 `setInterval` 获取数据等操作属于这一类。因此，JavaScript 不会等待传递给 `setTimeout` 或 `setInterval` 方法的函数（回调函数）完成执行，然后再转到下一个任务或代码行。
+
+在上面的例子中，如果我们以第二种方式编写，定时器将不会停止运行。这是因为在执行这一行 `let timerID = setInterval(sayHello, 3000, 'IU')` 之后，JavaScript 立即转到下一个代码块.
+
+```js
+if (counter === 3) {
+  clearInterval(timerID)
+}
+```
+
+在这一点上，条件不是真的，所以定时器永远不会被清除。这也是为什么在我们的 `clearTimeout` 示例中，传递给 `setTimeout` 的回调函数从未被触发的原因。因为 JavaScript 立即转到下一行代码。
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204 \342\200\234this\342\200\235 \345\205\263\351\224\256\345\255\227.md" "b/JavaScript/JavaScript \344\270\255\347\232\204 \342\200\234this\342\200\235 \345\205\263\351\224\256\345\255\227.md"
new file mode 100644
index 0000000..adbdcae
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204 \342\200\234this\342\200\235 \345\205\263\351\224\256\345\255\227.md"	
@@ -0,0 +1,168 @@
+# JavaScript 中的 “this” 关键字
+
+在 JavaScript 中，`this` 关键字是指当前正在运行代码时所在的环境对象。
+
+`this` 的值取决于函数的调用方式：
+
+- 默认情况下，指全局对象。
+- 在函数中，当不处于严格模式时，它引用全局对象 `window`；当处于[严格模式](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%EF%BC%88'use-strict'%EF%BC%89.md)时，它将是 `undefined`。
+- 在箭头函数中，`this` 保留封闭词法上下文的 `this` 值。
+- 在对象方法中，`this` 指调用该方法的对象。
+- 在构造函数调用中，`this` 绑定到正在构造的新对象。
+- 在事件处理程序中（DOM 事件绑定），`this` 绑定到监听器所在的元素。
+- `call/apply/bind` 可以显式绑定 `this` 的指向
+
+## 全局上下文
+
+在全局执行上下文中，`this` 指的是全局对象（浏览器中的 `window`）。
+
+```js
+console.log(this === window) // true
+```
+
+## 函数上下文
+
+在非严格模式下，函数的 `this` 引用全局对象。
+
+```js
+function func() {
+  return this
+}
+
+console.log(func() === window) // true
+```
+
+在严格模式（`'use strict'`）下，如果在进入执行上下文时未设置，则函数的 `this` 将以 `undefined` 代替全局对象。
+
+```js
+'use strict'
+function func() {
+  return this
+}
+
+func() // undefined
+```
+
+## 构造函数
+
+如果在调用函数时使用 `new` 关键字，那么函数中的 `this` 指的是一个全新的对象。
+
+```js
+function User() {
+  return this
+}
+User() // 返回 window 对象
+
+function User(name) {
+  this.name = name
+}
+
+new User('lio') // User {name: "lio"}
+new User('lion') // User {name: "lion"}
+```
+
+可以看看 [`new` 的原理](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20new%20%E8%BF%90%E7%AE%97%E7%AC%A6.md)。
+
+## 对象上下文
+
+如果函数作为一个对象的方法调用，则 `this` 是指该方法被调用的对象。
+
+```js
+const user = {
+  name: 'lio',
+  age: 18,
+  run() {
+    return this.name
+  }
+}
+
+user.run() // "lio"
+```
+
+这适用于在对象的原型链的任何地方定义的方法（即自己的和继承的方法）。
+
+## 箭头函数上下文
+
+如果是 ES6 的箭头函数，在箭头函数内部访问到的 `this` 都是从外部获取的。`this` 值取决于外部不是箭头函数的函数。
+
+```js
+const func = () => this
+
+console.log(func() === window) // true
+
+const user = {
+  name: 'lio',
+  age: 18,
+  run() {
+    const getUser = () => this.name
+    return getUser()
+  },
+  foo: () => this
+}
+
+console.log(user.run()) // lio
+console.log(user.foo() === window) // true
+```
+
+> **注意**：箭头函数没有自己的 `this`，`arguments` 和 `super` 等。
+
+## 事件处理程序上下文
+
+在事件处理程序中使用时，它指的是放置监听器的元素。
+
+```js
+btn.addEventListener('click', function () {
+  console.log(this) // 返回 <button> DOM 对象
+})
+
+// 使用箭头函数返回 window 全局对象
+btn.addEventListener('click', () => {
+  console.log(this) // 返回 window 全局对象
+})
+```
+
+## call/apply/bind 绑定
+
+如果使用 [`apply`、`call` 或 `bind`](<https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95%20%E2%80%94%20call()%EF%BC%8Capply()%20%E5%92%8C%20bind().md>) 来调用/创建函数，则函数中的对象就是作为参数传入的对象。
+
+使用 `Function.prototype.bind()` 从现有函数返回一个新函数，其中该函数永久绑定到 `bind()` 的第一个参数。
+
+```js
+function func() {
+  console.log(this)
+}
+
+const user = {
+  name: 'lio',
+  age: 18
+}
+
+const v = func.bind(user)
+v() // {name: "lio", age: 18}
+```
+
+使用 `Function.prototype.call()` 或 `Function.prototype.apply()` 将被调用函数的 `this` 绑定到这两个函数的第一个参数。
+
+```js
+function func() {
+  console.log(this)
+}
+
+const user = {
+  name: 'lio',
+  age: 18
+}
+
+func() // Window { ... }
+func.apply(user) // {name: "lio", age: 18}
+```
+
+## 更多资料
+
+- [Understanding the "this" keyword in JavaScript](https://www.30secondsofcode.org/blog/s/javascript-this)
+- [You Don't Know JS — Chapter 1: this Or That?](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20&%20object%20prototypes/ch1.md#chapter-1-this-or-that)
+- [You Don't Know JS — Chapter 2: this All Makes Sense Now!](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20&%20object%20prototypes/ch2.md#chapter-2-this-all-makes-sense-now)
+- [JavaScript: What is the meaning of this?](https://web.dev/i18n/en/javascript-this/)
+- [深入理解 js this 绑定 ( 无需死记硬背，尾部有总结和面试题解析 )](https://segmentfault.com/a/1190000011194676)
+- [What 10x JavaScript Developers Know About ‘this’](https://blog.bitsrc.io/what-javascript-10x-developers-know-about-this-object-408f467f0497)
+- [JavaScript 中的 this](https://juejin.cn/post/6844903488304971789)
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\344\270\200\347\255\211\345\207\275\346\225\260.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\344\270\200\347\255\211\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..a228ad0
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\344\270\200\347\255\211\345\207\275\346\225\260.md"	
@@ -0,0 +1,128 @@
+# JavaScript 中的一等函数
+
+JavaScript 的函数是**一等函数**。以下三个点表示重要的一等函数行为：
+
+- 函数可以分配给变量
+- 函数可以作为参数传递给其他函数
+- 函数可以从其他函数返回
+
+让我们举一些简单的例子来理解这几点。
+
+## 为变量赋值函数
+
+让我们创建一个返回文本 `Hello` 的函数，然后将该函数赋给一个命名为 `sayHello` 的变量。
+
+```js
+const sayHello = () => 'Hello'
+
+console.log(sayHello()) // "Hello"
+```
+
+## 将函数作为参数传递
+
+让我们采用上述 `sayHello` 函数，并将其作为参数传递给另一个函数。
+
+```js
+const sayHelloToPerson = (greeter, person) => greeter() + ' ' + person
+
+console.log(sayHelloToPerson(sayHello, 'IU')) // Hello IU
+```
+
+在 `sayHelloToPerson` 函数中，变量 `greeter` 现在将指向内存中的 `sayHello` 函数。当我们调用 `greeter()` 时，函数被调用！
+
+你如果阅读过我之前写过的文章，那么你可能会马上想到[高阶函数](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0.md)！以下给你回忆以下：
+
+> 高阶函数：之所以可以使用 JavaScript 编写高阶函数，是因为函数是值，这意味着它们可以分配给变量并作为值传递。
+>
+> 当引用作为参数传递的函数时，您可能还会经常听到术语**回调**，因为它是由高阶函数调用的。这在 JavaScript 中尤其常见，事件处理，异步代码和数组操作在很大程度上依赖于回调的概念。
+
+## 从另一个函数返回一个函数
+
+也许我们并不总是想说 `"Hello"`，而是想选择创建任意数量的不同类型的问候者。让我们使用一个函数来创建问候函数。
+
+```js
+const greeterMaker = (greeting) => (person) => greeting + ' ' + person
+
+const sayHello1 = greeterMaker('Hello')
+const sayHello2 = greeterMaker('你好')
+
+console.log(sayHello1('IU')) // "Hello IU"
+
+console.log(sayHello2('IU')) // "你好 IU"
+```
+
+我们的 `greeterMaker` 是一个创建函数的函数！
+
+既然你已经了解了一等函数的基本知识。那么我们来看看几个实际的例子！
+
+## 对象验证
+
+也许你有一系列的条件，一个对象（例如，新的用户信息）需要传递才能被认为是“有效的”。让我们创建一个函数来迭代所有的条件，并返回该对象是否有效。
+
+```js
+const usernameLongEnough = (obj) => obj.username.length >= 5
+
+const passwordsMatch = (obj) => obj.password === obj.confirmPassword
+
+const objectIsValid = (obj, ...funcs) => {
+  for (let i = 0; i < funcs.length; i++) {
+    if (funcs[i](obj) === false) return false
+  }
+  return true
+}
+
+const obj1 = {
+  username: 'admin',
+  password: '123456',
+  confirmPassword: '123456'
+}
+
+const obj1Valid = objectIsValid(obj1, usernameLongEnough, passwordsMatch)
+console.log(obj1Valid) // true
+
+const obj2 = {
+  username: 'editor',
+  password: '654321',
+  confirmPassword: '654321'
+}
+
+const obj2Valid = objectIsValid(obj2, usernameLongEnough, passwordsMatch)
+console.log(obj2Valid) // false
+```
+
+如果你对 JavaScript 还比较陌生，那么你可能需要通读几次才能理解到底发生了什么，但是相信我，一旦你理解了，回报是巨大的！
+
+## API 密钥
+
+也许我们遇到了这样一种情况：我们想使用 API 密钥连接到 API。我们可以在每个请求上添加这个密钥。或者，我们可以创建一个函数，该函数接受一个 API 密钥参数，并在每个请求中返回包含 API 密钥的函数。
+
+**注意：不要在前端代码中放置机密 API 密钥。相反，假设以下代码位于基于 Node 的后端中。**
+
+```js
+const apiConnect = (apiKey) => {
+  const getData = (route) => {
+    return axios.get(`${route}?key=${apiKey}`)
+  }
+
+  const postData = (route, params) => {
+    return axios.post(route, {
+      body: JSON.stringify(params),
+      headers: {
+        Authorization: `Bearer ${apiKey}`
+      }
+    })
+  }
+
+  return { getData, postData }
+}
+
+const api = apiConnect('my-secret-key')
+
+// 不需要再包含 apiKey 了
+api.getData('http://www.example.com/get-endpoint')
+api.postData('http://www.example.com/post-endpoint', { name: 'IU' })
+```
+
+## 最后
+
+现在，您已经看到 JavaScript 中的一等函数公民的作用，并且这些函数对您的 JavaScript 开发业务有多么重要。建议您可以在各种代码中使用函数的方式！
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\345\207\275\346\225\260\345\222\214\345\217\230\351\207\217\346\217\220\345\215\207.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\345\207\275\346\225\260\345\222\214\345\217\230\351\207\217\346\217\220\345\215\207.md"
new file mode 100644
index 0000000..176bb4b
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\345\207\275\346\225\260\345\222\214\345\217\230\351\207\217\346\217\220\345\215\207.md"	
@@ -0,0 +1,151 @@
+# JavaScript 中的函数和变量提升
+
+[提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting)是一个 JavaScript 概念，其中变量、函数和类定义在执行之前被提升到它们的词法环境（它们的作用域）的顶部。
+
+在 JavaScript 中有多种定义函数的方法。我们将看看以下三种方法：
+
+- 函数声明
+- 函数表达式
+- 箭头函数
+
+```js
+// 函数声明
+function Motto() {
+  console.log('All work and no play makes Jack a dull boy')
+}
+
+// 函数表达式
+var Motto = function () {
+  console.log('All work and no play makes Jack a dull boy')
+}
+
+// 箭头函数
+var Motto = () => console.log('All work and no play makes Jack a dull boy')
+
+Motto() // All work and no play makes Jack a dull boy
+```
+
+乍一看，上述定义函数的方式看起来是一样的。然而，两者之间存在着微妙的差异。
+
+本文将着重关注函数声明和函数表达式。我们先来看一个例子：
+
+```js
+double(5) // 10
+square(2) // Uncaught ReferenceError: Cannot access 'square' before initialization at <anonymous>:3:1
+
+const square = function (x) {
+  return x * x
+}
+
+function double(x) {
+  return 2 * x
+}
+```
+
+正如我们所看到的，这个程序并没有像预期的那样工作。
+
+但是，如果我们注释掉对 `square` 函数的调用，或者将其移到定义之下，我们可以看到程序按预期工作。
+
+出现这种异常的原因是，我们可以在函数声明被实际定义之前调用它，但是我们不能对函数表达式执行同样的操作。这与 JavaScript 解析器有关，它解析给定的脚本。
+
+函数声明被提升，而函数表达式不被提升。JavaScript 引擎通过在实际执行脚本之前将函数声明提升到当前作用域来提升函数声明。
+
+结果，上面的代码片段实际上解析如下：
+
+```js
+function double(x) {
+  return 2 * x
+}
+
+double(5) // 10
+square(2) // Uncaught ReferenceError: Cannot access 'square' before initialization at <anonymous>:3:1
+
+const square = function (x) {
+  return x * x
+}
+```
+
+但是 `square` 函数没有被提升，这就是为什么它只能从定义向下到程序的其余部分。这导致调用时出错。
+
+函数表达式就是这种情况。
+
+JavaScript 中还有另一种形式的提升，当使用关键字 `var` 声明变量时会发生这种提升。
+
+让我们看几个例子来说明这一点：
+
+```js
+var language = 'JavaScript'
+
+function whichLanguage() {
+  if (!language) {
+    var language = 'Go'
+  }
+  console.log(language)
+}
+whichLanguage() // Go
+```
+
+当我们运行上述代码时，我们可以在控制台看到 `JavaScript` 被替换为 `Go`。
+
+我们要知道，函数声明的方式与使用关键字 `var` 声明变量的方式相同。
+
+关于提升方式的不同，有几点需要注意：
+
+- 当函数声明被提升时，整个函数体被移动到当前作用域的顶部。
+- 提升时使用关键字 `var` 声明的变量只会将变量名称移动到当前作用域的顶部，而不是赋值。
+- 在函数内部，使用关键字 `var` 声明的变量的作用域仅限于函数，而不是 `if` 块或 `for` 循环。
+- 函数提升取代了变量提升。
+
+牢记这些规则，让我们看看 JavaScript 引擎将如何解析上述代码：
+
+```js
+var language = 'JavaScript'
+
+function whichLanguage() {
+  var language
+  if (!language) {
+    language = 'Go'
+  }
+  console.log(language)
+}
+
+whichLanguage()
+```
+
+可以看到，`var language` 被移动到了当前作用域的顶部，因此它的值为 `undefined`。这使得它进入 `if` 块，从而将其重新分配为 `Go` 值。
+
+让我们看另一个进一步证明这一点的例子：
+
+```js
+var name = 'K.O'
+function myName() {
+  name = 'O.K'
+  return
+  function name() {}
+}
+
+myName()
+console.log(name) // K.O
+```
+
+通过遵循 JavaScript 引擎如何解析文件的规则，我们可以推断上述代码将产生什么。
+
+让我们看看它是如何解析的：
+
+```js
+var name = 'K.O'
+function myName() {
+  function name() {} // 提升 name 函数
+  name = 'O.K' // 重新分配给新值的 name
+  return
+}
+
+myName()
+console.log(name) // K.O
+```
+
+`K.O` 将被注销，因为 `myName` 函数中定义的 `name` 受该函数的作用域限制，并在函数执行后被丢弃。
+
+## 最后
+
+以上内容涵盖了在 JavaScript 中使用提升时要考虑的大部分事项。这些规则有一些例外，但是随着 ES6 的引入，我们现在可以通过在声明变量时使用 `const` 和 `let` 关键字来避免许多这些警告。
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\345\274\202\345\270\270\345\244\204\347\220\206.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\345\274\202\345\270\270\345\244\204\347\220\206.md"
new file mode 100644
index 0000000..c6a6928
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\345\274\202\345\270\270\345\244\204\347\220\206.md"	
@@ -0,0 +1,270 @@
+# JavaScript 中的异常处理
+
+**错误是编程过程的一部分**。编写程序的过程难免会出现一些错误，通过这些产生的错误，我们可以学会如何避免遇到这样的情况，以及如何在下次做的更好。
+
+在 JavaScript 中，当代码语句紧密耦合并产生错误时，继续使用剩余的代码语句是没有意义的。相反，我们试图尽可能优雅地从错误中恢复过来。JavaScript 解释器在出现此类错误时检查[异常处理](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)代码，如果没有异常处理程序，程序将返回导致错误的任何函数。
+
+对[调用堆栈](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)上的每个函数重复此操作，直到找到异常处理程序或到达顶层函数，从而导致程序以错误终止，导致程序的崩溃。
+
+一般来说，有两种处理方式：
+
+- **抛出异常** — 如果在运行时发生的问题无法得到有意义的处理，最好抛出它。
+
+```js
+function openFile(fileName) {
+  if (!exists(fileName)) {
+    throw new Error('找不到文件 ' + fileName)
+  }
+
+  // do something
+}
+```
+
+- **捕获异常** — 抛出的异常在运行时更有意义的地方被捕获和处理。
+
+```js
+try {
+  openFile('../test.js')
+} catch (e) {
+  // 捕获异常
+}
+```
+
+让我们更详细地了解这些操作。
+
+## 抛出异常
+
+你可能会看到类似 `ReferenceError: specs is not defined` 这样的情况。这表示通过 `throw` 语句引发的异常。
+
+### 语法
+
+`throw` 语法如下：
+
+```js
+throw «value»
+```
+
+`throw` 对可以作为异常抛出的数据类型没有限制：
+
+```js
+if (somethingBadHappened) {
+  throw 'Something bad happened'
+}
+```
+
+但 JavaScript 具有特殊的内置异常类型，其中之一是 `Error`，正如你在前面的示例中所看到的。这些内置的异常类型为我们提供了比异常消息更多的细节。
+
+### Error
+
+`Error` 类型用于表示一般异常。这种类型的异常最常用于实现用户定义的异常。它有两个内置属性可供使用。
+
+- `message` — 作为参数传递给 `Error` 构造函数的内容。例如，`new Error('这是一条错误消息')`。你可以通过 `message` 属性访问消息。
+
+```js
+const myError = new Error('Error!!!')
+
+console.log(myError.message) // Error!!!
+```
+
+- `stack` — 该属性返回导致错误的文件的历史记录（调用堆栈）。堆栈顶部还包括 `message`，后面是实际堆栈，从最新/隔离的错误点开始，到最外部负责的文件。
+
+```js
+Error: Error!!!
+    at <anonymous>:1:1
+```
+
+**注意**，`new Error('...')` 在抛出之前不会执行任何操作，即 `throw new Error('error msg')` 将在 JavaScript 中创建一个 `Error` 实例，并停止脚本的执行，除非你对 `Error` 错误执行某些操作，例如捕获它。
+
+另外，决不要尝试为基本 `Error` 类型实现**捕获所有**处理程序。这将混淆所发生的一切，并损害代码的可维护性和可扩展性。
+
+## 捕获异常
+
+现在我们知道了什么是异常以及如何抛出它们，让我们讨论一下如何通过捕获它们来阻止它们破坏我们的程序。
+
+[`try-catch-finally`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) 是处理异常的最简单方法。
+
+```js
+try {
+  // 要运行的代码
+} catch (e) {
+  // 发生异常时要运行的代码，例如向监控系统发送一条 HTTP 请求上报异常
+  reportErrorToMonitoringSystem(e)
+}
+
+[ // 可选
+  finally {
+    // 无论发生异常都始终执行的代码
+  }
+]
+```
+
+在 `try` 子句中，我们添加了可能产生异常的代码。如果发生异常，则执行 `catch` 子句。
+
+有时，无论代码是否产生异常，都需要执行代码，这时我们可以使用可选块 `finally`。
+
+即使 `try` 或 `catch` 子句执行 `return` 语句，`finally` 块也将执行。例如，以下函数返回 `'Execute finally'`，因为 `finally` 子句是最后执行的内容。
+
+```js
+function foo() {
+  try {
+    return true
+  } finally {
+    console.log('Execute finally')
+  }
+}
+```
+
+我们通常会在无法事先检查代码正确性的地方使用 `try-catch`。
+
+```js
+const user = '{"name": "D.O", "age": 18}'
+
+try {
+  // 代码运行
+  JSON.parse(params) // 在出现错误的情况下，其余的代码将永远无法运行
+  console.log(params)
+} catch (err) {
+  // 在异常情况下运行的代码
+  console.log(err.message) // params is not defined
+}
+```
+
+如上所示，在执行代码之前，不可能检查 `JSON.parse` 以获得 `stringify` 对象或字符串。
+
+> **注意**：你可以捕获程序运行时产生的异常，但无法捕获 JavaScript 语法错误。
+
+重要的一点：`try-catch-finally` 只能捕获同步错误。如果我们尝试将其用于异步代码，那么在异步代码完成其执行之前，`try-catch-finally` 可能已经执行了。
+
+## 如何处理异步代码块中的异常
+
+### 回调函数
+
+使用回调函数（不推荐），我们通常会收到两个如下所示的参数：
+
+```js
+// 以 Node.js 的 readdir 为例，回调在 Node 中很常见。
+fs.readdir(path, (error, files) => {
+  if (error) throw error
+
+  console.log(files)
+})
+```
+
+我们可以看到有两个参数：`error` 和 `files`。如果有错误，`error` 参数将等于该错误，我们可以抛出该错误来进行异常处理。
+
+在 `if (error)` 块中返回某些内容或将其他指令包装在 `else` 块中都很重要。否则，你可能会遇到另一个错误。例如，当你尝试访问 `files` 时，`files` 可能未定义。
+
+### Promise
+
+使用 promise 的 `then` 或者 `catch`，我们可以通过将错误处理程序传递给 `then` 方法或使用 `catch` 子句来处理错误。
+
+```js
+promise.then(onFulfilled, onRejected)
+```
+
+也可以使用 `.catch(onRejected)` 而不是 `.then(null, onRejected)` 添加错误处理程序，其工作方式相同。
+
+让我们看一个 `.catch` 拒绝 `Promise` 的例子。
+
+```js
+Promise.resolve('1')
+  .then((res) => {
+    console.log(res) // 1
+    throw new Error('go wrong') // 抛出异常
+  })
+  .then((res) => {
+    console.log(res) // 不会被执行
+  })
+  .catch((err) => {
+    console.error(err) // 捕获并处理异常 => Error: go wrong
+  })
+```
+
+### 使用 `async/await` 和 `try-catch`
+
+使用 `async/await` 和 `try-catch-finally` 处理异常是轻而易举的事。
+
+```js
+async function func() {
+  try {
+    await nonExistentFunction()
+  } catch (err) {
+    console.error(err) // ReferenceError: nonExistentFunction is not defined
+  }
+}
+```
+
+## 如何处理全局未捕获的异常
+
+现在我们已经很好地理解了如何在同步和异步代码块中执行异常处理，让我们回答本文最后一个待解决的问题：**我们如何处理全局未捕获的异常？**
+
+### 在浏览器中
+
+我们可以使用 `window.onerror` 事件来处理未捕获的异常。每当运行时发生错误时，会在 `window` 对象上触发 `error` 事件。
+
+```js
+window.onerror = function () {
+  // do something
+}
+// or
+window.addEventListener('error', () => {
+  // do something
+})
+```
+
+`onerror` 的另一个常用做法是，当站点中的图片或视频等数据加载出错时，可以用该方法触发某些操作。例如，提供一张加载出错时的图片，或显示一条消息。
+
+```html
+<img src="logo.png" onerror="alert('加载图片时出错')" />
+```
+
+### 在 Node.js 中
+
+`EventEmitter` 模块派生的 `process` 对象可以订阅事件 `uncaughtException`。
+
+```js
+process.on('uncaughtException', () => {})`
+```
+
+我们可以传递一个回调来处理异常。如果我们尝试捕获这个未捕获的异常，进程将不会终止，因此我们必须手动完成。
+
+`uncaughtException` 仅适用于同步代码。对于异步代码，还有另一个称为 `unhandledRejection` 的事件。
+
+```js
+// 在 Node.js 中
+process.on('unhandledRejection', (event, promise) => {
+  // 第二个参数指向抛出错误的那个 promise
+  console.log(event, promise)
+  // do something
+})
+
+// 在浏览器中
+window.addEventListener('unhandledrejection', (event) => {
+  console.log(event, p)
+  // do something
+})
+```
+
+> 注意事件名大小写。
+
+## 关键点
+
+- `throw` 语句用于生成用户定义的异常。在运行时，当 `throw` 遇到语句时，当前函数的执行将停止，控制权将传递给 `catch` 调用堆栈中的第一个子句。如果没有 `catch` 子句，程序将终止。
+- JavaScript 有一些内置的异常类型，最值得注意的是 `Error`，它返回 `Error` 中的两个重要属性：`stack` 和 `message`。
+- `try` 子句将包含可能产生异常的代码，`catch` 子句会在发生异常时执行。`finally` 子句无论之前情况如何，最后都会执行。
+- 对于 JS 运行时的同步异常，通过 `try-catch` 进行捕获，不过常规下它只能捕获同步代码。对于异步代码，使用 `async/await` 配合 `try-catch` 语句捕获异常。（Promise `then` 方法的第二个参数，或者 `catch` 捕获也可行）
+- `try-catch` 无法捕获语法异常。
+- `onerror` 可以捕获语法错误，也可以捕获运行时错误。而 `unhandledrejection` 可以监听到 Promise 中抛出的，未被 `.catch` 捕获的错误。
+- 前端知名框架 Vue 和 React 都有对应的处理异常方案，比如 React 的 [Error Boundaries](https://reactjs.org/docs/error-boundaries.html)，Vue 的 [errorHandler](https://vuejs.org/api/application.html#app-config-errorhandler)、[warnHandler](https://vuejs.org/api/application.html#app-config-warnhandler)、[errorCaptured](https://vuejs.org/api/options-lifecycle.html#errorcaptured) 等，因此我们无需手动编写 `try/catch` 代码。另外，如果你对于 Vue 的组件错误监听感兴趣，可以阅读 [Vue 错误处理 — onErrorCaptured 钩子](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86%20%E2%80%94%20onErrorCaptured%20%E9%92%A9%E5%AD%90.md)。
+
+捕获未处理的异常可以防止应用程序崩溃。
+
+不要觉得麻烦，异常处理可以提高项目的稳定性，并且帮助你提高代码的可维护性、可扩展性和可读性。
+
+## 更多资料
+
+- [使用 promise 进行错误处理](https://zh.javascript.info/promise-error-handling)
+- [错误处理，"try...catch"](https://zh.javascript.info/try-catch)
+- [自定义 Error，扩展 Error](https://zh.javascript.info/custom-errors)
+- [精读《捕获所有异步 error》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/209.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E5%BC%82%E6%AD%A5%20error%E3%80%8B.md)
+- [精读《JavaScript 错误堆栈处理》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/6.%E7%B2%BE%E8%AF%BB%E3%80%8AJavaScript%20%E9%94%99%E8%AF%AF%E5%A0%86%E6%A0%88%E5%A4%84%E7%90%86%E3%80%8B.md)
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\346\225\260\345\255\227\346\210\252\346\226\255.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\346\225\260\345\255\227\346\210\252\346\226\255.md"
new file mode 100644
index 0000000..4056314
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\346\225\260\345\255\227\346\210\252\346\226\255.md"	
@@ -0,0 +1,116 @@
+# JavaScript 中的数字截断
+
+ES6 引入的 `Math.trunc()` 方法用于截断浮点数并返回其整数部分。此函数不进行任何舍入，它只是删除小数点后的所有数字。
+
+```js
+const number = 100.6
+
+// 旧方法
+number < 0 ? Math.ceil(number) : Math.floor(number) // 100
+
+// ES6 方法
+const es6 = Math.trunc(number) // 100
+```
+
+`Math.trunc()` 的运行方式很简单，它只是截断其右边的点和数字。不管参数是正数还是负数。
+
+```js
+Math.trunc(100.1) // 100
+Math.trunc(100.12) // 100
+Math.trunc(100.123) // 100
+
+Math.trunc(-100.1) // -100
+```
+
+我们来看一些非数字参数的例子：
+
+```js
+Math.trunc('100.1') // 100
+Math.trunc(null) // 0
+Math.trunc('hello') // NaN
+Math.trunc(NaN) // NaN
+Math.trunc(undefined) // NaN
+Math.trunc() // NaN
+```
+
+## 使用 `parseInt` 进行数字截断
+
+我们使用 `parseInt` 也可以得到类似的结果：
+
+```js
+parseInt(100.1) // 100
+parseInt(-100.1) // -100
+
+parseInt('100.1') // 100
+parseInt('hello') // NaN
+parseInt(undefined) // NaN
+parseInt(null) // NaN
+parseInt() // NaN
+```
+
+## `Math.trunc()` 和 `parseInt()` 的选择
+
+`parseInt` 主要用于字符串参数。所以如果你在处理数字，最好使用 `Math.trunc()`。
+
+## 使用 `parseInt` 的问题
+
+使用 `parseInt` 时可能会遇到问题。当您传入一个不是字符串的参数（在本例中是数字）时，它将首先使用 `toString()` 抽象操作将值转换为字符串。大多数情况下，`parseInt` 很好。但让我们看一个可能不是这样的例子。
+
+```js
+const number = 1000000000000000000000.5
+
+parseInt(number) // 1 <-- 😱
+```
+
+为什么会出现这种情况？
+
+这是因为我们的参数不是 `string`，所以 `parseInt` 做的第一件事就是将参数转换为 `string`。
+
+```js
+const number = 1000000000000000000000.5
+
+console.log(number.toString()) // "1e+21"
+```
+
+所以当它试图从 `1e+21` 中获取整数时，它只知道获取 `1` 值。所以，使用 `parseInt` 肯定有其道理。但由于这种边缘情况，您可能需要考虑使用 `Math` 函数。
+
+## 浏览器支持
+
+大多数现代浏览器都支持 [`Math.trunc()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc#Browser_compatibility)。除了 Internet Explorer。以下是 `Math.trunc()` 的支持情况：
+
+![Math.trunc()](https://upload-images.jianshu.io/upload_images/18281896-5ede8f5d937f2ea1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果您需要对旧浏览器的支持，请使用旧方法。
+
+## 其他解决方案
+
+### 位运算符
+
+**双位非 `~~`** — 用于去掉小数部分，因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数。
+
+```js
+console.log(~~100.6) // 100
+```
+
+一个 `~` 是按位取反运算，两个 `~~` 也就是取反两次。
+
+**按位或 `|`** — 在每个位位置返回 `1`，其中一个或两个二进制操作数的对应位为 `1`。
+
+```js
+console.log(100.6 | 0) // 100
+```
+
+> 详细换算可查看 MDN：[Bitwise OR (|)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR)。
+
+### Number.prototype.toFixed()
+
+`Number.prototype.toFixed()` 方法使用定点表示法来格式化一个数值，允许您控制小数。
+
+```js
+;(100.645).toFixed() // "100"
+
+// 此方法返回一个字符串，但我们可以再次将其转换为数字
+Number((100.645).toFixed()) // 100
+```
+
+使用 `toFixed` 方法需要注意一些舍入规则。详细内容可以查看现代 JS 教程的[数字类型](https://zh.javascript.info/number)章节。
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\347\237\255\350\267\257\346\261\202\345\200\274.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\347\237\255\350\267\257\346\261\202\345\200\274.md"
new file mode 100644
index 0000000..303db9f
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\347\237\255\350\267\257\346\261\202\345\200\274.md"	
@@ -0,0 +1,105 @@
+# JavaScript 中的短路求值
+
+通常，我们习惯于在 JavaScript 中使用 `if-else` 语句来执行条件变量赋值和处理控制流。下面，我们来看看使用**短路求值**来完成相同的事情。
+
+## 什么是短路求值？
+
+**短路求值（Short-Circuit Evaluation）**的语法已经有些熟悉了；它使用通常在 `if-else` 语句中看到的 `||` 或 `&&` 逻辑运算符，在 `if-else` 之外使用，**`||` 运算符可用于返回表达式中的第一个真值，而 `&&` 运算符可用于阻止执行后续代码。**
+
+## 使用 || 运算符
+
+下面是一个 `if-else` 语句转换为短路求值的示例。在本例中，我们希望获得用户的显示名。如果 `user` 对象有 `name` 属性，我们将使用它作为显示名。否则，我们只会称我们的用户为 `Guest`。
+
+```js
+const user = {}
+
+let displayName
+
+if (user.name) {
+  displayName = user.name
+} else {
+  displayName = 'Guest'
+}
+console.log(displayName) // "Guest"
+```
+
+使用短路求值可以大大简化此过程：
+
+```js
+const user = {}
+const displayName = user.name || 'Guest'
+console.log(displayName) // "Guest"
+```
+
+因为 `user.name` 是 `undefined`，所以它是错误的。因此，短路求值返回 `Guest`！相反，如果 `user.name` 存在并且不是虚假的，则返回：
+
+```js
+const user = { name: 'D.O' }
+const displayName = user.name || 'Guest'
+console.log(displayName) // "D.O"
+```
+
+真正整洁的是，我们可以将这些条件联系起来。假设我们也可能有一个用户的昵称。我们的 `if-else` 条件可能会变得很难看：
+
+```js
+const user = { name: 'IU' }
+let displayName
+
+if (user.nickname) {
+  displayName = user.nickname
+} else if (user.name) {
+  displayName = user.name
+} else {
+  displayName = 'Guest'
+}
+
+console.log(displayName) // "IU"
+```
+
+使用短路求值，这一切变得更加简单：
+
+```js
+const user = { name: 'IU' }
+const displayName = user.nickname || user.name || 'Guest'
+console.log(displayName) // "IU"
+```
+
+## 使用 && 运算符
+
+`&&` 短路的工作原理有点不同。使用 `&&` 运算符，我们可以确保只有在前面的表达式是真实的情况下才运行后续表达式。这到底是什么意思？让我们看另一个例子！在本例中，如果服务器响应不成功，我们希望在控制台中显示一个错误。首先，我们可以使用 `if` 语句来实现这一点。
+
+```js
+const response = { success: false }
+if (!response.success) {
+  console.error('ERROR')
+}
+```
+
+使用短路求值，可以完成以下任务：
+
+```js
+const response = { success: false }
+!response.success && console.error('ERROR')
+```
+
+如果 `response.success` 为 `true`，那么 `!response.success` 则为 `false`。因此，整个表达式的计算结果为 `false`，而解释器无需查看 `&&` 右侧的任何内容。
+
+## 潜在问题：合法的虚假值
+
+假设你的应用程序可能知道也可能不知道一个用户有多少个孩子。您可以考虑使用以下短路评估：
+
+```js
+const numberOfChildrenDisplay = user.numberOfChildren || 'Unknown'
+```
+
+这里的问题在于，`0` 是已知子对象数的合法值，但 `0` 却是错误的！因此，以下行为将是不正确的：
+
+```js
+const user = { numberOfChildren: 0 }
+const numberOfChildrenDisplay = user.numberOfChildren || 'Unknown'
+console.log(numberOfChildrenDisplay) // "Unknown"
+```
+
+## 最后
+
+对于变量赋值和控制流来说，短路求值可以是一个很好的简写形式，只要确保在使用假值时考虑它们的有效性即可！
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..2980a0d
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md"	
@@ -0,0 +1,105 @@
+# JavaScript 中的自定义事件
+
+在 JavaScript 中，可以通过两种方式创建自定义事件：
+
+- 使用 [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event) 构造函数
+- 使用 [`CustomEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent) 构造函数
+
+也可以使用 `document.createEvent` 来创建自定义事件，但从函数返回的对象所公开的大多数方法已被弃用，这里就不进行介绍，如需了解请查阅 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent)。
+
+## 使用 `Event` 构造函数
+
+可以使用 `Event` 构造函数创建自定义事件，如下所示：
+
+```js
+const myEvent = new Event('myevent', {
+  bubbles: true,
+  cancelable: true,
+  composed: false
+})
+```
+
+在上面的代码片段中，我们通过将事件名称传递给 `Event` 构造函数创建了一个事件 `myevent`。事件名称不区分大小写，因此 `myevent`、`myEvent` 和 `MyEvent` 都相同。
+
+`Event` 构造函数还接受一个对象，该对象指定与事件有关的一些重要属性。
+
+### `bubbles` 属性
+
+`bubbles` 属性指定事件是否应该向上传播到父元素。将此设置为 `true` 意味着，如果在子元素中调度事件，则父元素可以监听该事件并基于该事件执行操作。这是大多数原生 DOM 事件的行为，但对于自定义事件，它默认设置为 `false`。
+
+如果只希望在特定元素上调度事件，可以通过 `event.stopPropagation()` 停止事件的传播。
+
+### `cancelable` 属性
+
+顾名思义，`cancelable` 指定事件是否可取消。
+
+原生 DOM 事件在默认情况下是可取消的，因此您可以对它们调用 `event.preventDefault()`，这将阻止事件的默认操作。如果自定义事件的 `cancelable` 设置为 `false`，则调用 `event.preventDefault()` 将不会执行任何操作。
+
+### `composed` 属性
+
+`composed` 属性指定事件是否应从 shadow DOM（使用 Web 组件时创建）冒泡到真实 DOM。如果 `bubbles` 设置为 `false`，则此属性的值无关紧要，因为您明确告诉事件不要向上冒泡。但是，如果要在 Web 组件中分派自定义事件并在真实 DOM 中的父元素上监听它，则需要将 `composed` 属性设置为 `true`。
+
+使用此方法的一个缺点是无法将数据发送到监听器。然而，在大多数应用程序中，我们希望能够从事件发送到监听器的位置发送数据。为此，我们可以使用 `CustomEvent` 创建自定义事件，并传递数据。
+
+您也不能使用原生 DOM 事件发送数据，只能从事件的目标获取数据。
+
+## 使用 `CustomEvent` 构造函数
+
+我们还可以使用 `CustomEvent` 构造函数创建自定义事件：
+
+```js
+const myEvent = new CustomEvent('myevent', {
+  detail: {},
+  bubbles: true,
+  cancelable: true,
+  composed: false
+})
+```
+
+如上所示，通过 `CustomEvent` 构造函数创建自定义事件与使用 `Event` 构造函数创建事件类似。**唯一的区别**在于作为第二个参数传递给构造函数的对象。
+
+当使用 `Event` 构造函数创建事件时，我们受到一个限制，即我们无法通过事件将数据传递给监听器。在这里，任何需要传递给监听器的数据都可以在 `detail` 属性中传递，该属性是在初始化事件时创建的。
+
+## 在 JavaScript 中调度自定义事件
+
+创建事件后，您需要能够调度它们。事件可以分派到任何扩展的对象，`EventTarget` 包括所有 HTML 元素、`document`、`window`等。
+
+您可以像这样调度自定义事件：
+
+```js
+const myEvent = new CustomEvent('myevent', {
+  detail: {},
+  bubbles: true,
+  cancelable: true,
+  composed: false
+})
+```
+
+要监听自定义事件，请向要监听的元素添加一个事件监听器，就像使用原生 DOM 事件一样。
+
+```js
+const ele = document.querySelector('#someElement')
+
+ele.addEventListener('myevent', (event) => {
+  console.log('我正在监听一个自定义事件')
+})
+```
+
+## 派发事件
+
+运行上面代码片段，你会发现不会有任何效果，这是因为还没有为目标元素派发自定义事件。
+
+[`dispatchEvent`](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent) 方法向一个指定的事件目标派发一个事件，并以合适的顺序同步调用目标元素相关的事件处理函数。
+
+```js
+ele.dispatchEvent(MyEvent)
+```
+
+运行后，将正常输出：**我正在监听一个自定义事件**。
+
+这里有一个[示例](https://codepen.io/lio-zero/pen/mdBBxJZ)，展示如何在 JavaScript 中使用自定义事件。
+
+## 更多资料
+
+- [Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events)
+- [创建自定义事件](https://zh.javascript.info/dispatch-events)
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\350\231\232\345\200\274\346\230\257\344\273\200\344\271\210\357\274\237.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\350\231\232\345\200\274\346\230\257\344\273\200\344\271\210\357\274\237.md"
new file mode 100644
index 0000000..a60943a
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\350\231\232\345\200\274\346\230\257\344\273\200\344\271\210\357\274\237.md"	
@@ -0,0 +1,33 @@
+# JavaScript 中的虚值是什么？
+
+> 简单的来说虚值就是在转换为布尔值时变为 `false` 的值。
+
+## 如何检查值是否虚值，或者说如何将值转换为布尔值？
+
+使用 `Boolean` 方法或者 `!!` 运算符，将 [truthy](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 或 [falsy](https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy) 值转换为布尔值。
+
+- Falsy：`false`、`null`、`undefined`、`NaN`、`0 +0 -0`、空字符串（""、''、``）
+- truthy：其他都为 `true`
+
+```js
+!!false // false
+!!undefined // false
+!!null // false
+!!NaN // false
+!!0 // false
+!!'' // false
+
+!!'hello' // true
+!!1 // true
+!!{} // true
+!![] // true
+
+// or
+
+Boolean(false) // false
+Boolean(undefined) // false
+Boolean(null) // false
+Boolean(NaN) // false
+Boolean(0) // false
+Boolean('') // false
+```
diff --git "a/JavaScript/JavaScript \344\270\255\347\232\204\351\227\255\345\214\205.md" "b/JavaScript/JavaScript \344\270\255\347\232\204\351\227\255\345\214\205.md"
new file mode 100644
index 0000000..2b33710
--- /dev/null
+++ "b/JavaScript/JavaScript \344\270\255\347\232\204\351\227\255\345\214\205.md"	
@@ -0,0 +1,272 @@
+# JavaScript 中的闭包
+
+先看一下一些指南对闭包给出的定义：
+
+> [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)：一个函数和对其周围状态（**lexical environment，词法环境**）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是**闭包**（**closure**）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
+>
+> 现代 JavaScript 教程：[闭包](https://zh.javascript.info/closure)是指内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回（寿命终结）了之后。
+>
+> 《JavaScript 权威指南》：从技术的角度讲，所有的 JavaScript 函数都是闭包。
+
+为了理解闭包，理解词法作用域很重要，建议先阅读 [JS 作用域和作用域链](https://github.com/lio-zero/blog/blob/main/JavaScript/JS%20%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE.md)。
+
+我们知道，函数内部可以访问其自身的作用域、外部函数的作用域和全局作用域中声明的变量。并且外部函数可以访问在其自身作用域和全局作用域中声明的变量。一旦函数执行完毕，它就会从内存中删除其中声明的变量。
+
+闭包是一个函数，即使在外部函数执行完毕并返回后，它仍然可以访问其外部函数范围。
+
+之所以所有的 JavaScript 函数都是闭包，是因为它们可以访问外部作用域，但是大多数函数没有利用闭包的作用：状态的持久性。因此，闭包有时也被称为有状态函数。
+
+根据定义，闭包是函数和声明该函数的词法环境的组合。这可能听其他比较复杂，下面看一些示例，帮助理解。
+
+## 几个简单的例子
+
+```js
+function foo() {
+  const i = 0
+  function baz() {
+    console.log(i++)
+  }
+  return baz
+}
+```
+
+上面例子中，我们可以看到外部 `foo` 函数包含了内部 `baz` 函数，内部函数还引用了外部函数的变量，并被返回出去。
+
+我们调用此函数，初始化指向一个变量：
+
+```js
+let f = foo()
+```
+
+`foo` 函数被运行，`baz` 函数将被创建，然后返回。此时，我们的 `f` 变量只关注一件事，那就是 `baz` 函数。
+
+为了正确地将其可视化，下面是 `f` 变量的外观：
+
+![内存地址环境](https://upload-images.jianshu.io/upload_images/18281896-0ab9e22eda3849f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，它仍然引用 `baz` 函数，但是 `baz` 函数还可以访问外部 `foo` 函数中存在的 `i` 变量。
+
+这个内部函数，因为它将外部函数中的相关变量包含在其区域（又名作用域，更具体的讲为**词法作用域**）中，并将其正在访问的所有变量保存在内存中，即使该变量是在外部函数 `foo` 中声明的。
+
+所以，在本示例中，函数 `baz` 是一个闭包：
+
+![闭包](https://upload-images.jianshu.io/upload_images/18281896-a92796695d8fb68f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+从 `f` 变量的角度来看，`foo` 函数已经被回收了。因为 `f` 变量现在指向一个函数，所以你可以像平常调用函数一样，调用它：
+
+```js
+f() // 0
+f() // 1
+f() // 2
+```
+
+在每次 `foo` 被调用时，都会创建一个新的作用域，以存储 `foo` 运行时的变量。所以每次调用都会加 1。
+
+另一个例子：
+
+```js
+function foo() {
+  const i = 0
+  function baz() {
+    console.log(i++)
+  }
+  return baz
+}
+
+let f = foo()
+let f1 = foo()
+
+f() // 0
+f() // 1
+
+f1() // 0
+f1() // 1
+```
+
+函数 `f` 和 `f1` 是通过 `foo` 的不同调用创建的。因此，它们具有独立的外部词法环境，每一个都有自己的 `i`。
+
+函数内部如果返回一个函数，执行后，它检测到内部函依赖于外部函的变量。发生这种情况时，运行时确保**即使外部函数消失了**，外部函数中所需的任何变量仍可用于内部函数。
+
+## 一个常见的场景
+
+```js
+for (var i = 1; i < 5; i++) {
+  setTimeout(function () {
+    console.log(i)
+  }, 1000)
+}
+```
+
+输出：`11, 11, 11, 11, 11`。
+
+原因：`i` 是声明在全局作用域中的，定时器中的匿名函数也是执行在全局作用域中，因此输出全为 11。
+
+解决：我们可以让 `i` 在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前 `i` 的值（这里使用 [IIFE](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%88IIFE%EF%BC%89.md)）。
+
+```js
+// 立即执行函数
+for (var i = 1; i <= 10; i++) {
+  ;(function () {
+    var j = i
+    setTimeout(function () {
+      console.log(j)
+    }, 1000)
+  })()
+}
+```
+
+改造：将每次迭代的 `i` 作为实参传递给自执行函数，自执行函数中用变量去接收
+
+```js
+for (var i = 1; i <= 10; i++) {
+  ;(function (j) {
+    setTimeout(function () {
+      console.log(j)
+    }, 1000)
+  })(i)
+}
+```
+
+ES6 中的 `let` 和 `const` 可以解决这个问题，其会产生块级作用域
+
+```js
+for (let i = 1; i <= 10; i++) {
+  setTimeout(function () {
+    console.log(i)
+  }, 1000)
+}
+```
+
+还有一个更优雅的方法解决这个问题，我们可能会忘了 `setTimeout` 还可以传递第三个参数：
+
+```js
+for (var i = 1; i <= 10; i++) {
+  setTimeout(
+    function (i) {
+      console.log(i)
+    },
+    1000,
+    i
+  )
+}
+```
+
+## 另一道面试题
+
+```js
+var data = []
+
+for (var i = 0; i < 3; i++) {
+  data[i] = function () {
+    console.log(i)
+  }
+}
+
+data[0]() // 3
+data[1]() // 3
+data[2]() // 3
+```
+
+当执行到 `data[0]` 函数的时候，`for` 循环已经执行完了，`i` 使用 `var` 声明，是全局变量，此时的值为 3。
+
+## 闭包的优缺点
+
+**优点**：
+
+- 可以避免使用全局变量，防止全局变量污染
+- 让外部访问函数内部变量成为可能
+
+**缺点**：
+
+- 会造成内存泄漏 — 有一块内存空间被长期占用，而不被释放
+- 导致变量不会被垃圾回收机制回收，造成内存消耗
+
+**闭包要做的最重要的事情是即使函数的环境急剧变化或消失，函数也可以继续工作**。创建函数时作用域内的所有变量均被封闭并加以保护，以确保该函数仍然有效。对于非动态的语言（例如 JavaScript），这种行为是必不可少的，在 JavaScript 中您经常动态地创建，修改和销毁对象。
+
+此外，闭包是用 JavaScript 存储不能从外部访问的私有数据的唯一方法。它们是 [UMD（Universal Module Definition）模式](https://github.com/lio-zero/blog/blob/main/JavaScript/UMD.md)的关键，UMD 模式经常用于只公开公共 API 但保持实现细节私有的库中，以防止与其他库或用户自己的代码发生名称冲突。
+
+## 闭包的应用场景
+
+以下是闭包的一些用途：
+
+- 初始化函数 - 用于确保函数只调用一次
+- 内存优化 - 用于提高函数的内存效率和性能
+- 封装 - 用于隐藏函数的变量并选择性地公开方法
+- 函数式编程 - 实现[高阶函数](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0.md)和[柯里化](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%9F%AF%E9%87%8C%E5%8C%96.md)关键
+
+以下是一些示例。
+
+### setTimeout
+
+原生的 `setTimeout` 传递的第一个函数不能带参数，通过闭包可以实现传参效果。
+
+```js
+function handler(str, time) {
+  setTimeout(function () {
+    console.log(str)
+  }, time)
+}
+
+handler('hello', 1000)
+```
+
+定时器中有一个匿名函数，该匿名函数就有涵盖 `handler` 函数作用域的闭包，因此当 1 秒之后，该匿名函数能输出 `'hello'`。
+
+### 函数防抖
+
+> 防抖：无论触发多少次事件，动作只会执行一次。
+
+**思路**：在规定时间内未触发第二次，则执行
+
+```js
+function debounce(fn, delay) {
+  // 利用闭包保存定时器
+  let timer = null
+  return function () {
+    let context = this
+    let arg = arguments
+    // 在规定时间内再次触发会先清除定时器后再重设定时器
+    clearTimeout(timer)
+    timer = setTimeout(function () {
+      fn.apply(context, arg)
+    }, delay)
+  }
+}
+```
+
+### 封装
+
+闭包的应用比较典型是定义模块，我们将操作函数暴露给外部，而将细节隐藏在模块内部：
+
+```js
+function module() {
+  const arr = []
+  const add = (val) => typeof val === 'number' && arr.push(val)
+  const get = (i) => (i < arr.length ? arr[i] : null)
+  return {
+    add,
+    get
+  }
+}
+
+const f = module()
+f.add(1)
+f.add(2)
+f.add('hi')
+
+f.get(1) // 2
+f.get(2) // null
+```
+
+## 更多资料
+
+- [发现 JavaScript 中闭包的强大威力](https://juejin.im/post/6844903769646317576)
+- [JavaScript 深入之闭包](https://github.com/mqyqingfeng/Blog/issues/9)
+- [我从来不理解 JavaScript 闭包，直到有人这样向我解释它...](https://zhuanlan.zhihu.com/p/56490498)
+- [破解前端面试（80% 应聘者不及格系列）：从闭包说起](https://juejin.im/post/6844903474212143117#heading-0)
+- [深入理解 JavaScript 系列（16）：闭包（Closures）](https://www.cnblogs.com/TomXu/archive/2012/01/31/2330252.html)
+- [JavaScript 深入之闭包](https://github.com/mqyqingfeng/Blog/issues/9)
+- [A simple guide to help you understand closures in JavaScript](https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4) (Prashant Ram)
+- [Master the JavaScript Interview: What is a Closure?](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36) (JavaScript Scene)
+- [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work)
+- [7 Interview Questions on JavaScript Closures. Can You Answer Them?](https://dmitripavlutin.com/javascript-closures-interview-questions/#questions-7-smart-multiplication)
diff --git "a/JavaScript/JavaScript \345\207\275\346\225\260\346\226\271\346\263\225 \342\200\224 call()\357\274\214apply() \345\222\214 bind().md" "b/JavaScript/JavaScript \345\207\275\346\225\260\346\226\271\346\263\225 \342\200\224 call()\357\274\214apply() \345\222\214 bind().md"
new file mode 100644
index 0000000..2208e14
--- /dev/null
+++ "b/JavaScript/JavaScript \345\207\275\346\225\260\346\226\271\346\263\225 \342\200\224 call()\357\274\214apply() \345\222\214 bind().md"	
@@ -0,0 +1,105 @@
+# JavaScript 函数方法 — call()，apply() 和 bind()
+
+## Function.prototype.call()
+
+[`Function.prototype.call()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call) 用于调用具有给定 `this` 上下文和单独提供的任何参数的函数。例如：
+
+```js
+function getUserInfo(...data) {
+  console.log(this.data, ...data)
+}
+
+const user = {
+  name: 'IU',
+  age: 18,
+  love: 'me'
+}
+const data = [0, 1, 2]
+
+getUserInfo.call(user, data) // IU [0, 1, 2]
+getUserInfo.call(user, ...data) // IU 1 2 3
+```
+
+## Function.prototype.apply()
+
+[`Function.prototype.apply()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 与 `Function.prototype.call()` 几乎相同，因为它使用给定的 `this` 上下文调用函数，但它要求参数作为数组提供。例如：
+
+```js
+function getUserInfo(...data) {
+  console.log(this.name, ...data)
+}
+
+const user = {
+  name: 'IU',
+  age: 18,
+  love: 'me'
+}
+const data = [0, 1, 2]
+
+getUserInfo.apply(user, data) // IU [0, 1, 2]
+getUserInfo.apply(user, ...data) // 抛出 TypeError
+```
+
+## Function.prototype.bind()
+
+[`Function.prototype.bind()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 与前两种方法略有不同。它不是使用给定的 `this` 上下文调用函数并返回结果，而是返回一个绑定了 `this` 上下文的函数，以及在调用返回的函数时在参数前面单独提供的任何参数。例如：
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  love: 'me'
+}
+const data = [0, 1, 2]
+
+function getUserInfo(...data) {
+  console.log(this.name, ...data)
+}
+
+let boundGetUserInfo = getUserInfo.bind(user)
+
+boundGetUserInfo(data) // IU [0, 1, 2]
+boundGetUserInfo(...data) // IU 1 2 3
+
+const boundGetUserInfo2 = getUserInfo.bind(user, 2)
+
+boundGetUserInfo2(data) // IU 2 [0, 1, 2]
+boundGetUserInfo2(...data) // IU 2 1 2 3
+```
+
+## 总结
+
+以下是 `call` 和 `apply` 方法的语法，其中 `fn` 表示给定函数：
+
+```js
+fn.apply(context, arrayOfArguments)
+fn.call(context, arg1, arg2, ...)
+```
+
+- `call` 和 `apply` 都用于调用函数，第一个参数将用作函数内 `this` 的值。
+- `call` 接受逗号分隔的参数作为后面的参数，而 `apply` 接受一个参数数组作为后面的参数。
+
+例如，下面的函数返回三个数字的和。
+
+```js
+const sum = (a, b, c) => a + b + c
+
+sum.apply(null, [1, 2, 3]) // 6
+sum.call(null, 1, 2, 3) // 6
+```
+
+- 您可以使用标记方法来记住 `apple`（A 代表数组）和 `call`（C 代表逗号）之间的区别。
+- `call` 和 `apply` 的第一个参数传入 `null` 时，它在调用时将被忽略，实际应用的是默认绑定规则：
+
+```js
+var count = 3
+function add(a, b) {
+  console.log(this.count, a, b)
+}
+
+add.call(null) // 3 undefined undefined
+add.call(null, 1, 2) // 3 1 2
+add.apply(null, [1, 2]) // 3 1 2
+```
+
+- `bind` 返回一个绑定了 `this` 上下文的函数，它不像 `call` 和 `apply` 一旦使用立即执行，你可以在之后执行这个返回的函数，它的参数和 `call` 一样，并且可以将参数在执行的时候添加。
diff --git "a/JavaScript/JavaScript \345\207\275\346\225\260\350\256\260\345\277\206.md" "b/JavaScript/JavaScript \345\207\275\346\225\260\350\256\260\345\277\206.md"
new file mode 100644
index 0000000..6ec9e9f
--- /dev/null
+++ "b/JavaScript/JavaScript \345\207\275\346\225\260\350\256\260\345\277\206.md"	
@@ -0,0 +1,113 @@
+# JavaScript 函数记忆
+
+[Memoization](https://zh.wikipedia.org/wiki/%E8%AE%B0%E5%BF%86%E5%8C%96) — 函数记忆或函数缓存，是一种优化技术，用于许多编程语言中，以减少冗余、昂贵的函数调用。这是通过缓存函数的返回值来实现的。
+
+以下是一个昂贵的函数调用，它以一种非常低效的方式找到数字的平方：
+
+```js
+const inefficientSquare = (num) => {
+  let total = 0
+  for (let i = 0; i < num; i++) {
+    for (let j = 0; j < num; j++) {
+      total++
+    }
+  }
+  return total
+}
+```
+
+我们可以使用相同的值运行此函数，每次都需要一段时间才能执行。
+
+```js
+const start = new Date()
+inefficientSquare(40000)
+console.log(new Date() - start) // 1278
+
+const start2 = new Date()
+inefficientSquare(40000)
+console.log(new Date() - start2) // 1245
+```
+
+每一次执行，它都会重新计算！
+
+## 为 memoize 编写伪代码
+
+在编写任何代码之前，让我们先通过 Memoizer 进行推理。
+
+- 引用函数作为输入
+- 返回一个函数
+- 创建某种形式的缓存以保存先前函数调用的结果
+- 以后调用函数时，如果存在缓存结果，则返回缓存结果
+- 如果缓存的值不存在，则调用函数并将结果存储在缓存中
+
+## 编码时间
+
+这是上述伪代码概述的实现。如引言中所述，这是次优的，您**不应该在生产中使用它**。我会解释为什么！
+
+```js
+const memoize = (func) => {
+  // 创建结果缓存
+  const results = {}
+  // 返回函数
+  return (...args) => {
+    // 为结果缓存创建键
+    const argsKey = JSON.stringify(args)
+    // 仅在没有缓存值时执行 func
+    if (!results[argsKey]) {
+      // 将函数调用结果存储在缓存中
+      results[argsKey] = func(...args)
+    }
+    // 返回缓存值
+    return results[argsKey]
+  }
+}
+```
+
+这个实现会有一些缺点，它使用 `JSON.stringify` 在结果缓存中创建键。而 `JSON.stringify` 最大问题是它不能序列化某些输入，如函数和 `Symbol`（以及 JSON 中找不到的任何内容）。
+
+## 测试效果
+
+```js
+const inefficientSquare = memoize((num) => {
+  let total = 0
+  for (let i = 0; i < num; i++) {
+    for (let j = 0; j < num; j++) {
+      total++
+    }
+  }
+  return total
+})
+
+const start = new Date()
+inefficientSquare(40000)
+console.log(new Date() - start) // 1251
+
+const start2 = new Date()
+inefficientSquare(40000)
+console.log(new Date() - start2) // 0
+```
+
+我们可以看到，在执行第二次时，输入相同的内容，它不需要时间重新计算；我们只是从一个对象中提取缓存的值。
+
+> **注意**：它可以节省计算时间，提高读取性能，读取速度更快。但它同时也会消耗更多的内存来保存以前的结果（用内存换区性能）。
+
+## 应用场景
+
+它常用于解决同参数的多次执行问题，大量的循环或递归调用的数学运算或判断。
+
+以下是一个斐波那契数列示例：
+
+```js
+const factorial = memoize((n) => (n <= 1 ? 1 : n * factorial(n - 1)))
+
+factorial(5)
+```
+
+## 函数记忆仅在纯函数中有效
+
+函数记忆很棒，但仅在您的纯函数中有效。换句话说，如果函数的返回值依赖于多个输入，那么这些输入的缓存值并不总是正确的。此外，如果您的函数有副作用，那么 memoizer 不会复制这些副作用，它只会返回最终返回的函数值。
+
+## 更多资料
+
+- [JavaScript 专题之函数记忆](https://github.com/mqyqingfeng/Blog/issues/46)
+- [JavaScript 纯函数](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E7%BA%AF%E5%87%BD%E6%95%B0.md)
diff --git "a/JavaScript/JavaScript \345\217\215\350\275\254\345\255\227\347\254\246\344\270\262.md" "b/JavaScript/JavaScript \345\217\215\350\275\254\345\255\227\347\254\246\344\270\262.md"
new file mode 100644
index 0000000..1a389a7
--- /dev/null
+++ "b/JavaScript/JavaScript \345\217\215\350\275\254\345\255\227\347\254\246\344\270\262.md"	
@@ -0,0 +1,107 @@
+# JavaScript 反转字符串
+
+今天，我们来写一个反转字符串的函数。它将实现如下所示：
+
+```txt
+"abcdefg" -> "gfedcba"
+```
+
+## Array.prototype.reverse()
+
+最简便的操作是使用 `Array.prototype.reverse()` 方法，它将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组。
+
+- 使用 `String.prototype.split()` 方法将字符串转换为数组。
+- 使用 `Array.prototype.reverse()` 方法将其反转，然后使用 `Array.prototype.join()` 方法将其转换回字符串
+
+```js
+const reverseString = (str) => str.split('').reverse().join('')
+
+console.log(reverseString('abcdefg')) // "gfedcba"
+```
+
+## 循环
+
+创建一个空字符串，它将保存反向字符串，循环遍历字符串中的每个字符，并将其附加到新字符串的开头。
+
+```js
+const reverseString = (str) => {
+  let result = ''
+
+  for (let i = str.length - 1; i >= 0; i--) {
+    result += str[i]
+  }
+
+  return result
+}
+
+console.log(reverseString('abcdefg')) // "gfedcba"
+```
+
+使用 `for ... of`
+
+```js
+const reverseString = (str) => {
+  let result = ''
+
+  for (let character of str) {
+    result += character
+  }
+
+  return reverseString
+}
+
+reverseString('abcdefg') // "gfedcba"
+```
+
+## Array.prototype.reduce()
+
+[`Array.prototype.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 方法对数组中的每个元素执行一个由您提供的 **reducer** 函数（升序执行），将其结果汇总为单个返回值。
+
+- 使用 `String.prototype.split()` 方法将字符串转换为数组。也可以使用扩展运算符，**看你**。
+- 使用 `Array.prototype.reduce()` 方法将其转换为字符串。
+
+```js
+const reverseString = (str) =>
+  str.split('').reduce((rev, char) => char + rev, '')
+
+console.log(reverseString('abcdefg')) // "gfedcba"
+```
+
+也可以使用 `Array.prototype.reduceRight()`
+
+```js
+const reverseString = (str) => [...str].reduceRight((acc, cur) => acc + cur)
+
+reverseString('abcdefg') // "gfedcba"
+```
+
+## Array.prototype.sort
+
+使用 `Array.prototype.sort` 反转字符串，这里不过多介绍，跟上面其他方法差不多，你可以再 [如何在 JavaScript 中对对象数组进行排序？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%AF%B9%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%EF%BC%9F.md) 查看 sort 如何使用。
+
+```js
+function reverseString(str) {
+  return str
+    .split('')
+    .sort(() => -1)
+    .join('')
+}
+
+reverseString('abcdefg') // "gfedcba"
+```
+
+## 递归
+
+递归是通过使用调用自身的函数来解决问题的一种方法。每次函数调用自身时，它都会将问题简化为子问题。此递归调用将继续，直到到达无需进一步递归即可调用子问题的点为止。
+
+> **注意**：给予递归正确的终止条件，以确保不会导致无限循环。
+
+- 递归终止的条件为字符串为空，将停止递归。
+- 使用 [`String.prototype.substring()`](https://dev.to/sloan/explain-recursion-like-im-five-5c6) 方法获取并删除字符串中的第一个字符，然后将其他字符传递给函数。在将第一个字符附加到 `return` 语句中- 。
+
+```js
+const reverseString = (str) =>
+  str ? reverseString(str.substring(1)) + str[0] : str
+
+reverseString('abcdefg') // "gfedcba"
+```
diff --git "a/JavaScript/JavaScript \345\252\222\344\275\223\346\237\245\350\257\242.md" "b/JavaScript/JavaScript \345\252\222\344\275\223\346\237\245\350\257\242.md"
new file mode 100644
index 0000000..62d1cbf
--- /dev/null
+++ "b/JavaScript/JavaScript \345\252\222\344\275\223\346\237\245\350\257\242.md"	
@@ -0,0 +1,125 @@
+# JavaScript 媒体查询
+
+首先，在 CSS3 中引入的媒体查询构成了响应式 Web 设计的核心组件。应用程序应根据每种类型设备（如手机、平板电脑、笔记本电脑、台式计算机）的限制进行定制，媒体查询提供了一种根据正在查看应用程序的设备大小设置视口尺寸的简便方法。
+
+媒体查询允许您根据屏幕大小不同的视口尺寸，还可以帮助您为不同的设备不同的样式属性，包括设置方案、字体样式、动画、边框和动画，以及您认识的任何其他 CSS 属性。
+
+一些前端开发人员可能会忽略了一个事实，即 JavaScript 也支持媒体查询。虽然不像 CSS 媒体查询那样流行，但 JavaScript 媒体查询提供了灵活性和许多优势，可以使它们成为某些用例的更好选择。
+
+## JavaScript 媒体查询的好处
+
+我们首先需要知道使用 JS 媒体查询的好处有哪些。
+
+JavaScript 媒体查询有以下两个主要优势：
+
+- **灵活性** — 您可以[通过编程方式将媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)合并到 JavaScript 代码中，以便它们仅在特定事件开始时或满足特定条件时触发。使用仅限 CSS3 的方法，媒体查询描述的更改将对每个屏幕大小调整事件生效。
+- **方便性** — JavaScript 媒体查询与使用 CSS 相同的语法。
+
+**考虑一下：如果你想动态改变不同屏幕尺寸的属性，你会怎么做？**
+
+你可能正在挠头，坚持这样做会很好：
+
+```js
+// 我们希望根据屏幕大小的变化执行的函数
+function foo() {
+  if (window.innerWidth < 1024) {
+    /* TODO */
+  }
+}
+
+// 设置一个监听器
+window.addEventListener('resize', foo)
+```
+
+在上面的代码块中，我们有一个 `if` 语句，该语句基于小于 **1024** 的 `window.innerWidth`（即桌面显示的标准屏幕大小）。据代码推测，该方法应该在应用程序在比台式计算机小的设备上运行。
+
+不幸的是，这种方法成本高昂，因为它会在每次调整大小时触发，而不仅仅是在用户在手机或平板电脑上打开应用程序时触发。没错，用户在桌面计算机上手动调整屏幕大小时，此方法将随时运行。过多的此类操作最终会导致应用程序延迟。
+
+值得庆幸的是，我们有完美的 API 来处理动态情况和响应设计：[`matchMedia API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)。
+
+基本上所有的浏览器都支持 `matchMedia`，以下是 [Can I Use](https://caniuse.com/?search=matchMedia) 给出的支持情况：
+
+![matchMedia 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-fa997ad418662f50.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果你想支持更低版本的浏览器，这里有个 [`polyfill`](https://github.com/paulirish/matchMedia.js/) 可以帮助到您。
+
+## 如何使用 JavaScript 媒体查询
+
+我们可以使用 `matchMedia API`，而不是像在上面的示例中那样将监听器附加到 `resize` 事件。
+
+`matchMedia()` 方法本质上是将监听器附加到媒体查询，但不会对窗口或屏幕大小的每一个更改做出响应，从而显著提高性能。如果我们利用这种方法，我们只负责开发我们希望为屏幕调整执行的逻辑，而不必担心其他条件、验证和代码优化。
+
+要使用此 API，我们可以调用 `window.matchMedia()` 并传入一个媒体查询字符串，指定要响应的屏幕大小。
+
+```js
+// 此媒体查询以最小宽度为 320px 的视口为目标
+const mQuery = window.matchMedia('(min-width: 320px)')
+```
+
+`matchMedia()` 方法返回一个新的 [`MediaQueryList` 对象](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList)，我们在上面的示例中将其命名为 `mQuery`。此对象存储有关应用于特定文档的媒体查询的信息，以及支持事件驱动和即时匹配的方法。这允许我们在 `resize` 事件开始时触发自定义逻辑。
+
+要执行必要的调整大小逻辑，我们需要检查 [`window.matches`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches)，这是一个布尔属性，如果媒体查询匹配，则返回 `true`。如果不匹配，则返回 `false`。在我们的示例中，此属性告诉我们是否存在与指定条件的实际匹配（即屏幕的最小宽度为 320px）。
+
+```js
+// 检查媒体查询是否已匹配
+if (mQuery.matches) {
+  console.log('媒体查询匹配！')
+}
+```
+
+可以看到，使用起来很简单。现在，只有一个问题：`window.matches` 只能执行此检查一次。为了促进响应性 web 设计，我们希望不断检查正在发生的任何更改。辛运的是，还有另一个方法可以与 `windows.matches` 配合使用来帮助我们实现这一点：[`addListener()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener) 方法。
+
+## `addListener()` 方法
+
+`matchMedia API` 提供了 `addListener()` 方法以及相应的 [`removeListener()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener) 方法。调用 `addListener()` 时，我们传入一个回调函数，该函数在检测到媒体查询匹配状态发生更改时运行。此回调函数是我们希望在 `resize` 事件中触发的函数：
+
+```js
+// 此媒体查询以最小宽度为 320px 的视口为目标
+const mQuery = window.matchMedia('(min-width: 320px)')
+
+function handleMobilePhoneResize(e) {
+  // 检查媒体查询是否为真
+  if (e.matches) {
+    console.log('媒体查询匹配！')
+  }
+}
+
+mQuery.addListener(handleMobilePhoneResize)
+```
+
+这种技术允许我们响应媒体查询更改，并根据需要动态调用其他方法。然后，这些动态调用的方法可以更改各种文档属性，如字体样式、边框和间距、动画等。
+
+例如，为 😊 emoji 添加动画，我们可以通过以下方式实现：
+
+```js
+const reduceMotionQuery = matchMedia('(min-width: 320px)')
+reduceMotionQuery.addListener(setBlushAnimate)
+
+function setBlushAnimate() {
+  if (reduceMotionQuery.matches) {
+    document.body.style.setProperty('--toggle', '0')
+    document.body.style.setProperty('--playState', 'paused')
+  } else {
+    document.body.style.setProperty('', '1')
+    document.body.style.setProperty('--playState', 'running')
+  }
+}
+
+setBlushAnimate()
+```
+
+效果如下：
+
+![😊 动起来](https://upload-images.jianshu.io/upload_images/18281896-75b066233e6a5ad8.image?imageMogr2/auto-orient/strip)
+
+> [查看效果](https://codepen.io/lio-zero/pen/OJmqaPO)
+
+## 最后
+
+现在，您应该对 JavaScript 中的媒体查询以及它们如何实现高效、自适应的设计有了基本的了解。`matchMedia API` 可以帮助您使用 JavaScript 创建媒体查询，`addListener()` 可以通过调用回调函数来构建响应性跨平台体验。
+
+定期轮询文档状态更改是一种低效且资源密集的方法，最终会导致应用程序延迟。使用 `matchMedia()` 可以观察特定文档，检测媒体查询条件中的更改，并根据媒体查询状态以编程方式更改文档属性。
+
+## 更多资料
+
+[Working with JavaScript Media Queries](https://css-tricks.com/working-with-javascript-media-queries/)
diff --git "a/JavaScript/JavaScript \346\225\260\347\273\204\345\216\273\351\207\215.md" "b/JavaScript/JavaScript \346\225\260\347\273\204\345\216\273\351\207\215.md"
new file mode 100644
index 0000000..7045156
--- /dev/null
+++ "b/JavaScript/JavaScript \346\225\260\347\273\204\345\216\273\351\207\215.md"	
@@ -0,0 +1,140 @@
+# JavaScript 数组去重
+
+## Set
+
+> `Set` 对象是一种新数据结构，允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
+
+我们可以从给定数组创建一个新的 `Set()`，以丢弃重复的值。然后使用扩展运算符（`...`）将其转换回数组。
+
+```js
+const arr = [1, 2, 2, '1', null, '', undefined, NaN, NaN, true, false]
+
+const unique = (arr) => [...new Set(arr)]
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
+```
+
+**注意**，如果数值中存的是对象，值相同，但他们引用的是不同的内存地址，他会认为每个对象都是唯一的：
+
+```js
+[...new Set([{ a: 1 }, { a: 1 }])] // [{a: 1}, {a: 1}]
+
+// 你可以改成如下
+const obj = { a: 1 }
+[...new Set([obj, obj])] // [{ a: 1 }]
+```
+
+Set 除了和扩展运算符配合，还可以和 `Array.form()` 一起使用：
+
+```js
+const unique = (arr) => Array.from(new Set(arr))
+
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
+```
+
+## Map
+
+创建一个空 `Map` 数据结构，使用 `Array.prototype.filter()` 和 创建一个只包含唯一值的新数组。
+
+```js
+const unique = (arr) => {
+  const seen = new Map()
+  return arr.filter((item) => !seen.has(item) && seen.set(item, 1))
+}
+
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
+```
+
+## Array.prototype.filter()
+
+使用 `Array.prototype.filter()` 创建一个只包含唯一值的新数组。
+
+```js
+const unique = (arr) => arr.filter((item, index) => arr.indexOf(item) === index)
+
+unique(arr) // [1, 2, "1", null, "", undefined, true, false]
+```
+
+**注意**：该方法直接把 `NaN` 全部过滤了。
+
+## Array.prototype.includes()
+
+```js
+const unique = (arr) => {
+  const newArr = []
+  arr.map((item) => !newArr.includes(item) && newArr.push(item))
+  return newArr
+}
+
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
+```
+
+也可以使用 `Array.prototype.indexOf()` 进行判断，但是存在着一个问题，该方法无法判断数组中是否含有 `NaN`。
+
+```js
+const unique = (arr) => {
+  const newArr = []
+  arr.map((item) => newArr.indexOf(item) == -1 && newArr.push(item))
+  return newArr
+}
+
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, NaN, true, false]
+```
+
+## Array.prototype.reduce()
+
+`Array.prototype.reduce()` 方法对数组中的每个元素执行一个由您提供的 **reducer** 函数（升序执行），将其结果组合成数组返回。
+
+```js
+const unique = (arr) =>
+  arr.reduce(
+    (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
+    []
+  )
+
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
+```
+
+## Object.hasOwnProperty()
+
+利用 `Object.hasOwnProperty` 判断是否存在对象属性。
+
+```js
+const unique = (arr) => {
+  const obj = {}
+  return arr.filter((item) =>
+    obj.hasOwnProperty(item) ? false : (obj[item] = true)
+  )
+}
+
+unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]
+```
+
+## Object 键值对
+
+利用**对象键值对**不能相同名来去重。
+
+```js
+const unique = (arr) => {
+  const obj = {}
+  // [1, 2, 3, 4, 4, 4]
+  arr.forEach((value) => obj[value] = '')
+  return Object.keys(obj)
+}
+
+unique(arr) // ["1", "2", "null", "", "undefined", "NaN", "true", "false"]
+```
+
+**注意两个问题**：
+
+- 数组中的任何类型都会转为字符串类型。
+- 当数组中存在相同值不同类型的数据时，会去掉其中一个。如数值 1 和字符串 '1'，会去掉其中一个。
+
+当然，为了快速开发，我们会使用一些工具库来对数组去重。例如：
+
+- lodash 的 `_.uniq(array)`
+- Ramda 的 `R.uniq(array)`
+
+## 更多资料
+
+- [Remove duplicate values from JS array [duplicate]](https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array)
+- [JavaScript 专题之数组去重](https://github.com/mqyqingfeng/Blog/issues/27)
diff --git "a/JavaScript/JavaScript \346\225\260\347\273\204\346\226\271\346\263\225\346\200\273\347\273\223.md" "b/JavaScript/JavaScript \346\225\260\347\273\204\346\226\271\346\263\225\346\200\273\347\273\223.md"
new file mode 100644
index 0000000..061b854
--- /dev/null
+++ "b/JavaScript/JavaScript \346\225\260\347\273\204\346\226\271\346\263\225\346\200\273\347\273\223.md"	
@@ -0,0 +1,1046 @@
+# JavaScript 数组方法总结
+
+## Array.prototype.pop()
+
+[`pop()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) 方法从数组中删除最后一个元素并返回该元素。此方法更改数组的长度。
+
+```js
+const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']
+
+plants.pop() // "tomato"
+console.log(plants) // ["broccoli", "cauliflower", "cabbage", "kale"]
+plants.pop()
+console.log(plants) // ["broccoli", "cauliflower", "cabbage"]
+```
+
+对空数组使用 `pop` 方法，不会报错，而是返回`undefined`。
+
+```js
+;[].pop() // undefined
+```
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.push()
+
+[`push()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。
+
+```js
+const animals = ['pigs', 'goats', 'sheep']
+
+animals.push('cows') //  4
+console.log(animals) // ["pigs", "goats", "sheep", "cows"]
+animals.push('chickens') // 5
+console.log(animals) //  ["pigs", "goats", "sheep", "cows", "chickens"]
+```
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.shift()
+
+[`shift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) 方法从数组中删除第一个元素并返回该元素。此方法更改数组的长度。
+
+```js
+const arr = [1, 2, 3]
+const firstElement = arr.shift()
+
+console.log(arr) //  [2, 3]
+console.log(firstElement) // 1
+```
+
+遍历并清空一个数组
+
+```js
+const arr = [1, 2, 3]
+let item
+
+while ((item = list.shift())) {
+  console.log(item)
+}
+
+list // []
+```
+
+上面代码通过 `list.shift()` 方法每次取出一个元素，从而遍历数组。它的前提是数组元素不能是 `0` 或任何布尔值等于 `false` 的元素，因此这样的遍历不是很可靠。
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.unshift()
+
+[`unshift()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) 方法将一个或多个元素添加到数组的开头，并返回数组的新长度。
+
+```js
+const arr = [1, 2, 3]
+
+console.log(arr.unshift(4, 5)) //  5
+console.log(arr) // [4, 5, 1, 2, 3]
+```
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.join()
+
+[`join()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 方法以指定参数作为分隔符，将数组的所有元素连接为一个字符串返回。如果不提供参数，默认用逗号分隔。
+
+```js
+const arr = ['Fire', 'Air', 'Water']
+
+console.log(arr.join()) // "Fire,Air,Water"
+console.log(arr.join(' ')) // "Fire Air Water"
+console.log(arr.join('-')) // "Fire-Air-Water"
+```
+
+如果数组成员是 `undefined` 或 `null` 或空位，会被转成空字符串。
+
+```js
+[undefined, null].join('#') // '#'
+
+['a',, 'b'].join('-') // 'a--b'
+```
+
+通过 `call` 方法，`join` 方法也可以用于字符串或类数组的对象。
+
+```js
+Array.prototype.join.call('hello', '-') // "h-e-l-l-o"
+
+const obj = { 0: 'a', 1: 'b', length: 2 }
+Array.prototype.join.call(obj, '-') // 'a-b'
+```
+
+**示例**：重复字符串
+
+使用 `join` 方法来重复字符串。
+
+```js
+Array(4).join('LOVE') // 'LOVELOVELOVE'
+```
+
+## Array.prototype.concat()
+
+[`concat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
+
+```js
+const arr1 = ['a', 'b', 'c']
+const arr2 = ['d', 'e', 'f']
+
+console.log(arr1.concat(arr2)) // ["a", "b", "c", "d", "e", "f"]
+```
+
+除了数组作为参数，`concat`也接受其他类型的值作为参数，添加到目标数组尾部。
+
+```js
+const arr = []
+
+arr.concat(1, '1', true, {}, null, undefined) // [1, '1', true, {...}, null, undefined]
+```
+
+如果数组成员包括对象，`concat` 方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是新数组拷贝的是对象的引用。
+
+## Array.prototype.isArray()
+
+[`isArray()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) 方法确定传递的值是否为数组。
+
+```js
+Array.isArray([1, 2, 3]) // true
+Array.isArray({ foo: 123 }) // false
+Array.isArray('foobar') // false
+Array.isArray(undefined) // false
+```
+
+## Array.prototype.reverse()
+
+[`reverse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) 反转数组的元素顺序。第一个数组元素变为最后一个，最后一个数组元素变为第一个。
+
+```js
+const arr = ['one', 'two', 'three']
+console.log(arr) // ['one', 'two', 'three']
+
+const reversed = arr.reverse()
+console.log(reversed) // ['three', 'two', 'one']
+console.log(arr) // ['three', 'two', 'one']
+```
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.slice()
+
+[`slice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 方法选取数组的一部分，并返回一个新数组。原始数组不会被修改。
+
+```js
+const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
+
+console.log(animals.slice(2)) // ["camel", "duck", "elephant"]
+console.log(animals.slice(2, 4)) // ["camel", "duck"]
+console.log(animals.slice(1, 5)) // ["bison", "camel", "duck", "elephant"]
+```
+
+如果 `slice` 方法的参数是负数，则表示倒数计算的位置。
+
+```js
+animals.slice(-2) // ['duck', 'elephant']
+animals.slice(-2, -1) // ['duck']
+```
+
+`slice` 方法的一个重要应用，是将类数组的对象转为真正的数组。
+
+```js
+Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) // ['a', 'b']
+```
+
+## Array.prototype.splice()
+
+[`splice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 方法通过删除现有元素或添加新元素来更改数组的内容。
+
+```js
+const months = ['Jan', 'March', 'April', 'June']
+months.splice(1, 0, 'Feb')
+
+// 在第 1 个索引位置插入
+console.log(months) // ['Jan', 'Feb', 'March', 'April', 'June']
+
+// 在第 4 个索引处替换 1 个元素
+months.splice(4, 1, 'May')
+console.log(months) // ['Jan', 'Feb', 'March', 'April', 'May']
+```
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.indexOf()
+
+[`indexOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) 方法返回数组中可以找到给定元素的第一个索引，如果该元素不存在，则返回 -1。
+
+```js
+const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
+
+console.log(beasts.indexOf('bison')) // 1
+
+// 从索引 2 开始
+console.log(beasts.indexOf('bison', 2)) // 4
+console.log(beasts.indexOf('giraffe')) // -1
+```
+
+## Array.prototype.lastIndexOf()
+
+[`lastIndexOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf) 方法返回数组中可以找到给定元素的最后一个索引，如果该元素不存在，则返回 -1。从 fromIndex 开始向后搜索数组。
+
+```js
+const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']
+
+console.log(animals.lastIndexOf('Dodo')) // 3
+
+console.log(animals.lastIndexOf('Tiger')) // 1
+```
+
+## Array.prototype.includes()
+
+[`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 是 ES7 新增的数组方法，用于判断数组是否包含某个元素，并根据条件返回 `true` 或 `false`。
+
+```js
+const arr = [10, 11, 3, 20, 5]
+
+const includesTwenty = arr.includes(20)
+console.log(includesTwenty) // true
+```
+
+`includes` 方法还接受一个可选参数，根据索引来指定要从数组中的哪个位置开始搜索。默认情况下，`index` 参数为零。
+
+```js
+const arr = [1, 2, 3, 4, 5]
+
+if (arr.includes(3, 2)) {
+  console.log('item found')
+} else {
+  console.log('item not found')
+}
+```
+
+> **建议**：使用 `includes` 替代 `indexOf` 检查数组是否包含某个元素。
+
+## Array.prototype.reduce()
+
+[`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) 方法根据 reducer 函数和初始值创建任何类型的输出值。
+
+```js
+const arr = [1, 2, 3, 4]
+const reducer = (acc, cur) => acc + cur
+
+console.log(arr.reduce(reducer)) // 10
+console.log(arr.reduce(reducer, 5)) // 15
+```
+
+注意，reducer 函数必须显式返回一个值，否则 `reduce()` 将返回 `undefined`。
+
+通过 reducer 函数仅获取 `name` 键：
+
+```js
+const input = [
+  { name: 'O.O', age: 18 },
+  { name: 'D.O', age: 18 },
+  { name: 'K.O', age: 18 },
+  { name: 'O.K', age: 18 }
+]
+
+const reducer = (acc, cur) => {
+  acc.push({ name: cur.name })
+  return acc
+}
+
+let output = input.reduce(reducer, [])
+console.log(output)
+```
+
+`Reduce()` 支持所以现代浏览器，以及 IE9 及更高版本，如果想支持低版本浏览器，可以添加一个 [polyfill](https://github.com/zloirock/core-js#ecmascript-array) 以支持 IE6。
+
+> 推荐：[Understand JavaScript Reduce With 5 Examples](http://thecodebarbarian.com/javascript-reduce-in-5-examples.html)。
+
+## Array.prototype.reduceRight()
+
+[`reduceRight()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight) 方法对累加器应用一个回调函数，数组的每个值（从右到左）都必须将其减少为单个值。
+
+```js
+const arr = [
+  [0, 1],
+  [2, 3],
+  [4, 5]
+].reduceRight((acc, cur) => acc.concat(cur))
+
+console.log(arr) // [4, 5, 2, 3, 0, 1]
+```
+
+## Array.prototype.filter()
+
+[`filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 方法使用一个过滤函数创建一个新数组，只保留基于该函数返回 `true` 的元素。结果是一个长度等于或小于原始数组长度的数组，包含与原始数组相同元素的子集。
+
+```js
+const array = [10, 11, 3, 20, 5]
+const greaterThanTen = array.filter((item) => item > 10)
+console.log(greaterThanTen) //[11, 20]
+```
+
+**示例**：过滤对象数组
+
+```js
+const countries = [
+  { name: 'Nigeria', continent: 'Africa' },
+  { name: 'Nepal', continent: 'Asia' },
+  { name: 'Angola', continent: 'Africa' },
+  { name: 'Greece', continent: 'Europe' },
+  { name: 'Kenya', continent: 'Africa' },
+  { name: 'Greece', continent: 'Europe' }
+]
+
+let asianCountries = countries.filter((country) => country.continent === 'Asia')
+
+console.log(asianCountries) // [{name: "Nepal", continent: "Asia"}]
+```
+
+**示例**：在数组中搜索特定字母
+
+```js
+const names = ['Victoria', 'Pearl', 'Olivia', 'Annabel', 'Sandra', 'Sarah']
+const filterItems = (letters) => names.filter((name) => name.includes(letters))
+
+console.log(filterItems('ia')) // ["Victoria", "Olivia"]
+```
+
+## Array.prototype.map()
+
+[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 方法将提供的函数应用于数组的每个元素并返回一个新数组。
+
+```js
+const arr = [1, 2, 3]
+const double = (x) => x * 2
+arr.map(double) // [2, 4, 6]
+```
+
+有一道经典的面试题可以很好的检验您是否理解 `map` 方法：
+
+```js
+;['1', '2', '3'].map(parseInt)
+```
+
+您可以在 [A JavaScript Optional Argument Hazard](https://wirfs-brock.com/allen/posts/166) 找到问题的解决思路。
+
+## Array.prototype.flat()
+
+[`flat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) 方法创建一个新数组，其中所有子数组元素递归连接到该数组中，直到指定的深度。
+
+```js
+const arr1 = [1, 2, [3, 4]]
+arr1.flat() // [1, 2, 3, 4]
+
+const arr2 = [1, 2, [3, 4, [5, 6]]]
+arr2.flat() // [1, 2, 3, 4, [5, 6]]
+
+const arr3 = [1, 2, [3, 4, [5, 6]]]
+arr3.flat(2) // [1, 2, 3, 4, 5, 6]
+
+const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
+arr4.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+```
+
+> 更多实现技巧可查阅[数组扁平化](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96.md)。
+
+## Array.prototype.flatMap()
+
+[flatMap()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) 方法首先使用 `map` 方法映射每个元素，然后将结果压缩成一个新数组。它与 `map` 连着深度值为 1 的 `flat` 几乎相同，但 `flatMap` 通常在合并成一种方法的效率稍微高一些。
+
+```js
+const arr = [1, 2, 3, 4]
+
+arr.flatMap((x) => [x * 2]) // [2, 4, 6, 8]
+
+// 只有一层是扁平的
+arr.flatMap((x) => [[x * 2]]) // [[2], [4], [6], [8]]
+```
+
+## Array.prototype.sort()
+
+[`sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 方法对数组中的元素进行适当排序并返回数组。这种情况不一定稳定。默认排序顺序根据字符串 Unicode 代码点。
+
+```js
+const months = ['March', 'Jan', 'Feb', 'Dec']
+months.sort() // ['Dec', 'Feb', 'Jan', 'March']
+console.log(months) // ["Dec", "Feb", "Jan", "March"]
+
+const arr = [1, 30, 4, 21, 100000]
+arr.sort()
+console.log(arr) // [1, 100000, 21, 30, 4]
+```
+
+我们可以向 `sort` 方法传入一个指定按某种顺序进行排列的函数。
+
+```js
+arr.sort((a, b) => a - b) // [1, 4, 21, 30, 100000]
+arr.sort((a, b) => b - a) // [100000, 30, 21, 4, 1]
+```
+
+> 更多内容可查阅[如何在 JavaScript 中对对象数组进行排序？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%AF%B9%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%EF%BC%9F.md)
+>
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.every()
+
+[`every()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) 方法对数组中每一项运行给定函数，如果函数对每一项都返回 `true`，则返回 `true`。
+
+```js
+const arr = [1, 2, 3, 4, 5]
+
+const isBelowThreshold = (currentValue) => currentValue < 10
+console.log(arr.every(isBelowThreshold)) // true
+```
+
+## Array.prototype.some()
+
+[`some()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) 方法对数组中每一项运行给定函数，如果函数对任一项返回 `true`，则返回 `true`。
+
+```js
+const arr = [1, 2, 3, 4, 5]
+
+// 检查元素是否为偶数
+const even = (item) => item % 2 === 0
+console.log(arr.some(even)) // true
+```
+
+**示例**：数组扁平化
+
+```js
+let arr = [1, 2, [3, 4, 5, [6, 7], 8], 9, 10, [11, [12, 13]]]
+
+const flatten = function (arr) {
+  // 只要有一个元素为数组，那么循环继续
+  while (arr.some(Array.isArray)) {
+    arr = [].concat(...arr)
+  }
+  return arr
+}
+
+console.log(flatten(arr))
+```
+
+## Array.prototype.forEach()
+
+[`forEach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) 方法对每个数组元素执行一次提供的回调函数。
+
+```js
+const arr = ['a', 'b', 'c']
+
+arr.forEach((item) => console.log(item))
+
+// "a"
+// "b"
+// "c"
+```
+
+## Array.prototype.find()
+
+[`find()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) 方法返回匹配器函数为其返回 `true` 的第一个元素。否则返回 -1。其结果是原始数组中的一个元素。
+
+```js
+const arr = [10, 11, 3, 20, 5]
+
+const greaterThanTen = arr.find((item) => item > 10)
+console.log(greaterThanTen) // 11
+```
+
+## Array.prototype.findIndex()
+
+[`findIndex()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。
+
+```js
+const arr = [5, 12, 8, 130, 44]
+
+const isLargeNumber = (item) => item > 13
+console.log(arr.findIndex(isLargeNumber)) // 3
+```
+
+## Array.prototype.findLast/findLastIndex
+
+通过 `find` 和 `findIndex` 在数组中查找值是一种常见的做法。不过，这些方法从数组开头开始迭代。
+
+```js
+const things = [{ v: 1 }, { v: 2 }, { v: 3 }, { v: 4 }, { v: 5 }]
+
+things.find((item) => item.v > 3) // {v: 4}
+things.findIndex((item) => item.v > 3) // 3
+```
+
+如果您想从数组的末尾开始搜索数组，则必须反转数组并使用提供的方法。这并不好，因为它需要不必要的数组突变。
+
+幸运的是，有一个针对 `findLast` 和 `findLastIndex` 的 ECMAScript 提案。
+
+```js
+const things = [{ v: 1 }, { v: 2 }, { v: 3 }, { v: 4 }, { v: 5 }]
+
+things.findLast((item) => item.v > 3) // {v: 5}
+things.findLastIndex((item) => item.v > 3) // 4
+```
+
+该提案目前处于第三阶段，目前已经 Edge、chromium 和 Safari 的最新版本得到支持。至于其余的，[core-js 和 Babel 已经提供了一个 polyfill](https://github.com/zloirock/core-js/blob/master/packages/core-js/internals/array-iteration-from-last.js)。
+
+以下是 `findLast` 的支持情况，`findLastIndex` 与其相同：
+
+![findLast 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-f397049f25922096.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## Array.prototype.toLocaleString()
+
+[`toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString) 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。
+
+```js
+const arr = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')]
+const localeString = arr.toLocaleString('en', { timeZone: 'UTC' })
+
+console.log(localeString) // "1,a,12/21/1997, 2:12:00 PM"
+// 这假设 'en' 语言环境和 UTC 时区 - 您的结果可能会有所不同
+```
+
+## Array.prototype.keys()
+
+[`keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys) 方法返回一个新的数组可迭代对象，包含原始数组中每个索引的键。
+
+```js
+const arr = ['a', 'b', 'c']
+
+for (let key of arr.keys()) {
+  console.log(key) // 0 1 2
+}
+```
+
+## Array.prototype.values()
+
+[`values()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values) 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。
+
+```js
+const arr = ['a', 'b', 'c']
+
+for (const value of arr.values()) {
+  console.log(value) // "a" "b" "c"
+}
+```
+
+## Array.prototype.entries()
+
+[`entries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries) 方法返回一个新的数组可迭代对象，该对象包含数组中每个索引的键/值对。
+
+```js
+const arr = ['a', 'b', 'c']
+const iterator = arr.entries()
+
+console.log(iterator.next().value) // [0, "a"]
+
+console.log(iterator.next().value) // [1, "b"]
+```
+
+## Array.prototype.fill()
+
+[`fill()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill) 方法使用一个固定值来填充从起始索引（默认 `0`）到结束索引（默认 `array.length`）的数组的所有元素。它返回修改后的数组。
+
+```js
+const arr = [1, 2, 3, 4]
+
+// 从位置 2 到位置 4 填充 0
+console.log(arr.fill(0, 2, 4)) // [1, 2, 0, 0]
+
+// 从位置 1 填充 5
+console.log(arr.fill(5, 1)) // [1, 5, 5, 5]
+
+console.log(arr.fill(6)) // [6, 6, 6, 6]
+
+Array(3) // [empty × 3]
+const money = () => '🤑'
+[...Array(3)].map(money) // ['🤑', '🤑', '🤑']
+Array(3).fill('🤑') // ['🤑', '🤑', '🤑']
+```
+
+**示例**：重复字符串
+
+```js
+Array(3).fill('LOVE').join('')
+
+// "LOVELOVELOVE"
+```
+
+该片段的运行很简单：`Array(3)` 创建一个包含 3 个空项的新数组，`fill('LOVE')` 在每个空项中填充 LOVE，`join()` 将所有元素连接成一个字符串。
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.copyWithin()
+
+[`copyWithin()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin) 方法将数组的一部分复制到同一数组中的另一个位置并返回它，而不修改其大小。
+
+```js
+const arr = ['a', 'b', 'c', 'd', 'e']
+
+// 将索引 3 处的元素复制到索引 0
+console.log(arr.copyWithin(0, 3, 4)) // ["d", "b", "c", "d", "e"]
+
+// 将从索引 3 到末尾的所有元素复制到索引 1
+console.log(arr.copyWithin(1, 3)) // ["d", "d", "e", "d", "e"]
+```
+
+> **注意**：该方法会改变原数组。
+
+## Array.prototype.of()
+
+[`Array.of()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of) 方法从数量可变的参数创建一个新的数组实例，而不管参数的数量或类型如何。
+
+```js
+Array.of(7) // [7]
+Array(7) // [empty × 7]，7个空插槽的数组
+
+Array.of(1, 2, 3) // [1, 2, 3]
+Array(1, 2, 3) // [1, 2, 3]
+```
+
+`Array.of()` 和数组构造函数之间的区别在于处理整数参数：`Array.of(7)` 创建一个包含单个元素 7 的数组，而 `Array(7)` 创建一个长度属性为 7 的空数组（**注意**：这意味着数组包含 7 个空插槽，而不是包含实际未定义值的插槽）。
+
+## Array.prototype.from()
+
+[`Array.from()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 用于将类数组对象或可迭代对象转化为一个新的浅拷贝数组实例。
+
+```js
+console.log(Array.from('foo')) // ["f", "o", "o"]
+console.log(Array.from([1, 2, 3], (x) => x + x)) // [2, 4, 6]
+```
+
+`Array.from()` 接受第二个 `map` 参数。方便创建和填充特定长度的数组。
+
+![使用 Array.from 填充特定长度](https://upload-images.jianshu.io/upload_images/18281896-1498e669acad1b28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+ES6 `Set`是可以相互转换的，可以使用 `Array.from` 转换成数组
+
+```js
+const article = new Set(['JavaScript', 'TypeScript', 'Node.js'])
+
+article // Set(3) {'JavaScript', 'TypeScript', 'Node.js'}
+Array.from(article) // ['JavaScript', 'TypeScript', 'Node.js']
+```
+
+**示例**：重复字符串
+
+一个类数组对象必须含有 `length` 属性，且元素属性名必须是数值或者可转换为数值的字符。我们正好可以利用这一点。
+
+我们将 `length` 属性设置为 3，使用 `from()` 方法初始化数组，每个位置对应 1 个 `undefined`。 如下：
+
+```js
+Array.from({ length: 3 }) // [undefined, undefined, undefined]
+```
+
+现在我们使用第二个参数，这是一个 `map` 函数，它将调用数组的每个元素。在这里，我们用 `'LOVE'` 替换所有的 `undefined`。
+
+```js
+Array.from({ length: 3 }, () => 'LOVE') // ['LOVE', 'LOVE', 'LOVE']
+```
+
+最后我们调用 `join()` 方法将数组中的所有元素组合成一个字符串。
+
+```js
+Array.from({ length: 3 }, () => 'LOVE').join('') //'LOVELOVELOVE'
+```
+
+**示例**：分块
+
+在使用 API 时，我经常需要将用户列表分块并批量发送。`Array.from()` 是一种将数组分块的好方法，因为第二个参数是一个 `map` 函数。
+
+```js
+function chunkify(array, chunkSize = 10) {
+  const chunks = Array.from(
+    { length: Math.ceil(array.length / 10) },
+    (_, i) => {
+      const start = chunkSize * i
+      return array.slice(start, start + chunkSize)
+    }
+  )
+  return chunks
+}
+
+chunkify(hugeArray) // [[...], [...], ....]
+```
+
+## Array.prototype.toString()
+
+[`toString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) 方法返回一个字符串，表示指定的数组及其元素。
+
+```js
+const arr = [1, 2, 'a', 'b']
+console.log(arr.toString()) // "1,2,a,b"
+
+const arr = [1, 2, 3, [4, 5, 6]]
+console.log(arr.toString()) // "1,2,3,4,5,6"
+```
+
+## Array.prototype.valueOf()
+
+[`valueOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) 方法返回指定对象的原始值。
+
+不同对象的 `valueOf` 方法不尽一致，数组的 `valueOf` 方法返回数组本身。
+
+```js
+const arr = [1, 2, 3]
+arr.valueOf() // [1, 2, 3]
+```
+
+> 详细查看 MDN 上 [`valueOf` 各个类型的示例](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf#%E4%BD%BF%E7%94%A8_valueof)。
+
+## Array.prototype.at()
+
+[`at()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/at) 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。
+
+语法：
+
+```js
+at(index)
+```
+
+### 通过索引获取数组项
+
+以下是一个示例，假设我们有以下数组：
+
+```js
+let arr = ['O.O', 'D.O', 'K.O', 'O.K', 'KK']
+```
+
+使用括号表示法，可以通过其索引获取项：
+
+```js
+arr[2] // 'K.O'
+
+arr[4] // 'KK'
+```
+
+使用 `at()` 方法可以执行相同的操作。在数组中调用它，并传入所需的索引，它返回匹配项。
+
+```js
+arr.at(2) // 'K.O'
+
+arr.at(4) // 'KK'
+```
+
+如果要从数组末尾获取项，通过括号表示法，需要获取数组的长度，从想要的末尾减去数字，然后将其传入。
+
+```js
+arr[arr.length - 2] // 'O.K'
+```
+
+而使用 `at()` 方法，只需将索引作为负整数传递。
+
+```js
+arr.at(-2) // 'O.K'
+```
+
+## 有无 `mutation`
+
+**`mutation` 译为突变，可以简单理解为是否改变原数组，有无副作用。**
+
+**mutation**:
+
+- `splice()`、`copyWithin()`、`fill()`、`pop()`、`push()`
+- `reverse()`、`shift()`、`sort()`、`unshift()`
+
+**no mutation**:
+
+- `some()`、`map()`、`forEach()`、`every()`、`filter()`、`reduce()`、`reduceRight()`
+- `find()`、`findIndex()`、`lastIndexOf()`、`includes()`、`indexOf()`、`findLast()`、`findLastIndex()`
+- `join()`、`slice()`、`concat()`、`flat()`、`flatMap()`、`of()`、`from()`
+- `toLocaleString()`、`toSource()`、`toString()`、`valueOf()`、`keys()`、`values()`、`entries()`
+
+## 根据特定条件搜索
+
+上面已经介绍了数组的所有方法，我们可以使用一些数组方法来代替 `for` 循环来搜索数组。根据需要，您可以决定哪种方法最适合您的用例。
+
+- 如果要查找数组中满足特定条件的所有项，请使用 `filter`。
+- 如果要检查至少一项是否满足特定条件，请使用 `find`。
+- 如果要检查数组是否包含特定值，请使用 `includes`。
+- 如果要查找数组中特定项的索引，请使用 `indexOf`。
+- 如果要检查数组中所有元素是否满足给定条件，并且返回一个布尔值，请使用 `every`。
+- 如果要检查数组中任一元素是否满足给定条件，并且返回一个布尔值，请使用 `some`。
+
+## concat 和 push 的区别
+
+`concat` 和 `push` 是将一个或多个项附加到给定数组的常用方法。
+
+### 区别
+
+`concat` 方法不会更改现有数组：
+
+```js
+const shapes = ['Triangle', 'Square']
+
+shapes.concat(['Circle', 'Rectangle']) // ['Triangle', 'Square', 'Circle', 'Rectangle']
+shapes // ['Triangle', 'Square']
+```
+
+另一方面，`push` 方法会修改原始数组。
+
+```js
+const animals = ['cat', 'dog', 'mouse']
+animals.push('bird', 'cow') // 5
+animals // ['cat', 'dog', 'mouse', 'bird', 'cow']
+```
+
+在上面的示例代码中，两种方法产生不同的结果。`concat` 返回一个新数组，`push` 返回更新数组的长度。
+
+因为 `concat` 创建了一个新数组来保存合并数组的结果，所以它比 `push` 慢。
+
+对于小型数组，这两种方法在性能方面不会产生显著差异。但是如果你必须使用大数组，性能是应用程序的关键，那么考虑使用 `push`。
+
+### 提示
+
+您可以使用 ES6 扩展运算符将不同的数组合并为一个：
+
+```js
+const a = [1, 2, 3]
+const b = [4, 5, 6]
+const c = [7, 8, 9]
+
+const final = [...a, ...b, ...c] // [1, 2, 3, 4, 5, 6, 7, 8, 9]
+```
+
+如果我们也使用 `push` 方法，则扩展运算符很方便：
+
+```js
+const a = [1, 2, 3]
+const b = [4, 5, 6]
+
+a.push(...b) // 6
+a // [1, 2, 3, 4, 5, 6]
+```
+
+`Array.prototype.push.apply(firstArray, secondArray)` 是另一个同样适用于 ES5 的选项。但是，如果第二个数组非常大，则不建议使用这种方法，因为一个函数中的最大参数数是有限的。
+
+```js
+Array.prototype.push.apply(a, b) // 6
+a // [1, 2, 3, 4, 5, 6]
+```
+
+如果你好奇的话，它的硬编码是 [65536](https://bugs.webkit.org/show_bug.cgi?id=80797)。
+
+[JavaScript Array.push is 945x faster than Array.concat 🤯🤔](https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki) 提供了许多基准来证明为什么 `push` 比 `concat` 更快。
+
+## `slice` 和 `splice` 的区别
+
+`slice` 和 `splice` 是获取给定数组子数组的常用方法。
+
+### 区别
+
+语法：
+
+```js
+array.slice(startingIndex, endingIndex)
+array.splice(startingIndex, length, ...items)
+```
+
+虽然第一个参数彼此相同，表示删除元素的起始索引，但第二个参数不同。
+
+`slice` 和 `splice` 的第二个参数分别是结束索引和子项数。
+
+`splice` 更改原始数组，而 `slice` 不更改。
+
+给定从 1 到 5 的数字数组：
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const sub = arr.splice(2, 3)
+
+// 原始数组已修改
+arr // [1, 2]
+sub // [3, 4, 5]
+```
+
+现在，让我们将相同的参数传递给 `slice`：
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const sub = arr.slice(2, 3)
+
+// 原始数组未被修改
+arr // [1, 2, 3, 4, 5]
+sub // [3]
+```
+
+使用 `splice` 方法，可以通过将项目传递到最后一个参数来保持项目不从原始数组中移除。
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const sub = arr.splice(2, 3, 3, 4, 5)
+
+arr // [1, 2, 3, 4, 5]
+```
+
+### 提示
+
+我们可以通过忽略结束索引来克隆数组（浅拷贝）：
+
+```js
+const clone = (arr) => arr.slice(0)
+```
+
+> 更多详细内容可查阅[浅拷贝和深拷贝](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D.md)
+
+## `some` 和 `every`
+
+这两个方法类似**断言**（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。
+
+在前面方法的介绍中，我们已经大致了解了 `every` 和 `some` 方法的工作原理，下面是您可以从中获得的一些附加功能：
+
+- `Array.every` 和 `Array.some` 可以接受第二个参数，该参数将在回调函数的执行中用作 `this` 参数。
+- 回调函数可以接受两个额外的参数：当前项的索引和对调用该方法的数组的引用。
+
+来看看一个示例：
+
+```js
+const obj = { name: 'Daffodil' }
+const arr = [1, 2, 3, 4, 5, 6]
+
+arr.every(function (el, i, arr) {
+  return el > i && arr[i] === el && this === obj
+}, obj) // true
+```
+
+- 每个元素都大于其索引
+- `arr[i]`（其中 `i` 当前索引与当前元素相同）
+- 我们提供了 `obj` 作为 `this` 参数的引用，因此 `this` 等于 `obj`
+
+> **注意**：对于空数组，`some` 方法返回 `false`，`every` 方法返回 `true`，回调函数都不会执行。
+
+```js
+const isEven = x => x % 2 === 0
+
+[].some(isEven) // false
+[].every(isEven) // true
+```
+
+`some` 和 `every` 方法还可以接受第二个参数，用来绑定参数函数内部的 `this` 变量。
+
+## 通过索引获取元素
+
+```js
+const list = [1, 2, 3, 4, 5]
+list[1] // 2
+list.indexOf(2) // 1
+```
+
+## 通过索引获取数组的子集
+
+**不改变原数组**：
+
+```js
+list.slice(0, 1) // [1]
+list.slice(1) // [2, 3, 4, 5]
+list.slice(1, 2) // [2]
+```
+
+**改变原数组**：
+
+```js
+re = list.splice(1) // re = [2, 3, 4, 5]  list == [1]
+re = list.splice(1, 2) // re = [2, 3]      list == [1, 4, 5]
+```
+
+## 删除元素
+
+```js
+const list = [1, 2, 3, 4, 5]
+list.pop() // 5    list == [1, 2, 3, 4]
+list.shift() // 1    list == [2, 3, 4, 5]
+list.splice(2, 1) // [3]  list == [1, 2, 3, 4]
+```
+
+## 替换元素
+
+```js
+const list = [1, 2, 3, 4, 5]
+
+list.splice(2, 1, 6) // list == [1, 2, 6, 4, 5]
+```
+
+## 插入
+
+```js
+const list = [1, 2, 3, 4, 5]
+
+// 指定元素之后插入
+list.splice(list.indexOf(2) + 1, 0, 1) // [1, 2, 1, 3, 4, 5]
+
+// 指定元素之前插入
+list.splice(list.indexOf(2), 0, 6) // [1, 6, 2, 1, 3, 4, 5]
+```
+
+## 添加元素
+
+不改变原数组：
+
+```js
+list.concat([6]) // [1, 2, 3, 4, 5, 6]
+```
+
+改变原数组：
+
+```js
+list.push(6) // list == [1, 2, 3, 4, 5, 6]
+list.unshift(6) // list == [6, 5, 4, 3, 2, 1]
+list.splice(2, 0, 6) // list == [1, 2, 6, 3, 4, 5]
+```
+
+## 更多资料
+
+- [Array](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- [数组方法](https://zh.javascript.info/array-methods)
+- [30 Seconds Of Code 有大量关于数组的数组片段和文章](https://www.30secondsofcode.org/js/t/array/p/1)
+
+以下整理了过往写过关于数组的文章：
+
+- [如何在 JavaScript 中对对象数组进行排序？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%AF%B9%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%EF%BC%9F.md)
+- [数组扁平化](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96.md)
+- [JavaScript 数组去重](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D.md)
+- [如何在 JavaScript 中合并两个数组？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%90%88%E5%B9%B6%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%EF%BC%9F.md)
+- [如何在 JavaScript 中判断一个值是否为数组？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%80%BC%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84%EF%BC%9F.md)
+- [如何在 JavaScript 中将数组转为对象](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%B0%86%E6%95%B0%E7%BB%84%E8%BD%AC%E4%B8%BA%E5%AF%B9%E8%B1%A1.md)
+- [检查数组是否已排序](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%A3%80%E6%9F%A5%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E5%B7%B2%E6%8E%92%E5%BA%8F.md)
+- [过滤并排序字符串列表](https://github.com/lio-zero/blog/blob/master/JavaScript/%E8%BF%87%E6%BB%A4%E5%B9%B6%E6%8E%92%E5%BA%8F%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%88%97%E8%A1%A8.md)
+- [数组平均值与中位数](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%95%B0%E7%BB%84%E5%B9%B3%E5%9D%87%E5%80%BC%E4%B8%8E%E4%B8%AD%E4%BD%8D%E6%95%B0.md)
+- [从数组中删除重复的对象](https://github.com/lio-zero/blog/blob/master/JavaScript/%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E5%88%A0%E9%99%A4%E9%87%8D%E5%A4%8D%E7%9A%84%E5%AF%B9%E8%B1%A1.md)
+- [数组中的最大值/最小值](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%9C%80%E5%A4%A7%E5%80%BC-%E6%9C%80%E5%B0%8F%E5%80%BC.md)
+- [JavaScript 中清空数组](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E4%B8%AD%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84.md)
+- [如何在 JavaScript 中将数组拆分为一组数组](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%B0%86%E6%95%B0%E7%BB%84%E6%8B%86%E5%88%86%E4%B8%BA%E4%B8%80%E7%BB%84%E6%95%B0%E7%BB%84.md)
+- [如何在 JavaScript 中判断数组是否包含某个值？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%88%A4%E6%96%AD%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E5%8C%85%E5%90%AB%E6%9F%90%E4%B8%AA%E5%80%BC%EF%BC%9F.md)
diff --git "a/JavaScript/JavaScript \346\233\277\346\215\242\346\211\200\346\234\211\345\207\272\347\216\260\347\232\204\345\255\227\347\254\246\344\270\262.md" "b/JavaScript/JavaScript \346\233\277\346\215\242\346\211\200\346\234\211\345\207\272\347\216\260\347\232\204\345\255\227\347\254\246\344\270\262.md"
new file mode 100644
index 0000000..9e7e63d
--- /dev/null
+++ "b/JavaScript/JavaScript \346\233\277\346\215\242\346\211\200\346\234\211\345\207\272\347\216\260\347\232\204\345\255\227\347\254\246\344\270\262.md"	
@@ -0,0 +1,41 @@
+# JavaScript 替换所有出现的字符串
+
+假设你有这样一句话 `I am superman.Are you superman?`，你要替换其中的 `Superman`，你该怎么做？
+
+这里总结三种方法，用于替换上面句子中出现的所有 `Superman`。
+
+## String.prototype.replace()
+
+使用 `String.prototype.replace()` 方法在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
+
+```js
+let sentence = 'I am superman.Are you superman?'
+
+const new_sentence = (str, search, replacement) =>
+  str.replace(new RegExp(search, 'g'), replacement)
+new_sentence(sentence, 'Superman', 'superwoman') // "I am superman.Are you superman?"
+```
+
+使用 `new RegExp` 是为了便于使用参数。使用 `g` 将**区分大小写**。如果**不想区分大小写**的替换，可以使用 `i`。
+
+## String.prototype.replaceAll()
+
+> [`String.prototype.replaceAll()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) 方法返回一个新字符串，新字符串所有满足 `pattern` 的部分都已被 `replacement` 替换。`pattern` 可以是一个字符串或一个 `RegExp`， `replacement` 可以是一个字符串或一个在> 每次匹配被调用的函数。
+
+```js
+const new_sentence = (str, search, replacement) =>
+  str.replaceAll(search, replacement)
+new_sentence(sentence, 'Superman', 'superwoman') // "I am superman.Are you superman?"
+```
+
+## split 和 join
+
+最快速的方法是使用 `String.prototype.split()` 拆分字符串，在使用 `Array.prototype.join()` 连接。
+
+```js
+const new_sentence = (str, search, replacement) =>
+  str.split(search).join(replacement)
+new_sentence(sentence, 'Superman', 'superwoman') // "I am superman.Are you superman?"
+```
+
+**注意**：在不考虑性能的情况下，使用 `split` 和 `join` 比正则和 `replaceAll` 更容易理解，简便。但还是不建议使用它，最好使用正则或者 `replaceAll`。
diff --git "a/JavaScript/JavaScript \346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.md" "b/JavaScript/JavaScript \346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.md"
new file mode 100644
index 0000000..78de7f8
--- /dev/null
+++ "b/JavaScript/JavaScript \346\250\241\345\235\227\345\214\226\345\217\221\345\261\225.md"	
@@ -0,0 +1,375 @@
+# JavaScript 模块化发展
+
+随着我们的应用越来越大，我们想要将其拆分成多个文件，即所谓的**模块（module）**。
+
+在 ES6 之前，社区制定了许多种方法来将代码组织到模块中，使用特殊的库按需加载模块。
+
+- [AMD](https://en.wikipedia.org/wiki/Asynchronous_module_definition) — 最古老的模块系统之一，最初由 [require.js](http://requirejs.org/) 库实现。
+- [CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1) — 为 Node.js 服务器创建的模块系统。
+- CMD — 代表的 [seajs](https://github.com/seajs/seajs) 库。
+- [UMD](https://github.com/umdjs/umd) — 另外一个模块系统，建议作为通用的模块系统，它与 AMD 和 CommonJS 都兼容。
+
+## AMD
+
+**[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)（Asynchronous Module Definition）即 "异步模块定义"**。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
+
+> **AMD** 提前执行，推崇依赖前置。
+
+[RequireJS](https://github.com/requirejs/requirejs) 是 AMD 规范的最流行的实现。
+
+它的出现为了解决两个问题：
+
+- 实现 JavaScript 文件的异步加载，也就是模块是并行加载的，而不是通过等待加载完成来阻止执行。
+- 管理模块之间的依赖性，便于代码的编写和维护。
+
+**更多详细内容**：
+
+- [JavaScript 模块化编程（二）：AMD 规范](https://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html)
+- [JavaScript 模块化编程（三）：require.js 的用法](https://www.ruanyifeng.com/blog/2012/11/require_js.html)
+
+## CMD
+
+CMD 最为代表的 [seajs](https://github.com/seajs/seajs) 库。
+
+这里简单带过，了解的不多，使用的也不多。
+
+> CMD 延迟执行，推崇依赖就近，只有用户需要的时候才执行（性能好）
+
+## UMD
+
+[UMD](https://github.com/umdjs/umd)（Universal Module Definition，通用模块定义）模式，用于在任何地方工作的 JavaScript 模块。
+
+如果你经常阅读源码，你会发现很多库都会使用 UMD：
+
+```js
+;(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], function () {
+      return factory(root)
+    })
+  } else if (typeof exports === 'object') {
+    module.exports = factory(root)
+  } else {
+    root.myPlugin = factory(root)
+  }
+})(
+  typeof global !== 'undefined'
+    ? global
+    : typeof window !== 'undefined'
+    ? window
+    : this,
+  function (window) {
+    'use strict'
+
+    // do something ...
+  }
+)
+```
+
+它可以很好的兼容 AMD 和 CommonJS，无论在浏览器还是在其他 JS 运行环境。
+
+## CommonJS
+
+Node.js 应用由模块组成，其[模块系统](http://nodejs.org/docs/latest/api/modules.html)采用 CommonJS 规范。
+
+CommonJS 是一种借助 `exports` 对象定义模块的方法，它定义了模块的内容。
+
+```js
+// someModule.js
+exports.doSomething = function () {
+  return 'foo'
+}
+
+// otherModule.js
+var someModule = require('someModule')
+
+exports.doSomethingElse = function () {
+  return someModule.doSomething() + 'bar'
+}
+```
+
+CommonJS 指定了一个全局方法 `require()` 来加载模块，获取依赖项，而 `exports` 用于导出模块内容的变量，以及一个模块标识符（描述与此模块相关的模块的位置），用于加载依赖项。
+
+> **注意**：AMD 用于客户端（浏览器），CommonJS 主要用于服务端。
+
+### CommonJS 模块的特点
+
+- 所有代码都运行在模块作用域，不会污染全局作用域。
+- 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
+- 模块加载的顺序，按照其在代码中出现的顺序。
+
+### CommonJS 原理与实现
+
+浏览器不兼容 CommonJS 的根本原因，在于缺少四个 Node.js 环境的变量。
+
+- `module`
+- `exports`
+- `require`
+- `global`
+
+只要能够提供这四个变量，浏览器就能加载 CommonJS 模块。
+
+详细内容推荐阮一峰老师的[浏览器加载 CommonJS 模块的原理与实现](https://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html)。
+
+你也可以使用现有的 CommonJS 格式转换工具，[Browserify](http://browserify.org/) 是目前最常用的。
+
+## ES Module
+
+> ES6 Module 输出的是一个值的引用，编译时输出接口。ES6 模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。
+
+模块可以相互加载，并可以使用特殊的命令 `export` 和 `import` 来交换功能。
+
+- `export` 命令用于规定模块的对外接口
+- `import` 命令用于输入其他模块提供的功能
+
+```js
+export const name = 'lio'   // 命名导出
+import { name } from 'file.js' // 命名导入
+
+export default 'lio'       // 默认导出
+import anyName from 'file.js' // 默认导入
+
+export { name as newName }    // 重命名导出
+import { newName } from 'file.js' // 命名导入
+
+// 默认名称导出
+export const name = 'lio'
+export default 'lio'
+import * as anyName from 'file.js' // 全部导入
+// or
+import anyName, { name } from 'file.js' // 默认 + 命名导入
+
+// 导出列表，并重命名
+export {
+  name,
+  age as anyAge
+}
+// 导入列表 + 重命名
+import { name as newName, anyAge } from 'file.js'
+```
+
+模块路径必须是原始类型字符串，不能是函数调用
+
+```js
+import anyName from getModuleName() // Error, only from "string" is allowed
+```
+
+无法根据条件或者在运行时导入：
+
+```js
+if (...) {
+  import ... // Error, not allowed!
+}
+
+{
+  import ... // Error, we can't put import in any block
+}
+```
+
+### 动态导入 `import()` 表达式
+
+`import(module)` 表达式加载模块并返回一个 promise，该 promise 为一个包含其所有导出的模块对象。我们可以在代码中的任意位置调用这个表达式。
+
+```js
+// 📁 say.js
+export function hi() {
+  alert(`Hello`)
+}
+
+export function bye() {
+  alert(`Bye`)
+}
+
+// index.js
+let { hi, bye } = await import('./say.js')
+
+hi()
+bye()
+```
+
+> 动态导入在常规脚本中工作时，它们不需要 `script type="module"`。
+>
+> 尽管 `import()` 看起来像一个函数调用，但它只是一种特殊语法，只是恰好使用了括号（类似于 `super()`）。
+>
+> 因此，我们不能将 `import` 复制到一个变量中，或者对其使用 `call/apply`。因为它不是一个函数。
+
+### 规范
+
+下面将以 [Airbnb JavaScript 样式指南](https://github.com/airbnb/javascript)为参考，给出在使用 ES6 模块（`import/export`）的一些编写建议，其中包括 eslint（查找并修复 JavaScript 代码中的问题）的属性。
+
+- 始终在非标准模块系统上使用模块（`import` / `export`）。
+
+> 为什么？模块将会是未来的主流。
+
+```js
+// bad
+const AirbnbStyleGuide = require('./AirbnbStyleGuide')
+module.exports = AirbnbStyleGuide.es6
+
+// ok
+import AirbnbStyleGuide from './AirbnbStyleGuide'
+export default AirbnbStyleGuide.es6
+
+// best
+import { es6 } from './AirbnbStyleGuide'
+export default es6
+```
+
+- 不要使用通配符导入。
+
+> 为什么？这样可以确保只有一个默认导出。
+
+```js
+// bad
+import * as AirbnbStyleGuide from './AirbnbStyleGuide'
+
+// good
+import AirbnbStyleGuide from './AirbnbStyleGuide'
+```
+
+- 不要直接从导入中导出。
+
+> 为什么？虽然 "一行" 很简洁，但有一个明确的导入方式和一个明确的导出方式使事情保持一致。
+
+```js
+// bad
+export { es6 as default } from './AirbnbStyleGuide'
+
+// good
+import { es6 } from './AirbnbStyleGuide'
+export default es6
+```
+
+- 仅从一个位置的路径导入。eslint：[`no-duplicate-imports`](https://eslint.org/docs/rules/no-duplicate-imports)
+
+> 为什么？具有从同一路径导入的多行代码可能会使代码难以维护。
+
+```js
+// bad
+import foo from 'foo'
+import { named1, named2 } from 'foo'
+
+// good
+import foo, { named1, named2 } from 'foo'
+
+// good
+import foo, { named1, named2 } from 'foo'
+```
+
+- 不要导出可变绑定。eslint：[`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
+
+> 为什么？通常应该避免更改，特别是在导出可变绑定时。虽然在某些特殊情况下可能需要这种技术，但一般情况下，应该只导出常量引用。
+
+```js
+// bad
+let foo = 3
+export { foo }
+
+// good
+const foo = 3
+export { foo }
+```
+
+- 具有单个导出功能的模块中，优先使用默认导出而不是命名导出。eslint：[`import/prefer-default-export`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
+
+> 为什么？鼓励更多只导出一件东西的文件，这对于可读性和可维护性而言更好。
+
+```js
+// bad
+export function foo() {}
+
+// good
+export default function foo() {}
+```
+
+- 将所有 `import` 置于非 `import` 语句之上。eslint：[`import/first`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md)
+
+> 为什么？因为 `import` 被提升了，所以把它们都放在顶部，可以防止出现意外行为。
+
+```js
+// bad
+import foo from 'foo'
+foo.init()
+
+import bar from 'bar'
+
+// good
+import foo from 'foo'
+import bar from 'bar'
+
+foo.init()
+```
+
+- 多行 `import` 应该像多行数组和对象字面量一样缩进。eslint：[`object-curly-newline`](https://eslint.org/docs/rules/object-curly-newline)
+
+> 为什么？花括号遵循与风格指南中其他花括号块相同的缩进规则，尾随的逗号也一样。
+
+```js
+// bad
+import { longNameA, longNameB, longNameC, longNameD, longNameE } from 'path'
+
+// good
+import { longNameA, longNameB, longNameC, longNameD, longNameE } from 'path'
+```
+
+- 在模块 import 语句中禁止 webpack loader 语法。eslint: [`import/no-webpack-loader-syntax`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
+
+> 为什么？因为在 webpack 中使用了 `import` 语法，所以会将代码耦合到模块 loader 中。最好在 `webpack.config.js` 中使用 loader 语法。
+
+```js
+// bad
+import fooSass from 'css!sass!foo.scss'
+import barCss from 'style!css!bar.css'
+
+// good
+import fooSass from 'foo.scss'
+import barCss from 'bar.css'
+```
+
+- 请勿将 JavaScript 文件扩展名包括在内。eslint：[`import/extensions`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md)
+
+> 为什么？包含扩展会将阻止重构，并对每个使用者中要导入的模块的实现细节进行不适当的硬编码。
+
+```js
+// bad
+import foo from './foo.js'
+import bar from './bar.jsx'
+import baz from './baz/index.jsx'
+
+// good
+import foo from './foo'
+import bar from './bar'
+import baz from './baz'
+```
+
+推荐一篇关于 ES6 之前各种规范的模块化 [《JavaScript Module Pattern: In-Depth》](http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth)
+
+也可以阅读阮一峰老师的 [JavaScript 模块化编程（一）：模块的写法](https://www.ruanyifeng.com/blog/2012/10/javascript_module.html)
+
+## 总结
+
+- AMD、CMD、CommonJS 和 ES Module 都是为了解决原始无模块化的痛点
+- AMD — 代表 require.js 库，提前执行，推崇依赖前置
+- CMD — 代表 seajs 库，延迟执行，推崇依赖就近
+- CommonJS — 模块输出的是一个值的拷贝，运行时加载，加载的是一个对象（`module.exports` 属性），该对象只有在脚本运行完才会生成
+- ES Module — 模块输出的是一个值的引用，编译时输出接口，ES6 模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成
+
+它们都是在 JS 推广模块定义过程的规范化产出。
+
+## 更多资料
+
+- [MDN Docs：Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+- [现代 JS 教程：模块](https://zh.javascript.info/modules)
+- [Relation between CommonJS, AMD and RequireJS?](https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs)
+- [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
+- [JavaScript modules](https://v8.dev/features/modules)
+- [Understanding Modules and Import and Export Statements in JavaScript](https://www.digitalocean.com/community/tutorials/understanding-modules-and-import-and-export-statements-in-javascript)
+- [More on importing and exporting](https://2ality.com/2014/09/es6-modules-final.html#more-on-importing-and-exporting)
+- [前端模块管理器简介](https://www.ruanyifeng.com/blog/2014/09/package-management.html)
+- [require() 源码解读](https://www.ruanyifeng.com/blog/2015/05/require.html)
+- [JavaScript 模块的循环加载](https://www.ruanyifeng.com/blog/2015/11/circular-dependency.html)
+- [JavaScript 模块化七日谈](https://huangxuan.me/js-module-7day/#/)
+- [JavaScript 模块化编程简史（2009-2016）](https://yuguo.us/weblog/javascript-module-development-history/)
+- [精读 js 模块化发展](https://zhuanlan.zhihu.com/p/26118022)
+- [JavaScript 模块化发展](https://segmentfault.com/a/1190000015302578)
+- [JavaScript 模块化思维导图](https://www.processon.com/view/link/5c8409bbe4b02b2ce492286a#map)
diff --git "a/JavaScript/JavaScript \347\232\204 AST \346\212\275\350\261\241\350\257\255\346\263\225\346\240\221.md" "b/JavaScript/JavaScript \347\232\204 AST \346\212\275\350\261\241\350\257\255\346\263\225\346\240\221.md"
new file mode 100644
index 0000000..16d6560
--- /dev/null
+++ "b/JavaScript/JavaScript \347\232\204 AST \346\212\275\350\261\241\350\257\255\346\263\225\346\240\221.md"	
@@ -0,0 +1,74 @@
+# JavaScript 的 AST 抽象语法树
+
+[**抽象语法树**](https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9)（Abstract Syntax Tree，AST）是程序源代码的树形表示。
+
+![所有这些库，无论以何种方式，都建立在 AST 处理之上](https://upload-images.jianshu.io/upload_images/18281896-ddd5073aa76cf2da.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+有几个 JavaScript AST 标准：
+
+- [estree](https://github.com/estree/estree) — ECMAScript AST 的标准；
+- [shift](https://shift-ast.org/) — 设计时考虑了转换，[与 estree 不兼容](https://blog.shapesecurity.com/2015/01/06/a-technical-comparison-of-the-shift-and-spidermonkey-ast-formats/)；
+- [babel](https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md) — 支持尚未成为标准但有[提案](https://github.com/tc39/proposals)的语言功能。
+
+以下是一部分 JavaScript 解析器列表：
+
+- [esprima](https://esprima.org/) 是一个高性能、符合标准的 ECMAScript 解析器。
+- [acorn](https://github.com/acornjs/acorn) 非常受欢迎，快速且稳定
+- [espree](https://github.com/eslint/espree) 基于 `acorn`，用于 [eslint](https://eslint.org/) 中；
+- [@babel/parser](https://babeljs.io/docs/en/babel-parser) 基于 `acorn`，支持所有新的语言特性
+- [shift-parser](https://shift-ast.org/parser.html) 生成 Shift 格式 AST 的 ECMAScript 解析器
+- [typescript](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API) 可以解析 JavaScript 和 TypeScript，为此生成它自己的 AST 格式
+
+您可以在 [AST explorer](https://astexplorer.net/) 找到更多解析器，其中大多数是 `estree` 兼容的。
+
+> AST explorer 是一个在线工具，用于探索由 10 多个解析器生成的 AST。它是学习一门语言的 AST 树的好工具。
+
+虽然大多数支持 `estree` 的解析器可以很容易地相互替换，但 `babel` 有更广泛的基础设施，可以轻松地使用 AST。它有：
+
+- [handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md) 描述所有工具及其使用方法。
+- [@babel/traverse](https://babeljs.io/docs/en/babel-traverse.html) — 维护整个树状态，并负责替换、删除和添加节点；
+- [@babel/template](https://babeljs.io/docs/en/babel-template) — 从字符串创建 AST 节点的最简单方法。
+- [@babel/types](https://babeljs.io/docs/en/babel-types) — 包含 AST 节点的生成器和检查器。
+
+使用 AST 最简单的方法之一是使用 [putout](https://github.com/coderaiser/putout)，它基于 `babel` 并支持借助 [plugins API](https://github.com/coderaiser/putout#plugins-api) 转换 JavaScript 代码的简化方法。
+
+以下是删除 `DebuggerStatement` 节点的示例：
+
+```js
+module.exports.replace = () => ({
+  debugger: ''
+})
+```
+
+如果要转换变量的位置，请更改声明方式：
+
+```js
+module.exports.replace = () => ({
+  'let __a = __b': 'const __b = __a'
+})
+```
+
+如果您想将以下代码转换为 `return x[0]`：
+
+```js
+for (const x of y) {
+  return x
+}
+```
+
+您可以使用：
+
+```js
+module.exports.replace = () => ({
+  'for (const __a of __b) {return __a}': 'return __a[0]'
+})
+```
+
+借助 `putout`，您可以对 JavaScript 代码进行最简单的转换，而无需直接使用 AST 进行处理。
+
+推荐一篇面向 JS 的 AST 介绍 👉 [AST for JavaScript developers](https://itnext.io/ast-for-javascript-developers-3e79aeb08343)
+
+## 更多资料
+
+- [How to Modify Nodes in an Abstract Syntax Tree](https://css-tricks.com/how-to-modify-nodes-in-an-abstract-syntax-tree/)
+- [JAVASCRIPT AST VISUALIZER](https://resources.jointjs.com/demos/javascript-ast) — 一个 JavaScript AST 可视化工具
diff --git "a/JavaScript/JavaScript \347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260\350\241\250\350\276\276\345\274\217\357\274\210IIFE\357\274\211.md" "b/JavaScript/JavaScript \347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260\350\241\250\350\276\276\345\274\217\357\274\210IIFE\357\274\211.md"
new file mode 100644
index 0000000..0208d13
--- /dev/null
+++ "b/JavaScript/JavaScript \347\253\213\345\215\263\346\211\247\350\241\214\345\207\275\346\225\260\350\241\250\350\276\276\345\274\217\357\274\210IIFE\357\274\211.md"	
@@ -0,0 +1,101 @@
+# JavaScript 立即执行函数表达式（IIFE）
+
+**立即执行函数表达式**（IIFE，immediately invoked function expression）是一个立即执行的匿名函数表达式，它有两种写法：
+
+```js
+;(function () {
+  'use strict'
+  // ...
+})()
+
+// or
+
+;(function () {
+  'use strict'
+  // ...
+} ())
+
+// 上面两种都等价于命名函数
+function sayHello() { ... }
+sayHello()
+
+// 你还在可以在 IIFE 中使用箭头函数
+;(() => {})()
+```
+
+可以看到，**立即执行函数**有两个括号组成：一个括号用于包裹匿名函数（使其成为一个函数表达式），一个括号用于立即执行函数。
+
+如果你看过一些很早之前的库，例如 jQuery 的源码，你应该知道下面这种情况：
+
+```js
++(function ($) {})(window.jQuery)
+```
+
+我们还可以向第二个括号添加一些参数，来作为匿名函数的参数，一旦 JavaScript 运行时对其求值，它就会立即被调用：
+
+```js
+// IIFE
+;(function (message) {
+  console.log(message) // 'Hello World'
+})('Hello World')
+
+// 使用命名函数的等价代码
+function sayHello(message) {
+  console.log(message)
+}
+
+sayHello('Hello World') // 'Hello World'
+```
+
+由于有些人习惯在语句结束后不加分号，如下面的 `var a = 1` 语句没有添加分号，所以该片段将报错。
+
+```js
+// 出现错误的情况
+var a = 1
+(function () {
+  console.log('Hello')
+})()
+// Uncaught TypeError: 1 is not a function
+```
+
+你应该在立即执行函数前添加**分号或感叹号**等，来避免在某些情况下出现 `TypeError`。
+
+```js
+// 所有这些都是等价的
+;(function(){ console.log('Hello') })()
+!(function(){ console.log('Hello') })()
++(function(){ console.log('Hello') })()
+-(function(){ console.log('Hello') })()
+~(function(){ console.log('Hello') })()
+// ...
+```
+
+IIFE 通常用于创建一个独立的作用域，运行某些代码，同时将所有变量和函数保持在全局范围之外以避免冲突时使用。
+
+它还常用于经典的[闭包](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E9%97%AD%E5%8C%85.md)：
+
+```js
+for (var i = 1; i <= 10; i++) {
+  ;(function (j) {
+    setTimeout(function () {
+      console.log(j)
+    }, 1000)
+  })(i)
+}
+
+// 额外的提示1：使用 ES6 的 let 或 const 可以轻松解决
+for (let i = 1; i <= 10; i++) {
+  setTimeout(function () {
+    console.log(i)
+  }, 1000)
+}
+
+// 额外的提示2：setTimeout 的第三个参数
+for (let i = 1; i <= 10; i++) {
+  setTimeout(function (i) {
+    console.log(i)
+  }, 1000, i)
+}
+```
+
+IIFE 并都不是 JS 的规范，其为早期社区一些能人异士发现，并广泛推广。而现在有 ES6 的块级作用域、模块系统和 Transpiler 的兴起，IIFE 已经不在推荐使用。
diff --git "a/JavaScript/JavaScript \347\272\257\345\207\275\346\225\260.md" "b/JavaScript/JavaScript \347\272\257\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..3ca9743
--- /dev/null
+++ "b/JavaScript/JavaScript \347\272\257\345\207\275\346\225\260.md"	
@@ -0,0 +1,121 @@
+# JavaScript 纯函数
+
+你可能听过一个术语叫**纯函数（Pure Function）**，它是一个非常重要的概念，我们下面将来介绍它。
+
+## 两项标准
+
+纯函数必须满足两个条件：
+
+- 对于相同输入具有相同的输出
+- 无副作用
+
+## 相同输入的相同输入
+
+我们首先考虑一个函数，它对于相同的输入没有相同的输出：
+
+```js
+let str = 'Hello'
+
+const f = (name) => `${str} ${name}`
+
+console.log(f('IU')) // Hello IU
+```
+
+我们可以看到，`f` 函数的输出可以更改，即使该函数的输入 `name` 保持不变（我们所要做的就是更改 `str` 变量的值）。
+
+对于相同的输入，我们如何使输出相同？这就像确保 `f` 也是函数的参数一样简单：
+
+```js
+const f = (str, name) => `${str} ${name}`
+
+console.log(f('KAI', 'LAY')) // KAI LAY
+```
+
+现在，我们无法使 `f` 函数返回不同的结果，除非我们更改其中一个输入参数。
+
+## 无副作用
+
+副作用是当函数改变了函数作用域之外的内容时。还是一样，我们先来看看**有副作用**规则的函数示例：
+
+```js
+const user = {
+  password: '123456'
+}
+
+let isValid = false
+
+const validate = (user) => {
+  if (user.password.length > 4) {
+    isValid = true
+  }
+}
+```
+
+我们可以看到，我们正在明显地更改 `isValid` 变量，该变量不在 `validate` 函数的作用域之内。
+
+**注意**，如果你的函数没有返回任何内容，则表明它可能有副作用！
+
+```js
+function hello() {
+  console.log('Hello World!')
+}
+```
+
+那么，如何消除这种副作用呢？我们可以从函数本身返回用户是否有效，而不是更改外部 `isValid` 变量：
+
+```js
+const user = {
+  password: '123456'
+}
+
+const validate = (user) => user.password.length > 4
+
+const isValid = validate(user)
+```
+
+就是这样，我们的 `validate` 函数不再改变其作用域之外的任何内容。
+
+还有，DOM 操作，任何回调或读/写文件，也存在副作用：
+
+```js
+function calculate(a, b) {
+  document.write('Hello world!')
+  return a * b
+}
+
+console.log(calculate(2, 5))
+```
+
+额外的，你可以对外部状态进行克隆，而不会使它为非纯函数。
+
+```js
+let name = ['O.O', 'K.O']
+
+function fullName(newName, name) {
+  let clonedName = [...name]
+  clonedName[clonedName.length] = newName
+  return clonedName
+}
+
+console.log(fullName('O.K', name)) // ['O.O', 'K.O', 'O.K']
+```
+
+示例中，我们克隆了 `name` 并更新它，这并没有依赖 `name` 变量。因此，它是一个纯函数。
+
+## 为什么纯函数是好的？
+
+您可能有一些直觉，这些纯函数概念是好的，尤其是如果您亲身经历了它们为什么不好的经验。封装逻辑的能力越强，测试就越容易，而无需担心更改会影响什么，更改就越容易。
+
+让我们考虑一下测试我们的 `f` 函数。在最初的形式中，我们可以做出以下断言：
+
+```js
+describe('f', function () {
+  it('action', function () {
+    expect(f('IU')).toEqual('Hello IU')
+  })
+})
+```
+
+但是，如果我们将 `str` 变量更改为 `arr`，测试将失败！这不应该发生；输出函数工作正常，但它失败了，因为它依赖于超出其作用域的变量。当我们将 `str` 作为 `f` 函数的参数时，这个问题就消失了，因为使用该函数所需的所有信息都必须作为测试中的参数提供。
+
+现在让我们考虑一下我们的用户验证示例。我们怎么去测试它呢？如果函数的外部变量发生了更改，则可能很难断言该变量。此外，如果我们将 `isValid` 变量的默认值更改为 `true`，则函数将失败。外部变量发生变化绝对是不对的!
diff --git "a/JavaScript/JavaScript \347\273\204\345\220\210\345\207\275\346\225\260.md" "b/JavaScript/JavaScript \347\273\204\345\220\210\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..c101e91
--- /dev/null
+++ "b/JavaScript/JavaScript \347\273\204\345\220\210\345\207\275\346\225\260.md"	
@@ -0,0 +1,53 @@
+# JavaScript 组合函数
+
+**组合（compose）函数**指的是将多个函数合成为一个函数。
+
+在 JS 函数式编程中，你可以经常看到如下表达式运算。
+
+```js
+a(b(c(x)))
+```
+
+这看起来很不雅观，为了解决函数多层调用的嵌套问题，我们需要用到组合函数。其语法格式如下：
+
+```js
+const f = compose(a, b, c) // 组合函数 f(x)
+```
+
+我们使用昨天写的[如何在 JavaScript 中使用管道（管道运算符）？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%AE%A1%E9%81%93%EF%BC%88%E7%AE%A1%E9%81%93%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89%EF%BC%9F.md) 中的示例：
+
+```js
+const compose = (f) => (g) => (x) => f(g(x))
+
+const toLowerCase = (str) => str.toLowerCase()
+const addHyphens = (str) => str.replace(/\s/g, '-')
+
+const title = 'Front End Interview'
+compose(toLowerCase)(addHyphens)(title) // "front-end-interview"
+```
+
+正如你所看到的，`compose` 函数的作用就是将两个函数合成为一个。`compose` 将两个函数串联起来执行，`toLowerCase` 函数返回的结果会传递给下一个函数 `addHyphens` 中作为参数。
+
+另一个示例：
+
+```js
+// 从右到左组合函数
+const compose =
+  (...fns) =>
+  (x) =>
+    fns.reduceRight((y, f) => f(y), x)
+
+const lowercase = (str) => str.toLowerCase()
+const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`
+const reverse = (str) => str.split('').reverse().join('')
+
+const fn = compose(reverse, capitalize, lowercase)
+
+// 我们将按顺序执行 lowercase，capitalize 和 reverse
+fn('Hello World') //  'dlrow olleH'
+```
+
+## 更多资料
+
+- [JavaScript 专题之函数组合](https://github.com/mqyqingfeng/Blog/issues/45)
+- [实现 compose 的五种思路](https://segmentfault.com/a/1190000011447164)
diff --git "a/JavaScript/JavaScript \350\216\267\345\217\226\345\255\227\347\254\246\344\270\262\347\232\204\346\234\200\345\220\216\344\270\200\344\270\252\345\255\227\347\254\246.md" "b/JavaScript/JavaScript \350\216\267\345\217\226\345\255\227\347\254\246\344\270\262\347\232\204\346\234\200\345\220\216\344\270\200\344\270\252\345\255\227\347\254\246.md"
new file mode 100644
index 0000000..716bb22
--- /dev/null
+++ "b/JavaScript/JavaScript \350\216\267\345\217\226\345\255\227\347\254\246\344\270\262\347\232\204\346\234\200\345\220\216\344\270\200\344\270\252\345\255\227\347\254\246.md"	
@@ -0,0 +1,43 @@
+# JavaScript 获取字符串的最后一个字符
+
+- 使用 `String.prototype.split()` 将字符串转为数组，在访问其下标获取字符。
+
+```js
+let str = 'Hello'
+let arr = str.split('')
+let last_character = arr[arr.length - 1]
+
+console.log(last_character) // "o"
+```
+
+- [`String.prototype.charAt()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt) 方法从一个字符串中返回指定的字符。
+
+```js
+let last_character = str.charAt(str.length - 1)
+
+console.log(last_character) // "o"
+```
+
+- [`String.prototype.substr()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr) 方法返回一个字符串中从指定位置开始到指定字符数的字符。
+
+```js
+let last_character = str.substr(str.length - 1, 1) // "o"
+
+console.log(last_character) // "o"
+```
+
+> **注意**：此方法没有严格被废弃，但应该避免使用它，当做了解就行。可以使用 [`String.prototype.substring()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring) 代替。
+
+```js
+let last_character = str.substring(str.length - 1) // "o"
+
+console.log(last_character) // "o"
+```
+
+- 使用 [`String.prototype.replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) 方法，传递一个正则表达式，`$2` 匹配结果中对应的分组来获取最后一个字符。
+
+```js
+const last_character = str.replace(/^(.*[n])*.*(.|n)$/g, '$2')
+
+console.log(last_character) // "o"
+```
diff --git "a/JavaScript/JavaScript \350\277\220\347\256\227\347\254\246\346\200\273\347\273\223.md" "b/JavaScript/JavaScript \350\277\220\347\256\227\347\254\246\346\200\273\347\273\223.md"
new file mode 100644
index 0000000..059a382
--- /dev/null
+++ "b/JavaScript/JavaScript \350\277\220\347\256\227\347\254\246\346\200\273\347\273\223.md"	
@@ -0,0 +1,717 @@
+# JavaScript 运算符总结
+
+本文整理了 JavaScript 所有的[运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)，并提供了一些示例理解它们。
+
+## 箭头运算符（=>）
+
+从技术上讲，它不是运算符，但是在**箭头功能**中使用了这种字符组合。
+
+箭头函数是编写函数定义的另一种方法。
+
+箭头函数在某种程度上受到限制：它没有自己的上下文（因此 `this` 无法使用），没有 `arguments` 和 `super`，因此不能使用 `new` 进行调用。
+
+- 如果它只用到一个参数，箭头函数可以省略括号
+- 如果省略括号，箭头函数有一个隐式的返回
+- 箭头功能常用作数组方法的回调
+
+```js
+let sayHi = () => 'Hello!'
+sayHi() // "Hello!"
+
+let arr = [1, 2, 3]
+arr.forEach(console.log) // 1 2 3
+```
+
+> 推荐：[JavaScript 中定义函数的方法](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0%E7%9A%84%E6%96%B9%E6%B3%95.md)。
+
+## 加法运算符（+）
+
+此运算符将两个数字加在一起，或将两个字符串连接在一起。
+
+如果将数字和字符串一起使用，它将执行串联。
+
+较不常见的是，它可以用作[一元运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus)，尝试将包含数字的字符串转换为数字。这是一个晦涩的技巧，通常最好使用[Number()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) 方法。
+
+```js
+console.log(1 + 1) // 2
+console.log('hello' + 'world') // 'helloworld'
+
+console.log(1 + '1') // '11'
+
+// 作为一元运算符
+console.log(+'5') // 5
+console.log(+'hello') // NaN
+```
+
+## 加法赋值运算符（+=）
+
+此运算符将提供的值添加到变量，然后用结果覆盖该变量的值。
+
+```js
+let x = 10
+let y = 10
+
+x += 1
+console.log(x) // 11 (10 + 1)
+
+y += 5
+console.log(y) // 15 (10 + 5)
+```
+
+## 减法运算符（-）
+
+此运算符从另一个减去一个数字。这是一个数学运算符。
+
+作为一元运算符，它也可以用来表示数字为负数（例如 `-5`，不减去任何东西），表示该数字的值为负 5。
+
+```js
+console.log(4 - 1) // 3
+
+// 作为一元运算符
+const negativeNum = -5
+console.log(5 - negativeNum) // 10
+```
+
+## 减法赋值运算符（-=）
+
+该运算符从变量中减去提供的值，然后用结果覆盖该变量的值。
+
+```js
+let x = 10
+let y = 10
+
+x -= 1
+console.log(x) // 9 (10 - 1)
+
+y -= 5
+console.log(y) // 5 (10 - 5)
+```
+
+## 赋值运算符（=）
+
+该运算符为变量赋值一个值。不要与相等运算符（`==`）或严格相等运算符（`===`）运算符混淆！
+
+```js
+let key = '123456'
+```
+
+## 相等运算符（==）
+
+该运算符检查两个值是否相等。返回一个布尔值。
+
+与严格相等运算符（`===`）不同，此运算符将忽略类型并仅关注值。例如，数字 `2` 被认为等效于字符串 `"2"`。
+
+```js
+// 数字不同，因此它们不相等
+console.log(10 == 11) // false
+
+// 数字相同，所以相等！
+console.log(10 == 10) // true
+
+// 值匹配，与类型无关
+console.log(10 == '10') // true
+```
+
+## 严格相等运算符（===）
+
+该运算符检查两个值是否相等。返回一个布尔值。
+
+与相等运算符（`==`）不同，此运算符检查类型和值。例如，数字 `2` 不视为等效于字符串 `"2"`。
+
+```js
+// 数字不同，因此它们不相等
+console.log(10 === 11) // false
+
+// 数字相同，这样就相等了！
+console.log(10 === 10) // true
+
+// 值相同，但类型不同
+console.log(10 === '10') // false
+```
+
+## 不等运算符（!=）
+
+`true` 如果每侧代表不同的值，则此运算符返回。
+
+与严格不等式运算符（`!==`）不同，不考虑值的类型。例如，该数字 `2` 被认为等效于字符串 `"2"`，因此表达式 `2 != '2'` 返回 `false`。通常这是不好的，建议无论什么时候都使用**严格的不等运算符**。
+
+```js
+const a = 10
+
+// 数字不同，因此它们是不相等的
+console.log(a != 11) // true
+// 数字相同，它们不是不相等的
+console.log(a != 10) // false
+// 即使类型不同，值相同，所以它们是被视为相等。
+console.log(a != '10') // false
+```
+
+## 严格不等运算符（!==）
+
+该运算符检查两个值是否不相等。返回一个布尔值。
+
+与不等式运算符（`!=`）不同，此运算符同时考虑类型和值。例如，数字 `2` 不视为等效于字符串 "2"。
+
+```js
+const a = 10
+
+// 数字不同，因此它们是不相等的
+console.log(a !== 11) // true
+
+// 数字相同，因此它们不是不相等的
+console.log(a !== 10) // false
+
+// 值相同，但类型不同，因此它们仍然被认为是不平等的
+console.log(a !== '10') // true
+```
+
+## 逗号运算符（,）
+
+逗号运算符按值序列评估每个值，然后返回最终值。
+
+注意，逗号字符通常不用作运算符。例如，当将多个参数传递给函数时，逗号字符不能用作运算符。那是完全无关的事情。
+
+```js
+const x = (2, 3)
+
+console.log(x) // 3
+```
+
+## 自减运算符（--）
+
+此运算符用于包含数字的变量。使用时，它将变量的值减 1。
+
+这通常与 `while` 循环一起使用，或者在任何需要计数器的地方使用。
+
+它在功能上等同于 `x = x - 1;`
+
+```js
+let x = 5
+x--
+console.log(x) // 4
+```
+
+## 自增运算符（++）
+
+该运算符旨在用于保存数字的变量。使用时，该变量的值增加 1。
+
+这通常与循环一起使用，或在需要计数器的任何地方使用。 `while`
+
+它在功能上等同于 `x = x + 1;`
+
+```js
+let x = 5
+
+x++
+console.log(x) // 6
+```
+
+## 除法运算符（/）
+
+该运算符执行数学除法运算。可以认为它是易于键入的除法符号（`÷`）
+
+```js
+console.log(10 / 2) // 5
+console.log(5 / 4) // 1.25
+```
+
+## 除法赋值运算符（/=）
+
+该运算符对变量执行数学除法运算，然后将结果赋值给该变量。
+
+```js
+let x = 6
+x /= 3
+
+console.log(x) // 2
+```
+
+## 幂运算符(**)
+
+幂运算符也叫做指数运算符，该运算符将值本身乘以指定次数，它相当于 `Math.pow()` 方法。
+
+```js
+let x = 2
+
+console.log(2 ** 2) // 4
+console.log(2 ** 3) // 8
+console.log(2 ** 4) // 16
+
+console.log(2 ** 0) // 1
+```
+
+## 幂赋值运算符（**=）
+
+该运算符应用乘幂运算（将值乘以 X 的幂），将结果赋值给受影响的变量。它类似于其他赋值运算符，例如：加法赋值（`+=`）运算符。
+
+```js
+let x = 2
+x **= 4
+console.log(x) // 16 (2 ** 4)
+```
+
+## 逻辑与运算符（&&）
+
+该运算符通常用于检查所有提供的值是否真实。
+
+它也可以用作控制流运算符：它将返回第一个伪造的值。如果所有值都不伪造，它将返回最终值。
+
+```js
+// 作为逻辑运算符
+if (someCondition && someOtherCondition) {
+  // Code here is only run if both
+  // variables are true, or truthy.
+}
+
+// 作为控制流运算符
+console.log(0 && 4) // 0, 因为它是第一个虚假值
+console.log(2 && 4) // 4, 因为两个值都不是虚假的
+console.log(1 && 2 && 3) // 3, 因为所有值都是真实的
+console.log('a' && '' && 0) // '', 第一个虚假值
+```
+
+## 逻辑与赋值运算符（&&=）
+
+它将为变量赋值一个值，但前提是该变量已具有真实值。
+
+```js
+let x = 0
+let y = 1
+
+x &&= 2 // 没有效果，因为 0 是虚假的
+y &&= 2 // 赋值 2，因为1为真
+
+console.log(x, y) // 0, 2
+```
+
+## 逻辑非运算符（!）
+
+逻辑非运算符，它会翻转布尔值，将真值转换为假值，反之亦然。
+
+它也适用于非布尔值，任何虚假的值都会评估为 `false`，同样任何真实的值都会评估为 `true`
+
+- Falsy：`false`、`null`、`undefined`、`NaN`、`0`、`+0`、`-0` 和空字符串（""、''、``）
+- truthy：其他都为 `true`
+
+```js
+console.log(!true) // false
+console.log(!false) // true
+
+console.log(!0) // true
+console.log(!10) // false
+```
+
+`!!` 运算符可以将右侧的值强制转换为布尔值
+
+- 第一个 `!` 将值强制为布尔值并将其取反。在这种情况下，`!0` 将返回 `true`。
+- 因此，要将其恢复为 `false`，我们可以再加上一个 `!`。
+
+```js
+console.log(!!0) // false
+console.log(!!10) // true
+```
+
+## 逻辑或运算符（||）
+
+该运算符通常用于检查任何一个提供的值是否真实。
+
+它也可以用作控制流运算符：它将返回第一个真实值。如果所有值都不是真实的，它将返回最终值。
+
+```js
+// 作为逻辑运算符
+if (someCondition || someOtherCondition) {
+  // 仅在以下至少之一的情况下才运行此处的代码
+  // 这两个变量包含真实值。
+}
+
+// 作为控制流运算符
+console.log(0 || 4) // 4，因为它是第一个真实值
+console.log(2 || 4) // 2，因为它是第一个真实值
+console.log('' || 0) // 0，因为没有值是真实的
+console.log(1 || 2 || 3) // 1，因为它立即发现了真实的价值！
+```
+
+## 逻辑或赋值运算符（||=）
+
+它将为变量赋值一个值，但前提是该变量已具有伪造的值。
+
+```js
+let x = 0
+let y = 1
+
+x ||= 2 // 赋值为2，因为0为假
+y ||= 2 // 无效，因为'y'保持真实值
+console.log(x, y) // 2, 1
+```
+
+## 逻辑空赋值运算符（??=）
+
+该运算符将使用新值更新变量，但前提是该变量当前值为 `null` 或 `undefined`。
+
+这是 JavaScript 相对较新的功能（Chrome 85，Firefox 79，Safari 14）。IE 还不支持。
+
+```js
+let x = 0
+let y = null
+let z
+
+x ??= 2 // 无效，因为 'x' 已经拥有一个值
+y ??= 2 // 更新 'y' 来保存这个新值
+z ??= 2 // 更新'z'来保存这个新值（通过最初不赋值 'z' 值，被认为是未定义的）。
+
+console.log(x, y, z) // 0, 2, 2
+```
+
+## 乘法运算符（*）
+
+该运算符执行数学乘法运算，计算操作数的乘积。
+
+```js
+console.log(10 * 2) // 20
+console.log(1.25 * 4) // 5
+```
+
+## 乘法赋值运算符（*=）
+
+该运算符对变量执行数学乘法运算，将变量与右操作数的值相乘，然后将结果赋值给该变量。
+
+```js
+let x = 6
+x *= 3
+
+console.log(x) // 18
+```
+
+## 空值合并运算符（??）
+
+这种相对较新的语言添加方式类似于逻辑或运算符（`||`），除了不依赖 `truthy/falsy` 值，它依赖于空值（只有 2 个空值，`null` 和 `undefined`）
+
+这意味着当您将虚假值（如 0）视为有效值时，使用它更安全。
+
+与逻辑或类似，它用作控制流运算符。它的计算结果为第一个非空值。
+
+它是在 Chrome 80 / Firefox 72 / Safari 13.1 中引入的。它还不支持 IE。
+
+```js
+console.log(4 ?? 5) // 4，因为两个值都不为空
+
+console.log(null ?? 10) // 10，因为 'null' 为空
+
+console.log(undefined ?? 0) // 0，因为 'undefined' 为空
+
+// 这是一个不同于逻辑或（||）
+console.log(0 ?? 5) // 0
+console.log(0 || 5) // 5
+```
+
+## 可选链运算符（?.）
+
+该运算符类似于**属性访问器**运算符（`.`）；它访问对象的属性。
+
+不同之处在于链是安全的；如果在任何一点上出现空值（`null` 或 `undefined`），链就会短路并返回 `undefined`。
+
+可选链 `?.` 语法有三种形式：
+
+- `obj?.prop` 对象属性
+
+```js
+let user = {}
+
+// 当属性不存在时
+console.log(user.address.street) // Uncaught TypeError: Cannot read property 'street' of undefined
+console.log(user?.address?.street) // undefined
+```
+
+- `obj?.[expr]` 对象属性
+
+```js
+let user = {
+  name: 'lisi',
+  hi: {
+    name: 'zhaosi'
+  }
+}
+
+// 当属性名称存储在变量中时
+let outerKey = 'hi'
+let innerKey = 'name'
+
+console.log(user?.[outerKey]) // { name: "zhaosi" }
+console.log(user?.[outerKey]?.[innerKey]) // zhaosi
+```
+
+- `func?.(...args)` 函数或对象方法的调用
+
+```js
+// 当所讨论的属性是一个函数时
+let user = {
+  sayHi() {
+    return 'hi'
+  }
+}
+
+console.log(user.sayHi?.()) // "hi"
+console.log(user.running?.()) // undefined
+```
+
+## 管道运算符（|>）
+
+该运算符目前是第 2 阶段建议的功能；它在任何浏览器中都不存在。
+
+它起一种 "反向" 函数调用的作用；不是使用参数调用函数，而是将参数 "传递" 到函数中。
+
+这在某些函数式编程范例中很有用。例如，它为[柯里化](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%9F%AF%E9%87%8C%E5%8C%96.md)（Currying）提供了更好的接口。
+
+```js
+// 典型的函数调用：
+alert('hello')
+
+// 用管道替代：
+'hello' |> alert
+```
+
+> 推荐：[如何在 JavaScript 中使用管道（管道运算符）？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%AE%A1%E9%81%93%EF%BC%88%E7%AE%A1%E9%81%93%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89%EF%BC%9F.md)
+
+## 属性访问器运算符（.）
+
+访问对象的属性时，可以使用点表示法将其拔出。仅当您知道该属性的密钥时，此方法才有效。如果该属性名称保存在变量中，则需要使用方括号表示法。
+
+```js
+const user = {
+  name: 'lisi',
+  address: {
+    street: '123 Street Ave.',
+    city: 'Guangzhou',
+    province: 'Guangdong',
+    country: 'China'
+  }
+}
+
+console.log(user.name) // 'lisi'
+console.log(user.address.city) // 'Guangzhou'
+
+// 如果将某个想取到的值保存在变量中，我需要使用方括号。
+const value = 'city'
+console.log(user.address.value) // undefined
+console.log(user.address[value]) // 'Guangzhou'
+```
+
+## 余数（模）运算符（%）
+
+该运算符与加法（`+`）或乘法（`*`）属于同一数学族。
+
+它的计算结果是将左侧值除以右侧的余数。
+
+```js
+console.log(4 % 2) // 0
+
+console.log(10 % 7) // 3
+```
+
+## 余数（模）赋值运算符（%=）
+
+该运算符是余数运算符（`%`）的“赋值”版本。它对变量执行运算，并将结果赋值给该变量。
+
+```js
+let num = 5
+
+num %= 4
+console.log(num) // 1
+```
+
+## 剩余/扩展运算符（...）
+
+根据上下文，此运算符实际上是两个单独的运算符。
+
+**剩余运算符**：函数定义中使用此运算符来收集其他函数参数。当您不知道函数需要多少个参数时很有用。它将它们收集到一个数组中。它也用于解构数组和对象。
+
+```js
+// 剩余操作符
+function rest(...nums) {
+  console.log(nums)
+}
+
+rest(1, 2, 3, 4) // [1, 2, 3, 4]
+
+// 解构数组
+const [s1, s2, ...rest] = ['red', 'yellow', 'green', 'orange', 'purple']
+console.log(rest) // ["green", "orange", "purple"]
+
+// 解构对象
+const { age, name, ...others } = {
+  name: 'lisi',
+  age: 18,
+  children: {
+    name: 'zhaosi',
+    age: 20
+  }
+} // others: { name: 'zhaosi', age: 20 }
+```
+
+**扩展运算符**：执行与 "rest" 相反的操作，可用于从数组中填充函数。它也可以用于克隆或合并数组和对象。
+
+```js
+// 扩展运算符
+function addNums(a, b) {
+  console.log(a + b)
+}
+
+const nums = [1, 1]
+addNums(...nums) // 2
+
+// 克隆数组
+const arr = [1, 2, 3]
+const arrCopy = [0, ...arr] // [0, 1, 2, 3]
+console.log(arrCopy)
+
+// 克隆对象
+const user = { name: 'lisi', age: 17 }
+const modifyUser = { ...user, age: 18 }
+console.log(modifyUser) // { name: 5, age: 18 };
+```
+
+## 大于运算符（>）
+
+该运算符检查左侧的值是否大于右侧的值。
+
+使用 `>、<、>=、<=` 四个运算符时要注意：对于数字，这可以按您预期的那样工作。对于字符串，每个字符都将转换为相应的字符代码。
+
+```js
+console.log(10 > 5) // true
+console.log(10 > 15) // false
+console.log(-20 > 15) // false
+console.log(0.5 > 1) // false
+console.log(1 > 1) // false
+
+console.log('b' > 'a') // true
+console.log('B' > 'a') // false
+```
+
+## 小于运算符（<）
+
+该运算符检查左侧的值是否小于右侧的值。
+
+```js
+console.log(10 < 5) // false
+console.log(10 < 15) // true
+console.log(-20 < 15) // true
+console.log(0.5 < 1) // true
+console.log(1 < 1) // false
+
+console.log('b' < 'a') // false
+console.log('B' < 'a') // true
+```
+
+## 大于或等于运算符（>=）
+
+该运算符检查左侧的值是否大于或等于右侧的值。
+
+```js
+console.log(10 >= 5) // true
+console.log(10 >= 15) // false
+console.log(-20 >= 15) // false
+console.log(0.5 >= 1) // false
+console.log(1 >= 1) // true
+
+console.log('b' >= 'a') // true
+console.log('B' >= 'a') // false
+```
+
+## 小于或等于运算符（<=）
+
+该运算符检查左侧的值是否小于或等于右侧的值。
+
+```js
+console.log(10 <= 5) // false
+console.log(10 <= 15) // true
+console.log(-20 <= 15) // true
+console.log(0.5 <= 1) // true
+console.log(1 <= 1) // true
+
+console.log('b' <= 'a') // false
+console.log('B' <= 'a') // true
+```
+
+## 按位异或运算符（^）
+
+该运算符对变量执行按位异或运算。在每个位位置返回 1，其中一个操作数（而不是两个操作数）的对应位为 1。
+
+```js
+const a = 5 // 00000000000000000000000000000101
+const b = 3 // 00000000000000000000000000000011
+
+console.log(a ^ b) // 00000000000000000000000000000110
+// 输出: 6
+```
+
+> 操作数转换为 32 位整数，并用一系列位（0 和 1）表示。超过 32 位的数字将丢弃其最高有效位。例如，以下大于 32 位的整数将转换为 32 位整数：
+>
+> Before: 11100110111110100000000000000110000000000001
+> After: 10100000000000000110000000000001
+
+## 按位 NOT 运算符（~）
+
+该运算符反转其操作数的位。
+
+```js
+const a = 5 // 0000000000000101
+const b = -3 // 1111111111111101
+
+console.log(~a) // 1111111111111010
+// 输出: -6
+
+console.log(~b) // 0000000000000010
+// 输出: 2
+```
+
+## 其他运算符
+
+本文篇幅过长，以下运算法您可以在 MDN 的 [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) 章节查看它们的具体用法。
+
+### 按位与运算符（&）
+
+该运算符在每个位的位置都返回 1，两个操作数的对应位都为 1。不要与逻辑 AND 运算符（`&&`）混淆
+
+### 按位与赋值运算符（&=）
+
+该运算符对变量执行按位与运算，并将结果覆盖到相同的变量中。
+
+### 按位或运算符（|）
+
+该运算符执行按位或运算。不要与逻辑或运算符（`||`）混淆
+
+### 按位或赋值运算符（|=）
+
+该运算符对变量执行按位或运算，并将结果赋值给同一变量。
+
+### 按位 XOR 赋值运算符（^=）
+
+该运算符对变量执行按位 XOR 运算，并将结果赋值给同一变量。
+
+### 左移运算符（<<）
+
+该运算符执行按位移位操作。
+
+### 右移运算符（>>）
+
+该运算符执行按位移位操作。
+
+### 左移赋值运算符（<<=）
+
+该运算符对变量执行按位移位操作，并使用此新值覆盖变量。
+
+### 右移赋值运算符（>>=）
+
+该运算符对变量执行按位移位操作，并使用此新值覆盖变量。
+
+### 无符号右移运算符（>>>）
+
+该运算符执行按位移位操作。
+
+### 无符号右移赋值运算符（>>>=）
+
+该运算符对变量执行按位移位操作，并使用此新值覆盖变量。
+
+## 更多资料
+
+[Operator Lookup](https://www.joshwcomeau.com/operator-lookup/)
diff --git "a/JavaScript/JavaScript \350\277\220\350\241\214\346\234\272\345\210\266 \342\200\224 \344\272\213\344\273\266\345\276\252\347\216\257\357\274\210Event-Loop\357\274\211.md" "b/JavaScript/JavaScript \350\277\220\350\241\214\346\234\272\345\210\266 \342\200\224 \344\272\213\344\273\266\345\276\252\347\216\257\357\274\210Event-Loop\357\274\211.md"
new file mode 100644
index 0000000..e5bdb05
--- /dev/null
+++ "b/JavaScript/JavaScript \350\277\220\350\241\214\346\234\272\345\210\266 \342\200\224 \344\272\213\344\273\266\345\276\252\347\216\257\357\274\210Event-Loop\357\274\211.md"	
@@ -0,0 +1,101 @@
+# JavaScript 运行机制 — 事件循环（Event-Loop）
+
+JavaScript 有一个基于[事件循环](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。
+
+大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。
+
+**JS 单线程基于事件循环**：分为异步任务和同步任务。同步任务执行完，在执行异步任务中的内容。
+
+基本的执行步骤如下：
+
+- 所有的同步任务都在主线程上执行，形成一个**执行栈（execution context stack）**。
+- 主线程之外，还存在一个**任务队列（task queue）**。只要异步任务有了运行结果，就在**任务队列**中放置一个事件。
+- 一旦**执行栈**中的所有同步任务执行完毕，系统会到**任务队列**读取并执行已经运行完且正在等待进入执行栈的任务。
+- 上述过程会不断重复，也就是常说的 Event Loop（事件循环）。
+
+其中，任务队列又分为**宏任务队列**和**微任务队列**。
+
+- 当我们执行一个脚本时，它会自上而下运行
+- 遇到同步代码按顺序执行，遇到宏任务放入宏任务队列，遇到微任务放入微任务队列
+- 执行完当前宏任务，检查微任务队列，执行并清空微任务队列，如果在微任务的执行中又加入了新的微任务，也会在这一步一起执行
+- 从任务队列取出下一个宏任务并执行
+
+> **Tips**：其实完整的事件循环要复杂的多。另外，在每个微任务队列执行完之后，下一个宏任务开始之前，还存在一个渲染阶段。关于这些将不在本文进行介绍。您可以在最下面提供的文章找到答案。
+
+最后，来看一下都有哪些宏任务和微任务队列：
+
+- 宏任务（Macro Task）— 整体脚本代码、UI 渲染、I/O 操作、`postMessage`、`MessageChannel`、`requestAnimationFrame`、`setTimeout`、`setInterval`、`setImmediate`（Node.js 环境）
+- 微任务（Micro Task）— Promise 的回调函数（`then()`、`catch()`、`finally()`）、`process.nextTick`（Node.js 环境）、`MutationObserver`
+
+## 示例
+
+下面是一段面试常考的题目：
+
+```js
+// 以下代码在 Node 环境运行：process.nextTick 由 Node 提供
+console.log('1')
+setTimeout(function () {
+  console.log('2')
+  process.nextTick(function () {
+    console.log('3')
+  })
+  new Promise(function (resolve) {
+    console.log('4')
+    resolve()
+  }).then(function () {
+    console.log('5')
+  })
+})
+
+process.nextTick(function () {
+  console.log('6')
+})
+
+new Promise(function (resolve) {
+  console.log('7')
+  resolve()
+}).then(function () {
+  console.log('8')
+  Promise.resolve().then(() => console.log(123213))
+})
+
+setTimeout(function () {
+  console.log('9')
+  process.nextTick(function () {
+    console.log('10')
+  })
+  new Promise(function (resolve) {
+    console.log('11')
+    resolve()
+  }).then(function () {
+    console.log('12')
+  })
+})
+
+// 最终输出：1 7 6 8 2 4 3 5 9 11 10 12
+```
+
+这里需要额外注意两点：
+
+- Node 的 `process.nextTick` 有专门的 **nextTick 队列**运行，它总是在其他微任务之前运行。
+- 在 Node.js 中运行上述代码，如果版本在 v11 以上，那么不会有什么问题，但如果在这个版本以下的话，最终输出的结果会不一致。原因在于，浏览器的 Event Loop 和 Node.js 的 Event Loop 在处理异步事件的顺序是不同的。Node.js 的事件循环会先执行所有的宏任务，再执行微任务。
+
+## 进一步阅读
+
+这里看了很多资料，都整理了过来，感兴趣的可以了解以下：
+
+- [HTML Living Standard — Event loops](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops)
+- [这一次，彻底弄懂 JavaScript 执行机制](https://juejin.cn/post/6844903512845860872)
+- [事件循环：微任务和宏任务](https://zh.javascript.info/event-loop)
+- [一次弄懂 Event Loop（彻底解决此类面试问题）](https://juejin.cn/post/6844903764202094606)
+- [什么是 Event Loop？](https://www.ruanyifeng.com/blog/2013/10/event_loop.html)
+- [JavaScript 运行机制详解：再谈 Event Loop](https://www.ruanyifeng.com/blog/2014/10/event-loop.html)
+- [Nodejs Event Loop](https://stackoverflow.com/questions/10680601/nodejs-event-loop)
+- [第 10 题：常见异步笔试题，请写出代码的运行结果](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7)
+- [JavaScript 的工作原理](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)
+- [Loupe](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) 一个事件循环可视化网站
+- [深入解析你不知道的 EventLoop 和浏览器渲染、帧动画、空闲回调（动图演示）](https://juejin.cn/post/6844904165462769678)
+- [Tasks, microtasks, queues and schedules](https://juejin.cn/post/6844903638238756878)
+- [Understanding JavaScript Function Executions — Call Stack, Event Loop , Tasks & more](https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec)
+- [Event Loop and the Big Picture — NodeJS Event Loop Part 1](https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810) — 作者写了一系列关于事件循环的文章，在文中有给出地址，这里不一一贴出来。
+- [JS 原力覺醒 Day13 - Event Queue & Event Loop 、Event Table](https://ithelp.ithome.com.tw/articles/10221944)
diff --git "a/JavaScript/JavaScript \351\200\227\345\217\267\350\277\220\347\256\227\347\254\246.md" "b/JavaScript/JavaScript \351\200\227\345\217\267\350\277\220\347\256\227\347\254\246.md"
new file mode 100644
index 0000000..95c3e0e
--- /dev/null
+++ "b/JavaScript/JavaScript \351\200\227\345\217\267\350\277\220\347\256\227\347\254\246.md"	
@@ -0,0 +1,49 @@
+# JavaScript 逗号运算符
+
+[逗号操作符（`,`）](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator) 对它的每个操作数求值（从左到右），并返回最后一个操作数的值。
+
+```js
+let x = (2, 3)
+
+console.log(x) // 3
+```
+
+虽然只返回最后一个操作数的值，但也有例外，你可以在其中执行自增运算符。
+
+```js
+let a = 0
+let b = (a++, 11)
+console.log(a) // 1
+console.log(b) // 11
+```
+
+当放一个表达式时，它由左到右计算每个表达式，并传回最右边的表达式。
+
+```js
+const a = () => 'a'
+const b = () => 'b'
+
+const x = (a(), b())
+
+console.log(x) // b
+```
+
+**注意**：逗号（`,`）操作符在 JavaScript 中所有的操作符里是最低的优先顺序，所以没有括号表达式将变为：`(x = a()), b()`。
+
+其最多还是用在希望一个表达式的位置包含多个表达式。
+
+```js
+const arr = [1, 2, 3],
+  str = 'hello' // 不用重复声明
+
+console.log(arr) // [1, 2, 3]
+console.log(str) // 'hello'
+```
+
+for 循环的多参数
+
+```js
+for (let i = 0, len = arr.length; i < len; i++) {}
+```
+
+我在之前写过一篇 [JavaScript 运算符总结](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E8%BF%90%E7%AE%97%E7%AC%A6%E6%80%BB%E7%BB%93.md)，简单的总结了一些常用运算符的用法。
diff --git "a/JavaScript/JavaScript \351\223\276\345\274\217\350\260\203\347\224\250.md" "b/JavaScript/JavaScript \351\223\276\345\274\217\350\260\203\347\224\250.md"
new file mode 100644
index 0000000..2b2e4ac
--- /dev/null
+++ "b/JavaScript/JavaScript \351\223\276\345\274\217\350\260\203\347\224\250.md"	
@@ -0,0 +1,106 @@
+# JavaScript 链式调用
+
+如果你使用过 JQuery，你应该会经常看到这样的操作：
+
+> `$('text').css('color', 'pink').show()` —— 这就是链式调用。
+
+也就是在调用一个方法之后，还可以在该方法后面继续 `.xxx()` 调用其他方法，呈现链条式：
+
+```js
+_([1, 2, 3])
+  .map((n) => n * n)
+  .tap(console.log)
+  .thru((n) => n.reverse())
+  .value()
+```
+
+以上示例是使用 Lodash 库处理一个数组所调用的一些方法，跟 jQuery 一样都支持链式调用。
+
+它也被称为[流式接口](https://zh.wikipedia.org/wiki/%E6%B5%81%E5%BC%8F%E6%8E%A5%E5%8F%A3)（fluent interface），但开发者们更愿意称它为方法链式调用。
+
+下面我们来看看如何实现链式调用。
+
+## 函数调用
+
+在实现链式调用之前，我们先来看看一般函数的调用方式：
+
+```js
+function F(name) {
+  this.name = name
+  this.sayHi = function () {
+    console.log(this.name)
+  }
+  this.modifyName = function (name) {
+    this.name = name
+  }
+}
+
+const f = new F('IU')
+
+f.sayHi() // IU
+f.modifyName('UI')
+f.sayHi() // UI
+```
+
+可以看到，我们要调用函数，需要多次重复使用一个对象变量。链式调用可以简化这样的操作。
+
+## 链式调用
+
+链式调用实现很简单，我们只需要在构造函数/类中创建方法时，`return this` 返回当前调用方法的对象，可以实现链式调用方法。
+
+```js
+function Person(name) {
+  this.name = name
+
+  this.sayHi = function () {
+    console.log(this.name)
+    return this
+  }
+
+  this.modifyName = function (name) {
+    this.name = name
+    return this
+  }
+}
+
+var person = new Person('IU')
+
+person.sayHi().modifyName('UI').sayHi()
+// IU
+// UI
+// Person { name: 'UI', sayHi: f, modifyName: f }
+```
+
+通过使用链式调用，我们最终可以得到更简洁、更易于理解的代码。
+
+另外，我们可以编写一个函数来自动添加 `return this`：
+
+```js
+function chain(obj) {
+  Object.keys(obj).forEach(function (key) {
+    var member = obj[key]
+    if (typeof member === 'function' && !/\breturn\b/.test(member)) {
+      obj[key] = function () {
+        member.apply(this, arguments)
+        return this
+      }
+    }
+  })
+}
+```
+
+我们需要稍微改造一下示例，将方法添加的构造函数原型上：
+
+```js
+Person.prototype.sayHi = function (name) {
+  console.log(this.name)
+}
+
+Person.prototype.modifyName = function (name) {
+  this.name = name
+}
+
+chain(Person.prototype)
+```
+
+尝试运行它，你会得到相同的结果。
diff --git "a/JavaScript/JavaScript \351\253\230\351\230\266\345\207\275\346\225\260.md" "b/JavaScript/JavaScript \351\253\230\351\230\266\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..28feb70
--- /dev/null
+++ "b/JavaScript/JavaScript \351\253\230\351\230\266\345\207\275\346\225\260.md"	
@@ -0,0 +1,88 @@
+# JavaScript 高阶函数
+
+**高阶函数**（Higher-order function）是将函数作为参数或将函数作为结果返回的函数。
+
+作为参数：
+
+```js
+function foo(fn){
+  if(typeof fn === "function"){
+    fn()
+  }
+}
+
+const bar = function () {
+  // do something
+}
+
+foo(bar)
+```
+
+作为返回值：
+
+```js
+function foo() {
+  return function () {
+    // do something
+  }
+}
+
+const fn = foo()
+fn // ƒ ()
+```
+
+之所以可以使用 JavaScript 编写高阶函数，是因为函数是值，这意味着它们可以分配给变量并作为值传递。当引用作为参数传递的函数时，您可能还会经常听到术语**回调**，因为它是由高阶函数调用的。这在 JavaScript 中尤其常见，事件处理、异步代码和数组操作在很大程度上依赖于回调的概念。
+
+**其主要优点**是它使我们能够创建合成以及更可复用和可读的代码的抽象层，可以轻松组合以创建更复杂的逻辑并且具有很高的可复用性。
+
+## 示例
+
+我们还是使用在 [JavaScript 组合函数](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E5%90%88%E6%88%90%E5%87%BD%E6%95%B0.md)和[如何在 JavaScript 中使用管道（管道运算符）？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%AE%A1%E9%81%93%EF%BC%88%E7%AE%A1%E9%81%93%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89%EF%BC%9F.md) 中的例子。
+
+```js
+const compose = (f) => (g) => (x) => f(g(x))
+
+const title = 'Front End Interview'
+
+const toLowerCase = (str) => str.toLowerCase()
+const addHyphens = (str) => str.replace(/\s/g, '-')
+
+compose(toLowerCase)(addHyphens)(title) // "front-end-interview"
+```
+
+就是这样。两点：**函数作为参数和返回函数**。
+
+## JS 中内置的高阶函数
+
+JavaScript 中很多内置的高阶函数，如 `reduce`、`filter`、`sort` 和 `map` 等。下面看看几个简单的示例：
+
+```js
+const add = (a, b) => a + b
+const isEven = (num) => num % 2 === 0
+
+const data = [2, 3, 1, 5, 4, 6]
+
+data.filter(Boolean(isEven)) // [2, 4, 6]
+data.filter(isEven).reduce(add) // 12
+data.sort((a, b) => a - b) // [1, 2, 3, 4, 5, 6]
+```
+
+`map` 将使用传入的第一个回调函数来转换数组中的每个元素，并返回一个包含转换后元素的新数组。
+
+```js
+let arr = [1, 2, 3, 4, 5]
+
+function pow(x) {
+  return x * x
+}
+
+let results = arr.map(pow)
+```
+
+它不会改变原数组，但要记住如果数组是引用类型的话，转换过程中修改了某个属性，会影响到原始数组。
+
+高阶函数不仅需要操作数组的时候会用到，还有许多函数返回新函数的用例。`Function.prototype.bind` 就是一个例子。
+
+## 提升
+
+你可以在 [30 seconds of code](https://www.30secondsofcode.org/js/p/1) 中的 JavaScript 部分找到很多关于高阶函数的有用示例。
diff --git "a/JavaScript/Location \345\257\271\350\261\241.md" "b/JavaScript/Location \345\257\271\350\261\241.md"
new file mode 100644
index 0000000..0bc1bee
--- /dev/null
+++ "b/JavaScript/Location \345\257\271\350\261\241.md"	
@@ -0,0 +1,62 @@
+# Location 对象
+
+浏览器公开的 `window.location` 属性指向一个 [Location](https://developer.mozilla.org/en-US/docs/Web/API/Location) 对象，它是 `window` 对象的一部分，包含有关当前 URL 的信息。
+
+属性：
+
+- `location.hash` — 设置或返回从井号（`#`）开始的 URL 的锚部分。
+- `location.host` — 设置或返回主机名和端口。
+- `location.href` — 设置或返回完整的 URL。
+- `location.port` — 返回 web 主机的端口（80 或 443）。
+- `location.search` — 设置或返回从问号（`?`）开始的 URL 的查询部分。
+- `location.hostname` — 返回 web 主机的域名。
+- `location.pathname` — 返回当前页面的路径名。
+- `location.protocol` — 返回所使用的 web 协议（`http:` 或 `https:`）。
+
+方法：
+
+- `location.reload()` 重新加载当前文档。
+- `location.replace(url)` 以给定的 URL 来替换当前的资源。
+
+```js
+// 将跳转到该链接相应的页面
+location.replace('https://github.com/lio-zero')
+```
+
+- `location.assign(url)` 会触发窗口加载并显示指定的 URL 的内容，加载新的文档。
+
+```js
+// 跳转到给定 URL 的页面
+location.assign('https://github.com/lio-zero')
+```
+
+`replace()` 和 `assign()` 不同在于，调用 `replace()` 方法后，当前页面不会保存到会话历史中。这样，用户点击回退按钮时，将不会再跳转到该页面。（不保存跳转前的页面）
+
+## HTTP 跳转 HTTPS
+
+如果页面当前访问的是 HTTP 协议页面，则将其重定向到 HTTPS。
+
+```js
+const httpsRedirect = () => {
+  if (location.protocol !== 'https:')
+    location.replace('https://' + location.href.split('//')[1])
+}
+
+httpsRedirect() // 若在 http://www.baidu.com，则跳转到 https://www.baidu.com
+```
+
+## 重定向到指定的 URL
+
+- 使用 `location.href` 或 `location.replace()` 重定向到指定的 URL。
+- 传递第二个参数来模拟链接点击（默认）或 HTTP 重定向。
+
+```js
+const redirect = (url, asLink = true) =>
+  asLink ? (location.href = url) : location.replace(url)
+
+redirect('https://github.com/lio-zero')
+```
+
+## 更多资料
+
+[重定向到另一个页面](https://github.com/lio-zero/blog/blob/main/JavaScript/%E9%87%8D%E5%AE%9A%E5%90%91%E5%88%B0%E5%8F%A6%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.md)
diff --git "a/JavaScript/Map \344\270\216 WeakMap \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/Map \344\270\216 WeakMap \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..9f30c46
--- /dev/null
+++ "b/JavaScript/Map \344\270\216 WeakMap \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,47 @@
+# Map 与 WeakMap 的区别
+
+`Map` 和 `WeakMap` 是两种数据结构，可用于操纵键和值之间的关系。
+
+## 区别
+
+我们可以对 `Map` 的键和值使用对象或任何基本类型。
+
+但是，`WeakMap` 仅接受对象（null 除外）。这意味着我们不能将基本类型用作 `WeakMap` 的键。
+
+```js
+const attrs = new WeakMap()
+
+attrs.set('color', 'plum') // error
+```
+
+与 `Map` 不同，`WeakMap` 不支持对键和值进行迭代。无法获取 `WeakMap` 的所有键或值。此外，也没有办法清除 `WeakMap`。
+
+**最重要的区别是，`WeakMap` 不会阻止在没有对键的引用时对键进行垃圾回收。**
+
+另一方面，`Map` 无限期地维护对键和值的引用。一旦创建了键和值，它们将占用内存，即使没有对它们的引用，也不会被垃圾回收。这可能会导致内存泄漏问题。
+
+考虑下面的一个简单代码，我们将一个唯一的 ID 映射到特定的人的信息：
+
+```js
+let id = { value: 1 }
+
+const people = new Map()
+people.set(id, {
+  name: 'Foo',
+  age: 20,
+  address: 'Bar'
+})
+
+// 移除 id
+id = null
+```
+
+删除键对象 `id` 后，它仍然能够通过映射键访问其引用：
+
+```js
+people.keys().next().value // { value: 1 }
+```
+
+由于这种差异，`WeakMap`（顾名思义）保存对键的弱引用。它解释了为什么它的键不可枚举，这在前面的区别中已经提到。
+
+由于 `WeakMap` 保存对键的弱引用，且无法枚举，因此无法使用 `keys()`、`values()`、`entries()` 这些方法。
diff --git "a/JavaScript/Navigator \345\257\271\350\261\241.md" "b/JavaScript/Navigator \345\257\271\350\261\241.md"
new file mode 100644
index 0000000..638bb7a
--- /dev/null
+++ "b/JavaScript/Navigator \345\257\271\350\261\241.md"	
@@ -0,0 +1,95 @@
+# Navigator 对象
+
+浏览器公开的 `window.navigator` 属性指向一个 navigator 对象，它是一个容器对象，包含有关访问者浏览器的信息。
+
+它提供了许多 web 平台 API。
+
+标准属性包括：
+
+- `cookieEnabled` — 返回一个布尔值，来表示当前页面是否启用了 cookie。
+- `geolocation` — 指向 Geolocation API 使用的 Geolocation。
+- `language` — 返回表示浏览器中当前用户活动偏好语言的字符串。
+- `onLine` — 返回浏览器的联网状态。正常联网（在线）返回 `true`，不正常联网（离线）返回 `false`。（浏览器以不同的方式解释，请注意）
+- `serviceWorker` — 分配给文档的 [ServiceWorkerContainer](https://developer.mozilla.org/zh-CN/docs/Web/API/ServiceWorkerContainer) 对象。
+- `userAgent` — 返回当前浏览器的用户代理（user agent）标识符的名称。
+- `languages` — 返回一个数组，数组内容表示网站访客所使用的语言。使用 BCP 47 语言标签来描述不同的语言。在返回的数组中，最适合当前用户的语言将会被排到数组的首位。它占时只在一些浏览器内被使用。
+- etc
+
+> 以上列出的标准属性都是只读的。
+
+标准方法包括：
+
+- `registerProtocolHandler()` — 一种让网站注册为协议处理程序的方法。
+
+还有更多的方法和属性，它们要么已被弃用（一些浏览器还支持它们），要么是实验性的，要么是作为草案实现的，还没有最终完成，要么只是在一小部分浏览器上可用，所以我在这里没有包括它们，感兴趣的请查阅 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator) 了解它们。
+
+## `navigator` 对象具有误导性
+
+来自 `navigator` 对象的信息是具有误导性的，不应该被用于检测浏览器版本，这是因为：
+
+- `navigator` 数据可被浏览器使用者更改
+- 一些浏览器对测试站点会识别错误
+- 浏览器无法报告晚于浏览器发布的新操作系统
+
+## 浏览器检测
+
+由于不同的浏览器支持不同的对象，你可以使用浏览器对象独有的属性来检测浏览器。例如，由于只有 Opera 支持属性 `window.opera`，你可以据此识别出 Opera 浏览器。
+
+```js
+if (window.opera) {
+  // do something
+}
+```
+
+## 如何检测浏览器版本（UA 检测）？
+
+以下是检测是否为 Chrome 浏览器：
+
+```js
+const isChrome = navigator.userAgent.includes('Chrome')
+```
+
+## 检测页面是在移动/PC 设备上查看
+
+使用正则表达式测试 `navigator.userAgent` 属性，以确定设备是移动设备还是 PC 设备。
+
+```js
+const detectDeviceType = () =>
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  )
+    ? 'Mobile'
+    : 'Desktop'
+
+detectDeviceType() // 'Mobile' or 'Desktop'
+```
+
+你可以打开控制台，切换为移动设备进行模拟测试。
+
+另外，推荐阅读[检测是否为移动浏览器](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%A3%80%E6%B5%8B%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A7%BB%E5%8A%A8%E6%B5%8F%E8%A7%88%E5%99%A8.md)。
+
+## 检查当前用户是否为苹果设备
+
+方法与上一节类似，只不过换成了 `platform` 属性。
+
+```js
+const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+
+console.log(isAppleDevice)
+```
+
+**注意**，该属性已废弃，但一些浏览器还支持它。
+
+## 检测当前用户的首选语言
+
+- 使用 `navigation.language` 或 `navigation.languages` 的第一个元素，否则返回 `defaultLang`。
+- 省略参数 `defaultLang` 将以 `'zh-CN'` 作为默认语言。
+
+```js
+const detectLanguage = (defaultLang = 'zh-CN') =>
+  navigator.language ||
+  (Array.isArray(navigator.languages) && navigator.languages[0]) ||
+  defaultLang
+
+detectLanguage() // 'zh-CN'
+```
diff --git "a/JavaScript/Number() \345\222\214 parseInt() \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/Number() \345\222\214 parseInt() \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..b27abe7
--- /dev/null
+++ "b/JavaScript/Number() \345\222\214 parseInt() \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,122 @@
+# Number() 和 parseInt() 的区别
+
+`Number()` 和 `parseInt()` 通常用于将字符串转换为数字。
+
+## 区别
+
+`Number()` 转换类型，而 `parseInt` 解析输入值。
+
+```js
+// 解析
+parseInt('32px') // 32
+parseInt('5e1') // 5
+
+// 转换类型
+Number('32px') // NaN
+Number('5e1') // 50
+```
+
+如您所见，`parseInt` 将最多解析第一个非数字字符。另一方面，`Number` 将尝试转换整个字符串。
+
+`parseInt` 将第一个字符串转换为字符串，查看下面的浮点数解析：
+
+```js
+parseInt(0.1) // 0
+parseInt(0.01) // 0
+parseInt(0.001) // 0
+```
+
+`parseInt` 将参数转换为字符串后，无法解析 `.` 符号，所以只取到 `0`。
+
+`parseInt` 接受两个参数。第二个参数用于指示基数。
+
+```js
+parseInt('0101') // 101
+parseInt('0101', 10) // 101
+parseInt('0101', 2) // 5
+
+Number('0101') // 101
+```
+
+当我们传递特殊值（如 `undefined` 或 `null`）时，它们返回不同的结果：
+
+```js
+parseInt() // NaN
+parseInt(null) // NaN
+parseInt(true) // NaN
+parseInt('') // NaN
+
+Number() // 0
+Number(null) // 0
+Number(true) // 1
+Number('') // 0
+```
+
+## 建议
+
+始终将基数传递给 `parseInt`。
+
+`parseInt` 方法采用两个参数：
+
+```js
+parseInt(value, radix)
+```
+
+第二个参数指定当前的数字系统。如果未指定，则将根据该值自动设置。
+
+如果该值以 `0x` 或 `0X` 开头，则基数为 16（十六进制）
+
+在其他情况下，基数为 10（十进制）。
+
+在旧版本的 JavaScript 中，如果字符串以 0 开头，则基数设置为 8（八进制）。
+
+```js
+parseInt('0xF') // 15
+parseInt('0XF') // 15
+parseInt('0xF', 16) // 15
+
+parseInt('0xF', 10) // 0
+```
+
+由于该方法在不同版本的 JavaScript 和浏览器中可以实现不同，因此建议传递基数。
+
+在解析数字之前修剪空格。
+
+`Number()` 和 `parseInt` 都接受输入中的空格。但请注意，在传递带有空格的值时，可能会得到不同的结果，如下所示：
+
+```js
+parseInt('   5   ') // 5
+parseInt('12 345') // 12，不是12345
+```
+
+为避免类似情况，应在分析之前删除所有空格：
+
+```js
+parseInt(value.replace(/\s+/g, ''), 10)
+```
+
+不要使用 `new Number()` 来比较数字。
+
+```js
+Number('2') == 2 // true
+Number('2') === 2 // true
+
+new Number('2') == 2 // true
+new Number('2') === 2 // false
+
+const a = new Number('2')
+const b = new Number('2')
+
+a == b // false
+a === b // false
+```
+
+## 提示
+
+您可以使用 `+` 运算符，而不是使用 `Number()` 构造函数将字符串转换为数字：
+
+```js
++'010' // 10
++'2e1' // 20
++'0xF' // 15
+```
diff --git "a/JavaScript/Object \344\270\216 Map \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/Object \344\270\216 Map \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..b7cc450
--- /dev/null
+++ "b/JavaScript/Object \344\270\216 Map \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,133 @@
+# Object 与 Map 的区别
+
+存储键值对是我们在 JavaScript 中必须处理的常见问题。最基本的方法是使用对象：
+
+```js
+const person = {}
+person.name = 'Foo'
+person.age = 20
+
+// or
+const person = {
+  name: 'Foo',
+  age: 20
+}
+```
+
+从 ES6 引入的 `Map` 数据结构提供了相同的功能。上面的示例代码可以用 `Map` 重写，如下所示：
+
+```js
+const person = new Map()
+person.set('name', 'Foo')
+person.set('age', 20)
+```
+
+## 区别
+
+- 对象仅接受字符串和 `Symbol` 键。其他类型将自动转换为字符串。另一方面，`Map` 接受任何类型的键。
+
+- 我们可以使用 `forEach` 或 `for...of` 直接迭代 `map` 的属性：
+
+```js
+const styles = new Map()
+styles.set('color', 'blue')
+styles.set('fontSize', '12px')
+
+styles.forEach((value, key) => console.log(key, '=', value))
+
+// color = blue
+// fontSize = 12px
+```
+
+对象不能直接进行迭代。为了循环对象的属性，我们必须使用 `object.keys`、`object.values` 或 `object.entries` 来接收键、值或键值对的列表。
+
+```js
+const styles = {
+  color: 'blue',
+  fontSize: '12px'
+}
+
+Object.keys(styles).forEach((key) => console.log(key, '=', styles[key]))
+
+// color = blue
+// fontSize = 12px
+```
+
+对象具有特殊属性，如 `constructor`、`proto` 等。
+
+```js
+let person = {}
+person['constructor'] // ƒ Object() { [native code] }
+```
+
+而 `Map` 仅包含我们定义的内容：
+
+```js
+let person = new Map()
+person.get('constructor') // undefined
+```
+
+JSON 支持 `Object`：
+
+```js
+const person = {}
+person.name = 'Foo'
+person.age = 20
+
+JSON.stringify(person) // "{"name":"Foo","age":20}"
+```
+
+使用 `Map`，当使用 JSON 序列化时，无法获取正确的数据：
+
+```js
+const person = new Map()
+person.set('name', 'Foo')
+person.set('age', 20)
+
+JSON.stringify(person) // "{}"
+```
+
+## 很高兴知道
+
+`map` 保持项目的顺序。这意味着，当您在 `map` 的关键点上循环时，我们将看到与它们插入 `map` 时相同的顺序。
+
+对于仅由 `string` 键和 `symbol` 键组成的对象也是如此。如果存在需要转换为 `string` 的键，则不会保留 `object` 键的顺序。
+
+```js
+let codes = { A: 65, B: 66, C: 67, 0: 48 }
+codes // {0: 0, A: 65, B: 66, C: 67}
+Object.keys(codes) // ["0", "A", "B", "C"]
+```
+
+## 建议
+
+如果我们想存储键/值对而不关心在 JSON 中序列化它们，那么就使用 `map`。通过循环获取 `map` 的大小比使用对象更舒适。
+
+如果我们希望在原始数据和 JSON 之间来回转换，或者包含特定的业务逻辑，则应使用 `Object`：
+
+```js
+const person = {
+  firstName: 'Foo',
+  lastName: 'Bar',
+  getFullName() {
+    return `${this.firstName} ${this.lastName}`
+  }
+}
+```
+
+## 其他差异
+
+对于对象，我们需要手动计算。而 `map` 有一个内置的 `size` 属性，可以用来跟踪键/值对的数量。
+
+```js
+const obj = new Map()
+obj.set('name', 'O.O')
+obj.set('age', 18)
+
+obj.size // 2
+```
+
+> 您可以查看[如何在 JavaScript 中获取对象的长度](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%95%BF%E5%BA%A6.md)，以了解获取对象长度的多种方式。
+
+- 清除对象需要手动操作，并且在某些情况下可能并不简单。`map` 通过使用 `Map.prototype.clear()` 解决这个问题。
+- 您可以使用 `in` 运算符或 `Object.prototype.hasOwnProperty()` 检查对象中是否存在给定键。`map` 使用 `Map.prototype.has()` 完成同样的事情。
diff --git "a/JavaScript/Object.freeze() \344\270\216 Object.seal() \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/Object.freeze() \344\270\216 Object.seal() \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..ce460a9
--- /dev/null
+++ "b/JavaScript/Object.freeze() \344\270\216 Object.seal() \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,30 @@
+# Object.freeze() 与 Object.seal() 的区别
+
+`Object.freeze()` 与 `Object.seal()` 两者都用于防止 JavaScript 对象被修改。
+
+```js
+const freeze = Object.freeze({ name: 'O.O' })
+const seal = Object.seal({ name: 'O.O' })
+
+freeze.name = 'D.O' // freeze { name: 'O.O' }
+seal.name = 'D.O' // seal { name: 'D.O' } -> 注意：这里已经被修改了
+
+delete freeze.name // freeze { name: 'O.O' }
+delete seal.name // freeze { name: 'O.O' }
+
+freeze.age = 18 // freeze { name: 'O.O' }
+seal.age = 18 // seal { name: 'O.O' }
+
+const nums = Object.freeze([1, 2, 3])
+nums // [1, 2, 3]
+nums.push(4) // TypeError
+```
+
+如果要防止添加新属性和删除现有属性，那么这两种方法都可以满足您的需要。但是，如果要防止现有属性被更改，则必须使用 [`Object.freeze()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)。原因就是 [`Object.seal()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal) 只将现有 `configurable` 属性标记为不可配置，这意味着只要它们是可写的，就可以更改它们的值。
+
+|                   | 添加 | 读取 | 更改 | 删除 |
+| :---------------: | :--: | :--: | :--: | :--: |
+| `Object.freeze()` |  ❌  |  ✅  |  ❌  |  ❌  |
+|  `Object.seal()`  |  ❌  |  ✅  |  ✅  |  ❌  |
+
+> **注意**：这两种方法都对对象执行浅**冻结/密封**。这意味着嵌套对象和数组不会被冻结或密封，可以进行修改。为了防止这种情况发生，您可以像本文所述的那样对对象进行深度冻结。
diff --git "a/JavaScript/Object.getOwnPropertyNames() \344\270\216 Object.keys() \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/Object.getOwnPropertyNames() \344\270\216 Object.keys() \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..a4e50e9
--- /dev/null
+++ "b/JavaScript/Object.getOwnPropertyNames() \344\270\216 Object.keys() \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,44 @@
+# Object.getOwnPropertyNames() 与 Object.keys() 的区别
+
+`Object.getOwnPropertyNames(obj)` 返回对象 `obj` 的所有属性（包括可枚举和不可枚举）。`Object.keys(obj)` 返回所有可枚举的属性。
+
+`Object.defineProperty` 中的 `enumerable` 选项可定义属性是否可枚举。
+
+在下面的例子中，`screen` 对象有两个属性：`width` 和 `height`。
+
+```js
+const screen = {
+  width: 1200,
+  height: 800
+}
+
+Object.getOwnPropertyNames(screen) // ['width', 'height']
+Object.keys(screen) // ['width', 'height']
+```
+
+让我们再定义一个名为 `resolution` 的属性，但它被设置为 `enumerable: false`:
+
+```js
+Object.defineProperties(screen, {
+  resolution: {
+    enumerable: false,
+    value: '2560 x 1440'
+  }
+})
+```
+
+那么，`resolution` 属性就不会出现在 `Object.keys` 的列表中：
+
+```js
+Object.getOwnPropertyNames(screen) // ['width', 'height', 'resolution']
+Object.keys(screen) // ['width', 'height']
+```
+
+对于数组，`Object.getOwnPropertyNames` 包含一个名为 `length` 的额外属性，它是数组的大小。
+
+```js
+const animals = ['dog', 'cat', 'tiger']
+
+Object.keys(animals) // ['0', '1', '2']
+Object.getOwnPropertyNames(animals) // ['0', '1', '2', 'length']
+```
diff --git "a/JavaScript/Object.is() \345\222\214 === \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/Object.is() \345\222\214 === \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..52eee6f
--- /dev/null
+++ "b/JavaScript/Object.is() \345\222\214 === \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,17 @@
+# Object.is() 和 === 的区别
+
+`Object.is()` 的行为与 `===`（严格相等操作符）相同，除了 `NaN`、`+0` 和 `-0`。
+
+```js
++0 === -0 // true
+Object.is(+0, -0) // false
+
+NaN === NaN // false
+Object.is(NaN, NaN) // true
+
+Number.NaN === Number.NaN // false
+Object.is(Number.NaN, Number.NaN) // true
+
+NaN === Number.NaN // false
+Object.is(NaN, Number.NaN) // true
+```
diff --git "a/JavaScript/Object.keys\343\200\201values\343\200\201entries.md" "b/JavaScript/Object.keys\343\200\201values\343\200\201entries.md"
new file mode 100644
index 0000000..3d0ec98
--- /dev/null
+++ "b/JavaScript/Object.keys\343\200\201values\343\200\201entries.md"
@@ -0,0 +1,121 @@
+# Object.keys/values/entries
+
+JavaScript 中的数据结构 `Set`、`Map`、`Array` 都有 `keys()`、`values()` 和 `entries()`。
+
+普通对象也支持类似的方法，但是语法上有一些不同。
+
+## Object.keys()
+
+[`Object.keys()`](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) 返回一个包含该对象所有的键的数组。
+
+```js
+let user = {
+  name: 'IU',
+  age: 18
+}
+
+const keyList = Object.keys(user)
+console.log(keyList) // ['name', 'age']
+```
+
+### 检查数组中是否存在键
+
+使用 `Array.prototype.includes()` 方法检查数组中是否存在键。
+
+```js
+const val = 'age'
+
+keyList.includes(val) ? '存在 key' : '不存在 key'
+```
+
+### 计算属性数量
+
+```js
+const count = (obj) => Object.keys(obj).length
+
+count(user) // 2
+```
+
+### 判断对象是否为空
+
+```js
+const isEmpty = (obj) => Object.keys(obj).length === 0
+
+isEmpty({}) // true
+isEmpty(user) // false
+```
+
+## Object.values()
+
+[`Object.values(obj)`](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/values) 返回一个包含该对象所有的值的数组。
+
+```js
+let user = {
+  name: 'IU',
+  age: 18
+}
+
+// 遍历所有的值
+for (let value of Object.values(user)) {
+  console.log(value)
+}
+
+// IU
+// 18
+```
+
+### 属性求和
+
+```js
+let price = {
+  HTML: 99,
+  JavaScript: 299,
+  CSS: 199
+}
+```
+
+- **方式一**：使用 `Object.values` 和 `for...of` 循环返回所有数的总和。
+
+```js
+const sumPrice = (val) => {
+  let sum = 0
+  for (let salary of Object.values(val)) {
+    sum += salary
+  }
+  return sum
+}
+
+sumPrice(price) // 650
+```
+
+- **方式二**：使用 `Object.values` 和 `reduce` 来求和。
+
+```js
+const sumPrice = (val) => Object.values(val).reduce((a, b) => a + b, 0)
+
+sumPrice(price) // 650
+```
+
+## Object.entries()
+
+[`Object.entries(obj)`](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) 返回一个包含该对象所有 `[key, value]` 键值对的数组。
+
+```js
+let user = {
+  name: 'IU',
+  age: 18
+}
+
+for (const [key, value] of Object.entries(user)) {
+  console.log(`${key}: ${value}`)
+}
+
+// name: IU
+// age: 18
+```
+
+## 你应该知道
+
+- `Object.keys/values/entries` 方法都是用 `Object.` 来调用。
+- 就像 `for...in` 循环一样，`Object.keys/values/entries` 方法会忽略使用 `Symbol` 作为键的属性。
+- 如果我们想要 `Symbol` 类型的键，可以使用 [`Object.getOwnPropertySymbols()`](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols) 方法，它会返回一个只包含 `Symbol` 类型键的数组。还有另一种由 [Reflect](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect) 对象提供的方法 [`Reflect.ownKeys(obj)`](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys)，它会返回所有键。
diff --git "a/JavaScript/Screen \345\257\271\350\261\241.md" "b/JavaScript/Screen \345\257\271\350\261\241.md"
new file mode 100644
index 0000000..77a475c
--- /dev/null
+++ "b/JavaScript/Screen \345\257\271\350\261\241.md"	
@@ -0,0 +1,19 @@
+# Screen 对象
+
+`window.screen` 对象包含有关用户屏幕的信息。
+
+![Screen API](https://upload-images.jianshu.io/upload_images/18281896-ded336f2a68aa847.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+上图是在 Chrome 控制台打印的 [Screen](https://developer.mozilla.org/zh-CN/docs/Web/API/Screen) 对象，其中显示了所有可用的属性和方法。
+
+属性：
+
+- `height/width` — 返回当前屏幕的高度/宽度。（以像素为单位）
+- `availHeight/availWidth` — 可用的屏幕高度/宽度。
+- `colorDepth` — 返回屏幕的色彩深度。
+- `pixelDepth` — 获取屏幕的像素点。
+- `orientation` — 返回当前屏幕的转向。
+
+## 更多资料
+
+[视口、设备和文档大小](https://github.com/lio-zero/blog/blob/main/DOM/%E8%A7%86%E5%8F%A3%E3%80%81%E8%AE%BE%E5%A4%87%E5%92%8C%E6%96%87%E6%A1%A3%E5%A4%A7%E5%B0%8F.md)
diff --git a/JavaScript/UMD.md b/JavaScript/UMD.md
new file mode 100644
index 0000000..ff9cd48
--- /dev/null
+++ b/JavaScript/UMD.md
@@ -0,0 +1,35 @@
+# UMD
+
+UMD（Universal Module Definition，通用模块定义） 提供对 JavaScript 模块捆绑器和加载器的支持，以及全局命名空间（和其他模式一样）。
+
+```js
+;(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], function () {
+      return factory(root)
+    })
+  } else if (typeof exports === 'object') {
+    module.exports = factory(root)
+  } else {
+    root.myPlugin = factory(root)
+  }
+})(globalThis, function (window) {
+  'use strict'
+
+  // do something ...
+})
+```
+
+`globalThis` 是 ES11 新出的特性，如果需要支持低版本浏览器，可以将 `globalThis` 替换为如下：
+
+```js
+typeof global !== 'undefined'
+  ? global
+  : typeof window !== 'undefined'
+  ? window
+  : this
+```
+
+您可以更改 `myPlugin` 为您想用于插件的任何命名空间。
+
+建议作为通用的模块系统，可以与任何模式一起使用，例如 AMD 和 CommonJS 都兼容。
diff --git "a/JavaScript/const\343\200\201let \344\270\216 var \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/const\343\200\201let \344\270\216 var \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..c9d924b
--- /dev/null
+++ "b/JavaScript/const\343\200\201let \344\270\216 var \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,131 @@
+# const、let 与 var 的区别
+
+JS 有三个关键字可用于声明变量：
+
+- `var`
+- ES6 新增的 `let` 和 `const`
+
+## 区别
+
+无法在声明 `let` 变量的最近封闭块（块级作用域）之外访问该变量。
+
+```js
+{
+  let foo
+}
+
+// ReferenceError: foo is not defined
+console.log(foo)
+```
+
+如果我们用 `var` 声明替换 `let`，上面的示例代码就可以工作。
+
+- `let` 变量在声明之前不能使用。下面的示例代码将引发 `ReferenceError`：
+
+```js
+var foo = 'hello'
+{
+  console.log(foo)
+  let foo = 'hi'
+}
+// ReferenceError: Cannot access 'foo' before initialization
+```
+
+如果在上面的示例代码中使用 `var`，我们将在控制台中看到 `hello`。因为 `var` 存在变量提升，而 `let` 存在 TDZ（Temporal Dead Zone，暂存性死区），即只要块级作用域中存在 `let`，那么它所声明的变量就绑定了这个区域，不再受外部的影响。
+
+- 同一作用域下 `let` 不能声明同名变量。
+
+```js
+// var 可以使用相同的名称重新声明变量
+var foo, foo
+var bar = 1
+var bar
+bar // 1
+
+// let 则不行
+let baz
+let baz
+// 抛出以下错误
+// SyntaxError: Identifier 'baz' has already been declared
+```
+
+- 在顶层，全局 `let` 变量不会附加到全局 `window` 对象。
+
+```js
+var bar = 'world'
+window.bar // 'world'
+
+let foo = 'hello'
+window.foo // undefined
+```
+
+- 使用 `let` 可以解决 `var` 无法解决的闭包问题。
+
+```js
+for (var i = 0; i < 3; i++) {
+  setTimeout(function () {
+    console.log(i) // 3 3 3
+  }, i * 1000)
+}
+```
+
+它不像我们期望的那样工作。`for` 是同步任务，一下子就运行完了，`setTimeout` 属于异步任务，回调中的变量 `i` 将引用同一个对象。最终 `for` 循环到 `i = 3` 停止循环，而这个 `i` 会被赋予到顶层 `window` 对象上，所以最终结果输出的都是 3。
+
+我们可以使用 `let` 解决此问题：
+
+```js
+for (let i = 0; i < 3; i++) {
+  setTimeout(function () {
+    console.log(i) // 0 1 2
+  }, i * 1000)
+}
+```
+
+- `const` 关键字的行为与 `let` 相同，只是在声明时必须赋予一个初始值。
+
+```js
+// 抛出以下错误
+// SyntaxError: Missing initializer in const declaration
+const a
+```
+
+且变量不能更改：
+
+```js
+const a = 'hello'
+
+// 抛出以下错误
+// TypeError: Assignment to constant variable
+a = 'world'
+```
+
+**值得注意的是**，使用 `const` 并不意味着变量是不可变的。可以更改对象的属性：
+
+```js
+const person = {}
+person.age = 20
+
+// 向数组中添加更多项
+const arr = []
+arr.push('foo')
+arr[1] = 'bar'
+console.log(arr) // ['foo', 'bar']
+```
+
+## 建议
+
+- 不要使用 `var`，除非您必须支持那些不支持 `let` 和 `const` 关键字的旧浏览器。
+- [关于使用 `let` 还是 `const` 的一些讨论](https://overreacted.io/on-let-vs-const/)
+
+## 总结
+
+- 声明变量的三种方式：`var`、`let`、`const`。
+- `var` 和 `let` 用于声明变量，而 `const` 用于声明只读的常量。
+- `var` 在全局作用域下声明变量，全局可用，而在函数作用域下声明的变量，只能在当前的环境下使用。
+- `var` 声明的变量，不是全局作用域就是函数作用域，没有块级作用域，会忽略代码块 `{}`（除函数外），其因在于 JS 早期块没有词法环境。
+- `var` 声明的变量允许重新声明，而 `let` 和 `const` 在相同作用域内，不允许重新声明。
+- `var` 声明的变量存在变量提升，但是赋值不会。`let` 和 `const` 不存在变量提升。
+- `let` 和 `const` 声明形成块作用域，声明的变量只能在它声明的封闭块内使用。
+- 同一作用域下 `let` 和 `const` 不能声明同名变量，而 `var` 可以。
+- `let` 和 `const` 存在暂存性死区（TDZ）。
+- `let` 和 `const` 的唯一区别是：`const` 变量一旦声明必须赋值，声明后不能再修改，但如果声明的是对象，我们可以更改其属性。
diff --git "a/JavaScript/delete obj.property \344\270\216 obj.property = undefined \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/delete obj.property \344\270\216 obj.property = undefined \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..d546f4e
--- /dev/null
+++ "b/JavaScript/delete obj.property \344\270\216 obj.property = undefined \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,100 @@
+# delete obj.property 与 obj.property = undefined 的区别
+
+假设 `obj` 是一个对象，并且 `property` 是其属性的名称。
+
+## 区别
+
+调用 `obj.property = undefined` 将属性的值设置为 `undefined`。如果我们迭代对象的属性，该属性仍然存在并出现。
+
+```js
+let person = { name: 'John' }
+person.name = undefined
+
+person.hasOwnProperty('name') // true
+name in person // true
+Object.keys(person) // ['name']
+for (let p in person) {
+  console.log(p) // 'name'
+}
+```
+
+`delete obj.property` 将从对象中删除该属性。让我们重新审视上面的示例代码，现在使用 `delete person.name`：
+
+```js
+let person = { name: 'John' }
+delete person.name
+
+person.hasOwnProperty('name') // false
+name in person // false
+Object.keys(person) // []
+
+// 控制台中没有显示任何内容
+for (let p in person) {
+  console.log(p)
+}
+```
+
+`delete` 不能删除继承的属性。
+
+```js
+const car = { branch: 'Audi' }
+
+const a4 = Object.create(car)
+console.log(a4.branch) // 'Audi'
+
+delete a4.branch
+console.log(a4.branch) // 'Audi'
+```
+
+在这种情况下，我们必须将属性设置为 `undefined`：
+
+```js
+a4.branch = undefined
+console.log(a4.branch) // undefined
+```
+
+## 提示
+
+`delete` 不适用于数组：
+
+```js
+const array = [1, 2, 3, 4, 5]
+
+delete array[1]
+console.log(array) // [1, empty, 3, 4, 5]
+```
+
+如果要从数组中删除项目，请使用 `splice` 方法。
+
+```js
+const array = [1, 2, 3, 4, 5]
+array.splice(2, 1)
+console.log(array) // [1, 2, 4, 5]
+```
+
+`pop` 方法可以从数组中删除最后一个元素：
+
+```js
+const array = [1, 2, 3, 4, 5]
+array.pop()
+console.log(array) // [1, 2, 3, 4]
+```
+
+我们可以使用 ES6 扩展运算符从对象中删除属性：
+
+```js
+const { name, ...rest } = { name: 'Foo', age: 20 }
+
+console.log(name) // 'Foo'
+console.log(rest) // { age: '20' }
+```
+
+也可以删除动态属性：
+
+```js
+const property = 'name'
+const { [property]: value, ...rest } = { name: 'Foo', age: 20 }
+
+console.log(value) // 'Foo'
+console.log(rest) // { age: '20' }
+```
diff --git "a/JavaScript/encodeURI \344\270\216 encodeURIComponent \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/encodeURI \344\270\216 encodeURIComponent \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..f2b1349
--- /dev/null
+++ "b/JavaScript/encodeURI \344\270\216 encodeURIComponent \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,94 @@
+# encodeURI 与 encodeURIComponent 的区别
+
+由于 URL 只能由标准 ASCII 字符组成，因此必须对其他特殊字符进行编码。它们将被代表其 UTF-8 编码的不同字符序列替换。
+
+[`encodeURI`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) 和 [`encodeURIComponent`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) 用于此目的。
+
+## 区别
+
+`encodeURI` 用于对完整 URL 进行编码。
+
+```js
+encodeURI('https://example.com/path to a document.pdf')
+
+// 空格 -> %20
+// 'https://example.com/path%20to%20a%20document.pdf'
+```
+
+而 `encodeURIComponent` 用于编码 URI 部分，例如查询字符串。
+
+```js
+;`http://example.com/?search=${encodeURIComponent('encode & decode param')}`
+
+// & -> %26
+// 'http://example.com/?search=encode%20%26%20decode%20param'
+```
+
+有 11 个字符不是由 `encodeURI` 编码的，而是由 `encodeURIComponent` 编码的。
+
+以下方法打印这些字符：
+
+```js
+const arr = Array(256)
+  .fill(0)
+  .map((_, i) => String.fromCharCode(i))
+  .filter((c) => encodeURI(c) != encodeURIComponent(c))
+
+arr.forEach((c) => console.log(c, encodeURI(c), encodeURIComponent(c)))
+```
+
+以下是这些字符的列表：
+
+| 字符 | `encodeURI` | `encodeURIComponent` |
+| :--- | :---------- | :------------------- |
+| `#`  | `#`         | `%23`                |
+| `$`  | `$`         | `%24`                |
+| `&`  | `&`         | `%26`                |
+| `+`  | `+`         | `%2B`                |
+| `,`  | `,`         | `%2C`                |
+| `/`  | `/`         | `%2F`                |
+| `:`  | `:`         | `%3A`                |
+| `;`  | `;`         | `%3B`                |
+| `=`  | `=`         | `%3D`                |
+| `?`  | `?`         | `%3F`                |
+| `@`  | `@`         | `%40`                |
+
+另外，`decodeURI` 和 `decodeURIComponent` 是分别对 `encodeURI` 和 `encodeURIComponent` 编码的字符串进行解码的方法。
+
+`encodeURIComponent` 不编码 `-_.!~*'()`。如果要对这些字符进行编码，必须将其替换为相应的 UTF-8 字符序列：
+
+```js
+const encode = (str) =>
+  encodeURIComponent(str)
+    .replace(/\-/g, '%2D')
+    .replace(/\_/g, '%5F')
+    .replace(/\./g, '%2E')
+    .replace(/\!/g, '%21')
+    .replace(/\~/g, '%7E')
+    .replace(/\*/g, '%2A')
+    .replace(/\'/g, '%27')
+    .replace(/\(/g, '%28')
+    .replace(/\)/g, '%29')
+
+encode("What's result of (4 + 2)?") // "What%27s%20result%20of%20%284%20%2B%202%29%3F"
+```
+
+解码方法可能如下所示：
+
+```js
+const decode = (str) =>
+  decodeURIComponent(
+    str
+      .replace(/\%2D/g, '-')
+      .replace(/\%5F/g, '_')
+      .replace(/\%2E/g, '.')
+      .replace(/\%21/g, '!')
+      .replace(/\%7E/g, '~')
+      .replace(/\%2A/g, '*')
+      .replace(/\%27/g, "'")
+      .replace(/\%28/g, '(')
+      .replace(/\%29/g, ')')
+  )
+
+decode('What%27s%20result%20of%20%284%20%2B%202%29%3F') // "What's result of (4 + 2)?"
+```
diff --git "a/JavaScript/for...in \345\222\214 for...of \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/for...in \345\222\214 for...of \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..0301284
--- /dev/null
+++ "b/JavaScript/for...in \345\222\214 for...of \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,125 @@
+# for...in 和 for...of 的区别
+
+在对数组或对象进行遍历时，我们经常会使用到到 `for...in` 和 `for...of`，本文将来讲解以下这两者的区别。
+
+## 区别
+
+- 在 `for...in` 和 `for...of` 语句上迭代的值是不同的。
+
+`for...in` 迭代对象的可枚举属性键。而 `for...of` 迭代对象属性的值。
+
+```js
+const list = ['a', 'b', 'c']
+
+for (let i in list) {
+  console.log(i) // '0', '1', '2'
+}
+
+for (let i of list) {
+  console.log(i) // 'a', 'b', 'c'
+}
+```
+
+- `for...of` 不像 `for...in`，它不支持迭代普通对象。
+
+```js
+const person = {
+  firstName: 'Foo',
+  lastName: 'Bar',
+  age: 42
+}
+
+// TypeError: `person` is not iterable
+for (let k of person) {
+  // ...
+}
+```
+
+这是因为普通对象不可迭代。为了解决这个问题，我们可以使用 `Object.keys()` 方法来迭代对象属性：
+
+```js
+for (let k of Object.keys(person)) {
+  console.log(k, ':', person[k])
+}
+
+// firstName: Foo
+// lastName: Bar
+// age: 42
+```
+
+- `for...of` 支持迭代 Unicode 字符串。
+
+```js
+const msg = 'Hell😀 W😀rld'
+
+// for...in
+for (let i in msg) {
+  console.log(msg[i]) // 'H', 'e', 'l', 'l', '�', ' ', 'W', '�', '�', 'r', 'l', 'd'
+}
+
+// for...of
+for (let c of msg) {
+  console.log(c) // 'H', 'e', 'l', 'l', '😀', ' ', 'W', '😀', 'r', 'l', 'd'
+}
+```
+
+- `for...of` 循环可以通过 `await` 关键字在每次迭代中等待异步任务完成：
+
+```js
+for await (... of ...) {
+  // ...
+}
+```
+
+## 建议
+
+- 不建议向原始对象（如 `Array`、`Boolean`、`Number`、`String` 等）添加自定义方法，因为 `for...in` 声明遍历枚举的特性，它将包括添加到原型中的新方法。
+
+```js
+Array.prototype.isEmpty = function () {
+  return (this.length = 0)
+}
+
+const a = ['cat', 'dog', 'mouse']
+for (let i in a) {
+  console.log(i) // '0', '1', '2', 'isEmpty'
+}
+```
+
+- `for...in` 已被[弃用](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Statements)。相反，使用 `for...of`：
+
+```js
+const addressBook = new Map()
+addressBook.set('Foo', '111-222-333')
+addressBook.set('Bar', '444-555-666')
+
+for (const [name, phone] of addressBook) {
+  console.log(name, ':', phone)
+}
+
+// Foo: 111-222-333
+// Bar: 444-555-666
+```
+
+默认情况下，数组或对象的所有属性都将出现在 `for...in`。但是，这种行为是可以避免的。使用 `Object.defineProperty` 可以决定属性是否可枚举。
+
+```js
+let person = {
+  firstName: 'Foo',
+  lastName: 'Bar'
+}
+
+// age 属性不可枚举
+Object.defineProperty(person, 'age', {
+  value: 42,
+  enumerable: false
+})
+
+for (let i in person) {
+  console.log(i) // 'firstName', 'lastName'
+}
+```
+
+## 更多资料
+
+[What is the difference between ( for... in ) and ( for... of ) statements?](https://stackoverflow.com/questions/29285897/what-is-the-difference-between-for-in-and-for-of-statements)
diff --git "a/JavaScript/in \350\277\220\347\256\227\347\254\246\344\270\216 Object.hasOwnProperty \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/in \350\277\220\347\256\227\347\254\246\344\270\216 Object.hasOwnProperty \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..56fa800
--- /dev/null
+++ "b/JavaScript/in \350\277\220\347\256\227\347\254\246\344\270\216 Object.hasOwnProperty \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,64 @@
+# in 运算符与 Object.hasOwnProperty 的区别
+
+`in` 运算符和 `hasOwnProperty` 方法是检查对象是否包含特定键的常用方法。
+
+```js
+const person = {
+  name: 'foo'
+}
+
+console.log('name' in person) // true
+console.log(person.hasOwnProperty('name')) // true
+```
+
+## 区别
+
+对于继承的属性，`in` 将返回 `true`，它会去检查对象的原型链。顾名思义，`hasOwnProperty` 将检查属性是否为自身所有，并忽略继承的属性（忽略原型链）。
+
+让我们重用上一个示例中的 `person` 对象。由于它是一个具有内置属性的 JavaScript 对象，例如`constructor`，`__proto__`，因此以下检查返回 `true`：
+
+```js
+'constructor' in person // true
+'__proto__' in person // true
+'toString' in person // true
+```
+
+而 `hasOwnProperty` 在检查这些属性和方法时返回 `false`：
+
+```js
+person.hasOwnProperty('constructor') // false
+person.hasOwnProperty('__proto__') // false
+person.hasOwnProperty('toString') // false
+```
+
+对于类的 `get` 和 `set` 方法，`hasOwnProperty` 也返回 `false`。
+
+例如，我们有一个表示三角形的简单类：
+
+```js
+class Triangle {
+  get vertices() {
+    return 3
+  }
+}
+
+// 创建新实例
+const triangle = new Triangle()
+```
+
+尽管 `vertices` 是 `triangle` 的属性：
+
+```js
+triangle.vertices // 3
+'vertices' in triangle // true
+```
+
+`hasOwnProperty` 仍然忽略它：
+
+```js
+triangle.hasOwnProperty('vertices') // false
+```
+
+## 建议
+
+要检查属性是否存在，请使用 `hasOwnProperty`。使用 `in` 检查方法的存在。
diff --git "a/JavaScript/instanceof \344\270\216 typeof \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/instanceof \344\270\216 typeof \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..17e3bae
--- /dev/null
+++ "b/JavaScript/instanceof \344\270\216 typeof \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,96 @@
+# instanceof 与 typeof 的区别
+
+[`instanceof`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof) 和 [`typeof`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) 是检查值类型的两个运算符。
+
+## 区别
+
+`typeof` 运算符检查值是否具有原始类型的类型，原始类型可以是 `Boolean`、`Function`、`Object`、`Number`、`String`、`Undefined`、`Symbol`（ES6） 和 `bigint` 之一。
+
+```js
+typeof 'helloworld' // 'string'
+typeof new String('helloworld') // 'object'
+```
+
+`instanceof` 运算符检查值是否为类或构造函数的实例。
+
+```js
+'helloworld' instanceof String // false
+new String('helloworld') instanceof String // true
+```
+
+## 用法
+
+如果要检查值是原始字符串还是 `String` 对象，则需要同时使用两个运算符：
+
+```js
+const isString = (value) => typeof value === 'string' || value instanceof String
+
+isString('helloworld') // true
+isString(new String('helloworld')) // true
+```
+
+另一种方法是依赖 `Object` 的 `toString()`，如下所示：
+
+```js
+const isString = (value) =>
+  Object.prototype.toString.call(value) === '[object String]'
+
+isString('hello world') // true
+isString(new String('hello world')) // true
+isString(10) // false
+```
+
+> **注意**：除了 `null` 和 `undefined` 之外，其他的类型都有 `toString()` 方法，它返回相应值的字符串表现。
+
+我们可以使用类似的方法根据给定的原始或包装的原始类型检查值：
+
+```js
+const isBoolean = (value) =>
+  Object.prototype.toString.call(value) === '[object Boolean]'
+```
+
+使用构造函数创建原始类型的值时要小心。可以根据使用方式更改值的类型。在下面的代码段中，我们从字符串构造函数创建 `String` 开始：
+
+```js
+let message = new String('hello')
+message instanceof String // true
+typeof message // 'object'
+```
+
+我们将用另一个字符串附加 `string` 对象：
+
+```js
+message += ' world'
+```
+
+现在，让我们看看运算符的结果：
+
+```js
+message instanceof String // false
+typeof message // 'string'
+```
+
+这些类型修改称为装箱和拆箱。装箱是按对象包装原始值的过程。拆箱从对象中提取包装的原始值。
+
+将 `typeof` 与 `null` 一起使用时有一种特殊情况：
+
+```js
+typeof null // object, 而不是 null
+```
+
+`instanceof` 不适用于原始类型。
+
+如果希望始终使用 `instanceof`，则可以通过使用 [`Symbol.hasInstance`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance) 键实现静态方法来重写 `instanceof` 的行为。
+
+在以下代码中，我们创建了一个名为 `PrimitiveNumber` 的类，用于检查值是否为数字：
+
+```js
+class PrimitiveNumber {
+  static [Symbol.hasInstance](value) {
+    return typeof value === 'number'
+  }
+}
+
+12345 instanceof PrimitiveNumber // true
+'helloworld' instanceof PrimitiveNumber // false
+```
diff --git "a/JavaScript/null \344\270\216 undefined \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/null \344\270\216 undefined \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..c7ad495
--- /dev/null
+++ "b/JavaScript/null \344\270\216 undefined \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,67 @@
+# null 与 undefined 的区别
+
+`undefined` 表示一个变量已经声明，但没有被赋给任何值，包括 `null`。
+
+```js
+let foo
+console.log(foo) // undefined
+
+// 对象没有赋值的属性
+let obj = {}
+obj.name // undefined
+```
+
+调用函数时没有传递需要使用到的参数，没有明确的返回值，都为 `undefined`。
+
+```js
+function foo(a) {
+  console.log(a) // undefined
+}
+
+foo() // undefined
+```
+
+`null` 表示一个变量没有值。
+
+```js
+let foo = null
+console.log(foo) // null
+```
+
+如果您熟悉原型链，您可能知道原型链的最终值为 `null`：
+
+```js
+Object.getPrototypeOf(Object.prototype) // null
+```
+
+**`undefined` 和 `null` 被认为是不同的类型。**
+
+`undefined` 是类型本身，而 `null` 是一个对象的特殊值。
+
+```js
+console.log(typeof undefined) // 'undefined'
+console.log(typeof null) // 'object'
+```
+
+由于它们是不同的类型，下面是相等和严格相等运算符在相互比较时的结果：
+
+```js
+null == undefined // true
+null === undefined // false
+```
+
+您可能不知道的是，在使用 `JSON.stringify` 方法时，`JSON.stringify` 将自动省略值为 `undefined` 的数据，但保留了 `null`：
+
+```js
+JSON.stringify({
+  name: 'O.O',
+  address: null,
+  age: undefined
+})
+
+// '{"name":"O.O","address":null}'
+```
+
+## 更多资料
+
+[undefined 与 null 的区别](http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html)
diff --git "a/JavaScript/object.property \345\222\214 object['property'] \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/object.property \345\222\214 object['property'] \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..fafeaed
--- /dev/null
+++ "b/JavaScript/object.property \345\222\214 object['property'] \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,45 @@
+# object.property 和 object['property'] 的区别
+
+以下是使用引号和不使用引号声明和访问对象属性的方式：
+
+```js
+const obj = { key: 'value' }
+obj.key
+
+// Or
+const obj = { key: 'value' }
+obj['key']
+```
+
+## 区别
+
+如果属性名是数字文字，则可能需要使用不同的键来访问属性值。
+
+```js
+const obj = { 12e34: 'hello' }
+
+console.log(obj['1.2e34']) // undefined
+console.log(obj['1.2e+35']) // 'hello'
+```
+
+用引号括住属性将有助于我们避免问题：
+
+```js
+const obj = { '12e34': 'hello' }
+
+console.log(obj['12e34']) // 'hello'
+```
+
+如果属性是保留[关键字](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)之一，那么我们必须使用引号来访问属性值。
+
+```js
+const styles = { class: 'foo' }
+
+// 将引发异常，因为类是保留关键字
+styles[class]
+
+// 返回 'foo'
+styles['class']
+```
+
+对于包含特殊字符（如 `-`）的属性，也会发生同样的情况。
diff --git "a/JavaScript/slice \344\270\216 splice \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/slice \344\270\216 splice \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..41de657
--- /dev/null
+++ "b/JavaScript/slice \344\270\216 splice \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,57 @@
+# slice 与 splice 的区别
+
+`slice` 和 `splice` 是获取给定数组子数组的常用方法。
+
+## 区别
+
+语法：
+
+```js
+array.slice(startingIndex, endingIndex)
+array.splice(startingIndex, length, ...items)
+```
+
+虽然第一个参数彼此相同，表示删除元素的起始索引，但第二个参数不同。
+
+`slice` 和 `splice` 的第二个参数分别是结束索引和子项数。
+
+`splice` 更改原始数组，而 `slice` 不更改。
+
+给定从 1 到 5 的数字数组：
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const sub = arr.splice(2, 3)
+
+// 原始数组已修改
+arr // [1, 2]
+sub // [3, 4, 5]
+```
+
+现在，让我们将相同的参数传递给 `slice`：
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const sub = arr.slice(2, 3)
+
+// 原始数组未被修改
+arr // [1, 2, 3, 4, 5]
+sub // [3]
+```
+
+使用 `splice` 方法，可以通过将项目传递到最后一个参数来保持项目不从原始数组中移除。
+
+```js
+const arr = [1, 2, 3, 4, 5]
+const sub = arr.splice(2, 3, 3, 4, 5)
+
+arr // [1, 2, 3, 4, 5]
+```
+
+## 提示
+
+我们可以通过忽略结束索引来克隆数组（浅拷贝）：
+
+```js
+const clone = (arr) => arr.slice(0)
+```
diff --git "a/JavaScript/string charAt(i) \345\222\214 string[i] \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/string charAt(i) \345\222\214 string[i] \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..0f9225e
--- /dev/null
+++ "b/JavaScript/string charAt(i) \345\222\214 string[i] \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,52 @@
+# string charAt(i) 和 string[i] 的区别
+
+有两种方法可以访问字符串的单个字符：
+
+- 使用 `charAt[index]` 方法
+- 使用括号表示法，如 `'hello'[1]`
+
+在这两种情况下，`'hello'[1]` 和 `'hello'.charAt(1)` 都将返回第二个字符 `e`。
+
+## 区别
+
+- 第二种方式是 ECMA5 的标准，在现代浏览器中受支持。在非常旧的浏览器（如 IE6、7）中不支持它。（我不认为我们仍然需要支持这些版本的 IE）。
+
+- 以下表格列出了两种方法的预期结果：
+
+| 方法                   | 索引的范围为 `0` 和 `string.length - 1` | 其他情况下  |
+| ---------------------- | --------------------------------------- | ----------- |
+| `string.charAt(index)` | 第一个和最后一个                        | `''`        |
+| `string[index]`        | 第一个和最后一个                        | `undefined` |
+
+如果不传递适当的索引（不是整数或超出范围），在某些边缘情况下，我们将得到不同的结果。
+
+```js
+'hello'[NaN] // undefined
+'hello'.charAt(NaN) // 'h'
+
+'hello'[undefined] // undefined
+'hello'.charAt(undefined) // 'h'
+
+'hello'[true] // undefined
+'hello'.charAt(true) // 'e'
+
+'hello'['00'] // undefined
+
+// 返回 h，因为它将首先尝试将 00 转换为数字
+'hello'.charAt('00')
+
+'hello'[1.5] // undefined
+// 返回 e，因为它将 1.23 四舍五入到数字 1
+'hello'.charAt(1.23)
+```
+
+如果索引超出可选范围：
+
+```js
+'hello'[100] // undefined
+'hello'.charAt(100) // ''
+```
+
+## 为什么 `'hello'.charAt(true)` 返回 `e`？
+
+`charAt(index)` 方法首先尝试将索引转换为数字。由于 `Number(true) == 1`，`charAt(true)` 将返回一个索引位置的字符，即第二个字符。
diff --git "a/JavaScript/substr \345\222\214 substring \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/substr \345\222\214 substring \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..0241016
--- /dev/null
+++ "b/JavaScript/substr \345\222\214 substring \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,42 @@
+# substr 和 substring 的区别
+
+`substr` 和 `substring` 都是获取给定字符串的子字符串的常用方法。
+
+## 区别
+
+两种方法都有两个参数。第一个参数表示子字符串起始位置的索引。第二个参数是不同的。
+
+```js
+substr(startPosition, length)
+substring(startPosition, endPosition)
+```
+
+如您所见，`substr` 和 `substring` 的第二个参数分别是子字符串的长度和结束位置。给定一个 `hello world` 字符串：
+
+```js
+'hello world'.substr(2, 4) // 'llo '
+'hello world'.substring(2, 4) // 'll'
+```
+
+`substr` 允许使用负数作为起始位置参数。
+
+```js
+'hello world'.substr(-2, 4) // 'ld'
+```
+
+另一方面，子字符串将使负开始位置变为 0（零）：
+
+```js
+'hello world'.substring(-2, 5) // 'hello'
+'hello world'.substring(0, 5) // 'hello'
+```
+
+## slice
+
+`slice` 是获取子字符串的另一个方法。它没有被弃用为 [`substr`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr)，并且支持负索引。
+
+```js
+'hello world'.slice(2, 4) // 'll'
+'hello world'.slice(-10, 5) // 'ello'
+'hello world'.slice(-5) // 'world'
+```
diff --git "a/JavaScript/undefined \345\222\214 void \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/undefined \345\222\214 void \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..677a4b4
--- /dev/null
+++ "b/JavaScript/undefined \345\222\214 void \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,119 @@
+# undefined 和 void 的区别
+
+`void` 是一个运算符，它对给定表达式求值，然后返回 `undefined`。
+
+## 区别
+
+在支持 ES5 的现代浏览器中，直接使用 `void` 运算符和 `undefined` 的值没有区别：
+
+```js
+void 0 === undefined // true
+void 1 === undefined // true
+void 'Foo' === undefined // true
+```
+
+但是，在运行 ES3 引擎的旧浏览器中，`undefined` 是一个全局属性，可以更改。
+
+```js
+// 在 ES3 中
+console.log(undefined)
+var undefined = 'foo'
+console.log(undefined) // 'foo'
+```
+
+另一方面，`void` 运算符不能被重写。因此，`void` 被用作 `undefined` 值的替换，以安全的方式获取 `undefined` 值。
+
+你可以在一些 JS 项目中看到这种情况，它们更喜欢用 `void` 而不是 `undefined`，以避免意外创建名为 `undefined` 的变量。由于这个原因，甚至有一个 ESLint 规则不允许 `undefined`。
+
+但在 ES5 中，`undefined` 有了新的修订，它不能在被重写，因为它被 [`Writeable`](http://es5.github.io/#x15.1.1.3) 设置为 `false`。
+
+## 扩展
+
+- `void` 是一个运算符，而不是一个函数。因此，我们不需要将表达式括在括号中。`void 0` 相当于 `void(0)`。
+- 有些压缩器使用 `void 0` 来缩短 `undefined` 的长度。
+- 如果使用立即调用的函数表达式（称为 IIFE），则可以使用 `void` 将 `function` 关键字视为表达式，而不是声明。
+
+以下是一个 IIFE 函数：
+
+```js
+;(function run() {
+  console.log('Executed')
+})()
+```
+
+我们可以使用 `void` 运算符作为括号的替代。因为 `void` 是一个一元运算符，所以它告诉 JavaScript 将函数声明视为一个表达式。
+
+```js
+void (function run() {
+  console.log('Executed')
+})()
+```
+
+不同之处在于，正常的 IIFE 仍然可以返回一个值，而对 IIFE 使用 `void` 将始终求值为 `undefined`。
+
+- 当与箭头函数一起使用时，可以使用 `void` 来避免副作用。
+
+正如我们所知，ES6 箭头函数允许通过省略函数体中的大括号来使用函数的返回值。
+
+```js
+const sum = (a, b) => a + b
+```
+
+在某些情况下，我们不打算使用函数的返回值，因为它可能导致不同的行为。假设我们要处理一个按钮的点击事件：
+
+```js
+button.onclick = () => doSomething()
+```
+
+它照常工作，直到有人更改 `doSomething`，并使其返回 `boolean`。在返回 `false` 的情况下，将跳过 `click` 事件的默认行为，这可能是你不希望看到的。
+
+将结果传递给 `void` 将确保无论执行函数的结果如何，它都不会改变箭头函数的行为：
+
+```js
+button.onclick = () => void doSomething()
+```
+
+在 React、Svelte 等现代库中可以看到使用 `void` 和箭头函数的优势。
+
+这些库允许我们在将组件装入 DOM 之后立即执行函数。例如，React 提供 [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect)，Svelte 具有 [`onMount`](https://svelte.dev/docs#onMount)。
+
+如果我们在回调函数中返回一个函数，那么该函数将被调用以清理内容，在组件从屏幕上移除之前释放内存。
+
+```js
+// React 示例代码
+useEffect(() => doSomething())
+```
+
+它可以在运行时产生 bug。为了避免这种情况，我们可以使用 `void`：
+
+```js
+useEffect(() => void doSomething())
+```
+
+或使用大括号：
+
+```js
+useEffect(() => {
+  doSomething()
+})
+```
+
+## 建议
+
+在以 `javascript:` 为前缀的 URL 中使用了 `void` 运算符。
+
+默认情况下，浏览器将在遵循 `javascript:` URI 时计算代码，然后用返回值替换页面内容。
+
+为了防止出现默认行为，代码必须返回 `undefined`。这就是我们看到以下代码的原因：
+
+```html
+<a href="javascript: void(0);" onclick="doSomething"> ... </a>
+```
+
+现在，不推荐使用 `javascript:` 协议。由于用户可以将未初始化的输入放入事件处理程序中，因此可能会产生安全问题：
+
+```html
+<a href="javascript: alert('uninitialized input')">...</a>
+```
+
+从 v16.9.0 开始，React 还[反对使用 `javascript:` URL](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls)。
diff --git "a/JavaScript/variable === undefined \344\270\216 typeof variable === undefined \347\232\204\345\214\272\345\210\253.md" "b/JavaScript/variable === undefined \344\270\216 typeof variable === undefined \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..e1453a0
--- /dev/null
+++ "b/JavaScript/variable === undefined \344\270\216 typeof variable === undefined \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,50 @@
+# variable === undefined 与 typeof variable === undefined 的区别
+
+检查变量是否为 `undefined` 有两种常用方法。我们可以使用相等运算符（`==`）或 `typeof` 运算符：
+
+```js
+variable === undefined
+typeof variable === 'undefined'
+```
+
+## 区别
+
+`typeof` 运算符适用于未声明的变量，而相同的运算符将引发 `ReferenceError` 异常。
+
+```js
+typeof undeclaredVar === 'undefined' // true
+undeclaredVar === undefined // 引发 ReferenceError 异常
+```
+
+## 提示
+
+在运行 ES3 enginee 的旧浏览器中，`undefined` 是一个全局变量名，其原始值未定义。可以更改该值：
+
+```js
+// ES3
+var person = {}
+person.name === undefined // true
+
+// 让我们修改 undefined 的值
+undefined = 'Foo'
+person.name === undefined // false
+```
+
+为了避免未定义的可重命名或修改值的问题，我们可以将代码包装在 IFFE（立即调用的函数表达式）中，如下所示：
+
+```js
+;(function (undefined) {
+  // 在这里使用 undefined 是安全的
+})()
+
+// Or
+;(function (undefined) {
+  // ...
+})(_)
+```
+
+在上面的示例代码中，`undefined` 是函数的一个参数。由于我们不向函数传递任何参数或未定义的变量（`_`），因此该参数将是未定义的。这种常见模式用于流行的库，如 [jQuery](https://jquery.com/)、[Backbone](https://backbonejs.org/) 等。
+
+如今的现代浏览器并非如此。从 ES5 中，无法更改 `undefined`，因为其 `Writable` 属性设置为 `false`。
+
+> 建议始终使用 [`typeof` 运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)检查操作数的类型。
diff --git "a/JavaScript/\344\270\213\350\275\275\346\226\207\344\273\266.md" "b/JavaScript/\344\270\213\350\275\275\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..fe6369c
--- /dev/null
+++ "b/JavaScript/\344\270\213\350\275\275\346\226\207\344\273\266.md"
@@ -0,0 +1,70 @@
+# 下载文件
+
+## 使用 `download` 属性
+
+将 `download` 属性添加到链接上将强制浏览器下载文件，而不是导航到链接。**但需要注意，[IE 11 不支持 `download` 属性](https://caniuse.com/#feat=download)。**
+
+```html
+<a href="/path/to/file" download>下载文件</a>
+```
+
+> 推荐：[使用 HTML5 download 属性创建可下载的链接](https://github.com/lio-zero/blog/blob/master/HTML/%E4%BD%BF%E7%94%A8%20HTML5%20download%20%E5%B1%9E%E6%80%A7%E5%88%9B%E5%BB%BA%E5%8F%AF%E4%B8%8B%E8%BD%BD%E7%9A%84%E9%93%BE%E6%8E%A5.md)
+
+## 触发 `click` 事件
+
+这个想法来自于创建一个链接，并触发它的 `click` 事件。
+
+```js
+// 创建一个新链接
+const link = document.createElement('a')
+link.download = 'file name'
+link.href = '/path/to/file'
+
+// 添加到文档中
+document.body.appendChild(link)
+
+// 触发点击事件
+link.click()
+
+// 移除元素
+document.body.removeChild(link)
+```
+
+## 下载生成数据的文件
+
+下载带有动态数据的文件是很常见的。例如：
+
+- 一个 JSON
+- 一段文字
+- 一个图像
+
+我们可以将数据转换为 `blob`，然后触发上述提到的 `click` 事件。以下示例代码创建一个 JSON blob 并下载它：
+
+```js
+const data = JSON.stringify({ message: 'Hello world' })
+const blob = new Blob([data], { type: 'application/json' })
+
+// 创建新的 URL
+const url = URL.createObjectURL(blob)
+
+// 创建链接并触发下载
+// ...
+
+// 释放上面创建的 URL
+URL.revokeObjectURL(url)
+```
+
+> 推荐：[URL 对象](https://github.com/lio-zero/blog/blob/main/Web%20API/URL%20%E5%AF%B9%E8%B1%A1.md)
+
+## 下载库
+
+你也可以使用一些成熟的库来帮助你减少这些操作，库的内部也帮我们解决了一些常见的兼容性问题等。例如：
+
+- [js-file-download](https://github.com/kennethjiang/js-file-download)
+- [FileSaver.js](https://github.com/eligrey/FileSaver.js)
+
+使用起来很简单，源码也很少，感兴趣的可以自行查阅。
+
+## 更多资料
+
+[聊一聊 15.5K 的 FileSaver，是如何工作的？](https://juejin.cn/post/6901790184841412622)
diff --git "a/JavaScript/\344\270\272 contenteditable \345\205\203\347\264\240\346\267\273\345\212\240\345\215\240\344\275\215\347\254\246.md" "b/JavaScript/\344\270\272 contenteditable \345\205\203\347\264\240\346\267\273\345\212\240\345\215\240\344\275\215\347\254\246.md"
new file mode 100644
index 0000000..9a0ca01
--- /dev/null
+++ "b/JavaScript/\344\270\272 contenteditable \345\205\203\347\264\240\346\267\273\345\212\240\345\215\240\344\275\215\347\254\246.md"	
@@ -0,0 +1,59 @@
+# 为 contenteditable 元素添加占位符
+
+假设我们想要为具有给定 `contenteditable` 属性的元素设置一个占位符：
+
+```html
+<div contenteditable></div>
+```
+
+> **注意**：`contenteditable` 用于指定元素内容是否可编辑，它可以应用于任何 HTML 元素，可以像 `input` 或 `<textare>` 那样工作编辑它们。
+
+以下两种方法可以为 `contenteditable` 元素添加占位符。
+
+## 使用 `:empty` 选择器
+
+我们使用自定义属性 `data-placeholder` 来设置占位符：
+
+```html
+<div class="editable" contenteditable data-placeholder="Edit me"></div>
+```
+
+当元素值为空时，将显示该属性：
+
+```css
+.editable:empty:before {
+  content: attr(data-placeholder);
+}
+```
+
+## 处理事件
+
+首先，我们将 `id` 和 `data-placeholder` 属性添加到元素中，如下所示：
+
+```html
+<div id="editMe" data-placeholder="Edit me" contenteditable></div>
+```
+
+当用户聚焦该元素时，如果它与占位符相同，我们将重置其内容。此外，当元素失去焦点时，如果用户不输入任何内容，其内容将被设置回占位符。
+
+```js
+const ele = document.getElementById('editMe')
+
+// 获取占位符属性
+const placeholder = ele.getAttribute('data-placeholder')
+
+// 如果占位符为空，则将占位符设置为初始内容
+ele.innerHTML === '' && (ele.innerHTML = placeholder)
+
+ele.addEventListener('focus', function (e) {
+  const value = e.target.innerHTML
+  value === placeholder && (e.target.innerHTML = '')
+})
+
+ele.addEventListener('blur', function (e) {
+  const value = e.target.innerHTML
+  value === '' && (e.target.innerHTML = placeholder)
+})
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/vYJJbMp)
diff --git "a/JavaScript/\344\270\272\344\273\200\344\271\210\351\200\222\345\275\222\345\207\275\346\225\260\344\270\255\350\277\224\345\233\236\347\273\223\346\236\234\344\270\272 undefined\357\274\237.md" "b/JavaScript/\344\270\272\344\273\200\344\271\210\351\200\222\345\275\222\345\207\275\346\225\260\344\270\255\350\277\224\345\233\236\347\273\223\346\236\234\344\270\272 undefined\357\274\237.md"
new file mode 100644
index 0000000..ea2fb46
--- /dev/null
+++ "b/JavaScript/\344\270\272\344\273\200\344\271\210\351\200\222\345\275\222\345\207\275\346\225\260\344\270\255\350\277\224\345\233\236\347\273\223\346\236\234\344\270\272 undefined\357\274\237.md"	
@@ -0,0 +1,34 @@
+# 为什么递归函数中返回结果为 undefined？
+
+在掌握递归的诀窍时，一个常见的问题是不理解递归函数返回 `undefined` 的原因。
+
+通常，这是因为您没有 `return` 递归函数的下一次执行。
+
+我们来写一个递归阶乘函数。例如，5 的阶乘（写成 5!）等于 `5 * 4 * 3 * 2 * 1 = 120`。
+
+```js
+const factorial = (num, result = 1) => {
+  if (num === 1) return result
+  factorial(num - 1, num * result)
+}
+
+console.log(factorial(120)) // undefined
+```
+
+可以看到，我们想要的结果应该是 `120`，但返回了 `undefined`，为什么呢？其实很简单，我们没有将 `factorial` 函数 `return` 出去执行下一次的递归调用。
+
+```js
+const factorial = (num, result = 1) => {
+  if (num === 1) return result
+  return factorial(num - 1, num * result)
+}
+
+console.log(factorial(5)) // 120
+```
+
+就这样，不管函数怎么走，都要确保 `return` 出一些东西。不然它将默认返回 `undefined`。
+
+## 更多资料
+
+- [JavaScript 专题之递归](https://github.com/mqyqingfeng/Blog/issues/49)
+- [尾调用优化](http://www.ruanyifeng.com/blog/2015/04/tail-call.html)
diff --git "a/JavaScript/\344\270\272\347\275\221\347\253\231\345\210\233\345\273\272\351\230\205\350\257\273\346\273\232\345\212\250\350\277\233\345\272\246\346\235\241.md" "b/JavaScript/\344\270\272\347\275\221\347\253\231\345\210\233\345\273\272\351\230\205\350\257\273\346\273\232\345\212\250\350\277\233\345\272\246\346\235\241.md"
new file mode 100644
index 0000000..13b62a8
--- /dev/null
+++ "b/JavaScript/\344\270\272\347\275\221\347\253\231\345\210\233\345\273\272\351\230\205\350\257\273\346\273\232\345\212\250\350\277\233\345\272\246\346\235\241.md"
@@ -0,0 +1,72 @@
+# 为网站创建阅读滚动进度条
+
+为网站创建阅读滚动进度条是很常见的功能，本文提供将一个简单的示例作为参考。
+
+```js
+const post = document.querySelector('.post')
+const progress = document.querySelector('progress')
+let inViewport = false
+
+const observer = new IntersectionObserver(handler)
+
+// 开始监听
+observer.observe(post)
+
+function handler(entries) {
+  for (entry of entries) {
+    if (entry.isIntersecting) {
+      inViewport = true
+    } else {
+      inViewport = false
+    }
+  }
+}
+
+// 计算阅读进度
+function getScrollProgress(el) {
+  let coords = el.getBoundingClientRect()
+  let height = coords.height - document.documentElement.clientHeight
+  let progressPercentage = '0%'
+
+  if (inViewport && coords.top < 0) {
+    progressPercentage = (Math.abs(coords.top) / height) * 100 + '%'
+  }
+
+  return progressPercentage
+}
+
+// 注意该函数将被频繁调用，避免一些复杂的操作导致的性能问题
+function showReadingProgress() {
+  requestAnimationFrame(() => {
+    progress.style.width = getScrollProgress(post)
+  })
+}
+
+window.addEventListener('scroll', () => {
+  requestIdleCallback(showReadingProgress)
+})
+```
+
+我们使用 `IntersectionObserver` 和 `getBoundingClientRect` 来实现页面中一个元素的阅读进度条。
+
+- `IntersectionObserver` 监听该元素是否在视口中，并通过 `handler` 函数更新 `inViewport` 变量的值。
+- `getBoundingClientRect` 方法用来获取元素在页面中的位置信息。
+
+这两个 API 我们在很多文章中都有提到。
+
+在 `showReadingProgress` 函数中，计算该元素在视口中的滚动进度百分比，并通过调整 `progress` 元素的宽度来显示阅读进度。
+
+最后，使用 `addEventListener` 将 `showReadingProgress` 函数绑定到滚动事件上。
+
+[演示地址](https://codepen.io/lio-zero/pen/jOzmMep)
+
+## 更多资料
+
+CSS 大佬 [@chokcoco](https://github.com/chokcoco) 在[不可思议的纯 CSS 滚动进度条效果](https://github.com/chokcoco/iCSS/issues/43)介绍了如何[使用线性渐变实现滚动进度条](https://codepen.io/Chokcoco/pen/KbBXQM)。
+
+还有其他关于进度条的文章：
+
+- [现代 CSS 高阶技巧，完美的波浪进度条效果！](https://github.com/chokcoco/iCSS/issues/220)
+- [N 种仅仅使用 HTML/CSS 实现各类进度条的方式](https://github.com/chokcoco/iCSS/issues/146)
+
+感兴趣的可以了解一下。
diff --git "a/JavaScript/\344\272\213\344\273\266.md" "b/JavaScript/\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..5f20b0d
--- /dev/null
+++ "b/JavaScript/\344\272\213\344\273\266.md"
@@ -0,0 +1,344 @@
+# 事件
+
+浏览器中的 JavaScript 使用事件驱动的编程模型。
+
+一切都是从一个事件开始的。
+
+[事件](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events)可能是加载了 DOM、完成获取的异步请求、用户单击元素、滚动页面或用户在键盘上键入。
+
+有很多不同类型的事件，下文会将到部分常见的事件。
+
+## 事件处理程序
+
+你可以使用**事件处理程序**（Event Handler）来响应任何事件，它是在事件发生时调用的函数。
+
+你可以为同一事件注册多个处理程序，当该事件发生时，它们都将被调用。
+
+JavaScript 提供了三种注册事件处理程序的方法：
+
+- 内联事件处理程序
+- DOM 事件处理程序
+- `addEventListener()` 方法
+
+### 内联事件处理程序
+
+由于其限制，这种类型的事件处理程序现在很少使用，但这是 JavaScript 早期的唯一方式：
+
+```html
+<a href="https://github.com/lio-zero" onclick="foo()">链接</a>
+```
+
+### DOM 事件处理程序
+
+当一个对象最多有一个事件处理程序时，这种情况很常见，因为在这种情况下无法添加多个处理程序：
+
+```js
+window.onload = () => {
+  // window 已加载
+}
+```
+
+它在处理 XHR 请求时最常用：
+
+```js
+const xhr = new XMLHttpRequest()
+
+xhr.onreadystatechange = () => {
+  // do something
+}
+```
+
+你可以使用以下方式检查处理程序是否已分配给属性：
+
+```js
+if ('foo' in window) { }
+```
+
+### 使用 `addEventListener()`
+
+这是现代的方式。这个方法允许我们根据需要注册尽可能多的处理程序，它是最流行方法：
+
+```js
+window.addEventListener('load', () => {
+  // window 已加载
+})
+```
+
+请注意，IE8 及以下版本不支持此功能，而是使用 `attachEvent()` API。如果需要支持较旧的浏览器，请记住这一点。
+
+## 监听不同的元素
+
+你可以在 `window` 上监听以拦截**全局事件**，如键盘的使用情况，你可以监听特定元素以检查发生在它们上的事件，如鼠标单击按钮。
+
+这就是为什么 `addEventListener` 有时在 `window` 上调用，有时在 DOM 元素上调用。
+
+## 事件对象
+
+事件处理程序获取一个 `Event` 对象作为第一个参数：
+
+```js
+const link = document.getElementById('my-link')
+
+link.addEventListener('click', (event) => {
+  // 链接被已点击
+})
+```
+
+该对象包含许多有用的属性和方法，例如：
+
+- `target` 发起事件的 DOM 元素
+- `type` 事件类型
+- `stopPropagation()` 被调用以停止在 DOM 中传播事件
+
+> [完整列表](https://developer.mozilla.org/en-US/docs/Web/API/Event)
+
+其他属性由特定类型的事件提供，因为 `Event` 是不同特定事件的接口：
+
+- [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+- [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
+- [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent)
+- [FetchEvent](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent)
+- etc
+
+你可以在 MDN 上查看它们，检查它们的所有属性。
+
+例如，当发生键盘事件时，你可以通过检查 `key` 属性以可读格式（`Escape`、`Enter` 等）检查按下了哪个键：
+
+```js
+window.addEventListener('keydown', event => {
+  // 按键已按下
+  console.log(event.key)
+}
+```
+
+在鼠标事件中，我们可以检查按下了哪个鼠标按钮：
+
+```js
+const link = document.getElementById('my-link')
+
+link.addEventListener('mousedown', (event) => {
+  console.log(event.button) // 0 = left, 2 = right
+})
+```
+
+## 事件冒泡和事件捕获
+
+冒泡和捕获是事件用来传播的两种模型。
+
+假设你的 DOM 结构是：
+
+```html
+<div id="container">
+  <button>点我！</button>
+</div>
+```
+
+你希望跟踪用户何时单击按钮，你有两个事件监听器，一个在 `button` 上，另一个在 `#container` 上。请记住，单击子元素将始终传播到其父元素，除非你停止传播。
+
+这些事件监听器将按顺序调用，并且该顺序由所使用的事件冒泡/捕获模型确定。
+
+冒泡意味着事件从被单击的项（子项）传播到其所有父树，从最近的父树开始。
+
+在我们的示例中，`button` 上的处理程序将在 `#container` 处理程序之前触发。
+
+捕获是相反的：外部事件处理程序在更具体的处理程序之前触发，即 `button` 上的处理程序。
+
+默认情况下所有事件都是冒泡的。
+
+通过将 `addEventListener` 的第三个参数设置为 `true`，可以选择采用事件捕获：
+
+```js
+document.getElementById('container').addEventListener(
+  'click',
+  () => {
+    // do something
+  },
+  true
+)
+```
+
+请注意，首先运行所有捕获事件处理程序。
+
+然后是所有冒泡事件处理程序。
+
+顺序遵循这一原则：DOM 从 `window` 对象开始遍历所有元素，然后查找被点击的项。在执行此操作时，它会调用与事件相关联的任何事件处理程序（捕获阶段）。
+
+一旦到达目标，它就会重复到父树的过程，直到 `window` 对象，再次调用事件处理程序（冒泡阶段）。
+
+> 推荐：[JavaScript 事件传播机制](https://github.com/lio-zero/blog/blob/main/DOM/JavaScript%20%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD%E6%9C%BA%E5%88%B6.md)。
+
+## 常用事件
+
+以下是你可能会处理的最常见事件列表。
+
+### load
+
+当页面完成加载时，会在 `window` 和 `body` 元素上触发 `load` 事件。
+
+### resize
+
+当调整浏览器窗口时，将触发 `resize` 事件。
+
+### 鼠标事件
+
+与鼠标交互的事件：
+
+- `mousedown` 鼠标按钮被按下
+- `mouseup` 鼠标按钮被释放
+- `click` 点击事件
+- `dblclick` 双击事件
+- `mousemove` 当鼠标移到元素上时
+- `mouseover` 当鼠标移动到一个元素或其子元素上时
+- `mouseenter` 当鼠标移动到一个元素上时。类似于 `mouseover` 但不冒泡
+- `mouseout` 当鼠标移出元素时，以及当鼠标进入子元素时
+- `mouseleave` 当鼠标移出元素时。类似于 `mouseout` 但不冒泡
+- `contextmenu` 打开上下文菜单时，例如单击鼠标右键
+
+**需要考虑一个事件重叠的问题**。
+
+当你跟踪一个 `click` 事件时，就像跟踪一个 `mousedown` 随后跟踪 `mouseup` 事件一样。在 `dblclick` 的情况下 ，`click` 也会触发两次。
+
+`mousedown`、`mousemove` 和 `mouseup` 可以组合使用来跟踪拖放事件。
+
+要小心 `mousemove`，因为它在鼠标移动过程中会触发很多次。我们需要应用节流，这是我们在分析滚动时将要讨论的内容。
+
+在事件处理程序中，我们可以访问许多属性。
+
+例如，在鼠标事件中，我们可以通过检查事件对象的 `button` 属性来检查按下了哪个鼠标按钮：
+
+```js
+const link = document.getElementById('my-link')
+
+link.addEventListener('mousedown', (event) => {
+  // 按下鼠标按钮
+  console.log(event.button) // 0 = left, 2 = right
+})
+```
+
+以下是我们可以使用的所有属性：
+
+- `altKey` 如果在触发事件时按下了 `alt` 键，则为 `true`
+- `button`（如果有）鼠标事件触发时按下的按钮数（0 = 左键，1 = 滚轮，2 = 右键）。处理由单击按钮（例如 `click`）引起的事件
+- `buttons` （如果有）表示在任何鼠标事件中按下的按钮的数字
+- `clientX/clientY` 鼠标指针相对于浏览器窗口的 x 和 y 坐标，与滚动无关
+- `ctrlKey` 如果在触发事件时按下 `ctrl` 键，则为 `true`
+- `metaKey` 如果在触发事件时按下了元键，则为 `true`
+- `movementX/movementY` 鼠标指针相对于上一次 `mousemove` 事件位置的 x 和 y 坐标。用于在移动鼠标时跟踪鼠标速度
+- `region` 在 Canvas API 中使用
+- `relatedTarget` 事件的次要目标，例如移动时
+- `screenX/screenY` 鼠标指针在屏幕坐标中的 x 和 y 坐标
+- `shiftKey` 如果在触发事件时按下了 `shift` 键，则为 `true`
+
+### 键盘事件
+
+与键盘事件交互时有 3 种类型的事件：
+
+- `keydown` 键盘按键被按下时触发
+- `keyup` 键盘按键释放时触发
+- `keypress` 按键被按下时触发，并产生一个字符串值
+
+当按键重复而按钮保持按下时，也会触发 `keydown` 和 `keypress`。
+
+> **Tips**：MDN 解释 `keypress` 事件因高度依赖硬件且已被弃用，建议不要在浏览器中使用它。
+
+虽然鼠标和触摸事件通常在特定元素上监听，但在文档上监听键盘事件是很常见的：
+
+```js
+document.addEventListener('keydown', (event) => {
+  // 按键已按下
+})
+```
+
+传递给事件监听器的参数是一个 `KeyboardEvent`。
+
+除了事件对象属性之外，此事件对象还为我们提供了以下独特的属性：
+
+- `altKey` 如果在触发事件时按下了 `alt` 键，则为 `true`
+- `code` 按下键的键码，以字符串形式返回
+- `ctrlKey` 如果在触发事件时按下 `ctrl` 键，则为 `true`
+- `key` 按下键的值，以字符串形式返回
+- `locale` 键盘区域设置值
+- `location` 键盘上键的位置
+- `metaKey` 如果在触发事件时按下了元键，则为 `true`
+- `repeat` 如果键已重复（例如，按键尚未释放），则为 `true`
+- `shiftKey` 如果在触发事件时按下了 `shift` 键，则为 `true`
+
+> **推荐**：[key、keyCode 和 which](https://github.com/lio-zero/blog/blob/main/DOM/key%E3%80%81keyCode%20%E5%92%8C%20which.md) 和 [keydown、keypress 和 keyup](https://github.com/lio-zero/blog/blob/main/DOM/keydown%E3%80%81keypress%20%E5%92%8C%20keyup.md)。
+
+### 触摸事件
+
+触摸事件是指在移动设备（如智能手机或平板电脑）上查看页面时触发的事件。
+
+它允许你跟踪多点触摸事件。
+
+有 4 个触摸事件：
+
+- `touchstart` 一个触摸事件已经开始（表面被触摸）
+- `touchend` 触摸事件已结束（不再触摸表面）
+- `touchmove` 手指（或任何接触设备的东西）在表面上移动
+- `touchcancel` 触摸事件已被取消
+
+每次发生触摸事件时，我们都会收到一个关于触摸的事件对象：
+
+```js
+const link = document.getElementById('my-link')
+
+link.addEventListener('touchstart', (event) => {
+  // 触摸事件已启动
+})
+```
+
+以下是我们可以访问该事件对象的所有属性：
+
+- `identifier` 此特定事件的唯一标识符。用于跟踪多点触摸事件。相同的手指 = 相同的标识符。
+- `clientX/clientY` 鼠标指针相对于浏览器窗口的 x 和 y 坐标，与滚动无关
+- `screenX/screenY` 鼠标指针在屏幕坐标中的 x 和 y 坐标
+- `pageX/pageY` 鼠标指针在页面坐标中的 x 和 y 坐标（包括滚动）
+- `target` 被接触的元素
+
+### 滚动事件
+
+每次滚动页面时都会触发该 `scroll` 事件。`window` 在事件处理程序中，你可以通过检查来检查当前滚动位置 `window.scrollY`。
+
+请记住，此事件不是一次性的。它会在滚动期间触发很多次，而不仅仅是在滚动结束或开始时，所以不要在处理程序中进行任何繁重的计算或操作，改用节流。
+
+## 节流
+
+如上所述，一些事件例如 `resize`、`mousemove` 和 `scroll`，不是每个事件触发一次，而是在整个操作期间连续调用其事件处理程序函数。
+
+这是因为它们提供了坐标，所以你可以跟踪正在发生的事情。
+
+如果你在事件处理程序中执行复杂的操作，则会影响性能并导致网站用户体验迟钝。
+
+像 [Lodash](https://lodash.com/docs/4.17.10#throttle) 这样提供节流的库在 100 多行代码中实现它，以处理每个可能的用例。一个简单易懂的实现是这样的，它使用 `setTimeout` 每 100ms 缓存一次滚动事件：
+
+```js
+let cached = null
+window.addEventListener('scroll', (event) => {
+  if (!cached) {
+    setTimeout(() => {
+      // 你可以在 cached 处访问原始事件
+      cached = null
+    }, 100)
+  }
+  cached = event
+})
+```
+
+> 推荐：[节流和防抖](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E8%8A%82%E6%B5%81%E5%92%8C%E9%98%B2%E6%8A%96.md)
+
+## 最后
+
+以上不是事件的全部，只单独列取了部分常用事件来讲解，详细内容请查阅 MDN。
+
+## 更多资料
+
+- [事件参考](https://developer.mozilla.org/zh-CN/docs/Web/Events)提供了完整的事件列表。
+- 现代 JavaScript 教程的[浏览器：文档，事件，接口](https://zh.javascript.info/)部分也讲解了很多关于事件的内容。
+- [JavaScript 事件传播机制](https://github.com/lio-zero/blog/blob/main/DOM/JavaScript%20%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD%E6%9C%BA%E5%88%B6.md)
+- [阻止事件的默认操作](https://github.com/lio-zero/blog/blob/main/DOM/%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E6%93%8D%E4%BD%9C.md)
+- [触发事件](https://github.com/lio-zero/blog/blob/main/DOM/%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6.md)
+- [事件对象上的 currentTarget 与 target 属性](https://github.com/lio-zero/blog/blob/main/DOM/%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E4%B8%8A%E7%9A%84%20currentTarget%20%E4%B8%8E%20target%20%E5%B1%9E%E6%80%A7.md)
+- [创建一次性事件处理程序](https://github.com/lio-zero/blog/blob/main/DOM/%E5%88%9B%E5%BB%BA%E4%B8%80%E6%AC%A1%E6%80%A7%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F.md)
+- [区分鼠标左键和右键单击](https://github.com/lio-zero/blog/blob/main/DOM/%E5%8C%BA%E5%88%86%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E5%92%8C%E5%8F%B3%E9%94%AE%E5%8D%95%E5%87%BB.md)
+- [检查是否支持触摸事件](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%A3%80%E6%9F%A5%E6%98%AF%E5%90%A6%E6%94%AF%E6%8C%81%E8%A7%A6%E6%91%B8%E4%BA%8B%E4%BB%B6.md)
diff --git "a/JavaScript/\344\273\216\345\211\252\350\264\264\346\235\277\347\262\230\350\264\264\345\233\276\345\203\217.md" "b/JavaScript/\344\273\216\345\211\252\350\264\264\346\235\277\347\262\230\350\264\264\345\233\276\345\203\217.md"
new file mode 100644
index 0000000..86319df
--- /dev/null
+++ "b/JavaScript/\344\273\216\345\211\252\350\264\264\346\235\277\347\262\230\350\264\264\345\233\276\345\203\217.md"
@@ -0,0 +1,61 @@
+# 从剪贴板粘贴图像
+
+通过 `paste` 事件，获取剪贴板的图像数据：
+
+```js
+// 处理 paste 事件
+document.addEventListener('paste', (e) => {
+  // 获取剪贴板的数据
+  const clipboardItems = e.clipboardData.items
+  const items = [].slice
+    .call(clipboardItems)
+    .filter((item) => item.type.indexOf('image') !== -1) // 仅过滤图像项
+
+  if (!items.length) return
+
+  const item = items[0]
+  // 获取 blob 图像
+  const blob = item.getAsFile()
+})
+```
+
+从图像块中，我们可以预览它。
+
+这里我们有一个用于预览的 `img` 元素。
+
+```html
+<img id="preview" />
+```
+
+获取引用，并设置源：
+
+```js
+const imageEle = document.getElementById('preview')
+imageEle.src = URL.createObjectURL(blob)
+```
+
+或者通过 AJAX 请求将其上传到服务器：
+
+```js
+// 创建一个新的 FormData
+const formData = new FormData()
+formData.append('image', blob, 'filename')
+
+// 创建新的 AJAX 请求
+const req = new XMLHttpRequest()
+req.open('POST', '/path/to/back-end', true)
+
+// 处理事件
+req.onload = function () {
+  if (req.status >= 200 && req.status < 400) {
+    const res = req.responseText
+    // 对响应做点什么
+    // ...
+  }
+}
+
+// 发送它
+req.send(formData)
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/rNwXeBd)
diff --git "a/JavaScript/\344\273\216\346\225\260\347\273\204\344\270\255\345\210\240\351\231\244\351\207\215\345\244\215\347\232\204\345\257\271\350\261\241.md" "b/JavaScript/\344\273\216\346\225\260\347\273\204\344\270\255\345\210\240\351\231\244\351\207\215\345\244\215\347\232\204\345\257\271\350\261\241.md"
new file mode 100644
index 0000000..e2b8b3a
--- /dev/null
+++ "b/JavaScript/\344\273\216\346\225\260\347\273\204\344\270\255\345\210\240\351\231\244\351\207\215\345\244\215\347\232\204\345\257\271\350\261\241.md"
@@ -0,0 +1,131 @@
+# 从数组中删除重复的对象
+
+假设我们有一系列对象，例如：
+
+```js
+const user = [
+  {
+    name: 'Lay',
+    age: 19
+  },
+  {
+    name: 'IU',
+    age: 18
+  },
+  {
+    name: 'D.O',
+    age: 17
+  },
+  {
+    name: 'Lay',
+    age: 19
+  },
+  {
+    name: 'D.O',
+    age: 17
+  },
+  {
+    name: 'D.O',
+    age: 17
+  }
+]
+```
+
+我们想要从数组中删除这些重复的对象，我们该如何解决？
+
+为了理解原因，让我们先来看看如何从平面项数组（有原始类型组成的数组，如字符串）中删除重复项。
+
+## 从数组中删除重复的平面项
+
+假设我们有一个字符串数组，如下所示：
+
+```js
+const str = ['JavaScript', 'CSS', 'JavaScript']
+```
+
+如果我们想从这个数组中删除任何重复项，我们可以使用 `Array.prototype.filter()` 和 `String.prototype.indexOf()` 方法来检查任何给定项是否是重复项。
+
+```js
+// 如果当前项的索引与该项第一次出现的索引相同，则返回到新数组
+const filteredStr = str.filter((item, index) => str.indexOf(item) === index)
+
+filteredStr // ['JavaScript', 'CSS']
+```
+
+> 推荐：[JavaScript 数组去重](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D.md)
+
+## 对象的工作方式不同
+
+这种方法不适用于对象的原因是，任何两个具有相同属性和值的对象实际上并不被认为是相同的。
+
+```js
+const user1 = {
+  name: 'Lay',
+  age: 19
+}
+
+const user2 = {
+  name: 'Lay',
+  age: 19
+}
+
+user1 === user2 // false
+```
+
+两个对象都具有相同的 `name` 和 `age` 属性，但进行比较时确为 `false`，这是因为对象是基于引用而不是结构进行比较的。在比较这两个对象时，不考虑这两个对象具有相同的属性和值。因此，在一个对象数组中，即使存在另一个具有完全相同的属性和值的对象，也总是返回所传递对象的索引。
+
+## 解决方案
+
+检查两个对象是否具有相同的属性和值的唯一方法是实际检查每个对象的属性和值。
+
+以下该解决方案涉及到执行这个手动检查，但是有一些增强来提高性能和减少不必要的嵌套循环。
+
+- 仅检查数组中的每一项与其后的每一项，以避免多次比较同一对象
+- 仅检查未发现与任何其他项重复的项
+- 在检查每个属性的值是否相同之前，请检查两个对象是否具有相同的键
+
+```js
+function removeDuplicates (arr) {
+  const result = []
+  const duplicatesIndices = []
+
+  // 循环遍历原始数组中的每个项
+  arr.forEach((current, index) => {
+    if (duplicatesIndices.includes(index)) return
+
+    result.push(current)
+
+    // 循环遍历数组中当前项之后的其他项
+    for (
+      let comparisonIndex = index + 1
+      comparisonIndex < arr.length
+      comparisonIndex++
+    ) {
+      const comparison = arr[comparisonIndex]
+      const currentKeys = Object.keys(current)
+      const comparisonKeys = Object.keys(comparison)
+
+      // 检查对象中的键数
+      if (currentKeys.length !== comparisonKeys.length) continue
+
+      // 检查关键字名称
+      const currentKeysString = currentKeys.sort().join('').toLowerCase()
+      const comparisonKeysString = comparisonKeys.sort().join('').toLowerCase()
+      if (currentKeysString !== comparisonKeysString) continue
+
+      // 检查值
+      let valuesEqual = true
+      for (let i = 0; i < currentKeys.length; i++) {
+        const key = currentKeys[i]
+        if (current[key] !== comparison[key]) {
+          valuesEqual = false
+          break
+        }
+      }
+      if (valuesEqual) duplicatesIndices.push(comparisonIndex)
+    }
+  })
+
+  return result
+}
+```
diff --git "a/JavaScript/\344\275\277\347\224\250 CSS Transition \351\200\232\350\277\207\346\224\271\345\217\230 Height \346\235\245\345\261\225\345\274\200\346\224\266\350\265\267\345\205\203\347\264\240.md" "b/JavaScript/\344\275\277\347\224\250 CSS Transition \351\200\232\350\277\207\346\224\271\345\217\230 Height \346\235\245\345\261\225\345\274\200\346\224\266\350\265\267\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..37e013f
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 CSS Transition \351\200\232\350\277\207\346\224\271\345\217\230 Height \346\235\245\345\261\225\345\274\200\346\224\266\350\265\267\345\205\203\347\264\240.md"	
@@ -0,0 +1,151 @@
+# 使用 CSS Transition 通过改变 Height 来展开收起元素
+
+一个常见的开发需要，我们希望折叠元素的一部分，直到需要它为止。一些常见的框架（如 `Bootstrap` 和 `jQuery`）提供了转换效果。然而，CSS `Transition` 在转换高度方面给予了我们很大的灵活性。因此，您不必在项目中加入其他框架。
+
+下面我们看看，如何使用 CSS `Transition` 设置 `height` 属性的动画效果以及其存在的问题、解决方案。
+
+你可以在 👉[查看效果](https://codepen.io/lio-zero/pen/JjWLzqP)
+
+## 过渡高度
+
+我们要实现的操作是，当点击**查看更多**按钮将增加元素的高度，以显示文章的所有内容，再次点击时，它将收回到原本的样子。
+
+我们将为此创建一个 CSS 类。单击**查看更多**按钮时，将使用 JavaScript 将此类添加到 `<article>` 元素上。
+
+首先，我们将向 HTML 文件添加一个 `<article>` 元素，并为其添加一些内容。
+
+```html
+<article id="article">
+  <h3>使用 CSS Transition 通过改变 Height 来展开收起元素</h3>
+  <p>
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis
+    tempora iure accusamus rerum. Fuga porro unde, laboriosam soluta accusantium
+    numquam quos adipisci commodi velit, expedita officia cum excepturi
+    molestias.
+  </p>
+
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio,
+    eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi
+    ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A
+    obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit
+    cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio
+    aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit
+    deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam
+    repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas
+    perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non
+    eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut
+    voluptates reiciendis iusto.
+  </p>
+
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio,
+    eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi
+    ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A
+    obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit
+    cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio
+    aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit
+    deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam
+    repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas
+    perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non
+    eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut
+    voluptates reiciendis iusto.
+  </p>
+
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio,
+    eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi
+    ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A
+    obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit
+    cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio
+    aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit
+    deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam
+    repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas
+    perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non
+    eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut
+    voluptates reiciendis iusto.
+  </p>
+</article>
+<button id="seeMoreBtn">查看更多</button>
+```
+
+CSS 样式如下：
+
+```css
+article {
+  max-width: 800px;
+  height: 300px;
+  overflow-y: hidden;
+}
+
+/* 单击按钮时添加此类 */
+article.extended {
+  height: 628px;
+}
+
+button {
+  padding: 0.6rem;
+}
+```
+
+JavaScript 如下：
+
+```js
+const seeMore = document.getElementById('seeMoreBtn')
+const article = document.getElementById('article')
+
+seeMore.addEventListener('click', () => {
+  article.classList.toggle('extended')
+
+  const extended = article.classList.contains('extended')
+  if (extended) {
+    seeMore.innerHTML = '收起内容'
+  } else {
+    seeMore.innerHTML = '查看更多'
+  }
+})
+```
+
+向 `article` 添加 CSS `transition` 过渡属性，使其点击按钮时内容可以丝滑的上下滑动。
+
+```css
+article {
+  max-width: 800px;
+  height: 300px;
+  overflow-y: hidden;
+  transition: height 0.4s linear;
+}
+```
+
+现在将它应用到你的文章，你可以看到它可以上下丝滑的滑动着，很简单、方便，但此方法存在的限制。下面我们来看看。
+
+## 限制
+
+这个限制体现在是否知其高度，以上的例子我们清楚的知道文章的高度，它工作的效果非常好，但当我们在处理动态内容时，我们不知道元素的高度，其高度也可能随着屏幕大小或其他方式进行变化。
+
+其实解决方式也很简单，对于动态内容，元素的高度应设置为 `auto`。这样，任何增加或减少的元素高度都将自适应。但也会出现另一个问题：**当元素的高度设置为 `auto` 时，CSS `transition` 将不起作用**。
+
+好消息是，有一种方法可以解决此问题，而不必求助于更多的 JavaScript。
+
+## 解决方案
+
+解决方法是转换 `max-height` 属性而不是 `height` 属性。首先，我们必须估计我们的元素能达到的最大高度。然后，当元素展开时，我们将该元素设置为 `max-height` 大于我们的估计值。
+
+我们将 `height` 属性改为 `max-height`：
+
+```css
+article {
+  max-width: 800px;
+  max-height: 300px;
+  overflow-y: hidden;
+
+  /* 增加过渡时间以适应高度 */
+  transition: max-height 0.7s linear;
+}
+
+article.expanded {
+  max-height: 1500px;
+}
+```
+
+这样动画的工作原理，我们仍然得到我们想要的效果。过渡时间可能需要根据您需要的效果进行调整。
diff --git "a/JavaScript/\344\275\277\347\224\250 JS \350\277\233\350\241\214 API \350\272\253\344\273\275\351\252\214\350\257\201.md" "b/JavaScript/\344\275\277\347\224\250 JS \350\277\233\350\241\214 API \350\272\253\344\273\275\351\252\214\350\257\201.md"
new file mode 100644
index 0000000..95de904
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 JS \350\277\233\350\241\214 API \350\272\253\344\273\275\351\252\214\350\257\201.md"	
@@ -0,0 +1,90 @@
+# 使用 JS 进行 API 身份验证
+
+有一些接口不需要进行验证就可以使用，而有一些接口要求您在进行 API 调用之前验证你的身份。
+
+## 如何验证 API
+
+要对您进行身份验证，API 可能需要：
+
+- 用户名和密码
+- key 和 secret
+- API key 或 OAuth token（令牌）
+
+这些可以通过多种方式传递给 API。
+
+## 作为查询字符串参数的凭据
+
+一些 API 接受 API key 或其他凭据作为接口 URL 上的查询字符串参数。
+
+例如：
+
+```js
+// 不要像这样在 JS 文件中存储凭据（这里只为了演示，开发时不会这么做）
+let apiKey = '123456'
+
+// 进行 API 调用
+fetch(`https://example.com/v2/special?api-key=${apiKey}`)
+  .then((response) => {
+    if (response.ok) return response.json()
+    throw response
+  })
+  .then((data) => render(data))
+  .catch((error) => console.log(error))
+```
+
+再次提醒，您不应该像这样将 API 凭据存储在 JS 文件中。
+
+## 带有基本身份验证的凭据
+
+一些 API 使用简单的**用户名/密码**组合进行身份验证，使用一种称为**基本身份验证（basic auth）**的方法。
+
+使用基本身份验证，可以在 `headers` 键上包含 `Authorization` 属性。对于它的值，可以使用以下 `Basic USERNAME:PASSWORD` 模式。
+
+用户名和密码都需要进行 base64 编码，这可以通过 `window.btoa()` 方法实现。
+
+```js
+// 不要像这样在 JS 文件中存储凭据
+let username = 'O.O'
+let password = '123456'
+
+// 身份验证（虚拟 API）
+fetch('https://example.com/authenticate', {
+  headers: {
+    Authorization: `Basic ${btoa(username)}:${btoa(password)}`
+  }
+})
+  .then((response) => {
+    if (response.ok) return response.json()
+    throw response
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.warn(error))
+```
+
+使用基本身份验证，您通常会对特定的授权接口进行 API 调用。返回的 `data` 通常包括一个令牌，该令牌将在一段时间后失效，您将使用该令牌对其他接口进行任何调用。
+
+同样，不应该在 JS 文件中包含用户名和密码。这些通常在某种类型的登录表单中被请求，然后传递给 API 而不被存储。
+
+## 带有身份验证令牌的凭据
+
+API 令牌被设计为短期凭证，您可以在通过其他方式（通常使用 key 和 secret 或用户名和密码）对自己进行身份验证后，使用它来验证 API 调用。
+
+它可以持续几分钟、长达数月或者在某些情况下，无限期。
+
+使用基于令牌的身份验证，您可以在 `headers` 键上再次包含 `Authorization` 属性。对于它的值，您可以使用 `Bearer TOKEN` 模式。它不需要进行编码。
+
+```js
+fetch('https://example.com/token', {
+  headers: {
+    Authorization: `Bearer ${token}`
+  }
+})
+  .then((response) => {
+    if (response.ok) return response.json()
+    throw response
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.warn(error))
+```
+
+关于具体的身份验证流程和它们的安全性防范，可以查看我写的另一篇文章。
diff --git "a/JavaScript/\344\275\277\347\224\250 JavaScript \344\270\212\344\274\240\345\222\214\345\244\204\347\220\206\344\270\215\345\220\214\347\232\204\346\226\207\344\273\266.md" "b/JavaScript/\344\275\277\347\224\250 JavaScript \344\270\212\344\274\240\345\222\214\345\244\204\347\220\206\344\270\215\345\220\214\347\232\204\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..61f023a
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 JavaScript \344\270\212\344\274\240\345\222\214\345\244\204\347\220\206\344\270\215\345\220\214\347\232\204\346\226\207\344\273\266.md"	
@@ -0,0 +1,204 @@
+# 使用 JavaScript 上传和处理不同的文件
+
+在本文中，我们将研究带有 `#upload` ID 的 `form` 元素。
+
+## JSON 文件
+
+它包含一个字段 `#file`，带有一种 `type` 类型。使用 `file` 类型的字段可以指定 `accept` 参数，并使用逗号分隔的接受文件类型列表。出于我们的目的，我们将把上传限制为 `.json` 文件。
+
+```html
+<form id="upload">
+  <label for="file">文件上传</label>
+  <input type="file" id="file" accept=".json" />
+  <button>上传</button>
+</form>
+```
+
+我将使用一个简单的 `userInfo.json` 文件进行测试。
+
+```json
+{
+  "name": "O.O",
+  "age": "18",
+  "hobby": ["Eat", "sleep", "programming"]
+}
+```
+
+### 监听上传
+
+首先，我们将使用一些 DOM 操作基础知识来检测用户何时提交文件。
+
+我们将使用 `document.querySelector()` 方法获取`#upload` 和 `#file` 元素，并将它们分别保存到 `form` 和 `file` 变量中。
+
+```js
+let form = document.querySelector('#upload')
+let file = document.querySelector('#file')
+```
+
+然后，我们将使用 `Element.addEventListener()` 方法来监听 `form` 元素上的 `submit` 事件。我们将使用 `handleSubmit()` 函数作为回调函数。
+
+```js
+form.addEventListener('submit', handleSubmit)
+```
+
+在 `handleSubmit()` 函数内部，我们要做的第一件事是 `event.preventDefault()` 阻止表单重新加载页面。
+
+```js
+/**
+ * 处理提交事件
+ * @param  {Event} event 事件对象
+ */
+function handleSubmit(event) {
+  // 阻止表单重新加载页面
+  event.preventDefault()
+}
+```
+
+接下来，我们将检查 `file` 字段是否有要使用该文件处理的实际文件 `file.value` 属性，然后检查其 `length` 属性。
+
+如果没有文件，我们将使用 `return` 操作符结束回调函数。
+
+```js
+function handleSubmit(event) {
+  event.preventDefault()
+
+  // 如果没有文件，什么都不要做
+  if (!file.value.length) return
+}
+```
+
+现在，我们已经准备好上传文件了。
+
+### 使用 JavaScript 上传和处理 JSON 文件
+
+FileReader API 是一组异步方法，允许您处理和读取文件内容。
+
+我们要做的第一件事是使用 `new FileReader()` 构造函数创建一个新的 FileReader 实例，并将其分配给 `reader` 变量。
+
+```js
+function handleSubmit(event) {
+  event.preventDefault()
+  if (!file.value.length) return
+
+  // 创建新的 FileReader() 对象
+  let reader = new FileReader()
+}
+```
+
+要真正读取文件，我们可以使用 `FileReader.readAsText()` 方法。
+
+我们在 `reader` 上调用它，并将文件作为参数传递给 `reader`。我们可以使用文件字段上的 `files` 属性访问该文件。这将返回一个数组，因为 `[type="file"]` 可以支持多个文件。
+
+我们将使用括号表示法获取第一个（在本例中是唯一的）文件。
+
+```js
+function handleSubmit(event) {
+  event.preventDefault()
+  if (!file.value.length) return
+  let reader = new FileReader()
+
+  // 读取文件
+  reader.readAsText(file.files[0])
+}
+```
+
+这个 API 是异步的，所以我们需要将 `onload` 事件处理程序附加到 `reader` 对象。每当 `reader` 读取文件时，都会运行该命令。
+
+这需要在我们真正读取文件之前声明。
+
+为了让我们的代码更有条理，我们将使用一个命名函数：`logFile()`。我们不希望它立即运行，所以在将其分配给事件时，我们不使用括号（`()`）。
+
+```js
+function handleSubmit(event) {
+  event.preventDefault()
+  if (!file.value.length) return
+  let reader = new FileReader()
+
+  // 将回调事件设置为在读取文件时运行
+  reader.onload = logFile
+
+  reader.readAsText(file.files[0])
+}
+```
+
+`logFile()` 函数接收来自 FileReader 对象的隐式 `event` 参数，因此我们将其添加为参数。
+
+`event.target.result` 属性将是上传的 JSON 文件的字符串化版本。我们可以将它传递给`JSON.parse()`方法以从它获取 JSON 对象。
+
+出于我们的目的，我们将记录字符串和解析的 JSON。您可能希望在应用程序中使用 JSON 文件的属性，将其保存到 `localStorage`，或者对其执行其他操作。
+
+```js
+function logFile(event) {
+  let str = event.target.result
+  let json = JSON.parse(str)
+  console.log('string', str)
+  console.log('json', json)
+}
+```
+
+现在，每当用户提交 JSON 文件时，我们的代码都会读取它并将其记录到控制台。
+
+## 图像文件
+
+### 更新我们的表单
+
+对于本文，我们将更改 `[type="file"]` 输入接受的文件类型。
+
+我们想上传图像文件，所以我们将使用 `image/*` 作为 `accept` 的值。如果愿意，您可以将特定的文件扩展名指定为逗号分隔的列表，例如 `.png, .jpg`。
+
+```html
+<form id="upload">
+  <label for="file">文件上传</label>
+  <input type="file" id="file" accept="image/*" />
+
+  <button>上传</button>
+</form>
+```
+
+对于演示，我还想在 UI 中显示图像，因此我将添加一个 `#app` 元素，我们可以将图像渲染到其中。
+
+```html
+<div id="app"></div>
+```
+
+### 使用 JavaScript 上传图片
+
+首先，我们要更新我们的 `handleSubmit()` 函数。
+
+我们将不使用 `FileReader.readAsText()` 方法，而是使用 `FileReader.readAsDataURL()` 方法，再次传入文件。这将把文件作为 base64 编码的 [Data URL](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/Data%20URL.md) 进行处理。
+
+```js
+function handleSubmit(event) {
+  event.preventDefault()
+  if (!file.value.length) return
+  let reader = new FileReader()
+  reader.onload = logFile
+  reader.readAsDataURL(file.files[0])
+}
+```
+
+接下来，我们将使用 `document.querySelector()` 方法获取 `#app` 元素并将其保存到变量中。
+
+```js
+let app = document.querySelector('#app')
+```
+
+在 `logFile()` 事件处理程序函数中，`event.target.result` 是图像文件的 Data URL 字符串。您可以将其保存到 `localStorage`，将其发送到服务器等等。
+
+因为我们想在 UI 中显示它，所以我们将使用 `document.createElement()` 方法来创建一个 `img` 元素。然后，我们将从方法返回 `event.target.result` 的 `FileReader.readAsDataURL()` 设置为 `src` 属性。
+
+最后，我们将使用 `Node.append()` 方法将其注入 DOM。
+
+```js
+function logFile(event) {
+  let str = event.target.result
+  let img = document.createElement('img')
+  img.src = str
+  app.append(img)
+  console.log(str)
+}
+```
+
+## 更多资料
+
+[前端文件上传](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%89%8D%E7%AB%AF%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0.md)
diff --git "a/JavaScript/\344\275\277\347\224\250 JavaScript \346\267\273\345\212\240\346\227\266\351\227\264.md" "b/JavaScript/\344\275\277\347\224\250 JavaScript \346\267\273\345\212\240\346\227\266\351\227\264.md"
new file mode 100644
index 0000000..c91ddc3
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 JavaScript \346\267\273\345\212\240\346\227\266\351\227\264.md"	
@@ -0,0 +1,116 @@
+# 使用 JavaScript 添加时间
+
+当前在 JavaScript 中管理日期和时间的方法是使用 `Date()` 对象。还行，但不太好。
+
+它具有从字符串创建 `Date()` 对象、格式化日期和时间以及取回特定值的方法。但它缺乏从日期中添加或减去时间的原生方法。时区支持也很糟糕。
+
+有一个新的 API 正在开发中：[`Temporal()`](https://tc39.es/proposal-temporal/docs/)。它将允许您执行以下操作：
+
+```js
+// 目前浏览器中不支持这一点。
+Temporal.Now.instant().add({ hours: 5, seconds: 20 })
+```
+
+它目前是第 3 阶段的提案，这意味着它与标准流程相距甚远。
+
+那么，我们先来看看 `Date()` 的一些用法。
+
+## 创建 `Date()` 对象
+
+您可以使用 `new Date()` 构造函数创建 `Date()` 对象。
+
+如果不传入任何参数，它将为当前运行的时刻创建一个 `Date()` 对象。也可以将日期字符串作为参数传入。
+
+结果 `Date()` 对象与您当前的时区相关。
+
+```js
+// 现在的日期对象
+let now = new Date()
+
+// 国庆节日期对象
+let nationalDay = new Date('October 1, 2022')
+```
+
+您还可以通过传入一系列参数来创建日期：`year`、`monthIndex`、`day`、`hours`、`minutes`、`seconds` 和 `milliseconds`。只有 `year` 和 `monthIndex` 是必需的。
+
+`monthIndex` 参数让人感到困惑，因为它从 1 月的 `0` 开始，而不是 `1`。
+
+```js
+// 请注意，尽管 10 月是第 10 个月，但月份指数是 9
+let halloween = new Date(2022, 10, 1)
+
+// 当地时间国庆节上午 10:00
+let nationalDay = new Date(2022, 10, 1, 10, 00)
+```
+
+十二月份的月份数为 0：
+
+```js
+let December = new Date(2022, 10)
+December.getHours() // 0
+```
+
+它很笨重，但很实用。
+
+## 修改日期
+
+`Date()` 对象提供了一些实例方法，可以用来获取和修改日期和时间。它们遵循 `get*()` 和 `set*()` 命名约定，其中 `*` 是要获取或设置的属性。
+
+例如，要获取 `nationalDay` 的 `hours` 和 `month` 属性，使用 `getHours()` 和 `getMonth`。
+
+```js
+nationalDay.getHours() // 10
+
+// 记住：它从 0 开始
+nationalDay.getMonth() // 10
+```
+
+要设置 `hours` 和 `month` 属性，使用 `setHours()` 和 `setMonth`，传入想要设置的时间参数即可。它使用 24 小时制的时钟。
+
+```js
+// 将时间设置为下午 2 点，14 小时
+nationalDay.setHours(14)
+
+// 把月份定在 7 月
+nationalDay.setMonth(6)
+```
+
+## 添加和删除时间
+
+现在，为了添加和删除时间，我们可以结合使用 `get*()` 和 `set*()` 方法。
+
+例如，要向一个时间添加 4 小时，可以使用 `getHours()` 方法获取当前的小时数，再向其中添加 4 小时，然后将结果传递给 `setHours()` 方法。
+
+```js
+// 将时间设置为下午 6 点（下午 2 点 +4 小时）
+nationalDay.setHours(nationalDay.getHours() + 4)
+```
+
+如果由此产生的调整会让您进入下一天、下个月、下一年等，那么 `Date()` 对象会自动考虑这一点并正确地进行调整。
+
+```js
+// 将日期设置为 12 月 26 日凌晨 2 点（12 月 25 日下午 6 点 +8 小时）
+nationalDay.setHours(nationalDay.getHours() + 8)
+```
+
+## 格式化日期
+
+修改日期和时间后，可以将其格式化为字符串。
+
+有两种方法：[`Date.toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 方法和 [`Intl.dateTimeFormat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) 方法。
+
+```js
+nationalDay.toLocaleString(navigator.language, {
+  dateStyle: 'full',
+  timeStyle: 'short',
+  hour12: true
+}) // '2022年7月2日星期六 上午2:00'
+
+new Intl.DateTimeFormat(navigator.language, {
+  dateStyle: 'full',
+  timeStyle: 'short',
+  hour12: true
+}).format(nationalDay) // '2022年7月2日星期六 上午2:00'
+```
+
+它们都支持相同的格式选项。`Date.toLocaleString()` 方法较旧，但使用起来更容易一些。如果您使用相同的设置格式化大量日期，那么 `Intl.dateTimeFormat()` 方法方法的性能会更好。
diff --git "a/JavaScript/\344\275\277\347\224\250 JavaScript \347\232\204 Date.toLocaleString() \346\226\271\346\263\225\346\240\274\345\274\217\345\214\226\346\227\245\346\234\237\345\222\214\346\227\266\351\227\264.md" "b/JavaScript/\344\275\277\347\224\250 JavaScript \347\232\204 Date.toLocaleString() \346\226\271\346\263\225\346\240\274\345\274\217\345\214\226\346\227\245\346\234\237\345\222\214\346\227\266\351\227\264.md"
new file mode 100644
index 0000000..0fefa2e
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 JavaScript \347\232\204 Date.toLocaleString() \346\226\271\346\263\225\346\240\274\345\274\217\345\214\226\346\227\245\346\234\237\345\222\214\346\227\266\351\227\264.md"	
@@ -0,0 +1,51 @@
+# 使用 JavaScript 的 Date.toLocaleString() 方法格式化日期和时间
+
+## `Date.toLocaleString()` 方法
+
+[`Date.toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 方法可用于从 Date 对象创建格式化的日期和时间字符串。
+
+它接受两个参数：格式化字符串的 `locale` 和格式化 `options` 对象。
+
+`locale` 通常是一种语言代码。例如，对于中文，使用的是 `zh-cn`。`options` 对象包括 `dateStyle` 和 `timeStyle` 等设置（两者都接受 `full`、`long`、`middle` 和 `short` 的值）。
+
+```js
+let now = new Date()
+
+// 获取格式化字符串
+let formatDate = now.toLocaleString('en-US', {
+  dateStyle: 'long',
+  timeStyle: 'short',
+  hour12: true
+}) // '2022年3月29日 下午4:36'
+```
+
+## 格式因位置而异
+
+`locale` 参数控制格式约定。
+
+例如，使用英式英语（`en-UK`）或美式英语（`en-US`），我们的日期和时间返回格式略有不同。
+
+```js
+new Date().toLocaleString('en-UK', {
+  dateStyle: 'long',
+  timeStyle: 'short',
+  hour12: true
+}) // '29 March 2022, 04:40 pm'
+
+new Date().toLocaleString('en-US', {
+  dateStyle: 'long',
+  timeStyle: 'short',
+  hour12: true
+}) // 'March 29, 2022 at 4:40 PM'
+```
+
+我们可以使用 `navigator.language` 属性将日期字符串自动格式化为用户的 `locale`。
+
+```js
+// 这将自动使用用户的浏览器语言进行格式化
+new Date().toLocaleString(navigator.language, {
+  dateStyle: 'long',
+  timeStyle: 'short',
+  hour12: true
+}) // '2022年3月29日 下午4:41'
+```
diff --git "a/JavaScript/\344\275\277\347\224\250 JavaScript \347\232\204 Intl.DateTimeFormat() \346\236\204\351\200\240\345\207\275\346\225\260\350\275\254\346\215\242\345\222\214\346\240\274\345\274\217\345\214\226\346\227\245\346\234\237\345\222\214\346\227\266\351\227\264.md" "b/JavaScript/\344\275\277\347\224\250 JavaScript \347\232\204 Intl.DateTimeFormat() \346\236\204\351\200\240\345\207\275\346\225\260\350\275\254\346\215\242\345\222\214\346\240\274\345\274\217\345\214\226\346\227\245\346\234\237\345\222\214\346\227\266\351\227\264.md"
new file mode 100644
index 0000000..a2d6283
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 JavaScript \347\232\204 Intl.DateTimeFormat() \346\236\204\351\200\240\345\207\275\346\225\260\350\275\254\346\215\242\345\222\214\346\240\274\345\274\217\345\214\226\346\227\245\346\234\237\345\222\214\346\227\266\351\227\264.md"	
@@ -0,0 +1,47 @@
+# 使用 JavaScript 的 Intl.DateTimeFormat() 构造函数转换和格式化日期和时间
+
+## `Intl.DateTimeFormat()` 方法是如何工作的
+
+Intl 对象的设计目的是使特定位置的数据更容易国际化。`DateTimeFormat()` 是一种用于格式化日期和时间的方法。
+
+首先，创建一个新的 `Intl.DateTimeFormat()` 实例。
+
+它接受一个 `locale`（例如，`zh-CN` 代表中文，`en-US` 代表美式英语，`en-GB` 代表英式英语）。此参数告诉方法将日期和时间格式化为哪种语言。
+
+```js
+const formatter = new Intl.DateTimeFormat('zh-CN')
+const formatter = new Intl.DateTimeFormat('en-US')
+const formatter = new Intl.DateTimeFormat('en-GB')
+```
+
+使用一系列 `options` 作为第二个参数，可以对输出的格式进行更细粒度的控制。
+
+例如：以下示例使用 `dateStyle` 属性，然后使用 `format` 格式化为字符串：
+
+```js
+const now = new Date()
+
+new Intl.DateTimeFormat('zh-CN', { dateStyle: 'full' }).format(now) // '2022年3月30日星期三'
+new Intl.DateTimeFormat('zh-CN', { dateStyle: 'long' }).format(now) // '2022年3月30日'
+new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium' }).format(now) // '2022年3月30日'
+new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short' }).format(now) // '2022/3/30'
+new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(now) // 'March 30, 2022'
+
+new Intl.DateTimeFormat('en-CA', { dateStyle: 'short' }).format(now) // '2022-03-30'
+```
+
+您可以查看 `options` 参数的完整列表，以及它们在 [Mozilla 开发者网络](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#Syntax)上的功能。
+
+## `Intl.DateTimeFormat()` 和 `Date.toLocaleString()` 有什么区别
+
+`Date.toLocalString()` 方法的旧实现不支持 `locale` 或 `options` 参数，并且只使用当前用户的语言环境。
+
+`Intl.DateTimeFormat()` 方法推出后，可选的 `options` 也被纳入 `Date.toLocaleString()`。
+
+如果您使用相同的选项格式化多个日期，`Intl.DateTimeFormat()` 方法将为您提供更好的性能，应该是首选方法。否则，它们在行为上是相同的。
+
+## 浏览器兼容性
+
+`Intl.DateTimeFormat()` 方法适用于所有现代浏览器，也适用于 IE 11。
+
+![Intl.DateTimeFormat](https://upload-images.jianshu.io/upload_images/18281896-e3f3ebd32a4fc106.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/JavaScript/\344\275\277\347\224\250 JavaScript \350\247\243\346\236\204\345\207\275\346\225\260\345\217\202\346\225\260\347\232\204\346\226\271\346\263\225.md" "b/JavaScript/\344\275\277\347\224\250 JavaScript \350\247\243\346\236\204\345\207\275\346\225\260\345\217\202\346\225\260\347\232\204\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..13e49ac
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 JavaScript \350\247\243\346\236\204\345\207\275\346\225\260\345\217\202\346\225\260\347\232\204\346\226\271\346\263\225.md"	
@@ -0,0 +1,40 @@
+# 使用 JavaScript 解构函数参数的方法
+
+使用对象解构和 `Object.assign()` 方法将大量参数传递给函数。
+
+```js
+function foo(args) {
+  // 获取参数值
+  let { name, age, job, flag } = Object.assign(
+    {
+      age: null,
+      job: 'Programmer',
+      flag: false
+    },
+    args
+  )
+
+  console.log(name, age, job, flag)
+}
+```
+
+您还可以通过直接在参数赋值中解构来获得相同的结果。甚至可以指定默认参数值。
+
+```js
+function foo({ name, age, job = 'Programmer', flag = false } = {}) {
+  console.log(name, age, job, flag)
+}
+```
+
+无论采用哪种方法，您都可以像这样传递您的参数。
+
+```js
+foo({
+  name: 'O.O',
+  age: 20
+}) // "O.O", "20", "Programmer", false
+```
+
+就个人而言，我觉得使用 `Object.assign()` 更容易扫描和阅读，因为每个参数都在自己的行中。
+
+但它们都有相同的功能，所以选择你觉得更容易阅读和使用的。
diff --git "a/JavaScript/\344\275\277\347\224\250 Proxy \345\257\271\350\261\241\346\235\245\345\201\245\345\243\256\344\275\240\347\232\204 JavaScript \344\270\215\345\217\230\346\200\247\345\207\275\346\225\260.md" "b/JavaScript/\344\275\277\347\224\250 Proxy \345\257\271\350\261\241\346\235\245\345\201\245\345\243\256\344\275\240\347\232\204 JavaScript \344\270\215\345\217\230\346\200\247\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..350c5e9
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 Proxy \345\257\271\350\261\241\346\235\245\345\201\245\345\243\256\344\275\240\347\232\204 JavaScript \344\270\215\345\217\230\346\200\247\345\207\275\346\225\260.md"	
@@ -0,0 +1,94 @@
+# 使用 Proxy 对象来健壮你的 JavaScript 不变性函数
+
+虽然 JavaScript 允许我们突变（Mutation）对象，但我们可能会选择不允许自己（和其他程序员）这样做。
+
+最好的例子之一就是在 React 应用程序中设置 `State`。如果我们改变当前 `State` 而不是当前状态的新副本，我们可能会遇到难以诊断的问题。
+
+下面，我们将使用不可变代理函数来防止对象突变！
+
+## 什么是对象突变？
+
+在几天前，我写过一篇关于[变量赋值与原始/对象可变性](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E4%B8%8E%E5%8E%9F%E5%A7%8B%E5%AF%B9%E8%B1%A1%E5%8F%AF%E5%8F%98%E6%80%A7.md)，如果你不是很了解，可以先点击链接查看一下，下面也会做简单的讲解。
+
+对象突变是我们改变了一个对象或数组的属性。这与**重新分配**不同，在**重新分配**中，我们指向一个完全不同的对象引用。以下是几个突变与重新分配的例子：
+
+```js
+// Mutation
+const person = { name: 'BO' }
+person.name = 'OB'
+
+// Reassignment
+let user = { name: 'D.O', age: 18 }
+user = { name: 'IY', type: 17 }
+```
+
+我们必须记住，这同样适用于数组：
+
+```js
+// Mutation
+const course = ['JavaScript', 'HTML', 'CSS']
+course[1] = 'Vue'
+// course => ["JavaScript", "Vue", "CSS"]
+
+// Reassignment
+let user = ['D.O', 'LAY', 'KAI']
+user = ['IU', 'BY']
+// user => ["IU", "BY"]
+```
+
+## 对象突变的意外后果示例
+
+既然我们已经知道了突变是什么，那么突变怎么会有意料之外的后果呢？让我们看看下面的例子。
+
+```js
+const person = { name: 'BO' }
+const otherPerson = person
+otherPerson.name = 'OB'
+
+console.log(person) // { name: "OB" }
+```
+
+可以看到，`person` 和 `otherPerson` 都引用同一个对象，因此如果我们在 `otherPerson` 上更改 `name`，那么当我们访问 `person` 时，该更改将得到反映。
+
+与其让我们自己（和我们项目中的开发人员）对这样的对象进行突变，还不如我们抛出一个错误呢？这就是我们不可变 `Proxy` 代理解决方案的用武之地。
+
+## 不可变的代理解决方案
+
+JavaScript `Proxy` 对象使我们可以使用的一种方便的元编程。它允许我们用自定义功能包装对象，例如对象上的 `getter` 和 `setter`。
+
+对于我们的不可变代理，让我们创建一个函数，该函数接受一个对象并为该对象返回一个新的代理。当我们试图 `get` 该对象的属性时，我们检查该属性本身是否为对象。如果是，则以递归方式返回包装在不可变代理中的属性。否则，我们只返回属性。
+
+当我们试图 `set` 设置代理对象的值时，简单地抛出一个错误，让用户知道他们不能 `set` 这个对象的属性。
+
+下面是我们的不可变 `Proxy` 函数：
+
+```js
+const user = {
+  name: 'Bo',
+  friend: [{ name: 'IY', age: 18 }]
+}
+
+const immutable = (obj) =>
+  new Proxy(obj, {
+    get(target, prop) {
+      return typeof target[prop] === 'object'
+        ? immutable(target[prop])
+        : target[prop]
+    },
+    set() {
+      throw new Error('Immutable!')
+    }
+  })
+
+const immutableUser = immutable(user)
+
+const immutableFriend = immutableUser.friend[0]
+
+immutableFriend.age = 80 // Error: Immutable!
+```
+
+可以看到，我们现在不能在一个不可变的对象上改变一个属性！
+
+## 最后
+
+现在，你已经了解了 Proxy 的一些用法。这是很棒的、健壮程序的解决方案。如果你想在你的应用程序中使用包含不可变的数据结构，你可以选择 [Immutable](https://github.com/immutable-js/immutable-js) 和 [Immer](https://github.com/immerjs/immer) 这样成熟的库。
diff --git "a/JavaScript/\344\275\277\347\224\250 URLSearchParams \345\234\250 JavaScript \344\270\255\350\216\267\345\217\226\346\237\245\350\257\242\345\255\227\347\254\246\344\270\262\345\200\274.md" "b/JavaScript/\344\275\277\347\224\250 URLSearchParams \345\234\250 JavaScript \344\270\255\350\216\267\345\217\226\346\237\245\350\257\242\345\255\227\347\254\246\344\270\262\345\200\274.md"
new file mode 100644
index 0000000..e61bd0c
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250 URLSearchParams \345\234\250 JavaScript \344\270\255\350\216\267\345\217\226\346\237\245\350\257\242\345\255\227\347\254\246\344\270\262\345\200\274.md"	
@@ -0,0 +1,162 @@
+# 使用 URLSearchParams 在 JavaScript 中获取查询字符串值
+
+[wiki](https://en.wikipedia.org/wiki/URL#Syntax) 有一个不错的 URL 语法图，如下：
+
+![URL 语法图](https://upload-images.jianshu.io/upload_images/18281896-8a7f161f6ae05c0c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+它包含 URL 具体的构成，你可以先点击链接，了解它们各部分的含义，在继续往下阅读（也可以跳过）。
+
+HTTP 协议允许使用查询字符串向网页发出请求。
+
+像这样：
+
+```txt
+https://example.com/?name=O.O
+https://example.com/post?name=O.O
+```
+
+在这种情况下，我们有一个名为 `name` 的查询参数， 其值为 `O.O`。
+
+你可以有多个参数，如下所示：
+
+```txt
+https://example.com/post?name=O.O&age=20
+```
+
+为了使用 JavaScript 访问浏览器内的查询值，我们有一个名为 [`URLSearchParam`](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams) 的特殊 API，除了 IE，所有现代浏览器都支持该 API：
+
+![URLSearchParam API 支持情况](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a31eaba3661b4b0ca02e0728a9f8f80b~tplv-k3u1fbpfcp-watermark.image?)
+
+用法：
+
+```js
+const params = new URLSearchParams(window.location.search)
+```
+
+**注意**：不要将完整的 URL 作为参数传递给 `URLSearchParams()`，而只传递 URL 的查询字符串部分，你可以使用 `window.location.search`。
+
+例如：
+
+```txt
+https://example.com/post?name=O.O
+```
+
+`window.location.search` 等于字符串 `?name=O.O`。
+
+现在你有了 `params` 对象，你可以查询它了。
+
+你可以检查是否传递了参数：
+
+```js
+params.has('name')
+```
+
+你可以获取参数的值：
+
+```js
+params.get('name')
+```
+
+你可以迭代所有参数，使用 `for...of`：
+
+```js
+const params = new URLSearchParams(window.location.search)
+
+for (const param of params) {
+  console.log(param)
+}
+```
+
+一个参数可以有多个值。
+
+在这种情况下，我们多次传递相同的参数名，如下所示：
+
+```txt
+https://example.com/post?name=D.O&name=O.O
+```
+
+我们无法检测一个参数是否被多次传递。如果我们使用 `params.get('name')`，我们只会得到第一个值。
+
+我们可以使用 `params.getAll('name')` 返回一个包含所有传递值的数组。
+
+除了 `has()`、`get()` 和 `getAll()`，URLSearchParams API 还提供了几种其他方法，我们可以使用这些方法循环参数：
+
+- `forEach()` 迭代参数
+- `entries()` 返回包含参数键/值的迭代器
+- `keys()` 返回包含参数键的迭代器
+- `values()` 返回包含参数值的迭代器
+
+更改参数的其他方法，用于页面中运行的其他 JavaScript（它们不会更改 URL）：
+
+- `append()` 将新参数附加到对象
+- `delete()` 删除现有参数
+- `set()` 设置参数的值
+
+我们还使用 `sort()` 按键值对参数进行排序，使用 `toString()` 方法从值生成查询字符串。
+
+我们可以使用 `append()`、`.delete()` 和 `set()` 来编辑查询字符串，并使用 `toString()` 生成一个新的查询字符串。
+
+## 示例：生成一个包含当前 URL 参数的对象
+
+使用正则匹配获取查询字符串值：
+
+```js
+const getURLParameters = (url) =>
+  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
+    (acc, cur) => (
+      (acc[cur.slice(0, cur.indexOf('='))] = cur.slice(cur.indexOf('=') + 1)),
+      acc
+    ),
+    {}
+  )
+
+getURLParameters('google.com') // {}
+getURLParameters('https://example.com?name=O.O&age=18') // {name: 'O.O', age: '18'}
+```
+
+使用 `URLSearchParams` 查询字符串值：
+
+```js
+const queryStringToObject = (url) =>
+  [...new URLSearchParams(url.split('?')[1])].reduce(
+    (a, [k, v]) => ((a[k] = v), a),
+    {}
+  )
+
+queryStringToObject('https://google.com?page=1&count=10') // {page: '1', count: '10'}
+```
+
+你可以编写两个方法来在查询字符串和查询对象之间相互转换：
+
+```js
+function objectToParams(object) {
+  const params = new URLSearchParams()
+  Object.entries(object).map((entry) => {
+    let [key, value] = entry
+    params.set(key, value)
+  })
+  return params.toString()
+}
+
+function paramsToObject(paramString) {
+  const params = new URLSearchParams(paramString)
+  const object = {}
+  for (const [key, value] of params.entries()) {
+    object[key] = value
+  }
+  return object
+}
+
+// URL 示例：https://example.com/post?name=O.O
+// window.location.search = ?name=O O
+const params = paramsToObject('?name=O.O') // {name: 'O.O'}
+objectToParams(params) // 'name=O O'
+```
+
+记住，它不支持 IE 的任何版本，且 `URLSearchParams` 没有在最后一个字符串前加上 `?` 字符，因此需要手动将其添加到返回的字符串和主 URL 之间。
+
+在这之后，你可以配合 `encodeURI()` 和 `encodeURIComponent()` 对 URL 的特殊字符进行编码。
+
+> 推荐：[encodeURI 与 encodeURIComponent 的区别](https://github.com/lio-zero/blog/blob/main/JavaScript/encodeURI%20%E4%B8%8E%20encodeURIComponent%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+>
+> 更新：[URL API](https://github.com/lio-zero/blog/blob/main/Web%20API/URL%20API.md)
diff --git "a/JavaScript/\344\275\277\347\224\250\345\215\225\351\200\211\346\214\211\351\222\256\345\210\207\346\215\242 CSS \350\207\252\345\256\232\344\271\211\345\261\236\346\200\247.md" "b/JavaScript/\344\275\277\347\224\250\345\215\225\351\200\211\346\214\211\351\222\256\345\210\207\346\215\242 CSS \350\207\252\345\256\232\344\271\211\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..4f4cbb7
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250\345\215\225\351\200\211\346\214\211\351\222\256\345\210\207\346\215\242 CSS \350\207\252\345\256\232\344\271\211\345\261\236\346\200\247.md"	
@@ -0,0 +1,106 @@
+# 使用单选按钮切换 CSS 自定义属性
+
+我们有一组单选按钮，分别切换不同的背景颜色，其主要结构如下：
+
+```html
+<form class="controls">
+  <input type="radio" name="color" value="night-fade" checked />
+  <input type="radio" name="color" value="warm-flame" />
+  <input type="radio" name="color" value="spring-warmth" />
+</form>
+```
+
+以往，我们可以使用 JavaScript 来检测用户何时与单选按钮交互并相应地附加一个类。
+
+```js
+const bgColor = document.querySelector('body')
+const controls = document.querySelector('.controls')
+
+let currentClass = 'night-fade'
+
+const onChange = (e) => {
+  if (!e.target.value || !e.target.checked) return
+
+  if (bgColor.classList.contains(currentClass)) {
+    bgColor.classList.replace(currentClass, e.target.value)
+  } else {
+    bgColor.classList.add(e.target.value)
+  }
+
+  currentClass = e.target.value
+}
+
+controls.addEventListener('change', onChange)
+```
+
+然后，我们为每个类添加 CSS `background-image` 来切换背景：
+
+```css
+body {
+  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
+}
+
+body.warm-flame {
+  background-image: linear-gradient(
+    45deg,
+    #ff9a9e 0%,
+    #fad0c4 99%,
+    #fad0c4 100%
+  );
+}
+
+body.spring-warmth {
+  background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
+}
+```
+
+效果如下：
+
+![b7e2e755-9df1-45c0-bc20-c73fb479359a (1).gif](https://upload-images.jianshu.io/upload_images/18281896-a1c4a4f636b58534.gif?imageMogr2/auto-orient/strip)
+
+然而，现在我们可以有更好的选择：**CSS 自定义属性（也称变量）**。它可以使你的 CSS、JS 看起来更加简洁、方便，我们同样使用它来完成上面的效果。
+
+## 自定义属性
+
+我们可以全局范围内，也就是 `:root` 内为接下来需要用到背景色值，都分配一个自定义属性：
+
+```css
+:root {
+  --bg-color-night-fade: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
+  --bg-color-warm-flame: linear-gradient(
+    45deg,
+    #ff9a9e 0%,
+    #fad0c4 99%,
+    #fad0c4 100%
+  );
+  --bg-color-spring-warmth: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
+}
+```
+
+接下来，我们在本地范围内，也就是需要应用背景色的元素内（这里是 `body`）定义了一个新的 `--bg-color` 变量指定一个初始背景色。它将用于后面在单选按钮改变时，通过 JS 动态改变 `--bg-color` 内的值，使得 `background-image` 和 `--bg-color` 同步更新。
+
+我们使用第一个 `--bg-color-night-fade` 变量作为第一个单选按钮选项相对应的初始值：
+
+```css
+body {
+  --bg-color: var(--bg-color-night-fade);
+  background-image: var(--bg-color);
+}
+```
+
+最后，监听表单下单选按钮的 `change`，在 `onChange` 事件处理程序中，我们使用与所选 `radio` 相对应的自定义属性更新 `--bg-color` 的值。
+
+```js
+const bgColor = document.querySelector('body')
+const controls = document.querySelector('.controls')
+
+const onChange = (e) => {
+  if (!e.target.value || !e.target.checked) return
+
+  bgColor.style.setProperty('--bg-color', `var(--bg-color-${e.target.value})`)
+}
+
+controls.addEventListener('change', onChange)
+```
+
+你可以在这 👉[查看效果](https://codepen.io/lio-zero/pen/bGqqRqe)。
diff --git "a/JavaScript/\344\275\277\347\224\250\347\204\246\347\202\271\346\240\267\345\274\217\344\270\260\345\257\214\347\224\250\346\210\267\344\275\223\351\252\214.md" "b/JavaScript/\344\275\277\347\224\250\347\204\246\347\202\271\346\240\267\345\274\217\344\270\260\345\257\214\347\224\250\346\210\267\344\275\223\351\252\214.md"
new file mode 100644
index 0000000..53ab287
--- /dev/null
+++ "b/JavaScript/\344\275\277\347\224\250\347\204\246\347\202\271\346\240\267\345\274\217\344\270\260\345\257\214\347\224\250\346\210\267\344\275\223\351\252\214.md"
@@ -0,0 +1,162 @@
+# 使用焦点样式丰富用户体验
+
+用户有很多种访问网站的方式，例如：鼠标、触摸设备、屏幕阅读器、键盘。在本文中，我们将了解有关焦点指示器的所有内容，如何设置它们的样式以及它们对许多用户的重要性。
+
+## 什么是焦点指示器？
+
+在聚焦输入元素时是否见过蓝色轮廓？这是原生对焦点样式浏览器用来指示某个元素被聚焦的方式。
+
+![原生焦点样式](https://upload-images.jianshu.io/upload_images/18281896-1e8c046c13e8f3e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+以上是 Chrome、Edge、Safari 和 Firefox 中输入元素的原生焦点样式。
+
+此蓝色轮廓将显示所有交互元素。这包括 `<a>`、`<button>` 和所有表单元素，如 `<input>` 和 `<select>` 元素。每个浏览器都有一个稍微不同的默认样式，因此您可能希望更改默认样式。
+
+## 更改焦点指示器的样式
+
+现在，我们知道什么是焦点指示器，让我们看看如何改变默认的样式。
+
+```css
+a:focus {
+  outline: none;
+  background-color: #651787;
+  color: #fff;
+}
+```
+
+在这里，我们使用 `outline: none` 删除默认的蓝色轮廓，同时更改背景颜色和接收焦点时元素的颜色。通过这种方式，用户仍然可以很容易地识别出元素当前的焦点，你可以根据设计进行匹配，而不是使用原生的蓝色轮廓。
+
+这里要注意的一点是，当你改变颜色时，你应该检查[颜色对比度](https://contrast-ratio.com/)是否足够。这对于[视力低下的人来说](https://www.w3.org/TR/low-vision-needs/)尤其重要，但是颜色对比度差会影响到每个人。如果你曾经坐在阳光下上网，你就会知道拥有一个好的颜色对比度是多么重要，这样你才能看到屏幕上的内容。
+
+## 使用 `:focus-within` 设置可聚焦元素的父元素的样式
+
+是否想要设置聚焦元素的父元素的样式？
+
+CSS 伪类 [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) 可以精确地实现这一点。
+
+![:focus-within](https://upload-images.jianshu.io/upload_images/18281896-d5c7c0b9195d74ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+让我们看看如何使用它：
+
+```html
+<form>
+  <label for="username">Username:</label>
+  <input id="username" type="text" />
+
+  <label for="password">Password:</label>
+  <input id="password" type="password" />
+
+  <input type="submit" value="Login" />
+</form>
+```
+
+在这里，我们有一个基本的登录表单在 HTML。作为下一步，我们将使用 CSS 来创建一定的效果：
+
+```css
+form {
+  padding: 10px;
+  position: relative;
+  overflow: hidden;
+}
+form:before {
+  content: '';
+  background: #ddd;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  transform: translateY(-100%);
+  transition: transform 260ms ease-out;
+}
+form:focus-within::before {
+  transform: translateY(0);
+}
+```
+
+默认情况下，我们使用 `:before` 为表单创建背景，并使用 `transform: translateY(-100%)` 隐藏它。
+
+一旦用户点击其中一个 `input` 元素，背景将从顶部移入。这是通过使用 `form:focus-within::before` 并将 `translateY` 设置为 `0` 来完成的。此外，我们使用 `transition` 使其成为平滑效果。
+
+## 使用 `:focus-visible` 与鼠标/指针交互时不显示焦点样式
+
+有时，使用 `:focus` 样式也会对鼠标/指针用户的用户体验产生副作用。以具有上一个/下一个控件的图像库为例。如果用户单击其中一个按钮，它们将聚焦，因此将显示聚焦样式。虽然这对键盘用户来说很好，但对鼠标/指针用户来说可能太多了。
+
+在这里，如果用户使用鼠标或指针聚焦元素，我们将使用伪类显式删除焦点样式。这样，键盘用户仍然可以看到焦点指示器，而鼠标用户则看不到。太好了，问题解决了
+
+在之前，你可能会使用以下错误的方法来修复这样的问题。
+
+```css
+button:focus {
+  outline: none;
+}
+```
+
+别在这样做了。这会删除键盘用户的焦点指示器，使您几乎无法使用图像库。
+
+我们可以使用 [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) 伪类，仅当用户使用键盘对焦元素时，才会显示对焦样式。
+
+让我们来看看如何使用它：
+
+```css
+/* 提供基本的焦点样式 */
+button:focus {
+  ...;
+}
+/* 删除鼠标用户的焦点样式 */
+button:focus:not(:focus-visible) {
+  outline: none;
+}
+```
+
+在这里，我们使用 `:not` 伪类来明确删除对焦样式，如果用户使用鼠标或指头对焦元素。这样，键盘用户仍将看到对焦指示器，而鼠标用户看不到。
+
+以下是 [`focus-visible`](https://caniuse.com/?search=focus-visible) 的支持情况：
+
+![:focus-visible](https://upload-images.jianshu.io/upload_images/18281896-24f0492f03980633.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果需要兼容低版本浏览器，你可以使用 [`polyfill`](https://www.npmjs.com/package/dwnld-attr-polyfill) 来支持在这些不支持的环境中运行该属性。
+
+## 焦点顺序
+
+由于所有现代浏览器都支持 **Grid** 和 **Flexbox**，我们可以轻松地在 CSS 中重新排序元素。这是非常棒的，您可以实现出色的布局，但是在不更改元素本身顺序的情况下，在视觉上更改顺序也存在[问题](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)。
+
+默认情况下，[焦点顺序](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html)必须是有意义的，不然将有意想不到的影响。
+
+让我用一个链接列表的例子来解释：
+
+```html
+<ul>
+  <li><a href="#">One</a></li>
+  <li><a href="#">Two</a></li>
+  <li><a href="#">Three</a></li>
+  <li><a href="#">Four</a></li>
+  <li><a href="#">Five</a></li>
+</ul>
+```
+
+默认情况下，这些链接的视觉顺序和选项卡顺序匹配。当使用 `tab` 键导航时，它将从 `1` 变为 `2`，以此类推。
+
+现在，让我们想象一下，我们想要直观地更改顺序，并将第三个元素移动到最后一个位置：
+
+```css
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 目视将第三个元素移动到最后一个位置 */
+li:nth-child(3) {
+  order: 1;
+}
+```
+
+[完整示例](https://jsbin.com/tifulec/1/edit?html,css,js,output)
+
+现在，第三个元素在视觉上处于最后一个位置，但选项卡顺序仍然是 `1`、`2` 和 `3`。
+
+视觉顺序和键盘导航顺序不再匹配  ，这会使键盘用户无法使用这些东西。当你用 CSS 改变 `order` 时，你需要考虑这个问题，如果它仍然有意义的话，我们应该使用键盘进行测试。
diff --git "a/JavaScript/\345\210\233\345\273\272\345\217\257\350\260\203\346\225\264\345\244\247\345\260\217\347\232\204\346\213\206\345\210\206\350\247\206\345\233\276.md" "b/JavaScript/\345\210\233\345\273\272\345\217\257\350\260\203\346\225\264\345\244\247\345\260\217\347\232\204\346\213\206\345\210\206\350\247\206\345\233\276.md"
new file mode 100644
index 0000000..213cd08
--- /dev/null
+++ "b/JavaScript/\345\210\233\345\273\272\345\217\257\350\260\203\346\225\264\345\244\247\345\260\217\347\232\204\346\213\206\345\210\206\350\247\206\345\233\276.md"
@@ -0,0 +1,217 @@
+# 创建可调整大小的拆分视图
+
+在这篇文章中，我们将添加一个元素来调整给定元素的子元素的大小。基本结构如下：
+
+```html
+<div style="display: flex">
+  <div>Left</div>
+  <div class="resizer" id="dragMe"></div>
+  <div>Right</div>
+</div>
+```
+
+为了将 `left`、`resizer` 和 `right` 元素放在同一行，我们将 `display: flex` 样式添加到父级。
+
+## 拖动 `resizer` 元素时更新左侧的宽度
+
+在我们的例子中，可以水平拖动 `resizer`。首先，当用户开始单击调整器时，我们必须存储鼠标位置和左侧的宽度：
+
+```js
+const resizer = document.getElementById('dragMe')
+const leftSide = resizer.previousElementSibling
+const rightSide = resizer.nextElementSibling
+
+// 鼠标的当前位置
+let x = 0
+let y = 0
+
+// 左侧宽度
+let leftWidth = 0
+
+// 处理当用户拖动大小调整器时触发的 mousedown 事件
+const mouseDownHandler = function (e) {
+  // 获取当前鼠标位置
+  x = e.clientX
+  y = e.clientY
+  leftWidth = leftSide.getBoundingClientRect().width
+
+  // 将侦听器附加到 document
+  document.addEventListener('mousemove', mouseMoveHandler)
+  document.addEventListener('mouseup', mouseUpHandler)
+}
+
+// 连接处理程序
+resizer.addEventListener('mousedown', mouseDownHandler)
+```
+
+从标签的结构来看，左侧和右侧是 `resizer` 的上一个兄弟和下一个兄弟。它们可以被检索如上所述：
+
+```js
+const leftSide = resizer.previousElementSibling
+const rightSide = resizer.nextElementSibling
+```
+
+接下来，当用户移动鼠标时，我们确定鼠标移动了多远，然后更新左侧的宽度：
+
+```js
+const mouseMoveHandler = function (e) {
+  // 鼠标移动了多远
+  const dx = e.clientX - x
+  const dy = e.clientY - y
+
+  const newLeftWidth =
+    ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width
+  leftSide.style.width = `${newLeftWidth}%`
+}
+```
+
+这里需要注意两点：
+
+- 左侧的宽度是根据父级宽度的百分比数设置的。它保持了左侧和侧边宽度的比例，并在用户调整浏览器大小时使两侧看起来很好。
+- 如果我们总是强制其采用剩余宽度，则无需更新右侧的宽度：
+
+```html
+<div style="display: flex">
+  <!-- ... -->
+  <div style="flex: 1 1 0%;">Right</div>
+</div>
+```
+
+## 修复闪烁的问题
+
+当用户移动大小调整器时，我们应更新其光标：
+
+```js
+const mouseMoveHandler = function (e) {
+  // ...
+  resizer.style.cursor = 'col-resize'
+}
+```
+
+但它引发了另一个问题。只要用户移动鼠标，我们就会看到默认的鼠标光标，因为鼠标不在大小调整器的顶部。用户将看到屏幕闪烁，因为光标不断变化。
+
+为了解决这个问题，我们为整个页面设置了光标：
+
+```js
+const mouseMoveHandler = function (e) {
+  // ...
+  document.body.style.cursor = 'col-resize'
+}
+```
+
+我们还设置 `user-select` 和 `pointer-events` 为 `none`，以防止防止两侧的鼠标事件和文本选择：
+
+```js
+const mouseMoveHandler = function (e) {
+  // ...
+  leftSide.style.userSelect = 'none'
+  leftSide.style.pointerEvents = 'none'
+
+  rightSide.style.userSelect = 'none'
+  rightSide.style.pointerEvents = 'none'
+}
+```
+
+这些样式在用户停止移动鼠标后立即移除：
+
+```js
+const mouseUpHandler = function () {
+  resizer.style.removeProperty('cursor')
+  document.body.style.removeProperty('cursor')
+
+  leftSide.style.removeProperty('user-select')
+  leftSide.style.removeProperty('pointer-events')
+
+  rightSide.style.removeProperty('user-select')
+  rightSide.style.removeProperty('pointer-events')
+
+  // 移除 mousemove 和 mouseup 的处理程序
+  document.removeEventListener('mousemove', mouseMoveHandler)
+  document.removeEventListener('mouseup', mouseUpHandler)
+}
+```
+
+## 支持垂直方向
+
+很容易支持垂直拆分侧面。我们现在更新顶部的高度，而不是更新左侧的宽度：
+
+```js
+const prevSibling = resizer.previousElementSibling
+let prevSiblingHeight = 0
+
+const mouseDownHandler = function (e) {
+  const rect = prevSibling.getBoundingClientRect()
+  prevSiblingHeight = rect.height
+}
+
+const mouseMoveHandler = function (e) {
+  const h =
+    ((prevSiblingHeight + dy) * 100) /
+    resizer.parentNode.getBoundingClientRect().height
+  prevSibling.style.height = `${h}%`
+}
+```
+
+当用户移动大小调整器元素时，我们也会更改光标：
+
+```js
+const mouseMoveHandler = function (e) {
+  // ...
+  resizer.style.cursor = 'row-resize'
+  document.body.style.cursor = 'row-resize'
+}
+```
+
+## 支持两个方向
+
+假设右侧希望拆分为两个可调整大小的元素。
+
+我们目前有两个 `resizer` 元素。为了指示每个缩放器的拆分方向，我们添加了一个自定义属性 `data-direction`：
+
+```html
+<div style="display: flex">
+  <div>Left</div>
+  <div class="resizer" data-direction="horizontal"></div>
+  <div style="display: flex; flex: 1 1 0%; flex-direction: column">
+    <div>Top</div>
+    <div class="resizer" data-direction="vertical"></div>
+    <div style="flex: 1 1 0%">Bottom</div>
+  </div>
+</div>
+```
+
+稍后，我们可以从 `resizer` 元素中检索属性：
+
+```js
+const direction = resizer.getAttribute('data-direction') || 'horizontal'
+```
+
+设置前一个兄弟的宽度或高度的逻辑取决于方向：
+
+```js
+const mouseMoveHandler = function (e) {
+  switch (direction) {
+    case 'vertical':
+      const h =
+        ((prevSiblingHeight + dy) * 100) /
+        resizer.parentNode.getBoundingClientRect().height
+      prevSibling.style.height = `${h}%`
+      break
+    case 'horizontal':
+    default:
+      const w =
+        ((prevSiblingWidth + dx) * 100) /
+        resizer.parentNode.getBoundingClientRect().width
+      prevSibling.style.width = `${w}%`
+      break
+  }
+
+  const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize'
+  resizer.style.cursor = cursor
+  document.body.style.cursor = cursor
+
+  // ...
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/wveVaVp)
diff --git "a/JavaScript/\345\210\266\344\275\234\344\270\200\344\270\252\345\217\257\350\260\203\346\225\264\345\244\247\345\260\217\347\232\204\345\205\203\347\264\240.md" "b/JavaScript/\345\210\266\344\275\234\344\270\200\344\270\252\345\217\257\350\260\203\346\225\264\345\244\247\345\260\217\347\232\204\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..d9b2ee3
--- /dev/null
+++ "b/JavaScript/\345\210\266\344\275\234\344\270\200\344\270\252\345\217\257\350\260\203\346\225\264\345\244\247\345\260\217\347\232\204\345\205\203\347\264\240.md"
@@ -0,0 +1,109 @@
+# 制作一个可调整大小的元素
+
+假设我们要将以下元素变成可拖动元素：
+
+```html
+<div id="resizeMe" class="resizable">Resize me</div>
+```
+
+首先，我们需要准备一些指示元素可调整大小的元素。它们绝对放置在原始元素的四个侧面。
+
+为了演示简单，这里只准备了两个元素，分别放在右侧和底部：
+
+```html
+<div id="resizeMe" class="resizable">
+  Resize me
+  <div class="resizer resizer-r"></div>
+  <div class="resizer resizer-b"></div>
+</div>
+```
+
+以下是布局的基本样式：
+
+```css
+.resizer {
+  /* 所有 resizer 都绝对位于元素内部 */
+  position: absolute;
+}
+
+/* 放在右边 */
+.resizer-r {
+  top: 0;
+  right: 0;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+/* 放置在底部 */
+.resizer-b {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 5px;
+  cursor: row-resize;
+}
+```
+
+为了使元素可调整大小，我们将处理三个事件：
+
+- 在 `resizer` 上使用 `mousedown` — 跟踪鼠标的当前位置和原始元素的尺寸
+- 在 `document` 上使用 `mousemove` — 计算鼠标移动了多远，并调整元素的尺寸
+- 在 `document` 上使用 `mouseupon` — 删除 `document` 上的事件处理程序
+
+```js
+const ele = document.getElementById('resizeMe')
+
+// 鼠标当前位置
+let x = 0
+let y = 0
+
+// 元素的维度
+let w = 0
+let h = 0
+
+// 处理鼠标按下事件
+// 当用户拖动 resizer 时触发
+const mouseDownHandler = function (e) {
+  // 获取当前鼠标位置
+  x = e.clientX
+  y = e.clientY
+
+  // 计算元素的维度
+  const styles = window.getComputedStyle(ele)
+  w = parseInt(styles.width, 10)
+  h = parseInt(styles.height, 10)
+
+  // 将监听器附加到 document
+  document.addEventListener('mousemove', mouseMoveHandler)
+  document.addEventListener('mouseup', mouseUpHandler)
+}
+
+const mouseMoveHandler = function (e) {
+  // 鼠标移动了多远
+  const dx = e.clientX - x
+  const dy = e.clientY - y
+
+  // 调整元素的尺寸
+  ele.style.width = `${w + dx}px`
+  ele.style.height = `${h + dy}px`
+}
+
+const mouseUpHandler = function () {
+  // 移除 mousemove 和 mouseup 的处理程序
+  document.removeEventListener('mousemove', mouseMoveHandler)
+  document.removeEventListener('mouseup', mouseUpHandler)
+}
+```
+
+所有的事件处理程序都准备好了。最后，我们将 `mousedown` 事件处理程序附加到所有调整器：
+
+```js
+const resizers = ele.querySelectorAll('.resizer')
+
+;[].forEach.call(resizers, (resizer) => {
+  resizer.addEventListener('mousedown', mouseDownHandler)
+})
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/gOepYZQ)
diff --git "a/JavaScript/\345\210\266\344\275\234\345\217\257\346\213\226\345\212\250\345\205\203\347\264\240.md" "b/JavaScript/\345\210\266\344\275\234\345\217\257\346\213\226\345\212\250\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..94861ac
--- /dev/null
+++ "b/JavaScript/\345\210\266\344\275\234\345\217\257\346\213\226\345\212\250\345\205\203\347\264\240.md"
@@ -0,0 +1,73 @@
+# 制作可拖动元素
+
+假设我们要将以下元素变成可拖动元素：
+
+```html
+<div id="dragMe" class="draggable">Drag me</div>
+```
+
+该元素需要具有以下样式：
+
+```css
+.draggable {
+  /* 指示元素可拖动 */
+  cursor: move;
+
+  /* 绝对定位 */
+  position: absolute;
+
+  /* 不允许选择里面的内容 */
+  user-select: none;
+}
+```
+
+为了使其可拖动，我们需要处理三个事件：
+
+- `mousedown`（在元素上）：跟踪鼠标的当前位置
+- `mousemove`（在 `document` 上）：计算鼠标移动了多远，并确定元素的位置
+- `mouseup`（在 `document` 上）：删除 `document` 上的事件处理程序
+
+```js
+// 鼠标当前位置
+let x = 0
+let y = 0
+
+// 查询元素
+const ele = document.getElementById('dragMe')
+
+// 处理鼠标按下事件
+// 当用户拖动元素时触发
+const mouseDownHandler = function (e) {
+  // 获取当前鼠标位置
+  x = e.clientX
+  y = e.clientY
+
+  // 将监听器附加到 document
+  document.addEventListener('mousemove', mouseMoveHandler)
+  document.addEventListener('mouseup', mouseUpHandler)
+}
+
+const mouseMoveHandler = function (e) {
+  // 鼠标移动了多远
+  const dx = e.clientX - x
+  const dy = e.clientY - y
+
+  // 设置元素的位置
+  ele.style.top = `${ele.offsetTop + dy}px`
+  ele.style.left = `${ele.offsetLeft + dx}px`
+
+  // 重新分配鼠标位置
+  x = e.clientX
+  y = e.clientY
+}
+
+const mouseUpHandler = function () {
+  // 移除 mousemove 和 mouseup 的处理程序
+  document.removeEventListener('mousemove', mouseMoveHandler)
+  document.removeEventListener('mouseup', mouseUpHandler)
+}
+
+ele.addEventListener('mousedown', mouseDownHandler)
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/NWvpVKJ)
diff --git "a/JavaScript/\345\211\215\347\253\257\346\226\207\344\273\266\344\270\212\344\274\240.md" "b/JavaScript/\345\211\215\347\253\257\346\226\207\344\273\266\344\270\212\344\274\240.md"
new file mode 100644
index 0000000..596b436
--- /dev/null
+++ "b/JavaScript/\345\211\215\347\253\257\346\226\207\344\273\266\344\270\212\344\274\240.md"
@@ -0,0 +1,243 @@
+# 前端文件上传
+
+## 单文件上传
+
+文件上传的传统形式，是使用表单元素 `file`：
+
+```html
+<input type="file" id="file-uploader" />
+```
+
+你可以添加 `change` 事件监听器读取 `event.target.files` 文件对象。
+
+```js
+const fileUploader = document.getElementById('file-uploader')
+fileUploader.addEventListener('change', (e) => {
+  const files = e.target.files
+  console.log('files', files)
+})
+```
+
+## 多文件上传
+
+使用 `multiple` 属性：
+
+```html
+<input type="file" id="file-uploader" multiple />
+```
+
+## 文件元数据
+
+在成功上传文件内容后，您可能需要显示该文件内容。对于图片，如果我们在上传后不立即将上传的图片显示给用户，则会感到困惑。
+
+每当上传文件时，`File` 对象都会包含元数据信息，如文件名称、大小、上次更新时间、类型等。此信息可用于进一步验证和决策。
+
+```js
+const fileUploader = document.getElementById('file-uploader')
+
+// 监听更改事件并读取元数据
+fileUploader.addEventListener('change', (e) => {
+  // 获取文件列表数组
+  const files = e.target.files
+
+  // 循环浏览文件并获取元数据
+  for (const file of files) {
+    const name = file.name
+    const type = file.type ? file.type : 'NA'
+    const size = file.size
+    const lastModified = file.lastModified
+    console.log({ file, name, type, size, lastModified })
+  }
+})
+```
+
+## 上传前预览图像
+
+我们准备一个上传文件控件，并为预览所选文件准备 `img` 元素，结构如下：
+
+```html
+<input type="file" id="fileInput" />
+
+<img id="preview" />
+```
+
+`getElementById()` 方法可以获取这两个元素：
+
+```js
+const fileEle = document.getElementById('fileInput')
+const previewEle = document.getElementById('preview')
+```
+
+### 使用 `URL.createObjectURL()` 方法
+
+`URL.createObjectURL()` 方法包含一个表示参数中给出的对象的 URL。这个新的 URL 对象表示指定的 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象或 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 对象。
+
+```js
+fileEle.addEventListener('change', function (e) {
+  // 获取所选文件
+  const file = e.target.files[0]
+
+  // 创建引用该文件的新 URL
+  const url = URL.createObjectURL(file)
+
+  // 设置预览元素的源
+  previewEle.src = url
+})
+```
+
+> 推荐：[URL 对象](https://github.com/lio-zero/blog/blob/main/Web%20API/URL%20%E5%AF%B9%E8%B1%A1.md)
+
+### 使用 FileReader 的 `readAsDataURL()` 方法
+
+- 使用 [`FileReader`](http://www.w3.org/TR/FileAPI/#FileReader-interface) 对象将文件转换为二进制字符串。然后添加 `load` 事件监听器，以获得成功文件上传的二进制字符串。
+- `FileReader.readAsDataURL()` 方法用于读取指定的 `Blob` 或 `File`对象。
+
+```js
+// 获取 FileReader 的实例
+const reader = new FileReader()
+
+fileUploader.addEventListener('change', (e) => {
+  const files = e.target.files
+  const file = files[0]
+
+  // 上传后获取文件对象，以 URL 二进制字符串的形式读取数据
+  reader.readAsDataURL(file)
+
+  // 加载后，对字符串进行处理
+  reader.addEventListener('load', (e) => {
+    // 设置预览元素的源
+    previewEle.src = reader.result
+  })
+})
+```
+
+## `accept` 属性
+
+使用 `accept` 属性来限制要上传的文件类型。
+
+```html
+<input type="file" id="file-uploader" accept=".jpg, .png" multiple />
+```
+
+上面示例中，浏览器将只允许具有 `.jpg` 和 `.png` 的文件类型。
+
+## 验证文件大小
+
+我们读取了文件的大小元数据，可以使用它进行文件大小验证。您可以允许用户上传高达 1MB 的图像文件。
+
+```js
+// 文件上载更改事件的监听器
+fileUploader.addEventListener('change', (event) => {
+  // 读取文件大小
+  const file = event.target.files[0]
+  const size = file.size
+
+  let msg = ''
+
+  // 检查文件大小是否大于 1MB，提示对应消息。
+  if (size > 1024 * 1024) {
+    msg = `<span style="color: red;">允许的文件大小为 1MB。您尝试上载的文件属于${returnFileSize(
+      size
+    )}</span>`
+  } else {
+    msg = `<span style="color: green;"> ${returnFileSize(
+      size
+    )} 文件已成功上载。 </span>`
+  }
+
+  // 向用户显示消息
+  feedback.innerHTML = msg
+})
+```
+
+## 显示文件上传进度
+
+更好的可用性是让用户了解文件上传进度。XMLHttpRequest 第二版还定义了一个 [`progress` 事件](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress)，可以用来制作进度条。
+
+先在页面中放置一个 `progress` 标签
+
+```html
+<label id="progress-label" for="progress" />
+
+<progress id="progress" value="0" max="100" value="0">0</progress>
+```
+
+定义 `progress` 事件的回调函数
+
+```js
+const reader = new FileReader()
+
+reader.addEventListener('progress', (e) => {
+  if (e.loaded && e.total) {
+    // 计算完成百分比
+    const percent = (e.loaded / e.total) * 100
+    // 将值设置为进度组件
+    progress.value = percent
+  }
+})
+```
+
+## 上传目录
+
+有一个非标准属性 `webkitdirectory`，使我们能够上传整个目录。
+
+> 虽然最初仅针对基于 WebKit 的浏览器实施，但 WebkitDirectory 在微软 Edge 以及 Firefox 50 及以后也可用。然而，即使它有相对广泛的支持，它仍然不是标准的，不应该使用，除非你别无选择。
+
+```html
+<input type="file" id="file-uploader" webkitdirectory />
+```
+
+## 拖放上传
+
+主要的 JS 如下：
+
+```js
+const dropZone = document.getElementById('drop-zone')
+const content = document.getElementById('content')
+
+dropZone.addEventListener('dragover', (event) => {
+  event.stopPropagation()
+  event.preventDefault()
+  event.dataTransfer.dropEffect = 'copy'
+})
+
+dropZone.addEventListener('drop', (event) => {
+  // 获取文件
+  const files = event.dataTransfer.files
+  // ..
+})
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/vYRPwpz)
+
+## 用对象处理文件
+
+使用 `URL.createObjectURL()` 方法从文件创建一个唯一的 URL。使用 `URL.revokeObjectURL()` 方法释放它。
+
+> DOM 和 `URL.createObjectURL()` 和 `URL.revokeObjectURL()` 方法允许您创建简单的 URL 字符串，可用于引用任何可以使用 DOM 文件对象引用的数据，包括用户计算机上的本地文件。
+
+示例：
+
+```html
+<div>
+  <h1>使用 Object URL</h1>
+  <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" />
+  <div id="image-grid"></div>
+</div>
+```
+
+```js
+const fileUploader = document.getElementById('file-uploader')
+const reader = new FileReader()
+const imageGrid = document.getElementById('image-grid')
+
+fileUploader.addEventListener('change', (event) => {
+  const files = event.target.files
+  const file = files[0]
+
+  const img = document.createElement('img')
+  imageGrid.appendChild(img)
+  img.src = URL.createObjectURL(file)
+  img.alt = file.name
+})
+```
diff --git "a/JavaScript/\345\212\250\346\200\201\345\212\240\350\275\275\350\204\232\346\234\254\346\226\207\344\273\266.md" "b/JavaScript/\345\212\250\346\200\201\345\212\240\350\275\275\350\204\232\346\234\254\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..64265f7
--- /dev/null
+++ "b/JavaScript/\345\212\250\346\200\201\345\212\240\350\275\275\350\204\232\346\234\254\346\226\207\344\273\266.md"
@@ -0,0 +1,67 @@
+# 动态加载脚本文件
+
+要使用 JavaScript 动态加载脚本文件，基本步骤如下：
+
+- 创建 `script` 元素
+- 将 `script` 元素的 `src` 属性设置为指向要加载的文件
+- 将 `script` 元素添加到 DOM
+
+```js
+let myScript = document.createElement('script')
+myScript.setAttribute('src', '/path/to/js/file.js')
+// myScript.src='/path/to/js/file.js'
+document.body.appendChild(myScript)
+```
+
+- `myScript` 变量存储对新创建的脚本元素的引用。
+- `setAttribute` 方法允许我们为要加载的脚本设置 `src` 值。
+- 最后，我们通过 `appendChild` 将 `script` 元素添加到 `body` 元素的底部。
+
+下面是一些常见的场景。
+
+## 先运行动态加载的脚本
+
+在 `body` 元素的底部添加 `script` 元素意味着我们的页面将首先渲染，而不会被 JavaScript 阻止加载和执行。这通常是我们想要的正确行为。现在，在某些情况下，您希望 JavaScript 先于页面可能执行的任何操作运行。为了处理这些情况，我们需要调整代码。
+
+```js
+let myScript = document.createElement('script')
+myScript.setAttribute('src', './index.js')
+myScript.setAttribute('async', 'false')
+
+let head = document.head
+head.insertBefore(myScript, head.firstElementChild)
+```
+
+代码中有两个新特性，可以确保在渲染页面上的任何其他内容之前加载并运行外部脚本文件：
+
+- 我们首先将 `script` 元素的 `async` 属性设置为 `false`。为什么呢？这是因为默认情况下，动态加载的脚本文件是异步加载的。我们想要显式地重写默认行为。
+- 接下来，我们确保在加载页面其余部分之前加载脚本。在 `head` 元素的顶部添加 `script` 元素是确保它在页面可能达到的任何其他内容之前运行的最佳位置。
+
+## 脚本文件加载后运行相关代码
+
+加载一个外部脚本文件，然后立即调用一个函数（或者依赖于加载的脚本中的某些内容）是很常见的。例如：
+
+```html
+<script src="./api.js"></script>
+<script>
+  getArticleDetail({ id: '1' })
+</script>
+```
+
+第一个 `script` 元素加载 **api.js** 。第二个 `script` 元素调用依赖于前面的 `script` 元素加载的 **api.js** 的内容。所有这些都能正常工作，因为浏览器能很自然地处理了这个场景。
+
+对于动态加载的脚本文件，如果想要类似行为，我们需要额外添加 `load` 事件来监听我们的 `script`，一旦监听到，就调用相关的代码：
+
+```js
+let myScript = document.createElement('script')
+myScript.setAttribute('src', './index.js')
+document.body.appendChild(myScript)
+
+myScript.addEventListener('load', scriptLoaded)
+
+function scriptLoaded() {
+  console.log('Hi')
+}
+```
+
+当加载完 `index.js` 并执行后，`load` 事件将被触发，调用 `scriptLoaded` 事件处理程序。
diff --git "a/JavaScript/\345\214\271\351\205\215\346\261\211\345\255\227.md" "b/JavaScript/\345\214\271\351\205\215\346\261\211\345\255\227.md"
new file mode 100644
index 0000000..20c2f48
--- /dev/null
+++ "b/JavaScript/\345\214\271\351\205\215\346\261\211\345\255\227.md"
@@ -0,0 +1,20 @@
+# 匹配汉字
+
+我们可以使用正则来检测字符串是否包含汉字。
+
+下面是一段匹配汉字表达式：
+
+```js
+;/[\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|[\uD86A-\uD86C][\uDC00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]/
+```
+
+它可以正常使用，但不够优雅。幸运的是，有一个更简单的解决方案：
+
+```js
+let pattern = /\p{Script=Han}/u
+!!'你好'.match(pattern) // true
+```
+
+## 更多资料
+
+[JavaScript unicode string, chinese character but no punctuation](https://stackoverflow.com/questions/21109011/javascript-unicode-string-chinese-character-but-no-punctuation)
diff --git "a/JavaScript/\345\217\226\346\266\210\345\267\262\345\217\221\351\200\201\347\232\204\347\275\221\347\273\234\350\257\267\346\261\202.md" "b/JavaScript/\345\217\226\346\266\210\345\267\262\345\217\221\351\200\201\347\232\204\347\275\221\347\273\234\350\257\267\346\261\202.md"
new file mode 100644
index 0000000..5b20709
--- /dev/null
+++ "b/JavaScript/\345\217\226\346\266\210\345\267\262\345\217\221\351\200\201\347\232\204\347\275\221\347\273\234\350\257\267\346\261\202.md"
@@ -0,0 +1,93 @@
+# 取消已发送的网络请求
+
+根据发送网络请求的 API 不同，取消方法不同。
+
+常用的网络请求有如下三种：
+
+- `XHR`
+- `Fetch`
+- `Axios`
+
+根据不同的网络请求方式，有对应不同的取消方法，下面来看看如何操作。
+
+## XHR 使用 `xhr.abort()`
+
+如果使用 `XMLHttpRequest` 发送请求可以使用 `XMLHttpRequest.abort()`：
+
+```js
+const xhr = new XMLHttpRequest()
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true)
+xhr.send()
+
+// 取消发送请求
+xhr.abort()
+```
+
+## Fetch 使用 `AbortController`
+
+使用 `fetch` 发送请求可以使用 `AbortController`。
+
+> [`AbortController`](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController) 不仅可以取消 Fetch 请求发送，同样也可以取消事件的监听（通过 `addEventListener` 的第三个参数 `signal` 控制）。
+
+- 发送请求时，使用一个 `signal` 选项控制 fetch 请求
+- 使用 `abort()` 方法取消请求的发送
+
+```js
+const controller = new AbortController()
+const signal = controller.signal
+
+// 调用 abort 时触发
+signal.addEventListener('abort', () => alert('abort!'))
+
+fetch('https://jsonplaceholder.typicode.com/todos/1', {
+  signal
+})
+  .then((response) => response.json())
+  .then((json) => console.log(json))
+
+controller.abort()
+
+// 事件触发，signal.aborted 变为 true
+alert(signal.aborted) // true
+```
+
+## Axios 使用 `CancelToken`
+
+Axios 中通过 `CancelToken` 取消请求发送：
+
+```js
+const CancelToken = axios.CancelToken
+const source = CancelToken.source()
+
+axios.get('https://jsonplaceholder.typicode.com/todos/1', {
+  cancelToken: source.token
+})
+
+// 取消请求（消息参数是可选的）
+source.cancel('用户已取消操作')
+```
+
+也可以通过调用 `CancelToken` 的构造函数来创建 `CancelToken`：
+
+```js
+const CancelToken = axios.CancelToken
+let cancel
+
+axios.get('https://jsonplaceholder.typicode.com/todos/1', {
+  cancelToken: new CancelToken((c) => {
+    cancel = c
+  })
+})
+
+cancel() // 取消请求
+```
+
+对于浏览器环境，Axios 底层使用 `XMLHttpRequest` 对象来发起 HTTP 请求。它使用基于 XHR 的 `xhr.abort()` 方法取消请求，详见[源码](https://github.com/axios/axios/blob/v0.21.1/lib/adapters/xhr.js#L165)。
+
+对于 Node.js 环境，Axios 底层使用 `HTTP/HTTPS` 模块对象来发起 HTTP 请求。使用 `request.abort()`，详见[源码](https://github.com/axios/axios/blob/v0.21.1/lib/adapters/http.js#L289)。
+
+## 更多资料
+
+- [Fetch：中止（Abort）](https://zh.javascript.info/fetch-abort)
+- [XMLHttpRequest](https://zh.javascript.info/xmlhttprequest)
diff --git "a/JavaScript/\345\217\230\351\207\217\350\265\213\345\200\274\344\270\216\345\216\237\345\247\213\345\257\271\350\261\241\345\217\257\345\217\230\346\200\247.md" "b/JavaScript/\345\217\230\351\207\217\350\265\213\345\200\274\344\270\216\345\216\237\345\247\213\345\257\271\350\261\241\345\217\257\345\217\230\346\200\247.md"
new file mode 100644
index 0000000..45eaf05
--- /dev/null
+++ "b/JavaScript/\345\217\230\351\207\217\350\265\213\345\200\274\344\270\216\345\216\237\345\247\213\345\257\271\350\261\241\345\217\257\345\217\230\346\200\247.md"
@@ -0,0 +1,238 @@
+# 变量赋值与原始对象可变性
+
+如果您不熟悉 JavaScript 变量赋值与原始/对象可变性的工作原理，您可能会发现自己遇到无法解释的 bug。下面我们来看看它到底如何工作。
+
+## JavaScript 数据类型
+
+[JavaScript 数据类型](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)分为基本数据类型（值/原始类型），引用（对象）数据类型。
+
+- JavaScript 有七种基本数据类型：`String`、`Number`、`Boolean`、`Null`、`Undefined`、`BigInt`（ES10 新增）、`Symbol`（ES6 新增）
+- JavaScript 还有一种对象数据类型：`Object`。其中包括最为熟知 `Array`、`Math`、`Function` 等。
+
+## 赋值、重新赋值和突变
+
+赋值、重新赋值和突变是 JavaScript 中需要了解和区分的重要概念。我们来看几个例子，理解它们。
+
+### 赋值
+
+```js
+let name = 'IU'
+```
+
+**从右到左**分析该表达式：
+
+- 我们创建字符串 `"IU"`
+- 我们创建变量 `name`
+- 我们为变量 `name` 指定一个对先前创建的字符串的引用
+
+因此，赋值可以看作是创建变量名并使该变量引用数据（无论是原始还是对象数据类型）的过程。
+
+### 重新赋值
+
+让我们扩展这个例子。首先，我们将给变量 `name` 分配一个对字符串 `"IU"` 的引用，然后我们将**重新赋值**该变量给一个对字符串 `"UI"` 的引用：
+
+```js
+let name = 'IU'
+name = 'UI'
+```
+
+**分析**：
+
+1. 我们创建字符串 `"IU"`
+2. 我们创建变量 `name`
+3. 我们为变量 `name` 指定一个对先前创建的字符串的引用
+4. 我们创建字符串 `"UI"`
+5. 我们**重新赋值**变量 `name` 对字符串 `"UI"` 的引用
+
+### 突变（Mutation）
+
+突变是改变数据的行为。值得注意的是，到目前为止，在我们的例子中，我们没有改变任何数据。
+
+#### 原始值突变
+
+事实上，在上一个例子中，即使我们希望原始值不能突变（它们是 Immutable -> 不可变的），我们也无法改变任何数据。
+
+让我们试着改变一个字符串，但失败的例子：
+
+```js
+let name = 'IU'
+name[0] = 'U'
+console.log(name) // "IU"
+```
+
+显然，我们的突变尝试失败了。这是意料之中的：我们不能简单地改变原始数据类型。
+
+> **扩展**：像 React 库，其设计理念便是遵从 Immutable 的设计思想，永远不再原对象上修改属性。
+
+#### 对象突变
+
+对于对象来说，我们可以简单的改变值：
+
+```js
+let user = {
+  name: 'IU'
+}
+user.name = 'UI'
+console.log(user) // { name: "UI" }
+```
+
+可以看到，成功的改变了值。但重要的是要记住，我们从来没有重新赋值过 `user` 变量，但是我们确实改变了它所指向的对象。
+
+下面来看看为什么理解这些是很重要，我们来看看两个例子。
+
+### 示例一：原始值
+
+```js
+let name = 'IU'
+let name2 = name
+name2 = 'UI'
+console.log(name, name2) // "IU" "UI"
+```
+
+**分析**：
+
+1. 我们创建了字符串 `"IU"`
+2. 我们创建变量 `name` 并给它赋一个引用给字符串 `"IU"`
+3. 我们创建了变量 `name2` 并给字符串 `"IU"` 赋了一个引用
+4. 我们创建了字符串 `"UI"`，并**重新赋值** `name2` 来引用该字符串
+5. 当我们 `console.log` 打印 `name` 和 `name2` 变量时，我们发现 `name` 仍然引用 `"IU"` '，`name2` 引用字符串 `"UI"`
+
+### 示例二：对象
+
+```js
+let user = { name: 'UI' }
+let user2 = user
+user2.name = 'IU'
+console.log(user, user2)
+// { name: "IU" }
+// { name: "IU" }
+```
+
+**分析**：
+
+1. 我们创建对象 `{name: "UI"}`
+2. 我们创建 `user` 变量，并将其引用赋给已创建的对象
+3. 我们创建了 `user2` 变量，并将它设置为 `user`，它引用之前创建的对象。(**注意**：`user2` 现在引用的是 `user` 所引用的同一个对象！)
+4. 我们创建字符串 `"IU"`，并通过重新分配 `name` 属性来引用 `"IU"` 来改变对象。
+5. 当我们使用 `console.log` 打印 `user` 和 `user2` 时，我们注意到内存中两个变量所引用的对象已经发生了变化。
+
+数组也是如此，这里我们不在过多介绍。
+
+## 真正的区别：可变性
+
+如上所述，基本数据类型是不可变的。这意味着我们不必担心两个变量是否指向内存中的同一个原始值：哪个原始值不会改变。充其量，我们可以**重新分配**一个变量来指向其他数据，但这不会影响其他变量。
+
+另一方面，对象是可变的。因此，我们必须记住，多个变量可能指向内存中的同一个对象。**突变**这些变量中的一个是错误的行为，你正在突变它所引用的对象，这将反映在引用同一对象的任何其他变量中。
+
+## 如何防止这种情况发生?
+
+在许多情况下，您不希望两个变量引用同一个对象。防止这种情况的最好方法是在赋值时**创建对象的一个副本**。
+
+有多种方法可以创建对象的副本，这里使用 `Object.assign()` 方法或扩展运算符（`...`）。
+
+```js
+let user = { name: 'IU' }
+
+// Object.assign
+let user2 = Object.assign({}, user)
+
+// 扩展运算符
+let user3 = { ...user }
+user2.name = 'LAY'
+user3.name = 'KAI'
+console.log(user, user2, user3)
+// { name: "IU" }
+// { name: "LAY" }
+// { name: "KAI" }
+```
+
+可以看到，我们成功的创建了对象的副本。**但需要注意的是**：这并不是一种有效的方法，因为我们只是创建 `user` 对象的**浅拷贝**。
+
+## 浅拷贝
+
+如果我们的对象中嵌套了对象，那么像 `object.assign` 和扩展运算符（`...`）这样的浅层复制机制将只创建根级对象的副本，但深层对象仍将被共享。举个例子：
+
+```js
+let user = {
+  name: 'IU',
+  friend: {
+    name: 'LAY',
+    age: 18
+  }
+}
+
+let user2 = { ...user }
+user2.name = 'UI'
+user2.friend.name = 'KAI'
+user2.friend.age = 20
+console.log(user)
+
+console.log(JSON.stringify(user, null, 2))
+console.log(JSON.stringify(user2, null, 2))
+/*
+{
+  "name": "IU",
+  "friend": {
+    "name": "KAI",
+    "age": 20
+  }
+}
+
+{
+  "name": "UI",
+  "friend": {
+    "name": "KAI",
+    "age": 20
+  }
+}
+*/
+```
+
+因此，我们复制顶级属性，但仍在共享对对象树中更深层对象的引用。如果这些较深的对象发生了突变，则在访问 `user` 或 `user2` 变量时会反映出来。
+
+这时，我们就需要深度创建一个对象的副本。
+
+## 深拷贝
+
+有许多方法可以深拷贝 JavaScript 对象。这里我将介绍一个最简单的方法：`JSON.stringify/JSON.parse`。
+
+如果对象足够简单，可以使用 `JSON.stringify` 将其转换为字符串，然后使用 `JSON.parse` 将其转换回 JavaScript 对象。
+
+```js
+let user = {
+  name: 'IU',
+  friend: {
+    name: 'LAY',
+    age: 18
+  }
+}
+
+let user2 = JSON.parse(JSON.stringify(user))
+
+user2.friend.age = 19
+
+console.log(JSON.stringify(user, null, 2))
+console.log(JSON.stringify(user2, null, 2))
+
+/*
+{
+  "name": "IU",
+  "friend": {
+    "name": "LAY",
+    "age": 18
+  }
+}
+
+{
+  "name": "IU",
+  "friend": {
+    "name": "LAY",
+    "age": 19
+  }
+}
+*/
+```
+
+可以看到，我们成功了，但这是有局限性的。如果您的对象有任何不能用 JSON 字符串表示的数据（例如函数），那么这些数据将丢失！
+
+还有其他更好的方法，感兴趣的可以查阅[浅拷贝和深拷贝](https://github.com/lio-zero/blog/blob/main/JavaScript/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D.md)。
diff --git "a/JavaScript/\345\217\252\345\205\201\350\256\270\350\276\223\345\205\245\347\211\271\345\256\232\345\255\227\347\254\246.md" "b/JavaScript/\345\217\252\345\205\201\350\256\270\350\276\223\345\205\245\347\211\271\345\256\232\345\255\227\347\254\246.md"
new file mode 100644
index 0000000..9672468
--- /dev/null
+++ "b/JavaScript/\345\217\252\345\205\201\350\256\270\350\276\223\345\205\245\347\211\271\345\256\232\345\255\227\347\254\246.md"
@@ -0,0 +1,103 @@
+# 只允许输入特定字符
+
+在本例中，我们将强制用户只输入给定集合中的字符。具体来说，本演示中支持的字符包括数字和空格。
+
+以下是一个基本的 `input` 元素：
+
+```html
+<input type="text" id="input" />
+```
+
+## 处理事件
+
+通过处理 `keypress` 事件，我们可以防止用户输入数字和空格以外的字符：
+
+```js
+const ele = document.getElementById('input')
+
+ele.addEventListener('keypress', function (e) {
+  // 获取按键代码
+  const key = e.which || e.keyCode
+
+  // 0, 1, ..., 9 的键码分别为 48, 49, ..., 57
+  // 空格键码为 32
+  if (key != 32 && (key < 48 || key > 57)) {
+    // 防止默认动作
+    e.preventDefault()
+  }
+})
+```
+
+它看起来不错，但还不够，因为用户仍然可以将不支持的字符粘贴或拖动到输入中。这些情况可由 `input` 事件处理：
+
+```js
+// 跟踪当前值
+let currentValue = ele.value || ''
+
+ele.addEventListener('input', function (e) {
+  const target = e.target
+
+  // 如果用户输入支持的字符（数字或空格）
+  /^[0-9\s]*$/.test(target.value)
+    ? (currentValue = target.value) // 备份当前值
+    : (target.value = currentValue) // 否则，恢复值
+    // 请注意，在这种情况下，e.preventDefault() 没有帮助
+})
+```
+
+这里我们检查该值是否与包含数字和空格字符的正则表达式 `/^[0-9\s]*$/` 匹配。
+
+它修复了用户从键盘 (`Ctrl + V`)、上下文菜单或下拉文本粘贴到输入的情况。
+
+但还有另一个问题。调用 `target.value = currentValue` 会将光标放在输入的末尾。我们必须保持光标的位置。
+
+```js
+// 跟踪当前光标的位置
+const selection = {}
+
+ele.addEventListener('keydown', function (e) {
+  const target = e.target
+  selection = {
+    selectionStart: target.selectionStart,
+    selectionEnd: target.selectionEnd
+  }
+})
+```
+
+当用户更改输入值时，如果该值不受支持，我们将恢复值和所选的位置：
+
+```js
+ele.addEventListener('input', function (e) {
+  const target = e.target
+
+  if (/^[0-9\s]*$/.test(target.value)) {
+    currentValue = target.value
+  } else {
+    // 用户输入不支持的字符，恢复值和所选内容
+    target.value = currentValue
+    target.setSelectionRange(selection.selectionStart, selection.selectionEnd)
+  }
+})
+```
+
+正如您在最后的演示中看到的那样，我们可以将跟踪的属性（`value`、`selectionStart` 和 `selectionEnd`）组合到一个变量中。
+
+> [查看效果](https://codepen.io/lio-zero/pen/vYJeKEd)
+
+## 使用特殊 `input` 类型
+
+我们可以使用特殊的 HTML 5 `input` 类型来服务特定的用例：
+
+| `INPUT`                   | 描述                   |
+| ------------------------- | ---------------------- |
+| `<input type="color" />`  | 让用户指定颜色         |
+| `<input type="date" />`   | 让用户输入日期         |
+| `<input type="email" />`  | 让用户输入电子邮件地址 |
+| `<input type="number" />` | 只允许用户输入数字     |
+| `<input type="tel" />`    | 让用户输入电话号码     |
+| `<input type="time" />`   | 让用户输入时间         |
+| `<input type="url" />`    | 让用户输入 URL         |
+
+您可以[在此处](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types)查看更多内置类型。
+
+这里注意一下，本示例不能使用 `<input type="number" />`，因为它不允许输入空格。
diff --git "a/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md" "b/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md"
new file mode 100644
index 0000000..6b996e2
--- /dev/null
+++ "b/JavaScript/\345\233\276\347\211\207\346\207\222\345\212\240\350\275\275.md"
@@ -0,0 +1,140 @@
+# 图片懒加载
+
+懒加载，通常是延迟加载初始视口外的图像，直到我们滚动页面，达到图像与底部视口的交汇处才开始加载图像。
+
+我们需要做的是**判断图片是否出现在当前视口，然后控制图片的加载**。
+
+有几种实现方式：
+
+- `scroll` 和位置计算
+- `getBoundingClientRect API`
+- `IntersectionObserver API`
+- `loading` 属性
+- 第三方库（无非是上述方法的实现）
+
+## scroll 和位置计算
+
+我们需要使用 `clientTop`、`offsetTop`、`clientHeight` 和 `scrollTop` 计算图片位置。
+
+> 关于这些属性的相关内容请查看[元素大小和滚动](https://zh.javascript.info/size-and-scroll#offsetwidthheight)。
+
+大致的代码如下：
+
+```js
+let imgs = document.querySelectorAll('img')
+
+function lazyload() {
+  const clientH = document.documentElement.clientHeight
+  const clientT = document.documentElement.scrollTop || document.body.scrollTop
+  for (let i = 0; i < imgs.length; i++) {
+    if (clientH + clientT > imgs[i].offsetTop && !imgs[i].src) {
+      imgs[i].src = imgs[i].getAttribute('data-src')
+    }
+  }
+}
+```
+
+通过监听 `window.scroll` 滚动事件，滚动时计算图片与视口的位置，为图片的 `src` 赋值即可。
+
+```js
+doucment.addEventListener('scroll', () => {
+  // ...
+})
+```
+
+需要考虑 🤔 的问题，我们每滚动一次页面都会触发多次 `scroll` 滚动事件及其事件处理程序。为了性能考虑，我们为其加一个节流器，这里我们使用 Lodash 库的 [`_.throttle()`](https://lodash.com/docs/4.17.15#throttle) 方便快速开发。
+
+```js
+_.throttle(func, [(wait = 0)], [(options = {})])
+```
+
+## getBoundingClientRect API
+
+为了不那么麻烦的计算元素的位置，浏览器为我们提供了新的 `getBoundingClientRect API`。
+
+> [`Element.getBoundingClientRect()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect) 方法返回元素的大小及其相对于视口的位置。
+
+👇 下图来自 MDN：
+
+![DOMRect 示例图](https://upload-images.jianshu.io/upload_images/18281896-e3ba93318f2551a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+通过 `Element.getBoundingClientRect()` 获取元素相对于浏览器的 `top` 值，与当前可视区高度进行对比（通过 `document.body.clientHeight` 获取），如果小于可视区高度，说明图片进入可视范围，可以加载图像了。
+
+```js
+const viewHeight = document.body.clientHeight
+const rect = item.getBoundingClientRect()
+
+if (rect.bottom >= 0 && rect.top < viewHeight) { ... }
+```
+
+## IntersectionObserver API
+
+> [Intersection Observer API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) 提供了一种异步检测目标元素与祖先元素或 [viewport](https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport) 相交情况变化的方法。
+
+创建一个 `observer` 后需要给定一个目标元素进行观察。
+
+```js
+const target = document.querySelector('.list')
+
+observer.observe(target)
+```
+
+只要目标满足为 IntersectionObserver 指定的阈值，就会调用回调。回调接收 [`IntersectionObserverEntry`](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry) 对象和观察者的列表：
+
+```js
+const callback = (entries, observer) => {
+  entries.forEach((entry) => {
+    // 每个条目描述了一个观察到的目标元素的交点变化：
+    // entry.boundingClientRect
+    // entry.intersectionRatio
+    // entry.intersectionRect
+    // entry.isIntersecting
+    // entry.rootBounds
+    // entry.target
+    // entry.time
+  })
+}
+```
+
+其中，`entry.isIntersecting` 代表目标元素可见：
+
+```js
+const observer = new IntersectionObserver((target) => {
+  // target 为目标元素集合
+  target.forEach((entry) => {
+    if (entry.isIntersecting) {
+      const img = entry.target
+      img.src = img.dataset.src
+      observer.unobserve(img) // 解除观察
+    }
+  })
+})
+
+observer.observe(img)
+```
+
+## loading 属性
+
+只需要为 `img` 加上 `loading=lazy`：
+
+```html
+<img src="/path/to/pic.jpg" loading="lazy" />
+```
+
+使用时，考虑兼容情况。
+
+详细内容查看：
+
+- [使用 loading 属性延迟加载图片](https://github.com/lio-zero/blog/blob/main/HTML/%E4%BD%BF%E7%94%A8%20loading%20%E5%B1%9E%E6%80%A7%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87.md)
+- [Native image lazy-loading for the web!](https://addyosmani.com/blog/lazy-loading/)
+
+## 第三方库
+
+一些第三方库的选择：
+
+- [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload)
+- [lazysizes](https://github.com/aFarkas/lazysizes)
+- [layzr.js](https://github.com/callmecavs/layzr.js)
+- [lozad.js](https://github.com/ApoorvSaxena/lozad.js) 附带 [Lozad.js: Performant Lazy Loading of Images](https://css-tricks.com/lozad-js-performant-lazy-loading-images/)
+- Vue 可以使用 [vue-lazyload](https://github.com/hilongjw/vue-lazyload)
+- React 可以使用 [react-lazyload](https://www.npmjs.com/package/react-lazyload)、[react-intersection-observer](https://www.npmjs.com/package/react-intersection-observer) 或 [react-lazy-load-image-component](https://www.npmjs.com/package/react-lazy-load-image-component)
diff --git "a/JavaScript/\345\234\250\345\210\227\350\241\250\344\270\255\346\213\226\346\224\276\345\205\203\347\264\240.md" "b/JavaScript/\345\234\250\345\210\227\350\241\250\344\270\255\346\213\226\346\224\276\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..b44b3e0
--- /dev/null
+++ "b/JavaScript/\345\234\250\345\210\227\350\241\250\344\270\255\346\213\226\346\224\276\345\205\203\347\264\240.md"
@@ -0,0 +1,197 @@
+# 在列表中拖放元素
+
+在这个例子中，我们将创建一个可排序的列表，其项目可以在其中拖放：
+
+```html
+<div id="list">
+  <div class="draggable">A</div>
+  <div class="draggable">B</div>
+  <div class="draggable">C</div>
+  <div class="draggable">D</div>
+  <div class="draggable">E</div>
+</div>
+```
+
+每个项目都有 `draggable` 指示用户可以拖动它的类：
+
+```css
+.draggable {
+  cursor: move;
+  user-select: none;
+}
+```
+
+## 使项目可拖动
+
+为了使其可拖动，我们需要处理两个事件：
+
+- `mousemove`（在 `document` 上）：计算鼠标移动了多远，并确定元素的位置
+- `mouseup`（在 `document` 上）：删除 `document` 上的事件处理程序
+
+```js
+// 当前拖动项
+let draggingEle
+
+// 鼠标相对于拖动元素的当前位置
+let x = 0
+let y = 0
+
+const mouseDownHandler = function (e) {
+  draggingEle = e.target
+
+  // 计算鼠标位置
+  const rect = draggingEle.getBoundingClientRect()
+  x = e.pageX - rect.left
+  y = e.pageY - rect.top
+
+  // 将监听器附加到 document
+  document.addEventListener('mousemove', mouseMoveHandler)
+  document.addEventListener('mouseup', mouseUpHandler)
+}
+
+const mouseMoveHandler = function (e) {
+  // 设置拖动元素的位置
+  draggingEle.style.position = 'absolute'
+  draggingEle.style.top = `${e.pageY - y}px`
+  draggingEle.style.left = `${e.pageX - x}px`
+}
+```
+
+`mouseup` 事件处理程序会删除拖动的项目，并清理事件处理程序的位置样式：
+
+```js
+const mouseUpHandler = function () {
+  // 移除位置样式
+  draggingEle.style.removeProperty('top')
+  draggingEle.style.removeProperty('left')
+  draggingEle.style.removeProperty('position')
+
+  x = null
+  y = null
+  draggingEle = null
+
+  // 移除 mousemove 和 mouseup 的处理程序
+  document.removeEventListener('mousemove', mouseMoveHandler)
+  document.removeEventListener('mouseup', mouseUpHandler)
+}
+```
+
+### 添加占位符
+
+我们现在有以下几个项目：
+
+```txt
+ABCDE
+```
+
+例如，当我们拖动一个项目 `C` 时，下一个项目（`D`）将向上移动到顶部，并占据拖动元素（`C`）的区域。为了解决这个问题，我们创建了一个动态占位符元素，并将其插入到拖动元素之前。占位符的高度必须与拖动元素的高度相同。
+
+占位符在鼠标移动期间创建一次，因此我们添加一个新标志 `isDraggingStarted` 来跟踪它：
+
+```js
+let placeholder
+let isDraggingStarted = false
+
+const mouseMoveHandler = function (e) {
+  const draggingRect = draggingEle.getBoundingClientRect()
+
+  if (!isDraggingStarted) {
+    // 更新标志
+    isDraggingStarted = true
+
+    // 让占位符占据拖动元素的高度
+    // 所以下一个元素不会向上移动
+    placeholder = document.createElement('div')
+    placeholder.classList.add('placeholder')
+    draggingEle.parentNode.insertBefore(placeholder, draggingEle.nextSibling)
+
+    // 设置占位符的高度
+    placeholder.style.height = `${draggingRect.height}px`
+  }
+
+  // ...
+}
+```
+
+一旦用户放下项目，占位符将被删除：
+
+```js
+const mouseUpHandler = function () {
+  // 移除占位符
+  placeholder && placeholder.parentNode.removeChild(placeholder)
+  // 重置标志
+  isDraggingStarted = false
+
+  // ...
+}
+```
+
+## 确定用户是向上还是向下移动项目
+
+首先，我们需要一个辅助函数来检查一个项目是在另一个项目之上还是之下。
+
+如果 `nodeA` 的水平中心点小于 `nodeB`，则 `nodeA` 被视为与 `nodeB` 相同。节点的中心点可以通过取其顶部和高度的一半之和来计算：
+
+```js
+const isAbove = function (nodeA, nodeB) {
+  // 获取节点的边界矩形
+  const rectA = nodeA.getBoundingClientRect()
+  const rectB = nodeB.getBoundingClientRect()
+
+  return rectA.top + rectA.height / 2 < rectB.top + rectB.height / 2
+}
+```
+
+当用户移动项目时，我们定义上一个和下一个同级项目：
+
+```js
+const mouseMoveHandler = function (e) {
+  const prevEle = draggingEle.previousElementSiblin
+  const nextEle = placeholder.nextElementSibling
+}
+```
+
+如果用户将项目移动到顶部，我们将交换占位符和上一个项目：
+
+```js
+const mouseMoveHandler = function (e) {
+  // ...
+  // 用户将项目移动到顶部
+  if (prevEle && isAbove(draggingEle, prevEle)) {
+    swap(placeholder, draggingEle)
+    swap(placeholder, prevEle)
+    return
+  }
+}
+```
+
+同样，如果我们检测到用户将项目向下移动到底部，我们将交换下一个和拖动项目：
+
+```js
+const mouseMoveHandler = function (e) {
+  // ...
+
+  // 用户将拖动元素移动到底部
+  if (nextEle && isAbove(nextEle, draggingEle)) {
+    swap(nextEle, placeholder)
+    swap(nextEle, draggingEle)
+  }
+}
+```
+
+在这里，`swap` 是一个用于交换两个节点：
+
+```js
+const swap = function (nodeA, nodeB) {
+  const parentA = nodeA.parentNode
+  const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling
+
+  // 将 nodeA 移到 nodeB 之前
+  nodeB.parentNode.insertBefore(nodeA, nodeB)
+
+  // 将 nodeB 移到 nodeA 的兄弟节点之前
+  parentA.insertBefore(nodeB, siblingA)
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/qBXjWQp)
diff --git "a/JavaScript/\345\234\250\345\215\225\345\207\273\344\275\215\347\275\256\346\230\276\347\244\272\350\207\252\345\256\232\344\271\211\344\270\212\344\270\213\346\226\207\350\217\234\345\215\225.md" "b/JavaScript/\345\234\250\345\215\225\345\207\273\344\275\215\347\275\256\346\230\276\347\244\272\350\207\252\345\256\232\344\271\211\344\270\212\344\270\213\346\226\207\350\217\234\345\215\225.md"
new file mode 100644
index 0000000..d7a0574
--- /dev/null
+++ "b/JavaScript/\345\234\250\345\215\225\345\207\273\344\275\215\347\275\256\346\230\276\347\244\272\350\207\252\345\256\232\344\271\211\344\270\212\344\270\213\346\226\207\350\217\234\345\215\225.md"
@@ -0,0 +1,98 @@
+# 在单击位置显示自定义上下文菜单
+
+当用户右键单击页面时，浏览器将显示默认上下文菜单。有时，我们希望用自己的菜单替换默认菜单，允许用户执行其他操作。
+
+这篇文章演示了一个简单的实现。首先，让我们创建一个元素，以显示自定义的上下文菜单元素：
+
+```html
+<div id="element">Right-click me</div>
+
+<ul id="menu">...</menu>
+```
+
+## 防止显示默认上下文菜单
+
+为了做到这一点，我们只需阻止 `contextmenu` 事件的默认操作：
+
+```js
+const ele = document.getElementById('element')
+
+ele.addEventListener('contextmenu', (e) => {
+  e.preventDefault()
+})
+```
+
+## 在单击的位置显示菜单
+
+我们将计算菜单的位置，但首先需要绝对定位到其容器。因此，让我们将元素和菜单放置到位置 `relative` 的容器中：
+
+```html
+<div class="relative">
+  <div id="element">Right-click me</div>
+
+  <ul id="menu" class="absolute hidden">...</menu>
+</div>
+```
+
+`relative`、`absolute` 和 `hidden` 类定义如下:
+
+```css
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.hidden {
+  /* 菜单一开始是隐藏的 */
+  display: none;
+}
+```
+
+现在是设置菜单位置的时候了。可根据鼠标位置计算：
+
+```js
+ele.addEventListener('contextmenu', (e) => {
+  const rect = ele.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const y = e.clientY - rect.top
+
+  // 设置菜单的位置
+  menu.style.top = `${y}px`
+  menu.style.left = `${x}px`
+
+  // 显示菜单
+  menu.classList.remove('hidden')
+})
+```
+
+## 单击外部时关闭菜单
+
+我们可以处理 `document` 的 `click` 事件，并确定用户是否在菜单外单击：
+
+```js
+ele.addEventListener('contextmenu', (e) => {
+  // ...
+  document.addEventListener('click', documentClickHandler)
+})
+
+// 在菜单外部单击时隐藏菜单
+const documentClickHandler = (e) => {
+  const isClickedOutside = !menu.contains(e.target)
+  if (isClickedOutside) {
+    // 隐藏菜单
+    menu.classList.add('hidden')
+
+    // 移除事件处理程序
+    document.removeEventListener('click', documentClickHandler)
+  }
+}
+```
+
+通过添加 `hidden` 类可以隐藏菜单。
+
+更重要的是，`click` 事件处理程序也从 `document` 中删除，因为当菜单隐藏时，我们不需要处理它。
+
+> [查看效果](https://codepen.io/lio-zero/pen/qBjeXzJ)
diff --git "a/JavaScript/\345\234\250\346\265\217\350\247\210\345\231\250\344\270\255\346\210\252\345\261\217.md" "b/JavaScript/\345\234\250\346\265\217\350\247\210\345\231\250\344\270\255\346\210\252\345\261\217.md"
new file mode 100644
index 0000000..346b3b4
--- /dev/null
+++ "b/JavaScript/\345\234\250\346\265\217\350\247\210\345\231\250\344\270\255\346\210\252\345\261\217.md"
@@ -0,0 +1,80 @@
+# 在浏览器中截屏
+
+## html2canvas
+
+最简单的方法是，使用 [html2canvas](https://github.com/niklasvh/html2canvas) 库在浏览器中使用 JS 截取屏幕截图，它可以将 DOM 转换成 `canvas`。
+
+一个简单的示例：
+
+```html
+<button onclick="report()">截图</button>
+<div id="capture" style="padding: 10px; background: #f5da55">
+  <h4 style="color: #000">Hello world!</h4>
+</div>
+<img width="100%" class="screen" />
+<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+```
+
+```js
+function report() {
+  html2canvas(document.body).then((canvas) => {
+    let pngUrl = canvas.toDataURL() // dataURL 格式的 PNG
+    let img = document.querySelector('.screen')
+    img.src = pngUrl
+
+    // 其他操作...
+  })
+}
+```
+
+## screen Capture API
+
+我们可以使用原生的 [screen Capture API](https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API/Using_Screen_Capture) 进行屏幕捕获，使用 `getDisplayMedia()` 方法，以 `canvas` 或 `Blob` 等形式获取屏幕截图。
+
+一个简单的示例：
+
+```html
+<button onclick="report()">截图</button>
+<div id="capture" style="padding: 10px; background: #f5da55">
+  <h4 style="color: #000">Hello world!</h4>
+</div>
+<canvas id="canvas" style="width: 300px"></canvas>
+<img width="300" class="screen" />
+```
+
+```js
+const canvas = document.getElementById('canvas')
+const img = document.querySelector('.screen')
+
+function report() {
+  navigator.mediaDevices
+    .getDisplayMedia()
+    .then((stream) => {
+      let track = stream.getTracks()[0]
+      let capture = new ImageCapture(track)
+      capture.grabFrame().then((bitmap) => {
+        // 停止共享
+        track.stop()
+        console.log(bitmap)
+        // 将 bitmap 绘制到 canvas
+        canvas.width = bitmap.width
+        canvas.height = bitmap.height
+        canvas.getContext('2d').drawImage(bitmap, 0, 0)
+        canvas.toBlob(
+          (blob) => {
+            console.log('output blob:', blob)
+            const screenshotJpegBlob = URL.createObjectURL(blob)
+            img.src = screenshotJpegBlob
+          },
+          'image/jpeg',
+          0.95
+        )
+      })
+    })
+    .catch((e) => console.log(e))
+}
+```
+
+## 更多资料
+
+[Using HTML5/Canvas/JavaScript to take in-browser screenshots](https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots)
diff --git "a/JavaScript/\345\234\250\346\265\217\350\247\210\345\231\250\345\222\214 Node.js \344\270\255\346\233\264\347\262\276\347\241\256\345\234\260\346\265\213\351\207\217\346\211\247\350\241\214\346\227\266\351\227\264.md" "b/JavaScript/\345\234\250\346\265\217\350\247\210\345\231\250\345\222\214 Node.js \344\270\255\346\233\264\347\262\276\347\241\256\345\234\260\346\265\213\351\207\217\346\211\247\350\241\214\346\227\266\351\227\264.md"
new file mode 100644
index 0000000..5bca639
--- /dev/null
+++ "b/JavaScript/\345\234\250\346\265\217\350\247\210\345\231\250\345\222\214 Node.js \344\270\255\346\233\264\347\262\276\347\241\256\345\234\260\346\265\213\351\207\217\346\211\247\350\241\214\346\227\266\351\227\264.md"	
@@ -0,0 +1,115 @@
+# 在浏览器和 Node.js 中更精确地测量执行时间
+
+测量应用程序中的某个片段需要多长时间是很重要的。
+
+在前端中，我们有 [Navigation TimingAPI](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API)、[Resource Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API) 以及 [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) 收集精确的指标。
+
+此外，我们最常用的应该是使用 `Date` 对象来评估某件事情需要多长时间。例如：
+
+```js
+const before = Date.now()
+console.log(before) // 1505722233092
+
+// some code here
+// ...
+
+console.log(`${(Date.now() - before) / 1000}s`) // 10.845s
+```
+
+我可以用 `Date.now` 来计算时间。它返回一个 UNIX 时间戳。
+
+> **注意**：`Date.now()` 方法返回自 1970 年 1 月 1 日 UTC 00:00:00 以来经过的毫秒数。
+
+`console.time` 和 `console.timeEnd` 也是一种很常用的简便方法。在你不需要高分辨率计时的情况下，该测量时间的方式也是一种不错的选择。
+
+```js
+console.time('test')
+
+// some code here
+// ...
+
+console.timeEnd('test') // testTime: 48.5732421875 ms
+```
+
+但如果我们想更精确一点呢？
+
+## 浏览器中更精确的时间戳
+
+在浏览器中，我们可以使用 [`performance.now()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) 方法，其返回一个精确到毫秒的 [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp)。
+
+`performance.now` 也可用于 [Web Worker](https://github.com/lio-zero/blog/blob/main/Web%20API/Web%20Worker.md) 或 [Service Worker](https://github.com/lio-zero/blog/blob/main//Web%20API/Service%20Worker.md)。在 Window 上下文中，返回的值是自 `navigationStart` 以来经过的时间。
+
+```js
+const before = performance.now()
+
+// some code here
+// ...
+
+console.log(performance.now() - before)
+console.log(`这需要 ${end - start}ms 才能完成`)
+```
+
+既然，我们说到了浏览器，那我们也应该来说一说 Node.js，其有什么方法可以用来测量时间？
+
+## Node.js 中更精确的时间戳
+
+Node.js `process` 模块中有一个名为 `hrtime.bigint()` 的方法以毫微秒为单位返回当前高分辨率实时值作为 `bigint`。
+
+与 `process.hrtime()` 方法不同，它不支持额外的时间参数，因为差可以通过两个 `bigint` 的减法直接计算。
+
+> **注意**：以前是直接使用的 `hrtime`，详细描述可查看 [Node.js 文档](https://nodejs.org/api/process.html#process_process_hrtime_time)。
+
+以下是文档给出的一个代码示例：
+
+```js
+const start = process.hrtime.bigint()
+
+setTimeout(() => {
+  const end = process.hrtime.bigint()
+
+  console.log(`基准测试花费了 ${Number(end - start) / 1000000} 毫秒`)
+}, 1000)
+```
+
+## 尽可能精确地测量
+
+为了方便起见，我们可以使用一些库来更加精准的测量我们的程序花费的多少时间：
+
+> [hrtime](https://www.npmjs.com/package/hirestime) 是通用时间度量 API（Node 和浏览器）的简便封装器。在 Node 上使用 `process.hrtime()`，浏览器中的 **performance API**，如果两者都不可用，则返回到 `Date`。
+
+默认情况下，时间以毫秒为单位：
+
+```js
+import hirestime from 'hirestime'
+
+// 时间测量的起始点
+const getElapsed = hirestime()
+
+setTimeout((_) => {
+  // 返回经过的毫秒数
+  console.log(getElapsed())
+}, 1000)
+```
+
+[hirestime](https://www.npmjs.com/package/hirestime) 是对 `process.hrtime.bigint()` 进行包装，它可以指定输出单位：
+
+```js
+import hirestime from 'hirestime'
+
+// 时间测量的起始点
+const getElapsed = hirestime()
+
+setTimeout((_) => {
+  // 返回经过的秒数
+  console.log(getElapsed.s())
+  console.log(getElapsed.seconds())
+
+  // 返回经过的毫秒数
+  console.log(getElapsed.ms())
+  console.log(getElapsed.milliseconds())
+
+  // 返回经过的纳秒数
+  console.log(getElapsed.ns())
+  console.log(getElapsed.nanoseconds())
+}, 1000)
+```
diff --git "a/JavaScript/\345\234\250\350\247\243\346\236\204 {} \346\227\266\344\275\277\347\224\250\351\273\230\350\256\244\345\200\274\351\230\262\346\255\242\351\224\231\350\257\257.md" "b/JavaScript/\345\234\250\350\247\243\346\236\204 {} \346\227\266\344\275\277\347\224\250\351\273\230\350\256\244\345\200\274\351\230\262\346\255\242\351\224\231\350\257\257.md"
new file mode 100644
index 0000000..4189a46
--- /dev/null
+++ "b/JavaScript/\345\234\250\350\247\243\346\236\204 {} \346\227\266\344\275\277\347\224\250\351\273\230\350\256\244\345\200\274\351\230\262\346\255\242\351\224\231\350\257\257.md"	
@@ -0,0 +1,52 @@
+# 在解构 {} 时使用默认值防止错误
+
+在使用解构时，请确保将默认值设置为**空 `{}`**，以防止它抛出错误，从而导致程序崩溃！
+
+```js
+// ❌
+function hi(person) {
+  const { age } = person
+}
+
+hi() // TypeError
+
+// ✅
+function hi(person = {}) {
+  const { age } = person
+}
+
+hi()
+```
+
+## 为什么它抛出错误？
+
+这是因为不能对值 `undefined` 和 `null` 进行解构。
+
+```js
+const { age } = null // TypeError
+const { name } = undefined // TypeError
+```
+
+当你调用一个函数而忘记传递一个参数时。默认情况下，该值为 `undefined`。
+
+```js
+function hi(person) {
+  return typeof person
+}
+
+hi() // undefined
+```
+
+## 不会引发错误的其他值
+
+下面是一个列表，您可以对其进行解构，以避免抛出错误。
+
+```js
+const { emptyString } = ''
+const { nan } = NaN
+const { emptyObject } = {}
+
+emptyString // undefined
+nan // undefined
+emptyObject // undefined
+```
diff --git "a/JavaScript/\345\236\203\345\234\276\345\233\236\346\224\266.md" "b/JavaScript/\345\236\203\345\234\276\345\233\236\346\224\266.md"
new file mode 100644
index 0000000..19f5da2
--- /dev/null
+++ "b/JavaScript/\345\236\203\345\234\276\345\233\236\346\224\266.md"
@@ -0,0 +1,15 @@
+# 垃圾回收
+
+> wiki：[垃圾回收](<https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)>)（Garbage Collection，简称 GC）是一种自动内存管理形式。垃圾收集器尝试回收程序分配但不再引用的内存，这样的内存被称为垃圾。
+
+对于垃圾回收这方面，我写不出什么大名堂，索性整理一些资料提供给大家参考：
+
+- [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection)
+- [wiki: Tracing garbage collection](https://en.wikipedia.org/wiki/Tracing_garbage_collection)
+- [Garbage collection in V8, an illustrated guide](https://github.com/lrlna/smol-zines/blob/master/guides/garbage-collection-in-v8.md)
+- [Memory Management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)
+- [垃圾回收](https://zh.javascript.info/garbage-collection)
+- [JavaScript garbage collection: Browser vs. server](https://blog.logrocket.com/javascript-garbage-collection-browser-vs-server/)
+- [深入理解 Chrome V8 垃圾回收机制](https://github.com/yacan8/blog/issues/33)
+- [How JavaScript works: memory management + how to handle 4 common memory leaks](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec) — 如果看不懂，请看[[译] JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://juejin.cn/post/6844903519078580238)
+- [赠你 13 张图，助你 20 分钟打败了「V8 垃圾回收机制」！！！](https://juejin.cn/post/6995706341041897486)
diff --git "a/JavaScript/\345\246\202\344\275\225\344\273\216 JavaScript Date \345\257\271\350\261\241\350\216\267\345\217\226\346\234\210\344\273\275\345\220\215\347\247\260\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\344\273\216 JavaScript Date \345\257\271\350\261\241\350\216\267\345\217\226\346\234\210\344\273\275\345\220\215\347\247\260\357\274\237.md"
new file mode 100644
index 0000000..c587216
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\344\273\216 JavaScript Date \345\257\271\350\261\241\350\216\267\345\217\226\346\234\210\344\273\275\345\220\215\347\247\260\357\274\237.md"	
@@ -0,0 +1,59 @@
+# 如何从 JavaScript Date 对象获取月份名称？
+
+我们用 JavaScript 中的当前日期时间创建一个 today 对象。
+
+```js
+let today = new Date()
+console.log(today) // Wed May 05 2021 15:31:36 GMT+0800 (中国标准时间)
+```
+
+使用 `Date` 对象的内置 `getMonth` 方法获取当前月份作为值。
+
+```js
+let moonLanding = today.getMonth()
+console.log(moonLanding) // 4
+```
+
+如果你想得到月份名称，可以自定义一个方法：
+
+```js
+const getMonthName = (val) => {
+  const month = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
+  return month[val]
+}
+
+console.log(getMonthName(moonLanding)) // "May"
+```
+
+也可以使用 `switch`，你觉得怎么优雅怎么来吧。
+
+## 更好的方法
+
+[`Date.prototype.toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 方法返回该日期对象的字符串，该字符串格式因不同语言而不同。
+
+- 使用 `options` 参数来自定义 `toLocaleString` 方法返回的字符串。
+
+```js
+const today = new Date()
+
+console.log(today.toLocaleString('default', { month: 'long' })) // "五月"
+console.log(today.toLocaleString('en-GB', { month: 'long' })) // "May"
+console.log(today.toLocaleString('ko-KR', { month: 'long' })) // "5월"
+```
+
+详细可以查看 [使用 `options` 参数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString#example_using_options)
+
+你也可以使用一些库来获取月份名称，如 [moment.js](https://momentjs.com/) 或 [day.js](https://dayjs.gitee.io/zh-CN/)。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\344\272\244\346\215\242\344\270\244\344\270\252\345\217\230\351\207\217\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\344\272\244\346\215\242\344\270\244\344\270\252\345\217\230\351\207\217\357\274\237.md"
new file mode 100644
index 0000000..d124b52
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\344\272\244\346\215\242\344\270\244\344\270\252\345\217\230\351\207\217\357\274\237.md"	
@@ -0,0 +1,44 @@
+# 如何在 JavaScript 中交换两个变量？
+
+过去，在 JavaScript 中交换两个变量的值需要一个中间变量在交换时存储其中一个值
+
+```js
+let a = 10
+let b = 20
+
+let temp
+temp = a
+a = b
+b = temp
+```
+
+尽管这种方法仍然有效，但如今有更多更优雅供我们使用。
+
+例如，JavaScript ES6 引入了解构赋值，允许在单个语句中将单个数组项分配给变量。看起来像这样：
+
+```js
+const [x, y] = [1, 2]
+```
+
+解构赋值在少数情况下非常有用，包括交换两个变量。为此，我们可以从两个变量创建一个数组，然后使用解构赋值将它们彼此重新分配：
+
+```js
+let a = 10
+let b = 20
+
+[a, b] = [b, a]
+```
+
+## 其他解决方案
+
+您可以在 [How to swap two variables in JavaScript](https://stackoverflow.com/questions/16201656/how-to-swap-two-variables-in-javascript) 找到更多的解决方法。
+
+例如，我们还可以使用[按位异或运算符](http://en.wikipedia.org/wiki/XOR_swap_algorithm)：
+
+```js
+a = a ^ b
+b = a ^ b
+a = a ^ b
+```
+
+但使用这些技巧或多或少都有一些限制，像上面这种方式，只适用于数字类型的整数值。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\344\275\277\347\224\250\347\256\241\351\201\223\357\274\210\347\256\241\351\201\223\350\277\220\347\256\227\347\254\246\357\274\211\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\344\275\277\347\224\250\347\256\241\351\201\223\357\274\210\347\256\241\351\201\223\350\277\220\347\256\227\347\254\246\357\274\211\357\274\237.md"
new file mode 100644
index 0000000..93fee41
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\344\275\277\347\224\250\347\256\241\351\201\223\357\274\210\347\256\241\351\201\223\350\277\220\347\256\227\347\254\246\357\274\211\357\274\237.md"	
@@ -0,0 +1,50 @@
+# 如何在 JavaScript 中使用管道（管道运算符）？
+
+管道运算符（`|>`）在函数式编程中很常见，但他目前还没内置在 JavaScript 中，[正处于 TC39 审议的草案/第 2 阶段](https://tc39.es/proposal-pipeline-operator/#sec-intro)。
+
+虽然还没内置的 JavaScript 管道运算符，但我们可以使用现有的方法手动的实现它。你也可以使用 [Babel 插件](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator)。
+
+## 什么是管道？
+
+管道是将一个函数的输出直接发送到另一个函数。在伪代码中，可以表示为：
+
+> output = input -> func1 -> func2 -> func3
+
+在这种情况下，将 `input` 通过管道输送到 `func1`，将 `func1` 通过管道输送到 `func2` 的输出，在将 `func2` 通过管道输送到 `func3`。
+
+在不支持管道的情况下，我们可以这么做：
+
+```js
+const output = func3(func2(func1(input)))
+```
+
+这是很难阅读且不直观的！如果我们能在 JavaScript 中使用实际的管道操作符（`|>`），那就太好了，但实际上我们还不能使用它。
+
+## 手动实现
+
+- 使用扩展运算符（`...`）允许将任意数量的参数传递到创建 `pipe` 函数中，传入的参数都存放在 `args` 数组中。
+- 使用 [`Array.prototype.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) 方法遍历数组 `args`。执行 `reduce` 时，累加器会将前一个累加器传递给当前元素的结果！
+
+```js
+const pipe = (...args) => args.reduce((acc, el) => el(acc))
+
+const title = 'Front End Interview'
+
+const toLowerCase = (str) => str.toLowerCase()
+const addHyphens = (str) => str.replace(/\s/g, '-')
+
+pipe(title, toLowerCase, addHyphens) // "front-end-interview"
+```
+
+如果使用管道运算符，它将如此的简单：
+
+```txt
+title |> toLowerCase |> addHyphens
+```
+
+有一个异步的实现方法，感兴趣的可以看看：[pipeAsyncFunctions](https://www.30secondsofcode.org/js/s/pipe-async-functions)
+
+## 更多资料
+
+- [Hack Pipe for Functional Programmers: How I learned to stop worrying and love the placeholder](https://jamesdigioia.com/hack-pipe-for-functional-programmers-how-i-learned-to-stop-worrying-and-love-the-placeholder/) — James DiGioia 介绍了相比于传统的 [Ramda](https://ramdajs.com/) 和 [Lodash/fp](https://github.com/lodash/lodash/wiki/FP-Guide) 函数式编程库引入的柯里化概念，JavaScript 引入管道运算符的好处。
+- [I'VE USED THE PIPE() FUNCTION 2,560 TIMES AND I CAN TELL YOU IT'S GOOD!](https://www.obvibase.com/dev-blog/i-ve-used-the-pipe-function-2-560-times-and-i-can-tell-you-it-s-good)
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\344\270\200\344\270\252\345\200\274\346\230\257\345\220\246\344\270\272\346\225\260\347\273\204\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\344\270\200\344\270\252\345\200\274\346\230\257\345\220\246\344\270\272\346\225\260\347\273\204\357\274\237.md"
new file mode 100644
index 0000000..a4a8302
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\344\270\200\344\270\252\345\200\274\346\230\257\345\220\246\344\270\272\346\225\260\347\273\204\357\274\237.md"	
@@ -0,0 +1,62 @@
+# 如何在 JavaScript 中判断一个值是否为数组？
+
+- 使用数组自带 `Array.prototype.isArray()` 方法来检查值是否为数组。
+
+```js
+const str = 'abc'
+const arr = [1, 2, 3]
+
+console.log(arr.isArray(arr)) // true
+```
+
+- 如果环境不支持 `Array.prototype.isArray()` 方法，则可以使用 `polyfill` 实现，使用 `Object.prototype.toString.call(arr)` 进行类型判断。
+
+```js
+// 旧浏览器
+function isArray(value) {
+  return Object.prototype.toString.call(value) === '[object Array]'
+}
+
+// 旧浏览器兼容
+if (!Array.isArray) {
+  Array.isArray = function (value) {
+    return Object.prototype.toString.call(value) === '[object Array]'
+  }
+}
+
+isArray(arr) // true
+isArray(str) // false
+```
+
+- 使用 `instanceof` 检验构造函数的 `prototype` 属性是否出现在对象的原型链中，返回一个布尔值。
+
+```js
+arr instanceof Array // true
+```
+
+- 使用 `constructor` 判断该变量的构造函数是否为 Array
+
+```js
+arr.constructor === Array // true
+```
+
+- 使用一些提供好的函数库，如 Lodash 的 `_.isArray` 方法检查 `value` 是否归类为 Array 对象。
+
+```js
+console.log(_.isArray(arr)) // true
+console.log(_.isArray(str)) // false
+```
+
+我们一般会组合前两种方法实现一个完美的 `isArray`：
+
+```js
+const isArray =
+  Array.isArray || ((list) => ({}.toString.call(list) === '[object Array]'))
+```
+
+npm 上就有一个 [isarray](https://www.npmjs.com/package/isarray) 包使用这种方式。
+
+**注意**：
+
+- `typeof` 检测出的数组为 `object`。
+- 使用 `instanceof` 和 `constructor` 检测是否为数组在一定程度上是便利、好用的，但是也存在着一些问题。主要是在判断上，可能会存在多个全局环境的问题（`iframe`）这种情况不多见，详细可以网上查查。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\344\270\200\344\270\252\345\257\271\350\261\241\346\230\257\345\220\246\344\270\272\347\251\272\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\344\270\200\344\270\252\345\257\271\350\261\241\346\230\257\345\220\246\344\270\272\347\251\272\357\274\237.md"
new file mode 100644
index 0000000..d058450
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\344\270\200\344\270\252\345\257\271\350\261\241\346\230\257\345\220\246\344\270\272\347\251\272\357\274\237.md"	
@@ -0,0 +1,73 @@
+# 如何在 JavaScript 中判断一个对象是否为空？
+
+我们想要判断对象是否为空，像基本类型那样比较是不可以的
+
+```js
+const obj = {}
+
+obj === {} // false
+```
+
+可以看到，两个都是空对象，但是进行比较，返回的是 `false`。
+
+因为对象是引用类型，使用 `===` 或 `==` 比较的是引用（内存地址），因此您不能使用它们比较两个对象。
+
+下面我们来介绍几种判断空对象的方法。
+
+## for...in
+
+> [`for...in`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) 语句以任意顺序遍历一个对象的除 [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 以外的[可枚举](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)属性。
+
+根据 `for...in` 遍历对象，如果存在则返回 `false`，否则返回 `true`。
+
+```js
+function isEmpty(obj) {
+  for (var prop in obj) {
+    // 判断是否自身属性
+    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+      return false
+    }
+  }
+
+  return JSON.stringify(obj) === '{}'
+}
+
+isEmpty({}) // true
+isEmpty({ name: 'O.O' }) // false
+```
+
+## JSON.stringify()
+
+利用 JSON 的 `JSON.stringify()` 方法来判断。将空对象转化为字符串 `'{}'` 来进行判断。
+
+```js
+const isEmpty = (obj) => JSON.stringify(obj) === '{}'
+
+isEmpty({}) // true
+isEmpty({ name: 'O.O' }) // false
+```
+
+## Object.keys()
+
+> `Object.keys()` 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。如果对象为空，将返回一个空数组。
+
+检查对象是否为空的最简单方法是检查它是否有键。我们使用 ES5 新增的 `Object.keys()` 方法检查对象是否有键。
+
+```js
+const isEmpty = (obj) => Object.keys(obj).length === 0
+
+isEmpty({}) // true
+isEmpty({ name: 'O.O' }) // false
+```
+
+> **Tips**：从 ES6 开始，`Object.keys` 传入非对象参数将被强制转换为对象。点击了解：[非对象强制](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys#non-object_coercion)。
+
+## 第三方库
+
+- Underscore.js：[`_.isEmpty()`](https://underscorejs.org/#isEmpty)
+- Lodash：[`_.isEmpty()`](https://lodash.com/docs/4.17.15#isEmpty)
+- Ramda：[`_.isEmpty()`](https://ramdajs.com/docs/#isEmpty)
+
+## 更多资料
+
+Stack Overflow 有很多这方面的讨论，包括其他方案及以上提供方法的基准测试等，详细内容请查阅 [How do I test for an empty JavaScript object?](https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object/32108184#32108184)。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\346\225\260\347\273\204\346\230\257\345\220\246\345\214\205\345\220\253\346\237\220\344\270\252\345\200\274\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\346\225\260\347\273\204\346\230\257\345\220\246\345\214\205\345\220\253\346\237\220\344\270\252\345\200\274\357\274\237.md"
new file mode 100644
index 0000000..dea18c6
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\210\244\346\226\255\346\225\260\347\273\204\346\230\257\345\220\246\345\214\205\345\220\253\346\237\220\344\270\252\345\200\274\357\274\237.md"	
@@ -0,0 +1,60 @@
+# 如何在 JavaScript 中判断数组是否包含某个值？
+
+- 常规循环：递减循环效率更高通常最高。
+
+```js
+const arr = ['red', 'yellow', 'black', 'white', 'yellow']
+
+function contains(a, obj) {
+  let i = a.length
+  while (i--) {
+    if (a[i] === obj) {
+      return true
+    }
+  }
+  return false
+}
+
+contains(arr, 'yellow') // true
+contains(arr, 'plum') // false
+```
+
+- [`Array.prototype.indexOf()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) 判断数组中是否存在某个值，如果存在，则返回数组元素的下标，否则返回 `-1`。
+
+```js
+arr.indexOf('plum') // -1
+arr.indexOf('yellow') // 1
+arr.indexOf('yellow', 2) // 4
+
+arr.indexOf('red') != -1 // true
+```
+
+- [`Array.prototype.includes()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 判断数组中是否存在某个值，如果存在返回 `true`，否则返回 `false`。
+
+```js
+arr.includes('red') // true
+arr.includes('plum') // false
+```
+
+- [`Array.prototype.find()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find) 返回数组中满足条件的**第一个元素的值**，如果没有，返回 `undefined`。
+
+```js
+arr.find((item) => item === 'black' && item) // "black"
+```
+
+- [`Array.prototype.findIndex()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) 返回数组中满足条件的第一个元素的下标，如果没有找到，返回 `-1`。
+
+```js
+arr.findIndex((item) => item === 'white') // 3
+```
+
+许多框架都有类似的方法：
+
+- jQuery：[`$.inArray()`](https://api.jquery.com/jquery.inarray/)
+- Underscore.js：[`_.contains()`](https://underscorejs.org/#contains)
+- Lodash：[`_.includes()`](https://lodash.com/docs/4.17.15#includes)
+- Ramda：[`R.includes()`](https://ramdajs.com/docs/#includes)
+
+## 更多资料
+
+Stack Overflow 有很多这方面的讨论，包括检查数组对象，以上提供方法的基准测试等，详细内容请查阅 [How do I check if an array includes a value in JavaScript?](https://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-a-value-in-javascript)。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\220\210\345\271\266\344\270\244\344\270\252\346\225\260\347\273\204\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\220\210\345\271\266\344\270\244\344\270\252\346\225\260\347\273\204\357\274\237.md"
new file mode 100644
index 0000000..5289108
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\220\210\345\271\266\344\270\244\344\270\252\346\225\260\347\273\204\357\274\237.md"	
@@ -0,0 +1,56 @@
+# 如何在 JavaScript 中合并两个数组？
+
+## String.prototype.concat()
+
+[`String.prototype.concat()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/concat) 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。
+
+```js
+const a = [1, 2, 3]
+const b = [4, 5, 6]
+
+const merged = [].concat(a, b) // [1, 2, 3, 4, 5, 6]
+// 或
+const alsoMerged = a.concat(b) // [1, 2, 3, 4, 5, 6]
+```
+
+这两种方法都会产生新的数组，而不会改变原数组。
+
+## 扩展运算符
+
+```js
+const a = [1, 2, 3]
+const b = [4, 5, 6]
+
+const merged = [...a, ...b] // [1, 2, 3, 4, 5, 6]
+```
+
+## 两者的比较
+
+`String.prototype.concat()` 可以比扩展运算符更好地处理非数组值，这可能是在合并不确定是否为数组的值时需要考虑的问题：
+
+```js
+const a = [1, 2, 3]
+const b = true
+const c = 'Hello'
+
+const mergeAb = [...a, ...b] // Error：b is not iterable
+const mergeAc = [...a, ...c] // 得到 [1, 2, 3, 'H', 'e', 'l', 'l', 'o'] 错误的结果
+// 你应该改用 [...a, b] 和 [...a, c]
+
+const concatAb = [].concat(a, b) // [1, 2, 3, true]
+const concatAb = [].concat(a, c) // [1, 2, 3, 'Hello']
+```
+
+如上面所看到的，当传递不可迭代对象时，扩展运算符要么抛出错误，要么不输出正确的结果。而 `String.prototype.concat` 则不会出现这样的问题。
+
+## 如何选择？
+
+只要知道输入是数组，就使用扩展运算符（`...`），因为它的性能更好，而且易于阅读和理解。
+
+当您对一个或多个输入不确定且不想添加额外的检查时，请使用 `String.prototype.concat()`，因为它可以更优雅地处理这些情况。
+
+## 更多选择
+
+- 使用循环
+- 利用 `apply()` 方法的第二个参数可以传递一个数组的特性
+- 使用时，需要注意数组的大小，将小数组合并到大数组上可以减少数组的操作次数，提高代码执行效率
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\257\271\345\257\271\350\261\241\346\225\260\347\273\204\350\277\233\350\241\214\346\216\222\345\272\217\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\257\271\345\257\271\350\261\241\346\225\260\347\273\204\350\277\233\350\241\214\346\216\222\345\272\217\357\274\237.md"
new file mode 100644
index 0000000..99e5b37
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\257\271\345\257\271\350\261\241\346\225\260\347\273\204\350\277\233\350\241\214\346\216\222\345\272\217\357\274\237.md"	
@@ -0,0 +1,108 @@
+# 如何在 JavaScript 中对对象数组进行排序？
+
+在开始之前，我们先来了解一下 `Array.prototype.sort()` 的一些需要注意的地方。
+
+## Array.prototype.sort()
+
+> MDN：[`Array.prototype.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 方法用[原地算法](https://en.wikipedia.org/wiki/In-place_algorithm) 对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的。
+
+默认情况下，`sort` 方法按字典序对字符串进行排序。
+
+```js
+const months = ['March', 'Jan', 'Feb', 'Dec']
+months.sort()
+console.log(months) // ["Dec", "Feb", "Jan", "March"]
+
+const arr = [1, 30, 4, 21, 100000]
+arr.sort()
+console.log(arr) // [1, 100000, 21, 30, 4]
+```
+
+可以看到，数组在排序时，会根据上述提到的规则进行排序。
+
+**我们该如何正确排序？**
+
+`Array.prototype.sort()` 是一个高阶函数，它可以传入一个指定按某种顺序进行排列的函数。
+
+```js
+const arr = [8, 2, 1, 4, 5, 0]
+
+arr.sort((a, b) => {
+  if (a > b) return 1
+  if (b > a) return -1
+  return 0
+}) // [0, 1, 2, 4, 5, 8]
+```
+
+它更简洁的方式是：
+
+```js
+const arr = [8, 2, 1, 4, 5, 0]
+// 按升序排序
+arr.sort((a, b) => a - b) // [0, 1, 2, 4, 5, 8]
+// 按降序排序
+arr.sort((a, b) => b - a) // [8, 5, 4, 2, 1, 0]
+```
+
+该技巧取决于 `Array.prototype.sort()` 期望一个正值或负值来执行两个元素之间的交换。
+
+如果你使用的是字符串数组，可以使用 [`String.prototype.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)，因为它提供了更大的灵活性，通过考虑特定的区域设置及其独特的需求：
+
+```js
+const arr = ['Hi', 'Hola', 'Hello']
+
+// 按升序排序
+arr.sort((a, b) => a.localeCompare(b)) // ['Hello', 'Hi', 'Hola']
+// 按降序排序
+arr.sort((a, b) => b.localeCompare(a)) // ['Hola', 'Hi', 'Hello']
+```
+
+还有几点需要注意：
+
+- `sort` 方法不会保留原始数组的顺序。如果你希望保留原始数组的顺序，则可以使用 `Array.prototype.slice` 等方法克隆数组，然后对克隆的数组进行排序。
+- `sort` 方法在不同浏览器中的实现可能略有不同。
+- 在使用 `sort` 方法时，应注意数组的类型。
+- 如果你希望对数组的子元素进行排序，则需要确保数组中的所有元素都具有该子元素。
+
+最重要的一点还是编写 `sort` 方法比较函数，只要这一步做好了，其他注意点都可以得以解决。
+
+## 对象可以按照某个属性排序
+
+根据不同的场景，你可能需要按价格、日期等字段对 JavaScript 数组对象进行排序。
+
+我们可以使用 `Array.prototype.sort()` 和 `String.prototype.localeCompare()` 对字符串数据进行排序。
+
+```js
+let arr = [
+  { name: 'HTML', dataTime: '1999-01-20' },
+  { name: 'JavaScript', dataTime: '2000-07-22' },
+  { name: 'CSS', dataTime: '2020-08-20' }
+]
+
+const sortData = (data, order = 'asc') => {
+  if (order === 'asc') {
+    return data.sort((a, b) => a.dataTime.localeCompare(b.dataTime))
+  } else {
+    return data.sort((a, b) => b.dataTime.localeCompare(a.dataTime))
+  }
+  return data
+}
+
+console.log(JSON.stringify(sortData(arr), null, 2))
+/*
+[
+  {
+    "name": "HTML",
+    "dataTime": "1999-01-20"
+  },
+  {
+    "name": "JavaScript",
+    "dataTime": "2000-07-22"
+  },
+  {
+    "name": "CSS",
+    "dataTime": "2020-08-20"
+  }
+]
+*/
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\345\255\227\347\254\246\344\270\262\350\275\254\346\215\242\344\270\272\346\225\260\345\255\227.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\345\255\227\347\254\246\344\270\262\350\275\254\346\215\242\344\270\272\346\225\260\345\255\227.md"
new file mode 100644
index 0000000..60bb490
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\345\255\227\347\254\246\344\270\262\350\275\254\346\215\242\344\270\272\346\225\260\345\255\227.md"	
@@ -0,0 +1,87 @@
+# 如何在 JavaScript 中将字符串转换为数字
+
+> **前提**：字符串必须是一个数字。
+
+## Number()
+
+通过 `Number()` 转换函数传入一个字符串，它会试图将其转换为一个整数或浮点数，这个方法只能基于十进制进行转换，并且字符串中不能出现非数字的字符，否则将返回 `NaN`。
+
+```js
+Number('123') // 123
+Number('12.3') // 12.3
+Number('3.14abcd') // NaN
+```
+
+## +
+
+将字符串转换为数字最快速的方法是使用一元运算符 `+`：
+
+```js
++'123' // 123
++'123.123' // 123.123
++'123,123' // NaN
+```
+
+如果不是一个纯数字，将返回 `NaN`。
+
+你也可以用 `-`（减号）将其转化为负数值。
+
+## Math.floor()
+
+`Math.floor()` 返回小于或等于一个给定数字的最大整数。可以理解 `Math.floor()` 为向下取整
+
+```js
+Math.floor('4') // 4
+Math.floor('45.95') // 45
+Math.floor('45.05') // 45
+Math.floor('-45.05') // -46
+Math.floor('-45.95') // -46
+```
+
+`Math.ceil` 向上取整，要注意的是负数它会往大的取
+
+```js
+Math.ceil('-2019.05') // -2019
+```
+
+还有其他的一些 `Math` 方法，也会在运算过程中，将纯数字字符串转化为数字。
+
+## parseInt() 和 parseFloat()
+
+`parseInt()` 方法可解析一个字符串，并返回一个整数。
+
+**注意**：
+
+- 字符串中只返回第一个数字。
+- 开头和结尾的空格是允许的。
+- 如果字符串的第一个字符不能被转换为数字，那么 `parseInt()` 会返回 `NaN`。
+- 在字符串以 `0` 为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。
+
+```js
+parseInt('123') // 123
+parseInt('123.1234') // 123
+parseInt(' 1 2 3 ') // 1
+parseInt('18 ACG') // 18
+parseInt('hi 2') // NaN
+
+parseInt('10', 10) // 10
+parseInt('010') // 10
+parseInt('10', 8) // 8
+parseInt('0x10') // 16
+parseInt('10', 16) //16
+```
+
+`parseFloat()` 方法可解析一个字符串，并返回一个浮点数。
+
+- 字符串中只返回第一个数字。
+- 开头和结尾的空格是允许的。
+- 如果字符串的第一个字符不能被转换为数字，那么 `parseFloat()` 会返回 `NaN`。
+
+```js
+// 小数
+parseFloat('123') // 123
+parseFloat('123.1234') // 123.1234
+parseFloat('1 2 3') // 1
+parseFloat('18 ACG') // 18
+parseFloat('hi 2') // NaN
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\346\225\260\347\273\204\346\213\206\345\210\206\344\270\272\344\270\200\347\273\204\346\225\260\347\273\204.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\346\225\260\347\273\204\346\213\206\345\210\206\344\270\272\344\270\200\347\273\204\346\225\260\347\273\204.md"
new file mode 100644
index 0000000..c8b9c35
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\346\225\260\347\273\204\346\213\206\345\210\206\344\270\272\344\270\200\347\273\204\346\225\260\347\273\204.md"	
@@ -0,0 +1,35 @@
+# 如何在 JavaScript 中将数组拆分为一组数组
+
+有时我们有一个数组，我们可能想将其拆分为多个数组：
+
+```js
+const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+```
+
+假如我们需要把它拆分为三个子数组的数组，如下所示：
+
+```js
+const result = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9]
+]
+```
+
+**我们该如何实现？**
+
+一种快速的解决方案如下。它将返回一个新数组，并且不会改变原数组 `array`。
+
+```js
+const createGroups = (arr, numGroups) => {
+  const perGroup = Math.ceil(arr.length / numGroups)
+  return new Array(numGroups)
+    .fill('')
+    .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
+}
+
+createGroups(array, 3) // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
+createGroups(array, 4) // [[1, 2, 3], [4, 5, 6], [7, 8, 9], []]
+```
+
+你可以指定不同的分组长度，来查看效果。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\346\225\260\347\273\204\350\275\254\344\270\272\345\257\271\350\261\241.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\346\225\260\347\273\204\350\275\254\344\270\272\345\257\271\350\261\241.md"
new file mode 100644
index 0000000..f46b0d3
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\345\260\206\346\225\260\347\273\204\350\275\254\344\270\272\345\257\271\350\261\241.md"	
@@ -0,0 +1,190 @@
+# 如何在 JavaScript 中将数组转为对象
+
+首先，我们需要明白对象具有键和值。
+
+```js
+const object = {
+  key: 'value'
+}
+```
+
+如果我们想把某个东西转换成一个**对象**，我们需要传递具有这两个要求的东西：**键和值**。
+
+满足这些要求的参数有两种类型：
+
+- 具有嵌套键值对的数组
+- `Map` 对象
+
+## 数组
+
+这是一个带有键值对的嵌套数组
+
+```js
+const nestedArray = [
+  ['key 1', 'value 1'],
+  ['key 2', 'value 2']
+]
+```
+
+当我们应用它时，我们可以使用 `Object.fromEntries` 方法获取对象：
+
+```js
+Object.fromEntries(nestedArray) // { key 1: "value 1", key 2: "value 2"}
+```
+
+## Map 对象
+
+ES6 为我们带来了一个名为 [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_vs._Maps) 新的数据结构，它与 `Object` 非常相似。
+
+> TC39：`Map` 对象是键/值对的集合，其中键和值可以是任意的 ECMAScript 类型值。
+
+让我们创建新的 `map` 对象。
+
+```js
+// 使用 constructor
+const map = new Map([
+  ['key 1', 'value 1'],
+  ['key 2', 'value 2']
+])
+
+// 或者我们可以使用实例方法 set
+const map = new Map()
+map.set('key 1', 'value 1')
+map.set('key 2', 'value 2')
+
+// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}
+```
+
+现在让我们使用 `object.fromEntries` 将 `map` 转换成一个对象：
+
+```js
+Object.fromEntries(map) // { key 1: "value 1", key 2: "value 2"}
+```
+
+## 其他类型
+
+尝试将其他数据类型传递到 `Object.fromEntries` 时要小心。以下列出的所有情况将一致抛出一个错误：
+
+| 类型        |                                      |
+| :---------- | :----------------------------------- |
+| `undefined` | `Object.fromEntries(undefined)`      |
+| `Null`      | `Object.fromEntries(null)`           |
+| `Boolean`   | `Object.fromEntries(true)`           |
+| `Number`    | `Object.fromEntries(100)`            |
+| `String`    | `Object.fromEntries("hi")`           |
+| `Object`    | `Object.fromEntries({key: "value"})` |
+| 扁平化数组  | `Object.fromEntries([1,2,3])`        |
+
+> **注意**：确保只传递一个键值对。
+
+## `Object.fromEntries` 和 `Object.entries` 的区别
+
+`Object.entries` 方法返回一个给定对象自身可枚举属性的键值对数组。
+
+```js
+const object = { key1: 'value1', key2: 'value2' }
+const array = Object.entries(object) // [ ["key1", "value1"], ["key2", "value2"] ]
+
+Object.fromEntries(array) // { key1: 'value1', key2: 'value2' }
+```
+
+### 对象到对象的转换
+
+你可以在最初的 [TC39 提案](https://github.com/tc39/proposal-object-from-entries) 找到引入 `Object.entries` 方法的缘由。
+
+通常，当我们选择使用 `Object.entries` 时，是因为它让我们能够访问一些漂亮的数组方法。
+
+```js
+const user = {
+  name: 'O.O',
+  age: 18,
+  address: 'xxx'
+}
+
+Object.entries(user).filter(([key, value]) => key !== 'age')
+// [["name", "O.O"], ["address", "xxx"]]
+```
+
+它返回了一组嵌套数组，而不是我们想要的对象转对象，后面又引入了 `fromEntries` 方便该操作。
+
+```js
+const arr = [
+  ['name', 'O.O'],
+  ['address', 'xxx']
+]
+
+Object.fromEntries(arr) // {name: 'O.O', address: 'xxx'}
+
+const user = {
+  name: 'O.O',
+  age: 18,
+  address: 'xxx'
+}
+
+Object.fromEntries(Object.entries(user).filter(([key, value]) => key !== 'age'))
+// {name: 'O.O', address: 'xxx'}
+```
+
+## 浏览器支持情况
+
+除了 IE，大多数主流浏览器都支持这种方法：
+
+![Object.fromEntries()](https://upload-images.jianshu.io/upload_images/18281896-6ca9a112aafbf0fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 替代方案
+
+`Object.fromEntries` 于 2019 年推出，所以它仍然是相当新的的一个方法。因此，在照顾旧浏览器的情况下，我们需要其他的替代方案，将一个键值对数组转化为一个对象以更好的支持。
+
+### Reduce
+
+将数组转换为对象的一种常用方法是使用 `reduce` 方法。
+
+```js
+const array = [
+  ['key1', 'value1'],
+  ['key2', 'value2']
+]
+
+const map = new Map([
+  ['key1', 'value1'],
+  ['key2', 'value2']
+])
+
+function toObject(pairs) {
+  return Array.from(pairs).reduce(
+    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
+    {}
+  )
+}
+
+toObject(array) // { key1: 'value1', key2: 'value2' }
+toObject(map) // { key1: 'value1', key2: 'value2' }
+```
+
+### 第三方库
+
+一些第三方库，例如：Underscore 和 Lodash 也提供了可将键值数组对转换为对象的方法。
+
+`_.object` — 将数组转换为对象。传递单个键值对列表，或键列表和值列表。
+
+```js
+// Underscore
+const array = [
+  ['key1', 'value1'],
+  ['key2', 'value2']
+]
+
+_.object(array) // { key1: 'value1', key2: 'value2' }
+```
+
+`_.fromPairs` — 此方法返回由键值对组成的对象。
+
+```js
+// Lodash
+const array = [
+  ['key1', 'value1'],
+  ['key2', 'value2']
+]
+
+_.fromPairs(array) // { key1: 'value1', key2: 'value2' }
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\243\200\346\237\245\345\257\271\350\261\241\344\270\255\346\230\257\345\220\246\345\255\230\345\234\250\346\237\220\344\270\252\345\261\236\346\200\247\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\243\200\346\237\245\345\257\271\350\261\241\344\270\255\346\230\257\345\220\246\345\255\230\345\234\250\346\237\220\344\270\252\345\261\236\346\200\247\357\274\237.md"
new file mode 100644
index 0000000..9dd6e78
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\243\200\346\237\245\345\257\271\350\261\241\344\270\255\346\230\257\345\220\246\345\255\230\345\234\250\346\237\220\344\270\252\345\261\236\346\200\247\357\274\237.md"	
@@ -0,0 +1,35 @@
+# 如何在 JavaScript 中检查对象中是否存在某个属性？
+
+- `in` 操作符用于检查对象的自有属性和继承来的属性是否存在。
+
+```js
+let user = {
+  name: 'lio'
+}
+
+console.log('age' in user) // false
+console.log('name' in user) // true
+console.log('constructor' in user) // true
+```
+
+- `hasOwnProperty` 方法只检查属性是否存在于当前对象中，而忽略原型链。
+
+```js
+console.log(user.hasOwnProperty('age')) // false
+console.log(user.hasOwnProperty('name')) // true
+console.log(user.hasOwnProperty('constructor')) // false
+```
+
+- 使用点运算符或括号符号 `user["prop"]`。如果属性存在，它将返回该属性的值，否则将返回 `undefined`
+
+```js
+console.log(user['age']) // undefined
+console.log(user['name']) // "lio"
+```
+
+- ES11 的 `?.` 可选链操作符的出现是为了解决 "不存在的属性" 引起的错误问题，我们刚好可以来检查对象属性是否存在。
+
+```js
+console.log(user?.age) // undefined
+console.log(user?.name) // "lio"
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\243\200\346\237\245\346\225\260\345\255\227\346\230\257\346\255\243\346\225\260\350\277\230\346\230\257\350\264\237\346\225\260.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\243\200\346\237\245\346\225\260\345\255\227\346\230\257\346\255\243\346\225\260\350\277\230\346\230\257\350\264\237\346\225\260.md"
new file mode 100644
index 0000000..f7af16f
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\243\200\346\237\245\346\225\260\345\255\227\346\230\257\346\255\243\346\225\260\350\277\230\346\230\257\350\264\237\346\225\260.md"	
@@ -0,0 +1,152 @@
+# 如何在 JavaScript 中检查数字是正数还是负数
+
+ES6 的 [`Math.sign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign#Browser_compatibility) 方法返回一个数字的符号，指示数字是正数，负数还是零。
+
+使用起来很简单：
+
+```js
+Math.sign(6) // 1
+Math.sign(-6) // -1
+Math.sign(0) // 0
+```
+
+## `Math.sign` 返回值
+
+`Math.sign()` 有 5 个可能的返回值：
+
+```js
+1  // 正数
+-1 // 负数
+0  // 正零
+-0 // 负零
+NaN // NaN 不是数字
+
+Math.sign(8) // 1
+Math.sign(-8) // -1
+
+Math.sign(0) // 0
+Math.sign(-0) // -0
+
+Math.sign(NaN) // NaN
+Math.sign('hello') // NaN
+Math.sign() // NaN
+```
+
+> **注意**：传递给此方法的参数将隐式转换为 `number` 类型。
+
+一个常见的错误是认为 `Math.sign` 返回转换后的参数值。而事实上，`Math.sign` 只返回数字的符号，它不返回值。
+
+```js
+Math.sign(-8) // -1
+```
+
+可以看到，它返回了 `-1` 而不是返回 `-8`。
+
+## `Math.sign` 与比较运算符
+
+> 有人可能会说：既然我能用比较运算符，为什么还要用 `Math.sign`？
+
+```js
+const number = 1
+// 比较运算符
+if (number > 0) // 正
+else // 负
+
+// 三元运算符
+return (number < 0) ? -1 : (number > 0) ? 1 : 0
+
+// Math.sign
+if (Math.sign(number) > 0) // 正
+else // 负
+```
+
+实际上，如果您只是检查布尔状态，那么我们可以使用比较运算符，而不是使用 `Math.sign`。
+
+但我们要知道 `Math.sign` 的作用是返回一个数值。这意味着你可以做计算。
+
+```js
+const number = 5
+
+number > 0 // true
+Math.sign(number) // 1
+```
+
+> 且 `Math.sign()` 相比比较/三元运算符来说，可读性更高，编写、阅读、理解方面所花费的时间更少。
+
+### `Math.sign` 解决算法问题
+
+我们可以使用 `Math.sign` 来解决**整数反转**算法：
+
+> 123 ——> 321
+>
+> -123 ——> -321
+
+```js
+const reverseInteger = (num) => {
+  const numArray = Math.abs(num).toString().split('').reverse().join('')
+
+  const sign = Math.sign(num) // -1
+  return numArray * sign
+}
+
+reverseInteger(-321) // -123
+```
+
+> 你可以在 LeetCode 的 [整数反转](https://leetcode-cn.com/problems/reverse-integer/)进行练习。
+>
+> 推荐：[JavaScript 反转字符串](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E5%8F%8D%E8%BD%AC%E5%AD%97%E7%AC%A6%E4%B8%B2.md)
+
+## 负零
+
+`Math.sign` 还返回负零：
+
+```js
+Math.sign(0) // 0
+Math.sign(-0) // -0
+```
+
+为什么返回负零，我们需要它吗 🤨？存在就有它存在的道理，[《You Don't Know JS》](https://github.com/getify/You-Dont-Know-JS)中的 Kyle Simpson 解释得非常好：
+
+> Now, why do we need a negative zero, besides academic trivia?
+>
+> There are certain applications where developers use the magnitude of a value to represent one piece of information (like speed of movement per animation frame) and the sign of that number to represent another piece of information (like the direction of that movement).
+>
+> In those applications, as one example, if a variable arrives at zero and it loses its sign, then you would lose the information of what direction it was moving in before it arrived at zero. Preserving the sign of the zero prevents potentially unwanted information loss.
+
+译文如下：
+
+> **现在，除了学术琐事，我们为什么还需要负零呢？**
+>
+> 在某些应用中，开发人员使用数值的大小来表示一条信息（如每个动画帧的移动速度），并使用该数字的符号来表示另一条信息（如移动的方向）。
+>
+> 在这些应用中，举个例子，如果一个变量到达零，并且它失去了符号，那么在它到达零之前，您将丢失它正在向哪个方向移动的信息。保留零的符号可以防止潜在的不必要的信息丢失。
+
+## `Math.sign` 浏览器支持情况
+
+除了 IE，`Math.sign` 支持所有的主流的浏览器，支持情况如下图所示：
+
+![Math.sign 浏览器支持](https://upload-images.jianshu.io/upload_images/18281896-b544534ef3eafd02.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果你需要在 IE 或旧浏览器中使用它，你可以使用 MDN 提供的 [Polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign#Polyfill)：
+
+```js
+if (!Math.sign) {
+  Math.sign = function (x) {
+    return (x > 0) - (x < 0) || +x
+  }
+}
+```
+
+也可以选择其他解决方法：
+
+```js
+const positive = 5
+const negative = -5
+const zero = 0
+
+positive === 0 ? positive : positive > 0 ? 1 : -1 // 1
+negative === 0 ? negative : negative > 0 ? 1 : -1 // -1
+zero === 0 ? zero : zero > 0 ? 1 : -1 // 0
+```
+
+[core-js](https://github.com/zloirock/core-js#ecmascript-math) 也提供了相应的 polyfill。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\267\273\345\212\240\345\215\203\344\275\215\351\200\227\345\217\267\357\274\210\346\257\217\344\270\211\344\275\215\346\225\260\357\274\211.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\267\273\345\212\240\345\215\203\344\275\215\351\200\227\345\217\267\357\274\210\346\257\217\344\270\211\344\275\215\346\225\260\357\274\211.md"
new file mode 100644
index 0000000..1a7e9b0
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\346\267\273\345\212\240\345\215\203\344\275\215\351\200\227\345\217\267\357\274\210\346\257\217\344\270\211\344\275\215\346\225\260\357\274\211.md"	
@@ -0,0 +1,52 @@
+# 如何在 JavaScript 中添加千位逗号（每三位数）
+
+今天讲一个常见的场景：在你输入金额时，每三位数自动添加一个逗号。你可能需要对一段长数字进行一些基本的数字格式化。
+
+转换如下：
+
+- 100 —> 100
+- 1000 —> 1,000
+- 1000000 —> 1,000,000
+
+有三种相当简单的方法可以在 JavaScript 中执行此操作。
+
+## Intl.NumberFormat
+
+> [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 是 JavaScript 中的一个构造函数，用于创建一个对象，该对象可用于将数字格式化为本地化的字符串。
+
+例如，使用 `Intl.NumberFormat` 可以将数字格式化为不同地区的本地货币格式，如美元、欧元或人民币。
+
+```js
+const number = 123456.789
+
+new Intl.NumberFormat('de-DE').format(number) // 123.456,789
+new Intl.NumberFormat('ja-JP').format(number) // 123,456.789
+new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number) // 1,23,000
+```
+
+你可以使用 `Intl.NumberFormat` 来定义要使用的货币、小数位数、数字分组分隔符、负号的位置等。
+
+## Number.prototype.toLocaleString()
+
+[`Number.prototype.toLocaleString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) 方法返回这个数字在特定语言环境下的表示字符串。此方法也只是简单的调用 `Intl.NumberFormat`。
+
+```js
+const addCommas = (num) => num.toLocaleString()
+
+addCommas(100) // '100'
+addCommas(1000) // '1,000'
+addCommas(1000000) // '1,000,000'
+```
+
+## 正则表达式
+
+另一种选择是使用正则表达式。如果我们的输入是数字，我们将需要确保在应用正则表达式之前将其转换为字符串。
+
+```js
+const addCommas = (num) =>
+  num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
+
+addCommas(100) // '100'
+addCommas(1000) // '1,000'
+addCommas(1000000) // '1,000,000'
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\350\216\267\345\217\226\345\257\271\350\261\241\347\232\204\351\225\277\345\272\246.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\350\216\267\345\217\226\345\257\271\350\261\241\347\232\204\351\225\277\345\272\246.md"
new file mode 100644
index 0000000..d082b8f
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\350\216\267\345\217\226\345\257\271\350\261\241\347\232\204\351\225\277\345\272\246.md"	
@@ -0,0 +1,171 @@
+# 如何在 JavaScript 中获取对象的长度
+
+与数组不同，获取对象长度总是很棘手的。
+
+有两种方法获取对象长度：
+
+- `Object.keys` 返回对象的所有可枚举属性键的数组。
+- 使用 **Lodash** 库的 `_.size` 方法
+
+```js
+const object = { id: 1, status: 0 }
+
+// 使用 JavaScript
+Object.keys(object).length // 2
+
+// 使用 Lodash
+_.size(object) // 2
+```
+
+## 为什么我们不能调用对象 `length`
+
+你可能想知道为什么我们不能直接调用对象 `length` 属性。让我们看看当我们这样做时会发生什么：
+
+```js
+const object = { id: 1, status: 0 }
+
+object.length // undefined
+
+object.hasOwnProperty('length') // false
+```
+
+可以看到，它没有 `length` 属性。我们需要知道，仅 `string` 和 `array` 具有属性 `length`。
+
+```js
+const string = 'hello'
+const array = [1, 2, 3]
+
+string.hasOwnProperty('length') // true
+array.hasOwnProperty('length') // true
+```
+
+## 什么是可枚举属性？
+
+我在开头提到 `Object.keys` 返回一个**可枚举**属性键数组。所以，让我们找出 `enumerable` 属性的来源。
+
+### 指定属性
+
+通常，当我们要向对象添加属性时，我们可能只使用点符号：
+
+```js
+const object = {}
+
+object.id = 1
+
+console.log(object) // { id: 1 }
+```
+
+### 定义属性
+
+或者，我们也可以使用 `Object.defineProperty`，该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
+
+它接受 3 个参数：
+
+- `obj` — 要定义属性的对象。
+- `prop` — 要定义或修改的属性的名称或 `Symbol` 。
+- `descriptor` — 要定义或修改的属性描述符。
+
+```js
+Object.defineProperty(obj, prop, descriptor)
+```
+
+让我们用这个方法定义一个属性：
+
+```js
+const object = {}
+
+Object.defineProperty(object, id, {
+  value: 1
+})
+
+console.log(object) // {}
+```
+
+为什么是空的？为什么我们的属性没有出现 🤔？
+
+那是因为当我们这样定义一个属性时，`enumerable` 属性的默认为 `false`。所以如果我们想让它出现，我们需要设置为 `true`
+
+```js
+const object = {}
+
+Object.defineProperty(object, id, {
+  value: 1,
+  enumerable: true // 👈
+})
+
+console.log(object) // { id: 1 }
+```
+
+### 可枚举默认为 true
+
+让我们回到用点符号设置的对象属性示例。为什么它会自动显示？好吧，那是因为当我们这样分配属性时，`enumerable` 属性会自动设置为 `true`。
+
+```js
+const object = {}
+
+object.id = 1
+
+object.propertyIsEnumerable(id) // true
+```
+
+### 可枚举摘要
+
+对于我们大多数人来说，在定义属性时很少触及可枚举属性。对于我们来说，这只是一种控制在使用 `Object.keys` 遍历对象时，创建的特定属性是显示还是隐藏的方法。
+
+如果您想了解有关可枚举性的更多信息，可以查阅 [ECMAScript 6 中的可枚举性](http://2ality.com/2015/10/enumerability-es6.html)。
+
+> 因此，`enumerable` 属性用于隐藏不应迭代的属性。这就是在 ECMAScript 1 中引入可枚举性的原因。
+
+## `Object.keys` 与 `Object.getOwnPropertyNames`
+
+现在您已经了解了 `enumerable`，让我们介绍另一个方法 `Object.getOwnPropertyNames`，您可以将其视为获取长度的选项。
+
+```js
+const object = { id: 1 }
+
+Object.defineProperty(object, status, {
+  value: 0,
+  enumerable: false
+})
+
+Object.keys(object) // ['id']
+Object.getOwnPropertyNames(object) // ['id', 'status']
+```
+
+如您所见，`object.getOwnPropertyNames` 将返回所有属性键（即，可枚举和不可枚举属性），而 `object.keys` 只返回可枚举属性键。
+
+如上所述，可枚举属性可能出于某种原因而被隐藏，因此您可能不想访问它。因此，`Object.getOwnPropertyName` 可能不是要用于获取对象长度的方法。
+
+## 带 Symbols 类型的对象长度
+
+`object.keys` 在默认情况下获取对象长度之前，我想再指出一个考虑因素。在 ES6 中，引入了一种新的数据类型，称为 `symbol`。它可以用作对象的属性名。
+
+```js
+const user = {
+  [Symbol('id')]: 1,
+  status: 0
+}
+```
+
+但问题是当你有一个 `symbol` 属性名时。`Object.keys` 和 `Object.getOwnPropertyNames` 都不起作用。
+
+```js
+Object.keys(user) // ["status"] <-- no symbol
+
+Object.getOwnPropertyNames(user) // ["status"] <-- no symbol
+```
+
+因此，解决方案是使用 `Object.getOwnPropertySymbols`。
+
+```js
+Object.getOwnPropertySymbols(user) // [Symbol(id)]
+```
+
+现在结合这两种方法，您将得到适当的长度。
+
+```js
+const enumerableLength = Object.keys(user).length
+const symbolLength = Object.getOwnPropertySymbols(user).length
+
+const totalObjectLength = enumerableLength + symbolLength // 2
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\351\200\211\346\213\251\346\210\226\345\277\275\347\225\245\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\351\200\211\346\213\251\346\210\226\345\277\275\347\225\245\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..456748e
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\351\200\211\346\213\251\346\210\226\345\277\275\347\225\245\345\257\271\350\261\241\347\232\204\345\261\236\346\200\247.md"	
@@ -0,0 +1,58 @@
+# 如何在 JavaScript 中选择或忽略对象的属性
+
+在没有内置解决方案的情况下，从 JavaScript 对象中选择或忽略属性是一个相当常见的问题。
+
+下面我们来看看，实现两个方法 `choice` 和 `ignore` 来选择或忽略对象的属性。
+
+## 从对象中选择属性
+
+如果要从 JavaScript 对象中选择任意数量的属性，实现如下：
+
+```js
+const choice = (obj, ...props) => {
+  return props.reduce((result, prop) => {
+    result[prop] = obj[prop]
+    return result
+  }, {})
+}
+```
+
+`choice` 函数的第一个参数将是我们要从中选择的对象，随后的参数将是我们要保留的键的名称。
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  gender: '女'
+}
+
+console.log(choice(user, 'name', 'age')) // { name: "IU", age: "18" }
+```
+
+可以看到，通过提供 `user` 对象作为第一个参数，然后提供字符串 `name` 和 `age` 作为后续参数，我们可以保留对象中的`name` 和 `age` 属性，而忽略 `gender` 属性。
+
+## 忽略对象的属性
+
+如果要从 JavaScript 对象中省略任意数量的属性，实现如下：
+
+```js
+const ignore = (obj, ...props) => {
+  const result = { ...obj }
+  props.forEach((prop) => delete result[prop])
+  return result
+}
+```
+
+同样，让我们使用相同的 `user` 对象来查看实际效果。
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  gender: '女'
+}
+
+console.log(ignore(user, 'age')) // { name: "IU",  gender: "女" }
+```
+
+可以看到，通过提供 `user` 对象作为第一个参数，字符串 `age` 作为第二个参数，我们能够获得一个省略了 `age` 省略属性的新对象。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\351\201\215\345\216\206\344\273\273\346\204\217\346\267\261\345\272\246\347\232\204\345\257\271\350\261\241.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\351\201\215\345\216\206\344\273\273\346\204\217\346\267\261\345\272\246\347\232\204\345\257\271\350\261\241.md"
new file mode 100644
index 0000000..a468cc7
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \344\270\255\351\201\215\345\216\206\344\273\273\346\204\217\346\267\261\345\272\246\347\232\204\345\257\271\350\261\241.md"	
@@ -0,0 +1,76 @@
+# 如何在 JavaScript 中遍历任意深度的对象
+
+有时我们会发现我们需要遍历一个对象，并在某个任意深度对其执行一些操作。虽然这看起来很困难，但我们可以利用递归、可变性和对象引用来快速完成任务。
+
+## 示例：深层占位符替换
+
+假设，我们有以下数据：
+
+```js
+const user = {
+  name: 'IU',
+  hobby: ['eat', 'sleep', '[placeholder]'],
+  friend: {
+    name: 'UI',
+    hobby: ['eat', 'sleep', 'laugh', '[placeholder]'],
+    friend: {
+      name: 'Lay',
+      hobby: ['dance', 'vocal', '[placeholder]']
+    }
+  }
+}
+```
+
+我们需要做的是，将 `[placeholder]` 替换为我们提供的内容。
+
+### 分析
+
+- 创建一个以对象作为参数的函数。
+- 对于该对象中的每个键，如果该键是 `string`，则执行占位符替换
+- 如果键是 `object`，则将该键返回给初始化函数进行递归！
+
+### JavaScript 实现如下
+
+```js
+const replacePlaceholder = (obj) => {
+  for (let key in obj) {
+    if (typeof obj[key] === 'string')
+      obj[key] = obj[key].replace('[placeholder]', 'rap')
+    if (typeof obj[key] === 'object') replacePlaceholder(obj[key])
+  }
+}
+
+replacePlaceholder(user)
+console.log(JSON.stringify(user, null, 2))
+/*
+{
+  "name": "IU",
+  "hobby": [
+    "eat",
+    "sleep",
+    "rap"
+  ],
+  "friend": {
+    "name": "UI",
+    "hobby": [
+      "eat",
+      "sleep",
+      "laugh",
+      "rap"
+    ],
+    "friend": {
+      "name": "Lay",
+      "hobby": [
+        "dance",
+        "vocal",
+        "rap"
+      ]
+    }
+  }
+}
+*/
+```
+
+可以看到，我们实现了占位符替换。**值得注意的是**，我们没有从 `replacePlaceholder` 函数返回任何东西，而是沿状态树往下执行改变了输入对象！
+
+如果这不是您期望的行为，您可以考虑实现深拷贝，首先拷贝对象，然后对拷贝进行突变。
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \345\257\271\345\255\227\347\254\246\344\270\262\345\216\273\347\251\272.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \345\257\271\345\255\227\347\254\246\344\270\262\345\216\273\347\251\272.md"
new file mode 100644
index 0000000..844b585
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \345\257\271\345\255\227\347\254\246\344\270\262\345\216\273\347\251\272.md"	
@@ -0,0 +1,168 @@
+# 如何在 JavaScript 对字符串去空
+
+在 JavaScript 中 `trim` 用于删除空白。JavaScript 提供了我们几种 `trim()` 方法来去除这些空格。
+
+从字符串中删除空白非常简单。要仅删除前导空格，可以使用 `trimStart()`。要删除尾随空格，可以使用 `trimEnd()`。或者用 `trim()` 将其全部删除
+
+```js
+const str = '   hello   '
+
+string.trimStart() // "hello   "
+string.trimEnd() // "   hello"
+string.trim() // "hello"
+```
+
+所有 `trim()` 方法都将返回一个新字符串。这意味着原始字符串将保持原样。
+
+```js
+const string = '   hello   '
+
+string.trimStart() // 'hello  '
+string.trimEnd() // '   hello'
+string.trim() // 'hello'
+
+string // '   hello   '
+```
+
+其可以删除以下创建的空白：
+
+- 空格
+- 标签
+- 无中断空格
+- 行终止符字符
+
+我们来看几个例子。
+
+## 行终止符字符
+
+> 除了空白符之外，行终止符也可以提高源码的可读性。不同的是，行终止符可以影响 JavaScript 代码的执行。行终止符也会影响自动分号补全的执行。在正则表达式中，行终止符会被 `\s` 匹配。
+
+> 在 ECMAScript 中，只有下列 Unicode 字符会被当成行终止符，其他的行终止符（比如 Next Line、NEL、U+0085 等）都会被当成空白符。
+
+| 编码   | 名称     | 缩写   | 说明                                              | 转义序列 |
+| ------ | -------- | ------ | ------------------------------------------------- | -------- |
+| U+000A | 换行符   | `<LF>` | 在 UNIX 系统中起新行                              | `\n`     |
+| U+000D | 回车符   | `<CR>` | 在 Commodore 和早期的 Mac 系统中起新行            | `\r`     |
+| U+2028 | 行分隔符 | `<LS>` | [Wikipedia](http://en.wikipedia.org/wiki/Newline) |          |
+| U+2029 | 段分隔符 | `<PS>` | [Wikipedia](http://en.wikipedia.org/wiki/Newline) |          |
+
+以上定义来自 MDN [Line terminators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#line_terminators)。我们来看看例子。
+
+```js
+'hello \n'.trim() // 'hello'
+'hello \t'.trim() // 'hello'
+'hello \r'.trim() // 'hello'
+```
+
+## 多行字符串
+
+在 JavaScript 中，我们可以使用**模板字符串**轻松创建多行字符串。`trim` 方法同样可以去除空白部分。
+
+```js
+const multiLine = `
+hello
+
+`
+
+multiline.trim() // 'hello'
+```
+
+## 多个单词
+
+与多行相同，它只 `trim` 第一个单词的开头和最后一个单词的结尾。
+
+```js
+'  Hello IO  '.trim() // 'Hello IO'
+```
+
+## 多行多字
+
+与多行相同，它只修剪第一个单词的开头和最后一个单词的结尾。
+
+```js
+const multiLine = `
+Hello
+
+IO
+
+`
+console.log(multiLine.trim()) // "Hello\n\nIO"
+// 也就是 👇
+/*
+"Hello
+
+IO"
+*/
+```
+
+## trimStart 与 trimLeft
+
+`trimStart` 用于删除前导空白。它还有一个别名 `trimLeft()`，两者做着相同的事情。
+
+```js
+const string = '   Hello   '
+
+string.trimStart() // 'Hello   '
+string.trimLeft() // 'Hello   '
+```
+
+## trimEnd 与 trimRight
+
+`trimEnd` 删除尾部的空白。此方法的别名为 `trimRight()`。同样，两者做着相同的事情。
+
+```js
+const string = '   Hello   '
+
+string.trimEnd() // '   Hello'
+string.trimRight() // '   Hello'
+```
+
+### 选择
+
+我应该该选择哪一个？[ECMAScript 规范](https://ecma-international.org/ecma-262/10.0/index.html#sec-string.prototype.trimstart)给出了很好的解答：
+
+> 首选属性 `trimStart` 和 `trimEnd`。`trimLeft` 和 `trimRight` 属性主要是为了与旧代码兼容而提供的。
+
+## 为什么会有别名？
+
+因为 `trimLeft` 和 `trimRight` 首先被引入。然而，委员会决定提议改为 `trimStart` 和 `trimEnd`。这是因为它与其他内置方法 `padStart` 和 `padEnd` 更为一致。这至少对我来说很有意义的，我认为一致性是关键，使用相同的语言有助于减少混乱。
+
+但出于 Web 兼容性的考虑，他们保留了旧的术语（`trimLeft` 和 `trimRight`）作为别名。因此，如果您的代码使用的是旧方法，没问题，它们仍然可以工作。但是，如果您有这个能力，我建议您将其更改为使用正式的方法，而不是别名，这样您的代码库中就不会有两种不同的方法。记住，这一切都是为了一致性。
+
+## 其他解决方案
+
+```js
+const str = '  hi   '
+str.replace(/ /g, '') // 'hi'
+```
+
+**注意**：此解决方案将删除字符串中的所有空白。
+
+```js
+const str = '  h i   '
+str.replace(/ /g, '') // 'hi'
+```
+
+我们可以编写更加精确的正则，只匹配开头和结尾：
+
+```js
+/**
+ * @desc 删除字符串两边的空格
+ */
+function remove_both_trim(str) {
+  return str.replace(/^\s+|\s+$/g, '')
+}
+
+const str = '      Superman      '
+removeBothTrim(str) // 'Superman'
+```
+
+## 浏览器支持
+
+以下是它们的支持情况：
+
+![trim](https://upload-images.jianshu.io/upload_images/18281896-8ed8ac1e0842972e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![trimStart](https://upload-images.jianshu.io/upload_images/18281896-05bbc887ed0742fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![trimEnd](https://upload-images.jianshu.io/upload_images/18281896-9101c65c54ac44e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \345\260\206\346\225\260\345\255\227\346\213\206\345\210\206\344\270\272\345\215\225\344\270\252\346\225\260\345\255\227.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \345\260\206\346\225\260\345\255\227\346\213\206\345\210\206\344\270\272\345\215\225\344\270\252\346\225\260\345\255\227.md"
new file mode 100644
index 0000000..7db2796
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250 JavaScript \345\260\206\346\225\260\345\255\227\346\213\206\345\210\206\344\270\272\345\215\225\344\270\252\346\225\260\345\255\227.md"	
@@ -0,0 +1,43 @@
+# 如何在 JavaScript 将数字拆分为单个数字
+
+## String.prototype.split()
+
+[`String.prototype.split()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) 方法用于把一个字符串分割成字符串数组。
+
+- 将数字转换为字符串，将其拆分为字符串数组（拼接或其他方法）。
+- 使用 `String.prototype.split()` 与 `Array.prototype.map()` 方法把每个字符串转换成数字。
+
+```js
+const splitToDigit = (n) => (n + '').split('').map(Number)
+
+splitToDigit(100) // [1, 0, 0]
+```
+
+## 扩展运算符
+
+使用扩展运算符（`...`） 和 `Array.prototype.map()` 来简化上面的操作。
+
+```js
+const splitToDigit = (n) => [...(n + '')].map(Number)
+
+splitToDigit(100)
+```
+
+**注意**：扩展运算是通过循环来张开可迭代元素，所以需要先转为字符串形式
+
+## 运算
+
+以数学操作的形式，将数字拆分为单个数字。
+
+```js
+const splitToDigit = (n) => {
+  let num = []
+  while (n > 0) {
+    num.push(n % 10)
+    n = parseInt(n / 10)
+  }
+  return num.reverse()
+}
+
+splitToDigit(100) // [1, 0, 0]
+```
diff --git "a/JavaScript/\345\246\202\344\275\225\345\234\250\347\224\250\346\210\267\345\201\234\346\255\242\350\276\223\345\205\245 JavaScript \345\220\216\346\211\247\350\241\214\345\207\275\346\225\260.md" "b/JavaScript/\345\246\202\344\275\225\345\234\250\347\224\250\346\210\267\345\201\234\346\255\242\350\276\223\345\205\245 JavaScript \345\220\216\346\211\247\350\241\214\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..cc33030
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\345\234\250\347\224\250\346\210\267\345\201\234\346\255\242\350\276\223\345\205\245 JavaScript \345\220\216\346\211\247\350\241\214\345\207\275\346\225\260.md"	
@@ -0,0 +1,72 @@
+# 如何在用户停止输入 JavaScript 后执行函数
+
+我们开发中可能经常会遇到这样的问题，我们想要制作一个输入一个关键字，实时显示需要搜索的内容，但这会使你在每次触发事件时，都会执行你想要执行的筛选函数。但我们只想在用户停止在文本框中键入文本后在执行搜索或过滤某些结果。这时，我们应该怎么做呢？
+
+这就要使用到今天要讲的防抖了，它的作用是：无论触发多少次事件，动作只会执行一次，也就是在一定程度的不活动之后执行函数。它的用处很多，比如上面这个问题。
+
+下面我们完成上面的示例来加深印象。
+
+## 示例：过滤文章
+
+假设我们的文档中有一个要筛选的文章的列表。我们不希望不断地执行 `filter` 函数，但只能在用户 “完成” 键入之后执行。因为我们不知道用户什么时候完成了，所以我们可以猜测，如果用户暂停一秒钟，我们就可以安全地执行该函数（这可能因您的用例而异）。
+
+最终，我们希望效果如下：
+
+![过滤文章](https://upload-images.jianshu.io/upload_images/18281896-6869efb20e77f963.gif?imageMogr2/auto-orient/strip)
+
+HTML 结构如下：
+
+```html
+<input type="text" class="article-filter" />
+<ul class="article-list">
+  <li>HTML</li>
+  <li>JavaScript</li>
+  <li>CSS</li>
+  <li>Vue</li>
+  <li>React</li>
+  <li>Webpack</li>
+</ul>
+```
+
+## 如何工作？
+
+防抖背后的思路是，我们有一个全局 JavaScript 变量，该变量将保存对 `setTimeout` 的引用，用于清除所有未完成的计时器。
+
+然后，我们的输入上有一个 `keyup` 事件监听器。当触发此事件时，我们清除全局计时器（如果它正在运行）。这意味着计时器只有在指定的超时之前没有被清除时才会触发，换句话说，只有在超时之前没有 `keyup` 事件时才会触发！
+
+```js
+let timer
+const input = document.querySelector('.article-filter')
+input.addEventListener('keyup', function (e) {
+  // 清除所有未完成的计时器
+  clearTimeout(timer)
+  // 设置可能清除或不清除的新计时器
+  timer = setTimeout(() => {
+    // ...
+  }, 1000)
+})
+```
+
+## 完整示例
+
+现在，我们大致的结构已经出来了，接着我们将遍历 `.article-list` 元素的所有 `children`，并相应地更新 `style.display` 属性。
+
+```js
+let timer
+const input = document.querySelector('.article-filter')
+input.addEventListener('keyup', function (e) {
+  // 清除所有未完成的计时器
+  clearTimeout(timer)
+  // 设置可能清除或不清除的新计时器
+  timer = setTimeout(() => {
+    const items = document.querySelector('.article-list').children
+    for (let item of items) {
+      item.style.display = item.textContent.includes(e.target.value)
+        ? 'list-item'
+        : 'none'
+    }
+  }, 1000)
+})
+```
+
+> **注意**：以上示例没有对大小写进行区分。
diff --git "a/JavaScript/\345\246\202\344\275\225\347\277\273\350\275\254\345\257\271\350\261\241\344\270\255\347\232\204\351\224\256\345\222\214\345\200\274\357\274\237.md" "b/JavaScript/\345\246\202\344\275\225\347\277\273\350\275\254\345\257\271\350\261\241\344\270\255\347\232\204\351\224\256\345\222\214\345\200\274\357\274\237.md"
new file mode 100644
index 0000000..4aec93d
--- /dev/null
+++ "b/JavaScript/\345\246\202\344\275\225\347\277\273\350\275\254\345\257\271\350\261\241\344\270\255\347\232\204\351\224\256\345\222\214\345\200\274\357\274\237.md"
@@ -0,0 +1,48 @@
+# 如何翻转对象中的键和值？
+
+## for...in
+
+`for...in` 以任意顺序遍历一个对象的除 `Symbol` 以外的**可枚举**属性。实现方法如下：
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  gender: '女'
+}
+
+const reversed = (obj) => {
+  const res = {}
+  for (key in obj) {
+    res[obj[key]] = key
+  }
+  return res
+}
+
+console.log(reversed(user)) // {18: "age", IU: "name", 女: "gender"}
+```
+
+## Object.entries
+
+使用 `Object.entries` 将传入的对象转为一个数组，在使用 `Array.prototype.reduce` 反转对象的键和值。
+
+```js
+const reversed = (obj) =>
+  Object.entries(obj).reduce((acc, [k, v]) => ({ ...acc, [v]: k }), {})
+
+console.log(reversed(user)) // {18: "age", IU: "name", 女: "gender"}
+```
+
+## 第三方库
+
+如果你正好在使用第三方库，一些方法可能可以帮助到你。
+
+使用第三方库如 Lodash，其中的 `_invert(obj)` 用于创建一个 `obj` 键值倒置后的对象。
+
+```js
+const object = { a: 1, b: 2, c: 1 }
+
+_.invert(object) // { '1': 'c', '2': 'b' }
+```
+
+> **注意**：如果 `obj` 有重复的值，后面的值会覆盖前面的值。
diff --git "a/JavaScript/\345\257\204\347\224\237\347\273\204\345\220\210\345\274\217\347\273\247\346\211\277.md" "b/JavaScript/\345\257\204\347\224\237\347\273\204\345\220\210\345\274\217\347\273\247\346\211\277.md"
new file mode 100644
index 0000000..5d6179c
--- /dev/null
+++ "b/JavaScript/\345\257\204\347\224\237\347\273\204\345\220\210\345\274\217\347\273\247\346\211\277.md"
@@ -0,0 +1,72 @@
+# 寄生组合式继承
+
+JavaScript 继承有多种实现方法，大致如下：
+
+- 原型链继承
+- 借用构造函数继承
+- 组合继承
+- 原型式继承
+- 寄生式继承
+- 寄生组合式继承（最理想的继承）
+
+这里我们实现一个寄生组合式继承，因为相比组合继承，它只调用一次父构造函数。
+
+它是一种折中的方案，既保留了组合继承的优点，又避免了它的缺点。其他继承方式也或多或少都存在一些问题。
+
+在组合继承中，每次创建子类实例时都会调用两次父类的构造函数，这样就会导致父类的属性被重复初始化了两次。寄生组合式继承就是为了解决这个问题而提出的。
+
+在寄生组合式继承中，我们首先将父类的实例作为子类的原型，这样子类就可以继承父类的所有原型属性和方法。然后我们再为子类添加一个构造函数，在这个构造函数中调用父类的构造函数，并通过将父类的实例作为子类的实例的一个属性来实现对父类实例属性的继承。这样，每次创建子类实例时只会调用一次父类的构造函数，就避免了组合继承中父类属性被重复初始化的问题。
+
+我们可以使用一个空的 `F` 构造函数去继承 `Parent.prototype`，然后将 `Child.prototype` 去继承 `new F()`，我们就可以通过 `F` 构造函数间接的访问到 `Parent` 原型，也就避免了调用两次父构造函数。
+
+```js
+function Parent(name) {
+  this.name = name
+}
+
+Parent.prototype.getName = function () {
+  return this.name
+}
+
+function Child(name) {
+  Parent.call(this, name)
+  this.name = name
+}
+
+// 该函数其实就是 Object.create 的实现
+// https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20Object.create.md
+function create(obj) {
+  function F() {}
+  F.prototype = obj
+  return new F()
+}
+
+Child.prototype = create(Parent.prototype)
+Parent.prototype.constructor = Child
+
+const child = new Child('O.O')
+child // Child { name: 'O.O' }
+child.getName() // 'O.O'
+
+// Child {
+//   name: 'O.O',
+//   __proto__: { constructor: ƒ Child() }
+// }
+```
+
+如果你想了解其他继承如何实现，以及它们各自的优缺点，可以查阅冴羽的 [JavaScript 深入之继承的多种方式以及优缺点](https://github.com/mqyqingfeng/Blog/issues/16)。
+
+## 扩展：ES6 相比 ES5 的继承有什么区别？
+
+- ES6 中继承的主要区别在于使用了 `class` 关键字，使得继承的语法更类似于传统面向对象编程语言，更加简洁易懂。在 ES6 中，通过使用 `extends` 关键字来实现继承，并在子类的构造函数（`constructor`）中使用 `super()` 方法来调用父类的方法，`super()` 方法会调用父类的构造函数，并将子类的实例作为 `this` 传入父类的构造函数中。
+- ES5 中的继承是通过将子类的原型对象指向父类的实例来实现的。这种方法被称为原型链继承，因为它利用了 JavaScript 中对象之间的原型链。这种语法较为复杂，不够直观。（多种继承方式请看上文提供的链接）
+- `class` 还支持静态方法和静态属性，可以在类上直接调用而不需要实例化。而在 ES5 中则没有这样的语法，需要使用其他方法来实现。
+- 类和构造函数之间有了明确的区分，类是一种更高级的抽象，而构造函数是类的实例化。
+
+ES 类还有一些其他特性：
+
+- `constructor` 类似于构造函数，在实例化对象的时候自动执行。
+- `getter` 和 `setter`，可以实现对属性的读写控制。
+- `class` 类中的方法都是不可枚举的（non-enumerable），这意味着它们不会出现在 `for...in` 或 `Object.keys()` 的结果中。
+
+总的来说，ES6 中的继承使用起来更加方便，语法更加优雅，更加支持面向对象编程思想，并提供了一些额外的特性。但它仍然是基于原型链继承的，与 ES5 中的继承机制基本相同。
diff --git "a/JavaScript/\345\260\206 JSON \346\225\260\346\215\256\344\270\213\350\275\275\344\270\272\346\226\207\344\273\266.md" "b/JavaScript/\345\260\206 JSON \346\225\260\346\215\256\344\270\213\350\275\275\344\270\272\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..181bf91
--- /dev/null
+++ "b/JavaScript/\345\260\206 JSON \346\225\260\346\215\256\344\270\213\350\275\275\344\270\272\346\226\207\344\273\266.md"	
@@ -0,0 +1,42 @@
+# 将 JSON 数据下载为文件
+
+两种方法实现：
+
+- 通过将 JSON 转化为 Data URL 来构造 URL
+- 通过将 JSON 转换为 `Blob` 再转化为 `Object URL` 来构造 URL
+
+首先，我们需要创建一个 `a` 标签来模拟点击下载文件：
+
+```js
+// <a href="..." download>
+function download(url, name) {
+  const a = document.createElement('a')
+  a.download = name
+  a.rel = 'noopener'
+  a.href = url
+  // 触发模拟点击
+  a.dispatchEvent(new MouseEvent('click'))
+  // 或者 a.click()
+}
+```
+
+## 使用 Data URL
+
+```js
+// JSON 数据
+const json = {
+  name: 'O.O',
+  age: 20
+}
+const str = JSON.stringify(json, null, 2)
+
+const dataURL = `data:,${str}`
+download(dataURL, 'test.json')
+```
+
+## Blob 和 Object URL
+
+```js
+const url = URL.createObjectURL(new Blob(str.split('')))
+download(url, 'test.json')
+```
diff --git "a/JavaScript/\345\260\206\346\226\207\344\273\266\346\213\226\345\210\260\345\205\203\347\264\240\344\270\212\346\227\266\347\252\201\345\207\272\346\230\276\347\244\272\350\257\245\345\205\203\347\264\240.md" "b/JavaScript/\345\260\206\346\226\207\344\273\266\346\213\226\345\210\260\345\205\203\347\264\240\344\270\212\346\227\266\347\252\201\345\207\272\346\230\276\347\244\272\350\257\245\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..4c7af26
--- /dev/null
+++ "b/JavaScript/\345\260\206\346\226\207\344\273\266\346\213\226\345\210\260\345\205\203\347\264\240\344\270\212\346\227\266\347\252\201\345\207\272\346\230\276\347\244\272\350\257\245\345\205\203\347\264\240.md"
@@ -0,0 +1,48 @@
+# 将文件拖到元素上时突出显示该元素
+
+假设我们有一个可拖放元素，如下所示：
+
+```html
+<div id="droppable">...</div>
+```
+
+当用户在元素上拖动文件时，我们将高亮显示该元素。例如，元素将有一个虚线边框：
+
+```css
+.dragging {
+  border: 4px dashed #ccc;
+}
+```
+
+当用户拖动文件并将其移动到元素上时，`dragging` 类将被添加到元素中:
+
+```js
+const ele = document.getElementById('droppable')
+
+ele.addEventListener('dragenter', function (e) {
+  e.preventDefault()
+  e.target.classList.add('dragging')
+})
+```
+
+在拖拽事件中，当用户将文件移出或删除元素时，该类将从元素中删除：
+
+```js
+ele.addEventListener('dragover', function (e) {
+  e.preventDefault()
+})
+
+ele.addEventListener('dragleave', function (e) {
+  e.preventDefault()
+  e.target.classList.remove('dragging')
+})
+
+ele.addEventListener('drop', function (e) {
+  e.preventDefault()
+  e.target.classList.remove('dragging')
+})
+```
+
+最后，在处理程序中使用 `e.preventDefault()` 来阻止浏览器执行默认操作。
+
+> [查看效果](https://codepen.io/lio-zero/pen/OJjjGdp)
diff --git "a/JavaScript/\345\260\206\350\241\250\346\240\274\345\257\274\345\207\272\345\210\260 csv.md" "b/JavaScript/\345\260\206\350\241\250\346\240\274\345\257\274\345\207\272\345\210\260 csv.md"
new file mode 100644
index 0000000..c3a7c1f
--- /dev/null
+++ "b/JavaScript/\345\260\206\350\241\250\346\240\274\345\257\274\345\207\272\345\210\260 csv.md"	
@@ -0,0 +1,75 @@
+# 将表格导出到 csv
+
+假设我们有一个 `table` 元素和一个 `button`，用于将表格单元格导出为 CSV，如下所示：
+
+```html
+<table id="exportMe" class="table">
+  ...
+</table>
+
+<button id="export">Export</button>
+```
+
+## 将表格单元格导出为 CSV
+
+下面的方法将 `table` 的所有单元格导出为 CSV 格式。首先，我们选择所有行，在它们上面循环并将每一行导出到 CSV。
+
+在每一行中，我们遍历所有单元格，并使用 `textContent` 检索它们的文本内容。
+
+```js
+const toCsv = function (table) {
+  const rows = table.querySelectorAll('tr')
+
+  return [].slice
+    .call(rows)
+    .map(function (row) {
+      const cells = row.querySelectorAll('th, td')
+      return [].slice
+        .call(cells)
+        .map(function (cell) {
+          return cell.textContent
+        })
+        .join(',')
+    })
+    .join('\n')
+}
+```
+
+## 下载 CSV
+
+下面的方法创建内容为 `text` 的伪 `a` 元素，并触发 `click` 事件。
+
+```js
+const download = function (text, fileName) {
+  const link = document.createElement('a')
+  link.setAttribute(
+    'href',
+    `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`
+  )
+  link.setAttribute('download', fileName)
+
+  link.style.display = 'none'
+  document.body.appendChild(link)
+
+  link.click()
+
+  document.body.removeChild(link)
+}
+```
+
+最后一件事是把所有的部件连接在一起。我们只需要处理导出按钮的 `click` 事件：
+
+```js
+const table = document.getElementById('exportMe')
+const exportBtn = document.getElementById('export')
+
+exportBtn.addEventListener('click', function () {
+  // 导出到 csv
+  const csv = toCsv(table)
+
+  // 下载它
+  download(csv, 'download.csv')
+})
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/KKvvbbo)
diff --git "a/JavaScript/\345\271\263\346\273\221\346\273\232\345\212\250\345\210\260\344\270\200\344\270\252\345\205\203\347\264\240.md" "b/JavaScript/\345\271\263\346\273\221\346\273\232\345\212\250\345\210\260\344\270\200\344\270\252\345\205\203\347\264\240.md"
new file mode 100644
index 0000000..0ee0514
--- /dev/null
+++ "b/JavaScript/\345\271\263\346\273\221\346\273\232\345\212\250\345\210\260\344\270\200\344\270\252\345\205\203\347\264\240.md"
@@ -0,0 +1,160 @@
+# 平滑滚动到一个元素
+
+我们可以通过传递 `behavior: smooth` 平滑滚动到给定元素：
+
+```js
+ele.scrollIntoView({ behavior: 'smooth' })
+```
+
+或将 CSS 属性滚动行为应用于目标元素：
+
+```css
+scroll-behavior: smooth;
+```
+
+> 这两种方法我们之前介绍过，详细内容请查看[滚动到页面顶部的多种实现](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%AE%9E%E7%8E%B0.md)。
+
+IE 和 Safari 中不支持这两种方法，并且不允许自定义动画。
+
+这篇文章介绍了一个平滑滚动的实现，它还允许我们自定义动画效果和持续时间。我们将在一个流行的用例中演示，用户可以通过单击相关的导航按钮在各个部分之间切换。
+
+导航由一些 `a` 标签组成：
+
+```html
+<a href="#section-1" class="trigger"></a>
+<a href="#section-2" class="trigger"></a>
+...
+
+<div id="section-1">...</div>
+<div id="section-2">...</div>
+```
+
+单击该链接将滚动页面至可由 `href` 属性确定的特定元素。
+
+```js
+const triggers = [].slice.call(document.querySelectorAll('.trigger'))
+triggers.forEach(function (ele) {
+  ele.addEventListener('click', clickHandler)
+})
+```
+
+`clickHandler` 方法处理导航元素的单击事件。它根据 `href` 属性确定目标节点。**请注意**，我们将自己滚动到目标部分，因此默认操作将被忽略：
+
+```js
+const clickHandler = function (e) {
+  // 阻止默认操作
+  e.preventDefault()
+
+  // 获取 href 属性
+  const href = e.target.getAttribute('href')
+  const id = href.substr(1)
+  const target = document.getElementById(id)
+
+  scrollToTarget(target)
+}
+```
+
+如果您还没有看到 `scrollToTarget` 方法，请不要担心。顾名思义，该方法将滚动页面到给定的目标。
+
+## 滚动到给定目标
+
+这是这篇文章的主要部分。要滚动到给定的点，我们可以使用 `window.scrollTo(0，y)`，其中 `y` 表示从页面顶部到目标的距离。
+
+> 也可以设置 `behavior: 'smooth'`，但 IE 和 Safari 中不支持该选项。
+>
+> ```js
+> window.scrollTo({ top, left, behavior: 'smooth' })
+> ```
+
+我们要做的是在给定的持续时间内从起点移动到终点。
+
+起点是当前 `y` 轴偏移 `window.pageYOffset`
+
+终点是目标的顶部距离。它可以作为 `target.getBoundingClientRect().top` 进行检索
+
+持续时间为毫秒数。您可以将其更改为可配置选项，但在本文中，它被设置为 800。
+
+```js
+const duration = 800
+
+const scrollToTarget = function (target) {
+  const top = target.getBoundingClientRect().top
+  const startPos = window.pageYOffset
+  const diff = top
+
+  let startTime = null
+  let requestId
+
+  const loop = function (currentTime) {
+    if (!startTime) {
+      startTime = currentTime
+    }
+
+    // 已用时间（毫秒）
+    const time = currentTime - startTime
+
+    const percent = Math.min(time / duration, 1)
+    window.scrollTo(0, startPos + diff * percent)
+
+    if (time < duration) {
+      // 继续前进
+      requestId = window.requestAnimationFrame(loop)
+    } else {
+      window.cancelAnimationFrame(requestId)
+    }
+  }
+  requestId = window.requestAnimationFrame(loop)
+}
+```
+
+如您所见，我们告诉浏览器在下一次绘制之前执行循环函数。第一次，`startTime` 将被初始化为当前时间戳（`currentTime`）。
+
+然后我们计算已经过去了多少毫秒：
+
+```js
+const time = currentTime - startTime
+```
+
+根据经过的时间和持续时间，很容易计算我们移动的百分比数，并滚动到该位置：
+
+```js
+// percent 在 0 到 1 之间
+const percent = Math.min(time / duration, 1)
+window.scrollTo(0, startPos + diff * percent)
+```
+
+最后，如果还有剩余的时间，我们继续循环。否则，我们将取消最后一个请求：
+
+```js
+if (time < duration) {
+  requestId = window.requestAnimationFrame(loop)
+} else {
+  window.cancelAnimationFrame(requestId)
+}
+```
+
+> **良好做法**
+>
+> 当我们需要在给定的持续时间内在给定的点之间移动时，通常会想到使用 `setTimeout()` 或 `setInterval()`。但建议使用 `requestAnimationFrame`，它可以提供更好的动画性能。
+
+## 自定义动画
+
+目前，我们平均每毫秒移动到目标。我们每毫秒移动相同的距离。
+
+如果需要，可以使用其他缓和功能替换当前的线性运动。看看这个网站，想象一下每种放松是如何产生不同的动画的。
+
+下面的代码使用 `easeInQuad` 动画：
+
+```js
+const easeInQuad = function(t) {
+  return t * t
+}
+
+const loop = function(currentTime) {
+  //...
+  const percent = Math.min(time / duration, 1)
+  window.scrollTo(0, startPos + diff * easeInQuad(percent))
+})
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/Jjyyqjj)
diff --git "a/JavaScript/\345\272\217\345\210\227\345\214\226\350\241\250\345\215\225\346\225\260\346\215\256.md" "b/JavaScript/\345\272\217\345\210\227\345\214\226\350\241\250\345\215\225\346\225\260\346\215\256.md"
new file mode 100644
index 0000000..c54f2c3
--- /dev/null
+++ "b/JavaScript/\345\272\217\345\210\227\345\214\226\350\241\250\345\215\225\346\225\260\346\215\256.md"
@@ -0,0 +1,126 @@
+# 序列化表单数据
+
+假设我们有如下 HTML 表单结构：
+
+```html
+<form id="target">
+  <select name="pets" id="pet-select">
+    <option value="">--Please choose an option--</option>
+    <option value="dog">Dog</option>
+    <option value="cat" selected>Cat</option>
+    <option value="hamster">Hamster</option>
+    <option value="parrot">Parrot</option>
+    <option value="spider">Spider</option>
+    <option value="goldfish">Goldfish</option>
+  </select>
+  <select name="friends" multiple>
+    <option value="D.O" selected>D.O</option>
+    <option value="O.O">O.O</option>
+    <option value="K.O" selected>K.O</option>
+  </select>
+  <input name="name" value="KAI" />
+  <input type="password" name="password" value="123456" />
+  <input type="hidden" name="age" value="66" />
+  <textarea name="description">I am Superman</textarea>
+  <input type="checkbox" name="hobby" checked value="sleep" />Sleep
+  <input type="checkbox" name="hobby" value="eat" />Eat
+  <input type="radio" name="sex" checked value="Female" />Female
+  <input type="radio" name="sex" value="Male" />Male
+</form>
+```
+
+**注意**：字段必须具有 `name` 属性。
+
+我们可以使用以下方法序列化表单数据：
+
+```js
+const serializeForm = (formEle) => {
+  const obj = {}
+  const formData = new FormData(formEle)
+  formData.forEach((value, key) => (obj[key] = value))
+  return obj
+}
+```
+
+它已经能获取到大部分值，但是如果您想要支持多选列表或其他具有多个值的表单元素，可以使用如下片段：
+
+```js
+const serializeForm = (formEle) =>
+  Array.from(new FormData(formEle)).reduce(
+    (p, [k, v]) =>
+      Object.assign({}, p, {
+        [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v
+      }),
+    {}
+  )
+```
+
+思路一样，使用更清晰的写法：
+
+```js
+function serializeForm(formEle) {
+  let obj = {}
+  let data = new FormData(formEle)
+  for (let [key, value] of data) {
+    if (obj[key] !== undefined) {
+      if (!Array.isArray(obj[key])) {
+        obj[key] = [obj[key]]
+      }
+      obj[key].push(value)
+    } else {
+      obj[key] = value
+    }
+  }
+  return obj
+}
+```
+
+## 将表单数据序列化为查询字符串
+
+以下方法序列化由其字段的 `name` 和 `value` 组成的表单数据：
+
+```js
+const serialize = (formEle) => {
+  // 获取所有字段
+  const fields = [].slice.call(formEle.elements, 0)
+
+  return fields
+    .map((ele) => {
+      const name = ele.name
+      const type = ele.type
+
+      // 忽视：没有 name 的字段、禁用（disabled）字段、文件（file）类型、未选中
+      checkbox / radio
+      if (
+        !name ||
+        ele.disabled ||
+        type === 'file' ||
+        (/(checkbox|radio)/.test(type) && !ele.checked)
+      ) {
+        return ''
+      }
+
+      // 多选
+      if (type === 'select-multiple') {
+        return [...ele.options]
+          .map((opt) => {
+            return opt.selected
+              ? `${encodeURIComponent(name)}=${encodeURIComponent(opt.value)}`
+              : ''
+          })
+          .filter((item) => item)
+          .join('&')
+      }
+
+      return `${encodeURIComponent(name)}=${encodeURIComponent(ele.value)}`
+    })
+    .filter((item) => item)
+    .join('&')
+}
+```
+
+> [测试效果](https://codepen.io/lio-zero/pen/GROQMRB)
+
+## 更多资料
+
+查看 [How to convert FormData (HTML5 object) to JSON](https://stackoverflow.com/questions/41431322/how-to-convert-formdata-html5-object-to-json) 以了解更多内容。
diff --git "a/JavaScript/\346\211\223\345\215\260\345\233\276\345\203\217.md" "b/JavaScript/\346\211\223\345\215\260\345\233\276\345\203\217.md"
new file mode 100644
index 0000000..0f05edf
--- /dev/null
+++ "b/JavaScript/\346\211\223\345\215\260\345\233\276\345\203\217.md"
@@ -0,0 +1,71 @@
+# 打印图像
+
+通过单击浏览器菜单的 **Print** 选项或按快捷键 `Ctrl+P`（或 macOS 上的 `command+P`），可以打印网页。调用 `window.print()` 方法将提供打印整个页面的相同结果。
+
+为了打印图像，我们可以将 `img` 元素插入到伪 `iframe` 元素中，并在 `iframe` 的窗口上调用 `print()` 方法。
+
+假设页面具有图像元素和打印按钮，结构如下所示：
+
+```html
+<img
+  id="image"
+  src="https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
+/>
+<button class="print-btn" id="print">打印</button>
+```
+
+可以在按钮的单击事件中处理打印图像：
+
+```js
+const printBtn = document.getElementById('print')
+
+printBtn.addEventListener('click', function () {
+  // ...
+})
+```
+
+创建一个假 `iframe`
+
+```js
+// 创建一个假 iframe
+const iframe = document.createElement('iframe')
+
+// 隐藏它
+iframe.style.height = 0
+iframe.style.visibility = 'hidden'
+iframe.style.width = 0
+
+// 设置 iframe 的源
+iframe.setAttribute('srcdoc', '<html><body></body></html>')
+
+document.body.appendChild(iframe)
+```
+
+尽管 `iframe` 源是一个简单的 HTML，而不是 `src` 属性定义的远程路径，但我们必须等待 `iframe` 完全加载：
+
+```js
+iframe.addEventListener('load', function () {
+  // 克隆图像
+  const image = document.getElementById('image').cloneNode()
+  image.style.maxWidth = '100%'
+
+  // 将图像附加到 iframe 的 body 上
+  const body = iframe.contentDocument.body
+  body.style.textAlign = 'center'
+  body.appendChild(image)
+})
+```
+
+加载图像后，立即在 `iframe` 的窗口上调用 `print()` 方法：
+
+```js
+iframe.addEventListener('load', function () {
+  // ...
+  image.addEventListener('load', function () {
+    // 当图像准备就绪时调用打印
+    iframe.contentWindow.print()
+  })
+})
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/wveVwMo)
diff --git "a/JavaScript/\346\213\226\345\212\250\351\241\265\351\235\242\346\273\232\345\212\250.md" "b/JavaScript/\346\213\226\345\212\250\351\241\265\351\235\242\346\273\232\345\212\250.md"
new file mode 100644
index 0000000..17e224b
--- /dev/null
+++ "b/JavaScript/\346\213\226\345\212\250\351\241\265\351\235\242\346\273\232\345\212\250.md"
@@ -0,0 +1,102 @@
+# 拖动页面滚动
+
+用户经常使用鼠标在可滚动容器中滚动。除此之外，一些应用程序还允许用户通过拖动元素来滚动。
+
+这篇文章向您展示了一种使用 vanilla JavaScript 实现该功能的简单方法。
+
+假设我们有一个可滚动的容器，如下所示：
+
+```html
+<div id="container" class="container">...</div>
+```
+
+元素必须至少有两个 CSS 属性：
+
+```css
+.container {
+  cursor: grab;
+  overflow: auto;
+}
+```
+
+`cursor: grab` 表示该元素可以点击和拖动。
+
+## 滚动到指定位置
+
+只要元素是可滚动的，我们就可以通过设置 `scrollTop` 或 `scrollLeft` 属性将其滚动到给定位置：
+
+```js
+const ele = document.getElementById('container')
+ele.scrollTop = 100
+ele.scrollLeft = 150
+```
+
+## 拖动滚动
+
+实现非常简单。通过使用 `mousedown` 用户单击元素时发生的事件：
+
+```js
+let pos = {
+  top: 0,
+  left: 0,
+  x: 0,
+  y: 0
+}
+
+const mouseDownHandler = function (e) {
+  pos = {
+    // 当前滚动
+    left: ele.scrollLeft,
+    top: ele.scrollTop,
+    // 获取当前鼠标位置
+    x: e.clientX,
+    y: e.clientY
+  }
+
+  document.addEventListener('mousemove', mouseMoveHandler)
+  document.addEventListener('mouseup', mouseUpHandler)
+}
+```
+
+`pos` 存储当前的滚动和鼠标位置。当用户移动鼠标时，我们计算它移动了多远，然后滚动到元素到相同的位置：
+
+```js
+const mouseMoveHandler = function (e) {
+  // 鼠标移动了多远
+  const dx = e.clientX - pos.x
+  const dy = e.clientY - pos.y
+
+  // 滚动元素
+  ele.scrollTop = pos.top - dy
+  ele.scrollLeft = pos.left - dx
+}
+```
+
+## 良好做法
+
+正如你看到的上面的 `left`、`top`、`x` 和 `y` 属性是相互关联的。最好将它们封装在单个变量中，`pos` 而不是创建四个变量。
+
+最后，我们可以通过在用户开始移动鼠标时设置一些 CSS 属性来改善用户体验：
+
+```js
+const mouseDownHandler = function (e) {
+  // 改变光标并阻止用户选择文本
+  ele.style.cursor = 'grabbing'
+  ele.style.userSelect = 'none'
+  // ...
+}
+```
+
+释放鼠标时，移除事件并重置这些 CSS 属性：
+
+```js
+const mouseUpHandler = function () {
+  document.removeEventListener('mousemove', mouseMoveHandler)
+  document.removeEventListener('mouseup', mouseUpHandler)
+
+  ele.style.cursor = 'grab'
+  ele.style.removeProperty('user-select')
+}
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/QWMgLPb)
diff --git "a/JavaScript/\346\225\260\347\273\204\344\270\255\347\232\204\346\234\200\345\244\247\345\200\274\345\222\214\346\234\200\345\260\217\345\200\274.md" "b/JavaScript/\346\225\260\347\273\204\344\270\255\347\232\204\346\234\200\345\244\247\345\200\274\345\222\214\346\234\200\345\260\217\345\200\274.md"
new file mode 100644
index 0000000..c1747b8
--- /dev/null
+++ "b/JavaScript/\346\225\260\347\273\204\344\270\255\347\232\204\346\234\200\345\244\247\345\200\274\345\222\214\346\234\200\345\260\217\345\200\274.md"
@@ -0,0 +1,155 @@
+# 数组中的最大值和最小值
+
+本文将介绍几种常见的获取数组中的最大值和最小值的方式。
+
+## For 循环
+
+一般关于实现数组的某种操作，可能最先想到的就是 `for` 循环吧！下面是它的实现。
+
+```js
+let min = (arr) => {
+  let greatest = arr[0]
+  for (let i = 0; i < arr.length; i++) {
+    if (greatest > arr[i]) {
+      greatest = arr[i]
+    }
+  }
+  return greatest
+}
+
+let max = (arr) => {
+  let greatest = 0
+  for (let i = 0; i < arr.length; i++) {
+    if (greatest < arr[i]) {
+      greatest = arr[i]
+    }
+  }
+  return greatest
+}
+
+console.log(max(arr)) // 25
+console.log(min(arr)) // 1
+```
+
+## Math.min()/max()
+
+内置函数 [`Math.max()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max) 和 [`Math.min()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/min) 可以分别返回一组数中的最大值和最小值，其可以接受任意数量的参数。
+
+```js
+Math.max(25, 5, 15, 6, 9, 1, 3) // 25
+Math.min(25, 5, 15, 6, 9, 1, 3) // 1
+```
+
+这很方便，但它不能直接用于数组。我们需要一些其他的方法来帮助我们使用它。
+
+### call/apply
+
+[`Function.prototype.apply()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 方法调用一个具有给定 `this` 值的函数，以及以一个数组的形式提供的参数。
+
+[`Function.prototype.call()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call) 方法使用一个指定的 `this` 值和单独给出的一个或多个参数来调用一个函数。
+
+- `apply()` 第二个参数传递 `arr` 数组，使用数组中的所有值作为函数的参数。
+- `call()` 第二个参数传递 `arr` 数组，需要使用扩展运算符，将其展开作为其函数的参数。
+
+```js
+let max = (arr) => Math.max.apply(null, arr)
+let min = (arr) => Math.min.call(null, ...arr)
+
+console.log(max(arr)) // 25
+console.log(min(arr)) // 1
+```
+
+### 扩展运算符
+
+更为简单的方式是，直接使用 ES6 的扩展运算符（`...`）展开数组。
+
+```js
+console.log(Math.max(...arr)) // 25
+console.log(Math.min(...arr)) // 1
+```
+
+## Array.prototype.sort()
+
+使用 `Array.prototype.sort` 先对数组进行排序，在获取数组的第一个元素。
+
+```js
+let arr = [25, 5, 15, 6, 9, 1, 3]
+
+let max = (arr) => arr.sort((a, b) => b - a)[0]
+let min = (arr) => arr.sort((a, b) => a - b)[0]
+
+console.log(max(arr)) // 25
+console.log(min(arr)) // 1
+```
+
+如果你还不熟，可以看看[如何在 JavaScript 中对对象数组进行排序？](https://github.com/lio-zero/blog/blob/master/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%AF%B9%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%EF%BC%9F.md)了解 `sort()` 的用法。
+
+### 任意数量的最大值
+
+从提供的数组返回 `n` 个最大元素。
+
+- 使用 `Array.prototype.sort()` 和扩展运算符（`...`）配合，创建数组的浅拷贝，并按降序排序。
+- 使用 `Array.prototype.slice()` 获取指定数量的元素。
+- 省略第二个参数 `n`，得到一个单元素数组。
+- 如果 `n` 大于或等于提供的数组长度，则返回原始数组（按降序排序）。
+
+```js
+const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n)
+
+maxN([25, 5, 15, 6, 9, 1, 3]) // [25]
+maxN([25, 5, 15, 6, 9, 1, 3], 3) // [25, 15, 9]
+```
+
+### 任意数量的最小值
+
+从提供的数组返回 `n` 个最小元素。
+
+- 使用 `Array.prototype.sort()` 和扩展运算符（`...`）配合，创建数组的浅拷贝，并按升序排序。
+- 使用 `Array.prototype.slice()` 获取指定数量的元素。
+- 省略第二个参数 `n`，得到一个单元素数组。
+- 如果 `n` 大于或等于提供的数组长度，则返回原始数组（按升序排序）。
+
+```js
+const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n)
+
+minN([25, 5, 15, 6, 9, 1, 3]) // [1]
+minN([25, 5, 15, 6, 9, 1, 3], 3) // [1, 3, 5]
+```
+
+这两个示例来自 30 seconds of code 的 [maxN](https://www.30secondsofcode.org/js/s/max-n) 和 [minN](https://www.30secondsofcode.org/js/s/min-n)
+
+## 复杂情况 — 数组对象
+
+对于更复杂的情况，即在数组对象中查找最小/最大值。
+
+### 最小值
+
+使用提供的函数将每个元素映射到一个值后，返回数组的最小值。
+
+- 使用 `Array.prototype.map()` 将每个元素映射到 `fn` 所返回的值。
+- 使用 `Math.min()` 获得的最小值。
+
+```js
+const minBy = (arr, fn) =>
+  Math.min(...arr.map(typeof fn === 'function' ? fn : (val) => val[fn]))
+
+minBy([{ n: 4 }, { id: 2 }, { id: 8 }, { id: 6 }], (x) => x.id) // 2
+minBy([{ id: 4 }, { id: 2 }, { id: 8 }, { id: 6 }], 'id') // 2
+```
+
+### 最大值
+
+使用提供的函数将每个元素映射到一个值后，返回数组的最大值。
+
+- 使用 `Array.prototype.map()` 将每个元素映射到 `fn` 所返回的值。
+- 使用 `Math.max()` 获取最大值。
+
+```js
+const maxBy = (arr, fn) =>
+  Math.max(...arr.map(typeof fn === 'function' ? fn : (val) => val[fn]))
+
+maxBy([{ id: 4 }, { id: 2 }, { id: 8 }, { id: 6 }], (x) => x.id) // 8
+maxBy([{ id: 4 }, { id: 2 }, { id: 8 }, { id: 6 }], 'id') // 8
+```
+
+这两个示例来自 30 seconds of code 的 [min-by](https://www.30secondsofcode.org/js/s/min-by) 和 [max-by](https://www.30secondsofcode.org/js/s/max-by)。
diff --git "a/JavaScript/\346\225\260\347\273\204\345\271\263\345\235\207\345\200\274\344\270\216\344\270\255\344\275\215\346\225\260.md" "b/JavaScript/\346\225\260\347\273\204\345\271\263\345\235\207\345\200\274\344\270\216\344\270\255\344\275\215\346\225\260.md"
new file mode 100644
index 0000000..86db735
--- /dev/null
+++ "b/JavaScript/\346\225\260\347\273\204\345\271\263\345\235\207\345\200\274\344\270\216\344\270\255\344\275\215\346\225\260.md"
@@ -0,0 +1,56 @@
+# 数组平均值与中位数
+
+![中位数](https://upload-images.jianshu.io/upload_images/18281896-1dec961c1e4a214a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 平均值
+
+要取得平均值，我们需要将数字求和，然后除以 `values` 的长度，步骤如下：
+
+- 取得数组长度（`length`）
+- 求和（`sum`）
+- 取得平均值（`sum/length`）
+
+```js
+let values = [44, 56, 3, 66, 10, 4, 100, 23]
+
+const avg = (arr) => {
+  let len = arr.length
+  let total = arr.reduce((prev, cur) => (cur += prev))
+  return (total /= len)
+}
+
+console.log(avg(values)) // 38.25
+```
+
+## 中位数
+
+取得中位数的步骤是：
+
+- 将数组排序
+- 取得中位数
+
+```js
+let values = [44, 56, 3, 66, 10, 4, 100, 23]
+
+const median = (arr) => {
+  arr.sort((a, b) => a - b)
+  let lowMiddle = Math.floor((arr.length - 1) / 2)
+  let highMiddle = Math.ceil((arr.length - 1) / 2)
+  return (arr[lowMiddle] + arr[highMiddle]) / 2
+}
+
+console.log(median(values)) // 33.5
+```
+
+或者使用[无符号右移](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift)操作符：
+
+```js
+let values = [44, 56, 3, 66, 10, 4, 100, 23]
+
+const median = (arr) => {
+  arr.sort((a, b) => a - b)
+  return (arr[(arr.length - 1) >> 1] + arr[arr.length >> 1]) / 2
+}
+
+console.log(median(values)) // 33.5
+```
diff --git "a/JavaScript/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226.md" "b/JavaScript/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226.md"
new file mode 100644
index 0000000..13a7f51
--- /dev/null
+++ "b/JavaScript/\346\225\260\347\273\204\346\211\201\345\271\263\345\214\226.md"
@@ -0,0 +1,100 @@
+# 数组扁平化
+
+数组扁平化是指将一个多维数组变成一维数组。如：
+
+```js
+[1, [[2, 3], 4]] --> [1, 2, 3, 4]
+```
+
+## Array.prototype.flat()
+
+ES10 引入了 `Array.prototype.flat()` 方法，使扁平数组变的简单。
+
+```js
+const arr = [1, [2, [3, [4, 5]]], 6]
+
+// 你可以指定展开多少层
+arr.flat(1) // [1, 2, [3, [4, 5]], 6]
+arr.flat(2) // [1, 2, 3, [4, 5], 6]
+
+// 使用 Infinity 作为参数，可以展开无限嵌套数组
+arr.flat(Infinity) // [1, 2, 3, 4, 5, 6]
+```
+
+## Array.prototype.toString() 和 Array.prototype.join()
+
+如果数组的元素都是数字，那么我们可以考虑使用 `Array.prototype.toString()` 或 `Array.prototype.join()` 方法。
+
+调用数组的 `Array.prototype.toString()` 方法，将数组转为字符串再用 `String.prototype.split()` 分割还原为数组
+
+```js
+const flatten = (arr) =>
+  arr
+    .toString()
+    .split(',')
+    .map((item) => +item)
+
+flatten(arr) // [1, 2, 3, 4, 5, 6]
+```
+
+`Array.prototype.join()` 也可以实现同样的效果：
+
+```js
+const flatten = (arr) =>
+  arr
+    .join(',')
+    .split(',')
+    .map((item) => +item)
+
+flatten(arr) // [1, 2, 3, 4, 5, 6]
+```
+
+## 递归
+
+对于具有更深层嵌套的数组，可以使用递归。
+
+使用 `Array.prototype.reduce()` 遍历数组的每一项，若值为数组则递归遍历，否则使用 `Array.prototype.concat()` 拼接。
+
+```js
+const flatten = (arr) => {
+  return arr.reduce(
+    (acc, val) =>
+      Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val),
+    []
+  )
+}
+
+flatten(arr) // [1, 2, 3, 4, 5, 6]
+```
+
+## 扩展运算符
+
+使用 `Array.prototype.concat()` 配合扩展运算符（`...`）展开一级嵌套数组
+
+```js
+// 这仅适用于一级嵌套数组
+[].concat(...arr) // [1, 2, [3, [4, 5]], 6]
+
+// 较旧的浏览器解决方案
+[].concat.apply([], arr) // [1, 2, [3, [4, 5]], 6]
+```
+
+在配合 `while` 循环，只要有一个元素有数组，那么循环继续
+
+```js
+const flatten = (arr) => {
+  while (arr.some(Array.isArray)) {
+    arr = [].concat(...arr)
+  }
+  return arr
+}
+
+flatten(arr) // [1, 2, 3, 4, 5, 6]
+```
+
+## 序列化后正则
+
+```js
+const str = `[${JSON.stringify(arr).replace(/(\[|\])/g, '')}]`
+JSON.parse(str) // [1, 2, 3, 4, 5, 6]
+```
diff --git "a/JavaScript/\346\227\240\346\241\206\346\236\266 Web Components.md" "b/JavaScript/\346\227\240\346\241\206\346\236\266 Web Components.md"
new file mode 100644
index 0000000..f15d789
--- /dev/null
+++ "b/JavaScript/\346\227\240\346\241\206\346\236\266 Web Components.md"	
@@ -0,0 +1,38 @@
+# 无框架 Web Components
+
+## 什么是 Web Components？
+
+> [Web Components](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components) 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。不需要需要任何外部库来工作。
+
+## 特征
+
+- **Custom Elements**
+- **Shadow DOM**
+- **HTML Templates**
+- **HTML Import** 允许导入的外部 HTML 文档。
+
+## Web Components 是如何工作的
+
+我们经常使用的 HTML5 `<video>` 和 `<audio>` 元素，它们允许用户使用一系列内部按钮和控件播放、暂停、回放和快进媒体。默认情况下，浏览器处理布局、样式和功能。
+
+Web Components 允许你添加自己的 HTML 自定义元素。元素名称必须包含连字符（`-`），以确保它不会与正式 HTML 元素冲突。
+
+然后为你的自定义元素注册一个 ES6 类。它可以附加 DOM 元素，比如按钮、标题、段落等。为了确保这些元素不会与页面的其余部分冲突，你可以将它们附加到具有自己作用域样式的 Shadow DOM 内部。你可以将其视为迷你版 `<iframe>`，尽管 CSS 属性（如字体和颜色）是通过级联继承的。
+
+最后，你可以使用可复用的 HTML Templates 将内容附加到 Shadow DOM 中，HTML Templates 通过标签提供一些配置。
+
+与框架相比，标准 Web Components 是最基本的。它们不包括数据绑定和状态管理等功能，但 Web Components 具有一些自身优势：
+
+- 它们轻巧快速
+- 它们可以实现单独用 JavaScript 无法实现的功能（例如 Shadow DOM）
+- 它们可以在任何 JavaScript 框架内工作
+- 它们将得到浏览器的支持，也就是新特性红利。
+
+## 更多资料
+
+- 推荐阮一峰老师的 [Web Components 入门实例教程](https://www.ruanyifeng.com/blog/2019/08/web_components.html)，通过一个示例帮助你如何使用 Web Component API 开发组件。
+- 关于 Web Components 的讨论，可以查阅 [WEBCOMPONENTS](https://www.webcomponents.org/)，其中提供了很多 Web Components 及相关 Web 规范的讨论。
+- [Web components](https://zh.javascript.info/web-components)
+- [The broken promise of Web Components](https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/)
+- [Regarding the broken promise of Web Components](https://robdodson.me/posts/regarding-the-broken-promise-of-web-components/)
+- [精读《Web Components 的困境》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/10.%E7%B2%BE%E8%AF%BB%E3%80%8AWeb%20Components%20%E7%9A%84%E5%9B%B0%E5%A2%83%E3%80%8B.md)
diff --git "a/JavaScript/\346\230\276\347\244\272\346\236\204\351\200\240\345\207\275\346\225\260\346\250\241\345\274\217 \342\200\224 Revealing Constructor Pattern.md" "b/JavaScript/\346\230\276\347\244\272\346\236\204\351\200\240\345\207\275\346\225\260\346\250\241\345\274\217 \342\200\224 Revealing Constructor Pattern.md"
new file mode 100644
index 0000000..7aed652
--- /dev/null
+++ "b/JavaScript/\346\230\276\347\244\272\346\236\204\351\200\240\345\207\275\346\225\260\346\250\241\345\274\217 \342\200\224 Revealing Constructor Pattern.md"	
@@ -0,0 +1,61 @@
+# 显示构造函数模式 — Revealing-Constructor-Pattern
+
+**显示构造函数模式** — 使用 `public` 和 `private` 方法创建多个脚本实例。
+
+以下是一个简单的模板：
+
+```js
+var MyPlugin = (function () {
+  'use strict'
+
+  /**
+   * 创建构造函数对象
+   */
+  var Constructor = function () {
+    // 私有变量
+    var publicAPIs = {}
+
+    // 方法
+    /**
+     * 私有方法
+     */
+    var somePrivateMethod = function () {
+      // Code goes here...
+    }
+
+    /**
+     * 公共方法
+     */
+    publicAPIs.doSomething = function () {
+      somePrivateMethod()
+      // Code goes here...
+    }
+
+    /**
+     * 另外一个方法，用于插件初始化
+     */
+    publicAPIs.init = function (options) {
+      // Code goes here...
+    }
+
+    // 返回公共 API
+    return publicAPIs
+  }
+
+  // 返回构造函数
+  return Constructor
+})()
+```
+
+使用：
+
+```js
+// 实例化插件
+var plugin = new MyPlugin()
+
+// 使用公共方法
+plugin.doSomething()
+plugin.init()
+```
+
+您可以更改 `MyPlugin` 为您想用于插件的任何命名空间。构造函数以大写字母开头。
diff --git "a/JavaScript/\346\230\276\347\244\272\346\250\241\345\235\227\346\250\241\345\274\217 \342\200\224 Revealing Module Pattern.md" "b/JavaScript/\346\230\276\347\244\272\346\250\241\345\235\227\346\250\241\345\274\217 \342\200\224 Revealing Module Pattern.md"
new file mode 100644
index 0000000..159ce04
--- /dev/null
+++ "b/JavaScript/\346\230\276\347\244\272\346\250\241\345\235\227\346\250\241\345\274\217 \342\200\224 Revealing Module Pattern.md"	
@@ -0,0 +1,50 @@
+# 显示模块模式 — Revealing-Module-Pattern
+
+**显示模块模式**允许您将大部分变量和函数保留在全局范围之外，但将其中一些公开可用。
+
+例如：像 `lodash` 这样的辅助库。
+
+以下是一个简单的模板：
+
+```js
+var myPlugin = (function () {
+  'use strict'
+
+  // 私有变量
+  var publicAPIs = {}
+
+  /**
+   * 私有方法
+   */
+  var somePrivateMethod = function () {
+    // Code goes here...
+  }
+
+  /**
+   * 公共方法
+   */
+  publicAPIs.doSomething = function () {
+    somePrivateMethod()
+    // Code goes here...
+  }
+
+  /**
+   * 另一个公共方法，用于插件的初始化
+   */
+  publicAPIs.init = function (options) {
+    // Code goes here...
+  }
+
+  // 最后，返回公共的 API 供调用
+  return publicAPIs
+})()
+```
+
+使用：
+
+```js
+myPlugin.doSomething()
+myPlugin.init()
+```
+
+您可以更改 `myPlugin` 为您想用于插件的任何命名空间。
diff --git "a/JavaScript/\346\233\264\346\224\271\347\275\221\347\253\231\345\233\276\346\240\207.md" "b/JavaScript/\346\233\264\346\224\271\347\275\221\347\253\231\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..2a38a3a
--- /dev/null
+++ "b/JavaScript/\346\233\264\346\224\271\347\275\221\347\253\231\345\233\276\346\240\207.md"
@@ -0,0 +1,56 @@
+# 更改网站图标
+
+以下方法将图标更改为 URL：
+
+```js
+const setFavicon = (url) => {
+  // 找到当前的图标元素
+  const favicon = document.querySelector('link[rel="icon"]')
+  if (favicon) {
+    // 更新新链接
+    favicon.href = url
+  } else {
+    // 创建新的 link
+    const link = document.createElement('link')
+    link.rel = 'icon'
+    link.href = url
+
+    // 附加到 head 元素
+    document.head.appendChild(link)
+  }
+}
+```
+
+当您想动态更新图标时，例如，更新到社交网站中的用户图标时：
+
+```js
+setFavicon('/path/to/user/profile/icon.ico')
+```
+
+## 使用表情符号作为收藏夹
+
+请注意，`setFavicon()`方法接受 `favicon` 的 URL。我们可以通过传递自定义 URL 来做一些很酷的事情。
+
+在下面的代码中，我们创建了一个 `canvas` 元素，用特定的表情符号填充它并获取自定义 URL：
+
+```js
+const emojiFavicon = (emoji) => {
+  // 创建画布元素
+  const canvas = document.createElement('canvas')
+  canvas.height = 64
+  canvas.width = 64
+
+  // 获取画布上下文
+  const context = canvas.getContext('2d')
+  context.font = '64px serif'
+  context.fillText(emoji, 0, 64)
+
+  // 获取自定义网址
+  const url = canvas.toDataURL()
+
+  // 更新图标
+  setFavicon(url)
+}
+
+emojiFavicon('🎉')
+```
diff --git "a/JavaScript/\346\236\204\351\200\240\345\207\275\346\225\260\346\250\241\345\274\217 \342\200\224 Constructor Pattern.md" "b/JavaScript/\346\236\204\351\200\240\345\207\275\346\225\260\346\250\241\345\274\217 \342\200\224 Constructor Pattern.md"
new file mode 100644
index 0000000..29e3665
--- /dev/null
+++ "b/JavaScript/\346\236\204\351\200\240\345\207\275\346\225\260\346\250\241\345\274\217 \342\200\224 Constructor Pattern.md"	
@@ -0,0 +1,63 @@
+# 构造函数模式 — Constructor Pattern
+
+**构造函数模式** — 创建多个共享方法但包含唯一信息的脚本实例。
+
+例如 `jQuery` 这样的 DOM 操作库。
+
+以下是一个简单的模板：
+
+```js
+var MyPlugin = (function () {
+  'use strict'
+
+  /**
+   * 创建构造函数对象
+   */
+  function Constructor(selector) {
+    this.nodes = document.querySelectorAll(selector)
+  }
+
+  /**
+   * 循环遍历每个元素
+   */
+  Constructor.prototype.forEach = function (callback) {
+    for (var i = 0; i < this.nodes.length; i++) {
+      callback(this.nodes[i], i)
+    }
+  }
+
+  /**
+   * 为每个元素添加一个类
+   */
+  Constructor.prototype.addClass = function (className) {
+    this.forEach(function (node) {
+      node.classList.add(className)
+    })
+  }
+
+  // 静态构造方法
+  /**
+   * 获取页面的标签种类
+   */
+  Constructor.tagNameList = function () {
+    return Array.from(document.getElementsByTagName('*')).map((v) => v.tagName)
+  }
+
+  // 返回构造函数
+  return Constructor
+})()
+```
+
+使用：
+
+```js
+MyPlugin.tagNameList() // [...]
+
+// 创建构造函数的新实例
+var headings = new MyPlugin('h2')
+
+// 运行方法
+headings.addClass('heading-big')
+```
+
+您可以更改 `MyPlugin` 为您想用于插件的任何命名空间。构造函数以大写字母开头。
diff --git "a/JavaScript/\346\237\257\351\207\214\345\214\226.md" "b/JavaScript/\346\237\257\351\207\214\345\214\226.md"
new file mode 100644
index 0000000..3490cb3
--- /dev/null
+++ "b/JavaScript/\346\237\257\351\207\214\345\214\226.md"
@@ -0,0 +1,122 @@
+# 柯里化
+
+**柯里化（Currying）**是 lambda 演算中的一个概念。
+
+柯里化是一个函数，它一次接受一个参数，并返回一个新函数，该函数期待下一个参数。它是一种函数转换，将 `f(a,b,c)` 转换为可以被以 `f(a)(b)(c)` 的形式进行调用。
+
+## JavaScript 中的柯里化是什么？
+
+柯里化简单地说就是计算具有多个参数的函数，并将它们分解为具有单个参数的函数序列。
+
+换句话说，柯里化是一个函数，而不是一次获取所有参数，获取第一个参数并返回一个新函数，该函数获取第二个参数并返回一个新函数，该函数获取第三个参数，以此类推，直到所有参数都完成。
+
+## 为什么要用柯里化？
+
+柯里化之所以理想，有几个原因：
+
+- 柯里化是一种检查方法，确保你在继续之前得到了所需的一切
+- 它可以帮助您避免一次又一次地传递同一个变量（参数复用）
+- 它将您的函数划分为多个较小的功能，可以处理一项职责。这使你的函数更纯粹，更不容易出错和产生副作用
+- 在函数式编程中，它用于创建高阶函数
+- 这可能是个人喜好，增强代码可读性
+
+## 实现柯里化
+
+柯里化是一个接受多个参数的函数。它将把这个函数转换成一系列函数，每个小函数都接受一个参数。
+
+一个简单累加数示例：
+
+```js
+// 非柯里化
+const add = (a, b, c) => {
+  return a + b + c
+}
+console.log(add(2, 3, 5)) // 10
+
+// 柯里化
+const addCurry = (a) => {
+  return (b) => {
+    return (c) => {
+      return a + b + c
+    }
+  }
+}
+
+console.log(addCurry(2)(3)(5)) // 10
+```
+
+以上实现柯里化更简便的方法是，利用 ES6 的箭头函数特性帮助我们编写更少的代码：
+
+```js
+const addCurry = (a) => (b) => (c) => a + b + c
+
+console.log(addCurry(2)(3)(5)) // 10
+```
+
+高级柯里化：
+
+```js
+const curry = (fn) => {
+  return (curried = (...args) => {
+    if (fn.length !== args.length) {
+      return curried.bind(null, ...args)
+    }
+    return fn(...args)
+  })
+}
+
+const totalNum = (x, y, z) => x + y + z
+const curriedTotal = curry(totalNum)
+
+console.log(curriedTotal(10)(20)(30)) // 60
+```
+
+在上面的例子中，我们创建了一个需要固定数量参数的函数。
+
+它接收一个函数 `curry` 作为外部函数。这个函数是一个包装函数。它返回另一个名为 `curried` 的函数，该函数接收带有扩展运算符 `(...args)` 的参数，并比较函数长度 `fn.length`。
+
+函数长度意味着无论我们在这里传递多少个参数，它都会反映在函数的 `length` 属性中。
+
+但是每次参数都会增加。如果我们需要的参数数量不相等，它将返回 `curried`。如果我们调用 `bind`，就会创建一个新函数并传递 `(...args)`。
+
+> **注意**：`bind` 创建了一个新函数。
+
+## 示例：操作 DOM
+
+以下是一个简单的使用柯里化函数操作 DOM 示例：
+
+```js
+const updateElemText = (id) => (content) => (document.querySelector(`#${id}`).textContent = content)
+
+const updateHeaderText = updateElemText('header')
+updateHeaderText('Hello D.O!')
+```
+
+## 柯里化与偏函数
+
+既然你知道了柯里化的工作原理，那么**柯里化和偏函数（partial application）之间有什么区别？**
+
+- 柯里化：一个接受多个参数的函数。它将把这个函数转换成一系列函数，其中每个小函数将接受一个参数，直到所有参数都完成。
+- 偏函数：当给定的参数少于预期的参数时，函数将转化为偏函数，并返回一个期望剩余参数的新函数。
+
+示例：
+
+```js
+const addPartial = (x, y, z) => x + y + z
+
+const partialFunc = addPartial.bind(this, 2, 3)
+partialFunc(5) // 10
+```
+
+当函数传递的某些参数不完整时，它被称为偏函数。
+
+柯里化和偏函数并没有真正的区别；它们是相关的，但它们有不同的理论和应用。
+
+## 更多资料
+
+- [JavaScript 专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42)
+- [JavaScript 专题之偏函数](https://github.com/mqyqingfeng/Blog/issues/43)
+- [Currying in JS](https://hackernoon.com/currying-in-js-d9ddc64f162e)
+- [柯里化（Currying）](https://zh.javascript.info/currying-partials)
+- [JavaScript 高阶函数](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0.md)
+- [Understanding Currying in JavaScript](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339)
diff --git "a/JavaScript/\346\240\274\345\274\217\345\214\226\350\276\223\345\207\272 JSON.md" "b/JavaScript/\346\240\274\345\274\217\345\214\226\350\276\223\345\207\272 JSON.md"
new file mode 100644
index 0000000..e39ddaf
--- /dev/null
+++ "b/JavaScript/\346\240\274\345\274\217\345\214\226\350\276\223\345\207\272 JSON.md"	
@@ -0,0 +1,207 @@
+# 格式化输出 JSON
+
+`JSON.stringify()` 是将 JavaScript 对象转换为 JSON 的规范方法。有许多 JavaScript 框架在内部都使用了`JSON.stringify()`，比如 Express 框架的 `res.json()` 和 Axios body 序列化。
+
+但是，默认情况下，`JSON.stringify()` 输出的 JSON 格式，不带空格或颜色。在后面，我们将使用一个常用的 npm 包来丰富输出数据的色彩。
+
+`JSON.stringify()` 基本用法如下：
+
+```js
+const think = { eat: '🥩', sleep: '😴' }
+
+console.log(JSON.stringify(think)) // {"eat":"🥩","sleep":"😴"}
+
+console.log(JSON.stringify(think, null, 2))
+/*
+{
+  "eat": "🥩",
+  "sleep": "😴"
+}
+*/
+```
+
+可以看到，我们使用 `JSON.stringify()` 输出的内容更具可读性。
+
+## 制表符间距
+
+你也可以传入一个 `"\t"` 制表符间距，格式化输出的数据。
+
+```js
+const think = { eat: '🥩', sleep: '😴' }
+
+console.log(JSON.stringify(think, null, '\t'))
+
+/*
+{
+  "eat": "🥩",
+  "sleep": "😴"
+}
+*/
+```
+
+## Space 参数
+
+`JSON.stringify` 的第三个参数用于控制间距。正是它提供了漂亮的字符串输出。
+
+它允许两种类型的参数：`Number` 和 `String`。
+
+### Number
+
+如果 `Space` 是一个 `Number` 类型，则表示 `JSON.stringify` 将在每个键之前放置的相应的空格数。可以使用 `0` 到 `10` 之间的任意数字作为缩进。
+
+```js
+const think = { eat: '🥩', sleep: '😴' }
+
+console.log(JSON.stringify(think, null, 2))
+/*
+{
+  "eat": "🥩",
+  "sleep": "😴"
+}
+*/
+```
+
+### String
+
+或者，可以使用字符串作为缩进。最多允许 10 个字符。如果您尝试传递超过 10 个字符，它将只使用前 10 个字符。
+
+```js
+const think = { eat: '🥩', sleep: '😴' }
+
+console.log(JSON.stringify(think, null, '  I Love '))
+/*
+{
+  I Love "eat": "🥩",
+  I Love "sleep": "😴"
+}
+*/
+```
+
+## Express 和 Axios
+
+对于不直接调用 `JSON.stringify()` 的框架，通常有一个设置 `spaces` 参数的选项。例如，Express 有一个全局 [`'json spaces'` 选项](https://expressjs.com/en/4x/api.html#app.settings.table)，允许您为所有 `res.json()` 调用设置 `spaces`。
+
+```js
+const express = require('express')
+const app = express()
+
+// 设置 spaces
+app.set('json spaces', 2)
+app.get('*', (req, res) => res.json({ name: 'O.O', age: 20 }))
+
+const axios = require('axios')
+
+const res = await axios.get('http://localhost:3000', {
+  transformResponse: (body) => body // 禁用 JSON 解析，使 res.data 为字符串
+})
+
+console.log(res.data)
+/*
+{
+  "name": "O.O",
+  "age": 20
+}
+*/
+```
+
+Axios 没有设置 JSON 格式的[显式选项](https://axios-http.com/docs/req_config)，但您可以使用 [`transformRequest` 选项](https://stackoverflow.com/questions/48819885/axios-transformrequest-how-to-alter-json-payload)自行处理 JSON 序列化。关键语法如下：
+
+```js
+const axios = require('axios')
+
+const obj = {
+  name: 'O.O',
+  age: 20,
+  address: 'xxx'
+}
+
+const res = await axios.post('http://localhost:5000', obj, {
+  transformRequest: (data) => JSON.stringify(data, null, 2), // 发送漂亮的 JSON 格式
+  transformResponse: (body) => body
+})
+
+console.log(res.data)
+/*
+{
+  "name": "O.O",
+  "age": 20
+}
+*/
+```
+
+## Prettyjson
+
+[Prettyjson](https://www.npmjs.com/package/prettyjson) 以 YAML 样式格式化 JSON 数据。Prettyjson 仅在 CLI 上工作，如果将 Prettyjson 输出作为 HTTP 响应发送，则无法获得颜色。
+
+下面是使用 Prettyjson 从 Node.js 打印 JSON 的示例：
+
+```js
+const prettyjson = require('prettyjson')
+
+console.log(
+  prettyjson.render({
+    name: 'IU',
+    age: 18,
+    love: 'me',
+    hobby: 'sing'
+  })
+)
+```
+
+效果如下：
+
+![prettyjson](https://upload-images.jianshu.io/upload_images/18281896-8c47f57359cad5ca.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+您应该使用以上这类方法来使你想要突出显示的数据以提高可读性。
+
+## replacer 参数
+
+这里我们额外在说一下`JSON.stringify` 的第二个参数 **replacer**，我们可以使用它来转换结果。
+
+它允许两种类型的参数：`Array` 和 `Function`。
+
+### Array
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  love: 'me',
+  hobby: 'sing'
+}
+
+console.log(JSON.stringify(user, ['name', 'love'], 2))
+/*
+{
+  "name": "IU",
+  "love": "me"
+}
+*/
+```
+
+### Function
+
+我们为每一项调用一次 `function`，你也可以循环每一项，并在每次传递时使用函数中定义的逻辑进行操作。
+
+下面是一个示例，我跳过了值不是字符串的属性。换句话说，我只想显示值为数字的项。
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  love: 'me',
+  hobby: 'sing'
+}
+
+const replacer = function (key, value) {
+  if (typeof value !== 'string') return value
+  return undefined
+}
+
+console.log(JSON.stringify(user, replacer, 2))
+/*
+{
+  "age": 18
+}
+*/
+```
diff --git "a/JavaScript/\346\243\200\346\237\245\346\225\260\347\273\204\346\230\257\345\220\246\345\267\262\346\216\222\345\272\217.md" "b/JavaScript/\346\243\200\346\237\245\346\225\260\347\273\204\346\230\257\345\220\246\345\267\262\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..469a4e0
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\237\245\346\225\260\347\273\204\346\230\257\345\220\246\345\267\262\346\216\222\345\272\217.md"
@@ -0,0 +1,45 @@
+# 检查数组是否已排序
+
+要检查一个数组是否已排序，可以遍历数组并比较相邻元素的大小。如果数组是升序排列的，则所有相邻元素都会大于等于前一个元素。如果数组是降序排列的，则所有相邻元素都会小于等于前一个元素。
+
+这里我们使用常规 `for` 循环，实现效果如下：
+
+```js
+const isSorted = (array) => {
+  for (let i = 1; i < array.length; i++) {
+    if (array[i] < array[i - 1]) return false
+  }
+  return true
+}
+```
+
+上面函数检查的是数组升序排列。
+
+如果要检查数组是否已降序排列，可以修改函数以检查相邻元素是否小于等于前一个元素，或者可以使用 JavaScript 内置的 `Array.prototype.reverse` 方法将数组反转后使用上述函数进行检查。
+
+```js
+function isReverseSorted(array) {
+  return isSorted(array.reverse())
+}
+```
+
+需要注意，`Array.prototype.reverse` 方法会直接修改原数组，因此在使用完后可能需要再次反转数组以保持原有顺序。
+
+使用示例：
+
+```js
+let arr1 = [1, 2, 3, 4, 5]
+let arr2 = [1, 2, 4, 3, 5]
+let arr3 = [5, 4, 3, 2, 1]
+let arr4 = [5, 4, 3, 1, 2]
+
+isSorted(arr1) // true
+isSorted(arr2) // false
+
+isReverseSorted(arr3) // true
+isReverseSorted(arr4) // false
+
+// 改变原数组
+arr3 // [1, 2, 3, 4, 5]
+arr4 // [2, 1, 3, 4, 5]
+```
diff --git "a/JavaScript/\346\243\200\346\237\245\346\230\257\345\220\246\346\224\257\346\214\201\350\247\246\346\221\270\344\272\213\344\273\266.md" "b/JavaScript/\346\243\200\346\237\245\346\230\257\345\220\246\346\224\257\346\214\201\350\247\246\346\221\270\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..84f9eb4
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\237\245\346\230\257\345\220\246\346\224\257\346\214\201\350\247\246\346\221\270\344\272\213\344\273\266.md"
@@ -0,0 +1,9 @@
+# 检查是否支持触摸事件
+
+检查当前浏览器是否支持触摸事件：
+
+```js
+const touchSupported =
+  'ontouchstart' in window ||
+  (window.DocumentTouch && document instanceof DocumentTouch)
+```
diff --git "a/JavaScript/\346\243\200\346\237\245\351\241\265\351\235\242\347\232\204\346\265\217\350\247\210\345\231\250\351\200\211\351\241\271\345\215\241\346\230\257\345\220\246\350\201\232\347\204\246.md" "b/JavaScript/\346\243\200\346\237\245\351\241\265\351\235\242\347\232\204\346\265\217\350\247\210\345\231\250\351\200\211\351\241\271\345\215\241\346\230\257\345\220\246\350\201\232\347\204\246.md"
new file mode 100644
index 0000000..786ace9
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\237\245\351\241\265\351\235\242\347\232\204\346\265\217\350\247\210\345\231\250\351\200\211\351\241\271\345\215\241\346\230\257\345\220\246\350\201\232\347\204\246.md"
@@ -0,0 +1,8 @@
+# 检查页面的浏览器选项卡是否聚焦
+
+使用 [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) 引入的 `Document.hidden` 属性检查页面的浏览器选项卡是否可见或隐藏。
+
+```js
+const isBrowserTabFocused = () => !document.hidden
+isBrowserTabFocused() // true
+```
diff --git "a/JavaScript/\346\243\200\346\265\213 JavaScript \345\255\227\347\254\246\344\270\262\344\270\255\347\232\204\350\241\250\346\203\205\347\254\246\345\217\267.md" "b/JavaScript/\346\243\200\346\265\213 JavaScript \345\255\227\347\254\246\344\270\262\344\270\255\347\232\204\350\241\250\346\203\205\347\254\246\345\217\267.md"
new file mode 100644
index 0000000..feb3099
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\265\213 JavaScript \345\255\227\347\254\246\344\270\262\344\270\255\347\232\204\350\241\250\346\203\205\347\254\246\345\217\267.md"	
@@ -0,0 +1,50 @@
+# 检测 JavaScript 字符串中的表情符号
+
+表情符号通常由 Unicode 编码的表情符号字符组成，例如 😄 笑脸。
+
+通过一些特殊的正则表达式，我们可以检测 JavaScript 中的字符串是否包含表情符号：
+
+```js
+function hasEmoji(str) {
+  const emojiRegex =
+    /([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2694-\u2697]|\uD83E[\uDD10-\uDD5D])/g
+  return emojiRegex.test(str)
+}
+
+hasEmoji('Hello 😄 World') // true
+```
+
+但这并不通用，上述正则表达式可能不能匹配所有可能的表情符号，因为表情符号的数量和类型会不断变化。如果需要更全面的支持，需要使用更复杂的正则表达式或其他方法来匹配表情符号。
+
+我们有一种更简便的方法来检查字符串中的表情符号。
+
+> [MDN 描述了 Unicode 模式将正则表达式模式视为 Unicode 代码点序列](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags)而不是代码单元。
+
+在正则表达式中启用 Unicode 模式时，还可以使用 Unicode 属性转义。Unicode 属性转义（`\p{}` 或 `\P{}`）允许你根据 Unicode 字符的属性和特征匹配它们。
+
+```js
+const emojiRegex = /\p{Emoji}/u
+emojiRegex.test('⭐') // true
+
+// 大写字母 P 否定了匹配
+const noEmojiRegex = /\P{Emoji}/u
+noEmojiRegex.test('⭐') // false
+```
+
+因此，我们可以将一开始的函数更改为：
+
+```js
+function hasEmoji(str) {
+  const emojiRegex = /\p{Emoji}/u
+  return emojiRegex.test(str)
+}
+
+hasEmoji('Hello 😂 World') // true
+```
+
+如果你想替换和修改 JavaScript 字符串中的表情符号，你可以使用 `String.replaceAll` 方法。
+
+```js
+// 注意 g 标志以替换所有表情符号
+'🙈-👍-⭐'.replaceAll(/\p{Emoji}/gu, '_') // '_-_-_'
+```
diff --git "a/JavaScript/\346\243\200\346\265\213\345\244\247\345\206\231\351\224\201\345\256\232\346\230\257\345\220\246\345\274\200\345\220\257.md" "b/JavaScript/\346\243\200\346\265\213\345\244\247\345\206\231\351\224\201\345\256\232\346\230\257\345\220\246\345\274\200\345\220\257.md"
new file mode 100644
index 0000000..835a924
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\265\213\345\244\247\345\206\231\351\224\201\345\256\232\346\230\257\345\220\246\345\274\200\345\220\257.md"
@@ -0,0 +1,63 @@
+# 检测大写锁定是否开启
+
+假设我们希望在用户输入输入值（例如密码字段）时让用户知道大写锁定是否打开。
+
+基本结构如下：
+
+```html
+<input type="text" id="textbox" />
+
+<div id="message" />
+```
+
+`id` 为 `message` 的元素将用于显示消息。
+
+## 使用 `getModifierState()` 方法
+
+[getModifierState()](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) 方法返回给定修改键的状态。通过从事件对象调用 `getModifierState('CapsLock')` 来让我们知道键是否被按下了 CapsLock 键。
+
+```js
+const textboxEle = document.getElementById('textbox')
+const messageEle = document.getElementById('message')
+
+textboxEle.addEventListener('keydown', function (e) {
+  const capsLockOn = e.getModifierState('CapsLock')
+
+  // 更新消息内容
+  messageEle.innerHTML = capsLockOn ? '大写锁定打开' : ''
+
+  // 根据 CapsLock 状态显示或隐藏消息
+  messageEle.style.display = capsLockOn ? 'block' : 'none'
+})
+```
+
+这种方法不支持用户按下 Shift 键的情况。
+
+## 支持 Shift 键
+
+我们可以通过键盘事件和事件对象，对 Shift 键是否被按下进行判断：
+
+```js
+const textboxEle = document.getElementById('textbox')
+const messageEle = document.getElementById('message')
+
+textboxEle.addEventListener('keypress', function (e) {
+  const isMac = /Mac/.test(navigator.platform)
+
+  const keyCode = e.keyCode || e.which
+
+  // Shift 键是否按下？
+  const shiftKey = e.shiftKey || keyCode === 16
+
+  // 获取被按下的字符
+  const s = String.fromCharCode(keyCode)
+  const capsLockOn =
+    (s.toUpperCase() === s && s.toLowerCase() !== s && !(shiftKey && isMac)) ||
+    (s.toUpperCase() !== s && s.toLowerCase() === s && shiftKey)
+
+  messageEle.innerHTML = capsLockOn ? '大写锁定打开' : ''
+  messageEle.style.display = capsLockOn ? 'block' : 'none'
+})
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/qBXjyKJ)
diff --git "a/JavaScript/\346\243\200\346\265\213\346\230\257\345\220\246\344\270\272\347\247\273\345\212\250\346\265\217\350\247\210\345\231\250.md" "b/JavaScript/\346\243\200\346\265\213\346\230\257\345\220\246\344\270\272\347\247\273\345\212\250\346\265\217\350\247\210\345\231\250.md"
new file mode 100644
index 0000000..0bb6d9c
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\265\213\346\230\257\345\220\246\344\270\272\347\247\273\345\212\250\346\265\217\350\247\210\345\231\250.md"
@@ -0,0 +1,58 @@
+# 检测是否为移动浏览器
+
+## 检测移动浏览器
+
+以下是一些检查用户是否正在从移动浏览器浏览的方法。
+
+### 检查 userAgent（不推荐）
+
+```js
+// 如果需要，您可以添加更多
+const isMobile = /Android|BlackBerry|iPad|iPod|iPhone|webOS/i.test(
+  navigator.userAgent
+)
+```
+
+我不推荐这种方法，因为服务器可以发送一个假的用户代理。
+
+### 使用特征检测
+
+检查浏览器是否支持 `pointer:coarse` 媒体查询：
+
+```js
+const isMobile = function () {
+  const match = window.matchMedia('(pointer:coarse)')
+  return match && match.matches
+}
+```
+
+我们不能依赖屏幕尺寸，因为移动设备越来越大。
+
+## 检测 mac OS 浏览器
+
+检查当前浏览器是否在 Mac 上运行：
+
+```js
+const isMacBrowser = /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+```
+
+## 检测 Internet Explorer 浏览器
+
+检查当前浏览器是否为 Internet Explorer (IE)：
+
+```js
+const isIe = function () {
+  const ua = window.navigator.userAgent
+  return ua.indexOf('MSIE') > -1 || ua.indexOf('Trident') > -1
+}
+```
+
+我们也可以依靠 `document.documentMode`。该属性表示文档的兼容模式，在 IE 5-11 中为整数。其他浏览器返回 `undefined`。
+
+```js
+const isIE = !!document.documentMode
+```
+
+## 更多资料
+
+[JavaScript 侦测手机浏览器的五种方法](https://www.ruanyifeng.com/blog/2021/09/detecting-mobile-browser.html)
diff --git "a/JavaScript/\346\243\200\346\265\213\346\232\227\346\250\241\345\274\217.md" "b/JavaScript/\346\243\200\346\265\213\346\232\227\346\250\241\345\274\217.md"
new file mode 100644
index 0000000..7ebe2ea
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\265\213\346\232\227\346\250\241\345\274\217.md"
@@ -0,0 +1,94 @@
+# 检测暗模式
+
+macOS、Windows 10 等现代操作系统允许用户选择他们希望在所有应用程序中看到的外观。
+
+以下屏幕截图取自 macOS 的*常规*设置：
+
+![在 macOS 中设置暗模式](https://upload-images.jianshu.io/upload_images/18281896-ba7aea525293ad07.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以通过查看媒体查询 `@media` 的属性 `prefers-color-scheme` 来检测该选项。
+
+它可以是以下值之一：
+
+- `light` — 用户希望以浅色模式查看页面
+- `dark` — 用户希望在暗黑模式下查看页面
+- `no-preference` — 系统不知道用户的偏好
+
+通过检查此媒体查询值，我们可以确定用户是否喜欢暗模式，获取系统是否处于暗模式下有两种方式。
+
+- 使用 CSS 媒体查询检测 CSS 中的首选配色方案：
+
+```css
+/* Light mode */
+@media (prefers-color-scheme: light) {
+  body {
+    filter: invert(0);
+  }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    filter: invert(1) hue-rotate(180deg);
+  }
+}
+```
+
+- 使用 `matchMedia` 方法检测 JS 中的首选配色方案：
+
+```js
+const isDarkMode =
+  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+```
+
+或者也许是更通用的方法：
+
+```js
+const checkType = (type) =>
+  window.matchMedia &&
+  window.matchMedia(`(prefers-color-scheme: ${type})`).matches
+
+const mode = {
+  is: {
+    dark: checkType('dark'),
+    light: checkType('light')
+  }
+}
+
+mode.is.dark // true
+mode.is.light // false
+```
+
+另外，如果用户在页面打开时更改首选项配色，我们可以使用 [`addListener`](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList/addListener) 方法（不要与 `addEventListener` 混淆）监听系统颜色的切换，来动态更改颜色。
+
+例如：
+
+```js
+window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+  const isDarkMode = e.matches
+  console.log(`${isDarkMode ? '🌚' : '🌞'}.`)
+})
+```
+
+强制设置暗模式：
+
+```js
+const forceDarkMode = () =>
+  [...document.styleSheets[0].rules].forEach((rule) => {
+    const mediaText = (rule.media && rule.media.mediaText) || []
+    const hasColorScheme = mediaText.includes('prefers-color-scheme')
+    const hasLightScheme = hasColorScheme && mediaText.includes('light')
+
+    // 如果需要，请删除亮模式。
+    if (hasLightScheme) {
+      rule.media.deleteMedium('(prefers-color-scheme: light)')
+    }
+
+    // 添加暗模式
+    rule.media && rule.media.appendMedium('(prefers-color-scheme: dark)')
+  })
+```
+
+## 更多资料
+
+[JavaScript 媒体查询](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2.md)
diff --git "a/JavaScript/\346\243\200\346\265\213\347\224\250\346\210\267\346\230\257\345\220\246\345\244\204\344\272\216\347\251\272\351\227\262\347\212\266\346\200\201\346\210\226\345\244\204\344\272\216\351\235\236\346\264\273\345\212\250\347\212\266\346\200\201.md" "b/JavaScript/\346\243\200\346\265\213\347\224\250\346\210\267\346\230\257\345\220\246\345\244\204\344\272\216\347\251\272\351\227\262\347\212\266\346\200\201\346\210\226\345\244\204\344\272\216\351\235\236\346\264\273\345\212\250\347\212\266\346\200\201.md"
new file mode 100644
index 0000000..28b017d
--- /dev/null
+++ "b/JavaScript/\346\243\200\346\265\213\347\224\250\346\210\267\346\230\257\345\220\246\345\244\204\344\272\216\347\251\272\351\227\262\347\212\266\346\200\201\346\210\226\345\244\204\344\272\216\351\235\236\346\264\273\345\212\250\347\212\266\346\200\201.md"
@@ -0,0 +1,47 @@
+# 检测用户是否处于空闲状态或处于非活动状态
+
+某些应用程序需要你持续关注。这类应用程序通常包括游戏、媒体播放器、任何 CPU/电池密集型的应用程序等等。对于这些类型的应用程序，当用户不再主动与您的应用程序交互时，做一些事情（以及用户友好的）可能很重要。
+
+创建 `init` 函数。其中监听各种鼠标、键盘和触摸事件，来确保应用程序的活动状态。如果监听到这些事件中的任何一个，使用`resetTimer` 函数充当事件处理程序并被调用。
+
+- 使用 `setTimeout` 监听用户，一旦停止与应用程序交互，它就会开始计时。
+- 活跃时清除 `timeoutID` 定时器，并调用 `goActive` 函数。
+- 非活跃时重新计时，调用 `goInactive` 函数。
+
+```js
+let timeoutID
+
+function init() {
+  this.addEventListener('mousemove', resetTimer)
+  this.addEventListener('mousedown', resetTimer)
+  this.addEventListener('keypress', resetTimer)
+  this.addEventListener('DOMMouseScroll', resetTimer)
+  this.addEventListener('mousewheel', resetTimer)
+  this.addEventListener('touchmove', resetTimer)
+  this.addEventListener('MSPointerMove', resetTimer)
+  startTimer()
+}
+
+init()
+
+function startTimer() {
+  // 请等待2秒钟，然后再调用 goInactive
+  timeoutID = setTimeout(goInactive, 2000)
+}
+
+function resetTimer(e) {
+  clearTimeout(timeoutID)
+  goActive()
+}
+
+function goInactive() {
+  // do something
+}
+
+function goActive() {
+  // do something
+  startTimer()
+}
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/GRWJNGX)
diff --git "a/JavaScript/\346\265\205\346\213\267\350\264\235\345\222\214\346\267\261\346\213\267\350\264\235.md" "b/JavaScript/\346\265\205\346\213\267\350\264\235\345\222\214\346\267\261\346\213\267\350\264\235.md"
new file mode 100644
index 0000000..3d64843
--- /dev/null
+++ "b/JavaScript/\346\265\205\346\213\267\350\264\235\345\222\214\346\267\261\346\213\267\350\264\235.md"
@@ -0,0 +1,254 @@
+# 浅拷贝和深拷贝
+
+浅拷贝和深拷贝涉及到了一些基本概念，例如：可变性。如果你不了解它，可以先看看[变量赋值与原始对象可变性](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E4%B8%8E%E5%8E%9F%E5%A7%8B%E5%AF%B9%E8%B1%A1%E5%8F%AF%E5%8F%98%E6%80%A7.md)。
+
+## 浅拷贝
+
+> 拷贝出来的目标对象有着与原对象相同的属性值。如果我们的对象中嵌套了对象，那么像 `object.assign` 和扩展运算符（`...`）这样的浅层复制机制将只创建根级对象的副本，但深层对象仍将被共享。
+
+### 新对象赋值
+
+最直接的方式是新定义对象，在对其赋值：
+
+```js
+let md = { name: 'lio', url: 'lio-zero.github.io' }
+let obj = {
+  name: md.name
+}
+
+obj.name = 'lion'
+console.log(md) // { name: "lio", url: "lio-zero.github.io" }
+```
+
+操作对象，上面方法显然不太灵活，这时使用循环，复制过程需要改变一些数据，可以使用这种方法：
+
+```js
+let md = { name: 'lio', url: 'lio-zero.github.io' }
+let obj = {}
+
+for (const key in md) {
+  obj[key] = md[key]
+}
+
+obj.name = 'lion'
+console.log(md) // { name: "lio", url: "lio-zero.github.io" }
+```
+
+### 使用 `concat` 方法
+
+`concat` 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
+
+```js
+let arr = [1, 2, 3]
+const arr2 = arr.concat()
+
+arr2[1] = 23
+console.log(arr) // [1, 2, 3]
+```
+
+### 使用 `slice` 方法
+
+`slice` 和 `concat` 的用法类似。
+
+```js
+let arr = [1, 2, 3]
+const arr2 = arr.concat()
+
+arr2[1] = 23
+console.log(arr) // [1, 2, 3]
+```
+
+## 使用 `Array.from` 方法
+
+使用 `Array.from` 创建数组的不可变副本：
+
+```js
+let arr = [1, 2, 3]
+const arr2 = Array.from(arr)
+
+arr2[1] = 23
+console.log(arr) // [1, 2, 3]
+```
+
+> 推荐：[JavaScript 数组方法总结](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md)
+
+### 使用 `Object.assign` 合并
+
+```js
+let md = { name: 'lio', url: 'lio-zero.github.io' }
+let obj = Object.assign({}, md)
+
+obj.name = 'lion'
+console.log(md) // { name: "lio", url: "lio-zero.github.io" }
+```
+
+### 使用 `...` 扩展运算符
+
+更加简便的方式是使用 ES6 的扩展运算符（`...`）
+
+```js
+// 对象
+let md = { name: 'lio', url: 'lio-zero.github.io' }
+let obj = { ...md }
+
+obj.name = 'lion'
+console.log(md) // { name: "lio", url: "lio-zero.github.io" }
+
+// 数组
+let arr = [1, 2, 3]
+let arr2 = [...arr]
+arr2[1] = 23
+console.log(arr) // [1, 2, 3]
+```
+
+### 浅拷贝存在的问题
+
+我们在上文总结了多种浅拷贝的方法，数组可以使用 `Array.slice()`、`Array.from()` 和 `Array.concat()` 方法，对象可以使用 `Object.assign()` 方法。另外，可以使用老套的新对象赋值的方式或 ES6 的扩展运算符适用于对象和数组进行浅拷贝。
+
+就向刚一开始说的，上面都存在一个问题，假如对象中存在更深层级的对象，这些较深的对象一旦发生了改变，则原对象和引用原数据的对象都将改变。
+
+```js
+const arr = [1, 2, { name: 'K.O' }]
+const arr2 = arr.concat()
+
+arr2[2].name = 'O.K'
+console.log(arr) // [1, 2, { name: 'O.K'}]
+console.log(arr2) // [1, 2, { name: 'O.K'}]
+```
+
+可以看到，我们访问了 `arr` 和 `arr2` 都改变了。
+
+这时，我们就需要深度创建一个对象的副本。
+
+## 深拷贝
+
+> 深拷贝：拷贝出来的目标对象有着与原始对象相同的属性值，且嵌套的对象更改也不会影响到原始对象的改变，也就是它们之间有着相同的数据，但数据存储在不同的内存地址中。
+
+### JSON.stringify/parse
+
+如果对象足够简单，我们可以使用 `JSON.stringify` 将其转换为字符串，然后使用 `JSON.parse` 将其转换回 JavaScript 对象。
+
+```js
+let obj = {
+  name: 'MSN',
+  user: {
+    name: 'BBC'
+  },
+  arr: [1, 2, 3]
+}
+let newObj = JSON.parse(JSON.stringify(obj))
+newObj.user.name = 'K.O'
+
+console.log(JSON.stringify(obj, null, 2))
+/*
+{
+  "name": "MSN",
+  "user": {
+    "name": "BBC"
+  },
+  "arr": [
+    1,
+    2,
+    3
+  ]
+}
+*/
+console.log(JSON.stringify(newObj, null, 2))
+/*
+{
+  "name": "MSN",
+  "user": {
+    "name": "K.O"
+  },
+  "arr": [
+    1,
+    2,
+    3
+  ]
+}
+*/
+```
+
+可以看到，我们成功了，但这是有局限的。它只能应用于 `number`、`string`、`boolean`、`object`、`array` 这几种类型。
+
+局限包含：
+
+- 如果对象有任何不能用 JSON 字符串表示的数据（例如：函数、RegExp、Date、Set 和 Map 等特殊对象）
+- 会忽略 `undefined` 和 `symbol` 原始类型
+- 无法解决循环引用的问题
+
+这些数据将丢失！
+
+### 递归
+
+更好的做法是递归调用浅拷贝，把所有属于对象的属性类型都遍历赋给另一个对象。
+
+> **考虑**：对象多层次的赋值方式，考虑其中存在数组情况
+
+```js
+function deepCopy(obj) {
+  let res = obj instanceof Array ? [] : {}
+  for (const [k, v] of Object.entries(obj)) {
+    res[k] = typeof v == 'object' ? deepCopy(v) : v
+  }
+  return res
+}
+
+let newObj = deepCopy(obj)
+newObj.user.name = 'K.O'
+newObj.arr.push(4)
+
+console.log(JSON.stringify(obj, null, 2))
+/*
+{
+  "name": "MSN",
+  "user": {
+    "name": "BBC"
+  },
+  "arr": [
+    1,
+    2,
+    3
+  ]
+}
+*/
+console.log(JSON.stringify(newObj, null, 2))
+/*
+{
+  "name": "MSN",
+  "user": {
+    "name": "K.O"
+  },
+  "arr": [
+    1,
+    2,
+    3,
+    4
+  ]
+}
+*/
+```
+
+现在，它已经很不错了，对于大部分的用例。但它还是存在一些问题，一些特殊对象我们没有进行处理。
+
+由于本文过长，完美的深拷贝这里不再展示，您可以下文提供的资料找到答案。
+
+### 其他方法
+
+我们在开发时，肯定不会手动去实现这些方法。我们会使用一些库来辅助我们开发，例如：
+
+- 使用函数库 lodash 的 `_.cloneDeep` 方法
+- jQuery 的 `jQuery.extend()` 方法
+- etc
+
+但理解并熟知如何实现它们对于我们玩转 JS 有一定的帮助。
+
+## 更多资料
+
+- [深拷贝的终极探索（90%的人都不知道）](https://juejin.cn/post/6844903692756336653)
+- [如何写出一个惊艳面试官的深拷贝?](https://juejin.cn/post/6844903929705136141)
+- [JavaScript 专题之从零实现 jQuery 的 extend](https://github.com/mqyqingfeng/Blog/issues/33)
+- [JavaScript 专题之深浅拷贝](https://github.com/mqyqingfeng/Blog/issues/32)
+- [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript)
+- [leader：深拷贝有这 5 个段位，你只是青铜段位？还想涨薪？](https://juejin.cn/post/7017991655009566728)
+- [第 95 题：模拟实现一个深拷贝，并考虑对象相互引用以及 Symbol 拷贝的情况](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/148)
diff --git "a/JavaScript/\346\265\217\350\247\210\345\231\250\344\270\255\344\275\277\347\224\250\345\216\237\347\224\237\347\232\204 ES \346\250\241\345\235\227.md" "b/JavaScript/\346\265\217\350\247\210\345\231\250\344\270\255\344\275\277\347\224\250\345\216\237\347\224\237\347\232\204 ES \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..907db4e
--- /dev/null
+++ "b/JavaScript/\346\265\217\350\247\210\345\231\250\344\270\255\344\275\277\347\224\250\345\216\237\347\224\237\347\232\204 ES \346\250\241\345\235\227.md"	
@@ -0,0 +1,121 @@
+# 浏览器中使用原生的 ES 模块
+
+通过在 `script` 标签上添加 `type="module"`，我们可以直接在浏览器中使用原生 ES 模块。
+
+```html
+<script type="module">
+  import lodash from 'https://cdn.skypack.dev/lodash'
+</script>
+```
+
+关于 ES 模块，详细内容请查阅 MDN [JavaScript 模块](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules)和 [JavaScript 模块化发展](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8F%91%E5%B1%95.md)。
+
+还需要注意，普通的脚本和加上 `type="module"` 的脚本对 CORS（跨源资源共享）的处理方式不同。
+
+如果你没有在服务器上设置允许服务第三方源的 CORS 策略，则请求将失败。
+
+## 动态导入 — `import()`
+
+在 ES11 之前，我们只能使用静态导入，它只接受模块路径的字符串。（上一节的方式）
+
+ES11 引入 `import()` 动态导入方法，我们可以使用 Promise 有条件地导入模块。
+
+这种方式也使得调试 `lodash` 这些类似的工具库更加方便了。
+
+```js
+const lodash = await import('https://cdn.skypack.dev/lodash')
+
+lodash.get({ a: 3 }, 'a') // 3
+```
+
+你可以直接在浏览器控制台测试效果。需要注意的是，如果网站开启了 CSP（内容安全策略），将会失败。
+
+## ImportMap
+
+`import` 每次都需要输入完整的 URL，相对以前的裸导入，很不太方便。例如：
+
+```js
+import lodash from 'lodash'
+```
+
+它不同于 Node.js 可以依赖文件系统，层层寻找 `node_modules`：
+
+```url
+/home/app/packages/project-a/node_modules/lodash/index.js
+/home/app/packages/node_modules/lodash/index.js
+/home/app/node_modules/lodash/index.js
+/home/node_modules/lodash/index.js
+```
+
+在 ES 模块中，可以通过 `importmap` 使得裸导入正常工作：
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "lodash": "https://cdn.skypack.dev/lodash"
+    }
+  }
+</script>
+```
+
+此时可与以前同样的方式进行模块导入：
+
+```js
+import lodash from 'lodash'
+
+import('lodash').then((_) => _.get({ a: 3 }, 'a'))
+```
+
+**那么通过裸导入如何导入子路径呢？**
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "lodash": "https://cdn.skypack.dev/lodash",
+      "lodash/": "https://cdn.skypack.dev/lodash/"
+    }
+  }
+</script>
+
+<script type="module">
+  import get from 'lodash/get.js'
+</script>
+```
+
+> 推荐：[Everything You Need to Know About JavaScript Import Maps](https://www.honeybadger.io/blog/import-maps/)
+
+## Import Assertion
+
+在之前的文章中，我有提到过 Chrome 91 已经引入了 JSON 模块，可以在 ES 模块中引入 JSON 文件。
+
+```html
+<script type="module">
+  import data from './data.json' assert { type: 'json' }
+
+  console.log(data)
+</script>
+```
+
+相关文章：
+
+- [ES JSON 模块提案](https://github.com/lio-zero/blog/blob/main/JavaScript/ES%20JSON%20%E6%A8%A1%E5%9D%97%E6%8F%90%E6%A1%88.md)
+- [在 ES 模块（Node.js）中导入 JSON 文件](https://github.com/lio-zero/blog/blob/main/Node/%E5%9C%A8%20ES%20%E6%A8%A1%E5%9D%97%EF%BC%88Node.js%EF%BC%89%E4%B8%AD%E5%AF%BC%E5%85%A5%20JSON%20%E6%96%87%E4%BB%B6.md)
+
+## 关于 ES 模块的注意事项
+
+- `module` 默认是 `defer` 的加载和执行方式
+- `module` 存在跨域
+- `module` 会存放在单独的域内，不会污染全局环境
+- `module` 默认开启严格模式（`use strict`）
+
+> 推荐：[JavaScript 中的模块发展方案](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8F%91%E5%B1%95%E6%96%B9%E6%A1%88.md)
+
+## 最后
+
+随着近几年浏览器对原生 ES 模块的普遍支持，社区出现了一种 Bundless 的构建方案，其具有代表性的包括 vite、snowpack 等。
+
+关于 Bundless 的介绍，可以看看 [Bundle-less 的深入思考和实践](https://juejin.cn/post/7131925778911985701)
+
+<!-- https://juejin.cn/post/7127449194389831716#heading-0 -->
diff --git "a/JavaScript/\346\273\232\345\212\250\345\210\260\351\241\265\351\235\242\351\241\266\351\203\250\347\232\204\345\244\232\347\247\215\345\256\236\347\216\260.md" "b/JavaScript/\346\273\232\345\212\250\345\210\260\351\241\265\351\235\242\351\241\266\351\203\250\347\232\204\345\244\232\347\247\215\345\256\236\347\216\260.md"
new file mode 100644
index 0000000..f26f0f7
--- /dev/null
+++ "b/JavaScript/\346\273\232\345\212\250\345\210\260\351\241\265\351\235\242\351\241\266\351\203\250\347\232\204\345\244\232\347\247\215\345\256\236\347\216\260.md"
@@ -0,0 +1,167 @@
+# 滚动到页面顶部的多种实现
+
+## 锚点和平滑滚动
+
+在 `<html>` 元素上提供以 ID 为目标的链接
+
+```html
+<div id="top"></div>
+<a href="#top">跳转到页面顶部</a>
+```
+
+我们可以使用最新的 `scroll-behavior` 属性来实现 CSS 平滑滚动
+
+```css
+html {
+  scroll-behavior: smooth;
+}
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/qBRxNQL)
+
+## scrollTo、scrollBy、scrollIntoViwe
+
+先给根节点添加 `scroll-behavior` 属性来实现 CSS 平滑滚动
+
+```css
+html {
+  scroll-behavior: smooth;
+}
+```
+
+接下来给按钮添加点击事件，在任意使用 `scrollTo`、`scrollBy` 或 `scrollIntoViwe` 方法，实现滚动到顶部。
+
+[`Window.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) 滚动到文档中的某个坐标。
+
+[`Elem.scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) 方法可以使界面滚动到给定元素的指定坐标位置。
+
+```js
+window.scrollTo(0, 0)
+document.documentElement.scrollTo(0, 0)
+```
+
+[`Window.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy) 在窗口中按指定的偏移量滚动文档。
+
+[`Elem.scrollBy()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy) 方法是使得元素滚动一段特定距离。
+
+```js
+window.scrollBy(0, -10000)
+document.documentElement.scrollBy(0, -10000)
+```
+
+[`Window.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll) 滚动窗口至文档中的特定位置。
+
+[`Elem.scroll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll) 方法是用于在给定的元素中滚动到某个特定坐标。
+
+```
+window.scroll(0, 0)
+document.documentElement.scroll(0, 0)
+```
+
+[`Elem.scrollIntoViwe(top)`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) 将滚动页面以使 `Elem` 可见。
+
+- `top=true`（默认值），页面滚动，使 `Elem` 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。
+- `top=false` ，页面滚动，使 `Elem` 出现在窗口底部。元素的底部边缘将与窗口底部对齐。
+
+```js
+document.documentElement.scrollIntoView()
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/dyvGygq)
+
+## 检测滚动位置：`scroll` 事件
+
+- 使用 `document.documentElement` 返回文档的根元素，我们需要它来获取偏移值
+- 在按钮上添加 `click` 事件监听器。在 `scrollToTop` 函数内部，使用 `scrollTo` 方法将其滚动到屏幕顶部 。
+
+```js
+const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
+const rootElement = document.documentElement
+
+const scrollToTop = () => {
+  rootElement.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
+scrollToTopBtn.addEventListener('click', scrollToTop)
+```
+
+接下来就是显示按钮了，我们可以使用滚动事件侦听器检测滚动。
+
+`handleScroll` 函数在每次用户滚动时都会被调用。现在，我们需要可以滚动的像素总数。
+
+- `Element.scrollHeight` 只读属性。给出元素的内容高度，包括由于溢出而不可见的部分。
+- `Element.clientHeight` 只读属性。给出元素的内部高度（以像素为单位），即可见部分的高度，包含内边距，但不包括水平滚动条、边框和外边距。
+
+```js
+function handleScroll() {
+  const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
+  if (rootElement.scrollTop / scrollTotal > 0.8) {
+    scrollToTopBtn.classList.add('showBtn')
+  } else {
+    scrollToTopBtn.classList.remove('showBtn')
+  }
+}
+
+document.addEventListener('scroll', handleScroll)
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/zYNRJYL)
+
+## Intersection Observer API
+
+> [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的更改的方法。
+
+比起上一节中 `scroll` 事件监听滚动，`Intersection Observer API` 在解决这类问题上是绝佳解决方案。这是一个相当新的浏览器 API，使开发人员可以以更优化的方式将大多数任务交给浏览器。
+
+```js
+const target = document.querySelector('footer')
+const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
+const rootElement = document.documentElement
+
+// 一旦页脚进入或离开视口，将添加或删除类。回调接收 entries 数组作为参数。
+function callback(entries, observer) {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      scrollToTopBtn.classList.add('showBtn')
+    } else {
+      scrollToTopBtn.classList.remove('showBtn')
+    }
+  })
+}
+
+const observer = new IntersectionObserver(callback)
+observer.observe(target)
+
+function scrollToTop() {
+  rootElement.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
+scrollToTopBtn.addEventListener('click', scrollToTop)
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/JjEpajw)
+
+## requestAnimationFrame 设置动画
+
+> [`window.requestAnimationFrame()`](https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame) 告诉浏览器，你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
+
+- `Element.scrollTop` 属性可以获取或设置一个元素的内容垂直滚动的像素数。
+- 使用 `window.requestAnimationFrame()` 来设置滚动动画。
+
+```jsx
+const scrollToTop = () => {
+  const c = document.documentElement.scrollTop || document.body.scrollTop
+  if (c > 0) {
+    window.requestAnimationFrame(scrollToTop)
+    window.scrollTo(0, c - c / 8)
+  }
+}
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/OJWQoNR)
diff --git "a/JavaScript/\347\202\271\347\254\246\345\217\267\344\270\216\346\213\254\345\217\267\347\254\246\345\217\267.md" "b/JavaScript/\347\202\271\347\254\246\345\217\267\344\270\216\346\213\254\345\217\267\347\254\246\345\217\267.md"
new file mode 100644
index 0000000..563e80f
--- /dev/null
+++ "b/JavaScript/\347\202\271\347\254\246\345\217\267\344\270\216\346\213\254\345\217\267\347\254\246\345\217\267.md"
@@ -0,0 +1,162 @@
+# 点符号与括号符号
+
+## 访问对象属性
+
+有两种方法可以访问对象属性：点（`.`）和括号（`[]`）。
+
+```js
+const obj = {
+  name: 'value'
+}
+
+// 点符号
+obj.name // 'value'
+
+// 括号符号
+obj['name'] // 'value'
+```
+
+两个符号都可以访问对象属性。但问题往往是我们应该使用哪一个 🤔。这里不需要多做思考，只需要遵循 [Airbnb JavaScript 的风格指南](https://github.com/airbnb/javascript#properties)即可。
+
+- 访问属性时使用点符号
+
+其指南使用点符号。而当您想使用变量访问对象属性时，请使用括号符号。
+
+```js
+const user = {
+  status: true,
+  age: 28
+}
+
+// bad
+const isStatus = user['status']
+
+// good
+const isStatus = user.status
+```
+
+- 而当你访问带有变量的属性时使用括号表示法
+
+```js
+const user = {
+  status: true,
+  age: 28
+}
+
+function getProp(prop) {
+  return user[prop]
+}
+
+const isStatus = getProp('status')
+```
+
+## 点符号的局限性
+
+### 使用标识符
+
+使用点符号的一个主要限制是它只适用于有效的标识符。首先，让我定义什么是标识符
+
+> [标识符](https://developer.mozilla.org/en-US/docs/Glossary/Identifier)是代码中标识变量、函数或属性的字符序列。
+
+标识符具有以下规则：
+
+- 首字母必须是字母、下划线（`_`）或美元符号（`$`），不能是数字
+- 除首字母外，其他字符可以是字母、数字、下划线或美元符号（`$`）
+- 普通标识符（用作变量名、函数名和循环语句中用于跳转的标记）不能是保留字符
+- 在严格模式下，`arguments` 和 `eval` 不能用作变量名，函数名或者参数名
+  上面所说的字母，不只是 ASCII 字母，还包括 Unicode 中的一些字符。但便于移植，字母通常是使用 ASCII 中的字母。
+
+让我们来举一些例子，看看当我们使用点符号时会发生什么。
+
+```js
+const obj = {
+  123: 'digit',
+  123name: 'start with digit',
+  name123: 'does not start with digit',
+  $name: '$ sign',
+  name-123: 'hyphen',
+  NAME: 'upper case',
+  name: 'lower case'
+}
+```
+
+> **注意**：上面有几个特地给出了错误示范。你可能会注意到一些属性名称我们不得不包括引号。例如：`123name`。我必须这样做，否则该对象将被视为无效，它将抛出语法错误。
+
+### 点符号
+
+```js
+obj.123      // ❌ SyntaxError
+obj.123name  // ❌ SyntaxError
+obj.name123  // ✅ 'does not start with digit'
+obj.$name    // ✅  '$ sign'
+
+obj.name-123  // ❌ SyntaxError
+obj.'name-123'// ❌ SyntaxError
+
+obj.NAME // ✅ 'upper case'
+obj.name // ✅ 'lower case'
+```
+
+## 括号表示法
+
+但是，对于括号符号来说，这些都不是问题。
+
+```js
+obj['123'] // ✅ 'digit'
+obj['123name'] // ✅ 'start with digit'
+obj['name123'] // ✅ 'does not start with digit'
+obj['$name'] // ✅ '$ sign'
+
+obj['name-123'] // ✅ 'does not start with digit'
+
+obj['NAME'] // ✅ 'upper case'
+obj['name'] // ✅ 'lower case'
+```
+
+如果您认为有一个无效的 JavaScript 标识符作为属性键，请使用括号表示法
+
+## 使用变量访问属性
+
+点符号的另一个限制是使用变量。你应该使用括号符号。
+
+> **注意**：当引用括号符号中的变量时，需要跳过引号。这就是为什么你知道你在处理一个变量而不是访问属性键。
+
+```js
+const variable = 'name'
+
+const obj = {
+  name: 'value'
+}
+
+obj[variable] // ✅ 'value'
+obj.variable // undefined
+```
+
+## 未定义属性
+
+当您尝试访问不存在的属性时，它将返回 `undefined`。它不会抛出错误。
+
+```js
+const emptyObj = {}
+
+emptyObj.name // undefined
+emptyObj['name'] // undefined
+```
+
+## 只有括号符号适用于变量
+
+让我们回到前面的变量对象示例。如果您使用点表示法，它将假定您正试图使用有效的 JavaScript 标识符访问属性。因为它正在返回一些东西，你可能会认为一切正常。在引擎盖下面，是的。但是如果你打算使用这个变量，它可能会把你甩了。这无疑会让调试头疼。所以要小心！！
+
+```js
+const variable = 'name'
+
+const obj = {
+  name: 'value',
+  variable: '👻'
+}
+
+obj[variable] // ✅ 'value'
+obj.variable // '👻'
+```
+
+使用变量时不要使用点符号。
diff --git "a/JavaScript/\347\211\271\345\276\201\346\243\200\346\265\213\343\200\201\347\211\271\345\276\201\346\216\250\346\226\255\345\222\214\344\275\277\347\224\250 UA \345\255\227\347\254\246\344\270\262\344\271\213\351\227\264\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md" "b/JavaScript/\347\211\271\345\276\201\346\243\200\346\265\213\343\200\201\347\211\271\345\276\201\346\216\250\346\226\255\345\222\214\344\275\277\347\224\250 UA \345\255\227\347\254\246\344\270\262\344\271\213\351\227\264\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md"
new file mode 100644
index 0000000..31a480f
--- /dev/null
+++ "b/JavaScript/\347\211\271\345\276\201\346\243\200\346\265\213\343\200\201\347\211\271\345\276\201\346\216\250\346\226\255\345\222\214\344\275\277\347\224\250 UA \345\255\227\347\254\246\344\270\262\344\271\213\351\227\264\346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md"	
@@ -0,0 +1,43 @@
+# 特征检测、特征推断和使用 UA 字符串之间有什么区别？
+
+## 特征检测（feature detection）
+
+特征检测包括确定浏览器是否支持某段代码，以及是否运行不同的代码（取决于它是否执行），以便浏览器始终能够正常运行代码功能，而不会在某些浏览器中出现崩溃和错误。例如：
+
+```js
+if ('geolocation' in navigator) {
+  // 可以使用 navigator.geolocation
+} else {
+  // 处理 navigator.geolocation 功能缺失
+}
+```
+
+[Modernizr](https://modernizr.com/) 是处理功能检测的优秀工具。
+
+## 特征推断（feature inference）
+
+特征推断与特征检测一样，会对功能可用性进行检查，但是在判断通过后，还会使用其他功能，因为它假设其他功能也可用，例如：
+
+```js
+if (document.getElementsByTagName) {
+  elem = document.getElementById(id)
+}
+```
+
+非常不推荐这种方式。特征检测更能保证万无一失。
+
+## UA 字符串
+
+**UA（User-Agent）字符串**，是浏览器报告的字符串，它允许网络协议对等方（network protocol peers）识别请求用户代理的应用类型、操作系统、应用供应商和应用版本。
+
+它可以通过 `navigator.userAgent` 访问，例如 Chrome 将输出：
+
+```js
+console.log(navigator.userAgent)
+
+// "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36"
+```
+
+然而，这个字符串很难解析并且很可能存在欺骗性。例如，Chrome 会同时作为 Chrome 和 Safari 进行报告。
+
+因此，要检测 Safari，除了检查 Safari 字符串，还要检查是否存在 Chrome 字符串。不要使用这种方式。
diff --git "a/JavaScript/\347\224\237\346\210\220\344\270\200\344\270\252\346\214\207\345\256\232\350\214\203\345\233\264\345\206\205\347\232\204\351\232\217\346\234\272\346\225\260.md" "b/JavaScript/\347\224\237\346\210\220\344\270\200\344\270\252\346\214\207\345\256\232\350\214\203\345\233\264\345\206\205\347\232\204\351\232\217\346\234\272\346\225\260.md"
new file mode 100644
index 0000000..fcab3fb
--- /dev/null
+++ "b/JavaScript/\347\224\237\346\210\220\344\270\200\344\270\252\346\214\207\345\256\232\350\214\203\345\233\264\345\206\205\347\232\204\351\232\217\346\234\272\346\225\260.md"
@@ -0,0 +1,45 @@
+# 生成一个指定范围内的随机数
+
+使用 `Math.random()` 生成随机值，使用乘法将其映射到所需的范围。
+
+```js
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min
+```
+
+为了方便理解，我们将该方法拆解一下：
+
+```js
+const MIN = 1
+const MAX = 4
+
+// 用减法算出差值
+const DELTA = MAX - MIN
+
+const initialRandom = Math.random()
+
+// 将随机数乘以差值
+const multiplied = initialRandom * DELTA
+
+// 使用 Math.floor 将其四舍五入
+const floored = Math.floor(multiplied)
+
+// 加上最小值，我们将其向上移动以完美匹配范围：
+const answer = floored + MIN
+```
+
+此随机方法包括下限，但不包括上限。例如，`random(10, 12)` 将随机 10 或 11，但从不随机 12。
+
+这是有意做的，以匹配 `Math.random` 以及 [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 等 JavaScript 方法的行为。
+
+```js
+// 从 [10, 11, 12, 13] 中获取一个随机数
+console.log(random(10, 14))
+
+// 获取从 1 到 100（包含 100）的随机数
+console.log(random(1, 101))
+
+// 获取一个从 -10 到 10（包含 10）的随机数
+console.log(random(-10, 11))
+```
+
+有一篇很棒的文章 [Lots of Ways to Use Math.random() in JavaScript](https://css-tricks.com/lots-of-ways-to-use-math-random-in-javascript/) 介绍了如何使用 `Math.random` 实现各种很酷炫的示例。
diff --git "a/JavaScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204.md" "b/JavaScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204.md"
new file mode 100644
index 0000000..78bee02
--- /dev/null
+++ "b/JavaScript/\347\261\273\345\236\213\345\214\226\346\225\260\347\273\204.md"
@@ -0,0 +1,50 @@
+# JavaScript 类型化数组
+
+JavaScript 提供了 8 种类型化数组（[Typed Arrays](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays)）类型：
+
+- `Int8Array` 8 位有符号整数数组
+- `Int16Array` 16 位有符号整数数组
+- `Int32Array` 32 位有符号整数数组
+- `Uint8Array` 8 位无符号整数数组
+- `Uint16Array` 16 位无符号整数数组
+- `Uint32Array` 32 位无符号整数数组
+- `Float32Array` 32 位浮点数数组
+- `Float64Array` 64 位浮点数数组
+- `Uint8ClampedArray` 8 位无符号整型固定数组
+- `BigInt64Array` 64 位有符号整数数组
+- `BigUint64Array` 64 位无符号整型数组
+
+它们都是 [`ArrayBufferView`](https://github.com/lio-zero/blog/blob/main/JavaScript/ArrayBufferView.md) 实例。
+
+类型化数组本质上是 [`ArrayBuffer`](https://github.com/lio-zero/blog/blob/main/JavaScript/ArrayBuffer.md) 的视图，其中每个项都具有相同的大小和类型。
+
+[`DataView`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView) 是 `ArrayBuffer` 的另一个视图，但在这种情况下，数组中的项可以具有不同的大小和类型。
+
+下面是一个如何创建 8 位有符号整数数组的示例：
+
+```js
+const a = new Int8Array()
+```
+
+您可以预先分配 n 个字节：
+
+```js
+const bytes = 1024
+const a = new Int8Array(bytes)
+```
+
+它的主要用途是允许查看 ArrayBuffer，它本身是不透明的（我们无法检查其内容）。
+
+以下是我们的做法：
+
+```js
+const a = new Int8Array(buffer)
+```
+
+这些类型化数组类似于数组，因此现在我们可以通过常用的数组访问技术检查缓冲区的内容，并且我们可以访问许多方法和属性，包括 `map()`、`reduce()` 等等。
+
+类型化数组的主要用例是与 [**WebGL**](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API)、[**Web Audio**](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API) 或 [**Canvas API**](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) 一起使用。一些 WebGL 函数需要类型化数组，因为它们比常规 JavaScript 数组的性能更好。
+
+需要记住的一点是，类型化数组不允许我们控制字节顺序：它使用平台的字节顺序。一般来说，这很好，因为我们所说的主要用例是使用一个多媒体 API 在本地使用数组。此外，大多数消费类计算机使用小字节序（Little-Endian），因为 Intel 使用这种约定。但是，如果您在使用大字节序（Big-Endian） 的系统上传输类型化数组的数据，则数据可能编码错误，因此无效。
+
+如果您需要这种对字节顺序的控制，请改用 [**DataView**](https://github.com/lio-zero/blog/blob/main/JavaScript/DataView%20%E5%AF%B9%E8%B1%A1.md)。
diff --git "a/JavaScript/\347\261\273\346\225\260\347\273\204\345\257\271\350\261\241\350\275\254\346\225\260\347\273\204.md" "b/JavaScript/\347\261\273\346\225\260\347\273\204\345\257\271\350\261\241\350\275\254\346\225\260\347\273\204.md"
new file mode 100644
index 0000000..a551052
--- /dev/null
+++ "b/JavaScript/\347\261\273\346\225\260\347\273\204\345\257\271\350\261\241\350\275\254\346\225\260\347\273\204.md"
@@ -0,0 +1,52 @@
+# 类数组对象转数组
+
+类数组（Array-like）对象是指那些有长度属性和索引属性的对象，它们表现得像数组，但是并不是 Array 的实例。常见的类数组对象包括函数的 `arguments` 对象、DOM 元素集合和字符串。
+
+例如：
+
+```js
+const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 }
+```
+
+以下提供几种将类数组转换为数组的方法。
+
+- 使用 `Array.from()` 方法
+
+```js
+const arr = Array.from(arrayLike)
+
+console.log(arr) // ['a', 'b', 'c']
+```
+
+- 使用扩展运算符（`...`）
+
+```js
+const arr = [...arrayLike]
+console.log(arr) // ['a', 'b', 'c']
+```
+
+- 使用 `Array.prototype.slice()` 方法
+
+```js
+const arr = Array.prototype.slice.call(arrayLike)
+console.log(arr) // ['a', 'b', 'c']
+```
+
+- 使用 `Array.prototype.map()` 方法
+
+```js
+const arr = Array.prototype.map.call(arrayLike, (x) => x)
+console.log(arr) // ['a', 'b', 'c']
+```
+
+- 使用 `for` 循环
+
+```js
+const arr = []
+for (let i = 0; i < arrayLike.length; i++) {
+  arr.push(array)
+}
+console.log(arr) // ['a', 'b', 'c']
+```
+
+你可以使用其他任何可以迭代数组的方式实现，例如 `for...of`、`forEach` 或 `reduce` 等，实现方式与上述类似。
diff --git "a/JavaScript/\347\261\273\346\236\204\351\200\240\345\207\275\346\225\260\344\270\216\345\216\237\345\236\213\344\270\255\347\232\204\346\226\271\346\263\225.md" "b/JavaScript/\347\261\273\346\236\204\351\200\240\345\207\275\346\225\260\344\270\216\345\216\237\345\236\213\344\270\255\347\232\204\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..6233135
--- /dev/null
+++ "b/JavaScript/\347\261\273\346\236\204\351\200\240\345\207\275\346\225\260\344\270\216\345\216\237\345\236\213\344\270\255\347\232\204\346\226\271\346\263\225.md"
@@ -0,0 +1,70 @@
+# 类构造函数与原型中的方法
+
+给定一个类，有两种常用的方法来定义它的方法。
+
+在类构造函数中定义方法：
+
+```js
+function Calculator() {
+  this.sum = function (a, b) {
+    return a + b
+  }
+}
+```
+
+或在类原型中定义方法：
+
+```js
+function Calculator() {}
+
+Calculator.prototype.sum = function (a, b) {
+  return a + b
+}
+```
+
+当类实例调用该方法时，这两种方法都会产生相同的结果：
+
+```js
+const calc = new Calculator()
+calc.sum(1, 2) // 3
+```
+
+## 区别
+
+- 在第一种方法中，每次创建类的新实例时都必须创建该方法。另一方面，第二种方法创建一次方法，并为类的所有实例共享该方法。也就是说，第二种方法比第一种更有效，需要的内存更少。
+
+- 通过 `prototype` 创建的方法可以被子类扩展和重写。
+
+## 建议
+
+第一种方法可以创建一个由其他函数的逻辑组成的巨大构造函数。
+
+考虑下面的巨大构造函数：
+
+```js
+function Foo() {
+  this.bigFunction = function () {
+    // 这里有一个很大的功能
+  }
+
+  this.anotherBigFunction = function () {
+    // ...
+  }
+}
+```
+
+对比：
+
+```js
+function Foo() {}
+
+Foo.prototype.bigFunction = function () {
+  // ...
+}
+
+Foo.prototype.anotherBigFunction = function () {
+  // ...
+}
+```
+
+后者看起来更具可读性和方便性。
diff --git "a/JavaScript/\350\216\267\345\217\226\345\275\223\345\211\215\346\227\266\351\227\264\346\210\263.md" "b/JavaScript/\350\216\267\345\217\226\345\275\223\345\211\215\346\227\266\351\227\264\346\210\263.md"
new file mode 100644
index 0000000..39abcad
--- /dev/null
+++ "b/JavaScript/\350\216\267\345\217\226\345\275\223\345\211\215\346\227\266\351\227\264\346\210\263.md"
@@ -0,0 +1,66 @@
+# 获取当前时间戳
+
+UNIX 时间戳是一个整数，表示自 1970 年 1 月 1 日以来经过的秒数。
+
+在类似 UNIX 的机器（包括 Linux 和 macOS）上，您可以在终端中键入 `date +%s` 并返回 UNIX 时间戳：
+
+```bash
+$ date +%s
+# 1659858284
+```
+
+当前时间戳可以通过调用 Date 对象上的 `now()` 方法获取：
+
+```js
+Date.now()
+```
+
+你可以通过调用得到相同的值：
+
+```js
+new Date().getTime()
+// or
+new Date().valueOf()
+```
+
+> **注意**：IE8 及以下版本在 Date 上没有 `now()` 方法。如果需要支持 IE8 及以下版本，请寻找 polyfill，或使用 `new Date().getTime()`。
+
+您还可以使用：
+
+```js
++new Date()
+```
+
+这可能看起来很奇怪，但它是完全正确的 JavaScript 代码。一元运算符 `+` 自动调用分配给它的任何对象上的 `valueOf()` 方法，该方法返回时间戳（以毫秒为单位）。这段代码的问题在于，您实例化了一个新的 `Date` 对象，该对象会立即被丢弃。
+
+要根据时间戳生成日期，请使用 `new Date(<timestamp>)`，但要确保传递一个数字（如果使用字符串将得到一个**无效日期**结果，如果不确定，请使用 `parseInt()`）
+
+另外，JavaScript 中的时间戳以毫秒为单位。
+
+要获取以秒为单位的时间戳，请使用以下方法进行转换：
+
+```js
+Math.floor(Date.now() / 1000)
+```
+
+> **注意**：有些教程使用 `Math.round()`，但这将接近下一秒，即使第二秒尚未完全完成。
+
+或者：
+
+```js
+~~(Date.now() / 1000)
+```
+
+`~~` 与 `Math.floor` 做着相同的工作，但它可读性较差。
+
+## 总结
+
+以下是获取当前时间的时间戳的三种方式：
+
+```js
+new Date().getTime()
++new Date()
+Date.now()
+```
+
+如果你已经放弃了 IE8，你可以转而使用 `Date.now()` 静态方法来获取时间戳。
diff --git "a/JavaScript/\350\256\241\347\256\227 textarea \347\232\204\345\255\227\347\254\246\346\225\260.md" "b/JavaScript/\350\256\241\347\256\227 textarea \347\232\204\345\255\227\347\254\246\346\225\260.md"
new file mode 100644
index 0000000..cfdc843
--- /dev/null
+++ "b/JavaScript/\350\256\241\347\256\227 textarea \347\232\204\345\255\227\347\254\246\346\225\260.md"	
@@ -0,0 +1,39 @@
+# 计算 textarea 的字符数
+
+假设我们有一个 `textarea` 和一个 `div` 元素来显示用户输入了多少字符：
+
+```html
+<div>
+  <textarea rows="5" maxlength="200" id="message"></textarea>
+  <div id="counter">0</div>
+</div>
+```
+
+这里我们使用 `maxlength` 属性设置用户可以在 `textarea` 中放置的最大字符数。
+
+接下来，我们需要处理 `textarea` 元素值改变时触发的事件：
+
+```js
+document.addEventListener('DOMContentLoaded', function () {
+  const messageEle = document.getElementById('message')
+  const counterEle = document.getElementById('counter')
+  // 获取 `maxlength` 属性
+  const maxLength = messageEle.getAttribute('maxlength')
+
+  counterEle.innerHTML = `0/${maxLength}`
+
+  messageEle.addEventListener('input', function (e) {
+    const target = e.target
+    // 计算当前字符数
+    const currentLength = target.value.length
+    counterEle.innerHTML = `${currentLength}/${maxLength}`
+  })
+})
+```
+
+**注意**，常见的错误是捕获 `keyup` 事件。但它在某些情况下不起作用，例如：
+
+- 用户将文本拖动到文本区域
+- 用户在文本区域中单击鼠标右键，然后从关联菜单中选择**粘贴**
+
+[查看效果](https://codepen.io/lio-zero/pen/wveLxox)
diff --git "a/JavaScript/\350\260\203\346\225\264\345\233\276\345\203\217\345\244\247\345\260\217.md" "b/JavaScript/\350\260\203\346\225\264\345\233\276\345\203\217\345\244\247\345\260\217.md"
new file mode 100644
index 0000000..c572bd8
--- /dev/null
+++ "b/JavaScript/\350\260\203\346\225\264\345\233\276\345\203\217\345\244\247\345\260\217.md"
@@ -0,0 +1,80 @@
+# 调整图像大小
+
+假设我们想将图像大小调整为给定的百分比数。可以从文件输入中确定图像：
+
+```html
+<input type="file" id="upload" />
+```
+
+以下函数按百分比比例缩放图像文件：
+
+```js
+const resize = (image, ratio) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    // 读取文件
+    reader.readAsDataURL(image)
+
+    // 监听 load 事件
+    reader.addEventListener('load', (e) => {
+      const ele = new Image()
+      ele.addEventListener('load', () => {
+        const canvas = document.createElement('canvas')
+
+        // 绘制按比例缩放的图像
+        const context = canvas.getContext('2d')
+        const w = ele.width * ratio
+        const h = ele.height * ratio
+        canvas.width = w
+        canvas.height = h
+        context.drawImage(ele, 0, 0, w, h)
+
+        // 获取大小调整后的图像数据
+        'toBlob' in canvas
+          ? canvas.toBlob((blob) => {
+              resolve(blob)
+            })
+          : resolve(dataUrlToBlob(canvas.toDataURL()))
+      })
+
+      ele.src = e.target.result
+    })
+
+    reader.addEventListener('error', (e) => {
+      reject()
+    })
+  })
+}
+```
+
+在上面的示例代码中，绘制新图像后，我们必须检查当前浏览器是否支持 `canvas` 的 `toBlob` 方法。如果没有，我们必须从 `canvas` 获取 Data URL。首先 `toDataURL()`，然后使用以下函数将其转换为 Blob：
+
+```js
+const dataUrlToBlob = (url) => {
+  const arr = url.split(',')
+  const mime = arr[0].match(/:(.\*?);/)[1]
+  const str = atob(arr[1])
+  let length = str.length
+  const uintArr = new Uint8Array(length)
+  while (length--) {
+    uintArr[length] = str.charCodeAt(length)
+  }
+  return new Blob([uintArr], { type: mime })
+}
+```
+
+一旦我们有了调整大小的图像的 Blob，我们就可以在前端预览它，或者将其作为 `FormData` 的一部分发送到后端：
+
+```js
+// 获取所选文件
+const image = document.getElementById('upload').files[0]
+// 预览图像元素
+const previewEle = document.getElementById('previewEle')
+// 将图像大小调整为 50%
+resize(image, 0.5).then((blob) => {
+  previewEle.src = URL.createObjectURL(blob)
+})
+```
+
+[示例地址](https://codepen.io/lio-zero/pen/jOzPOQm)
diff --git "a/JavaScript/\350\260\203\346\225\264\346\226\207\346\234\254\346\241\206\347\232\204\345\256\275\345\272\246\344\273\245\350\207\252\345\212\250\351\200\202\345\272\224\345\205\266\345\206\205\345\256\271.md" "b/JavaScript/\350\260\203\346\225\264\346\226\207\346\234\254\346\241\206\347\232\204\345\256\275\345\272\246\344\273\245\350\207\252\345\212\250\351\200\202\345\272\224\345\205\266\345\206\205\345\256\271.md"
new file mode 100644
index 0000000..64eddf2
--- /dev/null
+++ "b/JavaScript/\350\260\203\346\225\264\346\226\207\346\234\254\346\241\206\347\232\204\345\256\275\345\272\246\344\273\245\350\207\252\345\212\250\351\200\202\345\272\224\345\205\266\345\206\205\345\256\271.md"
@@ -0,0 +1,67 @@
+# 调整文本框的宽度以自动适应其内容
+
+假设 `input` 的 `id` 为 `textbox`，如下所示：
+
+```html
+<input type="text" id="textbox" />
+```
+
+为了根据其内容动态调整其宽度，我们创建了一个伪元素，其内容与输入值相同。我们将输入的宽度设置为伪元素的宽度。
+
+```js
+const fakeEle = document.createElement('div')
+
+// 完全隐藏
+fakeEle.style.position = 'absolute'
+fakeEle.style.top = '0'
+fakeEle.style.left = '-9999px'
+fakeEle.style.overflow = 'hidden'
+fakeEle.style.visibility = 'hidden'
+fakeEle.style.whiteSpace = 'nowrap'
+fakeEle.style.height = '0'
+
+// 我们从文本框中复制一些影响宽度的样式
+const textboxEle = document.getElementById('textbox')
+
+// 获取样式
+const styles = window.getComputedStyle(textboxEle)
+
+// 从文本框中复制字体样式
+fakeEle.style.fontFamily = styles.fontFamily
+fakeEle.style.fontSize = styles.fontSize
+fakeEle.style.fontStyle = styles.fontStyle
+fakeEle.style.fontWeight = styles.fontWeight
+fakeEle.style.letterSpacing = styles.letterSpacing
+fakeEle.style.textTransform = styles.textTransform
+
+fakeEle.style.borderLeftWidth = styles.borderLeftWidth
+fakeEle.style.borderRightWidth = styles.borderRightWidth
+fakeEle.style.paddingLeft = styles.paddingLeft
+fakeEle.style.paddingRight = styles.paddingRight
+
+// 将假元素附加到 body
+document.body.appendChild(fakeEle)
+```
+
+下面的方法为伪元素设置 HTML，计算其宽度，并将结果设置为原始输入。
+
+```js
+const setWidth = function () {
+  const string =
+    textboxEle.value || textboxEle.getAttribute('placeholder') || ''
+  fakeEle.innerHTML = string.replace(/\s/g, '&' + 'nbsp;')
+
+  const fakeEleStyles = window.getComputedStyle(fakeEle)
+  textboxEle.style.width = fakeEleStyles.width
+}
+```
+
+最后，当用户通过监听 `input` 事件更改输入值时，我们调用 `setWidth` 方法：
+
+```js
+setWidth()
+
+textboxEle.addEventListener('input', setWidth)
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/oNeeVwq)
diff --git "a/JavaScript/\350\277\207\346\273\244\345\271\266\346\216\222\345\272\217\345\255\227\347\254\246\344\270\262\345\210\227\350\241\250.md" "b/JavaScript/\350\277\207\346\273\244\345\271\266\346\216\222\345\272\217\345\255\227\347\254\246\344\270\262\345\210\227\350\241\250.md"
new file mode 100644
index 0000000..250356d
--- /dev/null
+++ "b/JavaScript/\350\277\207\346\273\244\345\271\266\346\216\222\345\272\217\345\255\227\347\254\246\344\270\262\345\210\227\350\241\250.md"
@@ -0,0 +1,20 @@
+# 过滤并排序字符串列表
+
+假如我们有一个字符串数组，需要过滤掉重复的名字并按字母表将其排序。实现如下：
+
+```js
+const names = ['D.O', 'K.O', 'LAY', 'KAI', 'IU', 'D.O', 'K.O', 'IU']
+```
+
+- 使用 [`Array.prototype.filter`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 它将基于我们传递的回调方法返回一个新的过滤后的数组。回调方法将比较当前关键字在原始列表里的索引和新列表中的索引，仅当索引匹配时将当前关键字 `push` 到新数组。它不会改变原始数组。
+
+- 使用 [`Array.prototype.sort`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 方法排序过滤后的列表，`sort` 只接受一个比较方法作为参数，并返回按字母表排序后的列表。
+
+```js
+const filteredAndSortedNames = names
+  .filter((item, index) => names.lastIndexOf(item) === index)
+  .sort((a, b) => (a < b ? -1 : 1))
+
+// 过滤和排序后的 JavaScript 保留字列表
+console.log(filteredAndSortedNames) // ["D.O", "IU", "K.O", "KAI", "LAY"]
+```
diff --git "a/JavaScript/\351\207\215\345\244\215\345\255\227\347\254\246\344\270\262\347\232\204\345\244\232\347\247\215\346\226\271\346\263\225.md" "b/JavaScript/\351\207\215\345\244\215\345\255\227\347\254\246\344\270\262\347\232\204\345\244\232\347\247\215\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..b78d8b4
--- /dev/null
+++ "b/JavaScript/\351\207\215\345\244\215\345\255\227\347\254\246\344\270\262\347\232\204\345\244\232\347\247\215\346\226\271\346\263\225.md"
@@ -0,0 +1,70 @@
+# 重复字符串的多种方法
+
+重复字符串的方式有多种方法，下面介绍几种简短的方式。
+
+## `for` 循环
+
+最先想到的应该就是使用 `for` 循环重复字符串了吧！
+
+```js
+const str = 'LOVE'
+const arr = []
+
+for (let i = 1; i <= 3; i++) {
+  arr.push(str)
+}
+
+arr.join('') // 'LOVELOVELOVE'
+```
+
+## String.prototype.repeat()
+
+[`String.prototype.repeat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat) 方法返回一个新字符串，该字符串包含调用该方法的字符串的指定数量的副本。
+
+```js
+'LOVE'.repeat(3) // 'LOVELOVELOVE'
+'Hey'.repeat(2) // 'HeyHey'
+'Hi'.repeat(0) // ''
+```
+
+## Array.prototype.fill()
+
+[`Array.prototype.fill()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill) 方法可以用指定的值填充整个数组。该方法会更改原数组，返回值是被填充后的数组。
+
+```js
+Array(3).fill('LOVE').join('') // "LOVELOVELOVE"
+```
+
+该片段的运行方式很简单，其创建一个包含 3 个空项的新数组，在每个空项中填充 `'LOVE'`，将所有元素连接成一个字符串。
+
+## Array.prototype.join()
+
+一个更短的快捷方式是仅使用 `join` 方法来重复字符串。
+
+```js
+Array(4).join('LOVE') // 'LOVELOVELOVE'
+```
+
+## Array.from
+
+[`Array.from()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 用于将类数组对象或可迭代对象转化为数组。
+
+一个类数组对象必须含有 `length` 属性，且元素属性名必须是数值或者可转换为数值的字符。我们正好可以利用这一点。
+
+我们将 `length` 属性设置为 3，使用 `from()` 方法初始化数组，每个位置对应一个 `undefined`。如下所示：
+
+```js
+Array.from({ length: 3 }) // [undefined, undefined, undefined]
+```
+
+现在我们使用第二个参数，这是一个 `map` 函数，它将调用数组的每个元素。在这里，我们用 `'LOVE'` 替换所有的 `undefined`。
+
+```js
+Array.from({ length: 3 }, () => 'LOVE') // ['LOVE', 'LOVE', 'LOVE']
+```
+
+最后我们调用 `join()` 方法将数组中的所有元素组合成一个字符串。
+
+```js
+Array.from({ length: 3 }, () => 'LOVE').join('') // 'LOVELOVELOVE'
+```
diff --git "a/JavaScript/\351\207\215\345\256\232\345\220\221\345\210\260\345\217\246\344\270\200\344\270\252\347\275\221\351\241\265.md" "b/JavaScript/\351\207\215\345\256\232\345\220\221\345\210\260\345\217\246\344\270\200\344\270\252\347\275\221\351\241\265.md"
new file mode 100644
index 0000000..f9490b3
--- /dev/null
+++ "b/JavaScript/\351\207\215\345\256\232\345\220\221\345\210\260\345\217\246\344\270\200\344\270\252\347\275\221\351\241\265.md"
@@ -0,0 +1,38 @@
+# 重定向到另一个页面
+
+使用 HTML：
+
+```html
+<meta http-equiv="refresh" content="0;URL=https://github.com/lio-zero" />
+```
+
+使用 JavaScript：
+
+```js
+window.location.replace('https://github.com/lio-zero')
+window.location.assign('https://github.com/lio-zero')
+window.location.href = 'https://github.com/lio-zero'
+
+document.location.href = 'https://github.com/lio-zero'
+
+window.self.location = 'https://github.com/lio-zero'
+window.top.location = 'https://github.com/lio-zero'
+```
+
+- 你可以省略 `window`，因为它是全局对象
+- 使用 `location.replace` 比 `location.href` 更好，因为 `replace` 不会在会话历史记录中保留原始页面，这意味着用户不会陷入无休止的后退按钮失败。
+  - 如果要模拟某人单击链接，请使用 `location.href`
+  - 如果要模拟 HTTP 重定向，请使用 `location.replace`
+- `window.self` 返回一个指向当前 `window` 对象的引用。
+- `window.top` 返回窗口层级最顶层窗口的引用。
+
+重定向回主页：
+
+```js
+window.location = window.location.host
+```
+
+## 更多资料
+
+- [按时间间隔刷新页面（不使用 JavaScript）](https://github.com/lio-zero/blog/blob/main/HTML/%E6%8C%89%E6%97%B6%E9%97%B4%E9%97%B4%E9%9A%94%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%EF%BC%88%E4%B8%8D%E4%BD%BF%E7%94%A8%20JavaScript%EF%BC%89.md)
+- [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage)
diff --git "a/Linux/Bash \345\270\270\347\224\250\345\277\253\346\215\267\351\224\256.md" "b/Linux/Bash \345\270\270\347\224\250\345\277\253\346\215\267\351\224\256.md"
new file mode 100644
index 0000000..93ae364
--- /dev/null
+++ "b/Linux/Bash \345\270\270\347\224\250\345\277\253\346\215\267\351\224\256.md"	
@@ -0,0 +1,17 @@
+# Bash 常用快捷键
+
+- `Ctrl+C` 终止命令
+- `Ctrl+Z` 暂停命令
+- `Ctrl+A` 将光标移动行首
+- `Ctrl+E` 将光标移动到行尾
+- `Ctrl+F` 向前移动一个字符
+- `Ctrl+B` 向后移动一个字符
+- `Ctrl+U` 从光标处删除到行首
+- `Ctrl+K` 从光标处删除到行尾
+- `Ctrl+W` 从光标处删除到单词的开头
+- `Ctrl+D` 删除光标下的字符
+- `Ctrl+H` 删除光标前的字符
+- `Ctrl+T` 将光标下的字符与上一个交换
+- `Ctrl+L` 清屏，相当于 `clear` 命令
+- `Ctrl+Y` 粘贴 `Ctrl+U` 或 `Ctrl+K` 剪切的内容
+- `Ctrl+R` 在历史命令中搜索，按下 `Ctrl+R` 组合键之后，就会出现搜索界面，只要输入搜索内容，就会从历史命令中搜索
diff --git a/Linux/Linux Note.md b/Linux/Linux Note.md
new file mode 100644
index 0000000..f2fa55d
--- /dev/null
+++ b/Linux/Linux Note.md	
@@ -0,0 +1,6 @@
+# Linux Note
+
+- [UNIX & Linux](https://unix.stackexchange.com/)
+- [SSH 教程](https://wangdoc.com/ssh/index.html) — SSH 是 Linux 系统的登录工具，现在广泛用于服务器登录和各种加密通信。
+- [Bash 脚本教程](https://wangdoc.com/bash/) — 本教程介绍 Linux 命令行 Bash 的基本用法和脚本编程。
+- [Linux Commands](https://www.xmind.net/m/WwtB/)
diff --git "a/Linux/bash \344\270\255\347\232\204\345\216\206\345\217\262\345\221\275\344\273\244\345\277\253\346\215\267\346\226\271\345\274\217.md" "b/Linux/bash \344\270\255\347\232\204\345\216\206\345\217\262\345\221\275\344\273\244\345\277\253\346\215\267\346\226\271\345\274\217.md"
new file mode 100644
index 0000000..ddf8e69
--- /dev/null
+++ "b/Linux/bash \344\270\255\347\232\204\345\216\206\345\217\262\345\221\275\344\273\244\345\277\253\346\215\267\346\226\271\345\274\217.md"	
@@ -0,0 +1,35 @@
+# bash 中的历史命令快捷方式
+
+```bash
+$ echo "Hello world"
+Hello world
+```
+
+- `!!` — 最后一个命令
+
+```bash
+!!
+echo "Hello world"
+```
+
+- `!1` — 历史上的第一个条目
+- `!-1` — 历史上的最后一个条目
+- `!ssh` — 最后一个以 `ssh` 开头的命令
+
+```bash
+!1
+!-1
+!echo
+echo "Hello world"
+```
+
+- `!:1` — 最后一个命令的第一个参数
+
+```bash
+!:1
+"Hello world"
+```
+
+## 更多资料
+
+[How To Use Bash History Commands and Expansions on a Linux VPS](https://www.digitalocean.com/community/tutorials/how-to-use-bash-history-commands-and-expansions-on-a-linux-vps)
diff --git a/Linux/curl -fsSL.md b/Linux/curl -fsSL.md
new file mode 100644
index 0000000..b4a7fe6
--- /dev/null
+++ b/Linux/curl -fsSL.md	
@@ -0,0 +1,21 @@
+# curl -fsSL
+
+在浏览 [antfu](https://github.com/antfu) 的 [1990-script](https://github.com/antfu/1990-script) 项目时，发现其中有这样一条命令：
+
+```bash
+sh -c "$(curl -fsSL https://raw.github.com/antfu/1990-script/master/index.sh)"
+```
+
+其中好奇的是 curl `-fsSL` 参数各自的含义，于是便开始了日常搜索。
+
+- `-f（--fail）` — 表示在服务器错误时，阻止一个返回的表示错误原因的 HTML 页面，而由 curl 命令返回一个错误码 22 来提示错误。
+- `-L（--location）` — 参数会让 HTTP 请求跟随服务器的重定向。curl 默认不跟随重定向。
+- `-S（--show-error）` — 指定只输出错误信息，通常与 `-s` 一起使用。
+- `-s（--silent）` — 不显示错误和进度信息。
+
+我们可能会经常使用这个命令来下载例如 GitHub 中的项目文件。
+
+## 相关资料
+
+- [curl](https://curl.se/) 官网
+- 推荐阮一峰老师的 [curl 的用法指南](https://www.ruanyifeng.com/blog/2019/09/curl-reference.html) 和 [curl 网站开发指南](https://www.ruanyifeng.com/blog/2011/09/curl.html)。
diff --git "a/Linux/curl \345\222\214 wget \346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md" "b/Linux/curl \345\222\214 wget \346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md"
new file mode 100644
index 0000000..0eadcb7
--- /dev/null
+++ "b/Linux/curl \345\222\214 wget \346\234\211\344\273\200\344\271\210\345\214\272\345\210\253\357\274\237.md"	
@@ -0,0 +1,12 @@
+# curl 和 wget 有什么区别？
+
+主要区别在于：
+
+- 与 `curl` 相比，`wget` 的主要优点是它能够递归下载。
+- `wget` 只是命令行。
+- `curl` 支持 FTP、FTPS、HTTP、HTTPS、SCP、SFTP、TFTP、TELNET、DICT、LDAP、LDAPS、FILE、POP3、IMAP、SMTP、RTMP 和 RTSP。`wget` 支持 HTTP、HTTPS 和 FTP。
+- `curl` 构建和运行的平台比 `wget` 多。
+- `wget` 是根据自由软件 copyleft 许可证（GNU GPL）发布的。`curl` 是根据自由软件许可证（MIT 衍生产品）发布的。
+- `curl` 提供上传和发送功能。`wget` 只提供简单的 HTTP POST 支持。
+
+来源 [What is the difference between curl and wget?](https://unix.stackexchange.com/questions/47434/what-is-the-difference-between-curl-and-wget)。
diff --git "a/Linux/shell \345\244\247\346\213\254\345\217\267\346\211\251\345\261\225 \342\200\224 {}.md" "b/Linux/shell \345\244\247\346\213\254\345\217\267\346\211\251\345\261\225 \342\200\224 {}.md"
new file mode 100644
index 0000000..f2dfb96
--- /dev/null
+++ "b/Linux/shell \345\244\247\346\213\254\345\217\267\346\211\251\345\261\225 \342\200\224 {}.md"	
@@ -0,0 +1,51 @@
+# shell 大括号扩展 — {}
+
+`{}` 将对大括号中的文件名做扩展。
+
+使用示例：
+
+```bash
+$ echo {a..z}
+# a b c d e f g h i j k l m n o p q r s t u v w x y z
+
+$ mv /path/{file,renamed}.txt
+# 等同于
+$ mv /path/file.txt /path/renamed.txt
+```
+
+## 使用 shell 大括号创建递归目录
+
+- `mkdir` 的 `-p` 标志和 `{}`。
+- `-p` 指示 `mkdir` 确保目录名称存在，不存在的就建一个。
+
+```bash
+$ mkdir -p new-dir/{foo,baz}/whatever-{1,2}/{a,b}
+
+# new-dir
+# ├── baz
+# │  ├── whatever-1
+# │  │  ├── a
+# │  │  └── b
+# │  └── whatever-2
+# │     ├── a
+# │     └── b
+# └── foo
+#    ├── whatever-1
+#    │  ├── a
+#    │  └── b
+#    └── whatever-2
+#       ├── a
+#       └── b
+```
+
+## 创建包含索引的文件
+
+```bash
+$ touch {1..3}.txt
+# 等同于
+$ touch 1.txt 2.txt 3.txt
+```
+
+## 更多资料
+
+[shell 中各种括号的作用()、(())、[]、[[]]、{}](https://www.runoob.com/w3cnote/linux-shell-brackets-features.html)
diff --git "a/Linux/\345\220\214\346\227\266\345\210\233\345\273\272\345\244\232\344\270\252\346\226\207\344\273\266.md" "b/Linux/\345\220\214\346\227\266\345\210\233\345\273\272\345\244\232\344\270\252\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..f33c245
--- /dev/null
+++ "b/Linux/\345\220\214\346\227\266\345\210\233\345\273\272\345\244\232\344\270\252\346\226\207\344\273\266.md"
@@ -0,0 +1,26 @@
+# 同时创建多个文件
+
+在命令行中使用大括号来减少重复输入相同内容的次数
+
+```bash
+touch store-{products,cart,utils,coupons}.js
+```
+
+> **注意**：每个文件名，也就是逗号后面不能有空格
+
+![同时创建多个文件](https://upload-images.jianshu.io/upload_images/18281896-bb474dc2e72b713f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+您可以先使用 `echo` 命令输出查看效果：
+
+```bash
+$ echo store-{products,cart,utils,coupons}.js
+# store-products.js store-cart.js store-utils.js store-coupons.js
+```
+
+```bash
+# 将 file.text 重命名为 file.bak
+$ mv file.{txt, bak}
+
+# 将 file.text 重命名为 file.txt.bak
+$ mv file.txt{,.bak}
+```
diff --git "a/Linux/\345\246\202\344\275\225\345\234\250 Linux \344\270\255\345\210\240\351\231\244\345\234\250\347\211\271\345\256\232\347\253\257\345\217\243\344\270\212\350\277\220\350\241\214\347\232\204\350\277\233\347\250\213.md" "b/Linux/\345\246\202\344\275\225\345\234\250 Linux \344\270\255\345\210\240\351\231\244\345\234\250\347\211\271\345\256\232\347\253\257\345\217\243\344\270\212\350\277\220\350\241\214\347\232\204\350\277\233\347\250\213.md"
new file mode 100644
index 0000000..0ed8dc9
--- /dev/null
+++ "b/Linux/\345\246\202\344\275\225\345\234\250 Linux \344\270\255\345\210\240\351\231\244\345\234\250\347\211\271\345\256\232\347\253\257\345\217\243\344\270\212\350\277\220\350\241\214\347\232\204\350\277\233\347\250\213.md"	
@@ -0,0 +1,31 @@
+# 如何在 Linux 中删除在特定端口上运行的进程
+
+以 80 端口为例。
+
+首先，列出任何监听端口 80 的进程：
+
+```bash
+# 使用 lsof
+$ lsof -i:80
+
+# 使用 fuser
+$ fuser 80/tcp
+```
+
+使用 `kill` 命令删除任何监听端口 80 的进程：
+
+```bash
+kill $(lsof -t -i:80)
+kill -9 $(lsof -t -i:80)
+```
+
+或使用 `fuser` 命令：
+
+```bash
+fuser -k 80/tcp
+```
+
+## 更多资源
+
+- [Finding the PID of the process using a specific port?](https://unix.stackexchange.com/questions/106561/finding-the-pid-of-the-process-using-a-specific-port)
+- [How to kill a process running on particular port in Linux?](https://stackoverflow.com/questions/11583562/how-to-kill-a-process-running-on-particular-port-in-linux)
diff --git "a/MongoDB/MongoDB \345\210\240\351\231\244\346\225\260\346\215\256\345\272\223.md" "b/MongoDB/MongoDB \345\210\240\351\231\244\346\225\260\346\215\256\345\272\223.md"
new file mode 100644
index 0000000..05b9bc4
--- /dev/null
+++ "b/MongoDB/MongoDB \345\210\240\351\231\244\346\225\260\346\215\256\345\272\223.md"	
@@ -0,0 +1,51 @@
+# MongoDB 删除数据库
+
+在 MongoDB 中，您可以通过切换到该数据库并运行 `db.dropDatabase()` 方法或 `dropDatabase` 命令来删除数据库。
+
+## `db.dropDatabase()` 方法
+
+首先，让我们检查一下我们的数据库列表：
+
+```bash
+$ show databases
+# or
+$ show dbs
+# local  0.000GB
+# user   0.000GB
+# test   0.005GB
+```
+
+切换到 `user` 数据库，使用 `db.dropDatabase()` 方法删除当前数据库。
+
+```bash
+$ use user
+$ db.dropDatabase()
+# { "dropped" : "user", "ok" : 1 }
+```
+
+再次查看数据库列表：
+
+```bash
+$ show databases
+# local  0.000GB
+# test   0.005GB
+```
+
+可以看到，`user` 数据库已删除
+
+## `dropDatabase` 命令
+
+您也可以使用 `dropDatabase` 命令来做同样的事情。
+
+```bash
+$ use test
+$ db.runCommand( { dropDatabase: 1 } )
+# { "dropped" : "test", "ok" : 1 }
+```
+
+我们的数据库列表再次减少：
+
+```bash
+$ show databases
+# local  0.000GB
+```
diff --git "a/MongoDB/MongoDB \345\210\240\351\231\244\346\226\207\346\241\243.md" "b/MongoDB/MongoDB \345\210\240\351\231\244\346\226\207\346\241\243.md"
new file mode 100644
index 0000000..62adaa7
--- /dev/null
+++ "b/MongoDB/MongoDB \345\210\240\351\231\244\346\226\207\346\241\243.md"	
@@ -0,0 +1,117 @@
+# MongoDB 删除文档
+
+MongoDB 提供了三种删除文档的方法：
+
+- `db.collection.deleteOne()`
+- `db.collection.deleteMany()`
+- `db.collection.remove()`
+
+## `db.collection.deleteOne()` 方法
+
+`db.collection.deleteOne()` 只删除一个文档，即使有多个文档符合条件。
+
+下面是用于删除单个文档的 `db.collection.deleteOne()` 方法的示例。
+
+首先，让我们运行一个返回多个结果的查询：
+
+```bash
+$ db.articles.find({ artistname: { $in: [ "The Kooks", "Gang of Four", "Bastille" ] } })
+
+# { "_id" : ObjectId("5781d7f248ef8c6b3ffb014d"), "artistname" : "The Kooks" }
+# { "_id" : ObjectId("5781d7f248ef8c6b3ffb014e"), "artistname" : "Bastille" }
+# { "_id" : ObjectId("5781d7f248ef8c6b3ffb014f"), "artistname" : "Gang of Four" }
+```
+
+可以看到，我们有三个文档符合条件。
+
+现在，让我们对 `db.collection.deleteOne()` 方法使用完全相同的筛选条件：
+
+```bash
+$ db.articles.deleteOne({ artistname: { $in: [ "The Kooks", "Gang of Four", "Bastille" ] } })
+
+# { "acknowledged" : true, "deletedCount" : 1 }
+```
+
+因此，即使三个文档符合条件，也只删除了一个文档。
+
+让我们再次运行 `find()` 查询以查看剩余哪些文档：
+
+```bash
+$ db.articles.find({ artistname: { $in: [ "The Kooks", "Gang of Four", "Bastille" ] } })
+
+# { "_id" : ObjectId("5781d7f248ef8c6b3ffb014e"), "artistname" : "Bastille" }
+# { "_id" : ObjectId("5781d7f248ef8c6b3ffb014f"), "artistname" : "Gang of Four" }
+```
+
+## `db.collection.deleteMany()` 方法
+
+`db.collection.deleteMany()` 方法删除所有符合条件的文档。
+
+因此，让我们使用与前面示例完全相同的条件运行 `db.collection.deleteMany()` 方法。记住，这时只有两条记录。让我们看看 `db.collection.deleteMany()` 是否同时删除了以下两项：
+
+```bash
+$ db.articles.deleteMany({ artistname: { $in: [ "The Kooks", "Gang of Four", "Bastille" ] } })
+
+# { "acknowledged" : true, "deletedCount" : 2 }
+```
+
+现在，剩下的两条记录都被删除了。
+
+## `db.collection.remove()` 方法
+
+`db.collection.remove()` 方法删除单个文档或符合指定条件的所有文档。
+
+在这里，我们删除 `article` 名为 `AC/DC` 的所有文档。
+
+```bash
+$ db.articles.remove({ artistname: "AC/DC" })
+
+# WriteResult({ "nRemoved" : 1 })
+```
+
+在这种情况下，只有一个 `AC/DC`
+
+### `justOne` 选项
+
+您可以使用 `justOne` 参数将删除操作限制为仅一个文档（就像使用 `db.collection.deleteOne()`）。
+
+首先，让我们运行一个返回多个文档的查询：
+
+```bash
+$ db.users.find({ born: { $lt: 1950 } })
+
+# { "_id" : 2, "name" : "Ian Paice", "instrument": "Drums", "born": 1948 }
+# { "_id" : 3, "name" : "Roger Glover", "instrument": "Bass", "born": 1945 }
+# { "_id" : 5, "name" : "Don Airey", "instrument": "Keyboards", "born": 1948 }
+```
+
+现在，我们将使用 `justOne` 选项删除其中一条记录。同样，我们将使用完全相同的筛选条件：
+
+```bash
+$ db.users.remove({ born: { $lt: 1950 } }, { justOne: 1 })
+
+# WriteResult({ "nRemoved" : 1 })
+```
+
+现在，让我们运行相同的查询以查看剩余的文档：
+
+```bash
+$ db.users.find({ born: { $lt: 1950 } })
+
+# { "_id" : 3, "name" : "Roger Glover", "instrument": "Bass", "born": 1945 }
+# { "_id" : 5, "name" : "Don Airey", "instrument": "Keyboards", "born": 1948 }
+```
+
+### 删除集合中的所有文档
+
+只需省略任何筛选条件，即可删除集合中的所有文档。
+
+让我们删除 `article` 集合中的所有文档：
+
+```bash
+$ db.articles.remove({})
+
+# WriteResult({ "nRemoved" : 8 })
+```
+
+> **注意**：如果您收到一个错误：`remove needs a query`，请检查您是否忘记包含花括号。
diff --git "a/MongoDB/MongoDB \345\210\240\351\231\244\351\233\206\345\220\210.md" "b/MongoDB/MongoDB \345\210\240\351\231\244\351\233\206\345\220\210.md"
new file mode 100644
index 0000000..d7af81f
--- /dev/null
+++ "b/MongoDB/MongoDB \345\210\240\351\231\244\351\233\206\345\220\210.md"	
@@ -0,0 +1,46 @@
+# MongoDB 删除集合
+
+在 MongoDB 中，您可以使用 `db.collection.drop()` 方法从数据库中删除集合。如果集合存在，它将返回 `true`，如果它不存在，它将返回 `false`。
+
+## 删除一个存在的集合
+
+在这里，我们将使用 `db.collection.drop()` 删除存在的集合。
+
+首先，让我们快速检查一下我们的 `yb` 数据库有哪些集合：
+
+```bash
+$ show collections
+
+# users
+# articles
+# subscribes
+```
+
+我们可以看到，该数据库有三个集合，我们选择删除 `articles` 集合。
+
+```bash
+$ db.article.drop()
+# true
+```
+
+成功后，将返回 `true`。我们可以再快速查看一下我们现在拥有哪些集合：
+
+```bash
+$ show collections
+
+# users
+# subscribes
+```
+
+请注意，`db.collection.drop()` 方法不接受任何参数。只需按照上面的说明运行它。
+
+## 尝试删除不存在的集合
+
+根据上面操作，我们没有了 `articles` 集合，让我们再次尝试删除它，看看我们得到了什么消息：
+
+```bash
+$ db.articles.drop()
+# false
+```
+
+它返回了 `false`，因为集合不存在。
diff --git a/MongoDB/MongoDB.md b/MongoDB/MongoDB.md
new file mode 100644
index 0000000..9ca57a4
--- /dev/null
+++ b/MongoDB/MongoDB.md
@@ -0,0 +1,22 @@
+# MongoDB
+
+[MongoDB](https://www.mongodb.com/) 是一种面向文档的数据库管理系统，由 C++ 等语言撰写而成，以解决应用程序开发社区中的大量现实问题。
+
+MongoDB 被归类为 NoSQL 数据库程序，它使用类似 JSON 的文档以及可选的模式。
+
+MongoDB 由 MongoDB Inc. 于 2007 年 10 月开发，2009 年 2 月首度推出，，并根据服务器端公共许可证（SSPL）获得许可。
+
+以下整理一些学习资料和面试题，供后面复习使用：
+
+- [MongoDB 学习路径](https://university.mongodb.com/learning_paths/developer)
+- [MongoDB 在线沙盒](https://mongoplayground.net/)
+- [MongoDB 常见问题解答](https://www.mongodb.com/zh-cn/faq)
+- [MongoDB FAQ](https://github.com/FAQGURU/FAQGURU/blob/master/topics/en/mongodb.md)
+- [MongoDB Tutorial for Beginners: Learn Basics in 7 Days](https://www.guru99.com/mongodb-tutorials.html)
+- [MongoDB Interview Questions](https://www.tutorialspoint.com/mongodb/mongodb_interview_questions.htm)
+- [Top 20 MongoDB Interview Questions & Answers (2022 Update)](http://career.guru99.com/top-20-mongodb-interview-questions/)
+- [MongoDB Interview Questions](http://www.javatpoint.com/mongodb-interview-questions)
+- [MongoDB Cheat Sheet](https://developer.mongodb.com/quickstart/cheat-sheet/)
+- [MongoDB Cheat Sheet](https://www.bmc.com/blogs/mongodb-cheat-sheet/)
+- [PDF](https://blogs.bmc.com/mongodb-cheat-sheet/?print=pdf)
+- [GitHub](https://gist.github.com/bradtraversy/f407d642bdc3b31681bc7e56d95485b6)
diff --git a/MongoDB/Mongoose Populate.md b/MongoDB/Mongoose Populate.md
new file mode 100644
index 0000000..8af72eb
--- /dev/null
+++ b/MongoDB/Mongoose Populate.md	
@@ -0,0 +1,119 @@
+# Mongoose Populate
+
+在 Mongoose 中，[Populate](https://mongoosejs.com/docs/populate.html) 允许您引用其他集合中的文档。其类似于 [SQL 中的左外部连接](https://www.dofactory.com/sql/left-outer-join)，但区别在于 Populate 发生在 Node.js 应用程序中，而不是在数据库服务器上。Mongoose 在引擎下执行单独的查询以加载引用的文档。
+
+## Populate 基础
+
+假设你有两个 [Mongoose 模型](https://mongoosejs.com/docs/models.html)：`Movie` 和 `Person`。`Movie` 文档有一个 `director` 和一系列 `actors`。
+
+```js
+const Person = mongoose.model(
+  'Person',
+  new mongoose.Schema({
+    name: String
+  })
+)
+
+// ref 告诉 Mongoose Populate 要查询的模型
+const Movie = mongoose.model(
+  'Movie',
+  new mongoose.Schema({
+    title: String,
+    director: {
+      type: mongoose.ObjectId,
+      ref: 'Person'
+    },
+    actors: [
+      {
+        type: mongoose.ObjectId,
+        ref: 'Person'
+      }
+    ]
+  })
+)
+```
+
+Mongoose 查询有一个 [`populate()` 方法](https://mongoosejs.com/docs/api/query.html#query_Query-populate)，允许您在一行中加载电影及其相应的 `director` 和 `actors`：
+
+```js
+const people = await Person.create([
+  { name: 'James Cameron' },
+  { name: 'Arnold Schwarzenegger' },
+  { name: 'Linda Hamilton' }
+])
+
+await Movie.create({
+  title: 'Terminator 2',
+  director: people[0]._id,
+  actors: [people[1]._id, people[2]._id]
+})
+
+// 只加载电影导演
+let movie = await Movie.findOne().populate('director')
+console.log(movie.director.name) // 'James Cameron'
+console.log(movie.actors[0].name) // undefined
+
+// 加载导演和演员
+movie = await Movie.findOne().populate(['director', 'actors'])
+
+console.log(movie.director.name) // 'James Cameron'
+console.log(movie.actors[0].name) // 'Arnold Schwarzenegger'
+console.log(movie.actors[1].name) // 'Linda Hamilton'
+```
+
+> **注意**：Mongoose 文档上也有一个 [`populate()` 方法](https://mongoosejs.com/docs/api/document.html#document_Document-populate)，详细可以查看文档。这里需要注意的是，6.x 已移除文档上 [`document.execPopulate()`](https://mongoosejs.com/docs/migrating_to_6.html#removed-execpopulate)。`populate` 现在返回一个 Promise，其不再是可链接。
+
+所以，以下方法将不在适用：
+
+```js
+movie = await Movie.findOne().populate('director').populate('actors')
+```
+
+您应将旧的链接写法进行替换：
+
+```js
+await doc.populate('path1').populate('path2').execPopulate()
+// 替换为
+await doc.populate(['path1', 'path2'])
+
+await doc
+  .populate('path1', 'select1')
+  .populate('path2', 'select2')
+  .execPopulate()
+// 替换为
+await doc.populate([
+  { path: 'path1', select: 'select1' },
+  { path: 'path2', select: 'select2' }
+])
+```
+
+## 其他案例
+
+如果您正在 `populate` 单个文档，而引用的文档不存在，Mongoose 会将 populate 的属性设置为 `null`。
+
+```js
+await Person.deleteOne({ name: 'James Cameron' })
+
+const movie = await Movie.findOne().populate('director')
+console.log(movie.director) // null
+```
+
+如果您正在 `populate` 一个数组，而其中一个引用的文档不存在，Mongoose 将在默认情况下从数组中过滤该值，并返回一个较短的数组。您可以使用 `retainNullValues` 选项覆盖此选项。
+
+```js
+await Person.deleteOne({ name: 'Arnold Schwarzenegger' })
+
+let movie = await Movie.findOne().populate('actors')
+console.log(movie.actors.length) // 1
+console.log(movie.actors[0].name) // 'Linda Hamilton'
+
+// 设置 retainNullValues 选项，为数组中缺少的文档插入 null
+movie = await Movie.findOne().populate({
+  path: 'actors',
+  options: { retainNullValues: true }
+})
+
+console.log(movie.actors.length) // 2
+console.log(movie.actors[0]) // null
+console.log(movie.actors[1].name) // 'Linda Hamilton'
+```
diff --git "a/MongoDB/Mongoose Schema \345\222\214 SchemaTypes.md" "b/MongoDB/Mongoose Schema \345\222\214 SchemaTypes.md"
new file mode 100644
index 0000000..e2f53c3
--- /dev/null
+++ "b/MongoDB/Mongoose Schema \345\222\214 SchemaTypes.md"	
@@ -0,0 +1,181 @@
+# Mongoose Schema 和 SchemaTypes
+
+在 Mongoose 中，[`Schema`](https://mongoosejs.com/docs/guide.html) 是模型的配置对象。 `Schema` 不允许您从 MongoDB 读写，这就是模型的用途。
+
+它可以：
+
+- 定义保存在 MongoDB 中的文档可以具有哪些属性
+- 定义自定义[验证](https://mongoosejs.com/docs/validation.html)
+- 声明 [virtuals](https://mongoosejs.com/docs/guide.html#virtuals)
+- 声明 [getter 和 setter](https://mongoosejs.com/docs/tutorials/getters-setters.html)
+- 定义[静态](https://mongoosejs.com/docs/guide.html#statics)和[方法](https://mongoosejs.com/docs/guide.html#methods)
+
+## Schema 路径和转换
+
+[`Schema` 类构造函数](https://mongoosejs.com/docs/api/schema.html#schema_Schema)的第一个参数是一个 `definition` 对象。此对象定义 Schema 具有的路径。例如，下面的 `userSchema` 有一个 `name` 路径和一个 `age` 路径。
+
+```js
+const userSchema = new mongoose.Schema({
+  name: String,
+  age: Number
+})
+
+userSchema.path('name') // SchemaString { ... }
+userSchema.path('age') // SchemaNumber { ... }
+```
+
+要在 Mongoose 中创建模型，可以调用 [`mongoose.model()`](https://mongoosejs.com/docs/api/mongoose.html#mongoose_Mongoose-model) 方法，并将 `Schema` 作为第二个参数。例如，下面示例中的 `UserModel` 将具有 `name` 和 `age` 属性，并将删除 `userSchema` 中未定义的任何属性。
+
+```js
+const userSchema = new mongoose.Schema({
+  name: String,
+  age: Number
+})
+
+const UserModel = mongoose.model('User', userSchema)
+
+const doc = new UserModel({
+  name: 'O.O',
+  age: 18,
+  hobby: 'programming'
+})
+
+console.log(doc.name) // 'O.O'
+console.log(doc.age) // 59
+
+// Mongoose 去掉了 hobby，因为它不在 schema 中
+console.log(doc.hobby) // undefined
+```
+
+此外，Mongoose 将强制转换文档以匹配给定的 `Schema` 类型。这意味着您可以安全地将不受信任的数据传递给 Mongoose，并相信数据将与您的 `Schema` 匹配。
+
+```js
+const UserModel = mongoose.model('User', userSchema)
+
+const doc = new UserModel({
+  name: 'O.O',
+  age: '18' // Mongoose 会将其转换为数字
+})
+
+console.log(doc.age) // 18
+await doc.save()
+
+// Mongoose 将 20 从字符串转换为数字，即使在更新中也是如此
+await UserModel.updateOne({}, { $set: { age: '20' } })
+```
+
+## 验证
+
+除了强制转换值，Mongoose 还允许您在 `Schema` 中定义验证。例如，假设您希望确保您的用户有一个 `name`。您可以在 `Schema` 中设置 `name` 属性 `required`，如下所示。
+
+```js
+const userSchema = new mongoose.Schema({
+  // 将 name 设为 required，也就是该字段是必填项
+  name: { type: String, required: true },
+  age: Number
+})
+const UserModel = mongoose.model('User', userSchema)
+
+const doc = new UserModel({ age: 30 })
+
+const err = await doc.save().catch((err) => err)
+console.log(err.message) // Path name is required.
+```
+
+## 选项
+
+`Schema` 构造函数接受 2 个参数：`definition` 和 `options`。您可以在 [Mongoose 文档中找到 `Schema` 选项的完整列表](https://mongoosejs.com/docs/guide.html#options)。
+
+例如，[`typeKey` 选项](https://mongoosejs.com/docs/guide.html#typeKey)允许您配置 Mongoose 查找哪个键，以确定您是否正在定义嵌套路径。假设要定义名为 `type` 的嵌套键：
+
+```js
+const schema = new mongoose.Schema({
+  nested: {
+    type: String
+  }
+})
+
+schema.path('nested') // SchemaString { ... }
+schema.path('nested.type') // undefined
+```
+
+此用例有[多种解决方法](https://mongoosejs.com/docs/faq.html#type-key)。一种是设置 `typeKey` 选项，如下所示。
+
+```js
+// 让 Mongoose 查找 $type 而不是 type
+const options = { typeKey: '$type' }
+const schema = new mongoose.Schema(
+  {
+    nested: {
+      type: String
+    },
+    otherProperty: {
+      $type: String
+    }
+  },
+  options
+)
+
+schema.path('nested.type') // SchemaString { ... }
+schema.path('otherProperty') // SchemaString { ... }
+```
+
+## SchemaType
+
+在 Mongoose 中，[SchemaType](https://mongoosejs.com/docs/schematypes.html) 是 Schema 中单个路径的配置对象。SchemaType 说明路径应该是什么类型，如何验证该路径，路径的默认值是什么，以及其他特定于 Mongoose 的配置选项。
+
+```js
+const schema = new mongoose.Schema({ name: String, age: Number })
+
+schema.path('name') instanceof mongoose.SchemaType // true
+schema.path('age') instanceof mongoose.SchemaType // true
+```
+
+`SchemaType` 类只是一个基类。有几个类继承自 `SchemaType`，代表不同的核心 Mongoose 类型：
+
+- `mongoose.Schema.Types.String`
+- `mongoose.Schema.Types.Number`
+- `mongoose.Schema.Types.Date`
+- `mongoose.Schema.Types.Buffer`
+- `mongoose.Schema.Types.Boolean`
+- `mongoose.Schema.Types.Mixed`
+- `mongoose.Schema.Types.ObjectId`（或等效的 `mongoose.ObjectId`）
+- `mongoose.Schema.Types.Array`
+- `mongoose.Schema.Types.Decimal128`
+- `mongoose.Schema.Types.Map`
+
+例如：
+
+```js
+const schema = new mongoose.Schema({ name: String, age: Number })
+
+schema.path('name') instanceof mongoose.SchemaType // true
+schema.path('name') instanceof mongoose.Schema.Types.String // true
+
+schema.path('age') instanceof mongoose.SchemaType // true
+schema.path('age') instanceof mongoose.Schema.Types.Number // true
+```
+
+您通常不必直接使用 `SchemaType` 实例。您可以在 `Schema` 定义中声明验证器和默认值。例如，下面的示例将默认 `age` 设置为 25，并添加一个验证器，以确保 `age` 至少为 21。
+
+```js
+const schema = new mongoose.Schema({
+  age: {
+    type: Number,
+    default: 25,
+    validate: (v) => v >= 21
+  }
+})
+```
+
+以上是您通常在 Mongoose 中声明默认值和验证器的方式。但是在创建模式之后，没有什么可以阻止您将它们添加到 `age` SchemaType 中。
+
+```js
+// 等价的
+const schema = new mongoose.Schema({ age: Number })
+
+schema.path('age').default(25)
+schema.path('age').validate((v) => v >= 21)
+```
+
+后一种语法与前一种语法相同，但并不常用。直接使用 `SchemaType` 实例最常见的情况是使用[嵌入式鉴别器](https://thecodebarbarian.com/mongoose-4.12-single-embedded-discriminators.html)。
diff --git a/MongoDB/Mongoose Virtuals.md b/MongoDB/Mongoose Virtuals.md
new file mode 100644
index 0000000..abd406a
--- /dev/null
+++ b/MongoDB/Mongoose Virtuals.md	
@@ -0,0 +1,44 @@
+# Mongoose Virtuals
+
+[Mongoose virtuals](https://mongoosejs.com/docs/guide.html#virtuals) 是 [Mongoose Documents](https://mongoosejs.com/docs/documents.html) 上的计算属性。它们不存储在 MongoDB 中：每当您访问它时，都会计算一个 virtual 属性。
+
+假设您有一个 `BlogPost` 模型，该模型存储 BlogPost 的原始 [markdown](https://www.markdownguide.org/) 内容。您可以创建一个虚拟 `html`，每当您访问 `html` 属性时，它会自动为您调用 [marked](http://npmjs.com/package/marked) 解析器。
+
+```js
+const marked = require('marked')
+
+const blogPostSchema = new Schema({ content: String })
+
+// _virtual_ 是一个 schema 属性，它不是存储在 MongoDB 中，而是根据 document 中的其他属性计算。
+blogPostSchema.virtual('html').get(function () {
+  // 在 getter 函数中，this 是 document，因此不要对 virtual getter 使用箭头函数！
+  return marked(this.content)
+})
+
+const BlogPost = mongoose.model('BlogPost', blogPostSchema)
+const doc = new BlogPost({ content: '# Hello' })
+console.log(doc.html) // "<h1 id="hello">Hello</h1>"
+```
+
+**为什么要使用 `virtual` 而不是 [methods](https://mongoosejs.com/docs/guide.html#methods)呢？**
+
+因为您可以配置 Mongoose 在将 Mongoose 文档转换为 JSON 时，包括使用 Express 的 `res.json()` 方法时，包含 virtuals。
+
+```js
+const app = require('express')()
+const axios = require('axios')
+
+// 无论何时调用 JSON.stringify() 或 res.json()，都要让 Mongoose 附加 virtuals
+mongoose.set('toJSON', { virtuals: true })
+
+app.get('*', function (req, res) {
+  // Mongoose 将自动附加虚拟 html
+  res.json(doc)
+})
+
+const server = app.listen(3000)
+
+await axios.get('http://localhost:3000').then((res) => console.log(res.data.html)) // "<h1 id="hello">Hello</h1>"
+```
+
+**virtuals 也有缺点**，由于它不存储在 MongoDB 中，因此您无法在[查询](https://mongoosejs.com/docs/queries.html)中使用它们。
diff --git a/MongoDB/Mongoose aggregate.md b/MongoDB/Mongoose aggregate.md
new file mode 100644
index 0000000..82f87ce
--- /dev/null
+++ b/MongoDB/Mongoose aggregate.md	
@@ -0,0 +1,135 @@
+# Mongoose aggregate
+
+[Mongoose 的 `aggregate()` 方法](https://mongoosejs.com/docs/api/model.html#model_Model.aggregate)是如何将 [MongoDB 的聚合框架](https://docs.mongodb.com/manual/aggregation/)与 Mongoose 一起使用的。Mongoose `aggregate()` 是一个小的包装器，因此任何在 [MongoDB shell（`mongo`）](https://docs.mongodb.com/manual/mongo/)中工作的任何聚合查询都应该在 Mongoose 中工作，而不做任何更改。
+
+## 什么是聚合框架？
+
+从语法上讲，聚合框架查询是一个阶段数组。阶段是 MongoDB 应该如何转换进入该阶段的任何文档的对象描述。第一阶段将文档馈送到第二阶段，依此类推，这样您就可以使用阶段组合转换。传递给 `aggregate()` 方法的阶段数组称为聚合管道。
+
+### `$match` 阶段
+
+`$match` 阶段过滤掉与给定 `filter` 参数不匹配的文档 ，类似于 Mongoose `find()` 方法的过滤器。
+
+```js
+await User.create([
+  { name: 'O.O', age: 18 },
+  { name: 'D.O', age: 19 },
+  { name: 'K.O', age: 31 },
+  { name: 'O.K', age: 19 },
+  { name: 'LAY', age: 28 }
+])
+
+const filter = {
+  age: {
+    $gte: 30
+  }
+}
+
+let docs = await User.aggregate([{ $match: filter }])
+
+console.log(docs.length) // 1
+console.log(docs[0].name) // K.O
+console.log(docs[0].age) // 31
+
+// $match 类似于 find()
+docs = await User.find(filter)
+console.log(docs.length) // 1
+console.log(docs[0].name) // 'K.O'
+console.log(docs[0].age) // 31
+```
+
+### `$group` 阶段
+
+聚合可以做的不仅仅是过滤文档。您还可以使用聚合框架来转换文档。例如，`$group` 阶段的行为类似于 `reduce()` 方法。例如，`$group` 阶段允许您计算给定 `age` 的用户数量。
+
+```js
+let docs = await User.aggregate([
+  {
+    $group: {
+      // 每个 _id 都必须是唯一的，因此如果有多个文档具有相同的期限，MongoDB 将增加 count。
+      _id: '$age',
+      count: {
+        $sum: 1
+      }
+    }
+  }
+])
+
+console.log(docs.length) // 4
+docs.sort((d1, d2) => d1._id - d2._id)
+console.log(docs[0]) // { _id: 18, count: 1 }
+console.log(docs[1]) // { _id: 19, count: 2 }
+console.log(docs[2]) // { _id: 28, count: 1 }
+console.log(docs[3]) // { _id: 31, count: 1 }
+```
+
+### 结合多个阶段
+
+聚合管道的优势在于其**可组合性**。例如，结合前两个例子，仅按 `age` 对用户进行分组，条件为 `age < 30`：
+
+```js
+let docs = await User.aggregate([
+  {
+    $match: {
+      age: {
+        $lt: 30
+      }
+    }
+  },
+  {
+    $group: {
+      _id: '$age',
+      count: {
+        $sum: 1
+      }
+    }
+  }
+])
+
+console.log(docs.length) // 3
+docs.sort((d1, d2) => d1._id - d2._id)
+console.log(docs[0]) // { _id: 18, count: 1 }
+console.log(docs[1]) // { _id: 19, count: 2 }
+console.log(docs[2]) // { _id: 28, count: 1 }
+```
+
+## Mongoose `Aggregate` 类
+
+Mongoose 的 `aggregate()` 方法返回 Mongoose [`Aggregate` 类](https://mongoosejs.com/docs/api/aggregate.html)的实例 。`Aggregate` 聚合实例是可聚合的，因此您可以将它们与 `await` 和 Promise 链一起使用。
+
+`Aggregate` 类还支持用于构建聚合管道的链接接口。例如，下面的代码显示了另一种用于构建聚合管道的语法，该聚合管道后跟 `$match` 和 `$group`。
+
+```js
+let docs = await User.aggregate()
+  .match({ age: { $lt: 30 } })
+  .group({ _id: '$age', count: { $sum: 1 } })
+
+console.log(docs.length) // 3
+docs.sort((d1, d2) => d1._id - d2._id)
+console.log(docs[0]) // { _id: 18, count: 1 }
+console.log(docs[1]) // { _id: 19, count: 2 }
+console.log(docs[2]) // { _id: 28, count: 1 }
+```
+
+[Mongoose 中间件](https://mongoosejs.com/docs/middleware.html)也支持 `pre('aggregate')` 和 `post('aggregate')` 钩子。您可以使用聚合中间件来转换聚合管道。
+
+```js
+const userSchema = new mongoose.Schema({ name: String, age: Number })
+userSchema.pre('aggregate', function () {
+  // 将 $match 添加到管道的开头
+  this.pipeline().unshift({ $match: { age: { $lt: 30 } } })
+})
+const User = mongoose.model('User', userSchema)
+
+// pre('aggregate') 向管道中添加一个 $match。
+let docs = await User.aggregate().group({
+  _id: '$age',
+  count: { $sum: 1 }
+})
+
+console.log(docs.length) // 3
+docs.sort((d1, d2) => d1._id - d2._id)
+console.log(docs[0]) // { _id: 18, count: 1 }
+console.log(docs[1]) // { _id: 19, count: 2 }
+console.log(docs[2]) // { _id: 28, count: 1 }
+```
diff --git "a/MongoDB/Mongoose create() \346\226\271\346\263\225.md" "b/MongoDB/Mongoose create() \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..a43929a
--- /dev/null
+++ "b/MongoDB/Mongoose create() \346\226\271\346\263\225.md"	
@@ -0,0 +1,93 @@
+# Mongoose create() 方法
+
+Mongoose `model` 有一个 [`create()` 方法](https://mongoosejs.com/docs/api/model.html#model_Model.create)通常用于创建新文档。
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String
+  })
+)
+
+const doc = await User.create({ name: 'O.O' })
+
+console.log(doc instanceof User) // true
+console.log(doc.name) // 'O.O'
+```
+
+`create()` 方法是 `save()` 方法的封装。上述 `create()` 调用相当于：
+
+```js
+const doc = new User({ name: 'O.O' })
+await doc.save()
+```
+
+使用 `create()` 最常见的原因是，通过传递一个对象数组，您可以通过单个方法调用方便地 `save()` 多个文档：
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String
+  })
+)
+
+const docs = await User.create([{ name: 'O.O' }, { name: 'K.O' }])
+console.log(docs[0] instanceof User) // true
+console.log(docs[0].name) // 'O.O'
+console.log(docs[1].name) // 'K.O'
+```
+
+## 使用会话和事务
+
+除了传递对象数组之外，`create()` 还支持传入单个对象或对象的扩展。例如，下面是创建多个文档的另一种方法。
+
+```js
+// 保存两个新文档。
+await User.create({ name: 'O.O' }, { name: 'D.O' })
+```
+
+不幸的是，如果您想将选项传递给 `create()` 方法，比如您想使用 [transactions](https://mongoosejs.com/docs/transactions.html)，扩展语法会导致语法歧义。例如，下面的代码将尝试创建两个文档，而不是将第二个参数视为 `options` 对象。
+
+```js
+const session = await User.startSession()
+
+await session.withTransaction(async () => {
+  // 注意，以下内容将不工作！它不是创建一个带有关联 session 的文档，而是创建两个没有 session 的文档！
+  await User.create({ name: 'D.O' }, { session })
+})
+```
+
+因此，如果要在事务中使用 `create()`，则**必须**将文档作为数组传递，即使只创建一个文档也是如此。
+
+```js
+const session = await User.startSession()
+
+await session.withTransaction(async () => {
+  // 使用给定 session 创建一个文档。
+  await User.create([{ name: 'D.O' }], { session })
+})
+```
+
+## 与 `insertMany()`
+
+`model` 还有一个 [`insertMany()` 方法](https://mongoosejs.com/docs/api/model.html#model_Model.insertMany)在语法上类似于 `create()`。
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String
+  })
+)
+
+const [doc] = await User.insertMany([{ name: 'O.O' }])
+
+console.log(doc instanceof User) // true
+console.log(doc.name) // 'O.O'
+```
+
+最大的区别是，`insertMany()` 最终作为一个原子 `insertMany()` 命令，Mongoose 将它发送给 MongoDB 服务器，而 `create()` 最终作为一组单独的 `insertOne()` 调用。虽然这意味着 `insertMany()` 通常更快，但也意味着 `insertMany()` 更容易受到[**慢查询**](https://docs.mongodb.com/manual/tutorial/manage-the-database-profiler/)的影响。因此，建议使用 `create()` 而不是 `insertMany()`，除非您愿意冒险减慢其他操作以加快批量插入。
+
+另一个区别是 `create()` 触发 `save()` 中间件，因为 `create()` 在内部调用 `save()`。`insertMany()` 不会触发`save()` 中间件，但它会触发 `insertMany()` 中间件。
diff --git "a/MongoDB/Mongoose \344\270\255\347\232\204 ObjectIds.md" "b/MongoDB/Mongoose \344\270\255\347\232\204 ObjectIds.md"
new file mode 100644
index 0000000..68e049f
--- /dev/null
+++ "b/MongoDB/Mongoose \344\270\255\347\232\204 ObjectIds.md"	
@@ -0,0 +1,64 @@
+# Mongoose 中的 ObjectIds
+
+默认情况下，MongoDB 在 [ObjectId](https://docs.mongodb.com/manual/reference/method/ObjectId/) 类型的每个文档上创建一个 `_id` 属性。许多其他数据库默认使用数字 id 属性，但在 MongoDB 和 Mongoose 中，id 默认为对象。
+
+```js
+const Model = mongoose.model('Test', mongoose.Schema({ name: String }))
+const doc = new Model({ name: 'test' })
+
+doc._id instanceof mongoose.Types.ObjectId // true
+typeof doc._id // object
+doc._id // 5d6ede6a0ba62570afcedd3a
+```
+
+## ObjectIds
+
+MongoDB `ObjectIds` 通常使用 24 个十六进制字符串表示，如 `5d6ede6a0ba62570afcedd3a`。Mongoose 根据模式路径为您的 `ObjectIds` 强制转换 24 个字符字符串。
+
+```js
+const schema = mongoose.Schema({ testId: mongoose.ObjectId })
+const Model = mongoose.model('Test', schema)
+
+const doc = new Model({ testId: '5d6ede6a0ba62570afcedd3a' })
+
+// testId 是一个 ObjectId，Mongoose 根据您的模式自动将 24 个十六进制字符字符串转换为 ObjectId。
+doc.testId instanceof mongoose.Types.ObjectId // true
+```
+
+Mongoose 还可以将其他几个值转换为 `ObjectId`。关键的教训是 `ObjectId` 是 12 个任意字节。任何 12 字节的缓冲区或 12 个字符的字符串都是有效的 `ObjectId`。
+
+```js
+const schema = mongoose.Schema({ testId: mongoose.ObjectId })
+const Model = mongoose.model('Test', schema)
+
+// 任何 12 个字符的字符串都是有效的 ObjectId，因为 ObjectId 的唯一定义特性是它们有 12 个字节。
+let doc = new Model({ testId: '12char12char' })
+doc.testId instanceof mongoose.Types.ObjectId // true
+doc.testId // '313263686172313263686172'
+
+// 类似地，Mongoose 将自动将长度为 12 的缓冲区转换为 ObjectID。
+doc = new Model({ testId: Buffer.from('12char12char') })
+doc.testId instanceof mongoose.Types.ObjectId // true
+doc.testId // 313263686172313263686172
+```
+
+## 从 ObjectId 获取时间戳
+
+`ObjectId` 对创建它们的本地时间进行编码。这意味着您通常可以从文档的 `_id` 中提取文档创建的时间。
+
+```js
+const schema = mongoose.Schema({ testId: mongoose.ObjectId })
+const Model = mongoose.model('Test', schema)
+
+const doc = new Model({ testId: '313263686172313263686172' })
+doc.testId.getTimestamp() // 1996-02-27T01:50:32.000Z
+doc.testId.getTimestamp() instanceof Date // true
+```
+
+## 为什么是 ObjectIds？
+
+假设您正在构建自己的数据库，并且希望在每个新文档上设置一个数字 `id` 属性。`id` 属性应该增加，因此插入的第一个文档的 `id = 0`，然后 `id = 1`，依此类推。
+
+在单个进程中递增计数器是一个容易的问题。但是，如果您有多个进程，比如分片[集群](https://docs.mongodb.com/manual/sharding/)，该怎么办？现在，每个进程都需要能够递增计数器，因此无论何时插入文档，都需要递增分布式计数器。如果两个进程之间存在显著的网络延迟，则可能导致性能不可靠；如果一个进程停机，则可能导致不可预测的结果。
+
+`ObjectId` 旨在解决这个问题。[`ObjectId` 冲突的可能性很小](https://docs.mongodb.com/manual/reference/bson-types/#objectid)，因此 MongoDB 可以分配 ID，这些 ID 在没有进程间通信的分布式系统中可能是唯一的。
diff --git "a/MongoDB/Mongoose \344\270\255\347\232\204 Promise.md" "b/MongoDB/Mongoose \344\270\255\347\232\204 Promise.md"
new file mode 100644
index 0000000..a70a277
--- /dev/null
+++ "b/MongoDB/Mongoose \344\270\255\347\232\204 Promise.md"	
@@ -0,0 +1,80 @@
+# Mongoose 中的 Promise
+
+[Mongoose 内置了对 promises 的支持](https://mongoosejs.com/docs/promises.html)。在 Mongoose 5.x 以上的异步操作中，如 `.save()` 和 `.find().exec()` 返回一个 Promise，除非您传递一个回调函数。
+
+```js
+const Model = mongoose.model(
+  'test',
+  new mongoose.Schema({
+    name: String
+  })
+)
+
+const doc = new Model({ name: 'O.O' })
+
+const promise = doc.save()
+console.log(promise instanceof Promise) // true
+
+// 回调
+const res = doc.save(function callback(err) {
+  /* ... */
+})
+
+console.log(res) // undefined
+```
+
+## `mongoose.Promise` 属性
+
+Mongoose 单例有一个 [`Promise` 属性](https://mongoosejs.com/docs/api/mongoose.html#mongoose_Mongoose-Promise)，可用于设置 Mongoose 使用的 Promise 库。例如，您可以让 Mongoose 使用流行的 [Bluebird Promise 库](https://www.npmjs.com/package/bluebird)：
+
+```js
+const Bluebird = require('bluebird')
+
+// 让 Mongoose 使用 Bluebird 而不是内置的 promises。
+mongoose.Promise = Bluebird
+
+const doc = new Model({ name: 'D.O' })
+
+const promise = doc.save()
+promise instanceof Promise // false
+promise instanceof Bluebird // true
+```
+
+如果您尚未升级到 Mongoose 5.x 以上版本，您可能会在 Mongoose 4.x 中看到以下弃用警告：
+
+> **WARNING: Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead**
+
+要解决该弃用警告，请添加以下代码：
+
+```js
+mongoose.Promise = global.Promise
+```
+
+那是因为 Mongoose 5.x 的重大变化之一是改用 Node.js 的原生 promise。Mongoose 4.x 在 ES6 之前发布，因此它有自己的 promise 实现，与原生 JavaScript promise 略有不同。
+
+如果在使用 Mongoose 5 的代码中看到 `mongoose.Promise = global.Promise`，请将其删除。默认情况下，Mongoose 5.x 使用原生 Promise，因此该代码在 Mongoose 5 中将不起作用。
+
+## `Query` 不是 Promise
+
+`save()` 方法返回一个 Promise，而 Mongoose 的 `find()` 方法返回一个 [Mongoose `Query`](https://mongoosejs.com/docs/queries.html)。
+
+```js
+const query = Model.find()
+
+query instanceof Promise // false
+query instanceof mongoose.Query // true
+```
+
+Mongoose 查询是可选项。换句话说，查询有一个 [`then()` 方法](https://mongoosejs.com/docs/api/query.html#query_Query-then)，其行为类似于 Promise `then()` 方法。因此，您可以使用带有 Promise 链和 `async/await` 的查询。
+
+```js
+// 使用带有 promise 链的查询
+Model.findOne({ name: 'D.O' })
+  .then((doc) => Model.updateOne({ _id: doc._id }, { name: 'O.O' }))
+  .then(() => Model.findOne({ name: 'O.O' }))
+  .then((doc) => console.log(doc.name)) // O.O
+
+// 使用 async/await 查询
+const doc = await Model.findOne({ name: 'O.O' })
+console.log(doc.name) // O.O
+```
diff --git "a/MongoDB/Mongoose \344\270\255\347\232\204 db \345\261\236\346\200\247.md" "b/MongoDB/Mongoose \344\270\255\347\232\204 db \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..0a8ca0b
--- /dev/null
+++ "b/MongoDB/Mongoose \344\270\255\347\232\204 db \345\261\236\346\200\247.md"	
@@ -0,0 +1,27 @@
+# Mongoose 中的 db 属性
+
+Mongoose 提供了许多强大的功能，如[中间件](https://mongoosejs.com/docs/middleware.html)和[验证](https://mongoosejs.com/docs/validation.html)。但有时您希望绕过 Mongoose 并使用 [Node.js MongoDB 驱动程序](https://www.npmjs.com/package/mongodb)。
+
+Mongoose 连接有一个 `db` 属性，允许您访问 [MongoDB 驱动程序的 db 句柄](http://mongodb.github.io/node-mongodb-native/3.6/api/Db.html)：
+
+```js
+// 连接到运行在 localhost:27017 上的 MongoDB 服务器并使用，并使用 test 数据库
+await mongoose.connect('mongodb://localhost:27017/test', {
+  useNewUrlParser: true
+})
+```
+
+Mongoose 不支持获取分析级别，而 MongoDB [profilingLevel](https://mongodb.github.io/node-mongodb-native/4.9/modules.html#ProfilingLevel) 方法可以获取当前数据库的分析级别：
+
+```js
+const profilingLevel = await mongoose.connection.db.profilingLevel()
+console.log(profilingLevel) // off
+```
+
+通常情况下 `db` 属性就已足够了，但在某些情况下，您需要使用 [`MongoClient` 实例](https://mongodb.github.io/node-mongodb-native/4.9/classes/MongoClient.html)而不是 `db` 句柄。
+
+```js
+const client = mongoose.connection.getClient()
+const profilingLevel = await client.db('otherdb').profilingLevel()
+console.log(profilingLevel) // off
+```
diff --git "a/MongoDB/Mongoose \344\270\255\347\232\204\346\236\232\344\270\276.md" "b/MongoDB/Mongoose \344\270\255\347\232\204\346\236\232\344\270\276.md"
new file mode 100644
index 0000000..7705100
--- /dev/null
+++ "b/MongoDB/Mongoose \344\270\255\347\232\204\346\236\232\344\270\276.md"	
@@ -0,0 +1,40 @@
+# Mongoose 中的枚举
+
+Mongoose `String` 和 `Number` 类型有一个 `enum` 验证器。`enum` 验证器是一个数组，它将检查给定的值是否是数组中的项。如果该值不在数组中，当您尝试 save() 时，Mongoose 将抛出 `ValidationError`。
+
+```js
+const testSchema = new mongoose.Schema({
+  status: {
+    type: String,
+    enum: ['valid', 'invalid']
+  }
+})
+
+const Test = mongoose.model('Test', testSchema)
+
+await Test.create({ name: 'not a status' }) // 引发验证错误
+await Test.create({ name: 'valid' }) // ✅
+```
+
+## TypeScript 枚举
+
+您还可以使用 [TypeScript 枚举](https://www.typescriptlang.org/docs/handbook/enums.html)。在运行时，TypeScript 枚举只是 POJO，其中对象的值就是枚举值。当您设置 `enum` 为一个对象时，Mongoose 将在对象上运行 `Object.values()` 来获取所需的值。
+
+```js
+enum Status {
+  Valid,
+  Invalid
+}
+
+const testSchema = new mongoose.Schema({
+  rating: {
+    type: Number,
+    enum: Status
+  }
+})
+
+const Test = mongoose.model('Test', testSchema)
+
+await Test.create({ name: 'invalid' }) // 引发验证错误
+await Test.create({ name: 'Valid' }) // ✅
+```
diff --git "a/MongoDB/Mongoose \345\224\257\344\270\200\347\264\242\345\274\225\357\274\210unique\357\274\211.md" "b/MongoDB/Mongoose \345\224\257\344\270\200\347\264\242\345\274\225\357\274\210unique\357\274\211.md"
new file mode 100644
index 0000000..11394c0
--- /dev/null
+++ "b/MongoDB/Mongoose \345\224\257\344\270\200\347\264\242\345\274\225\357\274\210unique\357\274\211.md"	
@@ -0,0 +1,131 @@
+# Mongoose 唯一索引（unique）
+
+Mongoose 的唯一索引 `unique` 选项都作用是，对于给定的路径，每个文档必须具有唯一的值。例如，下面是如何告诉 Mongoose 用户的 `email` 必须是唯一的。
+
+```js
+const mongoose = require('mongoose')
+
+const userSchema = new mongoose.Schema({
+  email: {
+    type: String,
+    unique: true // email 必须是唯一的
+  }
+})
+
+const User = mongoose.model('User', userSchema)
+```
+
+如果你尝试使用相同的 `name` 创建两个用户，你将得到一个重复键错误。
+
+```js
+// 抛出 MongoError: E11000 duplicate key error collection
+await User.create([{ email: 'test@163.com' }, { email: 'test2@163.com' }])
+
+const doc = new User({ email: 'test@163.com' })
+// 抛出 MongoError: E11000 duplicate key error collection
+await doc.save()
+```
+
+更新还可能引发重复键错误。例如，如果你创建了一个具有唯一电子邮件地址的用户，然后将其电子邮件地址更新为非唯一值，你将得到相同的错误。
+
+```js
+await User.create({ email: 'test2@163.com' })
+
+// 抛出 MongoError: E11000 duplicate key error collection
+await User.updateOne({ email: 'test2@163.com' }, { email: 'test@163.com' })
+```
+
+## `unique` 定义索引，而不是验证器
+
+一个常见的问题是 `unique` 选项告诉 Mongoose 定义一个[唯一索引](https://docs.mongodb.com/manual/core/index-unique/)。这意味着当你使用 `validate()` 时，Mongoose 不会检查唯一性。
+
+```js
+await User.create({ email: 'test@163.com' })
+
+const doc = new User({ email: 'test@163.com' })
+await doc.validate() // 不会抛出错误
+```
+
+在编写自动测试时，[`unique` 定义索引而不是验证器](https://mongoosejs.com/docs/validation.html#the-unique-option-is-not-a-validator)这一点很重要。如果删除 `User` 模型所连接的数据库，还将删除 `unique` 索引，并且可以保存重复的索引。
+
+```js
+await mongoose.connection.dropDatabase()
+
+// 成功，因为 unique 索引已消失！
+await User.create([{ email: 'test@163.com' }, { email: 'test@163.com' }])
+```
+
+在生产环境中，通常不会删除数据库，因此这在生产环境中很少成为问题。
+
+编写 Mongoose 测试时，通常建议使用 [`deleteMany()`](https://mongoosejs.com/docs/api/model.html#model_Model.deleteMany) 清除测试之间的数据，而不是 [`dropDatabase()`](https://mongoosejs.com/docs/api/connection.html#connection_Connection-dropDatabase)。这样可以确保删除所有文档，而无需清除数据库级别的配置，如索引和排序规则 [`deleteMany()` 也比 `dropDatabase()` 快得多](https://mongoosejs.com/docs/api/connection.html#connection_Connection-dropDatabase)。
+
+但是，如果选择在测试之间删除数据库，则可以使用 [`Model.syncIndexes()`](https://mongoosejs.com/docs/api.html#model_Model.syncIndexes) 方法重新生成所有唯一索引。
+
+```js
+await mongoose.connection.dropDatabase()
+
+// 重新生成所有索引
+await User.syncIndexes()
+
+// 抛出 MongoError: E11000 duplicate key error collection
+await User.create([{ email: 'test@163.com' }, { email: 'test@163.com' }])
+```
+
+## 处理 `null` 值
+
+`null` 是一个不同的值，你不能保存两个具有 `null` 的 `email` 用户。同样，不能保存两个没有 `email` 属性的用户。
+
+```js
+// 抛出，因为两个文档都有 undefined
+await User.create([{}, {}])
+
+// 抛出，因为两个文档都有 null
+await User.create([{ email: null }, { email: null }])
+```
+
+一种解决方法是使用 `required` 属性 ，这将不允许 `null` 和 `undefined` 的值存在：
+
+```js
+const userSchema = new mongoose.Schema({
+  email: {
+    type: String,
+    required: true,
+    unique: true // email 必须是唯一的
+  }
+})
+```
+
+如果你需要 `email` 是唯一的，除非它没有定义，你可以改为定义一个 **[Sparse Indexes（稀疏索引）](https://www.mongodb.com/docs/manual/core/index-sparse/)** 在 `email` 上。如下所示：
+
+```js
+const userSchema = new mongoose.Schema({
+  email: {
+    type: String, // email 必须是唯一的，除非没有定义
+    index: {
+      unique: true,
+      sparse: true
+    }
+  }
+})
+```
+
+## 向用户提供友好的重复键错误
+
+要使 `MongoDB E11000` 错误消息对用户友好，你可以使用 [mongoose-beautiful-unique-validation](https://www.npmjs.com/package/mongoose-beautiful-unique-validation) 包。
+
+```js
+const schema = new mongoose.Schema({ name: String })
+schema.plugin(require('mongoose-beautiful-unique-validation'))
+
+const UserModel = mongoose.model('User', schema)
+
+const doc = await UserModel.create({ name: 'O.O' })
+
+try {
+  // 尝试创建具有相同 _id 的文档。这将始终失败，因为 MongoDB 集合在 _id 上始终具有唯一索引。
+  await UserModel.create(Object.assign({}, doc.toObject()))
+} catch (err) {
+  // _id 不是唯一的。
+  console.log(err.errors['_id'].message)
+}
+```
diff --git "a/MongoDB/Mongoose \346\217\222\345\205\245\346\226\207\346\241\243.md" "b/MongoDB/Mongoose \346\217\222\345\205\245\346\226\207\346\241\243.md"
new file mode 100644
index 0000000..62c4769
--- /dev/null
+++ "b/MongoDB/Mongoose \346\217\222\345\205\245\346\226\207\346\241\243.md"	
@@ -0,0 +1,55 @@
+# Mongoose 插入文档
+
+在 MongoDB 中，[upsert](https://en.wiktionary.org/wiki/upsert) 是指在没有文档匹配 `filter` 的情况下插入新文档的更新。要在 Mongoose 中插入文档，应将 `upsert` 选项设置为 [`Model.updateOne()`](https://mongoosejs.com/docs/api.html#model_Model.updateOne) 方法：
+
+```js
+const res = await Character.updateOne(
+  { name: 'O.O' },
+  { $set: { age: 18 } },
+  { upsert: true } // 将此更新设置为 upsert
+)
+
+// 如果 MongoDB 修改了现有文档，则为 1；如果 MongoDB 插入了新文档，则为 0。
+console.log(res.nModified)
+// 包含插入文档的描述数组，包括所有插入文档的 _id。
+console.log(res.upserted)
+```
+
+要获取更新插入的文档，应该使用 [`Model.findOneAndUpdate()`](https://mongoosejs.com/docs/api.html#model_Model.findOneAndUpdate) 方法，而不是 `Model.updateOne()`。
+
+```js
+const doc = await Character.findOneAndUpdate(
+  { name: 'O.O' },
+  { $set: { age: 18 } },
+  { upsert: true, new: true }
+)
+
+console.log(doc.name) // O.O
+console.log(doc.age) // 18
+```
+
+Mongoose 将最多插入一个文档。即使将 [`Model.updateMany()`](https://mongoosejs.com/docs/api.html#model_Model.updateMany) 与 `upsert` 一起使用，Mongoose 最多也会插入一个文档。要批量插入多个文档，应使用 [`Model.bulkWrite()`](https://mongoosejs.com/docs/api.html#model_Model.bulkWrite) 方法。
+
+```js
+const res = await Character.bulkWrite([
+  {
+    updateOne: {
+      filter: { name: 'D.O' },
+      update: { age: 20 },
+      upsert: true
+    }
+  },
+  {
+    updateOne: {
+      filter: { name: 'KAI' },
+      update: { age: 20 },
+      upsert: true
+    }
+  }
+])
+
+// 包含由于 upsert 而插入的文档数
+console.log(res.upsertedCount)
+// 包含已更新的现有文档数。
+console.log(res.modifiedCount)
+```
diff --git "a/MongoDB/Mongoose \346\225\260\347\273\204.md" "b/MongoDB/Mongoose \346\225\260\347\273\204.md"
new file mode 100644
index 0000000..94ecaf4
--- /dev/null
+++ "b/MongoDB/Mongoose \346\225\260\347\273\204.md"	
@@ -0,0 +1,138 @@
+# Mongoose 数组
+
+[Mongoose 的 `Array` 类](https://mongoosejs.com/docs/schematypes.html#arrays)使用额外的 Mongoose 功能扩展了普通的 JavaScript 数组。
+
+例如，假设您有一个带有 `tags` 数组的 `BlogPost` 模型骨架：
+
+```js
+const blogPostSchema = new mongoose.Schema({
+  title: String,
+  tags: [String]
+})
+```
+
+当您创建一个新 `BlogPost` 文档时，`tags` 属性是普通 JavaScript 数组类的一个实例。但它也有一些特殊的性质。
+
+```js
+const blogPostSchema = Schema(
+  {
+    title: String,
+    tags: [String]
+  },
+  { versionKey: false }
+)
+const BlogPost = mongoose.model('BlogPost', blogPostSchema)
+
+const doc = new BlogPost({
+  title: 'Intro to JavaScript',
+  tags: ['programming']
+})
+
+Array.isArray(doc.tags) // true
+doc.tags.isMongooseArray // true
+```
+
+例如，Mongoose 截取 `push()` 对 `tags` 数组的调用，当你 `save()` 文档时，它足够聪明地使用 `$push` 更新文档。
+
+```js
+mongoose.set('debug', true)
+
+doc.tags.push('web development')
+// 由于 debug 模式，将打印:
+// Mongoose: blogposts.updateOne({ _id: ObjectId(...) }, { '$push': { tags: { '$each': [ 'web development' ] } } }, { session: null })
+await doc.save()
+```
+
+## 文档数组
+
+`tags` 示例是一个基元数组。Mongoose 还支持子文档数组。下面是如何定义 `members` 数组的方法，每个数组都有 `firstName` 和 `lastName` 属性。
+
+```js
+const groupSchema = new mongoose.Schema({
+  name: String,
+  members: [{ firstName: String, lastName: String }]
+})
+```
+
+`doc.members` 是一个普通 JavaScript 数组的实例，因此它具有所有常用函数，例如 `slice()` 和 `filter()`。但它也有一些特定于 Mongoose 的功能。
+
+```js
+const groupSchema = new mongoose.Schema({
+  name: String,
+  members: [{ firstName: String, lastName: String }]
+})
+const Group = mongoose.model('Group', groupSchema)
+
+const doc = new Group({
+  title: 'Jedi Order',
+  members: [{ firstName: 'Luke', lastName: 'Skywalker' }]
+})
+
+Array.isArray(doc.members) // true
+doc.members.isMongooseArray // true
+doc.members.isMongooseDocumentArray // true
+```
+
+例如，如果您设置第 0 个成员的 `firstName`，Mongoose 将在调用 `save()` 时将其转换为 `member.0.firstName` 上的集合。
+
+```js
+const groupSchema = Schema(
+  {
+    name: String,
+    members: [{ firstName: String, lastName: String }]
+  },
+  { versionKey: false }
+)
+const Group = mongoose.model('Group', groupSchema)
+
+const doc = new Group({
+  title: 'Jedi Order',
+  members: [{ firstName: 'Luke', lastName: 'Skywalker' }]
+})
+await doc.save()
+
+mongoose.set('debug', true)
+
+doc.members[0].firstName = 'Anakin'
+// Mongoose: groups.updateOne({ _id: ObjectId("...") }, { '$set': { 'members.0.firstName': 'Anakin' } }, { session: null })
+await doc.save()
+```
+
+## 设置数组索引时的注意事项
+
+Mongoose 在直接设置数组索引方面存在一个已知问题。例如，如果您设置了 `doc.tags[0]`，Mongoose 更改跟踪将不会获取该更改。
+
+```js
+const blogPostSchema = Schema(
+  {
+    title: String,
+    tags: [String]
+  },
+  { versionKey: false }
+)
+const BlogPost = mongoose.model('BlogPost', blogPostSchema)
+
+const doc = new BlogPost({
+  title: 'Intro to JavaScript',
+  tags: ['programming']
+})
+await doc.save()
+
+// 此更改不会在数据库中结束！
+doc.tags[0] = 'JavaScript'
+await doc.save()
+
+const fromDb = await BlogPost.findOne({ _id: doc._id })
+console.log(fromDb.tags) // ['programming']
+```
+
+为了解决这个问题，您需要使用 [`markModified()`方法](https://mongoosejs.com/docs/api/document.html#document_Document-markModified)或在数组元素上显式调用 [`MongooseArray.set()`](https://mongoosejs.com/docs/api/array.html#mongoosearray_MongooseArray-set) 来通知 Mongoose 的更改跟踪，如下所示。
+
+```js
+// 这种改变是有效的。set() 是 Mongoose 数组上触发更改跟踪的一种特殊方法。
+doc.tags.set(0, 'JavaScript')
+await doc.save()
+
+const fromDb = await BlogPost.findOne({ _id: doc._id })
+console.log(fromDb.tags) // ['JavaScript']
+```
diff --git "a/MongoDB/Mongoose \346\227\266\351\227\264\346\210\263\357\274\210timestamps\357\274\211.md" "b/MongoDB/Mongoose \346\227\266\351\227\264\346\210\263\357\274\210timestamps\357\274\211.md"
new file mode 100644
index 0000000..ecb06e5
--- /dev/null
+++ "b/MongoDB/Mongoose \346\227\266\351\227\264\346\210\263\357\274\210timestamps\357\274\211.md"	
@@ -0,0 +1,135 @@
+# Mongoose 时间戳（timestamps）
+
+Mongoose `Schema` 有一个 [`timestamps` 选项](https://mongoosejs.com/docs/guide.html#timestamps)，告诉 Mongoose 自动管理文档上的 `createdAt` 和 `updatedAt` 属性。例如，下面介绍如何在 `User` 模型上启用时间戳。
+
+```js
+const userSchema = mongoose.Schema(
+  {
+    name: String
+  },
+  {
+    timestamps: true
+  }
+)
+
+const User = mongoose.model('User', userSchema)
+const doc = await User.create({ name: 'O.O' })
+
+doc.createdAt // 2021-08-20T22:36:59.414Z
+doc.updatedAt // 2021-08-20T22:36:59.414Z
+
+doc.createdAt instanceof Date // true
+```
+
+启用时间戳时，Mongoose 会将 `createdAt` 和 `updatedAt` 属性添加到模型中。默认情况下，`createdAt` 和 `updatedAt` 的类型为 `Date`。更新文档时，Mongoose 会自动增加 `updatedAt`。
+
+```js
+doc.name = 'D.O'
+await doc.save()
+
+doc.createdAt // 2021-08-20T22:36:59.414Z
+doc.updatedAt // 2021-08-20T22:37:09.071Z
+```
+
+特定的 mongoose 模型[写入操作](https://mongoosejs.com/docs/api.html#query_Query-setOptions)允许您跳过 `timestamps`，前提是在 `Schema` 中设置了时间戳。为此，必须将 `timestamps` 设置为 `false`，并且该操作不会更新时间。
+
+```js
+const userSchema = mongoose.Schema(
+  {
+    name: String
+  },
+  {
+    timestamps: true
+  }
+)
+
+const User = mongoose.model('User', userSchema)
+
+const doc = await User.findOneAndUpdate(
+  {
+    email: 'O.O'
+  },
+  {
+    email: 'D.O'
+  },
+  {
+    new: true,
+    upsert: true,
+    timestamps: false
+  }
+)
+```
+
+如果希望仅阻止其中一个更新，我们应该创建具有键值对的对象，而不是将 `timestamps` 设置为 `false` 作为值。根据需求，我们只需要根据需求将 `createdAt` 或 `updatedAt` 设置为 `true` 或 `false`。
+
+```js
+const userSchema = mongoose.Schema(
+  {
+    name: String
+  },
+  {
+    timestamps: true
+  }
+)
+
+const User = mongoose.model('User', userSchema)
+
+const doc = await User.findOneAndUpdate(
+  {
+    name: 'O.O'
+  },
+  {
+    name: 'D.O'
+  },
+  {
+    new: true,
+    upsert: true,
+    timestamps: {
+      createdAt: false,
+      updatedAt: true
+    }
+  }
+)
+```
+
+## 备用属性名
+
+默认情况下，Mongoose 使用 `createdAt` 和 `updatedAt` 作为时间戳的属性名。但你可以让 Mongoose 使用任何你喜欢的属性名。例如，如果您更喜欢 `snake_case` 属性名，可以让 Mongoose 使用 `created_at` 和 `updated_at` 替代：
+
+```js
+const userSchema = mongoose.Schema(
+  {
+    name: String
+  },
+  {
+    timestamps: {
+      createdAt: 'created_at',
+      updatedAt: 'updated_at'
+    }
+  }
+)
+const User = mongoose.model('User', userSchema)
+
+const doc = await User.create({
+  name: 'O.O'
+})
+doc.updated_at // 2021-08-20T22:40:06.667Z
+```
+
+## 使用 UNIX 时间戳
+
+虽然日期类型通常已经足够了，但您也可以让 Mongoose 将时间戳存储为自 1970 年 1 月 1 日以来的秒数。Mongoose `Schema` 支持 `timestamps.currentTime` 选项，该选项允许您传递用于获取当前时间的自定义函数。
+
+```js
+const userSchema = mongoose.Schema(
+  {
+    name: String
+  },
+  {
+    // 让 Mongoose 使用 UNIX 时间（自1970年1月1日起的秒数）
+    timestamps: {
+      currentTime: () => Math.floor(Date.now() / 1000)
+    }
+  }
+)
+```
diff --git "a/MongoDB/Mongoose \346\233\264\346\226\260\346\226\207\346\241\243.md" "b/MongoDB/Mongoose \346\233\264\346\226\260\346\226\207\346\241\243.md"
new file mode 100644
index 0000000..798f187
--- /dev/null
+++ "b/MongoDB/Mongoose \346\233\264\346\226\260\346\226\207\346\241\243.md"	
@@ -0,0 +1,122 @@
+# Mongoose 更新文档
+
+Mongoose 有 4 种不同的方式来更新文档。
+
+- `Document.save()`
+- `Model.updateOne()`和 `updateMany()`
+- `Document.updateOne()`
+- `Model.findOneAndUpdate()`
+
+## 使用 save()
+
+下面是使用 `save()` 更新标题的示例。
+
+```js
+const schema = new mongoose.Schema({ name: String, title: String })
+const ArticleModel = mongoose.model('Article', schema)
+
+const doc = await ArticleModel.create({
+  name: 'lio-zero',
+  title: 'Mongoose 更新文档'
+})
+
+// 通过设置属性并调用 save() 更新文档
+doc.title = '使用 save() 方法更新文档'
+await doc.save()
+```
+
+这个简单的例子有几个细微差别。首先，`save()` 是文档上的一个方法，这意味着您必须有一个要保存的文档。您需要使用 `create()` 或 `find()` 来获取文件。
+
+其次，Mongoose 文档具有更改跟踪功能。当您调用 `doc.save()` 时，Mongoose 知道您设置 `title` 并将您的 `save()` 调用转换为 `updateOne({ $set: { title } })`。尝试在调试模式下运行 Mongoose 以查看 Mongoose 执行的查询。
+
+## 使用 Model.updateOne() 和 Model.updateMany()
+
+使用 `Model.updateOne()` 和 `Model.updateMany()`，您可以更新文档，而无需先从数据库加载它。在下面的示例中，当 `updateOne()` 被调用时，`name = 'lio-zero'` 的文档不在 Node.js 进程的内存中。
+
+```js
+// 使用 updateOne() 更新文档
+await ArticleModel.updateOne(
+  { name: 'lio-zero' },
+  {
+    title: '使用 updateOne() 方法更新文档'
+  }
+)
+
+// 加载文档以查看更新的值
+const doc = await ArticleModel.findOne()
+doc.title // '使用 updateOne() 方法更新文档'
+```
+
+如果你想在 Mongoose 中用一个命令更新多个文档，你应该使用 `updateMany()` 方法。
+
+```js
+await ArticleModel.create({ name: 'lio' })
+await ArticleModel.create({ name: 'lion' })
+await ArticleModel.create({ name: 'lio-zero' })
+
+// 在所有文档上设置 title 属性
+await ArticleModel.updateMany({}, { title: '使用 updateMany() 方法更新文档' })
+
+// 设置 name 以 o 结尾的文档的 title 属性
+await ArticleModel.updateMany(
+  { name: /o$/ },
+  { $set: { title: '使用 updateMany() 方法更新文档' } }
+)
+```
+
+`await Model.updateMany()` 返回具有 5 个属性的对象，详细可查阅[文档](https://mongoosejs.com/docs/api.html#model_Model.updateMany)。
+
+`updateMany()` 很相似。这两个方法之间的区别在于，`updateOne()` 将最多更新一个文档，而 `updateMany()` 将更新与过滤器匹配的每个文档。
+
+您应该尽可能使用 `save()` 而不是 `updateOne()` 和 `updateMany()`。但是，`Model.updateOne()` 和 `Model.updateMany()` 有一些优点：
+
+- `updateOne()` 是原子的。如果使用 `find()` 加载文档，它可能会在 `save()` 之前发生更改。
+- `updateOne()` 不需要您将文档加载到内存中，如果文档很大，这可能会给您带来更好的性能。
+
+## 使用 Document.updateOne()
+
+`Document.updateOne()` 方法是 `Model.updateOne()` 的语法糖。如果您已经将文档保存在内存中，那么 `doc.updateOne()` 将为您构建一个 `Model.updateOne()` 调用。
+
+```js
+// 加载文档
+const doc = await ArticleModel.findOne({ name: 'lio-zero' })
+
+// 使用 Document.updateOne() 加载文档等同于 ArticleModel.updateOne({ _id: doc._id }, update)
+const update = { title: '使用 findOne() 方法更新文档' }
+await doc.updateOne(update)
+
+const updatedDoc = await ArticleModel.findOne({ name: 'lio-zero' })
+updatedDoc.title // '使用 findOne() 方法更新文档'
+```
+
+通常，`Document.updateOne()` 很少有用。最好使用 `save()` 和 `Model.updateOne()` 用于 `save()` 不够灵活的情况。
+
+## 使用 Model.findOneAndUpdate()
+
+[`Model.findOneAndUpdate()`](https://mongoosejs.com/docs/tutorials/findoneandupdate.html) 方法或其变体 [`Model.findByIdAndUpdate()`](https://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate) 的行为类似于 `updateOne()`：它们以原子方式更新与第一个参数 `filter` 匹配的第一个文档。与 `updateOne()` 不同的是，它会返回更新的文档。
+
+```js
+const doc = await ArticleModel.findOneAndUpdate(
+  { name: 'lio-zero' },
+  { title: '使用 findOneAndUpdate() 方法更新文档' },
+  { returnDocument: 'before' }
+)
+
+doc.title // '使用 findOneAndUpdate() 方法更新文档'
+```
+
+`returnDocument` 返回更新后的文档。它有两个可能的值：`'before'` 和 `'after'`。默认行为是 `'before'`，这意味着返回文档在应用更新之前的状态。
+
+在 `returnDocument` 出现之前，有两个类似的选项：`returoriginal` 或 `new`。它们都是布尔值，和 `returnDocument` 有着相同的效果，但 mongoose 建议我们使用最新的 `returnDocument`。
+
+## 总结
+
+通常，除非需要原子更新，否则应该使用 `save()` 更新 Mongoose 中的文档。以下是更新文档的所有 4 种方法的主要功能摘要：
+
+|                            | Atomic | 内存中的文档 | 返回更新的文档 | 更改跟踪 |
+| -------------------------- | :----: | :----------: | :------------: | :------: |
+| `Document.save()`          |   ❌   |      ✅      |       ✅       |    ✅    |
+| `Model.updateOne()`        |   ✅   |      ❌      |       ❌       |    ❌    |
+| `Model.updateMany()`       |   ❌   |      ❌      |       ❌       |    ❌    |
+| `Document.updateOne()`     |   ❌   |      ✅      |       ❌       |    ❌    |
+| `Model.findOneAndUpdate()` |   ✅   |      ❌      |       ✅       |    ❌    |
diff --git "a/MongoDB/Mongoose \346\237\245\350\257\242\346\226\207\346\241\243.md" "b/MongoDB/Mongoose \346\237\245\350\257\242\346\226\207\346\241\243.md"
new file mode 100644
index 0000000..c533b1e
--- /dev/null
+++ "b/MongoDB/Mongoose \346\237\245\350\257\242\346\226\207\346\241\243.md"	
@@ -0,0 +1,407 @@
+# Mongoose 查询文档
+
+数据库最多操作的便是查询，本文将来看看如何使用 Mongoose 查询文档。
+
+## 查找所有文档
+
+Mongoose [`Model.find(filter, callback)`](https://mongoosejs.com/docs/api/model.html#model_Model.find) 方法允许你查询具有给定键/值的文档，它将返回与给定过滤器匹配的文档数组。
+
+假设你有一个 [mongoose 模型](https://mongoosejs.com/docs/models.html) `User`，其中包含应用程序的所有用户。要获取集合中所有用户的列表，可以调用 `User.find()` 将空对象作为第一个参数：
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String,
+    age: String
+  })
+)
+
+await User.create([
+  { name: 'D.O', age: 20 },
+  { name: 'O.O', age: 19 },
+  { name: 'K.O', age: 18 },
+  { name: 'O.K', age: 17 },
+  { name: 'O.O', age: 22 }
+])
+
+// 空的 filter 表示匹配所有文档
+const filter = {}
+const all = await User.find(filter)
+```
+
+同样地，你可以调用 `User.find()` 不带参数，也就是省略 `filter`，你将得到相同的结果。
+
+```js
+await User.find() // 返回上面带有 _id 属性和 __v 属性的数组
+```
+
+`Model.find()` 的默认行为是返回模型中的所有文档，因此如果传递的属性都不存在，它将所有文档。
+
+但需要注意的是，不要直接查询字符串 `req.query` 直接传递给 `find` 方法，
+
+```js
+// 不要这样做，req.query 可能是空对象
+// 在这种情况下，查询将返回每个文档。
+await Model.find(req.query)
+```
+
+### `sanitizeFilter` 选项
+
+Mongoose 6 引入了一个新 `sanitizeFilter` 选项，可以防御[查询选择器注入攻击](https://thecodebarbarian.com/2014/09/04/defending-against-query-selector-injection-attacks.html)。它只是将过滤器包装在 `$eq` 标签中，从而防止查询选择器注入攻击。
+
+```js
+// 使用 sanitizeFilter，Mongoose 将下面的查询转换为 { age, hashedPassword: { $eq: { $ne: null } } }
+const user = await User.find({
+  email: 'test@163.com',
+  hashedPassword: { $ne: null }
+}).setOptions({ sanitizeFilter: true })
+```
+
+### cursor
+
+假设你的应用程序很受欢迎，你有数百万用户。一次将所有用户加载到内存是行不通的。要一次遍历所有用户，而不将其全部加载到内存中，请使用 [`cursor`](https://mongoosejs.com/docs/api/query.html#query_Query-cursor)。
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String,
+    email: String
+  })
+)
+
+// 注意此处没有 await
+const cursor = User.find().cursor()
+
+for (let doc = await cursor.next(); doc != null; doc = await cursor.next()) {}
+```
+
+或者，你可以使用异步迭代器。
+
+```js
+for await (const doc of User.find()) {
+}
+```
+
+## 查询某些字段
+
+要过滤 mongoose 中的对象属性，可以对查询使用 `select()` 方法。其作用是：**选择要返回的字段**。
+
+```js
+//将返回仅包含文档的年龄、名称和id属性的所有文档
+await Model.find({}).select('name age')
+```
+
+### `_id` 属性
+
+默认情况下，MongoDB 包含 `_id`。要在选择字段时排除 `_id`，可以使用 `.find().select({ name: 1, _id: 0 })` 或 `.find().select('name -_id')`。`0` 和 `-` 告诉 Mongoose 和 MongoDB 服务器显式排除 `_id`。
+
+```js
+await Model.find().select({ name: 1, _id: 0 });
+// or
+await Model.find().select({'name -_id'});
+```
+
+## 按 ID 查找
+
+在 Mongoose 中，[`Model.findById()`](https://mongoosejs.com/docs/api/model.html#model_Model.findById) 方法用于根据文档的 `_id` 查找一个文档。`findById()` 方法接受单个参数，即文档 `id`。如果 MongoDB 找到具有给定 `id` 的文档，则返回解析为 Mongoose 文档的 Promise；如果未找到任何文档，则返回 `null`。
+
+```js
+const schema = new mongoose.Schema({ _id: Number }, { versionKey: false })
+const Model = mongoose.model('MyModel', schema)
+
+await Model.create({ _id: 1 })
+
+await Model.findById(1) // { _id: 1 }
+await Model.findById(2) // null，因为找不到任何文档
+```
+
+当你调用 `findById(_id)` 时，Mongoose 会在后台调用 `findOne({ _id })`。这意味着 `findById()` 触发 `findOne()` [中间件](https://mongoosejs.com/docs/middleware.html)。
+
+```js
+const schema = new mongoose.Schema({ _id: Number }, { versionKey: false })
+
+schema.pre('findOne', function () {
+  console.log('调用 findOne()')
+})
+
+const Model = mongoose.model('MyModel', schema)
+await Model.create({ _id: 1 })
+
+// 打印 findOne()，因为 findById() 调用 findOne()
+await Model.findById(1)
+```
+
+[Mongoose 会强制转换查询以匹配你的模式](https://mongoosejs.com/docs/tutorials/query_casting.html)。这意味着如果你的 `_id` 是一个 [MongoDB ObjectId](https://docs.mongodb.com/manual/reference/method/ObjectId/)，你可以将 `_id` 作为字符串传递，Mongoose 将为你将其转换为 ObjectId。
+
+```js
+const _id = '9d641f2ed75f4e2513b90abc'
+const schema = new mongoose.Schema(
+  { _id: mongoose.ObjectId },
+  { versionKey: false }
+)
+const Model = mongoose.model('MyModel', schema)
+
+await Model.create({ _id: new mongoose.Types.ObjectId(_id) })
+
+typeof _id // 'string'
+// { _id: '9d641f2ed75f4e2513b90abc' }
+const doc = await Model.findById(_id)
+
+typeof doc._id // 'object'
+doc._id instanceof mongoose.Types.ObjectId // true
+```
+
+## 链式
+
+许多 Mongoose 模型函数，例如 [`find()`](https://thecodebarbarian.com/how-find-works-in-mongoose)，返回一个 [Mongoose Query](https://mongoosejs.com/docs/queries.html)。[Mongoose Query](https://mongoosejs.com/docs/api/query.html) 类提供了一个用于查找、更新和删除文档的[链式接口](https://schier.co/blog/2013/11/14/method-chaining-in-javascript.html)。
+
+`Model.find()` 的第一个参数称为查询**过滤器**。当你调用 `find()` 时，MongoDB 将返回与查询过滤器匹配的所有文档。你可以使用 Mongoose 的[众多查询](https://mongoosejs.com/docs/api/query.html)来构建查询过滤器。只需确保使用 [`where()`](https://mongoosejs.com/docs/api/query.html#query_Query-where) 指定要添加到过滤器中的属性名即可。
+
+```js
+let docs = await User.find()
+  // where 指定属性的名称，in() 指定 name 必须是数组中的两个值之一
+  .where('name')
+  .in(['D.O', 'O.K'])
+
+// 相同的查询，但过滤器表示为对象，而不是使用链式
+docs = await User.find({
+  name: { $in: ['D.O', 'O.K'] }
+})
+```
+
+可链式操作允许添加到当前查询筛选器。可以使用 [`query.getFilter()`](https://mongoosejs.com/docs/api/query.html#query_Query-getFilter) 方法获取查询的当前筛选器。
+
+```js
+const query = User.find().where('name').in(['D.O', 'O.K'])
+
+// { name: { $in: ['D.O', 'O.K'] } }
+query.getFilter()
+```
+
+以下是几个有用的查询方法列表：
+
+- `lt(value)` 和 `gt(value)` — 指定一个属性必须小于（`lt()`）或大于（`gt()`）一个值。`value` 可以是数字、字符串或日期。
+- `lte(value), gte(value)` — 指定一个属性必须大于或等于（`gte()`）或小于或等于（`gte()`）一个值。
+- `in(arr)` — 指定一个属性必须等于 `arr` 中指定的值之一。
+- `nin(arr)` — 指定一个属性不能等于 `arr` 中指定的任何值。
+- `eq(val)` — 指定一个属性必须等于 `val`。
+- `ne(val)` — 指定一个属性不能等于 `val`。
+- `regex(re)` — 指定一个属性必须是 `re` 匹配的字符串。
+
+你可以链式调用任意多个 `where()` 和查询方法来建立查询。例如：
+
+```js
+const docs = await User.find()
+  // name 必须与正则表达式匹配，age 必须在 29 到 59 岁之间
+  .where('name')
+  .regex(/o/i)
+  .where('age')
+  .gte(29)
+  .lte(59)
+
+docs.map((doc) => doc.name) // [ 'D.O', 'O.O', 'O.K' ]
+```
+
+## 使用 LIKE 查询
+
+使用 [SQL LIKE](https://use-the-index-luke.com/sql/where-clause/searching-for-ranges/like-performance-tuning) 运算符允许我们搜索带有通配符的字符串。MongoDB 没有类似的运算符，[`$text`](https://docs.mongodb.com/manual/reference/operator/query/text/) 运算符执行更复杂的文本搜索。但是 MongoDB 确实支持与 LIKE 类似的正则表达式查询。
+
+例如，假设你想要查找 `email` 包含 `gmail` 的所有用户。你可以简单地通过 JavaScript 正则表达式 `/gmail/` 进行搜索：
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    email: String
+  })
+)
+
+await User.create([
+  { email: 'yyds@163.com' },
+  { email: 'tbds@qq.com' },
+  { email: 'test@163.com' },
+  { email: '163@qq.com' }
+])
+
+const docs = await User.find({ email: /163/ })
+docs.length // 3
+docs.map((doc) => doc.email).sort() // ['yyds@163.com', 'test@163.com', '163@qq.com']
+```
+
+同样，你可以使用 `$regex` 运算符。
+
+```js
+const docs = await User.find({ email: { $regex: '163' } })
+```
+
+需要注意的是 mongoose 不会为你转义 regexp 中的特殊字符。如果要对用户输入的数据使用 `$regexp`，应首先使用 [escape-string-regexp](https://www.npmjs.com/package/escape-string-regexp) 或用于转义正则表达式特殊字符的类似库来清理字符串。
+
+```js
+const escapeStringRegexp = require('escape-string-regexp')
+
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    email: String
+  })
+)
+
+await User.create([
+  { email: 'yyds@163.com' },
+  { email: 'tbds@qq.com' },
+  { email: 'test+foo@163.com' }
+])
+
+const $regex = escapeStringRegexp('+foo')
+const docs = await User.find({ email: { $regex } })
+
+docs.length // 1
+docs[0].email // 'test+foo@163.com'
+
+// Throws: MongoError: Regular expression is invalid: nothing to repeat
+await User.find({ email: { $regex: '+foo' } })
+```
+
+## 查询运算符
+
+在 Mongoose 中，Model.find() 函数是查询数据库的主要工具。find()的第一个参数是一个筛选器对象。MongoDB 将搜索与过滤器匹配的所有文档。如果传入一个空过滤器，MongoDB 将返回所有文档。
+
+我们可以使用 [MongoDB 查询运算符](https://docs.mongodb.com/manual/reference/operator/query/)构造过滤器对象，从而在 Mongoose 中执行常见查询。
+
+### 相等检查
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String,
+    age: String
+  })
+)
+
+await User.create([
+  { name: 'D.O', age: 30 },
+  { name: 'O.O', age: 29 },
+  { name: 'K.O', age: 18 },
+  { name: 'O.K', age: 40 },
+  { name: 'O.O', age: 22 }
+])
+```
+
+假设你要查找所有 `name` 为 O.O 的用户。可以将 `{ age: 'O.O' }` 作为 `filter` 传递。
+
+```js
+const docs = await User.find({ name: 'O.O' })
+
+// MongoDB 可以按任何顺序返回文档，除非你明确排序
+docs.map((doc) => doc.age).sort() // [29, 22]
+```
+
+你还可以按年龄查询。例如，下面的查询将查找 `age` 为 29 岁的所有字符。
+
+```js
+const docs = await User.find({ age: 29 })
+
+docs.map((doc) => doc.name).sort() // ['O.O', 'O.K']
+```
+
+以上示例不使用任何查询运算符。如果将 `name` 的值设置为具有 [`$eq` 属性](https://docs.mongodb.com/manual/reference/operator/query/eq/#op._S_eq)的对象，则会得到一个等效的查询，但需要使用**查询运算符**。
+
+```js
+const docs = await User.find({ name: { $eq: 'O.O' } })
+
+docs.map((doc) => doc.age).sort() // [29, 22]
+```
+
+### 比较查询运算符
+
+`$eq` 查询运算符检查完全相等。还有一些[比较查询运算符](https://docs.mongodb.com/manual/reference/operator/query/#comparison)，比如 `$gt` 和 `$lt`。例如，假设你想查找年龄严格小于 29 岁的所有字符。你可以使用 `$lt` 查询运算符，如下所示。
+
+```js
+const docs = await User.find({ age: { $lt: 29 } })
+
+docs.map((doc) => doc.name).sort() // ['K.O', 'O.O']
+```
+
+假设你想找到所有年龄至少为 29 岁的用户。你可以使用 [`$gte` 查询运算符](https://docs.mongodb.com/manual/reference/operator/query/gte/#op._S_gte)。
+
+```js
+const docs = await User.find({ age: { $gte: 29 } })
+
+docs.map((doc) => doc.name).sort() // ['D.O', 'O.K', 'O.O']
+```
+
+比较运算符 `$lt`、[`$gt`](https://docs.mongodb.com/manual/reference/operator/query/gt/#op._S_gt)、[`$lte`](https://docs.mongodb.com/manual/reference/operator/query/lte/#op._S_lte) 和 `$gte` 不仅可以处理数字。你还可以在字符串、日期和其他类型上使用它们。MongoDB 使用 [unicode](https://www.w3.org/TR/xml-entity-names/bycodes.html) 顺序比较字符串。如果该顺序不适用于你，你可以使用 [MongoDB collations](https://thecodebarbarian.com/a-nodejs-perspective-on-mongodb-34-collations) 对其进行配置。
+
+```js
+const docs = await User.find({ name: { $lte: 'K.O' } })
+
+docs.map((doc) => doc.name).sort() // [ 'D.O', 'K.O' ]
+```
+
+### 正则表达式
+
+假设你要查找 `name` 包含 `K` 的用户。在 SQL 中，可以使用 [`LIKE` 运算符](https://www.w3schools.com/sql/sql_like.asp)。在 Mongoose 中，你可以简单地通过正则表达式进行查询，如下所示。
+
+```js
+const docs = await User.find({ name: /K/ })
+
+docs.map((doc) => doc.name).sort() // ['K.O', 'O.K']
+```
+
+同样，你可以使用 [`$regex` 查询运算符](https://docs.mongodb.com/manual/reference/operator/query/regex/#op._S_regex)。这使你能够将正则表达式作为字符串传递，如果你是从 HTTP 请求中获取查询，这很方便。
+
+```js
+const docs = await User.find({ name: { $regex: 'K' } })
+
+docs.map((doc) => doc.name).sort() // ['K.O', 'O.K']
+```
+
+### 包含 `$and` 和 `$or` 的组合
+
+如果设置了多个 `filter` 属性，MongoDB 将查找与所有过滤器属性匹配的文档。例如，以下的查询将查找 `age` 至少为 29 岁且 `name` 等于 `'K.O'` 的所有用户。
+
+```js
+const docs = await User.find({
+  name: 'K.O',
+  age: { $gte: 29 }
+})
+
+docs.map((doc) => doc.name) // ['O.O']
+```
+
+假设你要查找 `age` 至少为 29 岁或 `name` 等于 `O.O` 的用户。你需要 [`$or`](https://docs.mongodb.com/manual/reference/operator/query/or/#op._S_or) 查询运算符。
+
+```js
+const docs = await User.find({
+  $or: [{ age: { $gte: 29 } }, { name: 'O.O' }]
+})
+
+docs.map((doc) => doc.name).sort() // [ 'D.O', 'O.O', 'O.K', 'O.O' ]
+```
+
+还有一个 [`$and`](https://docs.mongodb.com/manual/reference/operator/query/and/#op._S_and) 查询运算符。你很少需要使用 `$and` 查询运算符。`$and` 的主要用例是组合多个 `$or` 运算符。例如，假设你要查找满足以下两个条件的字符：
+
+- `age` 至少 29 或 `name` 等于 `'O.O'`
+- `name` 以字母开头，在 `O` 之前或 `O` 之后。
+
+```js
+const docs = await User.find({
+  $and: [
+    {
+      $or: [{ age: { $gte: 29 } }, { rank: 'O.O' }]
+    },
+    {
+      $or: [{ name: { $lte: 'O' } }, { name: { $gte: 'K' } }]
+    }
+  ]
+})
+
+docs.map((doc) => doc.name).sort() // [ 'D.O', 'O.O', 'O.K' ]
+```
+
+## 更多资料
+
+[9 Types of Mongodb Operators You Need To Know](https://kinsta.com/blog/mongodb-operators/)
diff --git "a/MongoDB/Mongoose \347\232\204 save() \346\226\271\346\263\225.md" "b/MongoDB/Mongoose \347\232\204 save() \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..c836028
--- /dev/null
+++ "b/MongoDB/Mongoose \347\232\204 save() \346\226\271\346\263\225.md"	
@@ -0,0 +1,151 @@
+# Mongoose 的 save() 方法
+
+Mongoose 的 [`save()` 方法](https://mongoosejs.com/docs/api/model.html#model_Model-save)是将文档更改保存到数据库的一种方法。在 Mongoose 中更新文档有几种方法，如：[`update`、`updateOne`](https://mongoosejs.com/docs/api.html#document_Document-update)。但 `save()` 是功能最齐全的方法。除非有充分理由不更新文档，否则应使用 `save()` 更新文档。
+
+## 使用 `save()` 进行操作
+
+`save()` 是 [Mongoose documents](https://mongoosejs.com/docs/documents.html) 上的一个方法。`save()` 方法是异步的，因此它返回一个可以 `await` 执行的 Promise。
+
+当您使用 `new` 创建 [Mongoose 模型](https://mongoosejs.com/docs/models.html)的实例时，调用 `save()` 会使 Mongoose 插入一个新文档。
+
+```js
+const Person = mongoose.model(
+  'Person',
+  new mongoose.Schema({
+    name: String,
+    rank: Number
+  })
+)
+
+const doc = new Person({
+  name: 'O.O',
+  age: 18
+})
+// 插入一个 name = O.O, age = 18 的新文档
+await doc.save()
+
+const person = await Person.findOne()
+console.log(person.name) // O.O
+```
+
+如果从数据库加载现有文档并对其进行修改，则 `save()` 会更新现有文档。
+
+```js
+const person = await Person.findOne()
+person.name // O.O
+
+// Mongoose 跟踪文档的更改。Mongoose 跟踪您设置的 age 属性，并将更改持久化到数据库中。
+person.age = 18
+await person.save()
+
+// 从数据库加载文档并查看更改
+const docs = await Person.find()
+
+console.log(docs.length) // 1
+console.log(docs[0].age) // 18
+```
+
+Mongoose 的更改跟踪根据您对文档所做的更改向 MongoDB 发送最小更新。您可以设置 [Mongoose 的调试模式](https://mongoosejs.com/docs/api/mongoose.html#mongoose_Mongoose-set)，以查看 Mongoose 发送给 MongoDB 的操作。
+
+```js
+mongoose.set('debug', true)
+
+person.age = 18
+// Mongoose: people.updateOne({ _id: ObjectId("...") }, { '$set': { age: 18 } })
+await person.save()
+```
+
+## 验证
+
+Mongoose 在保存之前验证修改后的路径。如果将字段设置为无效值，Mongoose 将在尝试 `save()` 该文档时抛出错误。
+
+```js
+const Person = mongoose.model(
+  'Person',
+  new mongoose.Schema({
+    name: String,
+    age: Number
+  })
+)
+
+const doc = await Person.create({ name: 'Will Riker', age: 18 })
+
+// 将 name 设置为无效值是可以的。。。
+doc.age = 'lotto'
+
+// 但尝试 save() 时，文档会出错
+const err = await doc.save().catch((err) => err)
+err // 路径 age 处的值 lotto 的强制转换为数字失败
+
+// 但是，如果将 age 设置为有效值，则 save() 将成功。
+doc.age = 20
+await doc.save()
+```
+
+## 中间件
+
+[Mongoose 中间件](https://mongoosejs.com/docs/middleware.html)允许您在每次调用 `save()` 时告诉 Mongoose 执行一个方法。例如，调用 `pre('save')` 告诉 Mongoose 在执行 `save()` 之前先执行一个方法。
+
+```js
+const schema = new mongoose.Schema({ name: String, age: Number })
+schema.pre('save', function () {
+  // 在 save 中间件中，this 是正在保存的文档。
+  console.log('Save', this.name)
+})
+const Person = mongoose.model('Person', schema)
+
+const doc = new Person({ name: 'O.O', age: 18 })
+
+// Save O.O
+await doc.save()
+```
+
+类似地，`post('save')` 告诉 Mongoose 在调用 `save()` 后执行一个方法。例如，您可以将 `pre('save')` 和 `post('save')` 组合起来打印 `save()` 所用的时间。
+
+```js
+const schema = new mongoose.Schema({ name: String, age: Number })
+schema.pre('save', function () {
+  this.$locals.start = Date.now()
+})
+schema.post('save', function () {
+  console.log('保存时间为 ', Date.now() - this.$locals.start, ' ms')
+})
+const Person = mongoose.model('Person', schema)
+
+const doc = new Person({ name: 'O.O', age: 18 })
+
+// 保存时间为 12 ms
+await doc.save()
+```
+
+`save()` 中间件是递归的，因此对父文档调用 `save()` 也会触发子文档的 `save()` 中间件。
+
+```js
+const friendSchema = new mongoose.Schema({ name: String, age: Number, hobby: String })
+friendSchema.pre('save', function () {
+  console.log('Save', this.hobby)
+})
+const schema = new mongoose.Schema({
+  name: String,
+  age: Number,
+  friend: friendSchema
+})
+const Person = mongoose.model('Person', schema)
+
+const doc = new Person({
+  name: 'O.O',
+  age: 18,
+  friend: {
+    name: 'D.O',
+    age: 20,
+    hobby: 'sing'
+  }
+})
+
+// Save sing
+await doc.save()
+
+doc.friend.hobby = 'dance'
+// Save dance
+await doc.save()
+```
diff --git "a/MongoDB/Mongoose \350\247\243\345\206\263 Query was already executed \351\227\256\351\242\230.md" "b/MongoDB/Mongoose \350\247\243\345\206\263 Query was already executed \351\227\256\351\242\230.md"
new file mode 100644
index 0000000..87cebdf
--- /dev/null
+++ "b/MongoDB/Mongoose \350\247\243\345\206\263 Query was already executed \351\227\256\351\242\230.md"	
@@ -0,0 +1,40 @@
+# Mongoose 解决 Query was already executed 问题
+
+当给定查询执行两次时，Mongoose 会抛出 "Query was already executed"（查询已执行）错误。对此最常见的解释是您正在混合 `await` 和回调。
+
+```js
+await Model.updateMany({}, { $inc: { count: 1 } }, function (err) {})
+// "MongooseError: Query was already executed"
+```
+
+这是因为 Mongoose 在收到回调或 `await` 时执行查询。如果您使用 `await` 并传递回调，则此查询将执行两次。
+
+或者：
+
+```js
+Model.updateMany({}, { $inc: { count: 1 } }, function (err) {}).then(() => {})
+```
+
+此查询执行两次。一次是因为回调，一次是因为 `then()` 方法。
+
+解决方案是跳过传递回调。在 Mongoose 中不需要回调，因为 Mongoose 支持 `promises` 和 `async/await`。
+
+```js
+await Model.updateMany({}, { $inc: { count: 1 } })
+// or
+Model.updateMany({}, { $inc: { count: 1 } }).then(() => {})
+```
+
+但如果我们想执行两次查询呢？可以使用 [`clone()`](https://mongoosejs.com/docs/api.html#query_Query-clone) 方法：
+
+```js
+let query = Model.findOne()
+
+await query
+
+// 抛出 "MongooseError: Query was already executed" 错误
+await query
+
+// ✅
+await query.clone()
+```
diff --git "a/MongoDB/\344\275\277\347\224\250 Mongoose \350\277\236\346\216\245\345\210\260 MongoDB.md" "b/MongoDB/\344\275\277\347\224\250 Mongoose \350\277\236\346\216\245\345\210\260 MongoDB.md"
new file mode 100644
index 0000000..3ed68f7
--- /dev/null
+++ "b/MongoDB/\344\275\277\347\224\250 Mongoose \350\277\236\346\216\245\345\210\260 MongoDB.md"	
@@ -0,0 +1,77 @@
+# 使用 Mongoose 连接到 MongoDB
+
+本文带你了解如何使用 Mongoose 连接到 MongoDB 服务器。
+
+> 官方介绍：[Mongoose](https://www.npmjs.com/package/mongoose) 是一个 MongoDB 对象建模工具，设计用于异步环境。它支持 Promise 和回调。
+
+`mongoose.connect()` 方法是使用 mongoose 连接 MongoDB 的最简单方法。一旦连接成功，就可以创建 [Mongoose 模型](https://mongoosejs.com/docs/models.html)并开始与 MongoDB 交互。
+
+```js
+// 连接到运行在 localhost:27017 上的 MongoDB 服务器，并使用 test 数据库。
+await mongoose.connect('mongodb://localhost:27017/test', {
+  useNewUrlParser: true
+})
+
+// 一旦连接到 MongoDB，就可以创建用户模型并使用它将用户保存到数据库中。
+const userSchema = new mongoose.Schema({ name: String })
+const UserModel = mongoose.model('User', userSchema)
+
+await UserModel.create({ name: 'test' })
+```
+
+如果 Mongoose 成功连接到 MongoDB，[`mongoose.connect()` 方法将返回一个 Promise](https://mongoosejs.com/docs/api/mongoose.html#mongoose_Mongoose-connect)，如果 Mongoose 无法连接，则 Promise 将被拒绝。
+
+```js
+const options = { useNewUrlParser: true }
+// 尝试连接到 domain，该操作将失败
+const err = await mongoose
+  .connect('mongodb://domain:27017/test', options)
+  .catch((err) => err)
+// 第一次连接时未能连接到服务器 [domain:27017]
+console.log(err.message)
+```
+
+有许多旧教程建议监听连接事件，如下：
+
+```js
+// 成功连接时
+mongoose.connection.on('connected', function () {
+  console.log('成功连接到 ' + dbURI)
+})
+// 如果连接抛出错误
+mongoose.connection.on('error', function () {
+  console.log('连接错误：' + err)
+})
+
+// 当连接断开时
+mongoose.connection.on('disconnected', function () {
+  console.log('连接断开')
+})
+```
+
+这种方法并不是绝对必要的，如果 mongoose 最初连接到 MongoDB 时出现错误，则 `mongoose.connect()` 返回的 Promise 为 `rejects`。一旦 Mongoose 成功连接，它会在失去连接时自动处理重新连接。
+
+## `reconnectFailed` 事件
+
+Mongoose 会自动重新连接到 MongoDB。在内部，如果您连接到单个服务器，则基础 MongoDB 驱动程序会尝试每 `reconnectInterval` 毫秒重新连接 `reconnectTries` 次。您可以在 [`mongoose.connect()` 选项](https://mongoosejs.com/docs/api/mongoose.html#mongoose_Mongoose-connect)中设置 `ReconnectTrys` 和 `reconnectInterval`。
+
+```js
+mongoose.connect('mongodb://localhost:27017/test', {
+  useNewUrlParser: true, // Boilerplate // 如果失去连接，请尝试每 2 秒重新连接一次。尝试 60 次后，放弃并发出 reconnectFailed。
+  reconnectTries: 60,
+  reconnectInterval: 2000
+})
+```
+
+当 Mongoose 放弃时，它会在[连接](https://mongoosejs.com/docs/api/connection.html)上发出 `reconnectFailed` 事件。
+
+```js
+// 如果猫鼬放弃了重新连接的尝试，请终止该过程。
+mongoose.connection.on('reconnectFailed', () => {
+  process.nextTick(() => {
+    throw new Error('Mongoose 无法重新连接到 MongoDB 服务器')
+  })
+})
+```
+
+如果您已连接到副本集，则 `reconnectTries` 和 `reconnectTries` 不会执行任何操作。如果 Mongoose 在初始连接后失去与副本集的连接，它将继续无限期地重新连接。
diff --git "a/MongoDB/\344\275\277\347\224\250 Mongoose \351\252\214\350\257\201\346\225\260\346\215\256\345\224\257\344\270\200\346\200\247.md" "b/MongoDB/\344\275\277\347\224\250 Mongoose \351\252\214\350\257\201\346\225\260\346\215\256\345\224\257\344\270\200\346\200\247.md"
new file mode 100644
index 0000000..63705f6
--- /dev/null
+++ "b/MongoDB/\344\275\277\347\224\250 Mongoose \351\252\214\350\257\201\346\225\260\346\215\256\345\224\257\344\270\200\346\200\247.md"	
@@ -0,0 +1,57 @@
+# 使用 Mongoose 验证数据唯一性
+
+在使用 Mongoose 时，如果您想防止数据库中的值重复，有以下几种方法：
+
+- 在 `SchemaType` 中定义 `validation`
+- **schema** 中创建自定义验证
+- Mongoose 的内置验证
+- `unique` 属性（推荐）
+
+您可以使用 [validation](https://mongoosejs.com/docs/validation.html) 防止数据库中的重复。`validation` 在 `SchemaType` 中定义，是一个中间件。您还可以在 schema 中创建自定义验证，也可以使用 Mongoose 的内置验证。
+
+防止重复最简单的方式是使用 `unique` 属性，因为它将告诉 Mongoose 每个文档都应该有一个 [`unique`](https://masteringjs.io/tutorials/mongoose/unique) 给定路径的值。
+
+例如，我们有一个 `email` 字段，它在文档中是不允许有重复的：
+
+```js
+const User = mongoose.model(
+  'User',
+  mongoose.Schema({
+    email: {
+      type: String,
+      required: true,
+      match: /.+\@.+\..+/,
+      unique: true
+    }
+  })
+)
+```
+
+如果等待索引生成，则可以使用 Mongoose Promise 基于事件的 `Model.init()`，如下所示：
+
+```js
+// 提前创建一些数据
+await User.create([
+  { email: 'xyz@163.com' },
+  { email: '669@qq.com' },
+  { email: 'test@gmail.com' }
+])
+
+await User.init()
+```
+
+这时，如果我们为 `User` 集合内记录一条新的文档，将引发错误：
+
+```js
+try {
+  await User.create({ email: 'test@163.com' })
+} catch (err) {
+  console.log(err.message) // 'E11000 duplicate key error...'
+}
+```
+
+需要注意的是，[`unique` 属性](https://mongoosejs.com/docs/validation.html#the-unique-option-is-not-a-validator)不是验证器。
+
+如果您想了解其他验证数据唯一性的方法，请查阅文档 [validation](https://mongoosejs.com/docs/validation.html) 章节。
+
+以上这种方式我在 [Mongoose 唯一索引（unique）](https://github.com/lio-zero/blog/blob/main/MongoDB/Mongoose%20%E5%94%AF%E4%B8%80%E7%B4%A2%E5%BC%95%EF%BC%88unique%EF%BC%89.md) 这篇文章也有介绍到，可以看看。
diff --git "a/MongoDB/\345\234\250 Mongoose \344\270\255\344\275\277\347\224\250 MongoDB Explain.md" "b/MongoDB/\345\234\250 Mongoose \344\270\255\344\275\277\347\224\250 MongoDB Explain.md"
new file mode 100644
index 0000000..990b007
--- /dev/null
+++ "b/MongoDB/\345\234\250 Mongoose \344\270\255\344\275\277\347\224\250 MongoDB Explain.md"	
@@ -0,0 +1,162 @@
+# 在 Mongoose 中使用 MongoDB Explain
+
+在 MongoDB 中，[`explain` 命令](https://docs.mongodb.com/manual/reference/method/cursor.explain/)告诉 MongoDB 服务器返回有关其如何执行查询的统计信息，而不是查询结果。[Mongoose 查询](https://mongoosejs.com/docs/queries.html)有一个 `explain()` 方法，用于将查询转换为 `explain()`。
+
+```js
+const User = mongoose.model(
+  'User',
+  new mongoose.Schema({
+    name: String,
+    age: Number
+  })
+)
+
+await User.create([
+  { name: 'O.O', age: 18 },
+  { name: 'D.O', age: 19 },
+  { name: 'K.O', age: 28 },
+  { name: 'O.K', age: 29 },
+  { name: 'LAY', age: 24 }
+])
+
+const explain = await User.find({ name: /Y/ })
+  .explain()
+  .then((res) => res[0])
+
+// 描述 MongoDB 计划如何执行查询
+console.log(explain.queryPlanner) // { ... }
+// 包含有关 MongoDB 如何执行查询的统计信息
+console.log(explain.executionStats) // { ... }
+```
+
+## 读取 `queryPlanner` 输出
+
+`queryPlanner` 对象包含有关 MongoDB 决定如何执行查询的更详细信息。例如，下面是来自上述 `explain()` 调用的 `queryPlanner` 对象。
+
+```js
+{
+  plannerVersion: 1,
+  namespace: 'test.users',
+  indexFilterSet: false,
+  parsedQuery: { name: { '$regex': 'Y' } },
+  winningPlan: {
+    stage: 'COLLSCAN',
+    filter: { name: { '$regex': 'Y' } },
+    direction: 'forward'
+  },
+  rejectedPlans: []
+}
+```
+
+最重要的信息是 `winningPlan` 属性，它包含有关决定执行查询的 plan MongoDB 的信息。实际上，`winningPlan` 用于检查 MongoDB 是否使用索引进行查询。
+
+查询计划是用于标识与查询匹配的文档的阶段列表。上述计划只有一个阶段 `COLLSCAN`，这意味着 MongoDB 执行了完整的集合扫描来回答查询。集合扫描意味着 MongoDB 搜索 `users` 集合中的每个文档，查看 `name` 是否与给定查询匹配。
+
+当您引入索引时，查询计划会变得更加复杂。例如，假设您在 `name` 上添加一个索引，如下所示。
+
+```js
+await User.collection.createIndex({ name: 1 })
+
+const explain = await User.find({ name: 'O.O' })
+  .explain()
+  .then((res) => res[0])
+
+explain.queryPlanner
+```
+
+`queryPlanner` 输出如下所示：
+
+```js
+{
+  plannerVersion: 1,
+  namespace: 'test.users',
+  indexFilterSet: false,
+  parsedQuery: { name: { '$eq': 'O.O' } },
+  winningPlan: {
+    stage: 'FETCH',
+    inputStage: {
+      stage: 'IXSCAN',
+      keyPattern: { name: 1 },
+      indexName: 'name_1',
+      isMultiKey: false,
+      multiKeyPaths: { name: [] },
+      isUnique: false,
+      isSparse: false,
+      isPartial: false,
+      indexVersion: 2,
+      direction: 'forward',
+      indexBounds: { name: [ '["O.O", "O.O"]' ] }
+    }
+  },
+  rejectedPlans: []
+}
+```
+
+`winningPlan` 属性是一个递归结构：`winningPlan` 指向获胜查询计划中的最后一个阶段，每个阶段都有一个描述前一阶段的 `inputStage` 属性。
+
+在上述计划中，有两个阶段：`IXSCAN` 和 `FETCH`。这意味着第一个 MongoDB 使用 `{ name: 1 }` 索引来确定哪些文档与查询匹配，然后获取各个文档。
+
+## 读取 `executionStats` 输出
+
+`executionStats` 输出比 `queryPlanner` 更复杂：它包括关于每个阶段花费的时间以及每个阶段扫描的文档数量的统计信息。
+
+例如，下面是简单集合扫描的 `executionStats` 输出：
+
+```js
+{
+  executionSuccess: true,
+  nReturned: 1,
+  executionTimeMillis: 0,
+  totalKeysExamined: 0,
+  totalDocsExamined: 5,
+  executionStages: {
+    stage: 'COLLSCAN',
+    filter: { name: { '$regex': 'Y' } },
+    nReturned: 1,
+    executionTimeMillisEstimate: 0,
+    works: 7,
+    advanced: 1,
+    needTime: 5,
+    needYield: 0,
+    saveState: 0,
+    restoreState: 0,
+    isEOF: 1,
+    direction: 'forward',
+    docsExamined: 5
+  },
+  allPlansExecution: []
+}
+```
+
+这里需要注意的重要细节是顶层 `executionTimeMillis` 和 `TotalDocsChecked` 属性。`executionTimeMillis` 是 MongoDB 执行查询所花费的时间，`TotalDocsDemined` 是 MongoDB 回答查询时必须查看的文档数。
+
+请记住，`executionTimeMillis` 不包括网络延迟或[被阻塞的时间](https://thecodebarbarian.com/slow-trains-in-mongodb-and-nodejs)。仅仅因为 `executionTimeMillis` 很小，并不意味着最终用户可以立即看到结果。
+
+当您有一个索引和多个阶段时，`executionStats` 会分解每个阶段的大致执行时间和扫描的文档数。以下是带有索引的查询的 `executionStats`，为了简洁起见，排除了一些不太重要的细节：
+
+```js
+{
+  executionSuccess: true,
+  nReturned: 1,
+  executionTimeMillis: 2,
+  totalKeysExamined: 1,
+  totalDocsExamined: 1,
+  executionStages: {
+    stage: 'FETCH',
+    nReturned: 1,
+    executionTimeMillisEstimate: 0,
+    // ...
+    docsExamined: 1,
+    // ...
+    inputStage: {
+      stage: 'IXSCAN',
+      nReturned: 1,
+      executionTimeMillisEstimate: 0,
+      // ...
+    }
+  },
+  allPlansExecution: []
+}
+```
+
+上面的 `executionStats` 输出表明有两个阶段：`IXSCAN` 和 `FETCH`。`IXSCAN` 阶段在 0 毫秒内执行并导致一个文档被发送到 `FETCH` 阶段。`FETCH` 阶段检查并返回 1 个文档，这是查询的最终结果。
diff --git a/Nginx/Nginx Note.md b/Nginx/Nginx Note.md
new file mode 100644
index 0000000..e1e67e0
--- /dev/null
+++ b/Nginx/Nginx Note.md	
@@ -0,0 +1,4 @@
+# Nginx Note
+
+- [NGINX-TUTORIAL](https://dunwu.github.io/nginx-tutorial/#/) 是一个 Nginx 极简教程。
+- [nginx 这一篇就够了](https://juejin.cn/post/6844903944267759624)
diff --git "a/Nginx/Nginx \351\205\215\347\275\256\346\227\247\345\237\237\345\220\215\351\207\215\345\256\232\345\220\221\345\210\260\346\226\260\345\237\237\345\220\215.md" "b/Nginx/Nginx \351\205\215\347\275\256\346\227\247\345\237\237\345\220\215\351\207\215\345\256\232\345\220\221\345\210\260\346\226\260\345\237\237\345\220\215.md"
new file mode 100644
index 0000000..d6ccd84
--- /dev/null
+++ "b/Nginx/Nginx \351\205\215\347\275\256\346\227\247\345\237\237\345\220\215\351\207\215\345\256\232\345\220\221\345\210\260\346\226\260\345\237\237\345\220\215.md"	
@@ -0,0 +1,80 @@
+# Nginx 配置旧域名重定向到新域名
+
+Nginx 里的 `rewrite` 模块是专门负责静态重写的。
+
+该模块允许使用正则表达式改变 URI，并且根据变量来重定向以及选择配置。
+
+基本用法是：`rewrite patten replace flag`。`patten` 是正则表达式，与 `patten` 匹配的 URL 会被改写为 `replace`，而 `flag` 是可选的，可以有如下标志：
+
+- `last` — 完成 `rewrite`，然后搜索相应的 URI 和位置
+- `break` — 中止 `rewrite`，不再匹配后面的规则
+- `redirect` — 返回 code 为 302 的临时重定向
+- `permanent` — 返回 code 为 301 的永久重定向
+
+例如，要将旧域名重定向到新域名上：
+
+```nginx
+server {
+  listen 443 ssl;
+  server_name old.com;
+  # ...
+
+  rewrite .* https://new.com;
+}
+```
+
+如果是跳转到新域名上时要保留 `path` 部分，那么：
+
+```nginx
+server {
+  listen 443 ssl;
+  server_name old.domain.com;
+  # ...
+
+  rewrite ^/(.*)$ https://new.domain.com/$1;
+}
+```
+
+你还可以添加条件判断，如果域名不是 `new.domain.com` 就统一转到 `https://new.domain.com`：
+
+```nginx
+server {
+  listen 443 ssl;
+  server_name old.domain.com new.domain.com example.com www.example.com;
+
+  if ($host != 'new.domain.com') {
+    rewrite ^/(.*)$ https://new.domain.com/$1 permanent;
+  }
+}
+```
+
+`$host` 是 `core` 模块内部的一个变量，当请求头里不存在 `host` 属性或者是个空值，`$host` 则等于 `server_name`。如果请求头里有 `host` 属性，那么 `$host` 等于 `host` 属性除了端口号的部分，例如 `host` 属性是 `www.example.com`，那么 `$host` 就是 `www.example.com`。
+
+> **注意**：`permanent` 是永久重定向，如果重定向的地址错误，由于浏览器会记住它，会一直重定向你设置的错误地址。这时你可以通过清除浏览器缓存解决。
+
+`rewrite` 与 `location` 配合实现图片文件跳转到 CDN：
+
+```nginx
+location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
+  expires 30d;
+  rewrite ^/uploadfile\/(.*)$ https://cdn.new.domain.com/uploadfile/$1;
+}
+```
+
+[nginx-tutorial](https://dunwu.github.io/nginx-tutorial) 教程推荐的最佳做法是，[使用 `return` 代替 `rewrite` 来做重定向](https://dunwu.github.io/nginx-tutorial/#/nginx-configuration?id=%e4%bd%bf%e7%94%a8-return-%e4%bb%a3%e6%9b%bf-rewrite-%e6%9d%a5%e5%81%9a%e9%87%8d%e5%ae%9a%e5%90%91)。
+
+因为它们比通过位置块评估 RegEx 更简单、更快捷。该指令停止处理，并将指定的代码返回给客户端。
+
+```nginx
+server {
+  # ...
+
+  return 301 https://new.domain.com$request_uri;
+}
+```
+
+`$request_uri` 也是一个内置变量，用于替代正则以高效的填补现有 URI。
+
+## 更多资料
+
+[访问后台出现重定向次数过多该怎么办？-建站需知](https://blog.csdn.net/AlvinCasper/article/details/112727903)
diff --git "a/Nginx/Nginx \351\235\231\346\200\201\346\226\207\344\273\266\344\270\216 root \345\222\214 alias \346\267\267\346\267\206.md" "b/Nginx/Nginx \351\235\231\346\200\201\346\226\207\344\273\266\344\270\216 root \345\222\214 alias \346\267\267\346\267\206.md"
new file mode 100644
index 0000000..20690ad
--- /dev/null
+++ "b/Nginx/Nginx \351\235\231\346\200\201\346\226\207\344\273\266\344\270\216 root \345\222\214 alias \346\267\267\346\267\206.md"	
@@ -0,0 +1,58 @@
+# Nginx 静态文件与 root 和 alias 混淆
+
+`root` 和 `alias` 指令之间有一个非常重要的区别。这种差异存在于 `root` 或 `alias` 中指定的路径的处理方式中。
+
+`root`：
+
+- `location` 部分会附加到 `root` 部分
+- 最终路径为 `root`+ `location`
+
+`alias`：
+
+- `location` 部分将被替换为 `alias` 部分
+- 最终路径为 `alias`
+
+假设我们有配置：
+
+```nginx
+location /static/ {
+  root /var/www/app/static/;
+  autoindex off;
+}
+```
+
+在这种情况下，Nginx 将派生的最终路径是
+
+```txt
+/var/www/app/static/static
+```
+
+这将返回 `404`，因为 `static/` 中没有 `static/`
+
+这是因为 `location` 部分附加到 `root` 中指定的路径。因此，对于 `root`，正确的方法是
+
+```nginx
+location /static/ {
+  root /var/www/app/;
+  autoindex off;
+}
+```
+
+另一方面，使用 `alias` 时，`location` 部分会被丢弃。所以对于配置：
+
+```nginx
+location /static/ {
+  alias /var/www/app/static/; # 注意，这里的斜杆必不可少，但不会包含在最终生成的路径中
+  autoindex off;
+}
+```
+
+最终路径将正确形成为：
+
+```txt
+/var/www/app/static
+```
+
+在某种程度上，这是有道理的。`alias` 只是让您定义一个新路径来表示现有的**真实**路径。`location` 部分是新路径，因此它被替换为真实路径。将其视为一个符号链接。
+
+另一方面，`root` 并不是一个新路径，它包含一些信息，必须与其他信息进行比较才能生成最终路径。因此，`location` 部分被使用，而不是被丢弃。
diff --git "a/Nginx/\346\237\245\346\211\276 Nginx \351\205\215\347\275\256\346\226\207\344\273\266.md" "b/Nginx/\346\237\245\346\211\276 Nginx \351\205\215\347\275\256\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..a7863dc
--- /dev/null
+++ "b/Nginx/\346\237\245\346\211\276 Nginx \351\205\215\347\275\256\346\226\207\344\273\266.md"	
@@ -0,0 +1,39 @@
+# 查找 Nginx 配置文件
+
+`nginx -t` 和 `nginx -V` 都会打印出默认的 nginx 配置文件路径。
+
+```bash
+$ nginx -t
+nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
+nginx: configuration file /etc/nginx/nginx.conf test is successful
+
+$ nginx -V
+nginx version: nginx/1.18.0 (Ubuntu)
+built with OpenSSL 1.1.1f  31 Mar 2020
+TLS SNI support enabled
+configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf ...
+```
+
+如果需要，可以通过以下方式获取配置文件：
+
+```bash
+$ nginx -V 2>&1 | grep -o '\-\-conf-path=\(.*conf\)' | cut -d '=' -f2
+/etc/nginx/nginx.conf
+```
+
+即使您加载了其他配置文件，它们仍会打印出默认值。
+
+`ps aux` 将显示当前加载的 nginx 配置文件。
+
+```bash
+$ ps aux
+USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
+root        11  0.0  0.2  31720  2212 ?        Ss   Jul23   0:00 nginx: master process nginx -c /app/nginx.conf
+```
+
+因此，您实际上可以通过以下方式获取配置文件，例如：
+
+```bash
+$ ps aux | grep "[c]onf" | awk '{print $(NF)}'
+/app/nginx.conf
+```
diff --git "a/Node/Express \344\270\255\347\232\204 app.use() \346\226\271\346\263\225.md" "b/Node/Express \344\270\255\347\232\204 app.use() \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..9ae835e
--- /dev/null
+++ "b/Node/Express \344\270\255\347\232\204 app.use() \346\226\271\346\263\225.md"	
@@ -0,0 +1,92 @@
+# Express 中的 app.use() 方法
+
+Express 应用程序有一个 [`use()` 方法](https://expressjs.com/en/api.html#app.use)。该方法向应用程序添加新的中间件。
+
+例如，假设您想要打印 HTTP 方法（`get`、`post` 等）和每个请求的 URL。下面是如何添加一个新的中间件来打印每个请求的 HTTP 方法和 URL：
+
+```js
+const app = require('express')()
+
+app.use((req, res, next) => {
+  // 例如，对 /test 的 GET 请求将打印 GET /test
+  console.log(`${req.method} ${req.url}`)
+  next()
+})
+
+app.get('/test', (req, res, next) => {
+  res.send('ok')
+})
+
+// 使用 Axios 测试上述应用程序
+const server = await app.listen(5000)
+
+const axios = require('axios')
+// 打印 get /test
+const res = await axios.get('http://localhost:5000/test')
+```
+
+## 中间件堆栈
+
+在 Express 中，一切都是中间件。在内部，Express 应用程序有一个中间件堆栈，调用 `use()` 会在堆栈中添加一个新层。定义路由处理程序的函数，如 `get()` 和 `post()` 也会向堆栈添加层。**Express 按顺序执行中间件堆栈**，因此调用 `use()` 的顺序很重要。
+
+例如，最常见的中间件功能之一是 [cors 中间件](https://www.npmjs.com/package/cors)，它将 CORS 标头附加到 Express HTTP 响应。在定义任何路由处理程序或任何其他发送 HTTP 响应的操作之前，请确保调用 `app.use(cors())`，否则将无法获得 CORS 标头！
+
+```js
+const app = require('express')()
+
+// 此响应将没有 CORS 标头，因为顺序很重要。Express 将在此路由处理程序之后运行 CORS 中间件。
+app.get('/nocors', (req, res) => {
+  res.send('ok')
+})
+
+app.use(require('cors')())
+
+// 此响应将具有 CORS 标头，因为此路由处理程序位于中间件列表中 CORS 中间件之后。
+app.get('/cors', (req, res) => {
+  res.send('ok')
+})
+```
+
+另一个常见的中间件功能是 Express 的 [body-parser](http://expressjs.com/en/resources/middleware/body-parser.html)。该中间件负责解析请求体并设置 `req.body` 属性。确保在使用 `req.body` 之前调用 `app.use(express.json())`，否则它将是 `undefined` 的！
+
+```js
+const express = require('express')
+const app = express()
+
+// body 在 HTTP 响应中总是 undefined，因为 Express 将在这个路由处理程序之后运行 JSON body-parser。
+app.post('/nobody', (req, res) => {
+  res.json({ body: req.body })
+})
+
+app.use(express.json())
+
+// body 将包含入站请求正文。
+app.post('/body', (req, res) => {
+  res.json({ body: req.body })
+})
+```
+
+## `path` 参数
+
+尽管 `use()` 方法通常仅使用 1 个参数调用，但您也可以向其传递一个 `path` 告诉 Express 在收到以给定 `path` 开头的 URL 请求时仅执行给定中间件。
+
+```js
+const app = require('express')()
+
+app.use('/cors', require('cors')())
+
+// 此响应没有 CORS 标头，因为路径 /nocors 不是以 /cors 开头的
+app.get('/nocors', (req, res) => {
+  res.send('ok')
+})
+
+// 此响应将具有 CORS 标头
+app.get('/cors', (req, res) => {
+  res.send('ok')
+})
+
+// 此响应也具有 CORS 标头，因为 /cors/test 以 /cors 开头
+app.get('/cors/test', (req, res) => {
+  res.send('ok')
+})
+```
diff --git "a/Node/Express \344\270\255\347\232\204\351\224\231\350\257\257\345\244\204\347\220\206\344\270\255\351\227\264\344\273\266.md" "b/Node/Express \344\270\255\347\232\204\351\224\231\350\257\257\345\244\204\347\220\206\344\270\255\351\227\264\344\273\266.md"
new file mode 100644
index 0000000..ac9c0a2
--- /dev/null
+++ "b/Node/Express \344\270\255\347\232\204\351\224\231\350\257\257\345\244\204\347\220\206\344\270\255\351\227\264\344\273\266.md"	
@@ -0,0 +1,123 @@
+# Express 中的错误处理中间件
+
+[Express 的错误处理中间件](http://expressjs.com/en/guide/error-handling.html)可帮助您处理错误，而无需重复同样的工作。假设您直接在 Express 路由处理程序中处理错误：
+
+```js
+app.put('/user/:id', async (req, res) => {
+  let user
+  try {
+    user = await User.findOneAndUpdate({ _id: req.params.id }, req.body)
+  } catch (err) {
+    return res.status(err.status || 500).json({ message: err.message })
+  }
+  return res.json({ user })
+})
+```
+
+上面的代码可以正常工作，但是，如果有数百个接口呢，那么错误处理逻辑将变得不可维护，因为它被重复了数百次。
+
+## 定义错误处理中间件
+
+Express 根据中间件函数采用的参数数量分为不同的类型。接受 4 个参数的中间件函数被定义为**错误处理中间件**，只有在发生错误时才会被调用。
+
+```js
+const app = require('express')()
+
+app.get('*', function routeHandler() {
+  // 此中间件抛出一个错误，Express 将直接转到下一个错误处理程序
+  throw new Error('Oops!')
+})
+
+app.get('*', (req, res, next) => {
+  // 此中间件不是错误处理程序（只有3个参数），Express 将跳过它，因为之前的中间件中存在错误
+  console.log('这里不会打印')
+})
+
+// 您的函数必须接受 4 个参数，以便 Express 将其视为错误处理中间件。
+app.use((err, req, res, next) => {
+  res.status(500).json({ message: err.message })
+})
+```
+
+Express 会自动为您处理同步错误，如上面的 `routeHandler()` 方法。但是 Express 不处理异步错误。如果出现异步错误，则需要调用 `next()`。
+
+```js
+const app = require('express')()
+
+app.get('*', (req, res, next) => {
+  // next() 方法告诉 Express 转到链中的下一个中间件。
+  // Express 不处理异步错误，因此您需要通过调用 next() 来报告错误。
+  setImmediate(() => {
+    next(new Error('Oops'))
+  })
+})
+
+app.use((err, req, res, next) => {
+  res.status(500).json({
+    message: err.message
+  })
+})
+```
+
+请记住，Express 中间件是按顺序执行的。您应该在所有其他中间件之后，最后定义错误处理程序。否则，您的错误处理程序将不会被调用：
+
+## 与 `async/await` 一起使用
+
+Express 无法捕获 `promise` 的异常，Express 在 ES6 之前编写，对于如何处理 `async/await` 它扔没有好的解决方案。
+
+例如，下面的服务器永远不会成功发送 HTTP 响应，因为 Promise `reject` 永远不会得到处理：
+
+```js
+const app = require('express')()
+
+app.get('*', (req, res, next) => {
+  // 报告异步错误必须通过 next()
+  return new Promise((resolve, reject) => {
+    setImmediate(() => reject(new Error('woops')))
+  }).catch(next)
+})
+
+app.use((error, req, res, next) => {
+  console.log('will not print')
+  res.json({ message: error.message })
+})
+
+app.listen(3000)
+```
+
+我们可以封装或者使用现有的库来进行捕获。
+
+首先，我们先简单封装一个函数，将 `async/await` 与 Express 错误处理中间件联系起来。
+
+> **注意**：异步函数会返回 Promise，因此您需要确保 `catch()` 所有错误并将其传递给 `next()`。
+
+```js
+function wrapAsync(fn) {
+  return function (req, res, next) {
+    fn(req, res, next).catch(next)
+  }
+}
+
+app.get(
+  '*',
+  wrapAsync(async (req, res) => {
+    await new Promise((resolve) => setTimeout(() => resolve(), 50))
+    // Async error!
+    throw new Error('woops')
+  })
+)
+```
+
+使用第三方库 [`express-async-errors`](https://www.npmjs.com/package/express-async-errors)，一个简单的 ES6 async/await 支持 hack：
+
+```js
+require('express-async-errors')
+app.get('*', async (req, res, next) => {
+  await new Promise((resolve) => setTimeout(() => resolve(), 50))
+  throw new Error('woops')
+})
+```
+
+## 最后
+
+Express 错误处理中间件允许您以最大化关注点分离的方式处理错误。您不需要处理业务逻辑中的错误，如果使用 `async/await`，甚至不需要 `try/catch`。这些错误将出现在您的错误处理程序中，然后您的错误处理程序可以决定如何响应请求。确保在下一个 Express 应用程序中充分利用这一强大功能！
diff --git "a/Node/JavaScript Lodash \345\267\245\345\205\267\345\272\223.md" "b/Node/JavaScript Lodash \345\267\245\345\205\267\345\272\223.md"
new file mode 100644
index 0000000..5f19d82
--- /dev/null
+++ "b/Node/JavaScript Lodash \345\267\245\345\205\267\345\272\223.md"	
@@ -0,0 +1,639 @@
+# JavaScript Lodash 工具库
+
+## 简介
+
+[Lodash](https://lodash.com/) 提供模块化、性能和额外功能的现代 JavaScript 实用工具库。它通过降低 Array、Number、Objects、String 等等的使用难度从而让 JavaScript 变得更简单，提高开发者效率。类似的还有 [Underscore](https://www.underscorejs.com.cn/) 和 [Lazy](http://danieltao.com/lazy.js/)，还有一个 [Ramda](https://ramdajs.com/) 库，它是用柯里化实现的。
+
+> **支持情况**：Chrome 74-75，Firefox 66-67，IE 11，Edge 18，Safari 11-12 & Node.js 8-12
+
+## 安装
+
+- [核心功能](https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/core.js)、[（~4kB）](https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/core.min.js)
+- [完整功能](https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js)、[（~24kB](https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.min.js))
+
+CDN：
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
+```
+
+NPM：
+
+```bash
+npm i lodash
+```
+
+以下将介绍 Loadsh 的常用方法
+
+## Find
+
+`_.filter` 返回一个新的过滤后的数组。
+
+```js
+var users = [
+  { user: 'barney', age: 36, active: true },
+  { user: 'fred', age: 40, active: false }
+]
+
+_.filter(users, (o) => !o.active) // { 'user': 'fred',   'age': 40, 'active': false }
+_.filter(users, { age: 36, active: true }) // { 'user': 'barney', 'age': 36, 'active': true },
+_.filter(users, ['active', false]) // { 'user': 'fred', 'age': 40, 'active': false }
+_.filter(users, 'active') // { 'user': 'barney',  'age': 36, 'active': true }
+```
+
+`_.find` 和 `_.findLast` 返回匹配元素，否则返回 `undefined`。
+
+```js
+var users = [
+  { user: 'barney', age: 36, active: true },
+  { user: 'fred', age: 40, active: false },
+  { user: 'pebbles', age: 1, active: true }
+]
+
+_.find(users, (o) => o.age < 40) // { 'user': 'barney',  'age': 36, 'active': true }
+_.find(users, { age: 1, active: true }) // { 'user': 'pebbles', 'age': 1,  'active': true }
+_.find(users, ['active', false]) // { 'user': 'fred', 'age': 40, 'active': false }
+_.find(users, 'active') // { 'user': 'barney',  'age': 36, 'active': true }
+
+_.findLast([1, 2, 3, 4], (n) => n % 2 == 1) // 3
+```
+
+它们都适用于数组和对象。
+
+## set/get
+
+### set
+
+`_.set` 返回 `object`。设置 `object` 对象中对应 `path` 属性路径上的值，如果`path`不存在，则创建。 缺少的索引属性会创建为数组，而缺少的属性会创建为对象。 使用[`_.setWith`](https://www.lodashjs.com/docs/lodash.set#setWith) 定制`path`创建。
+
+```js
+let object = { a: [{ b: { c: 3 } }] }
+
+_.set(object, 'a[0].b.c', 4)
+console.log(object.a[0].b.c) // 4
+
+_.set(object, ['x', '0', 'y', 'z'], 5)
+console.log(object.x[0].y.z) // 5
+```
+
+### get
+
+`_.get` 返回解析的值。根据 `object` 对象的 `path` 路径获取值。 如果解析 value 是 `undefined` 会以 `defaultValue` 取代。
+
+```js
+let object = { a: [{ b: { c: 3 } }] }
+
+_.get(object, 'a[0].b.c') // 3
+_.get(object, ['a', '0', 'b', 'c']) // 3
+_.get(object, 'a.b.c', 'default') // 'default'
+```
+
+## 迭代
+
+`_.forEach` 和 `_.forEachRight` 返回集合 `collection`。
+
+```js
+_([1, 2]).forEach(function (value) {
+  console.log(value) // 1 2
+})
+
+_.forEach({ a: 1, b: 2 }, (value, key) => {
+  console.log(key) // a b (不保证迭代顺序)
+})
+
+_.forEachRight([1, 2], function (value) {
+  console.log(value) // 2 1.
+})
+```
+
+`_.map` 返回新的映射后数组。
+
+```js
+function square(n) {
+  return n * n
+}
+
+_.map([4, 8], square) // [16, 64]
+_.map({ a: 4, b: 8 }, square) // [16, 64] (不保证迭代顺序)
+
+var users = [{ user: 'barney' }, { user: 'fred' }]
+
+_.map(users, 'user') // ['barney', 'fred']
+```
+
+`_.every` 如果所有元素经 predicate（断言函数） 检查后都都返回真值，那么就返回`true`，否则返回 `false`。
+
+```js
+_.every([true, 1, null, 'yes'], Boolean) // false
+
+let users = [
+  { user: 'barney', age: 36, active: false },
+  { user: 'fred', age: 40, active: false }
+]
+
+_.every(users, { user: 'barney', active: false }) // false
+_.every(users, ['active', false]) // true
+_.every(users, 'active') // false
+```
+
+## Array
+
+`_.chunk` 返回一个包含拆分区块的新数组（注：相当于一个二维数组）。
+
+```js
+_.chunk(['a', 'b', 'c', 'd'], 2) // [['a', 'b'], ['c', 'd']]
+```
+
+`_.compact` 返回过滤掉假值的新数组。
+
+```js
+_.compact([0, 1, false, 2, '', 3]) // [1, 2, 3]
+```
+
+`_.fill` 返回 `array`。使用 `value` 值来填充（替换） `array`，从`start`位置开始, 到`end`位置结束（但不包含`end`位置）。
+
+```js
+_.fill([1, 2, 3], 'a') // ['a', 'a', 'a']
+_.fill(Array(4), 'x') // [ 'x', 'x', 'x', 'x' ]
+_.fill([4, 6, 8, 10], '*', 1, 3) // [4, '*', '*', 10]
+
+_.flattenDeep([1, [2, [3, [4]], 5]]) // [1, 2, 3, 4, 5]
+```
+
+`_.flatten` 返回减少嵌套层级后的新数组。
+
+```js
+_.flatten([1, [2, [3, [4]], 5]]) // [1, 2, [3, [4]], 5]
+```
+
+`_.flattenDeep` 返回一个的新一维数组。
+
+```js
+_.flattenDeep([1, [2, [3, [4]], 5]]) // [1, 2, 3, 4, 5]
+```
+
+### 过滤
+
+`_.drop` 返回 `array` 剩余切片。
+
+```js
+_.drop([1, 2, 3]) // [2, 3]
+_.drop([1, 2, 3], 2) // [3]
+_.drop([1, 2, 3], 5) // []
+_.drop([1, 2, 3], 0) // [1, 2, 3]
+
+_.dropRight([1, 2, 3]) // [1, 2]
+```
+
+- `_.take` 返回 `array` 数组的切片（从起始元素开始`n`个元素）。
+- `_.takeRight` 返回 `array` 数组的切片（从结尾元素开始`n`个元素）。
+
+```js
+_.take([1, 2, 3]) // [1]
+_.take([1, 2, 3], 2) // [1, 2]
+_.take([1, 2, 3], 5) // [1, 2, 3]
+_.take([1, 2, 3], 0) // []
+
+_.takeRight([1, 2, 3], 2) // [2, 3]
+```
+
+`_.slice` 返回 数组 `array` 裁剪部分的新数组。
+
+```js
+_.slice([1, 2, 3], 0, 2) // [1, 2]
+```
+
+`_.initial` 返回截取后的数组`array`
+
+```js
+_.initial([1, 2, 3]) // [1, 2]
+```
+
+`_.rest` 返回新的函数。
+
+```js
+let say = _.rest(function (what, names) {
+  return (
+    what +
+    ' ' +
+    _.initial(names).join(', ') +
+    (_.size(names) > 1 ? ', & ' : '') +
+    _.last(names)
+  )
+})
+
+say('hello', 'fred', 'barney', 'pebbles') // 'hello fred, barney, & pebbles'
+```
+
+`_.dropWhile` 返回 `array` 剩余切片。
+
+```js
+_.dropWhile(list, 'active')            // 像过滤器一样工作
+_.dropWhile(list, 'active', true)
+_.dropWhile(list, { active: true })
+_.dropWhile(list, (n) => ...)
+_.dropRightWhile(list, ...)
+
+let users = [
+  { 'user': 'barney',  'active': false },
+  { 'user': 'fred',    'active': false },
+  { 'user': 'pebbles', 'active': true }
+]
+
+_.dropWhile(users, (o) => !o.active) // { 'user': 'pebbles', 'active': true }
+_.dropWhile(users, { 'user': 'barney', 'active': false }) // [{ 'user': 'barney',  'active': false }, {...}]
+_.dropWhile(users, ['active', false]) // { 'user': 'pebbles', 'active': true }
+_.dropWhile(users, 'active') // [{user: "barney", active: false}, {...}, {...}]
+```
+
+`_.without` 返回过滤值后的新数组。
+
+```js
+_.without([2, 1, 2, 3], 1, 2) // [3]
+```
+
+`_.remove` 返回移除元素组成的新数组。
+
+```js
+let array = [1, 2, 3, 4]
+let evens = _.remove(array, (n) => {
+  return n % 2 == 0
+})
+
+console.log(array) // [1, 3]
+console.log(evens) // [2, 4]
+```
+
+### 访问
+
+`_.first` 返回数组 `array` 的第一个元素。
+
+```js
+_.head([1, 2, 3]) // 1
+_.head([]) // undefined
+```
+
+`_.last` 返回 `array` 中的最后一个元素
+
+```js
+_.last([1, 2, 3]) // 3
+```
+
+`_.at` 返回选中值的数组。
+
+```js
+_.at([1, 2, 3], 0) // [1]
+_.at([1, 2, 3], [0, 1]) // [1, 2]
+
+let object = { a: [{ b: { c: 3 } }, 4] }
+
+_.at(object, ['a[0].b.c', 'a[1]']) // [3, 4]
+```
+
+### Sets
+
+`_.uniq` 返回新的去重后的数组。
+
+```js
+_.uniq([2, 1, 2]) // [2, 1]
+```
+
+`_.difference` 返回一个过滤值后的新数组。
+
+```js
+_.difference([3, 2, 1], [4, 2]) // [3, 1]
+```
+
+`_.intersection` 返回一个包含所有传入数组交集元素的新数组。
+
+```js
+_.intersection([2, 1], [4, 2], [1, 2]) // [2]
+```
+
+`_.union` 返回一个新的联合数组。
+
+```js
+_.union([2], [1, 2]) // [2, 1]
+```
+
+`_.concat` 返回连接后的新数组。
+
+```js
+let array = [1]
+let other = _.concat(array, 2, [3], [[4]])
+
+console.log(other) // [1, 2, 3, [4]]
+console.log(array) // [1]
+```
+
+### Index
+
+`_.findIndex` 和 `_.findLastIndex` 返回找到元素的索引值（index），否则返回 `-1`。
+
+```js
+let users = [
+  { user: 'barney', active: false },
+  { user: 'fred', active: false },
+  { user: 'pebbles', active: true }
+]
+
+_.findIndex(list, fn)
+_.findLastIndex(list, fn)
+
+_.findIndex(users, (o) => o.user == 'barney') // 0
+_.findIndex(users, { user: 'fred', active: false }) // 1
+_.findIndex(users, ['active', false]) // 0
+_.findIndex(users, 'active') // 2
+
+_.findLastIndex(users, (o) => o.user == 'pebbles') // 2
+```
+
+`_.sortedIndex` 和 `_.sortedLastIndex` 返回 `value` 值应该在数组 `array` 中插入的索引位置 index。
+
+```js
+_.sortedIndex([30, 50], 40) // 1
+_.sortedLastIndex([4, 5, 5, 5, 6], 5) // 4
+```
+
+`_.indexOf` 返回值 `value` 在数组中的索引位置，没有找到为返回`-1`。
+
+```js
+_.indexOf([1, 2, 1, 2], 2) // 1
+_.indexOf([1, 2, 1, 2], 2, 2) // 3
+```
+
+## 柯里化（Currying）
+
+返回预设参数的函数。
+
+```js
+let greet = (greeting, name) => `${greeting}, ${name}!`
+
+let fn = _.partial(fn, 'hi')
+fn('joe') // 'hi, joe!'
+```
+
+返回新的柯里化（curry）函数。
+
+```js
+_.curry(greet)('hi') // function(name)
+_.curryRight(greet)('joe') // function(greet)
+```
+
+## 装饰器（Decorator）
+
+### 节流和防抖
+
+- `_.throttle` 返回节流的函数。
+- `_.debounce` 返回防抖的函数。
+
+```js
+_.throttle(fn)
+_.debounce(fn)
+```
+
+### 限制
+
+```js
+document.addEventListener('click', _.before(5, fn)) // 只能调用5次
+document.addEventListener('click', _.after(5, fn)) // 5次后才能调用
+
+const initialize = _.once(fn)
+initialize()
+initialize() // 类似 _.before(1, fn)，只调用一次 fn
+```
+
+### 其他
+
+`_.wrap` 返回新的函数。
+
+```js
+_.wrap(_.escape, (name) => `hi ${name}`) // 与执行 name = _.escape(name) 相同
+```
+
+`_.delay` 返回计时器 id 延迟。延迟 `wait` 毫秒后调用 `fn`。 调用时，任何附加的参数会传给 `fn`。
+
+```js
+_.delay(
+  (text) => {
+    console.log(text)
+  },
+  2000,
+  'Hello World!'
+)
+```
+
+`_.filter` 返回一个新的过滤后的数组。
+
+```js
+function isEven(n) {
+  return n % 2 == 0
+}
+
+_.filter([1, 2, 3, 4, 5, 6], _.negate(isEven)) // => [1, 3, 5]
+```
+
+`_.memoize` 返回缓存化后的函数。
+
+```js
+_.memoize(fn)
+_.memoize(fn, ...)
+
+var object = { 'a': 1, 'b': 2 };
+var other = { 'c': 3, 'd': 4 };
+
+var values = _.memoize(_.values)
+values(object) // => [1, 2]
+
+values(other) // => [3, 4]
+
+object.a = 2
+values(object) // => [1, 2]
+
+// 修改结果缓存。
+values.cache.set(object, ['a', 'b'])
+values(object) // => ['a', 'b']
+
+// 替换 _.memoize.Cache。
+_.memoize.Cache = WeakMap
+```
+
+## 字符串
+
+### 大写
+
+转换字符串 `string` 首字母为大写，剩下为小写。
+
+```js
+_.capitalize('hello world') // 'Hello world'
+```
+
+转换 `string` 字符串为 [start case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage)。
+
+```js
+_.startCase('hello_world') // 'Hello World'
+```
+
+转换字符串 `string` 为 [snake case](https://en.wikipedia.org/wiki/Snake_case)。
+
+```js
+_.snakeCase('hello world') // 'hello_world'
+```
+
+转换字符串 `string` 为 [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles)。
+
+```js
+_.kebabCase('hello world') // 'hello-world'
+```
+
+转换字符串 `string` 为 [驼峰写法](https://en.wikipedia.org/wiki/CamelCase)。
+
+```js
+_.camelCase('hello world') // 'helloWorld'
+```
+
+### 填充
+
+`_.pad`、`_.padStart`、`_.padEnd` 返回填充后的字符串。
+
+```js
+_.pad('abc', 3) // 'abc'
+_.pad('abc', 8) // '   abc  '
+_.pad('abc', 8, '_-') // '_-abc_-_'
+
+_.padStart('abc', 3) // 'abc'
+_.padStart('abc', 6) // '   abc'
+_.padStart('abc', 6, '_-') // '_-_abc'
+
+_.padEnd('abc', 3) // 'abc'
+_.padEnd('abc', 6) // 'abc   '
+_.padEnd('abc', 6, '_-') // 'abc_-_'
+```
+
+### 去空
+
+从 `string` 字符串中移除前面和后面的空格或指定的字符。
+
+```js
+_.trim('  str  ') // 'str'
+```
+
+从 `string` 字符串中移除后面的空格或指定的字符。
+
+```js
+_.trimStart('  str  ') // 'str  '
+```
+
+从 `string` 字符串中移除后面的空格或指定的字符。
+
+```js
+_.trimEnd('  str  ') // '  str'
+_.trimEnd('-_-abc-_-', '-_-') // '-_-abc'
+```
+
+### 其他
+
+`_.repeat` 重复 N 次给定字符串。
+
+```js
+_.repeat('-', 2) // '--'
+_.repeat('abc', 2) // 'abcabc'
+_.repeat('abc', 0) // ''
+```
+
+转换字符串 `string` 中[拉丁语-1 补充字母](<https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table>)和[拉丁语扩展字母-A](https://en.wikipedia.org/wiki/Latin_Extended-A)为基本的拉丁字母，并且去除组合变音标记。
+
+```js
+_.deburr('déjà vu') // 'deja vu'
+```
+
+截断 `string` 字符串，如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替，omission 默认是 "..."。
+
+```js
+_.truncate('hello world', 5) // 'hello...'
+_.truncate('hi-diddly-ho there, neighborino', {
+  length: 24,
+  separator: ' '
+}) // 'hi-diddly-ho there,...'
+
+_.truncate('hi-diddly-ho there, neighborino', {
+  length: 24,
+  separator: /,? +/
+}) // 'hi-diddly-ho there...'
+
+_.truncate('hi-diddly-ho there, neighborino', {
+  omission: ' [...]'
+}) // 'hi-diddly-ho there, neig [...]'
+```
+
+检查字符串 `string` 是否以 `target` 开头。
+
+```js
+_.startsWith('abc', 'a') // true
+_.startsWith('abc', 'b') // false
+_.startsWith('abc', 'b', 1) // true
+```
+
+检查字符串 `string` 是否以给定的 `target` 字符串结尾。
+
+```js
+_.endsWith('abc', 'c') // true
+_.endsWith('abc', 'b') // false
+_.endsWith('abc', 'b', 2) // true
+```
+
+## 对象
+
+### 键值
+
+- `_.keys` 返回包含属性名的数组。创建一个 object 的自身可枚举属性名为数组。
+- `_.values` 返回对象属性的值的数组。创建 object 自身可枚举属性的值为数组。
+
+```js
+_.keys(obj)
+_.values(obj)
+
+function Foo() {
+  this.a = 1
+  this.b = 2
+}
+
+Foo.prototype.c = 3
+
+_.keys(new Foo()) // ['a', 'b'] (无法保证遍历的顺序)
+_.keys('hi') // ['0', '1']
+
+_.values(new Foo()) // [1, 2] (无法保证遍历的顺序)
+_.values('hi') // ['h', 'i']
+```
+
+## 链式调用
+
+Loadsh 跟 jQuery 一样支持链式调用
+
+```js
+_([1, 2, 3])
+  .map((n) => n * n)
+  .tap(console.log)
+  .thru((n) => n.reverse())
+  .value()
+```
+
+支持链式调用的方法
+
+![支持链式调用的方法](https://upload-images.jianshu.io/upload_images/18281896-9a3ff15980bea929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+不支持链式调用的方法
+
+![不支持链式调用的方法](https://upload-images.jianshu.io/upload_images/18281896-d1cf58a848d80739.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+---
+
+> 关于 Ramda 的教程可以查看阮一峰老师的 [Ramda 函数库参考教程](http://www.ruanyifeng.com/blog/2017/03/ramda.html)。
+>
+> NPM：`npm install ramda`
+> CDN：
+>
+> ```html
+> <script src="https://cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js"></script>
+> ```
diff --git "a/Node/Node Koa \346\241\206\346\236\266.md" "b/Node/Node Koa \346\241\206\346\236\266.md"
new file mode 100644
index 0000000..0efe25a
--- /dev/null
+++ "b/Node/Node Koa \346\241\206\346\236\266.md"	
@@ -0,0 +1,402 @@
+# Node Koa 框架
+
+[Koa](https://koajs.com/) 被定位为下一代 Web 框架，由 Express 原班人马打造。Koa 非常轻巧且模块化，可以在不使用回调的情况下编写代码。
+
+Koa 应用程序是一系列中间件功能，可按顺序运行以处理传入的请求并提供响应。每个中间件功能都可以访问上下文对象，该上下文对象包装了原生 Node 请求和响应对象，并提供了改进的 API 来处理它们。
+
+## 创建一个基于 Koa 的应用程序
+
+安装 koa：
+
+```bash
+npm i koa
+```
+
+创建一个简单的服务器：
+
+```js
+const Koa = require('koa')
+const app = new Koa()
+
+app.use(async (ctx) => {
+  ctx.body = 'Hello World'
+})
+
+app.listen(8080)
+```
+
+`app.listen` 方法指定监听端口，并启动当前应用。
+
+`app.use` 用于注册中间件，将给定的中间件方法添加到当前的应用程序。其内部返回 `this`，因此可以链式调用。
+
+```js
+app.use(someMiddleware).use(someOtherMiddleware).listen(8080)
+```
+
+关于中间件的详细内容可查阅 [Middleware](https://github.com/koajs/koa/wiki#middleware)。
+
+## Context 对象
+
+Koa Content 将 node 的 `request` 和 `response` 对象封装在一个单独的对象里面，并且为编写 Web 应用程序和 API 提供了许多有用的方法。
+
+```js
+app.use(async (ctx) => {
+  ctx // Context
+  ctx.request // koa Request
+  ctx.response // koa Response
+})
+```
+
+许多 context 的访问器和方法为了便于访问和调用，简单的委托给他们的 `ctx.request` 和 `ctx.response` 所对应的等价方法，例如： `ctx.type` 和 `ctx.length` 委托给 `response` 对象，`ctx.path` 和 `ctx.method` 委托了 `request` 对象。
+
+因此，您没有必要总是单独调用 `request` 或 `response` 对象来访问它们的属性。例如，如果您想访问请求的 `body`，只需直接执行即可：
+
+```js
+ctx.body // 它委托给 Koa 的 ctx.request
+```
+
+`context` 对象的全局属性和方法。
+
+```js
+ctx.req // Node 的 request 对象。
+ctx.res // Node 的 response 对象。
+ctx.request // Koa 的 Request 对象。
+ctx.response // Koa 的 Response 对象。
+ctx.app // 应用实例引用。
+ctx.state // 用于在中间件传递信息。
+
+ctx.throw() // 抛出包含 .status 属性的错误，默认为 500。该方法可以让 Koa 准确的响应处理状态。可以用 http-errors 来创建错误。
+ctx.assert() // 抛出一个类似 .throw() 的错误。koa 使用 http-assert 来断言。它和 throw() 方法都直接绝定了 HTTP 响应的状态。
+// 还有 ctx.cookies.get/set 下面也会讲到
+```
+
+Koa 不支持直接调用底层 `res` 进行响应处理。请避免使用以下 Node 属性：
+
+```js
+res.statusCode
+res.writeHead()
+res.write()
+res.end()
+```
+
+上面属性都不能使用。
+
+## Request 对象
+
+Koa `Request` 对象是对 node 的 request 进一步抽象和封装，提供了日常 HTTP 服务器开发中一些有用的功能。如下都来自官网：
+
+```js
+ctx.header/ctx.headers 返回或设置一个对象，包含所有 HTTP 请求头信息
+ctx.method  返回或设置 HTTP 请求的方法。
+ctx.length 以数字形式返回 HTTP 请求的 Content-Length 属性，取不到值，则返回 undefined。
+
+ctx.href 返回 HTTP 请求的完整路径，包括协议、端口和 url。
+ctx.path 返回 HTTP 请求的路径，该属性可读写。
+ctx.host 返回 HTTP 请求的主机（含端口号）。
+ctx.hostname 返回 HTTP 的主机名（不含端口号）
+ctx.origin 获取 URL 的来源，包括 protocol 和 host。
+ctx.url 获取请求 URL。
+ctx.originalUrl 获取请求原始 URL。
+ctx.protocol 返回 HTTP 请求的协议，https 或者 http。
+ctx.ip 返回发出 HTTP 请求的IP地址。
+
+ctx.query 返回一个对象，包含了 HTTP 请求的查询字符串。如果没有查询字符串，则返回一个空对象。该属性可读写。
+ctx.search 返回 HTTP 请求的查询字符串，含问号。该属性可读写。
+ctx.querystring 返回 HTTP 请求的查询字符串，不含问号。该属性可读写。
+ctx.fresh 返回一个布尔值，表示缓存是否代表了最新内容。通常与 If-None-Match、ETag、If-Modified-Since、Last-Modified 等缓存头，配合使用。
+ctx.type 返回 HTTP 请求的 Content-Type 属性。
+ctx.stale 返回 ctx.fresh 的相反值。
+ctx.charset 返回 HTTP 请求的字符集。
+ctx.socket 返回 HTTP 请求的 socket。
+ctx.secure 返回一个布尔值，表示当前协议是否为 https。
+ctx.subdomains 返回一个数组，表示HTTP请求的子域名。
+ctx.is() 返回指定的类型字符串，表示 HTTP 请求的 Content-Type 属性是否为指定类型。
+ctx.accepts() 检查 HTTP 请求的 Accept 属性是否可接受，如果可接受，则返回指定的媒体类型，否则返回 false。
+
+ctx.acceptsEncodings() 该方法根据 HTTP 请求的 Accept-Encoding 字段，返回最佳匹配，如果没有合适的匹配，则返回 false。
+ctx.acceptsCharsets() 该方法根据 HTTP 请求的 Accept-Charset 字段，返回最佳匹配，如果没有合适的匹配，则返回 false。
+ctx.acceptsLanguages() 该方法根据 HTTP 请求的 Accept-Language 字段，返回最佳匹配，如果没有合适的匹配，则返回 false。
+ctx.get() 返回 HTTP 请求指定的字段。
+```
+
+## Response 对象
+
+Koa `Response` 对象是对 node 的 response 进一步抽象和封装，提供了日常 HTTP 服务器开发中一些有用的功能。如下都来自官网：
+
+```js
+ctx.body 返回或设置 HTTP 响应头信息。
+ctx.status 返回或设置 HTTP 响应的状态码。默认情况下，该属性没有值。
+ctx.message 返回或设置 HTTP 响应的状态信息。该属性与 ctx.response.message 是配对的。
+ctx.length 返回或设置 HTTP 响应的 Content-Length 字段。该属性可读写，如果没有设置它的值，koa 会自动从 ctx.request.body 推断。
+ctx.type 返回或设置 HTTP 响应的 Content-Type 字段，不包括 "charset" 参数的部分。
+ctx.headerSent 该方法返回一个布尔值，检查是否 HTTP 回应已经发出。
+ctx.redirect() 该方法执行 302 跳转到指定网址。
+ctx.is() 该方法类似于 this.request.is()，用于检查 HTTP 响应的类型是否为支持的类型。
+ctx.attachment() 该方法将 HTTP 响应的 Content-Disposition 字段，设为 "attachment"，提示浏览器下载指定文件。
+ctx.set() 设置 HTTP 响应的指定字段。
+ctx.get() 返回 HTTP 响应的指定字段。
+ctx.append(field, value) 用值 value 附加额外的消息头 field。
+ctx.remove() 移除 HTTP 响应的指定字段。
+ctx.lastModified 该属性以 Date 对象的形式，返回 HTTP 响应的 Last-Modified 字段（如果该字段存在）。该属性可写。
+ctx.etag   该属性设置 HTTP 响应的 ETag 字段。注意，不能用该属性读取 ETag 字段。
+ctx.vary() 该方法将参数添加到 HTTP 响应的 Vary 字段。
+```
+
+## 中间件
+
+> Koa 的中间件是一个级联式（Cascading）的结构，也就是说，属于是层层调用，第一个中间件调用第二个中间件，第二个调用第三个，以此类推。上游的中间件必须等到下游的中间件返回结果，才会继续执行，这点很像递归。
+
+下面以 `'Hello World'` 的响应作为示例：
+
+```js
+const Koa = require('koa')
+const app = new Koa()
+
+// logger
+app.use(async (ctx, next) => {
+  await next()
+  const rt = ctx.response.get('X-Response-Time')
+  console.log(`${ctx.method} ${ctx.url} - ${rt}`)
+})
+
+// x-response-time
+app.use(async (ctx, next) => {
+  const start = Date.now()
+  await next()
+  const ms = Date.now() - start
+  ctx.set('X-Response-Time', `${ms}ms`)
+})
+
+// response
+app.use(async (ctx) => {
+  ctx.body = 'Hello World'
+})
+
+app.listen(3000)
+```
+
+当请求开始时首先请求流通过 `logger` 和 `x-response-time` 中间件，然后继续移交控制给 `response` 中间件。
+
+当其中一个中间件调用 `next()` 时，该函数暂停并将控制传递给定义的下一个中间件。当在下游没有更多的中间件执行后，堆栈将展开并且每个中间件恢复执行其上游行为。
+
+也就是 `response` 执行完，没有 `next()` 了就往回走，接着来到 `x-response-time`，当它也执行完了，回到上游的 `logger` 执行完毕。
+
+常用的一些中间件：
+
+- [koa-router](https://github.com/ZijianHe/koa-router) 用于 koa 的路由器中间件。
+- [koa-logger](https://github.com/koajs/logger) 开发风格的日志记录中间件。
+- [koa-session](https://github.com/koajs/session) 用于 koa 的简单 session 中间件。
+- [koa-jwt](https://github.com/koajs/jwt) 用于验证 JSON Web 令牌的 koa 中间件。
+- [koa-bodyparser](https://github.com/koajs/bodyparser) 基于 [co-body](https://github.com/tj/co-body) koa body 解析器。支持 `json`、`form` 表单和 `text` 类型的 body。
+- [koa-views](https://github.com/queckezz/koa-views) 用于 koa 的模板渲染中间件（hbs，swig，pug 等！ ✨）。
+- [koa-ejs](https://github.com/koajs/ejs) koa 模板渲染中间件
+- [koa-static](https://github.com/koajs/static) 静态文件服务器中间件。
+- [koa-helmet](https://github.com/venables/koa-helmet) koa 安全标头，使您的应用更安全。
+- [koa-compress](https://github.com/koajs/compress) 压缩 koa 中间件。
+- [koa-convert](https://github.com/koajs/convert) 将基于 koa Generator 的中间件转换为基于 Promise 的中间件，老项目估计会用到。
+
+用法都很简单，下面也会简单的列出几个示例。
+
+## 错误处理
+
+Koa 提供内置的错误处理机制，提供了 `ctx.throw()` 方法用来抛出错误：
+
+```json
+app.use(async (ctx) => {
+  ctx.throw(500)
+})
+```
+
+你也可以使用 `try...catch` 来自定义自己的错误处理机制
+
+```js
+app.use(async (ctx, next) => {
+  try {
+    await next()
+  } catch (err) {
+    ctx.status = err.statusCode || err.status || 500
+    ctx.body = {
+      msg: err.message
+    }
+  }
+})
+```
+
+> **注意**：错误处理中间件必须放在所有其他中间件之前，这样你就可以抓取并记录你的应用可能面临的任何类型的错误，包括与其他中间件相关的错误。
+
+如果有多个端点映射到的 JavaScript 文件，可以将该中间件集中在一个位置，并将其导出到所有端点。
+
+对于未捕获错误，可以设置 `error` 事件监听函数。
+
+```js
+app.on('error', (err) => {
+  console.error('server error', err)
+})
+```
+
+`error` 事件监听函数还可以接受上下文对象，作为第二个参数。如果 `req` 或 `res` 期间出现错误，并且无法响应客户端，`context` 实例仍然被传递：
+
+```js
+app.on('error', (err, ctx) => {
+  console.error('server error', err, ctx)
+})
+```
+
+当发生错误并且仍然有可能响应客户端（即没有数据写入 `socket`）时，Koa 会以 500（内部服务器错误）进行适当响应，而不会导致进程停止，因此也就不需要 forever 这样的模块重启进程。
+
+## 路由
+
+可以通过 `this.path` 属性，判断用户请求的路径，从而起到路由作用。
+
+```js
+app.use(async (ctx) => {
+  if (ctx.path === '/home') {
+    ctx.body = 'Hello World'
+  }
+})
+```
+
+但在一般开发项目中，我们会使用到 `koa-router` 中间件。
+
+```js
+const Router = require('koa-router')
+const router = new Router()
+
+router.get('/', (ctx) => {
+  ctx.body = 'Hello World!'
+})
+
+app.use(router.routes())
+```
+
+## 托管静态文件
+
+安装：
+
+```bash
+npm i koa-static
+```
+
+使用：
+
+```js
+const serve = require('koa-static')
+
+app.use(serve('.')) // 托管根目录下的所有文件、文件夹
+
+app.use(serve(__dirname + '/public')) // 托管 public 目录下的所有文件
+```
+
+## 日志记录
+
+安装：
+
+```bash
+npm i koa-static
+```
+
+使用：
+
+```js
+const Logger = require('koa-logger')
+
+app.use(Logger())
+```
+
+![日志记录](https://upload-images.jianshu.io/upload_images/18281896-267c50325b1a3641.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+也可以自己自定义传输内容。自己看官网去！
+
+## cookie
+
+`cookie` 的读取和设置。
+
+```js
+ctx.cookies.get(name, [options])
+ctx.cookies.set(name, value, [options])
+```
+
+`set` 和 `get` 都支持 `options` 配置参数。其中的 `signed` 参数，用于指定 cookie 是否加密。如果指定加密的话，必须用 `app.keys` 指定加密短语。
+
+```js
+app.keys = 'asdlfkhoiqwewqno'
+ctx.cookies.set('userInfo', 1, { signed: true })
+```
+
+`signed` 如果为 `true`，则还会发送另一个后缀为 `.sig` 的同名 cookie，使用一个 27-byte url-safe base64 SHA1 值来表示针对第一个 [Keygrip](https://www.npmjs.com/package/keygrip) 键的 `cookie-name=cookie-value` 的哈希值。此签名密钥用于检测下次接收 cookie 时的篡改。
+
+![cookies](https://upload-images.jianshu.io/upload_images/18281896-5b72306fbca9cc8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可配置参数如下：
+
+> - `signed`：cookie 是否加密。
+> - `expires`：cookie 何时过期
+> - `path`：cookie 的路径，默认是 `/`。
+> - `domain`：cookie 的域名。
+> - `secure`：cookie 是否只有 https 请求下才发送。
+> - `httpOnly`：是否只有服务器可以取到 cookie，默认为 `true`。
+
+## session
+
+```js
+const koa = require('koa')
+const app = koa()
+const session = require('koa-session')
+
+app.keys = ['some secret hurr'] // cookie 的签名
+
+// 默认配置
+app.use(session(app))
+
+app.use(async (ctx) => {
+  if (ctx.path === '/favicon.ico') return
+
+  let n = ctx.session.views || 0
+  ctx.session.views = ++n
+  ctx.body = n + ' views'
+})
+
+app.listen(8080)
+```
+
+你也可以自定义配置：
+
+```js
+const CONFIG = {
+  key: 'koa.sess', // (string) 默认的 cookie 秘钥
+  // 如果 session cookie 被盗，此 cookie 将永远不会过期
+  // "session" 将导致 cookie 在 session/浏览器关闭时过期
+  maxAge: 86400000, // cookie 的最大过期时间，默认值为 1 天。
+  autoCommit: true, // (boolean) 自动提交 headers (默认为 true)
+  overwrite: true, // (boolean) 是否可以覆盖 (默认为 true)
+  httpOnly: true, // (boolean) httpOnly 与否 (默认为 true)
+  signed: true, // (boolean) 是否签名 (默认为 true)
+  rolling: false, // (boolean) 每次请求强行设置 cookie。 (默认为 false)
+  renew: false, // (boolean) 在 session 即将过期时续订 session，因此我们可以始终保持用户登录。(默认为 false)
+  secure: true, // (boolean) 安全 cookie
+  sameSite: null // (string) session cookie sameSite 选项 (默认为 null, 不设置)
+}
+```
+
+详细请看 [koa-session](https://www.npmjs.com/package/koa-session)
+
+## 跨域
+
+安装：
+
+```bash
+npm i koa2-cors
+```
+
+使用：
+
+```js
+const route = require('koa2-cors')
+
+app.use(cors())
+```
+
+## 更多资料
+
+- [Migrating from Koa v1.x to v2.x](https://github.com/koajs/koa/blob/master/docs/migration.md)
+- [Koa 框架教程](https://www.ruanyifeng.com/blog/2017/08/koa.html)
diff --git a/Node/Node REPL.md b/Node/Node REPL.md
new file mode 100644
index 0000000..68dd75f
--- /dev/null
+++ b/Node/Node REPL.md	
@@ -0,0 +1,93 @@
+# Node REPL
+
+REPL（Read Eval Print Loop，交互式解释器）是一个处理 Node.js 表达式的交互式 shell，类似 Window 系统的终端或 UNIX/Linux shell，我们可以在终端中输入命令，并接收系统的响应。
+
+REPL 与 Node.js 安装捆绑在一起，并执行以下所需的任务：
+
+- Read − 读取用户输入的 JavaScript 代码
+- Eval − 解释代码行的结果
+- Print− 将结果打印给用户
+- Loop − 循环执行上述操作，直到用户发出退出信号（按下两次 Ctrl + C）。
+
+## 基本用法
+
+安装完 Node，您就拥有了 REPL，在命令行输入 `node` 进入 REPL：
+
+```bash
+node
+```
+
+您可以计算一些简单的表达式：
+
+```bash
+> 'Hello' + ' Node'
+'Hello Node'
+> console.log('Hi')
+Hi
+> 10 * 2
+20
+> var x = 10
+undefined
+> var y = 20
+undefined
+> x + y
+30
+```
+
+下面重点介绍一下，它的几个重要的命令。
+
+## REPL 命令
+
+它们都以点（`.`）开头，其中一个便是 `.help`，我们在命令行中输入它，以查看其它可用命令：
+
+- `.break` — 用于中断正在执行的操作
+- `.clear` — `.break` 别名
+- `.editor` — 进入编辑模式
+- `.exit` — 退出 REPL
+- `.help` — 列出所有可用的命令
+- `.save` — 将 JS 从文件加载到 REPL 会话中
+- `.load` — 将 REPL 会话中的所有求值命令保存到一个文件中
+
+这里不提供示例，您可以尝试一下它们，都是一些简单的命令。
+
+关于 REPL 的一些用法请查阅官网 [repl 章节](https://nodejs.org/api/repl.html)或 [How To Use the Node.js REPL](https://www.digitalocean.com/community/tutorials/how-to-use-the-node-js-repl)。
+
+## REPL 中下划线变量
+
+使用 `_` 获取最后一个结果。
+
+```bash
+> var x = 10
+undefined
+> var y = 20
+undefined
+> x + y
+30
+> _
+30
+```
+
+## 创建自定义 Node.js REPL
+
+Node 还提供了一个 [REPL 模块](https://nodejs.org/api/repl.html) 来实现与内置 REPL 同样的效果。
+
+您只需几行 JavaScript 代码就可以创建自定义 REPL：
+
+```js
+const repl = require('repl')
+
+// 定义可用的方法和状态
+const state = {
+  print() {
+    console.log("That's awesome!")
+  }
+}
+
+const myRepl = repl.start("Welcome to lio-zero repl > ")
+
+Object.assign(myRepl.context, state)
+```
+
+## 最后
+
+它很方便，我们可以使用它来计算一些简单的表达式，但我相信，您基本上不会用到 REPL 吧！😂😂
diff --git "a/Node/Node.js Buffer \346\250\241\345\235\227 \342\200\224 \347\274\223\345\206\262\345\214\272.md" "b/Node/Node.js Buffer \346\250\241\345\235\227 \342\200\224 \347\274\223\345\206\262\345\214\272.md"
new file mode 100644
index 0000000..b248ae2
--- /dev/null
+++ "b/Node/Node.js Buffer \346\250\241\345\235\227 \342\200\224 \347\274\223\345\206\262\345\214\272.md"	
@@ -0,0 +1,63 @@
+# Node.js Buffer 模块 — 缓冲区
+
+## 什么是二进制代码？
+
+为了理解缓冲区是什么以及计算机和二进制文件之间的关系，我们先来看看二进制代码的概念。
+
+为了让计算机理解、处理和存储数据，必须将数据转换为二进制代码。这主要是因为计算机处理器是由晶体管组成的，它们是由开（1）和关（0）信号激活的电子机器。
+
+发送到计算机的每一条数据在处理和输出结果之前，首先由微处理器转换成二进制。因此，能够区分不同的数据类型至关重要。通过一种称为编码的过程，计算机对不同的数据类型进行不同的编码，以区分不同类型的数据。
+
+## 什么是 Node.js 缓冲区？
+
+二进制流是大量二进制数据的集合。由于其庞大的规模，二进制流不会一起发送；在发送之前，它们被分解成更小的部分。
+
+当数据处理单元不能接受更多数据流时，多余的数据将存储在缓冲区中，直到数据处理单元准备好接收更多数据。
+
+## Node.js 中的缓冲区类
+
+Node.js 服务器通常需要读写文件系统，当然，文件存储在二进制文件中。此外，Node.js 处理 TCP 流，它在以小块形式发送二进制数据之前保护与接收器的连接。
+
+发送到接收器的数据流需要存储在某个地方（缓冲区），直到接收器准备好接收更多数据块进行处理。这就是 Node.js `Buffer` 类发挥作用的地方，它在 [V8 引擎](<https://en.wikipedia.org/wiki/V8_(JavaScript_engine)>) 之外处理和存储二进制数据。
+
+以上概念讲完了，下面是 Node.js 的 [`Buffer` 模块](https://nodejs.org/api/buffer.html)的一些简单介绍。
+
+## Buffer 属性和方法
+
+Buffer 对象是 Node.js 中的全局对象，不需要使用 `require` 关键字导入。
+
+例如：创建长度为 15 的空 Buffer：
+
+```js
+const buf = Buffer.alloc(15)
+buf // <Buffer 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00>
+buf.length // 15
+```
+
+以下是一些属性和方法：
+
+- `Buffer.alloc()` 创建指定长度的缓冲区对象。它以字节为单位分配缓冲区的大小。
+- `Buffer.byteLength()` 返回指定对象中的字节数
+- `Buffer.compare()` 比较两个缓冲区对象
+- `Buffer.concat()` 将缓冲区对象数组连接到一个缓冲区对象中
+- `Buffer.fill()` 用指定的值填充缓冲区对象
+- `Buffer.from()` 从对象（字符串/数组/缓冲区）创建缓冲区对象
+- `Buffer.isEncoding()` 检查缓冲区对象是否支持指定的编码
+- `buf.entries()` 返回缓冲区对象的 index、byte 对的迭代器
+- `buff.includes()` 检查缓冲区对象是否包含指定的值。如果存在匹配项，则返回`true`，否则返回 `false`
+- `buf.slice()` 将一个缓冲区对象分割成一个新的缓冲区对象，从指定的位置开始和结束。
+- `buf.readInt8()` 从缓冲区对象读取 8 位整数
+- `buf.writeFloatBE()` 使用 big-endian 将指定的字节写入缓冲区对象。字节应为 32 位浮点。
+- `buf.length` 返回缓冲区对象的长度，以字节为单位
+- etc
+
+详细示例请查阅[文档](https://nodejs.org/api/buffer.html#buffer)。
+
+> **扩展**：Node 全局对象有 `process`、`console`、`Buffer`、`global`、EventLoop 相关 API（`setImmediate`、`setInterval` 和 `setTimeout` 等）及为模块包装所使用的全局对象（`exports`、`module`、`require` 等），它们都不需要您使用 `require()` 即可在 Node 环境中使用。
+
+## 更多资料
+
+- [Node.js 缓冲区介绍](https://livecodestream.dev/post/2020-06-06-a-complete-introduction-to-node-buffers/)
+- [在 Nodejs 中将 Buffer 转换为 JSON 和 Utf8 字符串](https://github.com/lio-zero/blog/blob/master/Node/%E5%9C%A8Node.js%20%E4%B8%AD%E5%B0%86%20Buffer%20%E8%BD%AC%E6%8D%A2%E4%B8%BA%20JSON%20%E5%92%8C%20Utf8%20%E5%AD%97%E7%AC%A6%E4%B8%B2.md)
+- [Node.js Buffer(缓冲区)](https://www.runoob.com/nodejs/nodejs-buffer.html)
+- [Buffer](https://github.com/ElemeFE/node-interview/blob/master/sections/zh-cn/io.md#buffer)
diff --git "a/Node/Node.js Events \346\250\241\345\235\227.md" "b/Node/Node.js Events \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..9e529cd
--- /dev/null
+++ "b/Node/Node.js Events \346\250\241\345\235\227.md"	
@@ -0,0 +1,253 @@
+# Node.js Events 模块
+
+如果您在浏览器中使用 JavaScript，您就会知道用户的交互有多少是通过事件来处理的：鼠标单击、键盘按钮按下、对鼠标移动的反应等。
+
+在后端，Node 为我们提供了使用 [`events`](https://nodejs.org/dist/latest-v16.x/docs/api/events.html) 模块构建类似系统的选项，您可以在其中创建、触发和监听自己的事件。
+
+这个模块为我们提供了 `EventEmitter` 类，这是 Node.js 处理事件的关键。
+
+## EventEmitter 对象
+
+使用以下语法初始化 `EventEmitter` 对象：
+
+```js
+const EventEmitter = require('events')
+const emitter = new EventEmitter()
+```
+
+除了许多其他对象外，该对象公开了 `on` 和 `emit` 方法。
+
+- `emit` 用于触发事件
+- `on` 用于添加将在触发事件时执行的回调函数。它有另一个别名 `addListener` 方法。
+
+语法：
+
+```js
+emitter.on(eventName, callback)
+emitter.emit(eventName)
+```
+
+## 发出和监听事件
+
+您可以使用 `EventEmitter` 对象将事件处理程序分配给您自己的事件。
+
+例如，创建一个 `say` 事件，它仅在控制台打印一条消息：
+
+```js
+emitter.on('say', () => {
+  console.log('Hello')
+})
+```
+
+当我们运行：
+
+```js
+emitter.emit('say')
+```
+
+事件处理程序函数被触发，控制台打印了 `'Hello'`。
+
+## 向事件传递参数
+
+通过将参数作为附加参数传递给 `emit()`，可以将参数传递给事件处理程序：
+
+```js
+emitter.on('say', (name) => {
+  console.log(`Hello ${name}`)
+})
+
+emitter.emit('say', 'O.O')
+```
+
+多个参数:
+
+```js
+emitter.on('say', (name, age) => {
+  console.log(`我的名字叫 ${name}，今年 ${age} 岁`)
+})
+
+emitter.emit('say', 'O.O', 20)
+```
+
+## 获取特定事件的事件处理程序
+
+`emitter.listeners` 返回名为 `eventName` 事件的监听器数组的副本。
+
+```js
+emitter.on('say', () => {})
+emitter.on('say', () => {})
+
+emitter.listeners('say') // [ [Function: callback], [Function: callback] ]
+```
+
+## 仅监听一次事件
+
+EventEmitter 对象还公开了 `once()` 方法，您可以使用该方法创建一次性事件监听器。
+
+一旦触发该事件，监听器将停止监听。
+
+例如：
+
+```js
+emitter.once('say', () => {
+  console.log(`Hello`)
+})
+
+emitter.emit('say')
+emitter.emit('say') // 不会触发
+```
+
+## 删除事件监听器
+
+创建事件监听器后，可以使用 `removeListener()` 方法将其删除。
+
+为此，我们必须先引用 `on` 的回调函数，也就是将其保存在变量中。
+
+在这个例子中：
+
+```js
+emitter.on('say', () => {
+  console.log('Hello')
+})
+```
+
+提取回调：
+
+```js
+const callback = () => {
+  console.log('Hello')
+}
+
+emitter.on('say', callback)
+```
+
+以便稍后您可以调用：
+
+```js
+emitter.removeListener('say', callback)
+
+// 使用 eventNames 方法可以查看 say 事件是否被移除，这个方法下面会讲到
+emitter.eventNames()
+```
+
+Node 10 还引入 `emitter.removeListener` 的别名 `emitter.off`：
+
+```js
+emitter.off('say', callback)
+```
+
+它们做着同样的事情。
+
+您还可以使用以下方法一次性删除监听特定事件的 Event Emitter 对象的所有监听器：
+
+```js
+emitter.removeAllListeners('say')
+```
+
+## 设置 EventListener 对象的最大监听器数量
+
+默认情况下，如果为特定事件添加了 10 个以上的监听器，EventEmitter 将打印警告。例如：
+
+```js
+emitter.on('say', () => {
+  console.log('Hello')
+})
+
+emitter.on('say', () => {
+  console.log('Hello')
+})
+// 此处省略 9 个以上的监听器
+```
+
+这是一个有用的默认值，有助于查找内存泄漏。
+
+`emitter.setMaxListeners()` 方法允许修改此特定 EventEmitter 实例的限制。该值可以设置为 `Infinity`（或 `0`），表示监听器的数量不受限制。
+
+```js
+emitter.setMaxListeners(Infinity)
+```
+
+有 `get` 就有 `set`，`getMaxListeners` 方法可以 EventListener 对象的最大监听器数量。
+
+```js
+emitter.getMaxListeners(Infinity)
+```
+
+## 获取注册的事件
+
+对 EventEmitter 对象实例调用 `eventNames()` 方法，它将返回一个字符串数组，该数组表示当前 EventListener 上注册的事件：
+
+```js
+emitter.on('say', () => {
+  console.log('Hello')
+})
+
+emitter.eventNames() // [ 'say' ]
+```
+
+`listenerCount()` 返回作为参数传递的事件的监听器计数：
+
+```js
+emitter.listenerCount('say') // 1
+```
+
+## 在其他监听器之前/之后添加更多监听器
+
+如果您有多个监听器，它们的顺序可能很重要。
+
+EventEmitter 对象实例提供了一些处理顺序的方法。
+
+- 当使用 `on` 或 `addListener` 添加监听器时，它将被添加到监听器队列的开头，并最后调用。使用 `prependListener` 可以在其他监听器之前添加和调用它。
+- 当使用 `once` 添加监听器时，它将被添加到监听器队列的开头，并最后调用。使用 `prependOnceListener` 可以在其他监听器之前添加和调用它。
+
+## `newListener` 事件
+
+在将监听器添加到其内部监听器数组之前，EventEmitter 实例将触发 `newListener` 事件。
+
+为 `newListener` 事件注册的监听器将传递事件名称和对添加的监听器的引用。
+
+```js
+const EventEmitter = require('events')
+const emitter = new EventEmitter()
+
+// 仅监听一次事件，这样我们就不会永远循环
+emitter.once('newListener', (event, listener) => {
+  console.log(event, listener) // event [ƒ ()]
+  if (event === 'event') {
+    // 在前面插入新的监听器
+    emitter.on('event', () => {
+      console.log('B')
+    })
+  }
+})
+
+emitter.on('event', () => {
+  console.log('A')
+})
+emitter.emit('event')
+// B
+// A
+```
+
+我们可以看到，先打印 `B` 在打印 `A`。
+
+这是因为事件在添加监听器之前触发有一个微妙但重要的副作用：在 `newListener` 回调中注册到相同名称的任何其他监听器都会在添加过程中的监听器之前插入。
+
+## 捕获 EventEmitter 的错误事件
+
+监听 `error` 事件可以捕获 EventEmitter 的错误事件。
+
+```js
+const EventEmitter = require('events')
+const emitter = new EventEmitter()
+
+emitter.on('error', (err) => {
+  console.error('whoops! there was an error')
+})
+
+emitter.emit('error', new Error('whoops!'))
+```
+
+## 最后
+
+以上是 Events 模块处理 Node 事件的一些简单用法。详细内容请查看文档，后续会不断进行补充。
diff --git "a/Node/Node.js HTTP \345\222\214 HTTPS \346\250\241\345\235\227.md" "b/Node/Node.js HTTP \345\222\214 HTTPS \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..5202dea
--- /dev/null
+++ "b/Node/Node.js HTTP \345\222\214 HTTPS \346\250\241\345\235\227.md"	
@@ -0,0 +1,246 @@
+# Node.js HTTP 和 HTTPS 模块
+
+[http 模块](https://nodejs.org/api/http.html#http)提供了一种让 Node.js 通过 HTTP（超文本传输协议）传输数据的方法。而 [https 模块](https://nodejs.org/api/https.html#https) 通过 HTTP TLS/SSL 协议传输数据的方法，该协议是安全的 HTTP 协议。
+
+> 各种 Node HTTP 服务框架的底层原理都是离不开该模块。
+
+使用内置的 `http` 模块，我们可以快速的搭建一个简单的 HTTP 服务器。该服务器允许我们监听任意端口并提供一个回调函数，该函数将在每个传入请求时调用。
+
+回调将接收两个参数：一个 [Request 对象](https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_class_http_incomingmessage)和一个 [Response 对象](https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_class_http_serverresponse)。Request 对象将填充有关请求的有用属性，而 Response 对象将用于向客户端发送响应。
+
+示例：
+
+```js
+const http = require('http')
+const PORT = 5000
+const router = (req, res) => {
+  console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`)
+  res.setHeader('Content-Type', 'text/plain')
+  res.end('Hello World!')
+}
+
+http.createServer(router).listen(PORT)
+```
+
+这将启动一个 Web 服务器，监听端口 5000。当请求进入时，控制台将记录一条消息，其中包含当前日期、请求的方法和 URL。
+
+该数据来自参数 `req`，它是 Node 创建的 Request 对象。此 Request 对象还有一个名为 `socket` 的属性，它是较低级别的 TCP 套接字。
+
+## 属性
+
+- `http.METHODS` 属性列出了所有支持的 HTTP 方法：
+
+```bash
+> require('http').METHODS
+[ 'ACL',
+  'BIND',
+  'CHECKOUT',
+  'CONNECT',
+  'COPY',
+  'DELETE',
+  'GET',
+  'HEAD',
+  'LINK',
+  'LOCK',
+  'M-SEARCH',
+  'MERGE',
+  'MKACTIVITY',
+  'MKCALENDAR',
+  'MKCOL',
+  'MOVE',
+  'NOTIFY',
+  'OPTIONS',
+  'PATCH',
+  'POST',
+  'PROPFIND',
+  'PROPPATCH',
+  'PURGE',
+  'PUT',
+  'REBIND',
+  'REPORT',
+  'SEARCH',
+  'SUBSCRIBE',
+  'TRACE',
+  'UNBIND',
+  'UNLINK',
+  'UNLOCK',
+  'UNSUBSCRIBE'
+]
+```
+
+- `http.STATUS_CODES` 属性列出所有 HTTP 状态代码及其描述：
+
+```bash
+> require('http').STATUS_CODES
+{
+  '100': 'Continue',
+  '101': 'Switching Protocols',
+  '102': 'Processing',
+  '103': 'Early Hints',
+  '200': 'OK',
+  '201': 'Created',
+  '202': 'Accepted',
+  '203': 'Non-Authoritative Information',
+  '204': 'No Content',
+  '205': 'Reset Content',
+  '206': 'Partial Content',
+  '207': 'Multi-Status',
+  '208': 'Already Reported',
+  '226': 'IM Used',
+  '300': 'Multiple Choices',
+  '301': 'Moved Permanently',
+  '302': 'Found',
+  '303': 'See Other',
+  '304': 'Not Modified',
+  '305': 'Use Proxy',
+  '307': 'Temporary Redirect',
+  '308': 'Permanent Redirect',
+  '400': 'Bad Request',
+  '401': 'Unauthorized',
+  '402': 'Payment Required',
+  '403': 'Forbidden',
+  '404': 'Not Found',
+  '405': 'Method Not Allowed',
+  '406': 'Not Acceptable',
+  '407': 'Proxy Authentication Required',
+  '408': 'Request Timeout',
+  '409': 'Conflict',
+  '410': 'Gone',
+  '411': 'Length Required',
+  '412': 'Precondition Failed',
+  '413': 'Payload Too Large',
+  '414': 'URI Too Long',
+  '415': 'Unsupported Media Type',
+  '416': 'Range Not Satisfiable',
+  '417': 'Expectation Failed',
+  '418': "I'm a Teapot",
+  '421': 'Misdirected Request',
+  '422': 'Unprocessable Entity',
+  '423': 'Locked',
+  '424': 'Failed Dependency',
+  '425': 'Too Early',
+  '426': 'Upgrade Required',
+  '428': 'Precondition Required',
+  '429': 'Too Many Requests',
+  '431': 'Request Header Fields Too Large',
+  '451': 'Unavailable For Legal Reasons',
+  '500': 'Internal Server Error',
+  '501': 'Not Implemented',
+  '502': 'Bad Gateway',
+  '503': 'Service Unavailable',
+  '504': 'Gateway Timeout',
+  '505': 'HTTP Version Not Supported',
+  '506': 'Variant Also Negotiates',
+  '507': 'Insufficient Storage',
+  '508': 'Loop Detected',
+  '509': 'Bandwidth Limit Exceeded',
+  '510': 'Not Extended',
+  '511': 'Network Authentication Required'
+}
+```
+
+- `http.globalAgent` 指向代理对象的全局实例，它是 `http.Agent` 类的一个实例。它用于管理 HTTP 客户端的连接持久性和重用，是 Node HTTP 网络的关键组件。
+
+## 方法
+
+- `http.createServer()` 返回该类的新实例 `http.Server`。
+
+```js
+const server = http.createServer((req, res) => {
+  // 使用此回调处理每个请求
+})
+```
+
+- `http.request()` 向服务器发出 HTTP 请求，创建 `http.ClientRequest` 类的实例。
+- `http.get()` 与 `http.request()` 类似，但自动将 HTTP 方法设置为 GET，并自动调用 `req.end()`。
+
+## 类
+
+HTTP 模块提供了 5 个类：
+
+- `http.Agent`
+- `http.ClientRequest`
+- `http.Server`
+- `http.ServerResponse`
+- `http.IncomingMessage`
+
+### http.Agent
+
+Node 创建 `http.Agent` 类的全局实例。它用于管理 HTTP 客户端的连接持久性和重用，是 Node HTTP 网络的关键组件。
+
+该对象确保向服务器发出的每个请求都排队，并且重用单个套接字。
+
+它还维护一个套接字池。这是性能原因的关键。
+
+### http.ClientRequest
+
+`http.ClientRequest` 对象是在调用 `http.request()` 或 `http.get()` 调用时创建的。
+
+当接收到 `response` 响应时，将使用响应调用响应事件，并将 `http.IncomingMessage` 实例作为参数。
+
+响应返回的数据可以通过两种方式读取：
+
+- 你可以调用 `response.read()` 方法
+- 在 `response` 事件处理程序中，可以为 `data` 事件设置事件侦听器 ，以便侦听流入的数据。
+
+### http.Server
+
+此类通常在使用 `http.createServer()` 创建新服务器时实例化并返回。
+
+拥有服务器对象后，您就可以访问其方法：
+
+- `close()` 停止服务器接受新连接
+- `listen()` 启动 HTTP 服务器并监听连接
+
+### http.ServerResponse
+
+由 `http.Server` 创建，并作为第二个参数传递给它触发的 `request` 事件。
+
+在代码中通常称为 `res`：
+
+```js
+const server = http.createServer((req, res) => {
+  // res is an http.ServerResponse object
+})
+```
+
+处理程序中始终调用的方法是 `end()`，它关闭响应，消息完成，服务器可以将其发送给客户端。必须在每个响应上调用它。
+
+这些方法用于与 HTTP headers 交互：
+
+- `getHeaderNames()` 获取已设置的 HTTP headers 名称列表
+- `getHeaders()` 获取已设置的 HTTP headers 的副本
+- `setHeader('headerName', value)` 设置 HTTP headers 值
+- `getHeader('headerName')` 获取已设置的 HTTP headers
+- `removeHeader('headerName')` 删除已设置的 HTTP headers
+- `hasHeader('headerName')` 如果响应设置了该 headers，则返回 `true`
+- `headersSent()` 如果 headers 已经发送到客户端，则返回 `true`
+
+处理完 headers 后，可以通过调用 `response.writeHead()` 将它们发送到客户端，它接受 `statusCode` 作为第一个参数、可选的状态消息和 headers 对象。
+
+要在响应体中向客户端发送数据，请使用 `write()`。它将缓冲数据发送到 HTTP 响应流。
+
+如果尚未使用 `response.writeHead()` 发送 headers，则它将首先发送 headers，其中包含在请求中设置的状态代码和消息，您可以通过设置 `statusCode` 和 `statusMessage` 属性值来编辑它们：
+
+```js
+response.statusCode = 500
+response.statusMessage = 'Internal Server Error'
+```
+
+### http.IncomingMessage
+
+`http.IncomingMessage` 对象由以下方式创建：
+
+- `http.Server` 侦听 `request` 事件
+- `http.ClientRequest` 侦听 `response` 事件
+
+它可用于访问响应：
+
+- status 使用其 `statusCode` 和 `statusMessage` 方法
+- headers 使用其 `headers` 方法或 `rawHeaders`
+- HTTP 方法使用它的 `method` 方法
+- HTTP 版本使用 `httpVersion` 方法
+- URL 使用 `url` 方法
+- 底层 socket 使用 `socket` 方法
+
+由于 `http.IncomingMessage` 实现了可读的流接口，因此使用流访问数据。
diff --git "a/Node/Node.js Net \346\250\241\345\235\227.md" "b/Node/Node.js Net \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..88ed1ab
--- /dev/null
+++ "b/Node/Node.js Net \346\250\241\345\235\227.md"	
@@ -0,0 +1,49 @@
+# Node.js Net 模块
+
+[`net` 模块](https://nodejs.org/api/net.html#net)提供了一种创建 TCP 服务器和 TCP 客户端的方法。它是 Node.js 通讯功能实现的基础。
+
+`net` 模块主要包含两部分：
+
+- [`net.Server`](https://nodejs.org/api/net.html#class-netserver) 用于创建 TCP 或 IPC 服务器。
+- [`net.Socket`](https://nodejs.org/api/net.html#class-netsocket) 对象是 TCP 或 UNIX Socket 的抽象。`net.Socket` 实例实现了一个双工流接口，可以在用户创建客户端（使用 `connect()`）时使用，或者由 Node 创建它们，并通过 `connection` 服务器事件传递给用户。
+
+它们各自都实现了很多属性和方法，详细查阅文档。
+
+我们在建立服务器时会使用到的 `http.createServer`，它是在 `net.createServer` 方法的基础上建立的。以下是一个简单的示例：
+
+```js
+// server.js
+const net = require('net')
+const port = 8080
+const server = net.createServer((connection) => {
+  console.log('client connected')
+  connection.on('end', () => {
+    console.log('客户端关闭连接')
+  })
+  connection.write('Hello Node.js!')
+  connection.pipe(connection)
+})
+
+server.listen(port, () => {
+  console.log(`App listening on port ${port}`)
+})
+```
+
+`client.js` 文件：
+
+```js
+const net = require('net')
+
+const client = net.connect({ port: 8080 }, () => {
+  console.log('连接到服务器！')
+})
+
+client.on('data', (data) => {
+  console.log(data.toString())
+  client.end()
+})
+
+client.on('end', () => {
+  console.log('断开与服务器的连接')
+})
+```
diff --git "a/Node/Node.js OS \346\250\241\345\235\227.md" "b/Node/Node.js OS \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..2783266
--- /dev/null
+++ "b/Node/Node.js OS \346\250\241\345\235\227.md"	
@@ -0,0 +1,38 @@
+# Node.js OS 模块
+
+[OS 模块](https://nodejs.org/api/os.html)提供有关计算机操作系统的信息。
+
+获取有关计算机操作系统的信息：
+
+```js
+const os = require('os')
+
+console.log('Platform: ' + os.platform()) // Platform: win32
+console.log('Architecture: ' + os.arch()) // Architecture: x64
+console.log('total memory : ' + os.totalmem() + ' bytes.') // total memory : 31194900400 bytes.
+console.log('free memory : ' + os.freemem() + ' bytes.') // free memory : 30666943900 bytes.
+```
+
+`os` 提供的主要方法：
+
+- `os.platform()` 操作系统名，例如：`darwin`、`freebsd`、`linux`、`openbsd`、`win32` 等
+- `os.arch()` 操作系统 CPU 架构
+- `os.totalmem()` 返回操作系统中可用总内存的字节数
+- `os.freemem()` 返回操作系统中可用空闲内存的字节数
+- `os.arch()` 返回标识底层架构的字符串，如 `arm`、`x64` 和 `arm64`
+- `os.cpus()` 返回有关系统上可用 CPU 的信息
+- `os.userInfo()` 返回有关当前用户的信息
+- `os.uptime()` 返回计算机自上次重新启动以来已运行的秒数
+- `os.type()` 识别操作系统：Linux、macOS、Windows
+- `os.tmpdir()` 返回分配的临时文件夹的路径
+- `os.release()` 返回一个标识操作系统版本号的字符串
+- `os.networkInterfaces()` 返回系统上可用网络接口的详细信息
+- `os.hostname()` 返回主机名
+- `os.homedir()` 返回当前用户主目录的路径
+
+另外，
+
+- `os.constants.signals` 告诉我们所有与处理进程信号相关的常量，如 `SIGHUP`、`SIGKILL` 等。
+- `os.constants.errno` 设置错误报告的常量，如 `EADDRINUSE`、`EOVERFLOW` 等。
+
+有关这些操作系统常量的内容，可以查阅 [OS constants](https://nodejs.org/api/os.html#os-constants)。
diff --git "a/Node/Node.js assert \346\250\241\345\235\227.md" "b/Node/Node.js assert \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..cd5c963
--- /dev/null
+++ "b/Node/Node.js assert \346\250\241\345\235\227.md"	
@@ -0,0 +1,62 @@
+# Node.js assert 模块
+
+[`assert` 模块](https://nodejs.org/api/assert.html)提供了一组用于验证不变量的断言函数。
+
+该模块用于测试 Node.js 应用程序中功能的表达式。如果测试结果返回 `false`，`assert` 将抛出错误并停止程序。您可以将 `assert` 模块与 [Mocha](https://mochajs.org/) 和 [Chai](https://github.com/chaijs/chai) 等单元测试工具结合使用。
+
+## 什么是不变量？
+
+不变量是需要在程序中的某个点返回 `true` 的表达式或条件。让我们仔细看看下面的表达式：
+
+```js
+let a = 5
+let b = 3
+let correct = a > b
+console.log(correct)
+```
+
+在终端或 Bash 上运行时，应该返回 `true`。如果由于某种原因，上面的应用程序返回 `false`，并且有其他一些表达式依赖于它，该怎么办？
+
+如果我们将大于号 `>` 更改为 `<`，并运行此代码，我们将得到 `false`。让我们想象一下，上面符号的改变是一个错误，程序会因为这个错误返回一个意外的结果。开发团队如何追踪这个错误并确保不会再次发生？
+
+上面的表达式是一个不变量的例子。为了保证代码按预期返回 `true`，Node.js 开发团队使用 `assert` 模块测试表达式。
+
+## 严格断言模式和传统断言模式
+
+严格模式下的断言涉及使用严格相等比较方法来验证不变量。在严格断言模式下，非严格方法的行为与其相对严格的方法相同。
+
+例如，`assert.deepEqual()` 的行为类似于 `assert.deepStrictEqual()`，而 `assert.notEqual()` 的行为类似于 `assert.notStrictEqual()`。
+
+两种模式如下：
+
+```js
+// 严格断言模式
+const assert = require('assert').strict
+const assert = require('assert/strict')
+
+// 旧版断言模式
+const assert = require('assert')
+```
+
+在旧模式中，不变量的比较涉及抽象相等比较的使用。建议始终使用严格模式来比较不变量的实际值和预期值。
+
+以下是它们的两种模式的方法。
+
+## 断言方法
+
+[严格断言模式](https://nodejs.org/api/assert.html#strict-assertion-mode)：
+
+- `assert.deepStrictEqual (actual, expected[, message])` 方法
+- `assert.fail([message])` 方法
+- `assert.ifError(value)` 方法
+- `assert.doesNotMatch(string, regexp[, message])` 方法
+- `assert.doesNotReject(asyncFn[, error][, message])` 方法
+
+[传统断言模式](https://nodejs.org/api/assert.html#legacy-assertion-mode)：
+
+- `assert.deepEqual(actual, expected[, message])` 方法
+- `assert.equal(actual, expected[, message])` 方法
+- `assert.notEqual(actual, expected[, message])` 方法
+- `assert.notDeepEqual(actual, expected[, message])` 方法
+
+详细示例文档都有，自己看去。
diff --git "a/Node/Node.js path \346\250\241\345\235\227.md" "b/Node/Node.js path \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..b2cb052
--- /dev/null
+++ "b/Node/Node.js path \346\250\241\345\235\227.md"	
@@ -0,0 +1,150 @@
+# Node.js path 模块
+
+[`path` 模块](https://nodejs.org/api/path.html)是一个内置模块，可帮助你以独立于操作系统的方式使用文件系统路径。如果要构建支持 OSX、Linux 和 Windows 的 CLI 工具，则 `path` 模块是必不可少的。
+
+即使你正在构建一个只在 Linux 上运行的后端服务，`path` 模块仍然有助于在操作路径时避免边缘情况。
+
+下面我们来介绍 `path` 模块的基本用法，以及为什么你应该使用 `path` 模块而不是将路径操作为字符串。
+
+## 在 Node 中使用 `path` 模块
+
+`path` 模块中最常用的方法是 `path.join()`。该方法将一个或多个路径段合并为一个字符串，如下所示：
+
+```js
+const path = require('path')
+
+path.join('/path', 'to', 'test.txt') // '/path/to/test.txt'
+```
+
+你可能想知道为什么要使用 `path.join()` 方法而不是字符串拼接。
+
+```js
+'/path' + '/' + 'to' + '/' + 'test.txt' // '/path/to/test.txt'
+;['/path', 'to', 'test.txt'].join('/') // '/path/to/test.txt'
+```
+
+原因主要有两个：
+
+- **对于 Windows 支持**。Windows 使用反斜杠（`\`）而不是正斜杠（`/`）作为路径分隔符。`path.join()` 会为我们处理此问题。因为在 Linux 和 OSX 上，`path.join('data', 'test.txt')` 返回 `data/test.txt`，而在 Windows 上返回 `'data\\test.txt'`。
+- **用于处理边缘情况**。在处理文件系统路径时，会出现许多边缘情况。例如，如果你尝试手动拼接两个路径，可能会意外地出现重复的路径分隔符。`path.join()` 方法为我们处理开头和结尾的斜杠，如下所示：
+
+```js
+path.join('data', 'test.txt') // 'data/test.txt'
+path.join('data', '/test.txt') // 'data/test.txt'
+path.join('data/', 'test.txt') // 'data/test.txt'
+path.join('data/', '/test.txt') // 'data/test.txt'
+```
+
+## 常用的 `path` 方法
+
+`path` 模块还具有几个用于提取路径组件的方法，例如文件扩展名或目录。
+
+`path.extname()` 方法以字符串形式返回文件扩展名：
+
+```js
+path.extname('/path/to/test.txt') // '.txt'
+```
+
+就像连接两条路径一样，获取文件扩展名比最初看起来要复杂。如果 `path` 以 `.` 为结尾，将返回 `.`。如果文件无扩展名，又不以 `.` 结尾，或文件没有扩展名，将返回空值。
+
+```js
+path.extname('/path/to/index.') // '.'
+path.extname('/path/to/README') // ''
+path.extname('/path/to/.gitignore') // ''
+```
+
+`path` 模块还有 `path.basename()` 和 `path.dirname()` 方法，分别获取文件名（包括扩展名）和文件目录。
+
+```js
+path.basename('/path/to/test.txt') // 'test.txt'
+path.dirname('/path/to/test.txt') // '/path/to'
+```
+
+`path.parse()` 方法返回一个对象，该对象包含分为五个不同组合的路径，包括扩展名和目录。
+
+```js
+path.parse('/path/to/test.txt')
+
+/*
+{
+  root: '/',
+  dir: '/path/to',
+  base: 'test.txt',
+  ext: '.txt',
+  name: 'test'
+}
+*/
+```
+
+## 使用 `path.relative()`
+
+像 `path.join()` 和 `path.extname()` 这样的方法涵盖了大多数使用文件路径的用例。但是 `path` 模块有几个更高级的方法，例如 `path.relative()`。
+
+`path.relative(from, to)` 方法根据当前工作目录返回从 `from` 到 `to` 的相对路径。如果 `from` 和 `to` 都解析为相同的路径，则返回零长度字符串。
+
+```js
+// 返回相对于第一条路径的第二条路径的路径
+path.relative('/app/views/home.html', '/app/layout/index.html') // '../../layout/index.html'
+```
+
+如果给定了相对于一个目录的路径，但需要相对于另一个目录的路径，则 `path.relative()` 方法非常有用。例如，流行的文件系统监听库 [Chokidar](https://www.npmjs.com/package/chokidar) 提供了相对于监听目录的路径。
+
+```js
+const watcher = chokidar.watch('mydir')
+
+// 如果用户添加 mydir/path/to/test.txt，则会打印 mydir/path/to/test.txt
+watcher.on('add', (path) => console.log(path))
+```
+
+这就是为什么大量的使用 [Chokidar](https://github.com/paulmillr/chokidar) 工具。如常见的 Gatsby 或 Webpack，其在内部也大量使用 `path.relative()` 方法。
+
+> 如果你好奇 Chokidar 这些监听文件变化的库内部是如何实现的，想要查看其源码，可以先阅读[精读《如何利用 Nodejs 监听文件夹》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/59.%E7%B2%BE%E8%AF%BB%E3%80%8A%E5%A6%82%E4%BD%95%E5%88%A9%E7%94%A8%20Nodejs%20%E7%9B%91%E5%90%AC%E6%96%87%E4%BB%B6%E5%A4%B9%E3%80%8B.md)这篇文章。
+
+例如，[Gatsby 使用 `path.relative()` 方法帮助同步静态文件目录](https://github.com/gatsbyjs/gatsby/blob/54d4721462b9303fed723fdcb15ac5d72e103778/packages/gatsby/src/utils/get-static-dir.ts#L50-L56)。
+
+```js
+export const syncStaticDir = (): void => {
+  const staticDir = nodePath.join(process.cwd(), `static`)
+  chokidar
+    .watch(staticDir)
+    .on(`add`, (path) => {
+      const relativePath = nodePath.relative(staticDir, path)
+      fs.copy(path, `${process.cwd()}/public/${relativePath}`)
+    })
+    .on(`change`, (path) => {
+      const relativePath = nodePath.relative(staticDir, path)
+      fs.copy(path, `${process.cwd()}/public/${relativePath}`)
+    })
+}
+```
+
+现在，假设用户向 `static` 目录添加了一个新文件 `main.js`。Chokidar 调用 `on('add')` 事件处理程序，路径设置为 `static/main.js`。但是，当你将文件复制到 `/public` 时，不需要额外的 `static/`。
+
+调用 `path.relative('static', 'static/main.js')` 返回 `static/main.js` 相对于 `static` 的路径，这正是你想要将 `static` 的内容复制到 `public` 的路径。
+
+## 跨操作系统路径和 URL
+
+默认情况下，`path` 模块会根据 Node 进程运行的操作系统自动在 POSIX（OSX、Linux）和 Windows 模式之间切换。
+
+但是，`path` 模块确实可以在 POSIX 上使用 Windows `path` 模块，反之亦然。`path.posix` 和 `path.win32` 属性分别包含 `path` 模块的 POSIX 和 Windows 版本。
+
+```js
+// 返回 'path\to\test.txt'，与操作系统无关
+path.win32.join('path', 'to', 'test.txt')
+
+// 返回 'path/to/test.txt'，与操作系统无关
+path.posix.join('path', 'to', 'test.txt')
+```
+
+在大多数情况下，根据检测到的操作系统自动切换 `path` 模块是正确的行为。但是，使用 `path.posix` 和 `path.win32` 属性对于总是希望输出 Windows 或 Linux 风格路径的测试或应用程序可能会有所帮助。
+
+例如，一些应用程序使用 `path.join()` 和 `path.extname()` 等方法处理 URL 路径。
+
+```js
+// 'https://example.com/api/v2/me'
+'https://example.com/' + path.join('api', 'v2', 'me')
+```
+
+这种方法适用于 Linux 和 OSX，但如果有人试图将你的应用程序部署到一些无服务器上会发生什么？
+
+你最终会得到 `https://example.com/api\v2\me`，这不是有效的 URL！如果使用 `path` 模块操作 URL，则应使用 `path.posix`。
diff --git "a/Node/Node.js readline \346\250\241\345\235\227.md" "b/Node/Node.js readline \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..fc5f66b
--- /dev/null
+++ "b/Node/Node.js readline \346\250\241\345\235\227.md"	
@@ -0,0 +1,104 @@
+# Node.js readline 模块
+
+[`readline` 模块](https://nodejs.org/api/readline.html#readline)提供了一种读取数据流的方法，一次一行。
+
+它有两种 API：
+
+```js
+// 基于 promise 的 API
+const readline = require('readline/promises')
+// 回调和同步的 API
+const readline = require('readline')
+```
+
+以下示例是 `readline` 模块的基本用法：
+
+```js
+const readline = require('readline')
+const { stdin: input, stdout: output } = require('process')
+
+const rl = readline.createInterface({ input, output })
+
+rl.question('你觉得 Node.js 怎么样？', (answer) => {
+  console.log(`感谢您的宝贵反馈: ${answer}`)
+
+  rl.close()
+})
+```
+
+步骤如下：
+
+- 使用 `readline` 的 `createInterface` 方法创建了一个接口实例
+- 调用实例的[相关方法](https://nodejs.org/api/readline.html#class-interfaceconstructor)，如 `question` 方法输入
+- 监听 `readline` 的 `close` 事件
+
+一旦执行，Node.js 应用程序将不会终止，直到 `readline.Interface` 关闭，因为接口在输入流上等待接收数据。
+
+当所有操作的完成时，我们使用 `close` 方法来结束程序。`close` 方法会触发 `close` 事件：
+
+```js
+rl.on('close', () => {
+  console.log('退出程序')
+  process.exit(0)
+})
+```
+
+## `readline` 属性和方法
+
+- `clearLine()` 清除指定流的当前行
+- `clearScreenDown()` 从当前光标向下位置清除指定的流
+- `createInterface()` 创建一个接口对象
+- `cursorTo()` 将光标移动到指定位置
+- `emitKeypressEvents()` 为指定流触发按键事件
+- `moveCursor()` 将光标移动到相对于当前位置的新位置
+
+详细 API 请查阅[文档](https://nodejs.org/api/readline.html#readline)。
+
+## 示例：打开一个文件并逐行返回内容
+
+使用 [`line` 事件](https://nodejs.org/api/readline.html#event-line)，逐行读取文件内容：
+
+```js
+const readline = require('readline')
+const fs = require('fs')
+
+const rl = readline.createInterface({
+  input: fs.createReadStream('./package.json')
+})
+
+let lineno = 0
+rl.on('line', (line) => {
+  lineno++
+  console.log(`Line number ${lineno}': ${line}`)
+})
+```
+
+## 示例：回文扫描器
+
+```js
+const readline = require('readline')
+
+const { stdin: input, stdout: output } = require('process')
+const rl = readline.createInterface({
+  input,
+  output
+})
+
+function isPalindrome(str) {
+  const result = str
+    .replace(/[\W_]/g, '')
+    .toLowerCase()
+    .split('')
+    .reverse()
+    .join('')
+  if (result == str.toLowerCase()) return true
+  else return false
+}
+
+console.log('------- 回文扫描器 ------- ')
+console.log('输入回文: ')
+rl.on('line', (input) => {
+  console.log(`${input} ${isPalindrome(input) ? '是' : '不是'}回文`)
+  console.log('输入回文: ')
+})
+```
diff --git "a/Node/Node.js \344\270\255\347\232\204 util.promisify() \346\226\271\346\263\225.md" "b/Node/Node.js \344\270\255\347\232\204 util.promisify() \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..420238e
--- /dev/null
+++ "b/Node/Node.js \344\270\255\347\232\204 util.promisify() \346\226\271\346\263\225.md"	
@@ -0,0 +1,116 @@
+# Node.js 中的 util.promisify() 方法
+
+Node.js 内置的 `util` 模块有一个 [`promisify()` 方法](https://nodejs.org/api/util.html#util_util_promisify_original)，该方法将基于回调的函数转换为基于 Promise 的函数。这使您可以将 Promise 链和 `async/await` 与基于回调的 API 结合使用。
+
+例如，Node.js 的 `fs` 模块在读取文件时，需要使用回调：
+
+```js
+const fs = require('fs')
+
+fs.readFile('./package.json', function callback(err, buf) {
+  const obj = JSON.parse(buf.toString('utf8'))
+  console.log(obj.name) // 'Example' -> package.json 包名
+})
+```
+
+我们可以使用 `util.promisify()` 将 `fs.readFile()` 的回调函数转换为返回 Promise 函数：
+
+```js
+const fs = require('fs')
+const util = require('util')
+
+// 将 fs.readFile() 转换为一个接受相同参数但返回 Promise 的函数。
+const readFile = util.promisify(fs.readFile)
+
+// 现在可以将 readFile() 与 await 一起使用！
+const buf = await readFile('./package.json')
+
+const obj = JSON.parse(buf.toString('utf8'))
+console.log(obj.name) // 'Example'
+```
+
+## promisify 是如何工作的？
+
+`util.promisify()` 在后台是如何工作的？npm 上有一个 [polyfill](https://www.npmjs.com/package/util.promisify)，您可以在这里阅读[完整的实现](https://github.com/ljharb/util.promisify/blob/master/implementation.js)。您也可以在这里找到 [Node.js 的实现](https://github.com/nodejs/node/blob/master/lib/internal/util.js#L277-L322)，不过为了便于理解，polyfill 更易于阅读。
+
+`util.promisify()` 背后的关键思想是[向传入的参数添加回调函数](https://github.com/ljharb/util.promisify/blob/40a839a8db3d79699688d27f6613a827056428c8/implementation.js#L58-L59)。该回调函数解析或拒绝 promisified 函数返回的 Promise。
+
+为了便于理解，下面是一个非常简化的 `util.promisify()` 自定义实现示例：
+
+```js
+const fs = require('fs')
+
+// util.promisify() 的简化实现。不包括所有情况，不要在 prod 环境中使用此选项！
+function promisify(fn) {
+  return function () {
+    const args = Array.prototype.slice.call(arguments)
+    return new Promise((resolve, reject) => {
+      fn.apply(
+        this,
+        [].concat(args).concat([
+          (err, res) => {
+            if (err != null) {
+              return reject(err)
+            }
+            resolve(res)
+          }
+        ])
+      )
+    })
+  }
+}
+
+// 将 fs.readFile() 转换为一个接受相同参数但返回 Promise 的函数。
+const readFile = promisify(fs.readFile)
+
+// 现在可以将 readFile() 与 await 一起使用！
+const buf = await readFile('./package.json')
+
+const obj = JSON.parse(buf.toString('utf8'))
+console.log(obj.name) // 'Example'
+```
+
+那么这是什么意思呢？首先，`util.promisify()`向传入的参数添加 1 个额外参数，然后使用这些新参数调用原始函数。这意味着底层函数需要支持该数量的参数。因此，如果您要调用`myFn()`具有 2 个类型参数的 promisified 函数 `[String, Object]`，请确保原始函数支持`[String, Object, Function]`。
+
+那么这意味着什么呢？首先，`util.promisify()` 向传入的参数添加一个额外参数，然后使用这些新参数调用原始函数。这意味着基础函数需要支持该数量的参数。因此，如果您使用 `[String, Object]` 类型的 2 个参数调用 promisified 函数 `myFn()`，请确保原始函数支持 `[String, Object, Function]`。
+
+其次，`util.promisify()` 对函数上下文（`this`）有影响。
+
+## 丢失上下文
+
+丢失上下文（`this`）意味着函数调用以错误的值结束。丢失上下文是转换函数的常见问题：
+
+```js
+class MyClass {
+  myCallbackFn(cb) {
+    cb(null, this)
+  }
+}
+
+const obj = new MyClass()
+const promisified = require('util').promisify(obj.myCallbackFn)
+
+const context = await promisified()
+console.log(context) // 打印 undefined 而不是 MyClass 实例！
+```
+
+请记住，`this` 包含函数被调用时的属性的任何对象。因此，您可以通过将 promisified 函数设置为同一对象的属性来保留上下文：
+
+```js
+class MyClass {
+  myCallbackFn(cb) {
+    cb(null, this)
+  }
+}
+
+const obj = new MyClass()
+// 保留上下文，因为 promisified 是 obj 的属性
+obj.promisified = require('util').promisify(obj.myCallbackFn)
+
+const context = await obj.promisified()
+console.log(context === obj) // true
+```
+
+## 更多资料
+
+更多详细内容可以参阅 [Axel Rauschmayer 的文章](http://2ality.com/2017/05/util-promisify.html)。
diff --git "a/Node/Node.js \346\226\207\344\273\266\347\263\273\347\273\237\346\250\241\345\235\227.md" "b/Node/Node.js \346\226\207\344\273\266\347\263\273\347\273\237\346\250\241\345\235\227.md"
new file mode 100644
index 0000000..48f5868
--- /dev/null
+++ "b/Node/Node.js \346\226\207\344\273\266\347\263\273\347\273\237\346\250\241\345\235\227.md"	
@@ -0,0 +1,409 @@
+# Node.js 文件系统模块
+
+## 了解如何使用 Node.js 中的 `fs` 模块
+
+[文件系统模块](https://nodejs.org/api/fs.html)（简称 `fs`）允许我们访问计算机上的文件系统并与之交互。
+
+使用 `fs` 模块，我们可以执行以下操作：
+
+- 创建文件和目录
+- 修改文件和目录
+- 删除文件和目录
+- 读取文件和目录的内容
+
+> **建议**：文件系统模块比较复杂，建议查看[官方文档](https://nodejs.org/docs/latest-v16.x/api/fs.html)，你可以看到所有的方法。
+
+本文将向您介绍最常见和最有用的 `fs` 方法。事不宜迟，让我们看看这些方法是什么。
+
+## 如何使用 `fs`
+
+文件系统模块是一个核心的 Node.js 模块。这意味着我们不必安装它。我们唯一需要做的就是将 `fs` 模块导入到自己的文件中。
+
+因此，在文件顶部添加：
+
+```js
+const fs = require('fs')
+```
+
+现在，我们可以使用前缀 `fs` 从文件系统模块调用任何方法。
+
+或者，我们可以只从 `fs` API 导入所需的方法，如下所示：
+
+```js
+const { writeFile, readFile } = require('fs')
+```
+
+> **注意**：为了方便起见，我们还需要导入 `path` 模块。它是另一个核心 Node.js 模块，它允许我们使用文件和目录路径。
+
+导入 `fs` 模块后，在文件中添加：
+
+```js
+const path = require('path')
+```
+
+使用文件系统模块时，`path` 模块不是必需的。但它对我们有很大的帮助！
+
+## 同步与异步
+
+需要注意的是，默认情况下，所有 `fs` 方法都是异步的。但是，我们可以通过在方法末尾添加 `Sync` 来使用同步版本。
+
+例如，`writeFile` 方法改为 `writeFileSync`。
+
+同步方法有两个缺点：
+
+- 同步方法同步的执行代码，因此它们阻塞了主线程。例如：我使用 `fs.readdirSync` 同步读取目录下的所有文件，它将阻塞后面代码的运行，直到读取目录完成。阻塞 Node.js 中的主线程被认为是不好的做法，我们不应该这么做
+- 还有，同步代码需要使用 `try...catch` 捕获错误
+
+因此，以下都使用文件系统模块中的异步方法。
+
+## 写入文件
+
+要从 Node.js 应用程序写入文件，请使用 `writeFile` 方法。
+
+`writeFile` 方法至少接受以下参数：
+
+- 文件名
+- 内容
+- 回调
+
+如果指定的文件已经存在，它会将旧内容替换为您作为参数提供的内容。如果指定的文件不存在，则创建一个新文件。
+
+导入 `fs` 和 `path` 模块后，在文件中编写以下代码：
+
+```js
+fs.writeFile('content.txt', 'All work and no play makes Jack a dull boy!', (err) => {
+  if (err) throw err
+
+  process.stdout.write('创建成功!')
+})
+```
+
+上面的代码创建了一个名为 `content.txt` 的新文件，并添加了文本 `All work and no play makes Jack a dull boy!` 作为内容。如果存在任何错误，回调函数将抛出该错误。否则，它将向控制台输出文件创建成功。
+
+假设您将文件命名为 `fs-Demo.js`，请转到终端并运行命令 `node fs-Demo.js`。运行该命令后，您应该会看到具有指定内容的新文件。
+
+`writeFile` 还有其他变体，例如：
+
+- `fs.writeFileSync` — 同步写入文件
+- `fs.promises.writeFile` — 使用基于 Promise 的 API 写入文件
+
+## 从文件中读取
+
+在读取文件之前，需要创建并存储文件的路径。`path` 模块的路径在这里很方便。
+
+使用 `join` 模块中的 `path` 方法，您可以创建文件路径，如下所示：
+
+```js
+const filePath = path.join(process.cwd(), 'content.txt')
+```
+
+第一个参数 `process.cwd()` 返回当前工作目录。现在您已经有了文件路径，可以读取文件的内容了。
+
+在文件中编写以下代码：
+
+```js
+fs.readFile(filePath, (error, content) => {
+  if (error) throw error
+
+  process.stdout.write(content)
+})
+```
+
+`readFile` 方法至少接受两个参数：
+
+- 文件的路径
+- 回调
+
+如果有错误，它会抛出一个错误。否则，它会在终端中输出文件内容。
+
+如果您转到终端并运行命令 `node fs-Demo`，您应该会在终端中看到文件内容。
+
+`readFile` 还有其他变体，例如：
+
+- `fs.readFileSync` — 同步写入文件
+- `fs.promises.readFile` — 使用基于 Promise 的 API 写入文件
+
+## 读取目录中的文件列表
+
+读取目录中的文件列表与读取文件内容非常相似。但是，不是传递文件路径，而是传递当前工作目录（我们可以传递任何其他目录）。
+
+然后，传递一个回调函数来处理响应。在文件中编写以下代码：
+
+```js
+fs.readdir(process.cwd(), (error, files) => {
+  if (error) throw error
+
+  console.log(files)
+})
+```
+
+到目前为止，您只使用 `process.stdout.write` 将内容输出到终端。但是，您可以简单地使用 `console.log`，就像上面的代码片段一样。
+
+如果运行该应用程序，我们应该会得到一个包含目录中所有文件的数组。
+
+它同有一个同步 `readdirSync` 方法。
+
+## 删除文件
+
+文件系统模块有一种方法，允许您删除文件。但是，需要注意的是，它只适用于文件，不适用于目录。
+
+当以文件路径作为参数调用 `unlink` 方法时，它将删除该文件。将以下代码段添加到文件中：
+
+```js
+fs.unlink(filePath, (error) => {
+  if (error) throw error
+
+  console.log('文件已删除!')
+})
+```
+
+如果您重新运行代码，您的文件将被删除！
+
+## 创建目录
+
+我们可以使用 `mkdir` 方法异步创建目录。在文件中编写以下代码：
+
+```js
+fs.mkdir(`${process.cwd()}/myFolder/secondFolder`, { recursive: true }, (err) => {
+  if (err) throw err
+
+  console.log('已成功创建文件夹!')
+})
+```
+
+首先，要在当前工作目录中创建一个新文件夹。如前所述，您可以使用 `cwd()` 方法从 `process` 对象获取当前工作目录。
+
+然后，传递要创建的一个或多个文件夹。但是，这并不意味着您必须在当前工作目录中创建新文件夹。你可以在任何地方创建它们。
+
+现在，第二个参数是递归选项。如果未将其设置为 `true`，则无法创建多个文件夹。如果将 `recursive` 选项设置为 `false`，上述代码将给出一个错误。**试试看，多尝试总是好的！**
+
+但是，如果您只想创建一个文件夹，则无需将 `recursive` 选项设置为 `true`。
+
+以下代码可以正常工作！
+
+```js
+fs.mkdir(`${process.cwd()}/myFolder`, (err) => {
+  if (err) throw err
+
+  console.log('已成功创建文件夹!')
+})
+```
+
+因此，我想强调使用 `recursive`。如果要在文件夹中创建文件夹，则需要将其设置为 `true`。它将创建所有文件夹，即使它们不存在。
+
+另一方面，如果您只想创建一个文件夹，可以将其保留为 `false`。
+
+## 删除目录
+
+删除目录的逻辑类似于创建目录。如果您查看为创建目录而编写的代码和下面的代码，您会发现相似之处。
+
+因此，在文件中编写以下代码：
+
+```js
+fs.rmdir(`${process.cwd()}/myFolder/`, { recursive: true }, (err) => {
+  if (err) throw err
+
+  console.log('已成功删除文件夹!')
+})
+```
+
+使用文件系统模块中的 `rmdir` 方法，并传递以下参数：
+
+- 要删除的目录
+- 递归属性
+- 回调
+
+如果将 `recursive` 属性设置为 `true`，它将删除文件夹及其内容。请务必注意，如果文件夹中包含内容，则**需要将其设置为 `true`**。否则，您将得到一个错误。
+
+以下代码段仅在文件夹为空时有效：
+
+```js
+fs.rmdir(`${process.cwd()}/myFolder/`, (err) => {
+  if (err) throw err
+
+  console.log('已成功删除文件夹!')
+})
+```
+
+如果 `myFolder` 中有其他文件和/或文件夹，如果未传递 `{ recursive: true }`，则会出现错误。
+
+## 目录/文件重命名
+
+使用 `fs` 模块，您可以重命名目录和文件。下面的代码片段显示了如何使用 `rename` 方法进行此操作。
+
+```js
+// 重命名目录
+fs.rename(
+  `${process.cwd()}/myFolder/secondFolder`,
+  `${process.cwd()}/myFolder/newFolder`,
+  (err) => {
+    if (err) throw err
+
+    console.log('目录重命名!')
+  }
+)
+
+// 重命名文件
+fs.rename(`${process.cwd()}/content.txt`, `${process.cwd()}/newFile.txt`, (err) => {
+  if (err) throw err
+
+  console.log('文件重命名!')
+})
+```
+
+您可以看到 `rename` 方法包含三个参数：
+
+- 第一个参数是现有的文件夹/文件
+- 第二个参数是新名称
+- 回调
+
+因此，要重命名文件或目录，您需要传递当前文件/目录的名称和新名称。运行应用程序后，应更新目录/文件的名称。
+
+> **需要注意的是**，如果新路径已经存在（例如，文件/文件夹的新名称），它将被覆盖。因此，请确保不要错误地覆盖现有文件/文件夹。
+
+## 向文件中添加内容
+
+使用文件系统模块，您还可以向现有文件添加新内容。`appendFile` 方法允许您这样做。
+
+如果比较 `writeFile` 和 `appendFile` 这两种方法，我们可以发现它们是相似的。传递文件路径、内容和回调。
+
+```js
+fs.appendFile(filePath, '\nAll work and no play makes Jack a dull boy!', (err) => {
+  if (err) throw err
+
+  console.log('All work and no play makes Jack a dull boy!')
+})
+```
+
+上面的代码片段演示了如何向现有文件添加新内容。如果运行应用程序并打开文件，您应该会看到其中的新内容。
+
+## 读取文件的详细信息
+
+每个文件都带有一组细节，我们可以使用 Node.js 来检查这些细节。
+
+`stat` 方法检查给定路径文件的详细信息：
+
+```js
+const { stat } = require('fs')
+
+stat('./file.txt', (err, stats) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  // do something ...
+})
+```
+
+同步方法 `statSync` 会阻塞线程，直到文件统计信息准备好：
+
+```js
+const { statSync } = require('fs')
+
+try {
+  const stats = statSync('./file.txt')
+} catch (err) {
+  console.error(err)
+}
+```
+
+文件信息包含在 `stats` 变量中。包括：
+
+- 如果文件是目录或文件，则使用 `stats.isFile()` 和 `stats.isDirectory()`
+- 如果文件是符号链接，则使用 `stats.isSymbolicLink()`
+- 文件大小（以字节为单位），使用 `stats.size`
+
+还有其他高级方法，但在日常工作中大部分内容就是这些：
+
+```js
+const { stat } = require('fs')
+
+stat('./file.txt', (err, stats) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  stats.isFile() // true
+  stats.isDirectory() // false
+  stats.isSymbolicLink() // false
+  stats.size //1024000 == 1MB
+})
+```
+
+## 检查文件是否存在
+
+`fs.exists` 已经废弃，建议使用 `fs.access`：
+
+```js
+const { access, constants } = require('fs')
+
+const file = 'package.json'
+
+// 检查当前目录中是否存在该文件
+access(file, constants.F_OK, (err) => {
+  console.log(`${file} ${err ? '不存在' : '存在'}`)
+})
+```
+
+## stat() 与 fstat() 的区别
+
+- `fs.stat` 接收的第一个参数是一个文件路径字符串
+- `fs.fstat` 接收的是一个文件描述符
+
+## readFile() 与 createReadStream() 的区别
+
+- `readFile` 方法异步读取文件的全部内容，并存储在内存中，然后再传递给用户
+- `createReadStream` 使用一个可读的流，逐块读取文件，而不是全部存储在内存中
+
+与 `readFile` 相比，`createReadStream` 使用更少的内存和更快的速度来优化文件读取操作。如果文件相当大，用户不必等待很长时间直到读取整个内容，因为读取时会先向用户发送小块内容。
+
+## watch() 与 watchFile() 的区别
+
+二者主要用来监听文件变动：
+
+- `fs.watch` 利用操作系统原生机制来监听，可能不适用网络文件系统
+- `fs.watchFile` 则是定期检查文件状态变更，适用于网络文件系统，但是相比 `fs.watch` 有些慢，因为不是实时机制
+
+## 截断文件内容
+
+[`ftruncate`](https://nodejs.org/api/fs.html#fsftruncatefd-len-callback) 用于截断文件的内容。
+
+语法：
+
+```js
+fs.ftruncate(fd, len, callback)
+```
+
+`close` 方法接受以下参数：
+
+- `fd` — 文件 `fs.open()` 方法返回的文件描述符。
+- `len` — 文件的长度，在此长度之后文件将被截断。
+- `callback` — 回调函数，它不获取任何参数，除非给完成回调一个可能的异常。
+
+截断文件内容示例：
+
+```js
+const { open, close, ftruncate } = require('node:fs')
+
+function closeFd(fd) {
+  close(fd, (err) => {
+    if (err) throw err
+  })
+}
+
+open('temp.txt', 'r+', (err, fd) => {
+  if (err) throw err
+
+  try {
+    ftruncate(fd, 4, (err) => {
+      closeFd(fd)
+      if (err) throw err
+    })
+  } catch (err) {
+    closeFd(fd)
+    if (err) throw err
+  }
+})
+```
diff --git "a/Node/Node.js \347\216\257\345\242\203\345\217\230\351\207\217.md" "b/Node/Node.js \347\216\257\345\242\203\345\217\230\351\207\217.md"
new file mode 100644
index 0000000..abdcdf0
--- /dev/null
+++ "b/Node/Node.js \347\216\257\345\242\203\345\217\230\351\207\217.md"	
@@ -0,0 +1,101 @@
+# Node.js 环境变量
+
+## 什么是环境变量？
+
+在软件开发中，“环境”是程序或进程运行的环境。
+
+[环境变量](https://en.wikipedia.org/wiki/Environment_variable)是以某种方式调整环境（进程）的值。
+
+例如，考虑一些变量，在本地开发和在生产中运行时，您希望它们的值不同。虽然可以通过在代码中编写条件变量来实现这一点，但使用环境变量更容易（也是更好的做法）。
+
+下面是一个 Node.js 应用程序中的示例：
+
+```js
+// bad
+const env = isProduction ? 'production' : 'development'
+
+// good
+const env = process.env.NODE_ENV
+```
+
+Node 的 `process` 核心模块提供了 `env` 属性，该属性承载了流程启动时设置的所有环境变量。
+
+> **注意**：`process` 是一个全局对象，不需要额外的 `require` 导入。
+
+## 设置环境变量
+
+可以通过多种方式设置环境变量，这些方式取决于进程运行的系统。该操作通常在命令行上执行，但许多编程语言都有机制和库，可以让这个过程更容易。
+
+还有，像 [Vercel](https://vercel.com/) 和 [Netlify](https://www.netlify.com/)（以及其他）这样的现代部署平台，它们提供了一些接口让我们能够添加环境变量。
+
+## 存储敏感信息
+
+因为环境变量特定于环境而非代码，所以它们是进程存储敏感值的好方法。
+
+## 何时使用环境变量
+
+作为新开发人员，可能很难理解环境变量的值以及它们何时有意义。
+
+我发现环境变量在两种情况下最有用：
+
+- 特定于环境的值
+- 敏感数据
+
+让我们先看看这些场景中的每一个，以帮助推导出使用环境变量的值。
+
+### 特定于环境的值
+
+您的大多数项目都有多个环境。至少，您将拥有一个开发环境（用于本地工作）和一个生产环境。但项目通常会有额外的 `test`、`qa`、`staging` 等环境。
+
+在环境之间更改值时的新手路线通常如下所示（以 JS 代码为例）：
+
+```js
+if (isProduction) {
+  const my_var = 'This Value'
+} else {
+  const my_var = 'That Value'
+}
+```
+
+看起来不够优雅。它是重复的（不是 [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)），它只解决两个环境的上下文值。当您添加新的环境时，您都必须在具有此类逻辑的任何地方添加新行。
+
+如果使用环境变量，可以将这五行减为一行：
+
+```js
+const my_var = MY_VALUE
+```
+
+使用环境变量管理特定于环境的值使您能够保持代码清洁，并管理其他环境中的更改。
+
+### 敏感数据
+
+敏感数据（密码、API 密钥、令牌等），不应写入代码中。即使您的 Git 主机（[GitHub](https://github.com/)、[Bitbucket](https://bitbucket.org/) 或 [GitLab](https://about.gitlab.com/) 等）上有一个私有存储库，也是如此。当您提交一个敏感值并将其推送到远程主机时，您又添加了一个敏感值可能被盗的位置。
+
+使用环境变量存储敏感数据意味着该变量只存在于它被使用的地方，从而尽可能有效地降低了暴露它的风险。
+
+而且，当您拥有一个可靠的系统来存储敏感数据时，您就不必太担心这些值的敏感程度。如果对某个值是否敏感有任何疑问，您应该自动默认使用环境变量，而不是将其插入代码中。
+
+## 使用一些工具来管理环境变量
+
+我所使用过的一些好的工具：
+
+- [direnv](https://github.com/direnv/direnv)
+- [dotenv](https://github.com/motdotla/dotenv)
+- [cross-env](https://github.com/kentcdodds/cross-env)
+
+以 `dotenv` 为例：
+
+可以在 `.env` 文件中写入环境变量（您应该将该文件添加到 `.gitignore` 中，以避免推送到 GitHub），然后，在主文件的开头添加：
+
+```js
+require('dotenv').config()
+```
+
+通过这种方式，您可以避免在 Node 命令之前在命令行中列出环境变量，这些变量将自动提取。
+
+它们的详细用法可以查阅各自文档。
+
+## 更多资料
+
+- [Here’s how you can actually use Node environment variables](https://www.freecodecamp.org/news/heres-how-you-can-actually-use-node-environment-variables-8fdf98f53a0a)
+- [精读《如何在 nodejs 使用环境变量》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/60.%E7%B2%BE%E8%AF%BB%E3%80%8A%E5%A6%82%E4%BD%95%E5%9C%A8%20nodejs%20%E4%BD%BF%E7%94%A8%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E3%80%8B.md)
diff --git "a/Node/Node.js \350\257\273\345\217\226 CSV \346\226\207\344\273\266.md" "b/Node/Node.js \350\257\273\345\217\226 CSV \346\226\207\344\273\266.md"
new file mode 100644
index 0000000..2766e4e
--- /dev/null
+++ "b/Node/Node.js \350\257\273\345\217\226 CSV \346\226\207\344\273\266.md"	
@@ -0,0 +1,39 @@
+# Node.js 读取 CSV 文件
+
+许多不同的 npm 模块都允许你读取 CSV 文件。
+
+它们中的大多数都是基于流的，例如 [`csv-parser`](https://github.com/mafintosh/csv-parser) 或 [`node-csv`](https://csv.js.org/)。
+
+它们对于在生产系统中处理 CSV 非常有用。
+
+当我不考虑性能时，我喜欢把事情简单化。例如，对于一次性解析 CSV，我必须合并我的后端系统。
+
+为此，我使用 [`neat-csv`](https://github.com/sindresorhus/neat-csv) 包，它将 `csv-parser` 功能公开给一个简单的 `async/await` 接口。
+
+使用 `pnpm i neat-csv` 安装它，并在你的应用程序中使用它:
+
+```js
+const neatCsv = require('neat-csv')
+```
+
+然后从文件系统加载 CSV 并调用 `neatCsv` 传递文件的内容：
+
+```js
+const fs = require('fs')
+
+fs.readFile('./file.csv', async (err, data) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  console.log(await neatCsv(data))
+})
+```
+
+现在您可以开始对数据进行任何需要做的处理，这些数据被格式化为 JavaScript 对象数组。
+
+## 更多资料
+
+- [将表格导出到 csv](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%B0%86%E8%A1%A8%E6%A0%BC%E5%AF%BC%E5%87%BA%E5%88%B0%20csv.md)
+- [csv](https://www.npmjs.com/package/csv) 功能齐全的 CSV 解析器，具有简单的 API，并针对大型数据集进行了测试。
diff --git "a/Node/Node.js \351\200\222\345\275\222\350\216\267\345\217\226\346\226\207\344\273\266\345\244\271\344\270\255\347\232\204\346\211\200\346\234\211\346\226\207\344\273\266.md" "b/Node/Node.js \351\200\222\345\275\222\350\216\267\345\217\226\346\226\207\344\273\266\345\244\271\344\270\255\347\232\204\346\211\200\346\234\211\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..61c8bb9
--- /dev/null
+++ "b/Node/Node.js \351\200\222\345\275\222\350\216\267\345\217\226\346\226\207\344\273\266\345\244\271\344\270\255\347\232\204\346\211\200\346\234\211\346\226\207\344\273\266.md"	
@@ -0,0 +1,37 @@
+# Node.js 递归获取文件夹中的所有文件
+
+我需要递归地获取文件夹中的所有文件。
+
+我发现这样做的最好方法是安装 [glob](https://www.npmjs.com/package/glob) 库：
+
+```bash
+pnpm i glob
+```
+
+我想查找所有 `README.md` 文件包含夹 `/post` 包含的所有文件 ，每个文件都在自己的目录结构中，可能在多个子文件夹下：
+我想查找所有包含在 `/post` 文件夹内的所以 `README.md` 文件，每个文件都位于其自己的目录结构中，可能位于多个子文件夹下：
+
+- `/post/HTML/README.md`
+- `/post/CSS/README.md`
+- `/post/other/test/README.md`
+
+```js
+const glob = require('glob')
+
+const root_folder = './post'
+
+glob(root_folder + '/**/README.md', (err, files) => {
+  if (err) {
+    console.log('Error', err)
+  } else {
+    console.log(files)
+  }
+})
+/*
+[
+  './post/HTML/README.md',
+  './post/CSS/README.md',
+  './post/other/test/README.md'
+]
+*/
+```
diff --git a/Node/Puppeteer.md b/Node/Puppeteer.md
new file mode 100644
index 0000000..faa883e
--- /dev/null
+++ b/Node/Puppeteer.md
@@ -0,0 +1,494 @@
+# Puppeteer
+
+[Puppeteer](https://pptr.dev/) 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。
+
+![Puppeteer logo](https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png)
+
+它提供了高级 API 来通过 [DevTools 协议](https://chromedevtools.github.io/devtools-protocol/)控制 Chrome 或 Chromium。Puppeteer 默认情况下[无头](https://developers.google.com/web/updates/2017/04/headless-chrome)运行，但可以配置为运行完整（无头）的 Chrome 或 Chromium。
+
+使用它，我们可以：
+
+- 抓取网页
+- 自动化表单提交
+- 执行任何类型的浏览器自动化
+- 跟踪页面加载性能
+- 创建单页应用的服务器端渲染版本
+- 制作屏幕截图
+- 创建自动化测试
+- 从网页生成 PDF
+
+它是由谷歌构建的。它本身并没有解锁任何新东西，但它抽象了我们在不使用它的情况下必须处理的许多细节。
+
+简而言之，它使事情变得非常简单。
+
+由于它在初始化时启动了一个新的 Chrome 实例，因此它可能不是性能最好的。这是使用 Chrome 自动化测试的最精确方法，因为它使用的是真正的浏览器。
+
+确切地说，它使用 Chrome 的开源部分 Chromium，这主要意味着它没有 Google 许可且无法开源的专有编解码器（MP3、AAC、H.264..），也没有与崩溃报告、谷歌更新等谷歌服务的集成，但从编程的角度来看，它应该与 Chrome 100% 相似（除了媒体播放）。
+
+## 安装
+
+```bash
+npm i puppeteer
+```
+
+这将下载并捆绑最新版本的 Chromium。
+
+您可以选择让 puppeteer 运行您已经安装的 Chrome 的本地安装，取而代之的是安装 `puppeteer-core`，这在一些特殊情况下是有用的（参见 [puppeteer 与 puppeteer-core 的区别](https://github.com/puppeteer/puppeteer#puppeteer-core)）。但在通常下，您只需使用 `puppeteer`。
+
+## 基本用法
+
+导入它：
+
+```js
+const puppeteer = require('puppeteer')
+```
+
+然后，我们可以使用 `launch()` 方法创建一个浏览器实例：
+
+```js
+;(async () => {
+  const browser = await puppeteer.launch()
+})()
+```
+
+我们也可以这样写：
+
+```js
+puppeteer.launch().then(async (browser) => {
+  //...
+})
+```
+
+您可以将带有选项的对象传递给 `puppeteer.launch()`。最常见的是：
+
+```js
+puppeteer.launch({ headless: false })
+```
+
+`headless` 表示在 Puppeteer 执行操作时显示 Chrome。这样可以看到正在发生的事情并进行调试。
+
+我们使用 `await`，因此我们必须将此方法调用包装在一个异步函数中，然后立即调用该函数。
+
+接下来，我们可以在 `browser` 对象上使用 `newPage()` 方法来获取 `page` 对象：
+
+```js
+;(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+})()
+```
+
+接下来，我们调用 `page` 对象上的 `goto()` 方法来加载页面：
+
+```js
+;(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+  await page.goto('https://github.com/lio-zero')
+})()
+```
+
+我们也可以使用 Promise，而不是 `async/await`，但使用后者会使代码更具可读性：
+
+```js
+;(() => {
+  puppeteer.launch().then((browser) => {
+    browser.newPage().then((page) => {
+      page.goto('https://github.com/lio-zero').then(() => {
+        //...
+      })
+    })
+  })
+})()
+```
+
+## 获取页面内容
+
+一旦我们有了一个加载了 URL 的页面，我们可以调用 `page` 的 `evaluate()` 方法来获取页面内容：
+
+```js
+;(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+  await page.goto('https://github.com/lio-zero')
+
+  const result = await page.evaluate(() => {
+    //...
+  })
+})()
+```
+
+该方法采用回调函数，我们可以在其中添加检索所需页面元素所需的代码。我们返回一个新对象，这将是 `evaluate()` 方法调用的结果。
+
+我们可以使用 `page.$()` 方法访问文档上的 Selectors API 方法 `querySelector()`，以及 `page.$$()`作为`querySelectorAll()` 的别名。
+
+计算完成后，我们在浏览器上调用 `browser.close()` 方法：
+
+```js
+browser.close()
+```
+
+## Page 方法
+
+我们在上面看到了调用 `browser.newPage()` 得到的 `page` 对象，我们用它调用了 `goto()` 和 `evaluate()` 方法。
+
+所有方法都返回一个 Promise，因此它们通常带有 `await` 关键字。
+
+让我们看看我们将调用的一些最常用的方法。您可以在 Puppeteer 文档上看到[完整的列表](https://pptr.dev/#?product=Puppeteer&show=api-class-page)。
+
+### page.$()
+
+允许访问页面上的 `querySelector()` 方法
+
+### page.$$()
+
+允许访问页面上的 `querySelectorAll()` 方法
+
+### page.$eval()
+
+接受 2 个或更多参数。第一个是选择器，第二个是函数。如果有更多参数，则这些参数将作为附加参数传递给函数。
+
+它在页面上运行 `querySelectorAll()`，使用第一个参数作为选择器，然后将该参数用作函数的第一个参数。
+
+```js
+const innerTextOfButton = await page.$eval(
+  'button#submit',
+  (el) => el.innerText
+)
+```
+
+### click()
+
+在作为参数传递的元素上执行鼠标单击事件：
+
+```js
+await page.click('button#submit')
+```
+
+我们可以传递一个带有选项对象的附加参数：
+
+- `button` 可以设置为 `left`（默认）、`right` 或 `middle`
+- `clickCount` 是一个默认为 1 的数字，用于设置应单击元素的次数
+- `delay` 是点击之间的毫秒数。默认为 `0`
+
+### content()
+
+获取页面的 HTML 源代码：
+
+```js
+const source = await page.content()
+```
+
+### emulate()
+
+`emulate()` 用于模拟设备。它将用户代理设置为特定设备，并相应地设置视口。
+
+[此文件](https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js)中提供了支持的设备列表。
+
+以下是模拟 iPhone X 的方法：
+
+```js
+const puppeteer = require('puppeteer')
+const device = require('puppeteer/DeviceDescriptors')['iPhone X']
+
+puppeteer.launch().then(async (browser) => {
+  const page = await browser.newPage()
+  await page.emulate(device)
+
+  //do stuff
+
+  await browser.close()
+})
+```
+
+### evaluate()
+
+在页面上下文中计算函数。在这个函数中，我们可以访问 `document` 对象，因此我们可以调用任何 DOM API：
+
+```js
+const puppeteer = require('puppeteer')
+
+;(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+  await page.goto('https://github.com/lio-zero')
+
+  const result = await page.evaluate(() => {
+    return document.querySelector('.avatar-user').length
+  })
+
+  console.log(result)
+})()
+```
+
+我们在此处调用的任何内容都在页面上下文中执行，因此如果我们运行 `console.log()`，我们将不会在 Node.js 上下文中看到结果，因为这是在无头浏览器中执行的。
+
+我们可以在这里计算值并返回 JavaScript 对象，但如果我们想返回一个 DOM 元素并在 Node.js 上下文中访问它，我们必须使用不同的方法 `evaluateHandle()`。如果我们从 `evaluate()` 返回一个 DOM 元素，我们只会得到一个空对象。
+
+### evaluateHandle()
+
+类似于 `evaluate()`，但是如果我们返回一个 DOM 元素，我们将得到正确的对象而不是一个空对象：
+
+```js
+const puppeteer = require('puppeteer')
+
+;(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+  await page.goto('https://github.com/lio-zero')
+
+  const result = await page.evaluateHandle(() => {
+    return document.querySelector('.avatar-user')
+  })
+
+  console.log(result)
+})()
+```
+
+### exposeFunction()
+
+此方法允许您在浏览器上下文中添加一个新函数，该函数在 Node.js 上下文中执行。
+
+这意味着我们可以添加一个在浏览器中运行 Node.js 代码的函数。
+
+此示例在浏览器上下文中添加一个 `test()` 函数，该函数从文件系统读取 `app.js` 文件，其路径相对于脚本：
+
+```js
+const puppeteer = require('puppeteer')
+const fs = require('fs')
+
+;(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+  await page.goto('https://github.com/lio-zero')
+
+  await page.exposeFunction('test', () => {
+    const loadData = (path) => {
+      try {
+        return fs.readFileSync(path, 'utf8')
+      } catch (err) {
+        console.error(err)
+        return false
+      }
+    }
+    return loadData('app.js')
+  })
+
+  const result = await page.evaluate(() => {
+    return test()
+  })
+
+  console.log(result)
+})()
+```
+
+### focus()
+
+聚焦元素：
+
+```js
+await page.focus('input#name')
+```
+
+### goBack()
+
+返回页面导航历史：
+
+```js
+await page.goBack()
+```
+
+### goForward()
+
+在页面导航历史中前进：
+
+```js
+await page.goForward()
+```
+
+### goto()
+
+打开一个新页面：
+
+```js
+await page.goto('https://github.com/lio-zero')
+```
+
+您可以使用选项将对象作为第二个参数传递。其中，如果传递了 `waitUntil: networkidle2`，将等到导航完成：
+
+```js
+await page.goto('https://github.com/lio-zero', { waitUntil: 'networkidle2' })
+```
+
+### hover()
+
+在作为参数传递的选择器上执行鼠标悬停：
+
+```js
+await page.hover('input#name')
+```
+
+### pdf()
+
+从页面生成 PDF：
+
+```js
+await page.pdf({ path: 'file.pdf' })
+```
+
+您可以将许多[选项](https://pptr.dev/api/puppeteer.pdfoptions)传递给此方法，以设置生成的 PDF 详细信息。
+
+> 注意：`launch` 方法不要设置 `headless` 选项的值为 `false`。
+
+### reload()
+
+重新加载页面：
+
+```js
+await page.reload()
+```
+
+### screenshot()
+
+获取页面的 PNG 截图，将其保存到使用 `path` 选择的文件名：
+
+```js
+await page.screenshot({ path: 'screenshot.png' })
+```
+
+[查看所有选项](https://pptr.dev/api/puppeteer.screenshotoptions)
+
+### select()
+
+选择作为参数传递的选择器标识的 DOM 元素
+
+```js
+await page.select('input#name')
+setContent()
+```
+
+您可以设置页面的内容，而不是打开现有的网页。
+
+对于以编程方式使用现有 HTML 生成 PDF 或屏幕截图非常有用：
+
+```js
+const html = '<h1>Hello!</h1>'
+await page.setContent(html)
+await page.pdf({ path: 'hello.pdf' })
+await page.screenshot({ path: 'screenshot.png' })
+```
+
+### setViewPort()
+
+默认情况下，视口为 `800 x 600`。如果您想有一个不同的视口，也许需要截屏，调用 `setViewport` 传递一个带有 `width` 和 `height` 属性的对象。
+
+```js
+await page.setViewport({ width: 1280, height: 800 })
+```
+
+### title()
+
+获取页面标题：
+
+```js
+await page.title()
+```
+
+### type()
+
+输入标识表单元素的选择器
+
+```js
+await page.type('input#name', 'lotto')
+```
+
+`delay` 选项允许像真实用户一样模拟打字，在每个字符之间添加延迟：
+
+```js
+await page.type('input#name', 'lotto', { delay: 100 })
+```
+
+### url()
+
+获取页面地址：
+
+```js
+await page.url()
+```
+
+### viewport()
+
+获取页面视口：
+
+```js
+await page.viewport()
+```
+
+### waitFor()
+
+等待特定的事情发生。具有以下快捷功能：
+
+- `waitForFunction`
+- `waitForNavigation`
+- `waitForRequest`
+- `waitForResponse`
+- `waitForSelector`
+- `waitForXPath`
+
+例子：
+
+```js
+await page.waitFor(waitForNameToBeFilled)
+const waitForNameToBeFilled = () => page.$('input#name').value != ''
+```
+
+## Page 命名空间
+
+`page` 对象使您可以访问几个不同的对象：
+
+- `accessibility`
+- `coverage`
+- `keyboard`
+- `mouse`
+- `touchscreen`
+- `tracing`
+
+每一个都有很多新功能。
+
+`keyboard` 何 `mouse` 很可能是您在尝试使事情自动化时最常使用的那些。
+
+例如，这是您触发 `input` 元素的方式（之前应该已选择）：
+
+```js
+await page.keyboard.type('hello!')
+```
+
+其他键盘方法是：
+
+- `keyboard.down()` 发送 `keydown` 事件
+- `keyboard.press()` 发送一个 `keydown` 后跟一个 `keyup`（模拟普通键类型）。主要用于修饰键（`shift`、`ctrl` 和 `cmd`）
+- `keyboard.sendCharacter()` 发送按键事件
+- `keyboard.type()` 发送 `keydown`、`keypress` 和 `keyup` 事件
+- `keyboard.up()` 发送 `keyup` 事件
+
+`mouse` 提供 4 种方法：
+
+- `mouse.click()` 模拟点击：`mousedown` 和 `mouseup` 事件
+- `mouse.down()` 模拟 `mousedown` 事件
+- `mouse.move()` 移动到不同的坐标
+- `mouse.up()` 模拟 `mouseup` 事件
+
+## 更多资料
+
+- [FAQ](https://pptr.dev/faq) 和 [Troubleshooting](https://pptr.dev/troubleshooting/) — puppeteer 常见问题
+
+对于 Puppeteer，还有许多其他用例和工具可能需要更多的曝光：
+
+- Puppeteer 提供了多个的[用例](https://github.com/puppeteer/examples)。例如，[自动视觉扩散](https://meowni.ca/posts/2017-puppeteer-tests/)或[监视每个构建中未使用的 CSS](http://blog.cowchimp.com/monitoring-unused-css-by-unleashing-the-devtools-protocol/)
+- [Web Performance Recipes With Puppeteer](https://addyosmani.com/blog/puppeteer-recipes/)
+- [记录和生成 Puppeteer 和 Playwright scripts 的有用工具](https://twitter.com/addyosmani/status/1219884904307142659)
+- 此外，您甚至可以在 [DevTools 中记录测试](https://twitter.com/umaar/status/1331924138970255360)
+- Nitay Neeman 对 [Puppeteer 的全面概述](https://nitayneeman.com/posts/getting-to-know-puppeteer-using-practical-examples/)，包括示例和用例。
+- [Puppeteer & Playwright 学习教程](https://www.checklyhq.com/learn/headless/)，介绍无头浏览器操作库 Puppeteer 和 Playwright 的用法。
+- [Puppeteer 资源社区列表](https://github.com/transitive-bullshit/awesome-puppeteer)
+- [Headless Chrome vs PhantomJS Benchmark](https://hackernoon.com/benchmark-headless-chrome-vs-phantomjs-e7f44c6956c)
diff --git "a/Node/open \346\250\241\345\235\227.md" "b/Node/open \346\250\241\345\235\227.md"
new file mode 100644
index 0000000..c33b283
--- /dev/null
+++ "b/Node/open \346\250\241\345\235\227.md"	
@@ -0,0 +1,21 @@
+# open 模块
+
+启动 express 服务时，我们使用 [`open`](https://www.npmjs.com/package/open) 包将在默认浏览器打开到 `localhost`：
+
+```js
+const app = require('express')()
+const open = require('open')
+
+app.use('*', (req, res) => {
+  res.send('Hello World!')
+})
+
+const port = 3000
+const host = 'localhost'
+
+app.listen(port, host, (err) => {
+  if (err) return
+  open(`http://${host}:${port}`)
+  console.log(`Listening at http://${host}:${port}`)
+})
+```
diff --git "a/Node/package.json \344\270\255\347\232\204 browserslist \345\255\227\346\256\265.md" "b/Node/package.json \344\270\255\347\232\204 browserslist \345\255\227\346\256\265.md"
new file mode 100644
index 0000000..d75b7c9
--- /dev/null
+++ "b/Node/package.json \344\270\255\347\232\204 browserslist \345\255\227\346\256\265.md"	
@@ -0,0 +1,16 @@
+# package.json 中的 browserslist 字段
+
+**Autoprefixer** 的作者 Andrey Sitnik 建议通过 Web 应用程序 `package.json` 文件的`browserslist` 字段指定支持的浏览器列表。除 **Autoprefixer** 外，以下工具也使用该字段:
+
+- [**babel-preset-env**](https://github.com/babel/babel-preset-env)（在下一个主要版本中）— 仅添加目标浏览器所需的 ECMAScript 2015+ polyfill
+- [**eslint-plugin-compat**](https://github.com/amilajack/eslint-plugin-compat) — 检查 Web 应用的 JavaScript 代码是否被所有目标浏览器支持
+- [**stylelint-no-unsupported-browser-features**](https://github.com/ismay/stylelint-no-unsupported-browser-features) — 检查 Web 应用的 CSS 代码是否被所有目标浏览器支持
+- [**postcss-normalize**](https://github.com/csstools/postcss-normalize) — 仅包括目标浏览器所需的 normalize.css 部分
+
+一个示例配置：
+
+```json
+{
+  "browserslist": ["last 2 versions", ">1%"]
+}
+```
diff --git "a/Node/package.json \350\257\246\350\247\243.md" "b/Node/package.json \350\257\246\350\247\243.md"
new file mode 100644
index 0000000..70215c9
--- /dev/null
+++ "b/Node/package.json \350\257\246\350\247\243.md"	
@@ -0,0 +1,573 @@
+# package.json 详解
+
+当我们创建一个 Node 项目时，需要创建一个 `package.json` 文件，它描述项目所需要的基本信息（如项目名、作者、版本、许可证等元数据）、脚本命令、依赖等。
+
+你可以在命令行使用 `npm help package.json` 命令，将使用默认浏览器打开页面，显示有关 `package.json` 文件中所需内容的所有信息。
+
+> **推荐**：以下的所以 npm 命令，你可以在[常用的 npm 命令](https://github.com/lio-zero/blog/blob/main/Node/%E5%B8%B8%E7%94%A8%E7%9A%84%20npm%20%E5%91%BD%E4%BB%A4.md)这篇文章中了解到。
+
+## 基本字段
+
+开始一个新项目时，我们会在命令行使用 `npm init` 命令生成 `package.json` 文件。
+
+以下是 `package.json` 的一些字段信息：
+
+`name` 项目的名称。
+
+```json
+{
+  "name": "node"
+}
+```
+
+`version` 项目的版本号。
+
+```json
+{
+  "version": "0.1.0"
+}
+```
+
+`description` 项目的描述信息。
+
+```json
+{
+  "description": "My package"
+}
+```
+
+`main` 字段指定项目的主入口文件。如果没有设置 `main`，它默认为项目根文件夹中的 `index.js`。
+
+```json
+{
+  "main": "index.js"
+}
+```
+
+当我们导入某个包时，实际上导入的是 `main` 字段所指向的文件。
+
+```js
+// 将根据 node_modules/ws 下 package.json 文件的 main 字段，找到入口文件
+const ws = require('ws')
+```
+
+> **Tips**：`main` 是 CommonJS 时代的产物，也是最古老且最常用的入口文件。
+
+`author` 字段指定项目的作者信息。它可以有两种写法：
+
+```json
+// 方式一：
+{
+  "author": {
+    "name" : "lio-zero",
+    "email" : "licroning@163.com",
+    "url" : "https://github.com/lio-zero/blog"
+  }
+}
+
+// 方式二：
+{
+  "author": "lio-zero <licroning@163.com> (https://github.com/lio-zero/blog)"
+}
+```
+
+`keywords` 使用相关的关键字描述项目。
+
+```json
+{
+  "keywords": ["package.json", "node"]
+}
+```
+
+`license` 字段指定项目许可证，告诉用户如果使用当前项目，以及使用的一些限制。常见的许可证有 MIT、BSD-3-Clause 等。
+
+```json
+{
+  "keywords": "MIT"
+}
+```
+
+`scripts` 字段指定项目的脚本命令。例如以下 `start` 指定了运行 `npm run start` 时，所要执行的命令。
+
+```json
+{
+  "scripts": {
+    "start": "node ./bin/xxx"
+  }
+}
+```
+
+> `scripts` 有一些很重要的声明周期钩子，例如 `prepublishOnly`。具体请查阅：[NPM scripts](https://github.com/lio-zero/blog/blob/main/Node/%E5%B8%B8%E7%94%A8%E7%9A%84%20npm%20%E5%91%BD%E4%BB%A4.md#npm-scripts)。
+
+`repository` 字段用于指定项目的代码仓库地址。
+
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lio-zero/blog"
+  }
+}
+```
+
+以上是使用 `npm init` 时，提示你需要录入的信息。
+
+你也可以添加 `-y` 标志来生成默认的 `package.json` 文件：
+
+```json
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
+```
+
+使用 `npm init -y` 默认生成的 `package.json` 文件会少一个 `repository` 字段，需要的话手动添加上去即可。
+
+接下来，我们将在这基础上介绍一些其他字段，它们都是可选的，也会在你使用某些 npm 命令时自动生成。
+
+## 项目依赖字段
+
+[`dependencies`](https://github.com/npm/npm/blob/2e3776bf5676bc24fec6239a3420f377fe98acde/doc/files/package.json.md#dependencies) 字段指定了生产环境项目的依赖。当你添加生产环境依赖时，它会自动生成，如：`npm i express`。
+
+```json
+{
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}
+```
+
+[`devDependencies`](https://github.com/npm/npm/blob/2e3776bf5676bc24fec6239a3420f377fe98acde/doc/files/package.json.md#devdependencies) 字段记录了项目在开发环境的依赖关系。当你添加开发环境依赖时，该字段会自动生成并添加相关依赖。例如执行 `npm i eslint -D` 命令，将自动生成以下内容：
+
+```json
+{
+  "devDependencies": {
+    "eslint": "^6.7.2"
+  }
+}
+```
+
+[`peerDependencies`](https://github.com/npm/npm/blob/2e3776bf5676bc24fec6239a3420f377fe98acde/doc/files/package.json.md#peerdependencies) 字段用于指定项目所依赖的其他项目的版本要求。如果你安装的是一个插件，非常适合这种方式。
+
+```json
+{
+  "peerDependencies": {
+    "tea": "2.x"
+  }
+}
+```
+
+[`optionalDependencies`](https://github.com/npm/npm/blob/2e3776bf5676bc24fec6239a3420f377fe98acde/doc/files/package.json.md#optionaldependencies) 如果你想在某些依赖即使没有找到，或者安装失败的情况下，npm 都可以继续执行，那么这些依赖适合放在这里。
+
+```json
+{
+  "optionalDependencies": {}
+}
+```
+
+`bundledDependencies` 字段用于指定项目打包时需要包含的依赖库。这意味着，当用户安装你的包时，这些依赖也会被安装，并与你的包一起发布。
+
+例如，如果你的包依赖于 `lodash`，并且你希望它们一起发布，你可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "bundledDependencies": ["lodash"]
+}
+```
+
+这样，当用户安装你的包时，`lodash` 也会被安装。如果你的包使用这些依赖，这样做会更方便，因为用户只需安装一个包即可获得所有依赖。
+
+文档中有详细介绍它们，Stack Overflow 上也有关于这几个字段的详细介绍，请查阅 [What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies/22004559#22004559) 和 [Advantages of bundledDependencies over normal dependencies in npm](https://stackoverflow.com/questions/11207638/advantages-of-bundleddependencies-over-normal-dependencies-in-npm)。
+
+## `module` 字段
+
+`module` 字段表示作为 ES 模块的入口。
+
+```json
+{
+  "module": "./index.mjs"
+}
+```
+
+前端工程化下，很多项目会选择一次打包成多种文件格式，如 `cjs/mjs`。当你使用 `import` 导入模块时，它将找到 `module` 指向 ESM 的入口文件，如果使用 `require` 导入模块，将找到 `main` 指向 CJS 的入口文件。
+
+```js
+{
+  "name": 'app-project',
+  "main": './index.cjs',
+  "module": './index.mjs'
+}
+```
+
+如果你只发布一份 ESM 模块化方案，则直接使用 `main` 字段即可。
+
+## `exports` 字段
+
+<!-- `exports` 字段可以控制子目录的访问路径。 -->
+
+`exports` 字段允许你将一个包中的脚本文件、数据文件和其他资源导出为一个模块，供其他人使用。
+
+例如，如果你有一个 JavaScript 包，它包含一个名为 `lib.js` 的脚本文件和一个名为 `data.json` 的数据文件，你可以使用以下代码将它们导出为模块：
+
+```json
+{
+  "exports": {
+    "./lib.js": "./lib.js",
+    "./data.json": "./data.json"
+  }
+}
+```
+
+这样，其他人就可以通过 `require()` 方法引用这些文件：
+
+```js
+const lib = require('./lib.js')
+const data = require('./data.json')
+```
+
+但请注意，这种方式只能用于导出包内的文件。
+
+对于导出整个包或自定义导出，应使用其他方法，例如 CommonJS 模块系统或 ECMAScript 模块。
+
+`exprots` 字段还有一个作用，它可以将 CommonJS 模块或 ECMAScript 模块放在同一个包中，并指定多个条目以有条件地提供这些格式，Node 将根据用户或下游包环境解析使用哪种模块系统。
+
+```js
+{
+  "name": "package-name",
+  "main": './index.cjs',
+  "module": './index.mjs',
+  "exports": {
+    ".": {
+      "require": "./index.cjs", // CJS
+      "import": "./index.mjs"   // ESM
+    }
+  }
+}
+```
+
+它将替换 `main` 或 `module` 字段所指向的入口文件，且只有在 `exports` 中声明的文件可以被使用。
+
+[Types for sub modules](https://antfu.me/posts/types-for-sub-modules)
+
+> 关于 `exports` 字段，可以查阅 webpack 的 [Package exports](https://webpack.docschina.org/guides/package-exports/) 章节。
+
+## `type` 字段
+
+`type` 字段指定了包的类型，可以是 `commonjs`、`module` 或 `unpkg`。
+
+- `commonjs` — 表示包使用 CommonJS 模块系统，这是最常见的模块类型。
+- `module` — 表示包使用 ECMAScript 模块系统。
+- `unpkg` — 表示包可以通过 [unpkg.com](https://www.unpkg.com/) 网站加载。
+
+例如，如果你的包使用 ECMAScript 模块系统，你可以在 `package.json` 文件中添加以下代码：
+
+```js
+{
+  "type": "module"
+}
+```
+
+这样，当其他人安装你的包时，npm 就会知道它应该如何处理模块。
+
+但请注意，`type` 字段是可选的，如果不指定，npm 会自动检测包的模块类型。但是，建议明确指定包的模块类型，以避免混淆。
+
+## `funding` 字段
+
+`funding` 字段用于指定包作者或维护者的资金来源信息。这些信息会显示在 npm 包页面上，供用户参考。
+
+例如，如果你的包由 [OpenCollective](https://opencollective.com/) 提供资金支持，你可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "funding": {
+    "type": "OpenCollective",
+    "url": "https://OpenCollective.com/my-package"
+  }
+}
+```
+
+这样，当用户查看你的包时，他们就可以点击链接，访问 OpenCollective 网站，了解更多有关资金支持的信息。
+
+但请注意，`funding` 字段是可选的，如果不指定，npm 不会显示任何资金来源信息。但是，建议提供这些信息，以便用户可以更好地了解你的包和资金支持情况。
+
+## `workspaces` 字段
+
+`workspaces` 字段用于管理多个包之间的依赖关系。它可以让你在一个父包中组织多个子包，并定义它们之间的依赖关系。
+
+例如，如果你有一个父包 `my-workspace`，包含两个子包 `package-a` 和 `package-b`，你可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "workspaces": ["package-a", "package-b"]
+}
+```
+
+这样，当你在父包中安装依赖时，npm 会自动安装子包的依赖，并将它们组织在一起。这样，你就可以通过父包来管理整个工作区间，而不必在每个子包中都定义依赖。
+
+但请注意，`workspaces` 字段是可选的，如果不指定，npm 不会管理工作区间。但是，如果你有多个包需要组织在一起，建议使用 `workspaces` 字段来管理它们。
+
+## `config` 字段
+
+`config` 字段用于存储配置信息。它允许你在 `package.json` 文件中定义默认配置，并在运行时使用这些配置。
+
+例如，如果你的包需要一个名为 `port` 的配置，并且默认值为 5000，你可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "name": "node",
+  "config": {
+    "port": 5000
+  }
+}
+```
+
+这样，你的包就可以在运行时读取这个配置：
+
+```js
+const port = process.env.npm_package_config_port
+```
+
+你还可以使用下面命令改变这个值。
+
+```bash
+npm config set node:port 8080
+```
+
+## `bin` 字段
+
+`bin` 字段用于指定包的可执行文件。它允许你将包安装为命令行工具，并在命令行中执行。
+
+例如，如果你的包包含一个名为 `magic` 的可执行文件，你可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "bin": {
+    "magic": "./bin/magic"
+  }
+}
+```
+
+这样，当用户安装你的包时，`magic` 命令就可以在命令行中使用了。用户可以通过运行 `magic` 命令来执行可执行文件。
+
+如果你的包可以作为命令行工具使用，建议使用 `bin` 字段来指定可执行文件。
+
+请注意，这些可执行文件的头部需要加上 `#!/usr/bin/env node`。
+
+## `publishConfig` 字段
+
+`publishConfig` 字段用于存储发布配置信息。它允许你在 `package.json` 文件中定义特定于发布的配置，例如发布源或发布标签。
+
+例如，如果你希望发布你的包到 `my-registry` 源，并使用 `latest` 标签，你可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "publishConfig": {
+    "registry": "https://my-registry/",
+    "tag": "latest"
+  }
+}
+```
+
+这样，当你运行 `npm publish` 命令时，npm 会使用这些配置来发布你的包。
+
+请注意，`publishConfig` 字段是可选的，如果不指定，npm 会使用默认的发布配置。但是，如果你希望定义特定于发布的配置，建议使用 publishConfig 字段。
+
+## `files` 字段
+
+`files` 字段用于指定哪些文件应该被发布。它允许你控制哪些文件会被包含在发布版本中，以及哪些文件会被忽略。如果需要把某些文件不包含在项目中，可以添加一个 `.npmignore` 文件。这个文件和 `gitignore` 类似。
+
+例如，你希望仅发布包的 `dist` 文件夹，则可以在 `package.json` 文件中添加以下代码：
+
+```json
+{
+  "files": ["dist"]
+}
+```
+
+这样，当你运行 `npm publish` 命令时，整个包仅有 `dist` 文件夹被包含在发布版本中。
+
+你还可以使用 `!` 表示不包含哪些文件/文件夹到发布版本中：
+
+```json
+{
+  "files": ["!src"]
+}
+```
+
+请注意，`files` 字段是可选的，如果不指定，npm 会将包根目录下的所有文件都发布。但是，如果你希望控制发布的文件，建议使用 `files` 字段。
+
+## 其他
+
+`homepage` 项目首页的网址。
+
+```json
+{
+  "homepage": "https://github.com/lio-zero/blog"
+}
+```
+
+`bugs` 字段用于指定项目的 Issues 追踪系统的 URL 或邮箱地址（bug 报告地址），这些对遇到包存在问题的人很有帮助。
+
+```json
+{
+  "bugs": {
+    "url": "http://github.com/owner/project/issues",
+    "email": "project@hostname.com"
+  }
+}
+```
+
+`private` 字段用于指定项目是否为私有项目。如果设置为 `true`，则表示该项目不能被公开发布。该字段可以确保包不会被发布到 npm 上。这可以防止私有项目不小心被发布出去。
+
+```json
+{
+  "private": true
+}
+```
+
+`preferGlobal` 字段用于指示 npm 是否应该将包安装为全局包。如果设置为 `true`，当用户安装包时，npm 会提示用户安装为全局包。
+
+```json
+{
+  "preferGlobal": true
+}
+```
+
+`browserslist` 用于指定项目所支持的浏览器版本。这个字段通常与浏览器兼容性相关的工具（例如 Babel 或 Autoprefixer）配合使用，以便确保项目在指定的浏览器版本中运行正常。
+
+```json
+{
+  "browserslist": [
+    "last 3 Chrome versions",
+    "last 3 Firefox versions",
+    "Safari >= 10",
+    "Explorer >= 11"
+  ]
+}
+```
+
+`engines` 字段用于指定运行当前项目所需要的 Node.js 版本，也可以指定适用的 `npm` 版本。
+
+```json
+{
+  "engines": {
+    "node": ">= 14.0.0",
+    "npm": ">= 6.14.8"
+  }
+}
+```
+
+当本地的 Node 版本与项目的版本不一致，npm 在安装依赖时，将会发出警告，提示你本地的 Node 版本与此项目不符，而 yarn 将直接报错。还有一点很重要，当某些依赖所使用的版本号与项目运行的 Node 版本不一致时，yarn 会也报错，此时项目无法正常运行，可避免意外发生。显示 yarn 这方面做的很好。
+
+`man` 字段用于指定包的手册页。它允许你指定可以通过 `man` 命令访问的手册页文件，以便用户可以查看你的包的相关文档。
+
+```json
+{
+  "man": ["./doc/calc.1"]
+}
+```
+
+`style` 字段用于指定供浏览器使用时，样式文件所在的位置。样式文件打包工具 [parcelify](https://github.com/rotundasoftware/parcelify)，通过它知道样式文件的打包位置。
+
+```json
+{
+  "style": ["./node_modules/tipso/src/tipso.css"]
+}
+```
+
+`cpu` 字段用于指定项目的架构（例如：x64 或 ia32）
+
+```json
+{
+  "cpu": ["x64", "ia32"],
+  "cpu": ["!arm", "!mips"]
+}
+```
+
+`os` 字段用于指定项目字段可以用来指定，可以在什么操作系统上运行。
+
+```json
+{
+  "os": ["darwin", "linux"]
+}
+```
+
+`engineStrick` 是一个布尔值。如果你肯定你的程序只能在制定的 engine 上运行，设置为 true。
+
+还有一些特殊的字段，比如 `lint-staged`、`husky`、`eslint`、`prettier`、`unpkg`、`babel`、`jest` 等，它们需要配合相应的依赖一起使用。上面的 `browserslist` 字段就是其中之一。
+
+## 根据 `package.json` 内容自动生成 `README.md` 文件
+
+对于任何开源项目来说，最重要的文档就是 README。
+
+这里介绍一个好用的工具 [`readme-md-generator`](https://github.com/kefranabg/readme-md-generator)，它将根据 `package.json` 文件内容自动生成漂亮 README 文件。
+
+`readme-md-generator` 能够读取你的环境（`package.json`、git 配置等），自动创建项目的 `README.md` 文件。
+
+以下是该库提供的一个示例演示：
+
+![readme-md-generator 演示](https://upload-images.jianshu.io/upload_images/18281896-f3c63011175001bf.gif?imageMogr2/auto-orient/strip)
+
+### 基本配置
+
+确保已安装 [npx](https://www.npmjs.com/package/npx)（npx 从 npm `5.2.0` 开始默认发布）
+
+只需在项目根部运行以下命令并回答问题：
+
+```bash
+npx readme-md-generator
+```
+
+或使用 `-y` 标志默认生成：
+
+```bash
+npx readme-md-generator -y
+```
+
+假设我们有如下配置：
+
+```json
+{
+  "name": "vue3",
+  "version": "0.1.0",
+  "private": true,
+  "description": "vue3-demo",
+  "author": "lio-zero <licroning@163.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">= 12.16.2",
+    "npm": ">= 6.14.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lio-zero/vue3.git"
+  },
+  "homepage": "https://github.com/lio-zero/vue3.git#readme",
+  "keywords": ["vue3", "cli"],
+  "scripts": {},
+  "dependencies": {},
+  "devDependencies": {}
+}
+```
+
+效果如下：
+
+![生成 README.md](https://upload-images.jianshu.io/upload_images/18281896-4b95e028b19bdedb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> 详细内容请查阅文档，例如可以单独定制模板等。
+>
+> 更新：还有一个不错的工具 [readme.so](https://readme.so/)，允许你通过简单的编辑器快速添加和自定义项目 README 文件所需的所有部分。
+
+## 更多资料
+
+- [npm Docs - package-json](https://docs.npmjs.com/cli/v8/configuring-npm/package-json)
+- [package.json](http://caibaojian.com/npm/files/package.json.html)
+- [What's what? - Package.json cheatsheet!](https://areknawo.com/whats-what-package-json-cheatsheet/)
diff --git "a/Node/process.nextTick() \345\234\250 Node.js \344\270\255\346\230\257\345\246\202\344\275\225\345\267\245\344\275\234\347\232\204\357\274\237.md" "b/Node/process.nextTick() \345\234\250 Node.js \344\270\255\346\230\257\345\246\202\344\275\225\345\267\245\344\275\234\347\232\204\357\274\237.md"
new file mode 100644
index 0000000..97cd9eb
--- /dev/null
+++ "b/Node/process.nextTick() \345\234\250 Node.js \344\270\255\346\230\257\345\246\202\344\275\225\345\267\245\344\275\234\347\232\204\357\274\237.md"	
@@ -0,0 +1,62 @@
+# process.nextTick() 在 Node.js 中是如何工作的？
+
+当您试图理解 Node.js 事件循环时，其中一个重要部分是 [`process.nextTick()`](https://nodejs.org/docs/latest/api/process.html#process_process_nexttick_callback_args)。
+
+> **Tips**：[process](https://nodejs.org/api/process.html) 对象是 Node.js 核心 API 提供的少数全局对象之一。它可以从任何地方访问，因此它的方法也可以访问。
+
+在 Node.js 中，每次事件循环执行一次完整的过程，我们称之为 **tick**。
+
+当我们将函数传递给 `process.nextTick()` 时，我们指示引擎在当前操作结束时，在下一个事件循环 **tick** 开始之前调用此函数：
+
+```js
+process.nextTick(() => {
+  // do something ...
+})
+```
+
+事件循环正忙于处理当前功能代码。
+
+当此操作结束时，JS 引擎运行该操作期间传递给 `nextTick` 调用的所有函数。
+
+我们可以通过这种方式告诉 JS 引擎异步处理函数（在当前函数之后），但要尽可能快，而不是让它排队。
+
+这里我们讲一下，浏览器的 `setTimeout()` 函数，它用于在不久的将来执行延迟任务。
+
+```js
+setTimeout(() => {
+  // do something ...
+}, 0)
+```
+
+> 推荐：详细用法请看 [JavaScript 中的 setTimeout 和 setInterval 方法](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%20setTimeout%20%E5%92%8C%20setInterval%20%E6%96%B9%E6%B3%95.md#javascript-%E4%B8%AD%E7%9A%84-settimeout-%E5%92%8C-setinterval-%E6%96%B9%E6%B3%95)。
+
+先来看一个 🌰：
+
+```js
+process.nextTick(() => {
+  console.log('nextTick')
+})
+
+console.log('log')
+
+setTimeout(() => {
+  console.log('setTimeout')
+})
+
+// log
+// nextTick
+// setTimeout
+```
+
+从上面的代码片段可以看出，`nextTick` 在 `setTimeout` 之前先被打印。
+
+`setTimeout()` 和 `process.nextTick()` 之间的区别在于 `process.nextTick()` 函数特定于 Node.js 事件循环。
+
+调用 `setTimeout()` 将在下一个 **tick** 结束时执行函数，这比使用 `nextTick()` 时要晚得多，后者将优先处理调用并在下一 **tick** 开始前执行。
+
+所以，如果要确保在下一次事件循环迭代中代码已经执行，请使用 `nextTick()`。
+
+## 更多资料
+
+- [process.nextTick 与 setTimeout(fn, 0)](https://gist.github.com/mmalecki/1257394) — 一个基准测试
+- [JavaScript 运行机制 — 事件循环（Event-Loop）](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6%20%E2%80%94%20%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%88Event-Loop%EF%BC%89.md)
diff --git "a/Node/\344\273\216 MIME \347\261\273\345\236\213\350\216\267\345\217\226\346\226\207\344\273\266\346\211\251\345\261\225\345\220\215.md" "b/Node/\344\273\216 MIME \347\261\273\345\236\213\350\216\267\345\217\226\346\226\207\344\273\266\346\211\251\345\261\225\345\220\215.md"
new file mode 100644
index 0000000..f2b43f9
--- /dev/null
+++ "b/Node/\344\273\216 MIME \347\261\273\345\236\213\350\216\267\345\217\226\346\226\207\344\273\266\346\211\251\345\261\225\345\220\215.md"	
@@ -0,0 +1,43 @@
+# 从文件扩展名中获取 MIME 类型
+
+我正在通过表单发送文件，并且在使用了带有 `multipart/form-data` 的表单后，服务器端的文件对象位于 `req.files` 中。
+
+其中提供了一些信息，比如路径、名称、大小、类型等：
+
+```js
+{
+  logo: File {
+    size: 121920,
+    path: '/path/to/upload_b9e85b7cf989482a1760d82b77fd555a',
+    name: '大头像.png',
+    type: 'image/png',
+    hash: null,
+    lastModifiedDate: 2022-06-07T20:30:12.150Z,
+    //...
+  }
+}
+```
+
+请注意，临时文件路径没有扩展名。
+
+如果您使用服务器端的名称，则没有问题。但是我想更改它并使用我自己的命名约定，所以我只需要文件扩展名。
+
+有两种获取方式：`path` 内置模块和 `mime-types` 包。
+
+使用内置 `path` 模块：
+
+```js
+const path = require('path')
+path.extname(req.files.logo.name) // .png
+```
+
+它不需要任何第三方库。
+
+或者，您可以使用 [mime-types](https://www.npmjs.com/package/mime-types) 包并查看 [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)：
+
+```js
+const mime = require('mime-types')
+
+mime.extension('text/plain') // txt
+mime.extension('image/png') // png
+```
diff --git "a/Node/\344\275\277\347\224\250 Day.js \346\250\241\345\235\227\345\256\236\347\216\260\345\233\275\351\231\205\345\214\226\346\227\245\346\234\237.md" "b/Node/\344\275\277\347\224\250 Day.js \346\250\241\345\235\227\345\256\236\347\216\260\345\233\275\351\231\205\345\214\226\346\227\245\346\234\237.md"
new file mode 100644
index 0000000..7fa9abd
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 Day.js \346\250\241\345\235\227\345\256\236\347\216\260\345\233\275\351\231\205\345\214\226\346\227\245\346\234\237.md"	
@@ -0,0 +1,148 @@
+# 使用 Day.js 模块实现国际化日期
+
+[Day.js](https://dayjs.gitee.io/zh-CN/) 是 [Moment.js](https://momentjs.com/) 的 2kB 轻量化方案，拥有同样强大的 API。
+
+它提供了一系列用于处理日期的方法，且支持多语言，可以很容易地实现国际化日期。
+
+本文将简单介绍一下它如何使用。
+
+## 安装
+
+NPM：
+
+```js
+npm i dayjs
+```
+
+CDN：
+
+```html
+<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
+```
+
+你也可以在 Day.js 官网的控制台测试该库提供的所有功能。
+
+## 基本用法
+
+引入 `dayjs`：
+
+```js
+import dayjs from 'dayjs'
+```
+
+[解析](https://day.js.org/docs/zh-CN/parse/parse)日期：
+
+```js
+const laborDay = dayjs('2022-5-1')
+
+laborDay
+/* M {
+  '$L': 'en',
+  '$d': 2022-04-30T16:00:00.000Z,
+  '$x': {},
+  '$y': 2022,
+  '$M': 4,
+  '$D': 1,
+  '$W': 0,
+  '$H': 0,
+  '$m': 0,
+  '$s': 0,
+  '$ms': 0
+} */
+```
+
+默认情况下，Day.js 使用美式英语（`en`）语言环境，而我们使用的语言是简体中文（`zh-CN`），要使用其他语言环境，可以使用 `locale` 获取或设置时间的国际化：
+
+```js
+// 你需要单独引入语言文件，如果不使用，它们不会包含在构建中
+// 按需加载中文文件
+require('dayjs/locale/zh-cn')
+
+// 只在当前实例中使用
+laborDay.locale('zh-cn') // 设置中文语言
+// or：const laborDay = dayjs('2022-5-1', { locale: 'zh-cn' })
+// 全局使用：dayjs.locale('zh-cn')
+
+laborDay
+/* M {
+  '$L': 'zh-cn',
+  ...
+*/
+```
+
+[显示方法](https://day.js.org/docs/zh-CN/query/query)，例如 `format` 方法：
+
+```js
+laborDay.format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // {2022} 05-01T00:00:00 000 Z 凌晨
+laborDay.format('YYYY MMMM, dddd') // 2022 五月, 星期日
+laborDay.format('YYYY-MM-DD') // 2022-05-01
+```
+
+> [查看所有可用格式的列表](https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#list-of-all-available-formats)。
+
+[取值和赋值方法](https://day.js.org/docs/zh-CN/get-set/get-set)，例如 `month` 和 `set` 方法：
+
+```js
+// 月份数为 0（1月份）- 11（12月份），
+laborDay.month() // 4
+
+laborDay.set('month', 5).month() // 5
+```
+
+[操作方法](https://day.js.org/docs/zh-CN/manipulate/manipulate)，例如 `add` 方法：
+
+```js
+laborDay.add(1, 'year').year() // 2023
+```
+
+[查询方法](https://day.js.org/docs/zh-CN/query/query)，例如 `isBefore` 和 `isAfter` 方法：
+
+```js
+laborDay.isBefore(dayjs()) // true
+laborDay.isAfter(dayjs()) // false
+```
+
+## 高级用法
+
+[插件](https://day.js.org/docs/zh-CN/plugin/plugin)是一个独立的模块，可以添加到 Day.js 以扩展功能或添加新特性。
+
+例如，[`UTC` 插件](https://dayjs.gitee.io/docs/zh-CN/plugin/utc)添加了以 UTC 和本地时间获取日期的方法：
+
+```js
+const dayjs = require('dayjs')
+const utc = require('dayjs/plugin/utc')
+
+dayjs.extend(utc)
+
+const laborDay = dayjs('2022-12-1')
+
+// 将本地时间转换成 UTC 时间
+dayjs.utc().format() // 2022-12-09T17:37:06Z
+
+laborDay.utc().format() // 2022-11-30T16:00:00Z
+
+// 注意这里返回的时间，UTC 返回的日期存在时区偏差，时间相对于本地时间相差八小时
+```
+
+关于国际化，我们可以使用 `AdvancedFormat`、`LocalizedFormat`、`RelativeTime` 和 `Calendar` 插件。
+
+以下是 Day.js 文档 [`Calendar` 插件](https://dayjs.gitee.io/docs/zh-CN/plugin/calendar)的一个示例：
+
+```js
+const dayjs = require('dayjs')
+const calendar = require('dayjs/plugin/calendar')
+
+dayjs.extend(calendar)
+
+console.log(
+  dayjs().calendar(null, {
+    sameDay: '[Today at] h:mm A', // The same day ( Today at 2:30 AM )
+    nextDay: '[Tomorrow at] h:mm A', // The next day ( Tomorrow at 2:30 AM )
+    nextWeek: 'dddd [at] h:mm A', // The next week ( Sunday at 2:30 AM )
+    lastDay: '[Yesterday at] h:mm A', // The day before ( Yesterday at 2:30 AM )
+    lastWeek: '[Last] dddd [at] h:mm A', // Last week ( Last Monday at 2:30 AM )
+    sameElse: 'DD/MM/YYYY' // Everything else ( 17/10/2011 )
+  })
+)
+// Today at 10:04 PM
+```
diff --git "a/Node/\344\275\277\347\224\250 Express \344\270\212\344\274\240\346\226\207\344\273\266.md" "b/Node/\344\275\277\347\224\250 Express \344\270\212\344\274\240\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..de3344a
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 Express \344\270\212\344\274\240\346\226\207\344\273\266.md"	
@@ -0,0 +1,102 @@
+# 使用 Express 上传文件
+
+以下方法使用 AJAX 封装了上传文件的简单示例，将所选文件从 `fileEle` 元素发送到后端：
+
+```js
+const upload = function (fileEle, backendUrl) {
+  return new Promise((resolve, reject) => {
+    // 获取所选文件的列表
+    const files = fileEle.files
+
+    // 创建一个新的 FormData
+    const formData = new FormData()
+
+    // 在文件上循环
+    [].forEach.call(files, function (file) {
+      formData.append(fileEle.name, file, file.name)
+    })
+    // or => [...files].forEach(file => formData.append(fileEle.name, file, file.name))
+
+    // 创建新的 AJAX 请求
+    const req = new XMLHttpRequest()
+    req.open('POST', backendUrl, true)
+
+    // 处理事件
+    req.onload = function () {
+      if (req.status >= 200 && req.status < 400) {
+        resolve(req.responseText)
+      }
+    }
+    req.onerror = function () {
+      reject()
+    }
+
+    // 发送它
+    req.send(formData)
+  })
+}
+```
+
+## 用法
+
+假设我们有一个允许用户选择多个文件的文件输入：
+
+```html
+<input type="file" id="upload" name="files" multiple />
+```
+
+> **注意**：这里我们需要提供一个 `name` 属性，后面我们在后端获取时需要用到。
+
+我们可以在执行上传按钮的单击事件处理程序中使用以下代码：
+
+```js
+const fileEle = document.getElementById('upload')
+
+fileEle.addEventListener('change', async () => {
+  const res = await upload(fileEle, 'http://localhost:5000/upload')
+  const data = JSON.parse(res)
+  console.log(data)
+  // ...
+})
+```
+
+## 使用 Node Express 快速搭建一个服务
+
+使用 Express 快速搭建一个服务，这里我们还使用文件上传库 [Formidable](https://www.npmjs.com/package/formidable)。
+
+以下是使用 Formidable 获取上传文件的操作：
+
+```js
+const app = require('express')()
+const formidable = require('formidable')
+const port = 5000
+
+app.post('/upload', (req, res) => {
+  const form = new formidable.IncomingForm()
+  // 多文件可以传入 options 对象，设置 multiples: true
+  // 详见文档：https://www.npmjs.com/package/formidable
+
+  // 解析 req 并上载所有相关文件
+  form.parse(req, (err, fields, files) => {
+    if (err != null) {
+      console.log(err)
+      return res.status(400).json({ message: err.message })
+    }
+
+    // files 对象包含已上载的所有文件。Formidable 将解析每个文件并为您上载到临时文件。
+    const [firstFileName] = Object.keys(files)
+
+    res.json({ filename: firstFileName })
+  })
+})
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`)
+})
+```
+
+`/upload` 路由处理有 3 个步骤：
+
+- 使用 `new formidable.IncomingForm()` 创建一个新表单。[`IncomingForm` 类](https://www.npmjs.com/package/formidable#api)是实现该功能都主要入口。
+- 对 Express [request](http://expressjs.com/en/4x/api.html#req) 调用 `form.parse()`。这会告诉 Formidable 解析请求并将请求中的任何文件保存到服务器。
+- 处理上传的文件。您可以将文件存储在本地，也可以将文件[七牛云](https://developer.qiniu.com/kodo/1289/nodejs)等服务。`
diff --git "a/Node/\344\275\277\347\224\250 Node.js \346\230\276\347\244\272\346\225\264\344\270\252\345\257\271\350\261\241.md" "b/Node/\344\275\277\347\224\250 Node.js \346\230\276\347\244\272\346\225\264\344\270\252\345\257\271\350\261\241.md"
new file mode 100644
index 0000000..53da791
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 Node.js \346\230\276\347\244\272\346\225\264\344\270\252\345\257\271\350\261\241.md"	
@@ -0,0 +1,75 @@
+# 使用 Node.js 显示整个对象
+
+在大多数情况下，我使用 JavaScript 的 `console.log()`。它可以快速打印出我们想要的东西。
+
+但当我们想要处理更大的对象时，特别是嵌套三层或更多层的任何对象。这是我所指的：
+
+```js
+const myDeepObject = {
+  one: {
+    two: {
+      three: {
+        four: {
+          five: {
+            six: 'too too deep'
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+如果我们尝试使用 `console.log` 访问这个深层次的对象，我们最终会在第三层得到一个 `[Object]`：
+
+```js
+console.log(myDeepObject) // { one: { two: { three: [Object] } } }
+```
+
+如果我们想要显示一个对象的整体，这样的效果显然不尽人意。
+
+有效的解决方案是说那个`util` 模块的 `inspect()` 方法。
+
+```js
+const { inspect } = require('util')
+
+inspect(myDeepObject, { depth: null })
+```
+
+我们将得到：
+
+```js
+/*
+{
+  one: {
+    two: {
+      three: { four: { five: { six: 'too too deep' } } }
+    }
+  }
+}
+*/
+```
+
+还有一种更多简便优雅方法，不需要额外的导入。`console` 有一个名为 `dir` 的方法，在显示对象时设置深度限制（或者不设置限制），该方法的语法与 `util.inspect()` 类似：
+
+```js
+console.dir(myDeepObject, { depth: null })
+```
+
+## JSON.stringify
+
+我们还可以使用 `JSON.stringify()` 输出的内容更具可读性。
+
+> 详细内容请查看：[格式化输出 JSON](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%A0%BC%E5%BC%8F%E5%8C%96%E8%BE%93%E5%87%BA%20JSON.md)
+
+```js
+const think = { eat: '🥩', sleep: '😴' }
+
+console.log(JSON.stringify(think, null, 2))
+/*
+{
+  "eat": "🥩",
+  "sleep": "😴"
+}
+*/
+```
diff --git "a/Node/\344\275\277\347\224\250 Node.js \347\224\237\346\210\220\345\255\220\350\277\233\347\250\213.md" "b/Node/\344\275\277\347\224\250 Node.js \347\224\237\346\210\220\345\255\220\350\277\233\347\250\213.md"
new file mode 100644
index 0000000..5b168cc
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 Node.js \347\224\237\346\210\220\345\255\220\350\277\233\347\250\213.md"	
@@ -0,0 +1,64 @@
+# 使用 Node.js 生成子进程
+
+Node.js 提供了一个 `child_process` 模块，该模块提供了生成子进程的能力。
+
+导入该模块，并从中获取 `spawn`：
+
+```js
+const { spawn } = require('child_process')
+```
+
+然后你可以调用 `spawn()` 传递 2 个参数。
+
+- 第一个参数是要运行的命令。
+- 第二个参数是一个包含选项列表的数组。
+
+这里有一个例子：
+
+```js
+spawn('ls', ['-lh', 'test'])
+```
+
+以上示例中，运行 `ls` 命令，有 2 个选项: `-lh` 和 `test`。这将生成命令 `ls -lh test`，它（假设 test 文件存在于您运行此命令的同一文件夹中）会生成有关文件的详细信息：
+
+```bash
+$ ls -lh test
+# -rw-r--r-- 1 blog staff 6B Sep 25 09:57 test
+```
+
+调用 `spawn()` 方法的结果是 `ChildProcess` 类的一个实例，用于标识生成的子进程。
+
+这里有一个稍微复杂一点的例子。我们观察 `test` 文件，当它发生变化时，我们在它上面运行 `ls -lh` 命令:
+
+```js
+'use strict'
+
+const fs = require('fs')
+const { spawn } = require('child_process')
+const filename = 'test'
+
+fs.watch(filename, () => {
+  const ls = spawn('ls', ['-lh', filename])
+})
+```
+
+还少了一样东西。我们必须将子进程的输出通过管道传输到主进程，否则我们将看不到它的任何输出。
+
+我们通过调用子进程的 `stdout` 属性上的 `pipe()` 方法来实现:
+
+```js
+'use strict'
+
+const fs = require('fs')
+const { spawn } = require('child_process')
+const filename = 'test'
+
+fs.watch(filename, () => {
+  const ls = spawn('ls', ['-lh', filename])
+  ls.stdout.pipe(process.stdout)
+})
+```
+
+## 更多资料
+
+[在 Node.js 中使用 execa 运行命令](https://github.com/lio-zero/blog/blob/main/Node/%E5%9C%A8%20Node.js%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20execa%20%E8%BF%90%E8%A1%8C%E5%91%BD%E4%BB%A4.md)
diff --git "a/Node/\344\275\277\347\224\250 Node.js \351\200\222\345\275\222\345\210\233\345\273\272\347\233\256\345\275\225.md" "b/Node/\344\275\277\347\224\250 Node.js \351\200\222\345\275\222\345\210\233\345\273\272\347\233\256\345\275\225.md"
new file mode 100644
index 0000000..aa3bee5
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 Node.js \351\200\222\345\275\222\345\210\233\345\273\272\347\233\256\345\275\225.md"	
@@ -0,0 +1,56 @@
+# 使用 Node.js 递归创建目录
+
+最近，在处理一个新项目时，我需要创建一系列嵌套目录。从命令行，这很简单，只需将 `-p` 传递给 `mkdir`，它就会自动创建所有父目录。就像这样
+
+```bash
+$ mkdir -pv ./path/to/my/directory
+
+# mkdir: created directory './path'
+# mkdir: created directory './path/to'
+# mkdir: created directory './path/to/my'
+# mkdir: created directory './path/to/my/directory'
+```
+
+使用 Node.js 的现代版本，特别是 10 及以上版本，您可以使用 `fs` 实现相同的功能：
+
+## 同步
+
+```js
+const fs = require('fs')
+
+fs.mkdirSync('./path/to/my/directory', { recursive: true })
+```
+
+## 异步
+
+```js
+const fs = require('fs')
+
+await fs.promises.mkdir('./path/to/my/directory', { recursive: true })
+```
+
+假设您使用的是 Node.js 的旧版本，并且不愿意升级到 10+，那么您将不得不手动执行更多操作。
+
+要点是，您需要将路径分开并循环遍历其中的每个部分，同时创建不存在的父目录。看起来像这样：
+
+```js
+const fs = require('fs')
+
+const path = './path/to/my/directory'
+
+path.split('/').reduce((directories, directory) => {
+  directories += `${directory}/`
+
+  if (!fs.existsSync(directories)) {
+    fs.mkdirSync(directories)
+  }
+
+  return directories
+}, '')
+```
+
+`fs.existsSync()` 将判断目录是否存在，如果该目录不存在，使用 `fs.mkdirSync()` 以同步的方式创建目录。
+
+## 更多资料
+
+[Node.js 文件系统模块](https://github.com/lio-zero/blog/blob/master/Node/Node.js%20%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F%E6%A8%A1%E5%9D%97.md)
diff --git "a/Node/\344\275\277\347\224\250 Nodemailer \345\217\221\351\200\201\347\224\265\345\255\220\351\202\256\344\273\266.md" "b/Node/\344\275\277\347\224\250 Nodemailer \345\217\221\351\200\201\347\224\265\345\255\220\351\202\256\344\273\266.md"
new file mode 100644
index 0000000..f6d09fd
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 Nodemailer \345\217\221\351\200\201\347\224\265\345\255\220\351\202\256\344\273\266.md"	
@@ -0,0 +1,172 @@
+# 使用 Nodemailer 发送电子邮件
+
+[Nodemailer](https://nodemailer.com/about/) 是一个对 Node.js 零依赖的单一模块，专为发送电子邮件而设计。其主要特点包括（但不限于）：
+
+- 平台独立性
+- 安全性，特别是使用 TLS/STARTTLS 和 DKIM 电子邮件身份验证的电子邮件传送
+- Unicode 支持
+- HTML 内容和嵌入的图像附件
+- 除了 SMTP 支持之外，还有不同的传输方法。
+- etc
+
+## 安装
+
+```bash
+npm i nodemailer
+```
+
+> 版本要求 Node >= 6.0，如果想要与 `async/await` 一起使用，Node 需要大于 v8.0.0。
+
+导入：
+
+```js
+const nodemailer = require('nodemailer')
+```
+
+## 发送电子邮件
+
+要使用 Nodemailer 发送消息，有三个主要步骤。
+
+- 创建 Nodemailer 传输器
+- 设置 Nodemailer [消息选项](https://nodemailer.com/message/)
+- 使用 `sendMail()` 发送消息
+
+### 创建 Nodemailer 传输器
+
+SMTP 是最常见的传输器。但是还有其他可用选项的列表：
+
+- 内置传输
+  - `sendmail` — 用于简单消息的常规 `sendmail` 命令。类似于 PHP 中的 `mail()` 函数。
+  - `SES` — 是一个围绕 AWS SDK 的 Nodemailer 包装器，通过使用 [Amazon SES](https://aws.amazon.com/ses/) 发送电子邮件来处理大量电子邮件。
+  - `stream` — 用于测试目的的缓冲区，用于返回消息。
+- 对外传输。简而言之，您可以创建自己的传输方式。
+
+> 详细查阅 [transports](https://nodemailer.com/transports/)。
+
+使用 SMTP，一切都非常简单。设置主机、端口、身份验证详细信息和方法，仅此而已。
+
+```js
+// 使用默认 SMTP 传输创建可重用的传输对象
+let transporter = nodemailer.createTransport({
+  host: 'smtp.163.com', // 发送端邮箱类型
+  port: 465, // 端口号
+  secureConnection: true, // 使用 SSL
+  auth: {
+    user: 'xxxxx', // 发送方的邮箱地址（自己的）
+    pass: 'xxxxx' // mtp 验证码
+  }
+})
+```
+
+如果需要，您还可以添加 `debug` 和 `logger` 调试选项。
+
+在此阶段验证 SMTP 连接是否正确也很有用：添加验证（回调）调用以测试连接和身份验证。
+
+```js
+transporter.verify((error, success) => {
+  if (error) {
+    console.log(error)
+  } else {
+    console.log('服务器已准备好接收我们的消息')
+  }
+})
+```
+
+### 设置 Nodemailer 消息选项
+
+此时，我们应该指定发件人、邮件收件人以及邮件的内容。
+
+记住，Unicode 是受支持的，因此您也可以包含表情符号！
+
+要发送 HTML 格式的文本，不需要额外的属性，只需将 HTML 正文放入带有 `html` 属性的消息中。对于高级模板，您可以添加附件和嵌入图像。
+
+我们先来看一下这个简单消息选项的例子：
+
+```js
+let mailOptions = await transporter.sendMail({
+  from: {
+    name: '帅气逼人',
+    address: 'xxxx'
+  }, // 发件人邮箱地址
+  to: mail, // 收件人邮箱地址，可以同时发送多个。例如：'user1@example.com, user2@example.com'
+  subject: '使用 Nodemailer 发送电子邮件', // 邮件标题
+  text: '验证码为：' + code // 邮件内容，code 为发送的验证码信息，这里的内容可以自定义
+  html: '<b>嘿! </b><br> 这是我使用 Nodemailer 发送的第一条消息🎉👏'
+})
+```
+
+`text` 和 `html` 您可以任意选择一个，如果两者同时存在，`html` 优先级比 `text` 高。
+
+#### Nodemailer 中的附件
+
+您可以使用以下主要属性向 Nodemailer 中的邮件添加不同类型的数据：
+
+- `filename` — 附加文件的名称。在这里，您也可以使用 Unicode。
+- `content` — 附件的正文。它可以是字符串、缓冲区或流。
+- `path` — 文件的路径，用于流式传输，而不是将其包含在消息中。对于大型附件来说，这是一个不错的选择。
+- `href` — 附件 URL。还支持数据 URI。
+
+```js
+attachments: [
+  {
+    // 使用 utf-8 字符串作为附件
+    filename: 'text.txt',
+    content: 'hello world!'
+  }
+]
+```
+
+以上使用 `attachments` 属性来添加附件，其中每个对象代表一个附件。
+
+还有一些可选属性，允许您添加特定的内容类型或内联图像。
+
+`contentType` — 如果不设置它，它将从 `filename` 属性中推断出来。
+
+```js
+// 字符串附件
+{
+  filename: 'notes.txt',
+  content: 'new important notes',
+  contentType: 'text/plain' // 可选，将从文件名中检测到
+}
+```
+
+`cid` — HTML 消息中的内联图像。请注意，CID 值应该是唯一的。
+
+```js
+// 文件流附件
+{
+  filename: 'matrix neo.gif',
+  path: __dirname + '/assets/neo.gif',
+  cid: 'neo@example.com' // 应该尽可能独特
+}
+```
+
+`encoding` — 可以添加到字符串类型的内容中。它将根据您设置的编码值（`base64`、二进制等）将内容编码为缓冲区类型。
+
+```js
+// 二进制缓冲区附件
+{
+  filename: 'image.png',
+  content: Buffer.from('iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC', 'base64')
+}
+```
+
+### 使用 `sendMail()` 发送消息
+
+一旦我们创建了一个传输器并配置了一条消息，我们就可以使用 `sendMail()` 方法发送它：
+
+```js
+transport.sendMail(mailOptions, (error, info) => {
+  if (error) return console.log(error)
+  console.log('Message sent: %s', info.messageId)
+})
+```
+
+> 这里先讲这么多，后面会写一些例子进行补充。另外，Nodemailer 支持 [Ethereal Email](https://ethereal.email/) 提供的测试账户。创建一个 Ethereal 帐户并使用为您生成的用户名和密码。
+
+## 更多资料
+
+- [mailtrap](https://mailtrap.io/blog/) 众多关于电子邮件文章
+- [官方示例](https://github.com/nodemailer/nodemailer/blob/master/examples/full.js)
+- [nodemailer-amqp-example](https://github.com/nodemailer/nodemailer-amqp-example) 将 Nodemailer 与 RabbitMQ 一起使用的示例。
diff --git "a/Node/\344\275\277\347\224\250 fs \346\250\241\345\235\227\347\232\204\346\216\250\350\215\220\346\226\271\346\263\225.md" "b/Node/\344\275\277\347\224\250 fs \346\250\241\345\235\227\347\232\204\346\216\250\350\215\220\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..d53a302
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 fs \346\250\241\345\235\227\347\232\204\346\216\250\350\215\220\346\226\271\346\263\225.md"	
@@ -0,0 +1,41 @@
+# 使用 fs 模块的推荐方法
+
+在编写使用 `fs` 模块的 Node.js 脚本时，我通常使用 `util.promisify` 方法来保证文件系统方法。基于 Promise 的方法允许使用 `async/await`，这使得代码更容易掌握和阅读。
+
+从 Node.js 11 开始，`fs` 模块在 [`promises` 属性中提供了 `promisify` 方法](https://nodejs.org/api/fs.html#fs_fs_promises_api)。
+
+```js
+// 旧的方法使用 util.promisify
+const { readFile } = require('fs')
+const { promisify } = require('util')
+const promisifiedReadFile = promisify(readFile)
+
+promisifiedReadFile(__filename, { encoding: 'utf8' }).then((data) =>
+  console.log(data)
+)
+
+// 使用基于 promise 的 fs 的新方法
+const { readFile } = require('fs').promises
+readFile(__filename, { encoding: 'utf8' }).then((data) => console.log(data))
+```
+
+使用 `promises` 属性，您现在可以跳过将回调转换为 promise 的步骤，无需使用 `util.promisify`。这对于扁平化一些源代码并使用 `async/await` 是个好消息！
+
+## `fs/promises` 从 Node.js 14 开始可用
+
+从 Node.js 14 开始，`fs` 模块提供了两种使用基于 promises 的文件系统的方法。这些 promises 可以通过 `require('fs').promises` 或 `require('fs/promises')` 获得。
+
+```js
+// 从 Node.js v14 开始：使用基于 Promise 的 fs 方法
+const { readFile } = require('fs/promises')
+
+readFile(__filename, { encoding: 'utf8' }).then((data) => console.log(data))
+```
+
+Node.js 的维护者们对于 `/promises` 路径方式来公开更多现有模块的基于 promise 的方法表示赞成。
+
+后面的 Node.js 版本也遵循了这种做法。
+
+## 更多资料
+
+[Node.js 文件系统模块](https://github.com/lio-zero/blog/blob/master/Node/Node.js%20%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F%E6%A8%A1%E5%9D%97.md)
diff --git "a/Node/\344\275\277\347\224\250 fs.extra \346\250\241\345\235\227\346\233\277\344\273\243 fs.md" "b/Node/\344\275\277\347\224\250 fs.extra \346\250\241\345\235\227\346\233\277\344\273\243 fs.md"
new file mode 100644
index 0000000..bfd01b7
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 fs.extra \346\250\241\345\235\227\346\233\277\344\273\243 fs.md"	
@@ -0,0 +1,71 @@
+# 使用 fs.extra 模块替代 fs
+
+[`fs-extra`](https://github.com/jprichardson/node-fs-extra) 是原生 `fs` 的替代品。该模块继承了 `fs-extra` 中所有方法，添加了原生 `fs` 模块中不包含的文件系统方法，并向 `fs` 方法添加了 promise 支持。
+
+## 基本用法
+
+安装：
+
+```js
+npm i fs-extra
+```
+
+引入：
+
+```js
+const fse = require('fs-extra')
+```
+
+`fs-extra` 提供的每个方法都有同步和异步版本，例如：
+
+```js
+const { copy, copySync } = require('fs-extra')
+
+// 同步
+try {
+  copySync('/tmp/myFile', '/tmp/myNewFile')
+  console.log('success!')
+} catch (err) {
+  console.error(err)
+}
+
+// 异步 promise
+copy('/tmp/myFile', '/tmp/myNewFile')
+  .then(() => console.log('success!'))
+  .catch((err) => console.error(err))
+
+// 异步回调
+copy('/tmp/myFile', '/tmp/myNewFile', (err) => {
+  if (err) return console.error(err)
+  console.log('success!')
+})
+```
+
+异步方法还可以使用 `async/await`：
+
+```js
+async function copyFiles() {
+  try {
+    await copy('/tmp/myFile', '/tmp/myNewFile')
+    console.log('success!')
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+copyFiles()
+```
+
+## 清空文件夹
+
+使用 `emptyDirSync()` 方法清空文件夹的所有文件：
+
+```js
+const { emptyDirSync } = require('fs-extra')
+
+const folder = './node_modules'
+
+emptyDirSync(folder)
+```
+
+> [点击此处查看所有的 API 示例](https://github.com/jprichardson/node-fs-extra/tree/0220eac966d7d6b9a595d69b1242ab8a397fba7f/docs)
diff --git "a/Node/\344\275\277\347\224\250 node-cron \345\234\250 Node.js \344\270\255\350\260\203\345\272\246\344\273\273\345\212\241.md" "b/Node/\344\275\277\347\224\250 node-cron \345\234\250 Node.js \344\270\255\350\260\203\345\272\246\344\273\273\345\212\241.md"
new file mode 100644
index 0000000..00d502e
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 node-cron \345\234\250 Node.js \344\270\255\350\260\203\345\272\246\344\273\273\345\212\241.md"	
@@ -0,0 +1,287 @@
+# 使用 node-cron 在 Node.js 中调度任务
+
+没有一个开发人员愿意把所有时间都花在繁琐的任务上，比如系统维护和管理、日常数据库备份以及定期下载文件和电子邮件。你更愿意专注于富有成效的工作，而不是跟踪这些烦人的琐事何时需要完成。
+
+这时就需要使用到**任务调度**，它将帮助您解决这样的问题。
+
+**任务调度**使您能够计划任意代码（方法/函数）和命令在固定日期和时间、重复间隔或指定间隔后执行一次。在 Linux 操作系统中，任务调度通常由诸如 cron 之类的实用程序服务在操作系统级别处理。
+
+在 Node.js 应用程序中，类似于 cron 的功能，我们可以使用 [node-cron](https://github.com/kelektiv/node-cron) 这样的包实现。正如开发者所介绍的，**[node-cron](https://www.npmjs.com/package/node-cron)** 是基于 GNU crontab 的 node.js 纯 JavaScript 中的微型任务调度器。
+
+crontab 是 Linux 系统的定时任务执行器。cron 的操作由 [crontab](https://www.gnu.org/software/mcron/manual/html_node/Crontab-file.html) 文件驱动，该文件是一个配置文件，其中包含对 cron 守护程序的指令。`node-cron` 模块允许我们使用完整的 crontab 语法在 Node 中调度任务。
+
+> 🎉**推荐工具**
+>
+> [crontab 编辑器](https://crontab.guru/)：在线工具可以可视化生成 crontab 的配置文件。
+
+crontab 语法如下所示：
+
+```txt
+┌────────────── second (可选)
+│ ┌──────────── 分钟 (minute，0 - 59)
+│ │ ┌────────── 小时 (hour，0 - 23)
+│ │ │ ┌──────── 一个月中的第几天 (day of month，1 - 31)
+│ │ │ │ ┌────── 月份 (month，1 - 12)
+│ │ │ │ │ ┌──── 一个星期中星期几 (day of week，0 - 6) 注意：星期天为 0
+│ │ │ │ │ │
+│ │ │ │ │ │
+* * * * * *
+```
+
+单个星号的行为类似于通配符。这意味着该任务将针对该时间单位的每个实例运行。五个星号（`* * * * *`）表示 crontab 默认每分钟运行一次。
+
+星号处的数字将被视为该时间单位的值。允许您将任务安排为每天、每周或更复杂的时间。
+
+将上面的图形表示重新编写成表格，允许的 cron 值包括以下内容。
+
+| **字段**           | **值**                                 |
+| ------------------ | -------------------------------------- |
+| `second`           | 0-59                                   |
+| `minute`           | 0-59                                   |
+| `hour`             | 0-23                                   |
+| `day of the month` | 1-31                                   |
+| `month`            | 1-12（或月份简写 Jan、Feb...）         |
+| `day of the week`  | 0-7（或 Jan、Feb...，0 或 7 是星期日） |
+
+下面我们来看看它的一些用法和用例。
+
+## 使用 node-cron
+
+使用 `npm` 安装 `node-cron` 模块。
+
+```bash
+npm i node-cron
+```
+
+### 语法
+
+```js
+cron.schedule(cronExpression: string, task: Function, options: Object)
+```
+
+### 选项
+
+- `scheduled`：一个布尔值（`boolean`），用于设置创建的任务是否已安排（默认值为 `true`）。
+- `timezone`：用于任务调度的时区。有关有效值，可参考 [moment-timezone](https://momentjs.com/timezone)。
+
+看看下面的例子。
+
+```js
+const cron = require('node-cron')
+
+cron.schedule('5 * * * * *', () => {
+  console.log('每分钟在第 5 秒运行任务')
+})
+```
+
+时间规范的位置 2、3、4、5 和 6 中的星号（`*`）类似于用于时间划分的文件 glob 或通配符；它们分别指定**每分钟**、**每小时**、**每月的每一天**、**每月和每周的每一天**。
+
+以下代码将在每天凌晨 5:30 运行。
+
+```js
+const cron = require('node-cron')
+
+cron.schedule('30 5 * * *', () => {
+  console.log('每天凌晨 5:30 运行任务')
+})
+```
+
+## 任务调度提示和技巧
+
+现在我们已经了解了基本知识，让我们做一些更有趣的事情。
+
+假设您希望在每周五下午 4 点运行一项特定任务。代码如下所示：
+
+```js
+const cron = require('node-cron')
+
+cron.schedule('0 16 * * friday', () => {
+  console.log('每周五下午 16:00 运行任务')
+})
+```
+
+或者，您可能需要每个季度（1 月、4 月、7 月和 10 月）运行一次数据库备份。crontab 语法没有**一个月的最后一天**选项，因此您可以使用**下个月的第一天**，如下所示。
+
+```js
+const cron = require('node-cron')
+
+cron.schedule('2 3 1 1,4,7,10 *', () => {
+  console.log('在每个季度第一天的 03:02 运行任务')
+})
+```
+
+下面显示的任务从上午 10 点到下午 6 点，每小时 5 分钟运行任务。
+
+```js
+const cron = require('node-cron')
+
+cron.schedule('5 10-18 * * *', () => {
+  console.log('从上午 10 点到下午 18 点，每小时第 5 分钟运行任务')
+})
+```
+
+在某些情况下，您可能需要每两小时、三小时或四小时运行一次任务。您可以通过将小时数除以所需的时间间隔来完成此操作，例如，每四小时 `*4`，或在上午 12 点到下午 12 点之间每三小时运行 `0-12/3`。
+
+分钟也可以用同样的方法划分。例如，`minutes` 位置的表达式为 `*/10`，表示**每 10 分钟运行一次任务**。
+
+下面的任务在上午 8 点到下午 5:58 之间每两小时后的每 5 分钟运行一次任务。
+
+```js
+const cron = require('node-cron')
+
+cron.schedule('*/5 8-18/2 * * *', () => {
+  console.log('从上午 8 点到下午 18 点，每 2 小时后的每 5 分钟运行一次任务')
+})
+```
+
+## 定时任务方法
+
+让我们关注一下三个关键的定时任务方法。
+
+### 开始任务
+
+将 `scheduled` 选项值设置为 `false` 时，任务将被调度，但无法启动，即使 cron 表达式正在滴答作响。
+
+要启动这样的任务，您需要调用 `start` 方法。
+
+```js
+const cron = require('node-cron')
+
+const task = cron.schedule('*/5 8-18/2 * * *', () => {
+  console.log('从上午 8 点到下午 18 点，每 2 小时后的每 5 分钟运行一次任务')
+})
+
+task.start()
+```
+
+### 停止任务
+
+如果需要停止任务运行，可以使用 `stop` 方法将 `scheduled` 选项设置为 `false`。除非重新启动，否则不会执行该任务。
+
+```js
+const cron = require('node-cron')
+
+const task = cron.schedule('*/5 8-18/2 * * *', () => {
+  console.log('从上午 8 点到下午 18 点，每 2 小时后的每 5 分钟运行一次任务')
+})
+
+task.stop()
+```
+
+### 销毁任务
+
+`destroy` 方法停止任务并将其完全销毁。
+
+```js
+const cron = require('node-cron')
+
+const task = cron.schedule('*/5 8-18/2 * * *', () => {
+  console.log('从上午 8 点到下午 18 点，每 2 小时后的每 5 分钟运行一次任务')
+})
+
+task.destroy()
+```
+
+以上便是 `node-cron` 的大部分功能，您应该使用这些功能来安排频繁运行的任务。
+
+## 示例：删除错误日志文件
+
+考虑一个场景，您需要在每个月的第十五天定期从服务器中删除日志文件。
+
+```js
+const cron = require('node-cron')
+const fs = require('fs')
+
+cron.schedule('0 0 15 * *', () => {
+  fs.unlink('./error.log', (err) => {
+    if (err) throw err
+    console.log('错误日志文件已成功删除')
+  })
+})
+```
+
+## 示例：备份数据库
+
+确保用户数据的保存是任何业务的关键。如果发生意外事件，并且数据库损坏，则需要从备份中恢复数据库。如果您的业务没有任何形式的现有备份，您将面临严重的麻烦。
+
+考虑一个场景，您需要在每天晚上 11:59 例行备份数据库转储。
+
+假设您已经在环境中安装并运行了 SQLite。给定一个名为 `database.sqlite` 的数据库，用于进行数据库备份的 shell 命令可能类似于：
+
+```bash
+sqlite3 database.sqlite .dump > data_dump.sql
+```
+
+为了执行以上命令，我们安装 `shelljs`：
+
+```bash
+pnpm install shelljs
+```
+
+它可以在运行 shell 命令。
+
+完整示例如下：
+
+```js
+const cron = require('node-cron')
+const shell = require('shelljs')
+
+// 每天晚上 11:59 备份数据库
+cron.schedule('59 23 * * *', () => {
+  if (shell.exec('sqlite3 database.sqlite .dump > data_dump.sql').code !== 0) {
+    shell.exit(1)
+  } else {
+    shell.echo('数据库备份完成')
+  }
+})
+```
+
+## 示例：发送预定的电子邮件
+
+发送电子邮件，nodemailer 包可以帮助到我们，安装：
+
+```bash
+pnpm i nodemailer
+```
+
+假设我们需要在每周五为公司员工统一发送一封邮件：
+
+```js
+const cron = require('node-cron')
+const nodemailer = require('nodemailer')
+
+// 创建邮件传输器
+let transporter = nodemailer.createTransport({
+  host: 'your_demo_email_smtp_host.example.com',
+  port: your_demo_email_port,
+  auth: {
+    user: 'your_demo_email_address@example.com',
+    pass: 'your_demo_email_password'
+  }
+})
+
+// 每周五发送邮件
+cron.schedule('0 0 * * 5', () => {
+  let messageOptions = {
+    from: 'your_demo_email_address@example.com',
+    to: 'your_demo_email_address@example.com',
+    subject: '预定电子邮件',
+    text: '你好，这封电子邮件是公司自动发送的。'
+  }
+
+  transporter.sendMail(messageOptions, (error, info) => {
+    if (error) {
+      throw error
+    } else {
+      console.log('电子邮件已成功发送！')
+    }
+  })
+})
+```
+
+如果需要测试效果，Nodemailer 支持 [Ethereal Email](https://ethereal.email/) 提供的测试账户。创建一个 Ethereal 帐户并使用为您生成的用户名和密码。
+
+## 更多资料
+
+- [node-schedule](https://www.npmjs.com/package/node-schedule) — 与 node-cron 类似的库
+- [How To Easily And Safely Manage Cron Jobs In Linux](https://ostechnix.com/how-to-easily-and-safely-manage-cron-jobs-in-linux/)
diff --git "a/Node/\344\275\277\347\224\250 nodemon \350\207\252\345\212\250\351\207\215\345\220\257 Node.js \345\272\224\347\224\250\347\250\213\345\272\217.md" "b/Node/\344\275\277\347\224\250 nodemon \350\207\252\345\212\250\351\207\215\345\220\257 Node.js \345\272\224\347\224\250\347\250\213\345\272\217.md"
new file mode 100644
index 0000000..8c0c072
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 nodemon \350\207\252\345\212\250\351\207\215\345\220\257 Node.js \345\272\224\347\224\250\347\250\213\345\272\217.md"	
@@ -0,0 +1,301 @@
+# 使用 nodemon 自动重启 Node.js 应用程序
+
+[nodemon](http://nodemon.io/) 是一种工具，可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。
+
+## nodemon 特性
+
+- 自动重新启动应用程序。
+- 检测要监视的默认文件扩展名。
+- 默认支持 node，但易于运行任何可执行文件，如 python、ruby、make 等。
+- 忽略特定的文件或目录。
+- 监视特定目录。
+- 使用服务器应用程序或一次性运行实用程序和 REPL。
+- 可通过 Node require 语句编写脚本。
+- 开源，在 [github](https://github.com/remy/nodemon/) 上可用。
+
+## 安装
+
+全局安装：
+
+```bash
+npm i -g nodemon
+```
+
+本地安装：
+
+```bash
+npm i -D nodemon
+```
+
+注意：本地安装需要在 `package.json` 文件的 script 脚本中指定要需要执行的命令
+
+```json
+{
+  "script": {
+    "dev": "nodemon app.js"
+  }
+}
+```
+
+使用 `npm dev` 运行
+
+## 使用
+
+`nodemon` 一般只在开发时使用，它最大的长处在于 watch 功能，一旦文件发生变化，就自动重启进程。
+
+```bash
+# 默认监视当前目录的文件变化
+$ nodemon app.js
+
+# 指定主机和端口作为参数，表示在本地 3697 端口启动 node 服务
+$ nodemon app.js localhost 3697
+```
+
+## 参数
+
+您可以使用以下命令查看所有可用选项：
+
+```bash
+nodemon --help
+```
+
+以下是它们的详细解释。
+
+### watch
+
+监控的文件夹路径或者文件路径。
+
+`watch` 可以监控多个目录，默认值：`'*.*'`。默认情况下，nodemon 监控当前工作目录。如果您想要控制该选项，请使用该选项添加特定路径：`--watch`
+
+```bash
+# 监控指定文件夹或者文件变化
+$ nodemon --watch app --watch libs app.js
+```
+
+现在，`nodemon` 只有在 `./app` 目录或 `./libs` 目录下文件发生变化时才会重新启动。
+
+### ext
+
+默认监听：`"js, mjs, json"`
+
+监控指定后缀名的文件，用空格间隔。
+
+`ext` 监听指定文件扩展名的文件。默认情况下，nodemon 查找扩展名为 `.js`，`.mjs`，`.coffee`，`.litcoffee`，和 `.json` 的文件。
+
+使用 `-e` 或 `--ext` 指定监听的文件扩展名，如下所示：
+
+```bash
+nodemon -e js,pug
+```
+
+**优先级**：nodemon 会先读取 `watch` 里面需要监听的文件或文件路径，再从文件中选择监控 `ext` 中指定的后缀名，最后去掉从 `ignore` 中指定的忽略文件或文件路径。
+
+### exec
+
+`exec` 执行项。若设定了执行项，`nodemon` 将执行程序而不是 JavaScript 脚本。
+
+```bash
+nodemon --exec "python -v" ./app.py
+```
+
+### ignore
+
+`ignore` 忽略项（包括文件、目录或文件名通配符匹配）。
+
+注意，默认情况下，nodemon 会忽略 `.git`，`node_modules`，`bower_components`，`.nyc_output`，`coverage` 和 `.sass-cache` 目录，并添加你的忽略模式到列表中。将 `ignore` 置空并不能取消忽略。
+
+```bash
+# 忽略特定的文件
+$ nodemon --ignore lib/app.js
+
+# 忽略多个目录
+$ nodemon --ignore lib/ --ignore tests/
+
+# 使用通配符匹配（但是一定要引用引号），* 表示该文件夹下的所有后缀为 .js 的文件
+$ nodemon --ignore 'lib/*.js'
+```
+
+### execMap
+
+`execMap` 设置运行服务的后缀名与对应的命令。
+
+```json
+{
+  "execMap": {
+    "js": "npm -v"
+  }
+}
+```
+
+可以用来定义默认可执行文件，如果您使用的语言在默认情况下不受 Node 支持，则此应用特别有用。
+
+```json
+{
+  "execMap": {
+    "pl": "perl"
+  }
+}
+```
+
+现在运行以下命令，nodemon 将知道将其 `perl` 用作可执行文件：
+
+```bash
+nodemon app.pl
+```
+
+设置运行服务的后缀名与对应的命令
+
+### delay
+
+`delay` 延迟重启时间（毫秒）。延迟重启类似于 JavaScript 函数中的函数节流，只在最后一次更改的文件往后延迟重启，以避免了短时间多次重启。
+
+```bash
+nodemon --delay 10 app.js
+nodemon --delay 2.5 app.js
+nodemon --delay 2500ms app.js
+```
+
+### verbose
+
+`verbose` 设置日志输出模式，true 详细模式
+
+```json
+{
+  "verbose": true
+}
+```
+
+![verbose](https://upload-images.jianshu.io/upload_images/18281896-1a91aa63832544b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### colours
+
+`colours` 默认为 `true`，输出信息颜色标示。
+
+```json
+{
+  "colours": "false"
+}
+```
+
+![colours](https://upload-images.jianshu.io/upload_images/18281896-799e140182bdc11d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### events
+
+`events` 表示 nodemon 运行到某些状态时的一些触发事件，总共有五个状态：
+
+- `start`：子进程（即监控的应用）启动
+- `crash`：子进程崩溃，不会触发 exit
+- `exit`：子进程完全退出，不是非正常的崩溃
+- `restart`：子进程重启
+- `config:update`：nodemon 的 config 文件改变
+
+参考：[使用 nodemon 作为子进程](https://github.com/remy/nodemon/blob/master/doc/events.md#Using_nodemon_as_child_process)
+
+### restartable
+
+`restartable` 设置重启模式。重启的命令，默认是 rs，可以改成你自己喜欢的字符串。
+
+```json
+{
+  "restartable": "nv"
+}
+```
+
+在运行的情况下输入 `rs` 即可
+
+![restartable](https://upload-images.jianshu.io/upload_images/18281896-9ab0e9c811f2de24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### env
+
+`env` 运行环境
+
+```json
+{
+  "env": {
+    "NODE_ENV": "development", // 开发环境
+    "PORT": "3000" // 端口号
+  }
+}
+```
+
+## 配置文件
+
+你可以在命令行中添加参数选项以支持某种功能，也可以使用本地和全局配置文件。可以使用 `--config` 选项指定备用本地配置文件。
+
+```json
+// nodemon.json
+{
+  "restartable": "nv",
+  "delay": 1000,
+  "colours": false,
+  "verbose": true,
+  "ignore": ["./src"],
+  "watch": ["app.js", "src"],
+  "events": {
+    "restart": "osascript -e 'display notification \"app restarted\" with title \"nodemon\"'"
+  },
+  "execMap": {
+    "js": "npm -v"
+  },
+  "ext": "js, json",
+  "env": {
+    "NODE_ENV": "development",
+    "PORT": "3000"
+  }
+}
+```
+
+注意，使用 `execMap` 代替 `--exec`。`execMap` 允许您为某些文件扩展名指定二进制文件。
+
+如果您不想将 `nodemon.json` 配置文件添加到项目中，你还可以在 `package.json` 中使用 `nodemonConfig` 字段进行配置，这时独立配置文件将被忽略。
+
+```json
+{
+  "name": "demo",
+  "nodemonConfig": {
+    "ignore": ["node_modules", "dist"], // 忽略 node_modules 和 dist 文件
+    "delay": "2500",
+    "watch": ["app.js", "src"]
+  }
+}
+```
+
+**优先级**：本地配置文件 -> nodemonConfig -> 全局配置文件。命令行中指定的参数选项会被本地配置文件覆盖，而在 `package.json` 中配置的会被命令行覆盖。
+
+每次修改配置文件修改完记得重启一下。
+
+## nodemon 的默认配置文件
+
+nodemon 的[默认配置文件](https://github.com/remy/nodemon/blob/master/lib/config/defaults.js)
+
+```js
+var ignoreRoot = require('ignore-by-default').directories()
+
+// 默认选项配置选项
+module.exports = {
+  restartable: 'rs',
+  colours: true,
+  execMap: {
+    py: 'python',
+    rb: 'ruby',
+    ts: 'ts-node'
+    // 更多的可以在这里添加，如 ls:lsc - 但请确保它是交叉的与 linux、mac 和 windows 兼容，或使 default.js 为基于 node 的实用程序动态附加 .cmd
+  },
+  watch: ['*.*'],
+  stdin: true,
+  runOnChangeOnly: false, // 为 true 时运行 nodemon xxx 项目不会启动，只保持对文件的监控，当监控的文件有修改并保存时才会启动应用，其他没有影响。默认是 false 即一开始就启动应用并监控文件改动。
+  verbose: false,
+  signal: 'SIGUSR2',
+  stdout: true, // 这个是关于标准输入输出的设置，上文提到 nodemon.json 文件中的 events 字段可以为状态设置标准输入输出语句，如果这里设置了 false，标准输入输出语句就会失效。
+  watchOptions: {}
+}
+```
+
+## 更多
+
+- [使用 nodemon 作为模块](https://github.com/remy/nodemon/blob/master/doc/requireable.md)
+- [gulp-nodemon](https://github.com/JacksonGariety/gulp-nodemon) 插件，将 nodemon 与项目的其余 Gulp 工作流程集成在一起。
+- [grunt-nodemon](https://github.com/ChrisWren/grunt-nodemon) 插件，将 nodemon 与项目的其余 Grunt 工作流程集成在一起。
+- [常问问题](https://github.com/remy/nodemon/blob/master/faq.md#overriding-the-underlying-default-ignore-rules)
+
+<!-- https://www.digitalocean.com/community/tutorials/workflow-nodemon -->
diff --git "a/Node/\344\275\277\347\224\250 pm2 \344\270\272 Node.js \345\272\224\347\224\250\347\250\213\345\272\217\346\217\220\344\276\233\346\234\215\345\212\241.md" "b/Node/\344\275\277\347\224\250 pm2 \344\270\272 Node.js \345\272\224\347\224\250\347\250\213\345\272\217\346\217\220\344\276\233\346\234\215\345\212\241.md"
new file mode 100644
index 0000000..8ef03d0
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 pm2 \344\270\272 Node.js \345\272\224\347\224\250\347\250\213\345\272\217\346\217\220\344\276\233\346\234\215\345\212\241.md"	
@@ -0,0 +1,206 @@
+# 使用 pm2 为 Node.js 应用程序提供服务
+
+[PM2](https://pm2.keymetrics.io/) 是 node 进程管理工具，可以利用它来简化很多 node 应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。
+
+## PM2 特性
+
+- 内建负载均衡（使用 Node cluster 集群模块）
+- 后台运行
+- 0 秒停机重载
+- 具有 Ubuntu 和 CentOS 的启动脚本
+- 停止不稳定的进程（避免无限循环）
+- 控制台检测
+- 提供 HTTP API
+- 远程控制和实时的接口 API（Node.js 模块允许和 PM2 进程管理器交互）
+
+## 全局安装
+
+```bash
+npm i -g pm2
+```
+
+## 常用命令
+
+pm2 的功能十分强大，除了重启进程以外，还能实时收集日志和监控。
+
+### 分叉模式（Fork mode）
+
+启动程序，并为进程提供一个名称：
+
+```bash
+pm2 start app.js --name my-app
+```
+
+### 集群模式（Cluster mode）
+
+```bash
+# 指定同时起多少个进程（进程数由 CPU 核数决定），组成一个集群
+$ pm2 start app.js -i max
+$ pm2 start app.js -i 0 # 将根据可用的 CPU 使用 LB 启动最大进程
+$ pm2 start app.js -i 4 # 启动4个应用程序实例，并将网络请求负载均衡到每个应用中。
+
+
+$ pm2 start app.js -o out.log  # 标准输出日志文件的路径
+$ pm2 start app.js -e err.log  # 错误输出日志文件的路径
+$ pm2 start app.js -e err.log -o out.log
+
+# 用 fork 模式启动而非 cluster
+$ pm2 start app.js -x
+
+# 将应用程序调整到10个实例
+$ pm2 scale [app-name] 10
+```
+
+### 进程监控
+
+```bash
+# 列出所有正在运行的进程
+$ pm2 list
+$ pm2 ls
+```
+
+![pm2-list.png](https://upload-images.jianshu.io/upload_images/18281896-7323a06d7f74660e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+```bash
+# 原始 JSON 中的打印进程列表
+$ pm2 jlist
+
+# 美化 JSON 中的打印进程列表
+$ pm2 prettylist
+
+# 显示有关特定进程的所有信息
+$ pm2 describe 0
+
+# 显示指定进程的所有信息
+$ pm2 show APP-NAME
+
+# 列出所有 node 进程的 CPU 和内存统计数据，如：监视日志、自定义指标和进程信息
+$ pm2 monit
+```
+
+![pm2-monit.png](https://upload-images.jianshu.io/upload_images/18281896-7b37b90a767f2a6e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### 日志管理
+
+```bash
+$ pm2 logs # 查看所有日志
+$ pm2 logs APP-NAME  # 显示 APP-NAME 日志
+$ pm2 logs --json    # JSON 输出
+$ pm2 logs --format  # JSON 格式化输出
+
+# 清空所有日志文件（刷新所有日志）
+$ pm2 flush
+
+# 重新加载所有日志
+$ pm2 reloadLogs
+```
+
+### 进程状态管理（重启、停止、删除）
+
+```bash
+# 可启动 Node、Python、bash 脚本、JSON 文件等。
+$ pm2 start app.js
+
+# 如果 pm2 守护进程还不存在，就在前台运行它
+$ pm2 start app.js --no-daemon
+
+# 跳过 vizion 功能（版本控制）
+$ pm2 start app.js --no-vizion
+
+# 不自动重新启动 app
+$ pm2 start app.js --no-autorestart
+
+# 监听应用目录的变化，发生变化时，自动重启。
+$ pm2 start app.js --watch
+
+# 排除监听的目录/文件，可以是特定的文件名，也可以是正则。比如 --ignore-watch="test node_modules "some scripts""
+$ pm2 start app.js --ignore-watch
+
+# 应用的名称。查看应用信息的时候可以用到。
+$ pm2 start app.js -n --name
+
+# 停止特定进程 ID
+$ pm2 stop 0
+$ pm2 stop app.js
+
+# 停止所有进程
+$ pm2 stop all
+
+# 重新启动特定进程 ID
+$ pm2 restart 0
+
+# 重新启动所有进程
+$ pm2 restart all
+
+# 将从 pm2 列表中删除特定进程
+$ pm2 delete 0
+
+# 将从 pm2 列表中删除所有进程
+$ pm2 delete all
+
+# 0s 停机重新加载进程（对于 NETWORKED 进程）
+# 这项功能允许你重新载入代码而不用失去请求连接。
+# Note：仅能用于 web 应用，运行于 Node 0.11.x 版本，运行于 cluster 模式（默认模式）
+$ pm2 reload all
+
+# 清除所有进程
+$ pm2 kill
+
+# 将在 .pm2 文件夹下生成默认文件名为 dump.pm2 文件，导出 pm2 list 中的所有项目启动方式的数据
+$ pm2 dump
+
+# 重新导出新数据，覆盖 dump.pm2 文件
+$ pm2 resurect
+
+# 保存进程列表，可在重新启动时恢复
+$ pm2 save
+```
+
+### 开机自动启动
+
+要为 PM2 生成启动脚本，可以运行以下命令：
+
+```bash
+pm2 startup
+```
+
+确保在启动时所有 PM2 进程都在运行，可以运行以下命令：
+
+```bash
+pm2 save
+```
+
+这将创建文件 `dump.pm2` 文件，它将自动启动我们的脚本。
+
+也就是说，每当我们的服务器重启时，进程都会自动重启。
+
+如果您需要手动重启所有进程，可以执行以下命令。
+
+```bash
+pm2 resurrect
+```
+
+> Tips：如果按上面步骤遇到错误。可以看看这篇 **[在 windows 上安装 pm2 并设置开机启动](https://www.huaface.com/article/11)**。
+
+### 其他
+
+```bash
+# 启动 web 界面 http://localhost:9615
+$ pm2 web
+
+# 重置元数据（重新启动时间。。。）
+$ pm2 reset
+
+# 内存 pm2 更新
+$ pm2 updatePM2
+
+# 确保 pm2 守护进程已启动
+$ pm2 ping
+
+# 向脚本发送系统信号
+$ pm2 sendSignal SIGHUP my-app
+```
+
+## 更多资料
+
+[Right Sizing PM2 Clusters](https://vadosware.io/post/right-sizing-pm2-clusters/)
diff --git "a/Node/\344\275\277\347\224\250 process.mainModule \346\210\226 require.main \347\241\256\345\256\232 Node.js \345\205\245\345\217\243\350\204\232\346\234\254.md" "b/Node/\344\275\277\347\224\250 process.mainModule \346\210\226 require.main \347\241\256\345\256\232 Node.js \345\205\245\345\217\243\350\204\232\346\234\254.md"
new file mode 100644
index 0000000..475e9df
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 process.mainModule \346\210\226 require.main \347\241\256\345\256\232 Node.js \345\205\245\345\217\243\350\204\232\346\234\254.md"	
@@ -0,0 +1,172 @@
+# 使用 process.mainModule 或 require.main 确定 Node.js 入口文件
+
+[ES2020](https://github.com/lio-zero/blog/blob/main/JavaScript/ES2020%EF%BC%88ES11%EF%BC%89.md) 的 `import.meta` 旨在解决访问模块元信息的问题，如文件当前元素是什么。
+
+```html
+<!-- index.html -->
+<script src="foo.js"></script>
+```
+
+```js
+// foo.js
+const currentScript = document.currentScript
+currentScript.src // 当前文件地址
+
+// ESM 的获取方式 => 需要在 `script` 标签加上 `type="module"`
+import.meta.url
+```
+
+这是我们在浏览器中执行此操作的方式，**但在 Node.js 中如何执行此操作？**
+
+在 Node.js 中，每个模块和所需文件都包装在所谓的 [The module wrapper](https://nodejs.org/api/modules.html#modules_the_module_wrapper)（模块包装器）中。
+
+```js
+;(function (exports, require, module, __filename, __dirname) {
+  // 模块代码实际上就写在这里
+})
+```
+
+这就是 `require` 函数、`__filename` 和 `__dirname` 等便捷对象的来源。
+
+在 Node.js 中没有 `currentScript`，而是一个入口文件，它可能引用了数千个其他模块。你现在**如何确定文件是否是入口文件**？
+
+事实证明，有两种方法可以做到这一点：`require.main` 和 `process.mainModule`。
+
+让我们看看这两个定义是什么。
+
+```js
+console.log(require.main)
+console.log(process.mainModule)
+
+/*
+Module {
+  id: '.',
+  path: '',
+  exports: {},
+  parent: null,
+  filename: '/www/wtf/foo.js',
+  loaded: false,
+  children: [
+    Module {
+      ...
+    }
+  ],
+  paths:  [
+    '/www/wtf/node_modules',
+    '/www/node_modules',
+    '/node_modules'
+  ]
+}
+Module {
+  id: '.',
+  path: '',
+  exports: {},
+  parent: null,
+  filename: '/www/wtf/foo.js',
+  loaded: false,
+  children: [
+    Module {
+      ...
+    }
+  ],
+  paths:  [
+    '/www/wtf/node_modules',
+    '/www/node_modules',
+    '/node_modules'
+  ]
+*/
+```
+
+可以看到，我们可以通过访问 `require.main.filename` 或 `process.mainModule.filename` 来获取入口模块的文件路径，这两个对象还包含更多有用的信息。
+
+为了确定某个模块是否是入口文件，可以对照 `module` 对象进行检查。
+
+```js
+const isEntryScript = require.main === module
+const isAlsoEntryScript = process.mainModule === module
+```
+
+**但是 `require.main` 和 `process.mainModule` 实际上是一样的吗？**
+
+```js
+console.log(require.main === process.mainModule) // true
+```
+
+运行后，你会发现它返回 `true`。**那么两者有什么区别呢？**
+
+> 不同之处在于，如果主模块在运行时发生更改，`require.main` 可能仍然引用更改发生之前所需模块中的原始主模块。但通常，我们可以安全地假设这两个模块引用同一个模块。
+
+**这是什么意思？**我决定稍微挖掘一下 Node.js 的核心代码。
+
+`process.mainModule` 在 [node/lib/modules.js](https://github.com/nodejs/node/blob/59e48329d00cd91f6836cd91bcb8aca92acac1f6/lib/module.js#L503) 中定义：
+
+```js
+Module._load = function (request, parent, isMain) {
+  // ...
+
+  if (isMain) {
+    process.mainModule = module
+    module.id = '.'
+  }
+
+  Module._cache[filename] = module
+
+  tryModuleLoad(module, filename)
+
+  return module.exports
+}
+```
+
+`require.main` 在 [`node/lib/internals/modules.js`](https://github.com/nodejs/node/blob/9c6f6b0633ef4009cc04cfff5efb29c23ef5fc2b/lib/internal/module.js#L29) 中定义：
+
+```js
+function makeRequireFunction(mod) {
+  // ...
+  require.main = process.mainModule
+  // ...
+  return require
+}
+```
+
+我没有进一步挖掘内部结构，但我们每天使用的 `require` 函数实际引用了 `process.mainModule`。这就是为什么它们实际上是一样的。**如果我们改变 `process.mainModule` 或 `require.main`，现在会发生什么？**
+
+```js
+// test.js
+const bar = require('./foo')
+console.log(process.mainModule)
+console.log(require.main)
+
+// foo.js
+// 更改两个值
+process.mainModule = 'A'
+require.main = 'B'
+
+/*
+A
+Module {
+  id: '.',
+  path: '',
+  exports: {},
+  parent: null,
+  filename: '/www/wtf/foo.js',
+  loaded: false,
+  children:
+   [
+    Module {
+      ..
+    }
+  ],
+  paths:  [
+    '/www/wtf/node_modules',
+    '/www/node_modules',
+    '/node_modules'
+  ]
+}
+*/
+```
+
+可以看到，如果我们在运行时将 `process.mainModule` 设置为其他值，`require.main` 仍然保留对初始主模块的引用。
+
+> **注意**：`process.mainModule` 自 14.x 被废弃，但你仍然可以在 Node.js 内使用它。
+>
+> **扩展**：`import.meta.url` 需要在 ESM 环境中使用，这在 CJS 无法使用。如果你现在正在编写项目，需要在 CJS 和 ESM 中支持 `__dirname` 和 `import.meta.url`，可以看看 [antfu](https://github.com/antfu) 的 [Isomorphic `__dirname`](https://antfu.me/posts/isomorphic-dirname) 文章中给出的方法。但通常在构建需要同时支持 CJS 和 ESM 的包中，我们会使用一些工具同时生成它们，antfu 在 [Publish ESM and CJS in a single package](https://antfu.me/posts/publish-esm-and-cjs) 中介绍两种便捷的方式。另外，需要获取包根目录，可以看看 [Get Package Root](https://antfu.me/posts/get-package-root)。
diff --git "a/Node/\344\275\277\347\224\250 sendFile() \345\234\250 Express \344\270\255\345\217\221\351\200\201\351\235\231\346\200\201\346\226\207\344\273\266.md" "b/Node/\344\275\277\347\224\250 sendFile() \345\234\250 Express \344\270\255\345\217\221\351\200\201\351\235\231\346\200\201\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..fa1a176
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 sendFile() \345\234\250 Express \344\270\255\345\217\221\351\200\201\351\235\231\346\200\201\346\226\207\344\273\266.md"	
@@ -0,0 +1,29 @@
+# 使用 sendFile() 在 Express 中发送静态文件
+
+Express [`sendFile()` 方法](https://expressjs.com/en/api.html#res.sendFile)允许您发送原始文件作为对 HTTP 请求的响应。您可以将其 `res.sendFile()` 视为单个接口的 Express `static` 中间件。
+
+## 使用 `sendFile()`
+
+假设您有一个如下所示的 HTML 文件 `index.html`：
+
+```html
+<h1>Hello World</h1>
+```
+
+通过将路径传递到 `index.html`，可以使用 `res.sendFile()` 使 Express 将此 HTML 文件作为 HTTP 响应提供。
+
+> **注意**：除非指定 `root` 选项，否则路径必须是绝对路径。
+
+```js
+app.get('/', (req, res) => {
+  res.sendFile(`${__dirname}/index.html`)
+})
+```
+
+如果不想指定绝对路径，可以通过 `root` 选项以指定路径所相对于的目录。
+
+```js
+app.get('/', (req, res) => {
+  res.sendFile('index.html', { root: __dirname })
+})
+```
diff --git "a/Node/\344\275\277\347\224\250 zx \347\274\226\345\206\231\345\234\250 Node \344\270\255\347\274\226\345\206\231 Bash \350\204\232\346\234\254.md" "b/Node/\344\275\277\347\224\250 zx \347\274\226\345\206\231\345\234\250 Node \344\270\255\347\274\226\345\206\231 Bash \350\204\232\346\234\254.md"
new file mode 100644
index 0000000..af9b120
--- /dev/null
+++ "b/Node/\344\275\277\347\224\250 zx \347\274\226\345\206\231\345\234\250 Node \344\270\255\347\274\226\345\206\231 Bash \350\204\232\346\234\254.md"	
@@ -0,0 +1,256 @@
+# 使用 zx 编写在 Node 中编写 Bash 脚本
+
+Bash 是一种命令语言，通常作为命令行解释程序出现，用户可以在其中从他们的终端软件执行命令。例如，我们可以使用 Ubuntu 的终端来运行 Bash 命令。我们还可以通过 shell 脚本创建和运行 Bash 脚本文件。
+
+我们经常在许多自动化场景中使用 shell 脚本，例如构建过程、CI/CD 或与计算机维护相关的活动。作为一种功能齐全的命令语言，Bash 支持管道、变量、函数、控制语句和基本算术运算。
+
+然而，Bash 不是一种通用的开发人员友好型编程语言。它不支持 OOP、JSON 等结构、数组以外的通用数据结构，以及内置的字符串或数组操作方法。这意味着程序员通常需要从 Bash 中调用单独的 Python 或 Node 脚本来满足这些需求。
+
+这就是 [zx](https://github.com/google/zx) 项目的用武之地。zx 引入了一种使用 JavaScript 编写类似 Bash 的脚本的方法。
+
+相比之下，JavaScript 几乎具有开发人员所需的所有内置功能。zx 允许我们通过为几个关键的 CLI 相关 Node.js 包提供包装 API（如：`child_process`），用 JavaScript 编写 shell 脚本。因此，可以使用 zx 编写开发人员友好的、类似 Bash 的 shell 脚本。
+
+本文将介绍 zx 的一些用法，如何在项目中使用它。
+
+## zx 是如何工作的？
+
+每个 zx shell 脚本文件都有 `.mjs` 扩展名。第三方 API 的所有内置函数和包装器都是预先导入的。因此，你不必在基于 JavaScript 的 shell 脚本中使用额外的 `import` 语句。
+
+zx 接受来自标准输入、文件和 URL 的脚本。它将你的 zx 命令集导入为 ECMAScript 模块（MJS）来执行，命令执行过程使用 [Node.js 的 `child_process` API](https://nodejs.org/api/child_process.html)。
+
+## 安装
+
+全局安装 zx：
+
+```js
+npm i -g zx
+```
+
+版本要求：`node >= 16.0.0`
+
+在终端运行 zx 以检查程序是否已成功安装：
+
+```bash
+zx
+
+zx 7.1.1
+   A tool for writing better scripts
+# ...
+```
+
+你也可以单独在项目引入。
+
+```js
+#!/usr/bin/env node
+
+import { $ } from 'zx'
+await $`date`
+```
+
+## 顶层 `await`
+
+为了在 Node.js 中使用顶级 `await`，在异步函数之外进行 `await`，我们需要在 ES 模块中编写代码，它支持顶级 `await`。
+
+我们可以通过在 `package.json` 中添加 `"type": "module"` 来表示项目中的所有模块都是 ES 模块，或者我们可以将单个脚本的文件扩展名设置为 `.mjs`。
+
+## 基本语法
+
+首先，文件扩展使用 `.mjs` 以便可以在顶层使用 `await`，如果你还是喜欢原来的 `.js`，需要包装一个 `async` 函数。
+
+其次，需要在文件的顶部加上 `#!/usr/bin/env zx`。
+
+以下是获取项目的当前 Git 分支示例：
+
+```js
+// demo.mjs
+#!/usr/bin/env zx
+
+const branch = await $`git branch --show-current`
+console.log(`当前分支：${branch}`)
+```
+
+- `#!/usr/bin/env zx` 告诉操作系统的脚本执行器选择正确的解释器。
+- `$` 是一个函数，它执行给定的命令，并在与 `await` 关键字一起使用时返回其输出。
+
+最后，我们使用 `console.log` 来显示当前分支。
+
+运行脚本，以获取项目的当前 Git 分支：
+
+```bash
+zx demo.mjs
+```
+
+它还将显示你执行的每个命令，因为 zx 在默认情况下打开了详细模式。
+
+通过添加以下内容，即可消除额外的命令详细信息。
+
+```js
+$.verbose = false
+```
+
+由于我们在第一行使用了 [shebang](https://en.wikipedia.org/wiki/Shebang_%28Unix%29)（`#!`），我们也可以在不使用 zx 命令的情况下运行脚本。
+
+```bash
+chmod +x ./demo.mjs
+```
+
+## 颜色和格式
+
+zx 暴露了 chalk API。因此，我们可以使用它进行着色和格式化，如下所示。
+
+```js
+#!/usr/bin/env zx
+
+$.verbose = false
+
+let branch = 1
+chalk.level = 1
+console.log(`当前分支：${chalk.red.bold(branch)}`)
+```
+
+查看 [chalk](https://www.npmjs.com/package/chalk) 的官方文档以了解更多的着色和格式化方法。
+
+## 用户输入和命令行参数
+
+zx 提供提问功能，从命令行界面捕获用户输入。你还可以使用选项来启用传统的 UNIX 选项卡完成功能。
+
+它使用的是 Node 的 [readline](https://nodejs.org/api/readline.html) 模块。
+
+以下脚本将捕获文件名和模板。它使用用户输入的配置构建一个文件。
+
+```js
+#!/usr/bin/env zx
+
+$.verbose = false
+
+let filename = await question('输入文件名: ')
+let template = await question('输入你最喜欢的模板:  ', {
+  choices: ['function', 'class']
+})
+let content = ''
+
+if (template == 'function') {
+  content = `function main() {
+  console.log('Test')
+}`
+} else if (template == 'class') {
+  content = `class Main {
+  constructor() {
+    console.log('Test')
+  }
+}`
+} else {
+  console.error(`无效模板: ${template}`)
+  process.exit()
+}
+
+fs.outputFileSync(filename, content)
+```
+
+已解析的命令行参数对象可作为全局 `argv` 常量使用。解析是使用 [minimist](https://www.npmjs.com/package/minimist) 模块完成的。
+
+下面的示例捕获了两个命令行参数值。
+
+```js
+#!/usr/bin/env zx
+
+$.verbose = false
+
+const size = argv.size
+const isFullScreen = argv.fullscreen
+
+console.log(`size=${size}`)
+console.log(`fullscreen=${isFullScreen}`)
+```
+
+运行上述脚本文件，以检查命令行参数的支持。
+
+```bash
+$ zx ./demo .mjs --size=1080 --fullscreen
+
+# size=1080
+# fullscreen=true
+```
+
+## 网络请求
+
+我们经常使用 curl 命令通过 Bash 脚本发出 HTTP 请求。zx 为 [`node-fetch`](https://www.npmjs.com/package/node-fetch) 模块提供了一个包装器，它将特定模块的 API 公开为 fetch。优点是 zx 不会像 Bash 使用 curl 那样为每个网络请求生成多个进程，因为 `node-fetch` 包使用 Node 标准的 HTTP API 来发送网络请求。
+
+以下使用 zx 发送 HTTP 请求：
+
+```js
+#!/usr/bin/env zx
+
+$.verbose = false
+
+let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
+if (response.ok) console.log(await response.text())
+
+/*
+{
+  "userId": 1,
+  "id": 1,
+  "title": "delectus aut autem",
+  "completed": false
+}
+*/
+```
+
+## 构建命令管道
+
+在 shell 脚本中，管道指的是多个顺序执行的命令。我们经常在 shell 脚本中使用众所周知的管道字符（`|`），将输出从一个进程传递到另一个进程。zx 提供了两种不同的方法来构建管道。
+
+我们可以将 `|` 字符与类似于 Bash 脚本的命令集一起使用，或者我们也可以使用 zx 内置 API 中的 `pipe()` 方法。
+
+使用 `|`：
+
+```js
+#!/usr/bin/env zx
+
+$.verbose = false
+
+let greeting = await $`echo "hello World" | tr '[h]' [H]`
+console.log(`${greeting}`)
+```
+
+使用 `pipe()`：
+
+```js
+#!/usr/bin/env zx
+
+$.verbose = false
+
+let greeting = await $`echo "Hello world"`.pipe($`tr '[w]' [W]`)
+console.log(`${greeting}`)
+```
+
+## 高级用法
+
+除了基于 JavaScript 的 shell 脚本支持外，zx 还支持其他一些有用的功能。
+
+默认情况下，zx 使用 Bash 解释器来运行命令。我们可以通过修改 `$.shell` 来更改默认 shell 配置变量。下面的脚本使用 `sh` shell 而不是 bash。
+
+```js
+$.shell = '/usr/bin/sh'
+$.prefix = 'set -e;'
+
+$`echo "Your shell is $0"` // Your shell is /usr/bin/sh
+```
+
+> 更多配置命令可以查看 [Configuration](https://github.com/google/zx#configuration)。
+
+zx 命令行程序也可以从 URL 运行远程脚本。以提供文件名的方式提供 zx 脚本的链接。
+
+以下是 zx 文档提供的一个示例：
+
+```bash
+zx https://medv.io/game-of-life.js
+```
+
+其他：
+
+- 与 TypeScript 一起使用
+- GitHub Actions
+- etc
+
+详细内容可以查看[官方文档](https://github.com/google/zx#readme)。
diff --git "a/Node/\345\210\233\345\273\272 GUID\343\200\201UUID.md" "b/Node/\345\210\233\345\273\272 GUID\343\200\201UUID.md"
new file mode 100644
index 0000000..696b82f
--- /dev/null
+++ "b/Node/\345\210\233\345\273\272 GUID\343\200\201UUID.md"	
@@ -0,0 +1,44 @@
+# 创建 GUID/UUID
+
+根据 [RFC 4122](https://www.ietf.org/rfc/rfc4122.txt)，UUID（通用唯一标识符）也称为 GUID（全局唯一标识符），是设计用于提供特定唯一性保证的标识符。
+
+虽然可以在几行 JavaScript 代码中实现符合 RFC 兼容的 UUID，但有几个常见的陷阱：
+
+- 无效的 ID 格式（UUID 的格式必须为 `xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx`，其中 x 是 [0-9] 或 [a-f] 之一，M 是 [1-5] 之一，N 是 [8、9、a 或 b]。
+- 使用低质量的随机源（例如 `Math.random`）
+
+因此，鼓励为生产环境编写代码的开发人员使用严格的、维护良好的实现，例如 [`uuid` 模块](https://github.com/uuidjs/uuid)。它还有另外一个竞品 [NanoID](https://www.npmjs.com/package/nanoid)，很多用过的都说没有明显的缺点或限制。
+
+另外，Node.js 中的 `crypto` 模块有一个 [`randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) 方法可以生成 UUID。它是一个新的标准，且受到越来越多的[浏览器支持](https://caniuse.com/mdn-api_crypto_randomuuid)。
+
+```js
+const crypto = require('crypto')
+
+crypto.randomUUID() // bb2c6a75-b373-4c24-a3c3-1fb0911a8a25
+```
+
+因为它是一个加密安全的标识符，所以需要 SSL 证书才能运行。但是，对于测试而言，`localhost://` 和 `file://` 除外。
+
+如果这两种方法都不适用于您，还有以下最原始的方法：
+
+```js
+function uuidv4() {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16)
+  )
+}
+
+uuidv4() // 'ab399796-c3b4-4329-903a-4db62af83a17'
+```
+
+但强烈建议不要使用任何依赖 `Math.random()` 的 UUID 生成器。基于 `Math.random()` 的解决方案不能提供良好的唯一性保证。[点击此处查看详情](https://bocoup.com/blog/random-numbers)
+
+## 更多资料
+
+- [How to create a GUID / UUID](https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid)
+- [Collisions when generating UUIDs in JavaScript](https://stackoverflow.com/questions/6906916/collisions-when-generating-uuids-in-javascript)
+- [Why is NanoID Replacing UUID?](https://blog.bitsrc.io/why-is-nanoid-replacing-uuid-1b5100e62ed2)
+- [UUID vs Crypto.randomUUID vs NanoID](https://medium.com/@matynelawani/uuid-vs-crypto-randomuuid-vs-nanoid-313e18144d8c)
diff --git "a/Node/\345\210\240\351\231\244\346\211\200\346\234\211\347\232\204 node_modules \346\226\207\344\273\266\345\244\271.md" "b/Node/\345\210\240\351\231\244\346\211\200\346\234\211\347\232\204 node_modules \346\226\207\344\273\266\345\244\271.md"
new file mode 100644
index 0000000..15ba3e1
--- /dev/null
+++ "b/Node/\345\210\240\351\231\244\346\211\200\346\234\211\347\232\204 node_modules \346\226\207\344\273\266\345\244\271.md"	
@@ -0,0 +1,33 @@
+# 删除所有的 node_modules 文件夹
+
+`node_modules` 往往会在你的本地系统中占用大量空间，特别是使用 React 或 Vue 框架开发，可能会依赖很多相关的生态库，这导致了 `node_modules` 变大。
+
+有一些方法可以帮助你删除电脑中的 `node_modules`。
+
+有一个简单的命令，你可以在终端中的文件夹或根目录中运行。
+
+```bash
+find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
+```
+
+这将删除系统中每个本地存储库/目录中的 `node_modules` 文件夹，以便采取预防措施或排除你当前正在处理的项目。
+
+后面，只要在我们需要的时候，进入项目目录并运行包安装命令，一切都可以恢复正常：
+
+```bash
+npm install
+```
+
+## 使用 npkill 包
+
+更好的方法是使用 [`npkill`](https://github.com/voidcosmos/npkill) 包，它将列出系统中的所有 `node_modules` 目录，以及它们占用的空间。然后，你可以自由选择要删除的 `node_modules` 以释放空间。
+
+![npkill 演示](https://camo.githubusercontent.com/fa9316e334b14a26e8c8f5b7777e70cca137a6f21b5e160c2b4df9fcdd730308/68747470733a2f2f6e706b696c6c2e6a732e6f72672f696d672f6e706b696c6c2d64656d6f2d302e332e302e676966)
+
+你不必全局安装它，只需要：
+
+```bash
+npx npkill
+```
+
+它将列出当前目录下所有的 `node_modules` 文件。
diff --git "a/Node/\345\234\250 ES \346\250\241\345\235\227\357\274\210Node.js\357\274\211\344\270\255\345\257\274\345\205\245 JSON \346\226\207\344\273\266.md" "b/Node/\345\234\250 ES \346\250\241\345\235\227\357\274\210Node.js\357\274\211\344\270\255\345\257\274\345\205\245 JSON \346\226\207\344\273\266.md"
new file mode 100644
index 0000000..63cbc59
--- /dev/null
+++ "b/Node/\345\234\250 ES \346\250\241\345\235\227\357\274\210Node.js\357\274\211\344\270\255\345\257\274\345\205\245 JSON \346\226\207\344\273\266.md"	
@@ -0,0 +1,43 @@
+# 在 ES 模块（Node.js）中导入 JSON 文件
+
+## 使用 `fs` 模块读取和解析 JSON 文件
+
+Node.js 文档建议使用 `fs` 模块并自己完成读取文件和解析的工作。
+
+```js
+import { readFile } from 'fs/promises'
+const json = JSON.parse(
+  await readFile(new URL('./some-file.json', import.meta.url))
+)
+```
+
+这种方法比起我们接下来用的第二种方法更容易理解。
+
+## 利用 CommonJS `require` 方法加载 JSON 文件
+
+我们还可以使用 `createRequire` 加载 JSON 文件。
+
+`createRequire` 允许您构造 CommonJS `require` 方法，以便可以使用典型的 CommonJS 功能，例如在 Node.js 中读取 JSON ES 模块。
+
+```js
+import { createRequire } from 'module'
+const require = createRequire(import.meta.url)
+const data = require('./data.json')
+```
+
+前两种的区别：
+
+- 二者的区别是 `require` 机制情况下，如果多个模块都加载了同一个 JSON 文件，那么其中一个改变了 JS 对象，其它跟着改变，这是由 Node 模块的缓存机制造成的，只有一个 JS 模块对象
+- 第一种方式可以随意改变加载后的 JS 变量，而且各模块互不影响，因为他们都是独立的，是多个 JS 对象。
+
+## import Assertions
+
+JSON 模块已经存在于 Chrome 91，它看起来就像一个 ES Modules 风格的导入，只是你在最后设置了类型。
+
+```js
+import data from './data.json' assert { type: 'json' }
+
+console.log(data)
+```
+
+当 Chrome 中有解决方案时，它很快就会在 Node.js 中发布。
diff --git "a/Node/\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 execa \350\277\220\350\241\214\345\221\275\344\273\244.md" "b/Node/\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 execa \350\277\220\350\241\214\345\221\275\344\273\244.md"
new file mode 100644
index 0000000..364aaa0
--- /dev/null
+++ "b/Node/\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 execa \350\277\220\350\241\214\345\221\275\344\273\244.md"	
@@ -0,0 +1,275 @@
+# 在 Node.js 中使用 execa 运行命令
+
+Node.js 有一个内置 [`child_process`](https://nodejs.cn/api/child_process.html) 模块。它提供了一些方法，允许我们编写在子进程中运行命令的脚本。
+
+这些命令可以运行安装在我们运行脚本的机器上的任何程序。
+
+## 什么是 execa？
+
+[`execa`](https://www.npmjs.com/package/execa) 为 `child_process` 模块提供了一个包装器，以便于使用。
+
+本文将介绍 `execa` 的好处，以及如何使用它。
+
+## 使用 `execa` 的好处
+
+`execa` 相对于内置的 Node.js `child_process` 模块有几个好处。
+
+首先，`execa` 公开了一个基于 promise 的 API。这意味着我们可以在代码中使用 `async/await`，而不需要像使用异步 `child_process` 模块方法那样创建回调函数。如果我们需要它，还有一个 `execaSync` 方法可以同步运行命令。
+
+`execa` 还可以方便地转义并引用我们传递给它的任何命令参数。例如，如果我们传递一个带有空格或引号的字符串，`execa` 将为我们处理转义。
+
+程序在输出的末尾添加一行新行是很常见的。这有利于命令行的可读性，但在脚本上下文中没有帮助，因此默认情况下，`execa` 会自动为我们删除这些新行。
+
+如果执行脚本（`node`）的进程因任何原因死掉，我们可能不希望子进程挂起。`execa` 会自动为我们清理子进程，确保我们不会出现“僵尸”进程。
+
+使用 `execa` 的另一个好处是，它支持在 Windows 上使用 Node.js 运行子进程。它使用了流行的 [`cross-spawn`](https://www.npmjs.com/package/cross-spawn) 包，该包可以解决 Node.js 的已知问题。
+
+## 开始使用 `execa`
+
+创建并切换到 `tutorial` 目录：
+
+```js
+mkdir execa-test
+cd execa-test
+```
+
+初始化项目：
+
+```js
+npm init -y
+```
+
+安装 `execa`
+
+```js
+npm i execa
+```
+
+### 在 Node.js 中使用纯 ES 模块包
+
+Node.js 支持两种不同的模块类型：
+
+- [CommonJS 模块](https://nodejs.cn/api/modules.html)（CJS）：使用 `module.exports` 以导出函数和对象，并 `require()` 将其加载到另一个模块中
+- [ECMAScript 模块](https://nodejs.cn/api/esm.html)（ESM）：使用 `export` 导出函数和对象，并使用 `import` 将它们加载到另一个模块中
+
+[`execa` 在其 v6.0.0 版本](https://github.com/sindresorhus/execa/releases/tag/v6.0.0)成为一个纯 ESM 包。这意味着我们必须使用支持 ES 模块的 Node.js 版本才能使用这个包。
+
+对于我们自己的代码，我们可以显示 Node.js 通过在 `package.json` 中添加 `"type": "module"`，确保我们项目中的所有模块都是 ES 模块。或者我们可以将单个脚本的文件扩展名设置为 `.mjs`。
+
+打开 `package.json` 文件，添加：
+
+```json
+{
+  "type": "module"
+}
+```
+
+现在，我们可以在创建的任何脚本中从 `execa` 包导入 `execa` 方法：
+
+```js
+import { execa } from 'execa'
+```
+
+尽管 ES 模块在 Node.js 包和应用程序中得到采用，但 CommonJS 模块仍然是使用最广泛的模块类型。如果由于任何原因您无法在代码库中使用 ES 模块，则需要 `import` 在 CommonJS 模块中使用该方法：
+
+```js
+async function run() {
+  const { execa } = await import('execa')
+
+  // ...
+}
+
+run()
+```
+
+**注意，**我们需要将对 `import` 函数的调用包装在一个 `async` 函数中，因为 CommonJS 模块不支持[顶级 `await`](https://nodejs.cn/api/esm.html#top-level-await)。
+
+> 详细内容可以阅读阮一峰老师的 [Node.js 如何处理 ES6 模块](https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html)。
+
+### 使用 `execa` 运行命令
+
+现在，我们将创建一个脚本，使用 `execa` 运行以下命令：
+
+```js
+echo "Process execution for humans"
+```
+
+`echo` 程序打印出传递给它的文本字符串。
+
+创建 `run.js` 文件，编写如下内容：
+
+```js
+import { execa } from 'execa'
+
+// execa 返回的 promise 与对象解析。
+const { stdout } = await execa('echo', ['Process execution for humans'])
+console.log({ stdout })
+```
+
+运行文件：
+
+```js
+$ node run.js
+{ stdout: '"Process execution for humans"' }
+```
+
+### `stdout` 是什么？
+
+程序可以访问“标准流”。本文使用了其中两个：
+
+- `stdout` — 标准输出是程序将其输出数据写入的流
+- `stderr` — 标准错误是程序写入错误消息并调试数据的流
+
+当我们运行程序时，这些标准流通常连接到父进程。如果我们在终端上运行一个程序，这意味着终端将接收并显示程序发送到 `stdout` 和 `stderr` 流的数据。
+
+当我们运行本文中的脚本时，子进程的 `stdout` 和 `stderr` 流连接到父进程 node，允许我们访问子进程发送给它们的任何数据。
+
+### 捕获 `stderr`
+
+调用 `execa` 方法从对象解构 `stderr` 属性：
+
+```js
+import { execa } from 'execa'
+
+const { stdout, stderr } = await execa('echo', ['Process execution for humans'])
+console.log({ stdout, stderr }) // { stdout: 'Process execution for humans', stderr: '' }
+```
+
+再次运行后，您会发现 `stderr` 的值是一个空字符串（`''`）。这是因为 `echo` 命令没有向标准错误流写入任何数据。
+
+`ls(1)` 程序列出有关文件和目录的信息。如果文件不存在，它将向标准错误流写入错误消息。
+
+替换代码：
+
+```js
+const { stdout, stderr } = await execa('ls', ['file.txt'])
+```
+
+运行后，将输出以下内容：
+
+```js
+Error: Command failed with exit code 1: ls file.txt
+...
+{
+  shortMessage: 'Command failed with exit code 2: ls file.txt',
+  command: 'ls file.txt',
+  escapedCommand: 'ls file.txt',
+  exitCode: 1,
+  // ...
+}
+```
+
+使用 `execa` 方法运行此命令时引发错误。这是因为子进程的退出代码不是 0。退出代码为 0 通常表示进程已成功运行，而任何其他值都表示存在问题。
+
+`execa` 方法抛出的错误对象包含一个 `stderr` 属性，其中包含由 `ls` 写入标准错误流的数据。
+
+我们现在需要实现错误处理，这样如果命令失败，我们就可以优雅地处理它，而不是让它破坏我们的脚本。
+
+> **注意**：程序通常会成功运行，但也会将调试消息写入 `stderr`。
+
+### `execa` 中的错误处理
+
+我们可以试着把命令包装 `try...catch` 语句并输出自定义错误消息，如下所示：
+
+```js
+try {
+  const { stdout, stderr } = await execa('ls', ['file.txt'])
+
+  console.log({ stdout, stderr })
+} catch (error) {
+  console.error(
+    `ERROR: The command failed. stderr: ${error.stderr} (${error.exitCode})`
+  )
+}
+```
+
+运行脚本后，输出：
+
+```txt
+ERROR: The command failed. stderr: ls: cannot access 'file.txt': No such file or directory (1)
+```
+
+### 取消子进程
+
+一旦我们开始执行一个命令，我们可能想要取消这个过程，例如，如果它需要比预期更长的时间才能完成。`execa` 提供了一个 `cancel` 方法，我们可以调用它向子进程发送 `SIGTERM` 信号。
+
+```js
+// 创建一个仅运行 5s 的子进程
+// 注意：这里不需要加 await，这里演示 1s 后取消子进程
+const subprocess = execa('sleep', ['5s'])
+
+// 1s 后取消子进程
+setTimeout(() => {
+  subprocess.cancel()
+}, 1000)
+
+try {
+  const { stdout, stderr } = await subprocess
+
+  console.log({ stdout, stderr })
+} catch (error) {
+  if (error.isCanceled) {
+    console.error(`ERROR: The command took too long to run.`)
+  } else {
+    console.error(error)
+  }
+}
+```
+
+当 `subprocess.cancel` 方法被调用时，错误对象上的 `isCanceled` 属性被设置为`true`。这使我们能够确定错误的原因并显示特定的错误消息。
+
+运行 `node run.js`，输出：
+
+```txt
+ERROR: The command took too long to run.
+```
+
+如果我们需要强制一个子进程结束，我们可以调用 `subprocess.kill` 方法而不是 `subprocess.cancel`。
+
+### 使用 `execa` 从子进程管道输出
+
+`execa` 方法返回的对象中的 `stdout` 和 `stderr` 属性是可读的流。我们已经看到了如何将发送到这些流的数据保存在变量中。例如，我们可以通过管道将可读流转换为可写流，以便在子进程运行时查看其输出。
+
+去除定时器，更改子进程的代码，然后，我们将通过管道将 `stdout` 流从子进程传输到父进程的 `stdout` 流：
+
+```js
+const subprocess = execa('echo', ["is it me you're looking for?"])
+
+subprocess.stdout.pipe(process.stdout)
+```
+
+```txt
+is it me you're looking for?
+{ stdout: "is it me you're looking for?", stderr: '' }
+```
+
+### 将输出重定向到文件
+
+我们可以将子进程的 `stdout` 数据写入一个文件，而不是通过管道传输到父进程的 `stdout` 流。
+
+首先，导入内置 `fs` 模块：
+
+```js
+import fs from 'fs'
+```
+
+然后，我们可以替换对 `pipe` 方法的现有调用：
+
+```js
+subprocess.stdout.pipe(fs.createWriteStream('stdout.txt'))
+```
+
+这将创建一个 `fs.WriteStream` 实例，其中包含来自子流程的数据。`stdout` 可读流将通过管道传输到。
+
+运行脚本，输出：
+
+```txt
+{ stdout: "is it me you're looking for?", stderr: '' }
+```
+
+我们还应该看到一个名为 `stdout.txt` 的文件，其中包含来自子进程标准输出流的数据：
+
+```bash
+$ cat stdout.txt
+is it me you're looking for?
+```
diff --git "a/Node/\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 sharp \345\244\204\347\220\206\345\233\276\345\203\217.md" "b/Node/\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 sharp \345\244\204\347\220\206\345\233\276\345\203\217.md"
new file mode 100644
index 0000000..25855c7
--- /dev/null
+++ "b/Node/\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 sharp \345\244\204\347\220\206\345\233\276\345\203\217.md"	
@@ -0,0 +1,216 @@
+# 在 Node.js 中使用 sharp 处理图像
+
+[sharp](https://github.com/lovell/sharp) 是高性能 Node.js 图像处理库。它的典型用例是将普通格式的大图像转换为较小的、适合 web 的 JPEG、PNG、WebP、GIF 和 AVIF 图像。
+
+详细介绍请查阅 [README](https://github.com/lovell/sharp#sharp)。
+
+本文将介绍它的一些用法。
+
+> 以下默认已在项目安装、导入。
+
+## 将图像转换为灰色
+
+```js
+const convertTograyscale = () => {
+  sharp('./github.png')
+    .grayscale() // or .greyscale()
+    .toFile(__dirname + './grayImage.png')
+}
+
+convertTograyscale()
+```
+
+![将图像转换为灰色](https://upload-images.jianshu.io/upload_images/18281896-6c64cbb9c476f279.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+本文所有的案例所使用的[图片地址](https://repository-images.githubusercontent.com/301573344/43d44d72-0463-4109-b614-72bea18fd17e)，下文将值贴出代码，感兴趣的可以尝试尝试。
+
+## 为图像着色
+
+```js
+const tintImage = () => {
+  sharp('./github.png')
+    .tint({ r: 255, g: 0, b: 0 })
+    .toFile(__dirname + './tintImage.png')
+}
+
+tintImage()
+```
+
+## 提取图像元数据
+
+```js
+const imageMetadata = async () => {
+  const metadata = await sharp('./github.png').metadata()
+
+  console.log(metadata)
+  /*
+    {
+      format: 'png',
+      width: 1022,
+      height: 640,
+      space: 'srgb',
+      channels: 4,
+      depth: 'uchar',
+      density: 144,
+      isProgressive: false,
+      hasProfile: true,
+      hasAlpha: true,
+      exif: <Buffer 4d 4d 00 2a 00 00 00 08 00 05 01 12 00 03 00 00 00 01 00 01 00 00 01 1a 00 05 00 00 00 01 00 00 00 4a 01 1b 00 05 00 00 00 01 00 00 00 52 01 28 00 03 ... 100 more bytes>,
+      icc: <Buffer 00 00 0d 4c 61 70 70 6c 02 10 00 00 6d 6e 74 72 52 47 42 20 58 59 5a 20 07 e6 00 05 00 1f 00 0b 00 11 00 06 61 63 73 70 41 50 50 4c 00 00 00 00 41 50 ... 3354 more bytes>,
+      xmp: <Buffer 3c 78 3a 78 6d 70 6d 65 74 61 20 78 6d 6c 6e 73 3a 78 3d 22 61 64 6f 62 65 3a 6e 73 3a 6d 65 74 61 2f 22 20 78 3a 78 6d 70 74 6b 3d 22 58 4d 50 20 43 ... 657 more bytes>
+    }
+  */
+}
+
+imageMetadata()
+```
+
+## 旋转图像
+
+```js
+const rotateImage = () => {
+  sharp('./github.png')
+    .rotate(180)
+    .toFile(__dirname + './rotateImage.png')
+}
+
+rotateImage()
+```
+
+## 调整图像大小
+
+```js
+const resizeImage = async () => {
+  const resize = await sharp('./github.png')
+    .resize(350, 260)
+    .toFile(__dirname + './resizeImage.png')
+
+  console.log(resize)
+  /*
+    {
+      format: 'jpeg',
+      width: 350,
+      height: 260,
+      channels: 3,
+      premultiplied: true,
+      size: 10534
+    }
+  */
+}
+
+resizeImage()
+```
+
+## 格式化图像
+
+```js
+const formatImage = () => {
+  sharp('./github.png')
+    .toFormat('png', { palette: true })
+    .toFile(__dirname + './formatImage.png')
+}
+
+formatImage()
+```
+
+## 裁剪图像
+
+```js
+const cropImage = () => {
+  sharp('./github.png')
+    .extract({ left: 490, top: 120, width: 380, height: 380 })
+    .toFile(__dirname + './cropImage.png')
+}
+
+cropImage()
+```
+
+## 创建合成图像
+
+```js
+const compositeImage = () => {
+  sharp('./resizeImage.png')
+    .composite([{ input: './github.png', left: 100, top: 50 }])
+    .toFile(__dirname + './compositeImage.png')
+}
+
+compositeImage()
+```
+
+## 模糊图像
+
+```js
+const blurImage = () => {
+  sharp('./github.png')
+    .blur(9)
+    .toFile(__dirname + './blurImage.png')
+}
+
+blurImage()
+```
+
+## 锐化图像
+
+```js
+const sharpenImage = () => {
+  sharp('./github.png')
+    .sharpen(13)
+    .toFile(__dirname + './sharpenImage.png')
+}
+
+sharpenImage()
+```
+
+## 翻转图像
+
+```js
+const flipImage = async () => {
+  await sharp('./github.png')
+    .flip()
+    .toFile(__dirname + './flipImage.png')
+}
+
+flipImage()
+```
+
+## 镜像图像
+
+```js
+const flopImage = async () => {
+  await sharp('./github.png')
+    .flop()
+    .toFile(__dirname + './flopImage.png')
+}
+
+flopImage()
+```
+
+## 向图像添加文本
+
+```js
+const addText = () => {
+  const width = 100
+  const height = 40
+  const text = 'GitHub'
+
+  const svgText = `
+  <svg width="${width}" height="${height}">
+    <style>
+      .title { fill: red; font-size: 16px}
+    </style>
+    <text x="45%" y="40%" text-anchor="middle" class="title">${text}</text>
+  </svg>`
+
+  const svgBuffer = Buffer.from(svgText)
+
+  sharp('./github.png')
+    .composite([{ input: svgBuffer, left: 20, top: 40 }])
+    .toFile(__dirname + './textImage.png')
+}
+
+addText()
+```
+
+## 更多资料
+
+[How To Process Images in Node.js With Sharp](https://www.digitalocean.com/community/tutorials/how-to-process-images-in-node-js-with-sharp)
diff --git "a/Node/\345\234\250 Node.js \344\270\255\345\260\206 Buffer \350\275\254\346\215\242\344\270\272 JSON \345\222\214 UTF8 \345\255\227\347\254\246\344\270\262.md" "b/Node/\345\234\250 Node.js \344\270\255\345\260\206 Buffer \350\275\254\346\215\242\344\270\272 JSON \345\222\214 UTF8 \345\255\227\347\254\246\344\270\262.md"
new file mode 100644
index 0000000..e7d3bf7
--- /dev/null
+++ "b/Node/\345\234\250 Node.js \344\270\255\345\260\206 Buffer \350\275\254\346\215\242\344\270\272 JSON \345\222\214 UTF8 \345\255\227\347\254\246\344\270\262.md"	
@@ -0,0 +1,108 @@
+# 在 Node.js 中将 Buffer 转换为 JSON 和 UTF8 字符串
+
+Nodejs 和基于浏览器的 JavaScript 有所不同，因为 Node 甚至在 ES6 草案提出 `ArrayBuffer` 之前就有处理二进制数据的方法。在 Node 中，`Buffer` 类是大多数 I/O 操作使用的主要数据结构。它是在 V8 堆外部分配的原始二进制数据，一旦分配，就无法调整大小。
+
+在 Node v6.0 之前，要创建新的 Buffer，我们只需使用 `new` 关键字调用构造函数：
+
+```js
+let newBuff = new Buffer('New String')
+```
+
+v6.0 之后，要创建新的 Buffer 实例：
+
+```js
+let newBuff = Buffer.from('New String')
+```
+
+`new Buffer()` 构造函数已被弃用，并被单独的 `Buffer.from()`、`Buffer.alloc()` 和 `Buffer.allocUnsafe()` 方法替换。
+
+> 更多详细信息可以阅读[**官方文档**](https://nodejs.org/api/buffer.html)。
+
+## 将 Buffer 转换为 JSON
+
+Buffer 可以转换为 JSON。
+
+```js
+let bufferOne = Buffer.from('All work and no play makes Jack a dull boy')
+console.log(bufferOne)
+
+// <Buffer 41 6c 6c 20 77 6f 72 6b 20 61 6e 64 20 6e 6f 20 70 6c 61 79 20 6d 61 6b 65 73 20 4a 61 63 6b 20 61 20 64 75 6c 6c 20 62 6f 79>
+
+let json = JSON.stringify(bufferOne, null, 2)
+console.log(json)
+/*
+{
+  "type": "Buffer",
+  "data": [
+    65,
+    108,
+    108,
+    32,
+    119,
+    111,
+    114,
+    107,
+    32,
+    97,
+    110,
+    100,
+    32,
+    110,
+    111,
+    32,
+    112,
+    108,
+    97,
+    121,
+    32,
+    109,
+    97,
+    107,
+    101,
+    115,
+    32,
+    74,
+    97,
+    99,
+    107,
+    32,
+    97,
+    32,
+    100,
+    117,
+    108,
+    108,
+    32,
+    98,
+    111,
+    121
+  ]
+}
+*/
+```
+
+JSON 指定要转换的对象的类型是 `Buffer` 及其数据。
+
+### 将 JSON 转换为 Buffer
+
+```js
+let bufferOriginal = Buffer.from(JSON.parse(json).data)
+console.log(bufferOriginal)
+
+// <Buffer 41 6c 6c 20 77 6f 72 6b 20 61 6e 64 20 6e 6f 20 70 6c 61 79 20 6d 61 6b 65 73 20 4a 61 63 6b 20 61 20 64 75 6c 6c 20 62 6f 79>
+```
+
+## 将 Buffer 转换为 UTF-8 字符串
+
+```js
+console.log(bufferOriginal.toString('utf8')) // All work and no play makes Jack a dull boy
+```
+
+`.toString()` 不是将 Buffer 转换为字符串的唯一方法。此外，默认情况下，它会转换为 utf-8 格式字符串。
+
+另一种将 Buffer 转换为字符串的方法是使用 Node.js API 中的 `StringDecoder` 核心模块。
+
+<!-- https://masteringjs.io/tutorials/node/buffer
+https://masteringjs.io/tutorials/node/buffer-to-string
+https://masteringjs.io/tutorials/node/buffer-length
+https://masteringjs.io/tutorials/node/buffer-compare -->
diff --git "a/Node/\345\246\202\344\275\225\344\270\213\350\275\275\345\222\214\350\247\243\345\216\213 Node \344\270\255\347\232\204 gz \346\226\207\344\273\266.md" "b/Node/\345\246\202\344\275\225\344\270\213\350\275\275\345\222\214\350\247\243\345\216\213 Node \344\270\255\347\232\204 gz \346\226\207\344\273\266.md"
new file mode 100644
index 0000000..2941875
--- /dev/null
+++ "b/Node/\345\246\202\344\275\225\344\270\213\350\275\275\345\222\214\350\247\243\345\216\213 Node \344\270\255\347\232\204 gz \346\226\207\344\273\266.md"	
@@ -0,0 +1,31 @@
+# 如何下载和解压 Node 中的 gz 文件
+
+假如我想从网络上下载一个 gizp 文件，你要怎么处理这种文件格式？下面我们使用 Node 的一些库来解决这个问题。
+
+- [**got**](https://github.com/sindresorhus/got#readme)：适用于 Node.js 的人性化且功能强大的 HTTP 请求库。
+- [**Node-gzip**](https://www.npmjs.com/package/node-gzip)：只需使用 `promise` 在 Node.js 中使用 `gzip` 和 `ungzip`。
+
+以下代码段使用 `got` 发出 HTTP 请求，并使用 `Node-gzip` 来获取 gzip sitemap，并将其转换为字符串。
+
+```js
+import got from 'got'
+import pkg from 'node-gzip'
+const { ungzip } = pkg
+
+const SITEMAP_URL =
+  'https://developer.mozilla.org/sitemaps/en-US/sitemap.xml.gz'
+
+async function main() {
+  // 获取文件
+  const { body } = await got(SITEMAP_URL, {
+    responseType: 'buffer'
+  })
+
+  // 解压缓冲的 gzip 站点地图
+  const sitemap = (await ungzip(body)).toString()
+
+  console.log(sitemap)
+}
+
+main()
+```
diff --git "a/Node/\345\246\202\344\275\225\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 ES6 \345\257\274\345\205\245\350\257\255\346\263\225.md" "b/Node/\345\246\202\344\275\225\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 ES6 \345\257\274\345\205\245\350\257\255\346\263\225.md"
new file mode 100644
index 0000000..6f11c82
--- /dev/null
+++ "b/Node/\345\246\202\344\275\225\345\234\250 Node.js \344\270\255\344\275\277\347\224\250 ES6 \345\257\274\345\205\245\350\257\255\346\263\225.md"	
@@ -0,0 +1,87 @@
+# 如何在 Node.js 中使用 ES6 导入语法
+
+> **模块**是导出一个或多个值的 JavaScript 文件。导出的值可以是变量、对象或函数。
+
+Node.js 应用由模块组成，其[模块系统](http://nodejs.org/docs/latest/api/modules.html)采用 CommonJS 规范，它并不是 JavaScript 语言规范的正式组成部分。
+
+在 CommonJS 中，有一个全局方法 `require()`，用于加载模块。
+
+```js
+// 加载 path 模块
+const path = require('path')
+```
+
+而 ECMAScript 模块（简称 ES 模块或 ESM）是 JavaScript 语言规范中添加的一个模块，正在寻求统一和标准化模块在 JavaScript 应用程序中的加载方式。
+
+以下导入语法由以下 ES 模块标准组成，用于导入从不同 JavaScript 文件导出的模块：
+
+```js
+import XXX from 'xxx'
+```
+
+Node.js 不支持直接导入 ES6。尝试在 JS 文件中编写 `import` 语法：
+
+```js
+// index.js
+import { sep } from 'path'
+
+console.log('print: ', sep)
+```
+
+使用 `node index.js` 运行 Node.js 服务器，您将遇到以下错误：
+
+![error](https://upload-images.jianshu.io/upload_images/18281896-f0fd1dce05e2d705.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+而目前最快速的解决方法是，我们可以使用 [Node.js 推荐的方法](https://nodejs.org/api/esm.html#esm_enabling)，在 `package.json` 文件中设置 `"type": "module"`。
+
+```json
+{
+  "type": "module"
+}
+```
+
+此解决方案适用于最新的 Node.js 版本 `14.x.x` 以上的版本（撰写本文时为 `15.6.0`）。
+
+![success](https://upload-images.jianshu.io/upload_images/18281896-04fd8022e7a4d7a6.image?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 低于 Node v.14 版本的环境
+
+另一个解决这个问题的方法是使用 [**Babel**](https://babeljs.io/)。它是一个 JavaScript 编译器，允许您使用最新语法编写 JS。它可以在任何用 JavaScript 编写的项目中使用，因此也可以在 Node.js 项目中使用。
+
+首先从终端窗口安装以下依赖项：
+
+```bash
+npm i -D @babel/core @babel/preset-env @babel/node
+```
+
+它们后面将用于转化 ES6 以上语法。
+
+然后在 Node.js 项目的根目录下创建一个名为 `babel.config.json` 的文件，并添加以下内容：
+
+```json
+module.exports = {
+  "presets": ["@babel/preset-env"]
+}
+```
+
+`@babel/node` 包是一个 CLI 实用程序，它在运行 Node.js 项目之前用 Babel 预设和插件编译 JS 代码。这意味着它将在执行 Node 项目之前读取并应用 `babel.config.json` 中提供的任何配置。
+
+运行命令执行脚本时，使用 `babel-node` 替换 `node`。
+
+为了方便使用，我们在 `package.json` 中配置一个 npm script。例如，使用 `npm run dev` 脚本运行 Node 服务器的示例：
+
+```json
+{
+  "scripts": {
+    "dev": "node --exec babel-node index.js"
+  }
+}
+```
+
+您还可以不使用上面提到的方法，以最简单的方式使用 ES 模块。在创建时，以 `.cjs` 和 `.mjs` 扩展区分使用 CommonJS 还是 ES 模块。
+
+## 更多资料
+
+- [Babel 入门](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Babel%20%E5%85%A5%E9%97%A8.md)
+- [Node.js 如何处理 ES6 模块](https://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html)
+- [How to Use ECMAScript Modules in Node.js](https://dmitripavlutin.com/ecmascript-modules-nodejs/)
diff --git "a/Node/\345\246\202\344\275\225\345\234\250 Node.js \344\270\255\346\216\247\345\210\266\346\262\241\346\234\211\344\276\235\350\265\226\351\241\271\347\232\204\346\227\245\345\277\227\346\266\210\346\201\257.md" "b/Node/\345\246\202\344\275\225\345\234\250 Node.js \344\270\255\346\216\247\345\210\266\346\262\241\346\234\211\344\276\235\350\265\226\351\241\271\347\232\204\346\227\245\345\277\227\346\266\210\346\201\257.md"
new file mode 100644
index 0000000..c8e0662
--- /dev/null
+++ "b/Node/\345\246\202\344\275\225\345\234\250 Node.js \344\270\255\346\216\247\345\210\266\346\262\241\346\234\211\344\276\235\350\265\226\351\241\271\347\232\204\346\227\245\345\277\227\346\266\210\346\201\257.md"	
@@ -0,0 +1,63 @@
+# 如何在 Node.js 中控制没有依赖项的日志消息
+
+数以百万计的项目包依赖于非常流行的 [`debug`](https://www.npmjs.com/package/debug) 包。提供的 `debug` 方法使 Node.js 开发人员能够控制日志消息传递。与常使用的 `console.log` 相反，使用 `debug` 的消息在默认情况下是隐藏的。
+
+`debug` 日志消息被绑定到一个模块名，只有当 `debug` 环境变量列出特定模块名时才会出现。
+
+```js
+// 只有当设置 DEBUG=http 时记录消息
+const debug = require('debug')('http')
+
+debug('booting %o', name)
+```
+
+## `util.debuglog` —原生的 `debug` 备选方案
+
+Node.js 内置了类似的功能。[`util.debuglog`](https://nodejs.cn/api/util.html#util_util_debuglog_section) 方法提供了几乎相同的功能。
+
+让我们看一个示例：
+
+```js
+// index.js
+const util = require('util')
+const debuglog = util.debuglog('app')
+
+debuglog('hello from my debugger [%d]', 123)
+```
+
+在终端中运行此代码时，将不会看到任何日志消息。但是，当您定义在 `app` 日志消息中进行测试并定义环境变量 `NODE_ DEBUG=app` 时，日志消息将显示：
+
+```bash
+$ NODE_DEBUG=app node index.js
+APP 1000: hello from my debugger [123]
+```
+
+`util.debuglog` 甚至支持通配符（`*`），以防您希望同时为不同的模块启用日志消息。
+
+```js
+// index.js
+const util = require('util')
+const logGeneral = util.debuglog('app-general')
+const logTimer = util.debuglog('app-timer')
+const delay = 500
+
+logGeneral('启动应用程序')
+
+setTimeout(() => {
+  logTimer('%d 秒后计时器启动', delay)
+}, delay)
+```
+
+使用 `app-*` 环境变量运行脚本会导致以下结果：
+
+```bash
+$ NODE_DEBUG=app-* node index.js
+APP-GENERAL 7384: 启动应用程序
+APP-TIMER 7384: 500 秒后计时器启动
+```
+
+`NODE_DEBUG` 环境变量还可以用于从 Node.js 内部获取调试消息。您可能偶尔会在 Node.js 文档中遇到它。
+
+## 最后
+
+了解 `util.debuglog` 很好，但它没有涵盖 `debug` 包的所有功能。对我来说，`util.debuglog` 是小型项目中 `debug` 包的一个很好的替代方案。
diff --git "a/Node/\345\246\202\344\275\225\345\234\250 Node.js \345\272\224\347\224\250\347\250\213\345\272\217\344\270\255\344\275\277\347\224\250 ESLint.md" "b/Node/\345\246\202\344\275\225\345\234\250 Node.js \345\272\224\347\224\250\347\250\213\345\272\217\344\270\255\344\275\277\347\224\250 ESLint.md"
new file mode 100644
index 0000000..9618a53
--- /dev/null
+++ "b/Node/\345\246\202\344\275\225\345\234\250 Node.js \345\272\224\347\224\250\347\250\213\345\272\217\344\270\255\344\275\277\347\224\250 ESLint.md"	
@@ -0,0 +1,246 @@
+# 如何在 Node.js 应用程序中使用 ESLint
+
+[ESLint](https://eslint.org/) 是一个开源 JavaScript lint 实用程序，它可以帮助您克服开发人员的错误，因为 JavaScript 是弱类型的语言。
+
+JavaScript 社区中有很多选项，比如 [JSLint](http://jslint.com/)、[JSHint](https://jshint.com/) 和 [JSCS](https://jscs-dev.github.io/)（未维护，已与 ESLint 合并），包括今天我们要讲的 ESLint。
+
+ESLint 旨在使所有规则完全可插入。这是它产生的主要原因之一。它允许开发人员创建自己的 lint 规则。[ESLint 官方指南](http://eslint.org/docs/user-guide)中提供的每个规则都是独立的规则，开发人员可以在任何时候决定是否使用特定的规则。
+
+## 安装
+
+对于项目目录的本地安装：
+
+```bash
+npm i eslint -D
+```
+
+对于工作系统中的全局安装：
+
+```bash
+npm i eslint -g
+```
+
+现在可以通过终端中的 `eslint` 命令使用 ESLint。
+
+## 配置
+
+最简单的配置方法是设置一个 `.eslintrc` JSON 文件，其中可以描述所有的 linting 规则。
+
+`.eslintrc` 的一个示例：
+
+```json
+{
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "rules": {
+    "no-console": 0,
+    "space-infix-ops": "error",
+    "quotes": [
+      "error",
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "space-before-blocks": ["error", "always"],
+    "semi": ["error", "never"]
+  },
+  "plugins": []
+}
+```
+
+**主要字段：**
+
+- `parse` — 指定解析器
+- `parserOptions` — 指定解析器选项
+- `env` — 指定脚本的运行环境
+- `root` — 为 `true` 时，停止向上查找父级目录中的配置文件
+- `globals` — 脚本在执行期间访问的额外的全局变量
+- `rules` — 在此处添加您的自定义规则
+
+如果全局安装了 eslint，我们还可以使用以下命令生成配置文件：
+
+```bash
+eslint --init
+```
+
+在其他情况下，如果您已在本地将其安装到项目中，则需要在终端中输入：
+
+```bash
+./node_modules/.bin/eslint --init
+```
+
+在这两种情况下，都会提示您生成 `.eslintrc` 文件的一组基本规则。
+
+![carbon.png](https://upload-images.jianshu.io/upload_images/18281896-7fde98f136cb001c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+上述提示后生成的文件示例：
+
+```json
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 12
+  },
+  "rules": {
+    "indent": ["error", "tab"],
+    "linebreak-style": ["error", "windows"],
+    "quotes": ["error", "single"],
+    "semi": ["error", "never"]
+  }
+}
+```
+
+> 有关配置的详细信息，请[阅读此处](http://eslint.org/docs/user-guide/configuring)。
+
+为了方便运行，我们打开项目的 `package.json`，在 `scripts` 字段里面添加以下脚本：
+
+```json
+{
+  "scripts": {
+    "lint": "eslint **/*.js",
+    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
+    "lint-fix": "eslint --fix **/*.js"
+  }
+}
+```
+
+我们将该规则应用于以下文件：
+
+```js
+var a = 1
+console.log(1)
+```
+
+执行 `npm run lint` 后将出现以下信息：
+
+![npm run lint](https://upload-images.jianshu.io/upload_images/18281896-1eda7c004ce32f4d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+ESLint 提示已经很明显了：3 个错误。第一行和第二行的最后又额外的分号错误，`a` 被赋值但从未使用。
+
+并且提示使用 `--fix` 选项修复错误和警告，有 2 个错误是可以修复的。现在，使用 `npm run lint-fix` 修复它，`a` 的去留就看自己手动更改。
+
+你还可以运行 `npm run lint-html` 命令，将检查结果写入一个网页文件。
+
+![npm run lint-html](https://upload-images.jianshu.io/upload_images/18281896-b46d8261f877a95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 配置文件优先级
+
+如果您按上面的步骤一步步来，你会可能已经知道，`ESLint` 支持几种格式的配置文件。
+
+现在存在一个问题，如果同个目录下有多个 `ESLint` 文件，它们会如何执行，优先级如何？
+
+ESLint [源码](https://github.com/eslint/eslint/blob/v6.0.1/lib/cli-engine/config-array-factory.js#L52)中给出了我们答案，其优先级配置如下：
+
+```js
+const configFilenames = [
+  '.eslintrc.js',
+  '.eslintrc.yaml',
+  '.eslintrc.yml',
+  '.eslintrc.json',
+  '.eslintrc',
+  'package.json'
+]
+```
+
+> .eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json
+
+## 规则
+
+ESLint 中的规则是单独添加的。默认情况下不强制执行任何规则。您必须明确指定规则，然后才会为 linting 过程启用它。
+
+> [点击此处](http://eslint.org/docs/rules/)官方文档查找完整的规则列表。
+
+在决定要包含哪些规则之后，您必须设置这些错误级别。每个错误级别可定义如下：
+
+- `0` — 关闭规则，相当于 `off`
+- `1` — 打开规则作为警告，相当于 `warn`
+- `2` — 打开规则作为错误，相当于 `error`
+
+错误和警告之间的区别在于 eslint 完成时将具有的退出代码。如果发现任何错误，eslint 将以 `1` 退出代码退出，否则将以 `0` 退出。
+
+如果您在生成步骤中进行 lint，这允许您控制哪些规则应**破坏您的生成**，哪些规则应视为警告。
+
+## 环境
+
+您正在编写的代码可能适用于特定环境，例如，您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API，并且该应用程序的前端将在 Vue/React 中构建。
+
+两个不同的项目、两个不同的环境，它们都可以在一个文件中具有单独的 eslint 配置，即使客户端和服务器位于一个被视为项目根目录的项目目录下。
+
+**它是如何完成的？**
+
+通过在 `.eslintrc` 的 `"env"` 部分将环境 `id` 设置为 `true`。
+
+## ESLint CLI
+
+ESLint 附带一个命令行界面（CLI），用于 lint 文件或目录。
+
+```bash
+eslint index.js
+```
+
+前面示例中我们已经看到，运行命令后生成的输出将按文件分组，并将指定 `line:column` 警告/错误、错误原因以及每个故障的规则名称。
+
+## 将 ESLint 与您喜欢的编码风格结合使用
+
+ESLint 个人并不提倡任何编码风格。您可以设置 `.eslintrc` 文件以使用您喜欢的[样式规则](http://eslint.org/docs/rules/#stylistic-issues)强制编码样式。
+
+您还可以将 ESLint 与样式指南（如 [Airbnb](https://github.com/airbnb/javascript)、[JavaScript Standard Style](http://standardjs.com/)）一起使用。
+
+你还必须使用额外的插件，例如：
+
+- Airbnb 的插件 [`eslint-config-airbnb-base`](https://www.npmjs.com/package/eslint-config-airbnb-base)。
+- JavaScript 标准风格 [eslint-config-standard](https://github.com/feross/eslint-config-standard)
+
+有许多一些流行库的插件：[Vue](https://www.npmjs.com/package/eslint-plugin-vue) | [React](https://www.npmjs.com/package/eslint-plugin-react) | [Angular](https://github.com/EmmanuelDemey/eslint-plugin-angular)
+
+您还可以在 [awesome-eslint](https://github.com/dustinspecker/awesome-eslint) 找到一些 ESLint 配置、插件等列表。
+
+## 团队规范
+
+[AlloyTeam](https://github.com/AlloyTeam) 给出的 React/Vue/TypeScript 项目的渐进式 ESLint 配置（[eslint-config-alloy](https://github.com/AlloyTeam/eslint-config-alloy)），以下贴出 React 的一小部分配置：
+
+```js
+module.exports = {
+  parserOptions: {
+    babelOptions: {
+      presets: ['@babel/preset-react']
+    }
+  },
+  plugins: ['react'],
+  rules: {
+    /**
+     * 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头
+     * @reason 类型相关的约束交给 TypeScript
+     */
+    'react/boolean-prop-naming': 'off',
+    /**
+     * <button> 必须有 type 属性
+     */
+    'react/button-has-type': 'off',
+    /**
+     * 一个 defaultProps 必须有对应的 propTypes
+     * @reason 类型相关的约束交给 TypeScript
+     */
+    'react/default-props-match-prop-types': 'off',
+    /**
+     * props, state, context 必须用解构赋值
+     */
+    'react/destructuring-assignment': 'off',
+    /**
+     * 组件必须有 displayName 属性
+     * @reason 不强制要求写 displayName
+     */
+    'react/display-name': 'off'
+    // ...
+  }
+}
+```
diff --git "a/Node/\345\246\202\344\275\225\345\257\271 npm package \350\277\233\350\241\214\345\217\221\345\214\205.md" "b/Node/\345\246\202\344\275\225\345\257\271 npm package \350\277\233\350\241\214\345\217\221\345\214\205.md"
new file mode 100644
index 0000000..fc3e05c
--- /dev/null
+++ "b/Node/\345\246\202\344\275\225\345\257\271 npm package \350\277\233\350\241\214\345\217\221\345\214\205.md"	
@@ -0,0 +1,67 @@
+# 如何对 npm package 进行发包
+
+在发布公共 package 之前，需要在 [npm 官网](https://www.npmjs.com/)进行注册一个账号。
+
+随后，在本地项目执行命令 `npm login` 登录。
+
+```bash
+$ npm login
+# 账号
+# 密码
+# 邮箱
+# 一次性密码验证
+```
+
+最后，执行 `npm publish` 发包：
+
+```bash
+npm publish
+```
+
+> **注意**：`package.json` 不能将 `private` 设置为 `true`，他会将包标记为私有。
+
+一旦发包成功，我们就可以像其他依赖包一样，通过 `npm i xxx` 安装我们发布的包，在项目上使用。
+
+如果我们更新了该包，需要再次发包，可以使用 `npm version` 命令，控制该版本进行升级，注意需要遵循 [Semver 规范](https://github.com/semver/semver/blob/master/semver.md)。
+
+```bash
+# 增加一个修复版本号
+$ npm version patch
+
+# 增加一个小的版本号
+$ npm version minor
+
+# 将更新后的包发布到 npm 中
+$ npm publish
+```
+
+在发布 npm 包时，我们一般都只发布构建后的资源，这时我们可以使用 `package.json` 的 `files` 字段。
+
+```json
+{
+  "files": ["dist"]
+}
+```
+
+它描述了在使用 `npm publish` 时推送到 npm 服务器的文件列表，支持目录和通配符，我们也可以在 `.gitignore` 或者 `.npmignore` 文件内排除不需要上传的文件。
+
+但有一点需要注意，无论我们怎么设置，有些文件会始终被包含发包内，比如：
+
+- `package.json`
+- `README`
+- `LICENSE / LICENCE`
+- `package.json` 内 `main` 字段的文件
+
+有一些文件则会始终被排除在发包内，比如：
+
+- `.git`
+- `.DS_Store`
+- etc
+
+最后，当你发包成功后，可以在 [npm devtool](https://npm.devtool.tech/zx) 查看各项数据。
+
+![npm devtool](https://upload-images.jianshu.io/upload_images/18281896-6a0b37bec731ae98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 更多资料
+
+[A Comprehensive Guide To Creating and Publishing Your First NPM Package](https://eedris.hashnode.dev/a-comprehensive-guide-to-creating-and-publishing-your-first-npm-package)
diff --git "a/Node/\345\270\270\347\224\250\347\232\204 npm \345\221\275\344\273\244.md" "b/Node/\345\270\270\347\224\250\347\232\204 npm \345\221\275\344\273\244.md"
new file mode 100644
index 0000000..a23ee65
--- /dev/null
+++ "b/Node/\345\270\270\347\224\250\347\232\204 npm \345\221\275\344\273\244.md"	
@@ -0,0 +1,570 @@
+# 常用的 npm 命令
+
+使用 npm 时，您很可能会在大多数交互中使用命令行工具。因此，这里详细列出了您将遇到并需要最频繁使用的命令。
+
+## npm 帮助
+
+`npm help` 命令提供了快速查询所有选项：
+
+```bash
+npm help
+# or
+npm --help
+```
+
+加上 `--` 是有区别的。第一个将打开默认浏览器，在页面显示信息，而另一个将在命令行输出信息。
+
+它可以帮助我们无论是否在线/离线状态下，都可以快速查看 npm 提供的所有选项。
+
+还可以显示特定 npm 命令的帮助：
+
+```bash
+npm help <command>
+# or
+npm <command> -h
+```
+
+## npm 的全局配置文件
+
+npm 配置文件是 `.npmrc`，全局配置文件默认在用户目录下。
+
+如果没有找到，可以通过以下命令查看：
+
+```bash
+npm config get userconfig
+```
+
+您可以查看该文件的所有 npm 配置信息。
+
+以下是其他一些便捷的命令。
+
+查看所有配置项：
+
+```bash
+npm config list
+npm config ls
+npm config ls  -l
+```
+
+查看缓存配置，`get` 后面可以跟任意配置项：
+
+```bash
+npm config get cache
+```
+
+打开全局 `.npmrc` 文件：
+
+```bash
+npm config edit
+```
+
+还有一些不错的命令，会在下文讲到。
+
+## 快速初始化项目
+
+`npm init` 命令是一个逐步构建项目的工具。
+
+```bash
+npm init
+```
+
+根据提示填写内容，也可以按提供的默认值一路回车（Enter）。
+
+为了省去上面的操作，我们加上 `--yes` 标志将自动使用默认值 `npm init` 填充所有选项：
+
+```bash
+npm init --yes
+npm init -y
+```
+
+完成以上面操作后，将会生成一个 `package.json` 文件并将其放置在当前目录中。
+
+您可以通过 `npm config set` 配置常用的默认字段值：
+
+```bash
+npm config set init-author-name "lio-zero"
+npm config set init-author-email "licroning@163.com"
+npm config set init-author-url "https://github.com/lio-zero"
+npm config set init-license "MIT"
+# ...
+```
+
+> **Tips**：您可以打开全局的 `.npmic` 文件配置统一配置它们。
+
+## 安装其他来源的包
+
+npm cli 还可以让你安装其他来源的包：
+
+```bash
+npm config set xxx
+
+# 淘宝镜像
+npm config set registry https://registry.npmmirror.com
+```
+
+查看是否切换成功：
+
+```bash
+npm config get registry
+```
+
+如果返回设置的源链接，说明镜像设置成功。
+
+> **Tips**：您可以安装 [nrm](https://github.com/Pana/nrm) 包在不同源之间快速切换，例如 `npm`、`cnpm`、`taobao` 等。
+
+**注意**：原淘宝 npm 域名已停止解析，详细内容查阅[【公告】淘宝 npm 域名即将切换 && npmmirror 重构升级 && 微信交流群](https://zhuanlan.zhihu.com/p/465424728?spm=a2c6h.24755359.0.0.2b394dccWTS9up)。
+
+## 使用快捷方式安装包
+
+安装依赖项：
+
+```bash
+npm install <package_name>
+npm i <package_name>
+```
+
+安装开发环境依赖：
+
+```bash
+npm install --save-dev <package_name>
+npm i -D <package_name>
+```
+
+安装生产环境依赖（默认）：
+
+```bash
+npm install --save-prod <package_name>
+npm i -P <package_name>
+```
+
+全局安装包：
+
+```bash
+npm install --global <package_name>
+npm i -g <package_name>
+```
+
+同时安装多个包：
+
+```bash
+npm i express cheerio axios
+```
+
+安装具有相同前缀的多个包：
+
+```bash
+npm i eslint-{plugin-import,plugin-react,loader} express
+```
+
+额外的，当你需要指定包版本时，可以使用 `@` 符号：
+
+```bash
+npm i vue@3.2.25
+npm i -g webpack@5.58.0
+```
+
+检查 npm 包的所有版本，可以在下面的**检查任何 npm 包的最新版本**找到。
+
+## 干净安装你的包依赖
+
+`npm ci` 用于清除安装包依赖项。它通常用于自动化环境，如 CI/CD 平台。
+
+```bash
+npm ci
+```
+
+它与 `npm install` 有以下不同之处：
+
+- 它安装的是 `package-lock.json` 中提到的包的确切版本。
+- 删除现有的 `node_modules` 并运行新的安装。
+- 它不会写信给你的 `package.json`或 `*-lock` 文件。
+- 它不会安装与 npm install 类似的单个包。
+
+## NPM scripts
+
+`npm scripts` 用于自定义脚本，例如：
+
+```bash
+npm run env
+```
+
+上面的命令是 `npm cli` 为我们提供的一个脚本命令，用于列出程序内的所有环境变量。
+
+通常，我们可以在 `package.json` 内的 `scripts` 定义我们的脚本命令，例如：
+
+```json
+{
+  "name": "app-project",
+  "scripts": {
+    "serve": "nodemon app.js"
+  }
+}
+```
+
+我们可以通过运行 `npm run serve` 来启动我们的应用程序。
+
+我们可以使用不带参数的 `npm run` 命令查看项目上的所有命令脚本：
+
+```bash
+npm run
+
+#  serve
+#    nodemon app.js
+```
+
+> **注意**：每当 `npm run` 命令，都会新建一个 shell 文件来执行我们当前的执行的命令，只要符合 shell 可运行的命令，都可以执行。
+
+在执行 `npm scripts` 的过程中，我们可以通过 `npm_package_xxx` 前缀拿到 `package.json` 内的字段。
+
+例如，获取 `name` 字段：
+
+```js
+console.log(process.npm_package_name) // app-project
+```
+
+## 在 package.json 中配置自己的变量
+
+在上一节中，我们使用到了 `npm run env` 命令，它将列出我们包中存在的所有 npm 环境变量
+
+我们可以在 `package.json` 内的 `config` 字段添加自己的自定义变量：
+
+```json
+{
+  "config": {
+    "myVariable": "Hello World"
+  }
+}
+```
+
+执行以下命令：
+
+```bash
+npm run env | grep npm_package_config_
+```
+
+我们将看到，我们刚才所配置的变量，它以 `npm_package_config_` 为前缀。
+
+项目中获取自定义变量：
+
+```js
+console.log(process.npm_package_config_myVariable) // Hello World
+```
+
+> **注意**：`config` 字段内的变量可以在输入命令时被覆盖：
+
+```js
+npm config set app-project:myVariable Hello Node
+```
+
+## 快速导航到包主页、储存库和 issues
+
+在查找 npm 包的文档时，我们经常使用 Google 搜索其主页和 npm 页面。
+
+但也有其他更快速的方法，我们可以通过运行以下命令快速进入主页：
+
+```bash
+npm home <package_name>
+# or
+npm docs <package_name>
+
+# example
+npm home axios
+npm home vue
+```
+
+导航到 issues：
+
+```bash
+npm bug <package_name>
+```
+
+打开它的存储库也很容易：
+
+```bash
+npm repo <package_name>
+```
+
+这几个命令都将在您的默认浏览器中打开目标网站，它们通常会通过 `package.json` 文件所提供的信息进行检索。
+
+## 定位 `node_modules` 目录
+
+```bash
+# 本地 node_modules
+npm root
+
+# 全局 node_modules
+npm root -g
+```
+
+## 删除重复包
+
+`npm dedupe` 命令用于删除重复的依赖项。它通过删除重复的包并在多个依赖包之间有效地共享公共依赖项来简化整体结构。它会产生一个扁平的和去重的树。
+
+```bash
+npm dedupe
+# or
+npm ddp
+```
+
+## 扫描您的应用程序是否存在漏洞
+
+`npm audit` 检查项目依赖项是否存在漏洞。它可以看出有风险的 package、依赖库的依赖链、风险原因及其解决方案。
+
+```bash
+npm audit
+```
+
+如果发现存在漏洞，我们可以使用 `npm audit fix`，它将自动安装所有易受攻击依赖包的修补版本（如果可用）。
+
+```bash
+npm audit fix
+# or
+npm audit fix --force
+```
+
+更好的做法是使用 [synk](https://github.com/snyk/cli)，它是一个高级版的 `npm audit`，可自动修复，且支持 CI/CD 集成与多种语言。
+
+```bash
+npx snyk
+```
+
+## 清理 npm 缓存
+
+磁盘满了，试着清楚 npm 缓存：
+
+```bash
+npm cache clean --force
+yarn cache clean
+pnpm store prune
+```
+
+## 检查环境
+
+`npm doctor` 命令可以在我们的环境中运行多项检查，已检查当前 node 和 npm 存在的问题。
+
+```bash
+npm doctor
+```
+
+## 在本地测试你的 npm 包
+
+我们可以将本地开发的 npm 包安装到全局或指定目录。
+
+```bash
+npm i . -g
+# 在某个项目中安装本地包
+npm i /path/to/packageName
+```
+
+npm 为我们提供了另一个命令， 命令
+
+我们还可以使用 `npm link` 命令做一个软链指向当前需要测试的项目：
+
+```bash
+# 先在本地开发的 npm 包中执行
+npm link
+
+# 然后切换到你需要安装本地测试包的项目中
+npm link <package_name>
+```
+
+使用 `npm unlink` 可以取消安装本地的调试包：
+
+```bash
+npm unlink <package_name>
+```
+
+## 检查过时的包
+
+使用 `npm outdated` 命令来检查所有过时的 npm 包。它还显示了应该为任何过时的包安装的最新版本。
+
+```bash
+npm outdated --long
+# or
+npm outdated -l
+```
+
+## 检查任何 npm 包的最新版本
+
+我们可以通过运行以下命令来检查任何已发布的 npm 包的最新版本的详细信息：
+
+```bash
+npm view <package_name>
+# or
+npm v <package_name>
+npm info <package_name>
+npm show <package_name>
+```
+
+仅显示最新版本号：
+
+```bash
+npm v <package_name> version
+```
+
+显示所有版本的列表：
+
+```bash
+npm v <package_name> versions
+```
+
+## 列出所有已安装的包
+
+`npm list` 命令可以列出项目中安装的所有 npm 包。它将创建一个树结构，显示已安装的包及其依赖项。
+
+```bash
+npm list
+#or
+npm ls
+```
+
+查看单个包：
+
+```bash
+npm ls <package_name>
+```
+
+可以利用 `--depth flag` 来限制搜索深度
+
+```bash
+# 本地
+npm ls --depth=1
+
+# 查看全局安装的包
+npm list -g --depth 0
+```
+
+## 发布一个包
+
+首先，需要使用 `npm login` 登录：
+
+```bash
+npm login
+```
+
+然后，在使用 `npm publish` 发布项目：
+
+```bash
+npm publish
+```
+
+> 详细内容可查阅另一篇[如何对 npm package 进行发包](https://github.com/lio-zero/blog/blob/master/Node/%E5%A6%82%E4%BD%95%E5%AF%B9%20npm%20package%20%E8%BF%9B%E8%A1%8C%E5%8F%91%E5%8C%85.md)。
+
+## 弃用包的相关操作
+
+> **注意**：强烈建议弃用包或包版本而不是取消发布它们，因为取消发布会从注册表中完全删除一个包，这意味着任何依赖它的人都将无法再使用它，而不会发出警告。
+
+弃用整个包：
+
+```bash
+npm deprecate <package_name> "弃用信息"
+```
+
+弃用包的单个版本：
+
+```bash
+npm deprecate <package_name>@<version> "弃用信息"
+```
+
+取消弃用操作：
+
+```bash
+# 将弃用消息改为空字符串即可
+npm deprecate <package_name> ""
+```
+
+取消发布整个包：
+
+```bash
+npm unpublish <package_name> -f
+```
+
+取消发布包的指定版本：
+
+```bash
+npm unpublish <package_name>@<version>
+```
+
+取消发布包后，以相同名称重新发布将被阻止 24 小时。如果您错误地取消发布了一个包，建议您以不同的名称再次发布，或者对于未发布的版本，增加版本号并再次发布。
+
+## 更新包
+
+`npm update` 命令用于更新包：
+
+```bash
+npm update <name>
+npm update <name> -g
+npm update <name> -D
+```
+
+为了便于查看依赖信息，我们可以安装 `npm-check` 包，它用于检查过时、不正确和未使用的依赖项。
+
+```bash
+npm i -g npm-check
+```
+
+运行以下命令：
+
+```bash
+npm-check -u
+```
+
+它将显示用于选择要更新的模块的交互式 UI。替代的还有 [`npm-check-updates`](https://www.npmjs.com/package/npm-check-updates)。
+
+> 可查看另一篇[检查 npm 模块更新](https://github.com/lio-zero/blog/blob/master/Node/%E6%A3%80%E6%9F%A5%20npm%20%E6%A8%A1%E5%9D%97%E6%9B%B4%E6%96%B0.md)
+
+## 查看哪些包已过时
+
+查看哪些包已过时：
+
+```bash
+npm outdated
+```
+
+查看全局环境的已过时包：
+
+```bash
+npm outdated -g --depth=0
+```
+
+## 检测当前镜像源的延迟
+
+检测当前镜像源的延迟情况：
+
+```bash
+npm ping
+```
+
+## 锁定包依赖
+
+[npm shrinkwrap](https://docs.npmjs.com/cli/shrinkwrap) 命令用于锁定包依赖项的版本，以便您可以准确控制在安装包时将使用每个依赖项的哪些版本。
+
+```bash
+npm shrinkwrap
+```
+
+它在部署 Node.js 应用程序时非常有用。通过它，您可以确定要部署哪些版本的依赖项。
+
+## 控制项目版本号
+
+当我们发布 npm 包后，每次我们要推送新版本时，都需要修改版本号的，这时可以通过 `npm version` 命令进行设置：
+
+```bash
+# 新补丁版本表示向后兼容的错误修复
+npm version patch
+
+# 新的次要版本表示向后兼容的新功能
+npm version minor
+
+# 新的主要版本表示重大更改
+npm version major
+```
+
+控制该版本进行升级，注意需要遵循 [Semver 规范](https://semver.org/)。
+
+## 更多资料
+
+- [awesome-npm](https://github.com/sindresorhus/awesome-npm) 收集了很多很棒的 npm 资源和技巧
+- [13 npm Tricks for Faster JavaScript Development](https://bretcameron.medium.com/13-npm-tricks-for-faster-javascript-development-4fe2a83f87a2)
+- [10 Tips and Tricks That Will Make You an npm Ninja](https://www.sitepoint.com/10-npm-tips-and-tricks/)
+- [2018 年了，你还是只会 npm install 吗？](https://juejin.cn/post/6844903582337237006#comment)
diff --git "a/Node/\345\277\253\351\200\237\346\211\247\350\241\214 JavaScript \346\226\207\344\273\266\347\232\204\350\257\255\346\263\225\346\243\200\346\237\245.md" "b/Node/\345\277\253\351\200\237\346\211\247\350\241\214 JavaScript \346\226\207\344\273\266\347\232\204\350\257\255\346\263\225\346\243\200\346\237\245.md"
new file mode 100644
index 0000000..3329af8
--- /dev/null
+++ "b/Node/\345\277\253\351\200\237\346\211\247\350\241\214 JavaScript \346\226\207\344\273\266\347\232\204\350\257\255\346\263\225\346\243\200\346\237\245.md"	
@@ -0,0 +1,39 @@
+# 快速执行 JavaScript 文件的语法检查
+
+Node.js 提供了一种检查 JavaScript 文件是否语法有效的方法。
+
+## 从命令行检查 JavaScript 语法
+
+Node.js `--check` 选项在运行 JavaScript 文件时可用。
+
+以 `var a =` 为例，执行命令将输出：
+
+```bash
+$ node --check test.js
+
+SyntaxError: Unexpected end of input
+    at Object.compileFunction (node:vm:352:18)
+    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
+    at checkSyntax (node:internal/main/check_syntax:66:3)
+```
+
+`--check` 标志将关闭 [Node.js](https://nodejs.org/en/) 二进制文件转换为 JavaScript 语法检查器，用于解析源代码并查找无效语法。Node.js 没有在此**检查模式**下运行任何代码。
+
+> Node Docs：`--check` 在不执行脚本的情况下检查脚本的语法。如果脚本无效，则退出并显示错误代码。
+
+如果您正在转换代码，并且希望确保代码转换生成有效的 JavaScript，那么这样的快速语法检查将非常方便。
+
+## vm 模块
+
+在研究 `---check` 选项时，我还了解了 [vm 模块](https://nodejs.org/api/vm.html)。`vm` 模块是 Node.js 核心的一部分。
+
+您可以使用它从脚本中评估和语法检查 JavaScript 文件。
+
+```js
+const vm = require('vm')
+const script = new vm.Script('var a =')
+```
+
+如果在提供的 JavaScript 代码字符串中存在任何语法错误，`vm.Script` 的构造函数将抛出异常。
+
+`--check` 和 `vm` 模块看起来很有趣。因此，如果您正在生成或转换代码，请使用它们包含并构建自己的 JavaScript 语法检查器。
diff --git "a/Node/\346\237\245\346\211\276\346\234\252\344\275\277\347\224\250\347\232\204 npm \344\276\235\350\265\226\351\241\271 .md" "b/Node/\346\237\245\346\211\276\346\234\252\344\275\277\347\224\250\347\232\204 npm \344\276\235\350\265\226\351\241\271 .md"
new file mode 100644
index 0000000..e75532d
--- /dev/null
+++ "b/Node/\346\237\245\346\211\276\346\234\252\344\275\277\347\224\250\347\232\204 npm \344\276\235\350\265\226\351\241\271 .md"	
@@ -0,0 +1,43 @@
+# 查找未使用的 npm 依赖项
+
+对于一个逐步构建起来的大型项目，我们可能会不断的引入不同的依赖，以适应开发需要。这些依赖关系可能会很快的堆积起来。
+
+它们不仅会堆积起来，可能会在某一天，您发现了一个更好的库，您引入它替换原始依赖项，原始依赖将被完全停止使用。而您可能会忘了将它和它的相关依赖移除。
+
+由于这些依赖项没有被使用，随着我们不必要地一次又一次地安装它们，构建时间越来越长。
+
+幸运的是，与您在开发过程中面临的大多数问题一样，还有其他人已经遇到了这个问题，并投入了时间和精力来制定解决方案。
+
+对于 `npm` 依赖项，该解决方案是 [`depcheck`](https://github.com/depcheck/depcheck)，一个小型的库，它可以用来扫描代码并识别任何未使用的依赖项。
+
+如果手头有 Node.js 项目，您可以这样使用它。
+
+您不必将 `depcheck` 安装到全局或本地，npm 自带的 `npx` 可以帮助到您：
+
+```bash
+npx depcheck
+```
+
+就这样！`npx` 将安装 `depcheck` 并为您运行它。
+
+如果幸运的话，该命令的输出将为 `No depcheck issue`，表示没有未使用的依赖项。
+
+但如果您有任何未使用的依赖项，您将看到类似于以下的输出：
+
+```txt
+Unused dependencies
+* eslint
+* node-cron
+* rss-parser
+* uuid
+* zlib
+```
+
+另外，`depcheck` 还将识别您正在使用的、未在 `package.json` 文件中明确列出的任何依赖项，如下所示：
+
+```txt
+Missing dependencies
+* type-fest
+```
+
+非常方便、快速。您甚至可以使用 `depcheck` 在提交/推送时自动运行这些检查以确保您或其他开发者不会安装到这些未使用的依赖项。
diff --git "a/Node/\346\243\200\346\237\245 npm \346\250\241\345\235\227\346\233\264\346\226\260.md" "b/Node/\346\243\200\346\237\245 npm \346\250\241\345\235\227\346\233\264\346\226\260.md"
new file mode 100644
index 0000000..69c78b1
--- /dev/null
+++ "b/Node/\346\243\200\346\237\245 npm \346\250\241\345\235\227\346\233\264\346\226\260.md"	
@@ -0,0 +1,52 @@
+# 检查 npm 模块更新
+
+npm 提供了我们更新模块的命令 `npm update`：
+
+```bash
+npm update <name>
+npm update <name> -g
+npm update <name> -D
+```
+
+您可以指定项目所依赖的模块进行更新，但如果我们需要像 yarn 的 `yarn upgrade-interactive` 命令一样的交互式更新模式，查看项目模块详细的更新情况呢？有一些方便 npm 包可以帮助到我们。
+
+## `npm-check-updates` 模块
+
+[`npm-check-updates`](https://www.npmjs.com/package/npm-check-updates) 将你的 `package.json` 依赖升级到最新版本，忽略指定的版本。
+
+```bash
+npm i npm-check-updates -g
+```
+
+你也可以不全局安装，在需要使用到时使用 npx 即可。
+
+使用 `ncu -u` 命令更新 `package.json` 文件相关依赖，并运行 `npm i` 安装最新包：
+
+```bash
+ncu -u
+npm i
+```
+
+![npm-check-updates](https://upload-images.jianshu.io/upload_images/18281896-91bfcf77ef23c111.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## `npm-check` 模块
+
+为了便于查看依赖信息，我们可以安装 [`npm-check`](https://www.npmjs.com/package/npm-check) 包，它用于检查过时、不正确和未使用的依赖项。
+
+```bash
+npm i -g npm-check
+```
+
+运行以下命令：
+
+```bash
+npm-check -u
+```
+
+效果如下：
+
+![npm-check](https://upload-images.jianshu.io/upload_images/18281896-b99ac4b59b74e1f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+它将显示用于选择要更新的模块的交互式 UI。
+
+> 更新：antfu 的 [taze](https://github.com/antfu/taze) 也是一个不错的选择。
diff --git "a/Node/\351\230\262\346\255\242 npm \345\256\211\350\243\205\344\270\215\346\224\257\346\214\201\347\232\204 Node.js \347\211\210\346\234\254.md" "b/Node/\351\230\262\346\255\242 npm \345\256\211\350\243\205\344\270\215\346\224\257\346\214\201\347\232\204 Node.js \347\211\210\346\234\254.md"
new file mode 100644
index 0000000..b25c75e
--- /dev/null
+++ "b/Node/\351\230\262\346\255\242 npm \345\256\211\350\243\205\344\270\215\346\224\257\346\214\201\347\232\204 Node.js \347\211\210\346\234\254.md"	
@@ -0,0 +1,73 @@
+# 防止 npm 安装不支持的 Node.js 版本
+
+确保设置项目的使用特定的 Node.js 版本，使开发人员在 `git clone` 或 `git pull` 您的项目时，可以正常运行项目。
+
+我们可以通过在 `package.json` 中设置 `engines` 属性来[指定版本范围](https://docs.npmjs.com/files/package.json#engines)。
+
+```json
+{
+  "engines": {
+    "node": ">=15.0.0"
+  }
+}
+```
+
+许多项目定义了 `engine` 属性，但没有强制执行所需的 Node.js 版本。在不支持 Node.js 版本的项目中运行 `npm install` 时，将显示以下警告（`EBADENGINE`）。
+
+```bash
+$ npm install
+
+# npm WARN EBADENGINE Unsupported engine {
+# npm WARN EBADENGINE   package: 'expamle@1.0.0',
+# npm WARN EBADENGINE   required: { node: '>=15.0.0' },
+# npm WARN EBADENGINE   current: { node: 'v14.16.0', npm: '7.6.3' }
+# npm WARN EBADENGINE }
+```
+
+这就是 `npm` 在这个场景中所做的一切。它会显示警告，但不会失败并阻止用户继续操作。
+
+## 如何防止不支持 Node.js 版本的 `npm install`
+
+操作方法很简单，我们可以将一个本地 `npm` 配置文件（`.npmrc`）添加到模块/项目根目录中，[并显式启用严格的 Node.js 引擎处理](https://docs.npmjs.com/cli/v7/using-npm/config#engine-strict)。
+
+```bash
+# .npmrc
+engine-strict=true
+```
+
+如果项目包含定义 `engine-strict=true` 的 `.npmrc`，其 Node.js 未满足版本要求，则无法运行 `npm install`。
+
+> **注意**：`EBADENGINE` 将从 **WARN** 变为 **ERR**，安装过程将失败，状态码为 `1`。
+
+```bash
+$ npm install
+
+# npm ERR! code EBADENGINE
+# npm ERR! engine Unsupported engine
+# npm ERR! engine Not compatible with your version of node/npm: expamle@1.0.0
+# npm ERR! notsup Not compatible with your version of node/npm: expamle@1.0.0
+# npm ERR! notsup Required: {"node":">=15.0.0"}
+# npm ERR! notsup Actual:   {"npm":"7.6.3","node":"v14.16.0"}
+
+# npm ERR! A complete log of this run can be found in:
+# npm ERR!     /Users/node_cache/.npm/_logs/2021-08-09T15_15_48_050Z-debug.log
+```
+
+在这方面，[pnpm](https://pnpm.io/package_json#engines) 与 npm 保持一致。
+
+## Yarn 呢?
+
+[Yarn](https://yarnpkg.com/) 不需要额外的配置文件，默认情况下严格处理 `engines` 属性。这似乎是处理 Node.js 版本的正确方法。
+
+```bash
+$ yarn install
+
+# yarn install v1.22.19
+# info No lockfile found.
+# [1/5] 🔍  Validating package.json...
+# error engine-test@1.0.0: The engine "node" is incompatible with this module. Expected version ">=15.0.0". Got "14.16.0"
+# error Found incompatible module.
+# info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
+```
+
+这就是防止开发人员使用不受支持的 Node.js 版本的项目所需要的一切！
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9110db6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,796 @@
+# Article
+
+本仓库已经沉淀了大量内容，为了方便检索，您可以通过以下几种方式进行搜索：
+
+- 使用 GitHub 自带的网页搜索，按下 `T` 键。
+- 使用 [Sourcegraph.com](https://sourcegraph.com/github.com/lio-zero/blog) 进行搜索。
+- 最近写的[文章搜索站点](https://lio-zero-article-search.netlify.app/)。
+- 将这个仓库克隆到本地，然后在仓库目录使用下面的命令。
+
+```bash
+grep -nri [搜索词] docs | cat --number
+```
+
+比如，搜索 CSS 相关内容。
+
+```bash
+grep -nri css docs | cat --number
+```
+
+后面新增的文章可能不会在 `README.md` 内更新。您可以通过上面分享的几种方式进行搜索。
+
+## 学习说明
+
+学习一门语言、相关工具、框架都从官方文档出发，它们都是最新、最完善的。
+
+如果觉得文档看不下去或一些术语很难理解，可以先找一些大佬的文章、视频先入个门，回头在跟着文档刷一遍。
+
+前端技术栈日新月异，大家加油吧。
+
+> **Tips**：本人也是一名前端小白，文章没啥深度，都是很基础的内容，不喜勿喷。
+
+## Canvas
+
+- [使用 toBlob 下载 Canvas API 生成的图像](/Canvas/%E4%BD%BF%E7%94%A8%20toBlob%20%E4%B8%8B%E8%BD%BD%20Canvas%20API%20%E7%94%9F%E6%88%90%E7%9A%84%E5%9B%BE%E5%83%8F.md)
+- [在 HTML canvas 绘制文本](/Canvas/%E5%9C%A8%20HTML%20canvas%20%E7%BB%98%E5%88%B6%E6%96%87%E6%9C%AC.md)
+- [将 canvas 打印到 Data URL](/Canvas/%E5%B0%86%20canvas%20%E6%89%93%E5%8D%B0%E5%88%B0%20Data%20URL.md)
+- [开始使用 Canvas](/Canvas/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8%20Canvas.md)
+
+## CSS
+
+- [BEM 命令规范](/CSS/BEM%20%E5%91%BD%E4%BB%A4%E8%A7%84%E8%8C%83.md)
+- [BFC 及其应用](/CSS/BFC%20%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8.md)
+- [calc() 工作原理](</CSS/calc()%20%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86.md>)
+- [CSS @Supports](/CSS/CSS%20@Supports.md)
+- [CSS background 属性](/CSS/CSS%20background%20%E5%B1%9E%E6%80%A7.md)
+- [CSS Bulma 框架](/CSS/CSS%20Bulma%20%E6%A1%86%E6%9E%B6.md)
+- [CSS content-visibility 属性 — 推迟内容渲染](/CSS/CSS%20content-visibility%20%E5%B1%9E%E6%80%A7%20%E2%80%94%20%E6%8E%A8%E8%BF%9F%E5%86%85%E5%AE%B9%E6%B8%B2%E6%9F%93.md)
+- [CSS outline 属性](/CSS/CSS%20outline%20%E5%B1%9E%E6%80%A7.md)
+- [CSS Reset 与 Sprites](/CSS/CSS%20Reset%20%E4%B8%8E%20Sprites.md)
+- [CSS scroll-behavior 属性 — 纯 CSS 平滑滚动](/CSS/CSS%20scroll-behavior%E5%B1%9E%E6%80%A7%20%E2%80%94%20%E7%BA%AF%20CSS%20%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8.md)
+- [CSS vertical-align 属性](/CSS/CSS%20vertical-align%20%E5%B1%9E%E6%80%A7.md)
+- [CSS will-change 属性 — 优化渲染性能](/CSS/CSS%20will-change%20%E5%B1%9E%E6%80%A7%20%E2%80%94%20%E4%BC%98%E5%8C%96%E6%B8%B2%E6%9F%93%E6%80%A7%E8%83%BD.md)
+- [CSS 单位及其需要注意的地方](/CSS/CSS%20%E5%8D%95%E4%BD%8D%E5%8F%8A%E5%85%B6%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9.md)
+- [CSS 实现文本溢出省略效果](/CSS/CSS%20%E5%AE%9E%E7%8E%B0%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9C%81%E7%95%A5%E6%95%88%E6%9E%9C.md)
+- [CSS 盒模型](/CSS/CSS%20%E7%9B%92%E6%A8%A1%E5%9E%8B.md)
+- [CSS 继承、级联和特异性](/CSS/CSS%20%E7%BB%A7%E6%89%BF%E3%80%81%E7%BA%A7%E8%81%94%E5%92%8C%E7%89%B9%E5%BC%82%E6%80%A7.md)
+- [CSS 选择器](/CSS/CSS%20%E9%80%89%E6%8B%A9%E5%99%A8.md)
+- [CSS 重置元素样式](/CSS/CSS%20%E9%87%8D%E7%BD%AE%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F.md)
+- [display-none 与 [hidden] 的区别](/CSS/display-none%20%E4%B8%8E%20%5Bhidden%5D%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Flex 布局](/CSS/Flex%20%E5%B8%83%E5%B1%80.md)
+- [margin 与 padding 的区别](/CSS/margin%20%E4%B8%8E%20padding%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Normalize 和 Reset 的区别](/CSS/Normalize%20%E5%92%8C%20Reset%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [PostCSS](/CSS/PostCSS.md)
+- [SASS 预处理器](/CSS/SASS%20%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8.md)
+- [style='width**' 与 width='**'](/CSS/style='width__'%20%E4%B8%8E%20width='__'.md)
+- [仅 CSS 添加暗黑模式](/CSS/%E4%BB%85%20CSS%20%E6%B7%BB%E5%8A%A0%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F.md)
+- [仅使用 CSS 的打字机效果](/CSS/%E4%BB%85%E4%BD%BF%E7%94%A8%20CSS%20%E7%9A%84%E6%89%93%E5%AD%97%E6%9C%BA%E6%95%88%E6%9E%9C.md)
+- [使用 CSS aspect-ratio 特性使 iframe 响应式缩放](/CSS/%E4%BD%BF%E7%94%A8%20CSS%20aspect-ratio%20%E7%89%B9%E6%80%A7%E4%BD%BF%20iframe%20%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BC%A9%E6%94%BE.md)
+- [使用 CSS overscroll-behavior contain 来防止滚动链](/CSS/%E4%BD%BF%E7%94%A8%20CSS%20overscroll-behavior%20contain%20%E6%9D%A5%E9%98%B2%E6%AD%A2%E6%BB%9A%E5%8A%A8%E9%93%BE.md)
+- [使用 CSS 创建一个三角形](/CSS/%E4%BD%BF%E7%94%A8%20CSS%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E4%B8%89%E8%A7%92%E5%BD%A2.md)
+- [使用 Sass 默认参数的实用技巧](/CSS/%E4%BD%BF%E7%94%A8%20Sass%20%E9%BB%98%E8%AE%A4%E5%8F%82%E6%95%B0%E7%9A%84%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7.md)
+- [获取动画 CSS 属性的值](/CSS/%E8%8E%B7%E5%8F%96%E5%8A%A8%E7%94%BB%20CSS%20%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC.md)
+- [避免使用 CSS @import](/CSS/%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%20CSS%20@import.md)
+- [防止锚链接消失在粘性标题后面](/CSS/%E9%98%B2%E6%AD%A2%E9%94%9A%E9%93%BE%E6%8E%A5%E6%B6%88%E5%A4%B1%E5%9C%A8%E7%B2%98%E6%80%A7%E6%A0%87%E9%A2%98%E5%90%8E%E9%9D%A2.md)
+
+## CSS Layout
+
+- [CSS Layout Note](/CSS%20Layout/CSS%20Layout%20Note.md)
+- [CSS 多列（column）](/CSS%20Layout/CSS%20%E5%A4%9A%E5%88%97%EF%BC%88column%EF%BC%89.md)
+- [CSS 居中](/CSS%20Layout/CSS%20%E5%B1%85%E4%B8%AD.md)
+- [三栏布局](/CSS%20Layout/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80.md)
+- [侧边栏布局](/CSS%20Layout/%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%B8%83%E5%B1%80.md)
+- [卡片布局](/CSS%20Layout/%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80.md)
+- [固定头部](/CSS%20Layout/%E5%9B%BA%E5%AE%9A%E5%A4%B4%E9%83%A8.md)
+- [固定页脚](/CSS%20Layout/%E5%9B%BA%E5%AE%9A%E9%A1%B5%E8%84%9A.md)
+- [图片和文字垂直居中](/CSS%20Layout/%E5%9B%BE%E7%89%87%E5%92%8C%E6%96%87%E5%AD%97%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD.md)
+
+## DOM
+
+- [clientY 与 pageY 的区别](/DOM/clientY%20%E4%B8%8E%20pageY%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [DOM 中 Element 与 Node 有何区别](/DOM/DOM%20%E4%B8%AD%20Element%20%E4%B8%8E%20Node%20%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB.md)
+- [DOMContentLoaded 与 load 的区别](/DOM/DOMContentLoaded%20%E4%B8%8E%20load%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [HTMLCollection 和 NodeList 的区别](/DOM/HTMLCollection%20%E5%92%8C%20NodeList%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [JavaScript 事件传播机制](/DOM/JavaScript%20%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD%E6%9C%BA%E5%88%B6.md)
+- [keydown、keypress 和 keyup](/DOM/keydown%E3%80%81keypress%20%E5%92%8C%20keyup.md)
+- [key、keyCode 和 which](/DOM/key%E3%80%81keyCode%20%E5%92%8C%20which.md)
+- [mouseenter 与 mouseover 的区别](/DOM/mouseenter%20%E4%B8%8E%20mouseover%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [naturalWidth 与 width 的区别](/DOM/naturalWidth%20%E4%B8%8E%20width%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [nodeName 与 tagName 的区别](/DOM/nodeName%20%E4%B8%8E%20tagName%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [parentElement 与 parentNode 的区别](/DOM/parentElement%20%E4%B8%8E%20parentNode%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [stopImmediatePropagation 与 stopPropagation](/DOM/stopImmediatePropagation%20%E4%B8%8E%20stopPropagation.md)
+- [事件对象上的 currentTarget 与 target 属性](/DOM/%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E4%B8%8A%E7%9A%84%20currentTarget%20%E4%B8%8E%20target%20%E5%B1%9E%E6%80%A7.md)
+- [从 DOM 中移除一个元素](/DOM/%E4%BB%8E%20DOM%20%E4%B8%AD%E7%A7%BB%E9%99%A4%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0.md)
+- [从 DOM 元素中移除所有子元素](/DOM/%E4%BB%8E%20DOM%20%E5%85%83%E7%B4%A0%E4%B8%AD%E7%A7%BB%E9%99%A4%E6%89%80%E6%9C%89%E5%AD%90%E5%85%83%E7%B4%A0.md)
+- [从给定文本中去除 HTML](/DOM/%E4%BB%8E%E7%BB%99%E5%AE%9A%E6%96%87%E6%9C%AC%E4%B8%AD%E5%8E%BB%E9%99%A4%20HTML.md)
+- [从页面中删除所有 CSS](/DOM/%E4%BB%8E%E9%A1%B5%E9%9D%A2%E4%B8%AD%E5%88%A0%E9%99%A4%E6%89%80%E6%9C%89%20CSS.md)
+- [使用 closest 和 matches 方法来检测元素是否存在某选择器](/DOM/%E4%BD%BF%E7%94%A8%20closest%20%E5%92%8C%20matches%20%E6%96%B9%E6%B3%95%E6%9D%A5%E6%A3%80%E6%B5%8B%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8%E6%9F%90%E9%80%89%E6%8B%A9%E5%99%A8.md)
+- [使用 JavaScript 从多个元素中添加和删除 CSS 类](/DOM/%E4%BD%BF%E7%94%A8%20JavaScript%20%E4%BB%8E%E5%A4%9A%E4%B8%AA%E5%85%83%E7%B4%A0%E4%B8%AD%E6%B7%BB%E5%8A%A0%E5%92%8C%E5%88%A0%E9%99%A4%20CSS%20%E7%B1%BB.md)
+- [使用 JavaScript 将文本和 HTML 注入元素的四种不同方法](/DOM/%E4%BD%BF%E7%94%A8%20JavaScript%20%E5%B0%86%E6%96%87%E6%9C%AC%E5%92%8C%20HTML%20%E6%B3%A8%E5%85%A5%E5%85%83%E7%B4%A0%E7%9A%84%E5%9B%9B%E7%A7%8D%E4%B8%8D%E5%90%8C%E6%96%B9%E6%B3%95.md)
+- [使用 JavaScript 检查复选框是否被选中](/DOM/%E4%BD%BF%E7%94%A8%20JavaScript%20%E6%A3%80%E6%9F%A5%E5%A4%8D%E9%80%89%E6%A1%86%E6%98%AF%E5%90%A6%E8%A2%AB%E9%80%89%E4%B8%AD.md)
+- [使用 JavaScript 禁用按钮](/DOM/%E4%BD%BF%E7%94%A8%20JavaScript%20%E7%A6%81%E7%94%A8%E6%8C%89%E9%92%AE.md)
+- [使用 JavaScript 获取、设置和删除属性](/DOM/%E4%BD%BF%E7%94%A8%20JavaScript%20%E8%8E%B7%E5%8F%96%E3%80%81%E8%AE%BE%E7%BD%AE%E5%92%8C%E5%88%A0%E9%99%A4%E5%B1%9E%E6%80%A7.md)
+- [使用 JavaScript 获取和设置 CSS 属性的三种方法](/DOM/%E4%BD%BF%E7%94%A8%20JavaScript%20%E8%8E%B7%E5%8F%96%E5%92%8C%E8%AE%BE%E7%BD%AE%20CSS%20%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E6%B3%95.md)
+- [使用 URLSearchParams 在 JavaScript 中获取查询字符串值](/DOM/%E4%BD%BF%E7%94%A8%20URLSearchParams%20%E5%9C%A8%20JavaScript%20%E4%B8%AD%E8%8E%B7%E5%8F%96%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC.md)
+- [使页面在浏览器中可编辑](/DOM/%E4%BD%BF%E9%A1%B5%E9%9D%A2%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%8F%AF%E7%BC%96%E8%BE%91.md)
+- [切换 HTML 元素的类](/DOM/%E5%88%87%E6%8D%A2%20HTML%20%E5%85%83%E7%B4%A0%E7%9A%84%E7%B1%BB.md)
+- [切换类](/DOM/%E5%88%87%E6%8D%A2%E7%B1%BB.md)
+- [创建一次性事件处理程序](/DOM/%E5%88%9B%E5%BB%BA%E4%B8%80%E6%AC%A1%E6%80%A7%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F.md)
+- [创建元素](/DOM/%E5%88%9B%E5%BB%BA%E5%85%83%E7%B4%A0.md)
+- [创建自己的查询选择器简写](/DOM/%E5%88%9B%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E6%9F%A5%E8%AF%A2%E9%80%89%E6%8B%A9%E5%99%A8%E7%AE%80%E5%86%99.md)
+- [判断页面是否加载完成](/DOM/%E5%88%A4%E6%96%AD%E9%A1%B5%E9%9D%A2%E6%98%AF%E5%90%A6%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90.md)
+- [匹配元素](/DOM/%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0.md)
+- [区分鼠标左键和右键单击](/DOM/%E5%8C%BA%E5%88%86%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E5%92%8C%E5%8F%B3%E9%94%AE%E5%8D%95%E5%87%BB.md)
+- [在指定元素的开头之前或末尾之后插入 HTML 字符串](/DOM/%E5%9C%A8%E6%8C%87%E5%AE%9A%E5%85%83%E7%B4%A0%E7%9A%84%E5%BC%80%E5%A4%B4%E4%B9%8B%E5%89%8D%E6%88%96%E6%9C%AB%E5%B0%BE%E4%B9%8B%E5%90%8E%E6%8F%92%E5%85%A5%20HTML%20%E5%AD%97%E7%AC%A6%E4%B8%B2.md)
+- [在指定的 DOM 元素中渲染给定的 DOM 树](/DOM/%E5%9C%A8%E6%8C%87%E5%AE%9A%E7%9A%84%20DOM%20%E5%85%83%E7%B4%A0%E4%B8%AD%E6%B8%B2%E6%9F%93%E7%BB%99%E5%AE%9A%E7%9A%84%20DOM%20%E6%A0%91.md)
+- [实现页面文本内容不可选中 — 不可复制](/DOM/%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9%E4%B8%8D%E5%8F%AF%E9%80%89%E4%B8%AD%20%E2%80%94%20%E4%B8%8D%E5%8F%AF%E5%A4%8D%E5%88%B6.md)
+- [将光标移动到输入框的末尾](/DOM/%E5%B0%86%E5%85%89%E6%A0%87%E7%A7%BB%E5%8A%A8%E5%88%B0%E8%BE%93%E5%85%A5%E6%A1%86%E7%9A%84%E6%9C%AB%E5%B0%BE.md)
+- [将给定的 CSS 代码注入当前文档](/DOM/%E5%B0%86%E7%BB%99%E5%AE%9A%E7%9A%84%20CSS%20%E4%BB%A3%E7%A0%81%E6%B3%A8%E5%85%A5%E5%BD%93%E5%89%8D%E6%96%87%E6%A1%A3.md)
+- [打开模态时防止身体滚动](/DOM/%E6%89%93%E5%BC%80%E6%A8%A1%E6%80%81%E6%97%B6%E9%98%B2%E6%AD%A2%E8%BA%AB%E4%BD%93%E6%BB%9A%E5%8A%A8.md)
+- [显示指定的所有元素](/DOM/%E6%98%BE%E7%A4%BA%E6%8C%87%E5%AE%9A%E7%9A%84%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0.md)
+- [最小化 DOM 访问](/DOM/%E6%9C%80%E5%B0%8F%E5%8C%96%20DOM%20%E8%AE%BF%E9%97%AE.md)
+- [查找元素最近的相对位置祖先](/DOM/%E6%9F%A5%E6%89%BE%E5%85%83%E7%B4%A0%E6%9C%80%E8%BF%91%E7%9A%84%E7%9B%B8%E5%AF%B9%E4%BD%8D%E7%BD%AE%E7%A5%96%E5%85%88.md)
+- [检查元素是否可滚动](/DOM/%E6%A3%80%E6%9F%A5%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%8F%AF%E6%BB%9A%E5%8A%A8.md)
+- [检查元素是否在视口中](/DOM/%E6%A3%80%E6%9F%A5%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%9C%A8%E8%A7%86%E5%8F%A3%E4%B8%AD.md)
+- [检查父元素是否包含子元素](/DOM/%E6%A3%80%E6%9F%A5%E7%88%B6%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%8C%85%E5%90%AB%E5%AD%90%E5%85%83%E7%B4%A0.md)
+- [检查用户是否滚动到页面底部](/DOM/%E6%A3%80%E6%9F%A5%E7%94%A8%E6%88%B7%E6%98%AF%E5%90%A6%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8.md)
+- [检查给定元素是否具有指定的类](/DOM/%E6%A3%80%E6%9F%A5%E7%BB%99%E5%AE%9A%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E7%9A%84%E7%B1%BB.md)
+- [检测元素是否被聚焦](/DOM/%E6%A3%80%E6%B5%8B%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E8%A2%AB%E8%81%9A%E7%84%A6.md)
+- [添加样式](/DOM/%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F.md)
+- [滚动缩放](/DOM/%E6%BB%9A%E5%8A%A8%E7%BC%A9%E6%94%BE.md)
+- [统计当前页面出现的所有标签](/DOM/%E7%BB%9F%E8%AE%A1%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E5%87%BA%E7%8E%B0%E7%9A%84%E6%89%80%E6%9C%89%E6%A0%87%E7%AD%BE.md)
+- [获取、设置和删除 data- 属性](/DOM/%E8%8E%B7%E5%8F%96%E3%80%81%E8%AE%BE%E7%BD%AE%E5%92%8C%E5%88%A0%E9%99%A4%20data-%20%E5%B1%9E%E6%80%A7.md)
+- [获取元素的 CSS 样式](/DOM/%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%20CSS%20%E6%A0%B7%E5%BC%8F.md)
+- [获取元素相对于另一个元素的位置](/DOM/%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9B%B8%E5%AF%B9%E4%BA%8E%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%8D%E7%BD%AE.md)
+- [获取元素相对于文档的位置](/DOM/%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9B%B8%E5%AF%B9%E4%BA%8E%E6%96%87%E6%A1%A3%E7%9A%84%E4%BD%8D%E7%BD%AE.md)
+- [获取或设置文档标题](/DOM/%E8%8E%B7%E5%8F%96%E6%88%96%E8%AE%BE%E7%BD%AE%E6%96%87%E6%A1%A3%E6%A0%87%E9%A2%98.md)
+- [获取文档高度和宽度](/DOM/%E8%8E%B7%E5%8F%96%E6%96%87%E6%A1%A3%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6.md)
+- [获取样式](/DOM/%E8%8E%B7%E5%8F%96%E6%A0%B7%E5%BC%8F.md)
+- [获取父级元素](/DOM/%E8%8E%B7%E5%8F%96%E7%88%B6%E7%BA%A7%E5%85%83%E7%B4%A0.md)
+- [获取祖先元素](/DOM/%E8%8E%B7%E5%8F%96%E7%A5%96%E5%85%88%E5%85%83%E7%B4%A0.md)
+- [获取选中的文本](/DOM/%E8%8E%B7%E5%8F%96%E9%80%89%E4%B8%AD%E7%9A%84%E6%96%87%E6%9C%AC.md)
+- [视口、设备和文档大小](/DOM/%E8%A7%86%E5%8F%A3%E3%80%81%E8%AE%BE%E5%A4%87%E5%92%8C%E6%96%87%E6%A1%A3%E5%A4%A7%E5%B0%8F.md)
+- [触发事件](/DOM/%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6.md)
+- [设置样式](/DOM/%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F.md)
+- [返回包含给定元素的所有同级的数组](/DOM/%E8%BF%94%E5%9B%9E%E5%8C%85%E5%90%AB%E7%BB%99%E5%AE%9A%E5%85%83%E7%B4%A0%E7%9A%84%E6%89%80%E6%9C%89%E5%90%8C%E7%BA%A7%E7%9A%84%E6%95%B0%E7%BB%84.md)
+- [选择元素的文本内容](/DOM/%E9%80%89%E6%8B%A9%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9.md)
+- [通过给定的选择器获取最近的元素](/DOM/%E9%80%9A%E8%BF%87%E7%BB%99%E5%AE%9A%E7%9A%84%E9%80%89%E6%8B%A9%E5%99%A8%E8%8E%B7%E5%8F%96%E6%9C%80%E8%BF%91%E7%9A%84%E5%85%83%E7%B4%A0.md)
+- [重置表单](/DOM/%E9%87%8D%E7%BD%AE%E8%A1%A8%E5%8D%95.md)
+- [阻止事件的默认操作](/DOM/%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E6%93%8D%E4%BD%9C.md)
+- [隐藏所有指定的元素](/DOM/%E9%9A%90%E8%97%8F%E6%89%80%E6%9C%89%E6%8C%87%E5%AE%9A%E7%9A%84%E5%85%83%E7%B4%A0.md)
+
+## Git 和 Github
+
+- [Git .gitignore](/Git%20%E5%92%8C%20Github/Git%20.gitignore.md)
+- [Git Amend](/Git%20%E5%92%8C%20Github/Git%20Amend.md)
+- [Git Cherry Pick](/Git%20%E5%92%8C%20Github/Git%20Cherry%20Pick.md)
+- [git clean 删除未跟踪的文件或目录](/Git%20%E5%92%8C%20Github/git%20clean%20%E5%88%A0%E9%99%A4%E6%9C%AA%E8%B7%9F%E8%B8%AA%E7%9A%84%E6%96%87%E4%BB%B6%E6%88%96%E7%9B%AE%E5%BD%95.md)
+- [Git Diff](/Git%20%E5%92%8C%20Github/Git%20Diff.md)
+- [Git hooks](/Git%20%E5%92%8C%20Github/Git%20hooks.md)
+- [git init 和 git init --bare 有什么区别？](/Git%20%E5%92%8C%20Github/git%20init%20%E5%92%8C%20git%20init%20--bare%20%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F.md)
+- [git pull 和 git fetch 的区别](/Git%20%E5%92%8C%20Github/git%20pull%20%E5%92%8C%20git%20fetch%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Git status 的简短版本和不同的 --porcelain 模式](/Git%20%E5%92%8C%20Github/Git%20status%20%E7%9A%84%E7%AE%80%E7%9F%AD%E7%89%88%E6%9C%AC%E5%92%8C%E4%B8%8D%E5%90%8C%E7%9A%84%20--porcelain%20%E6%A8%A1%E5%BC%8F.md)
+- [Git 与 SVN 的区别？](/Git%20%E5%92%8C%20Github/Git%20%E4%B8%8E%20SVN%20%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F.md)
+- [Git 常用配置和技巧](/Git%20%E5%92%8C%20Github/Git%20%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE%E5%92%8C%E6%8A%80%E5%B7%A7.md)
+- [Git 日志](/Git%20%E5%92%8C%20Github/Git%20%E6%97%A5%E5%BF%97.md)
+- [GitHub repo 快速筛选文件](/Git%20%E5%92%8C%20Github/GitHub%20repo%20%E5%BF%AB%E9%80%9F%E7%AD%9B%E9%80%89%E6%96%87%E4%BB%B6.md)
+- [为不同的 GitHub 帐户使用多个 SSH 密钥](/Git%20%E5%92%8C%20Github/%E4%B8%BA%E4%B8%8D%E5%90%8C%E7%9A%84%20GitHub%20%E5%B8%90%E6%88%B7%E4%BD%BF%E7%94%A8%E5%A4%9A%E4%B8%AA%20SSH%20%E5%AF%86%E9%92%A5.md)
+- [从 GitHub 快速转至 VS Code](/Git%20%E5%92%8C%20Github/%E4%BB%8E%20GitHub%20%E5%BF%AB%E9%80%9F%E8%BD%AC%E8%87%B3%20VS%20Code.md)
+- [删除 Git remote](/Git%20%E5%92%8C%20Github/%E5%88%A0%E9%99%A4%20Git%20remote.md)
+- [删除本地和远程 Git 分支](/Git%20%E5%92%8C%20Github/%E5%88%A0%E9%99%A4%E6%9C%AC%E5%9C%B0%E5%92%8C%E8%BF%9C%E7%A8%8B%20Git%20%E5%88%86%E6%94%AF.md)
+- [同时推送到 2 个存储库并保持同步](/Git%20%E5%92%8C%20Github/%E5%90%8C%E6%97%B6%E6%8E%A8%E9%80%81%E5%88%B0%202%20%E4%B8%AA%E5%AD%98%E5%82%A8%E5%BA%93%E5%B9%B6%E4%BF%9D%E6%8C%81%E5%90%8C%E6%AD%A5.md)
+- [在 Git 和 GitHub 中重命名默认分支](/Git%20%E5%92%8C%20Github/%E5%9C%A8%20Git%20%E5%92%8C%20GitHub%20%E4%B8%AD%E9%87%8D%E5%91%BD%E5%90%8D%E9%BB%98%E8%AE%A4%E5%88%86%E6%94%AF.md)
+- [在不切换分支的情况下查看不同分支中的文件](/Git%20%E5%92%8C%20Github/%E5%9C%A8%E4%B8%8D%E5%88%87%E6%8D%A2%E5%88%86%E6%94%AF%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%E6%9F%A5%E7%9C%8B%E4%B8%8D%E5%90%8C%E5%88%86%E6%94%AF%E4%B8%AD%E7%9A%84%E6%96%87%E4%BB%B6.md)
+- [将本地 git 标签推送到 GitHub 上的远程仓库](/Git%20%E5%92%8C%20Github/%E5%B0%86%E6%9C%AC%E5%9C%B0%20git%20%E6%A0%87%E7%AD%BE%E6%8E%A8%E9%80%81%E5%88%B0%20GitHub%20%E4%B8%8A%E7%9A%84%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93.md)
+- [用于 GitHub markdown 和 Git 提交的 emoji 表情](/Git%20%E5%92%8C%20Github/%E7%94%A8%E4%BA%8E%20GitHub%20markdown%20%E5%92%8C%20Git%20%E6%8F%90%E4%BA%A4%E7%9A%84%20emoji%20%E8%A1%A8%E6%83%85.md)
+- [设置 Git SSH 密钥](/Git%20%E5%92%8C%20Github/%E8%AE%BE%E7%BD%AE%20Git%20SSH%20%E5%AF%86%E9%92%A5.md)
+
+## HTML
+
+- [alt 和 title 的区别](/HTML/alt%20%E5%92%8C%20title%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [button 与 input type=“button” 的区别](/HTML/button%20%E4%B8%8E%20input%20type=%E2%80%9Cbutton%E2%80%9D%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Element 与 Node 的区别](/HTML/Element%20%E4%B8%8E%20Node%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Emmet VS Code 按键绑定以提升 HTML 编辑效率](/HTML/Emmet%20VS%20Code%20%E6%8C%89%E9%94%AE%E7%BB%91%E5%AE%9A%E4%BB%A5%E6%8F%90%E5%8D%87%20HTML%20%E7%BC%96%E8%BE%91%E6%95%88%E7%8E%87.md)
+- [Emmet 语法](/HTML/Emmet%20%E8%AF%AD%E6%B3%95.md)
+- [HTML autocomplete 属性](/HTML/HTML%20autocomplete%20%E5%B1%9E%E6%80%A7.md)
+- [HTML data 元素](/HTML/HTML%20data%20%E5%85%83%E7%B4%A0.md)
+- [HTML HTML5 基础知识 — 面试题专用](/HTML/HTML%20HTML5%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%20%E2%80%94%20%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B8%93%E7%94%A8.md)
+- [HTML iframe 标签](/HTML/HTML%20iframe%20%E6%A0%87%E7%AD%BE.md)
+- [HTML picture 标签](/HTML/HTML%20picture%20%E6%A0%87%E7%AD%BE.md)
+- [HTML title 属性](/HTML/HTML%20title%20%E5%B1%9E%E6%80%A7.md)
+- [HTML translate 属性](/HTML/HTML%20translate%20%E5%B1%9E%E6%80%A7.md)
+- [HTML 标准 FAQ](/HTML/HTML%20%E6%A0%87%E5%87%86%20FAQ.md)
+- [HTML 的实体编码（HTML Entity Encode）](/HTML/HTML%20%E7%9A%84%E5%AE%9E%E4%BD%93%E7%BC%96%E7%A0%81%EF%BC%88HTML%20Entity%20Encode%EF%BC%89.md)
+- [label 标签触发相关 input 的状态](/HTML/label%20%E6%A0%87%E7%AD%BE%E8%A7%A6%E5%8F%91%E7%9B%B8%E5%85%B3%20input%20%E7%9A%84%E7%8A%B6%E6%80%81.md)
+- [script 标签上的 defer 和 async 属性是什么？](/HTML/script%20%E6%A0%87%E7%AD%BE%E4%B8%8A%E7%9A%84%20defer%20%E5%92%8C%20async%20%E5%B1%9E%E6%80%A7%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F.md)
+- [Web 应用程序中的可访问性](/HTML/Web%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E4%B8%AD%E7%9A%84%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7.md)
+- [不要使用 submit 来命名提交按钮](/HTML/%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8%20submit%20%E6%9D%A5%E5%91%BD%E5%90%8D%E6%8F%90%E4%BA%A4%E6%8C%89%E9%92%AE.md)
+- [你可能不知道的几个常用的 HTML 属性](/HTML/%E4%BD%A0%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E4%B8%AA%E5%B8%B8%E7%94%A8%E7%9A%84%20HTML%20%E5%B1%9E%E6%80%A7.md)
+- [使 abbr 元素适用于触摸屏、键盘和鼠标](/HTML/%E4%BD%BF%20abbr%20%E5%85%83%E7%B4%A0%E9%80%82%E7%94%A8%E4%BA%8E%E8%A7%A6%E6%91%B8%E5%B1%8F%E3%80%81%E9%94%AE%E7%9B%98%E5%92%8C%E9%BC%A0%E6%A0%87.md)
+- [使用 HTML5 download 属性创建可下载的链接](/HTML/%E4%BD%BF%E7%94%A8%20HTML5%20download%20%E5%B1%9E%E6%80%A7%E5%88%9B%E5%BB%BA%E5%8F%AF%E4%B8%8B%E8%BD%BD%E7%9A%84%E9%93%BE%E6%8E%A5.md)
+- [使用 loading 属性延迟加载图片](/HTML/%E4%BD%BF%E7%94%A8%20loading%20%E5%B1%9E%E6%80%A7%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87.md)
+- [使用 mark 元素突出显示文本](/HTML/%E4%BD%BF%E7%94%A8%20mark%20%E5%85%83%E7%B4%A0%E7%AA%81%E5%87%BA%E6%98%BE%E7%A4%BA%E6%96%87%E6%9C%AC.md)
+- [使用 pattern 属性验证输入值](/HTML/%E4%BD%BF%E7%94%A8%20pattern%20%E5%B1%9E%E6%80%A7%E9%AA%8C%E8%AF%81%E8%BE%93%E5%85%A5%E5%80%BC.md)
+- [使用 srcset 的响应式图像](/HTML/%E4%BD%BF%E7%94%A8%20srcset%20%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%9B%BE%E5%83%8F.md)
+- [创建编号项目的降序列表](/HTML/%E5%88%9B%E5%BB%BA%E7%BC%96%E5%8F%B7%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%99%8D%E5%BA%8F%E5%88%97%E8%A1%A8.md)
+- [在 Google 字体请求中加载给定字符](/HTML/%E5%9C%A8%20Google%20%E5%AD%97%E4%BD%93%E8%AF%B7%E6%B1%82%E4%B8%AD%E5%8A%A0%E8%BD%BD%E7%BB%99%E5%AE%9A%E5%AD%97%E7%AC%A6.md)
+- [在 HTML 中使用 ARIA 的规则](/HTML/%E5%9C%A8%20HTML%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ARIA%20%E7%9A%84%E8%A7%84%E5%88%99.md)
+- [在新标签页中打开所有链接](/HTML/%E5%9C%A8%E6%96%B0%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%B8%AD%E6%89%93%E5%BC%80%E6%89%80%E6%9C%89%E9%93%BE%E6%8E%A5.md)
+- [在暗模式下更改 HTML 图片 URL](/HTML/%E5%9C%A8%E6%9A%97%E6%A8%A1%E5%BC%8F%E4%B8%8B%E6%9B%B4%E6%94%B9%20HTML%20%E5%9B%BE%E7%89%87%20URL.md)
+- [在暗模式下更改网站图标](/HTML/%E5%9C%A8%E6%9A%97%E6%A8%A1%E5%BC%8F%E4%B8%8B%E6%9B%B4%E6%94%B9%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87.md)
+- [在链接中使用 # 符号有什么用？](/HTML/%E5%9C%A8%E9%93%BE%E6%8E%A5%E4%B8%AD%E4%BD%BF%E7%94%A8%20#%20%E7%AC%A6%E5%8F%B7%E6%9C%89%E4%BB%80%E4%B9%88%E7%94%A8%EF%BC%9F.md)
+- [声明式 Shadow DOM](/HTML/%E5%A3%B0%E6%98%8E%E5%BC%8F%20Shadow%20DOM.md)
+- [对于在新标签页中打开的链接，始终使用 ”noopener“ 或 ”noreferrer“](/HTML/%E5%AF%B9%E4%BA%8E%E5%9C%A8%E6%96%B0%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%B8%AD%E6%89%93%E5%BC%80%E7%9A%84%E9%93%BE%E6%8E%A5%EF%BC%8C%E5%A7%8B%E7%BB%88%E4%BD%BF%E7%94%A8%20%E2%80%9Dnoopener%E2%80%9C%20%E6%88%96%20%E2%80%9Dnoreferrer%E2%80%9C.md)
+- [对于特定于语言的样式，在 lang 属性选择器上使用 lang 伪类](/HTML/%E5%AF%B9%E4%BA%8E%E7%89%B9%E5%AE%9A%E4%BA%8E%E8%AF%AD%E8%A8%80%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%8C%E5%9C%A8%20lang%20%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8%E4%B8%8A%E4%BD%BF%E7%94%A8%20lang%20%E4%BC%AA%E7%B1%BB.md)
+- [强制浏览器下载新的 favicon](/HTML/%E5%BC%BA%E5%88%B6%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8B%E8%BD%BD%E6%96%B0%E7%9A%84%20favicon.md)
+- [指定文档类型](/HTML/%E6%8C%87%E5%AE%9A%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B.md)
+- [按时间间隔刷新页面（不使用 JavaScript）](/HTML/%E6%8C%89%E6%97%B6%E9%97%B4%E9%97%B4%E9%9A%94%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%EF%BC%88%E4%B8%8D%E4%BD%BF%E7%94%A8%20JavaScript%EF%BC%89.md)
+- [改造纯可折叠 details 元素](/HTML/%E6%94%B9%E9%80%A0%E7%BA%AF%E5%8F%AF%E6%8A%98%E5%8F%A0%20details%20%E5%85%83%E7%B4%A0.md)
+- [显示日期、时间时使用 datetime 属性](/HTML/%E6%98%BE%E7%A4%BA%E6%97%A5%E6%9C%9F%E3%80%81%E6%97%B6%E9%97%B4%E6%97%B6%E4%BD%BF%E7%94%A8%20datetime%20%E5%B1%9E%E6%80%A7.md)
+- [正确加载 SVG Favicon](/HTML/%E6%AD%A3%E7%A1%AE%E5%8A%A0%E8%BD%BD%20SVG%20Favicon.md)
+- [添加键盘快捷键](/HTML/%E6%B7%BB%E5%8A%A0%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE.md)
+- [省略 HTML 布尔属性的值](/HTML/%E7%9C%81%E7%95%A5%20HTML%20%E5%B8%83%E5%B0%94%E5%B1%9E%E6%80%A7%E7%9A%84%E5%80%BC.md)
+- [确保输入字段只能上传图片](/HTML/%E7%A1%AE%E4%BF%9D%E8%BE%93%E5%85%A5%E5%AD%97%E6%AE%B5%E5%8F%AA%E8%83%BD%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87.md)
+- [结合 Google 字体请求](/HTML/%E7%BB%93%E5%90%88%20Google%20%E5%AD%97%E4%BD%93%E8%AF%B7%E6%B1%82.md)
+- [自动断字依赖于已定义的文档语言](/HTML/%E8%87%AA%E5%8A%A8%E6%96%AD%E5%AD%97%E4%BE%9D%E8%B5%96%E4%BA%8E%E5%B7%B2%E5%AE%9A%E4%B9%89%E7%9A%84%E6%96%87%E6%A1%A3%E8%AF%AD%E8%A8%80.md)
+- [过滤文件输入的文件类型](/HTML/%E8%BF%87%E6%BB%A4%E6%96%87%E4%BB%B6%E8%BE%93%E5%85%A5%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B.md)
+- [避免使用 b、i、s 和 u 标签](/HTML/%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8%20b%E3%80%81i%E3%80%81s%20%E5%92%8C%20u%20%E6%A0%87%E7%AD%BE.md)
+- [避免每个页面使用多个 h1 标签](/HTML/%E9%81%BF%E5%85%8D%E6%AF%8F%E4%B8%AA%E9%A1%B5%E9%9D%A2%E4%BD%BF%E7%94%A8%E5%A4%9A%E4%B8%AA%20h1%20%E6%A0%87%E7%AD%BE.md)
+- [防止浏览器要求翻译](/HTML/%E9%98%B2%E6%AD%A2%E6%B5%8F%E8%A7%88%E5%99%A8%E8%A6%81%E6%B1%82%E7%BF%BB%E8%AF%91.md)
+- [隐式表单提交并不总是有效](/HTML/%E9%9A%90%E5%BC%8F%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E5%B9%B6%E4%B8%8D%E6%80%BB%E6%98%AF%E6%9C%89%E6%95%88.md)
+
+## JavaScript
+
+- [++value 和 value++ 的区别](/JavaScript/++value%20%E5%92%8C%20value++%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [6 个常用的正则表达式](/JavaScript/6%E4%B8%AA%E5%B8%B8%E7%94%A8%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.md)
+- [== 与 === 的区别](/JavaScript/==%20%E4%B8%8E%20===%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [ArrayBuffer](/JavaScript/ArrayBuffer.md)
+- [ArrayBufferView](/JavaScript/ArrayBufferView.md)
+- [Blob 对象](/JavaScript/Blob%20%E5%AF%B9%E8%B1%A1.md)
+- [Clipboard — 剪贴板操作](/JavaScript/Clipboard%20%E2%80%94%20%E5%89%AA%E8%B4%B4%E6%9D%BF%E6%93%8D%E4%BD%9C.md)
+- [const、let 与 var 的区别](/JavaScript/const%E3%80%81let%20%E4%B8%8E%20var%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [DataView 对象](/JavaScript/DataView%20%E5%AF%B9%E8%B1%A1.md)
+- [delete obj.property 与 obj.property = undefined 的区别](/JavaScript/delete%20obj.property%20%E4%B8%8E%20obj.property%20=%20undefined%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [encodeURI 与 encodeURIComponent 的区别](/JavaScript/encodeURI%20%E4%B8%8E%20encodeURIComponent%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [ES JSON 模块提案](/JavaScript/ES%20JSON%20%E6%A8%A1%E5%9D%97%E6%8F%90%E6%A1%88.md)
+- [ES2016（ES7）](/JavaScript/ES2016%EF%BC%88ES7%EF%BC%89.md)
+- [ES2017（ES8）](/JavaScript/ES2017%EF%BC%88ES8%EF%BC%89.md)
+- [ES2018（ES9）](/JavaScript/ES2018%EF%BC%88ES9%EF%BC%89.md)
+- [ES2019（ES10）](/JavaScript/ES2019%EF%BC%88ES10%EF%BC%89.md)
+- [ES2020（ES11）](/JavaScript/ES2020%EF%BC%88ES11%EF%BC%89.md)
+- [ES2021（ES12）](/JavaScript/ES2021%EF%BC%88ES12%EF%BC%89.md)
+- [for-in 和 for-of 的区别](/JavaScript/for-in%20%E5%92%8C%20for-of%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [in 运算符与 Object.hasOwnProperty 的区别](/JavaScript/in%20%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B8%8E%20Object.hasOwnProperty%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [instanceof 与 typeof 的区别](/JavaScript/instanceof%20%E4%B8%8E%20typeof%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [JavaScript BOM 详解](/JavaScript/JavaScript%20BOM%20%E8%AF%A6%E8%A7%A3.md)
+- [JavaScript Eval](/JavaScript/JavaScript%20Eval.md)
+- [JavaScript JSON](/JavaScript/JavaScript%20JSON.md)
+- [JavaScript RegExp 对象 — 正则表达式](/JavaScript/JavaScript%20RegExp%20%E5%AF%B9%E8%B1%A1%20%E2%80%94%20%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F.md)
+- [JavaScript V8 引擎](/JavaScript/JavaScript%20V8%20%E5%BC%95%E6%93%8E.md)
+- [JavaScript 严格模式（'use-strict'）](/JavaScript/JavaScript%20%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%EF%BC%88'use-strict'%EF%BC%89.md)
+- [JavaScript 中响应图像的最大宽度和高度](/JavaScript/JavaScript%20%E4%B8%AD%E5%93%8D%E5%BA%94%E5%9B%BE%E5%83%8F%E7%9A%84%E6%9C%80%E5%A4%A7%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6.md)
+- [JavaScript 中定义函数的方法](/JavaScript/JavaScript%20%E4%B8%AD%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0%E7%9A%84%E6%96%B9%E6%B3%95.md)
+- [JavaScript 中循环之间的差异](/JavaScript/JavaScript%20%E4%B8%AD%E5%BE%AA%E7%8E%AF%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82.md)
+- [JavaScript 中清空数组](/JavaScript/JavaScript%20%E4%B8%AD%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84.md)
+- [JavaScript 中的 Generator 和 Iterator](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%20Generator%20%E5%92%8C%20Iterator.md)
+- [JavaScript 中的 setTimeout 和 setInterval 方法](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%20setTimeout%20%E5%92%8C%20setInterval%20%E6%96%B9%E6%B3%95.md)
+- [JavaScript 中的 “this” 关键字](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%20%E2%80%9Cthis%E2%80%9D%20%E5%85%B3%E9%94%AE%E5%AD%97.md)
+- [JavaScript 中的一等函数](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E4%B8%80%E7%AD%89%E5%87%BD%E6%95%B0.md)
+- [JavaScript 中的函数和变量提升](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E5%87%BD%E6%95%B0%E5%92%8C%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87.md)
+- [JavaScript 中的异常处理](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86.md)
+- [JavaScript 中的数字截断](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E6%95%B0%E5%AD%97%E6%88%AA%E6%96%AD.md)
+- [JavaScript 中的模块发展方案](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8F%91%E5%B1%95%E6%96%B9%E6%A1%88.md)
+- [JavaScript 中的短路求值](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E7%9F%AD%E8%B7%AF%E6%B1%82%E5%80%BC.md)
+- [JavaScript 中的自定义事件](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.md)
+- [JavaScript 中的虚值是什么？](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E8%99%9A%E5%80%BC%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F.md)
+- [JavaScript 中的闭包](/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%E9%97%AD%E5%8C%85.md)
+- [JavaScript 函数方法 — call()，apply() 和 bind()](</JavaScript/JavaScript%20%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95%20%E2%80%94%20call()%EF%BC%8Capply()%20%E5%92%8C%20bind().md>)
+- [JavaScript 函数记忆](/JavaScript/JavaScript%20%E5%87%BD%E6%95%B0%E8%AE%B0%E5%BF%86.md)
+- [JavaScript 反转字符串](/JavaScript/JavaScript%20%E5%8F%8D%E8%BD%AC%E5%AD%97%E7%AC%A6%E4%B8%B2.md)
+- [JavaScript 媒体查询](/JavaScript/JavaScript%20%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2.md)
+- [JavaScript 数组去重](/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D.md)
+- [JavaScript 数组方法总结](/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md)
+- [JavaScript 替换所有出现的字符串](/JavaScript/JavaScript%20%E6%9B%BF%E6%8D%A2%E6%89%80%E6%9C%89%E5%87%BA%E7%8E%B0%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2.md)
+- [JavaScript 的 AST 抽象语法树](/JavaScript/JavaScript%20%E7%9A%84%20AST%20%E6%8A%BD%E8%B1%A1%E8%AF%AD%E6%B3%95%E6%A0%91.md)
+- [JavaScript 立即执行函数表达式（IIFE）](/JavaScript/JavaScript%20%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%88IIFE%EF%BC%89.md)
+- [JavaScript 纯函数](/JavaScript/JavaScript%20%E7%BA%AF%E5%87%BD%E6%95%B0.md)
+- [JavaScript 组合函数](/JavaScript/JavaScript%20%E7%BB%84%E5%90%88%E5%87%BD%E6%95%B0.md)
+- [JavaScript 获取字符串的最后一个字符](/JavaScript/JavaScript%20%E8%8E%B7%E5%8F%96%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6.md)
+- [JavaScript 运算符总结](/JavaScript/JavaScript%20%E8%BF%90%E7%AE%97%E7%AC%A6%E6%80%BB%E7%BB%93.md)
+- [JavaScript 运行机制 — 事件循环（Event-Loop）](/JavaScript/JavaScript%20%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6%20%E2%80%94%20%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%88Event-Loop%EF%BC%89.md)
+- [JavaScript 逗号运算符](/JavaScript/JavaScript%20%E9%80%97%E5%8F%B7%E8%BF%90%E7%AE%97%E7%AC%A6.md)
+- [JavaScript 链式调用](/JavaScript/JavaScript%20%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8.md)
+- [JavaScript 高阶函数](/JavaScript/JavaScript%20%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0.md)
+- [JS 作用域和作用域链](/JavaScript/JS%20%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE.md)
+- [JSDoc](/JavaScript/JSDoc.md)
+- [Map 与 WeakMap 的区别](/JavaScript/Map%20%E4%B8%8E%20WeakMap%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [null 与 undefined 的区别](/JavaScript/null%20%E4%B8%8E%20undefined%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Number() 和 parseInt() 的区别](</JavaScript/Number()%20%E5%92%8C%20parseInt()%20%E7%9A%84%E5%8C%BA%E5%88%AB.md>)
+- [Object 与 Map 的区别](/JavaScript/Object%20%E4%B8%8E%20Map%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [Object.freeze() 与 Object.seal() 的区别](</JavaScript/Object.freeze()%20%E4%B8%8E%20Object.seal()%20%E7%9A%84%E5%8C%BA%E5%88%AB.md>)
+- [Object.getOwnPropertyNames() 与 Object.keys() 的区别](</JavaScript/Object.getOwnPropertyNames()%20%E4%B8%8E%20Object.keys()%20%E7%9A%84%E5%8C%BA%E5%88%AB.md>)
+- [Object.is() 和 === 的区别](</JavaScript/Object.is()%20%E5%92%8C%20===%20%E7%9A%84%E5%8C%BA%E5%88%AB.md>)
+- [Object.keys、values、entries](/JavaScript/Object.keys%E3%80%81values%E3%80%81entries.md)
+- [object.property 和 object['property'] 的区别](/JavaScript/object.property%20%E5%92%8C%20object%5B'property'%5D%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [slice 与 splice 的区别](/JavaScript/slice%20%E4%B8%8E%20splice%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [string charAt(i) 和 string[i] 的区别](</JavaScript/string%20charAt(i)%20%E5%92%8C%20string%5Bi%5D%20%E7%9A%84%E5%8C%BA%E5%88%AB.md>)
+- [substr 和 substring 的区别](/JavaScript/substr%20%E5%92%8C%20substring%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [UMD](/JavaScript/UMD.md)
+- [undefined 和 void 的区别](/JavaScript/undefined%20%E5%92%8C%20void%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [variable === undefined 与 typeof variable === undefined 的区别](/JavaScript/variable%20===%20undefined%20%E4%B8%8E%20typeof%20variable%20===%20undefined%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [下载文件](/JavaScript/%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6.md)
+- [为 contenteditable 元素添加占位符](/JavaScript/%E4%B8%BA%20contenteditable%20%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E5%8D%A0%E4%BD%8D%E7%AC%A6.md)
+- [为什么递归函数中返回结果为 undefined？](/JavaScript/%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%92%E5%BD%92%E5%87%BD%E6%95%B0%E4%B8%AD%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E4%B8%BA%20undefined%EF%BC%9F.md)
+- [从剪贴板粘贴图像](/JavaScript/%E4%BB%8E%E5%89%AA%E8%B4%B4%E6%9D%BF%E7%B2%98%E8%B4%B4%E5%9B%BE%E5%83%8F.md)
+- [从数组中删除重复的对象](/JavaScript/%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E5%88%A0%E9%99%A4%E9%87%8D%E5%A4%8D%E7%9A%84%E5%AF%B9%E8%B1%A1.md)
+- [使用 CSS Transition 通过改变 Height 来展开收起元素](/JavaScript/%E4%BD%BF%E7%94%A8%20CSS%20Transition%20%E9%80%9A%E8%BF%87%E6%94%B9%E5%8F%98%20Height%20%E6%9D%A5%E5%B1%95%E5%BC%80%E6%94%B6%E8%B5%B7%E5%85%83%E7%B4%A0.md)
+- [使用 JavaScript 上传和处理不同的文件](/JavaScript/%E4%BD%BF%E7%94%A8%20JavaScript%20%E4%B8%8A%E4%BC%A0%E5%92%8C%E5%A4%84%E7%90%86%E4%B8%8D%E5%90%8C%E7%9A%84%E6%96%87%E4%BB%B6.md)
+- [使用 JavaScript 添加时间](/JavaScript/%E4%BD%BF%E7%94%A8%20JavaScript%20%E6%B7%BB%E5%8A%A0%E6%97%B6%E9%97%B4.md)
+- [使用 JavaScript 的 Date.toLocaleString() 方法格式化日期和时间](</JavaScript/%E4%BD%BF%E7%94%A8%20JavaScript%20%E7%9A%84%20Date.toLocaleString()%20%E6%96%B9%E6%B3%95%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4.md>)
+- [使用 JavaScript 的 Intl.DateTimeFormat() 构造函数转换和格式化日期和时间](</JavaScript/%E4%BD%BF%E7%94%A8%20JavaScript%20%E7%9A%84%20Intl.DateTimeFormat()%20%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E8%BD%AC%E6%8D%A2%E5%92%8C%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%97%A5%E6%9C%9F%E5%92%8C%E6%97%B6%E9%97%B4.md>)
+- [使用 JavaScript 解构函数参数的方法](/JavaScript/%E4%BD%BF%E7%94%A8%20JavaScript%20%E8%A7%A3%E6%9E%84%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E7%9A%84%E6%96%B9%E6%B3%95.md)
+- [使用 JS 进行 API 身份验证](/JavaScript/%E4%BD%BF%E7%94%A8%20JS%20%E8%BF%9B%E8%A1%8C%20API%20%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81.md)
+- [使用 Proxy 对象来健壮您的 JavaScript 不变性函数](/JavaScript/%E4%BD%BF%E7%94%A8%20Proxy%20%E5%AF%B9%E8%B1%A1%E6%9D%A5%E5%81%A5%E5%A3%AE%E6%82%A8%E7%9A%84%20JavaScript%20%E4%B8%8D%E5%8F%98%E6%80%A7%E5%87%BD%E6%95%B0.md)
+- [使用单选按钮切换 CSS 自定义属性](/JavaScript/%E4%BD%BF%E7%94%A8%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE%E5%88%87%E6%8D%A2%20CSS%20%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7.md)
+- [使用焦点样式丰富用户体验](/JavaScript/%E4%BD%BF%E7%94%A8%E7%84%A6%E7%82%B9%E6%A0%B7%E5%BC%8F%E4%B8%B0%E5%AF%8C%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C.md)
+- [创建可调整大小的拆分视图](/JavaScript/%E5%88%9B%E5%BB%BA%E5%8F%AF%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%E7%9A%84%E6%8B%86%E5%88%86%E8%A7%86%E5%9B%BE.md)
+- [制作一个可调整大小的元素](/JavaScript/%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AA%E5%8F%AF%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%85%83%E7%B4%A0.md)
+- [制作可拖动元素](/JavaScript/%E5%88%B6%E4%BD%9C%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0.md)
+- [前端文件上传](/JavaScript/%E5%89%8D%E7%AB%AF%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0.md)
+- [动态加载脚本文件](/JavaScript/%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E8%84%9A%E6%9C%AC%E6%96%87%E4%BB%B6.md)
+- [匹配汉字](/JavaScript/%E5%8C%B9%E9%85%8D%E6%B1%89%E5%AD%97.md)
+- [取消已发送的网络请求](/JavaScript/%E5%8F%96%E6%B6%88%E5%B7%B2%E5%8F%91%E9%80%81%E7%9A%84%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82.md)
+- [变量赋值与原始对象可变性](/JavaScript/%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E4%B8%8E%E5%8E%9F%E5%A7%8B%E5%AF%B9%E8%B1%A1%E5%8F%AF%E5%8F%98%E6%80%A7.md)
+- [只允许输入特定字符](/JavaScript/%E5%8F%AA%E5%85%81%E8%AE%B8%E8%BE%93%E5%85%A5%E7%89%B9%E5%AE%9A%E5%AD%97%E7%AC%A6.md)
+- [图片懒加载](/JavaScript/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD.md)
+- [在列表中拖放元素](/JavaScript/%E5%9C%A8%E5%88%97%E8%A1%A8%E4%B8%AD%E6%8B%96%E6%94%BE%E5%85%83%E7%B4%A0.md)
+- [在单击位置显示自定义上下文菜单](/JavaScript/%E5%9C%A8%E5%8D%95%E5%87%BB%E4%BD%8D%E7%BD%AE%E6%98%BE%E7%A4%BA%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8A%E4%B8%8B%E6%96%87%E8%8F%9C%E5%8D%95.md)
+- [在浏览器中截屏](/JavaScript/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%88%AA%E5%B1%8F.md)
+- [在浏览器和 Node.js 中更精确地测量执行时间](/JavaScript/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%92%8C%20Node.js%20%E4%B8%AD%E6%9B%B4%E7%B2%BE%E7%A1%AE%E5%9C%B0%E6%B5%8B%E9%87%8F%E6%89%A7%E8%A1%8C%E6%97%B6%E9%97%B4.md)
+- [在解构 {} 时使用默认值防止错误](/JavaScript/%E5%9C%A8%E8%A7%A3%E6%9E%84%20%7B%7D%20%E6%97%B6%E4%BD%BF%E7%94%A8%E9%BB%98%E8%AE%A4%E5%80%BC%E9%98%B2%E6%AD%A2%E9%94%99%E8%AF%AF.md)
+- [如何从 JavaScript Date 对象获取月份名称？](/JavaScript/%E5%A6%82%E4%BD%95%E4%BB%8E%20JavaScript%20Date%20%E5%AF%B9%E8%B1%A1%E8%8E%B7%E5%8F%96%E6%9C%88%E4%BB%BD%E5%90%8D%E7%A7%B0%EF%BC%9F.md)
+- [如何在 JavaScript 中交换两个变量？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E4%BA%A4%E6%8D%A2%E4%B8%A4%E4%B8%AA%E5%8F%98%E9%87%8F%EF%BC%9F.md)
+- [如何在 JavaScript 中使用管道（管道运算符）？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%AE%A1%E9%81%93%EF%BC%88%E7%AE%A1%E9%81%93%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89%EF%BC%9F.md)
+- [如何在 JavaScript 中判断一个值是否为数组？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%80%BC%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84%EF%BC%9F.md)
+- [如何在 JavaScript 中判断一个对象是否为空？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA%EF%BC%9F.md)
+- [如何在 JavaScript 中判断数组是否包含某个值？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%88%A4%E6%96%AD%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E5%8C%85%E5%90%AB%E6%9F%90%E4%B8%AA%E5%80%BC%EF%BC%9F.md)
+- [如何在 JavaScript 中合并两个数组？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%90%88%E5%B9%B6%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%EF%BC%9F.md)
+- [如何在 JavaScript 中对对象数组进行排序？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%AF%B9%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E6%8E%92%E5%BA%8F%EF%BC%9F.md)
+- [如何在 JavaScript 中将字符串转换为数字](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%B0%86%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%95%B0%E5%AD%97.md)
+- [如何在 JavaScript 中将数组拆分为一组数组](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%B0%86%E6%95%B0%E7%BB%84%E6%8B%86%E5%88%86%E4%B8%BA%E4%B8%80%E7%BB%84%E6%95%B0%E7%BB%84.md)
+- [如何在 JavaScript 中将数组转为对象](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E5%B0%86%E6%95%B0%E7%BB%84%E8%BD%AC%E4%B8%BA%E5%AF%B9%E8%B1%A1.md)
+- [如何在 JavaScript 中检查对象中是否存在某个属性？](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E6%A3%80%E6%9F%A5%E5%AF%B9%E8%B1%A1%E4%B8%AD%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7%EF%BC%9F.md)
+- [如何在 JavaScript 中检查数字是正数还是负数](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E6%A3%80%E6%9F%A5%E6%95%B0%E5%AD%97%E6%98%AF%E6%AD%A3%E6%95%B0%E8%BF%98%E6%98%AF%E8%B4%9F%E6%95%B0.md)
+- [如何在 JavaScript 中添加千位逗号（每三位数）](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E6%B7%BB%E5%8A%A0%E5%8D%83%E4%BD%8D%E9%80%97%E5%8F%B7%EF%BC%88%E6%AF%8F%E4%B8%89%E4%BD%8D%E6%95%B0%EF%BC%89.md)
+- [如何在 JavaScript 中获取对象的长度](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%95%BF%E5%BA%A6.md)
+- [如何在 JavaScript 中选择或忽略对象的属性](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E9%80%89%E6%8B%A9%E6%88%96%E5%BF%BD%E7%95%A5%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7.md)
+- [如何在 JavaScript 中遍历任意深度的对象](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E9%81%8D%E5%8E%86%E4%BB%BB%E6%84%8F%E6%B7%B1%E5%BA%A6%E7%9A%84%E5%AF%B9%E8%B1%A1.md)
+- [如何在 JavaScript 对字符串去空](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E5%AF%B9%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8E%BB%E7%A9%BA.md)
+- [如何在 JavaScript 将数字拆分为单个数字](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E5%B0%86%E6%95%B0%E5%AD%97%E6%8B%86%E5%88%86%E4%B8%BA%E5%8D%95%E4%B8%AA%E6%95%B0%E5%AD%97.md)
+- [如何在用户停止输入 JavaScript 后执行函数](/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%E7%94%A8%E6%88%B7%E5%81%9C%E6%AD%A2%E8%BE%93%E5%85%A5%20JavaScript%20%E5%90%8E%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0.md)
+- [如何翻转对象中的键和值？](/JavaScript/%E5%A6%82%E4%BD%95%E7%BF%BB%E8%BD%AC%E5%AF%B9%E8%B1%A1%E4%B8%AD%E7%9A%84%E9%94%AE%E5%92%8C%E5%80%BC%EF%BC%9F.md)
+- [将 JSON 数据下载为文件](/JavaScript/%E5%B0%86%20JSON%20%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD%E4%B8%BA%E6%96%87%E4%BB%B6.md)
+- [将文件拖到元素上时突出显示该元素](/JavaScript/%E5%B0%86%E6%96%87%E4%BB%B6%E6%8B%96%E5%88%B0%E5%85%83%E7%B4%A0%E4%B8%8A%E6%97%B6%E7%AA%81%E5%87%BA%E6%98%BE%E7%A4%BA%E8%AF%A5%E5%85%83%E7%B4%A0.md)
+- [将表格导出到 csv](/JavaScript/%E5%B0%86%E8%A1%A8%E6%A0%BC%E5%AF%BC%E5%87%BA%E5%88%B0%20csv.md)
+- [平滑滚动到一个元素](/JavaScript/%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8%E5%88%B0%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0.md)
+- [序列化表单数据](/JavaScript/%E5%BA%8F%E5%88%97%E5%8C%96%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE.md)
+- [打印图像](/JavaScript/%E6%89%93%E5%8D%B0%E5%9B%BE%E5%83%8F.md)
+- [拖动页面滚动](/JavaScript/%E6%8B%96%E5%8A%A8%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8.md)
+- [数组中的最大值和最小值](/JavaScript/%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%9C%80%E5%A4%A7%E5%80%BC%E5%92%8C%E6%9C%80%E5%B0%8F%E5%80%BC.md)
+- [数组平均值与中位数](/JavaScript/%E6%95%B0%E7%BB%84%E5%B9%B3%E5%9D%87%E5%80%BC%E4%B8%8E%E4%B8%AD%E4%BD%8D%E6%95%B0.md)
+- [数组扁平化](/JavaScript/%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96.md)
+- [无框架 Web 组件](/JavaScript/%E6%97%A0%E6%A1%86%E6%9E%B6%20Web%20%E7%BB%84%E4%BB%B6.md)
+- [显示构造函数模式 — Revealing Constructor Pattern](/JavaScript/%E6%98%BE%E7%A4%BA%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F%20%E2%80%94%20Revealing%20Constructor%20Pattern.md)
+- [显示模块模式 — Revealing Module Pattern](/JavaScript/%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%9D%97%E6%A8%A1%E5%BC%8F%20%E2%80%94%20Revealing%20Module%20Pattern.md)
+- [更改网站图标](/JavaScript/%E6%9B%B4%E6%94%B9%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87.md)
+- [构造函数模式 — Constructor Pattern](/JavaScript/%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F%20%E2%80%94%20Constructor%20Pattern.md)
+- [柯里化](/JavaScript/%E6%9F%AF%E9%87%8C%E5%8C%96.md)
+- [格式化输出 JSON](/JavaScript/%E6%A0%BC%E5%BC%8F%E5%8C%96%E8%BE%93%E5%87%BA%20JSON.md)
+- [检查数组是否已排序](/JavaScript/%E6%A3%80%E6%9F%A5%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E5%B7%B2%E6%8E%92%E5%BA%8F.md)
+- [检查是否支持触摸事件](/JavaScript/%E6%A3%80%E6%9F%A5%E6%98%AF%E5%90%A6%E6%94%AF%E6%8C%81%E8%A7%A6%E6%91%B8%E4%BA%8B%E4%BB%B6.md)
+- [检查页面的浏览器选项卡是否聚焦](/JavaScript/%E6%A3%80%E6%9F%A5%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E9%80%89%E9%A1%B9%E5%8D%A1%E6%98%AF%E5%90%A6%E8%81%9A%E7%84%A6.md)
+- [检测 JavaScript 字符串中的表情符号](/JavaScript/%E6%A3%80%E6%B5%8B%20JavaScript%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E7%9A%84%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7.md)
+- [检测大写锁定是否开启](/JavaScript/%E6%A3%80%E6%B5%8B%E5%A4%A7%E5%86%99%E9%94%81%E5%AE%9A%E6%98%AF%E5%90%A6%E5%BC%80%E5%90%AF.md)
+- [检测是否为移动浏览器](/JavaScript/%E6%A3%80%E6%B5%8B%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A7%BB%E5%8A%A8%E6%B5%8F%E8%A7%88%E5%99%A8.md)
+- [检测暗模式](/JavaScript/%E6%A3%80%E6%B5%8B%E6%9A%97%E6%A8%A1%E5%BC%8F.md)
+- [检测用户是否处于空闲状态或处于非活动状态](/JavaScript/%E6%A3%80%E6%B5%8B%E7%94%A8%E6%88%B7%E6%98%AF%E5%90%A6%E5%A4%84%E4%BA%8E%E7%A9%BA%E9%97%B2%E7%8A%B6%E6%80%81%E6%88%96%E5%A4%84%E4%BA%8E%E9%9D%9E%E6%B4%BB%E5%8A%A8%E7%8A%B6%E6%80%81.md)
+- [浅拷贝和深拷贝](/JavaScript/%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D.md)
+- [滚动到页面顶部的多种实现](/JavaScript/%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%AE%9E%E7%8E%B0.md)
+- [点符号与括号符号](/JavaScript/%E7%82%B9%E7%AC%A6%E5%8F%B7%E4%B8%8E%E6%8B%AC%E5%8F%B7%E7%AC%A6%E5%8F%B7.md)
+- [特征检测、特征推断和使用 UA 字符串之间有什么区别？](/JavaScript/%E7%89%B9%E5%BE%81%E6%A3%80%E6%B5%8B%E3%80%81%E7%89%B9%E5%BE%81%E6%8E%A8%E6%96%AD%E5%92%8C%E4%BD%BF%E7%94%A8%20UA%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B9%8B%E9%97%B4%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F.md)
+- [生成一个指定范围内的随机数](/JavaScript/%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E6%8C%87%E5%AE%9A%E8%8C%83%E5%9B%B4%E5%86%85%E7%9A%84%E9%9A%8F%E6%9C%BA%E6%95%B0.md)
+- [类型化数组](/JavaScript/%E7%B1%BB%E5%9E%8B%E5%8C%96%E6%95%B0%E7%BB%84.md)
+- [类构造函数与原型中的方法](/JavaScript/%E7%B1%BB%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%B8%8E%E5%8E%9F%E5%9E%8B%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95.md)
+- [获取当前时间戳](/JavaScript/%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E6%97%B6%E9%97%B4%E6%88%B3.md)
+- [计算 textarea 的字符数](/JavaScript/%E8%AE%A1%E7%AE%97%20textarea%20%E7%9A%84%E5%AD%97%E7%AC%A6%E6%95%B0.md)
+- [调整图像大小](/JavaScript/%E8%B0%83%E6%95%B4%E5%9B%BE%E5%83%8F%E5%A4%A7%E5%B0%8F.md)
+- [调整文本框的宽度以自动适应其内容](/JavaScript/%E8%B0%83%E6%95%B4%E6%96%87%E6%9C%AC%E6%A1%86%E7%9A%84%E5%AE%BD%E5%BA%A6%E4%BB%A5%E8%87%AA%E5%8A%A8%E9%80%82%E5%BA%94%E5%85%B6%E5%86%85%E5%AE%B9.md)
+- [过滤并排序字符串列表](/JavaScript/%E8%BF%87%E6%BB%A4%E5%B9%B6%E6%8E%92%E5%BA%8F%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%88%97%E8%A1%A8.md)
+- [重复字符串的多种方法](/JavaScript/%E9%87%8D%E5%A4%8D%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%A4%9A%E7%A7%8D%E6%96%B9%E6%B3%95.md)
+- [重定向到另一个网页](/JavaScript/%E9%87%8D%E5%AE%9A%E5%90%91%E5%88%B0%E5%8F%A6%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.md)
+
+## Linux
+
+- [bash 中的历史命令快捷方式](/Linux/bash%20%E4%B8%AD%E7%9A%84%E5%8E%86%E5%8F%B2%E5%91%BD%E4%BB%A4%E5%BF%AB%E6%8D%B7%E6%96%B9%E5%BC%8F.md)
+- [Bash 常用快捷键](/Linux/Bash%20%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B7%E9%94%AE.md)
+- [curl -fsSL](/Linux/curl%20-fsSL.md)
+- [curl 和 wget 有什么区别？](/Linux/curl%20%E5%92%8C%20wget%20%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F.md)
+- [Linux Note](/Linux/Linux%20Note.md)
+- [shell 大括号扩展 — {}](/Linux/shell%20%E5%A4%A7%E6%8B%AC%E5%8F%B7%E6%89%A9%E5%B1%95%20%E2%80%94%20%7B%7D.md)
+- [同时创建多个文件](/Linux/%E5%90%8C%E6%97%B6%E5%88%9B%E5%BB%BA%E5%A4%9A%E4%B8%AA%E6%96%87%E4%BB%B6.md)
+- [如何在 Linux 中删除在特定端口上运行的进程](/Linux/%E5%A6%82%E4%BD%95%E5%9C%A8%20Linux%20%E4%B8%AD%E5%88%A0%E9%99%A4%E5%9C%A8%E7%89%B9%E5%AE%9A%E7%AB%AF%E5%8F%A3%E4%B8%8A%E8%BF%90%E8%A1%8C%E7%9A%84%E8%BF%9B%E7%A8%8B.md)
+
+## Magic
+
+- [Code Golf](/Magic/Code%20Golf.md)
+
+## MongoDB
+
+- [MongoDB 删除数据库](/MongoDB/MongoDB%20%E5%88%A0%E9%99%A4%E6%95%B0%E6%8D%AE%E5%BA%93.md)
+- [MongoDB 删除文档](/MongoDB/MongoDB%20%E5%88%A0%E9%99%A4%E6%96%87%E6%A1%A3.md)
+- [MongoDB 删除集合](/MongoDB/MongoDB%20%E5%88%A0%E9%99%A4%E9%9B%86%E5%90%88.md)
+- [MongoDB](/MongoDB/MongoDB.md)
+- [Mongoose aggregate](/MongoDB/Mongoose%20aggregate.md)
+- [Mongoose create() 方法](</MongoDB/Mongoose%20create()%20%E6%96%B9%E6%B3%95.md>)
+- [Mongoose Populate](/MongoDB/Mongoose%20Populate.md)
+- [Mongoose Schema 和 SchemaTypes](/MongoDB/Mongoose%20Schema%20%E5%92%8C%20SchemaTypes.md)
+- [Mongoose Virtuals](/MongoDB/Mongoose%20Virtuals.md)
+- [Mongoose 中的 db 属性](/MongoDB/Mongoose%20%E4%B8%AD%E7%9A%84%20db%20%E5%B1%9E%E6%80%A7.md)
+- [Mongoose 中的 ObjectIds](/MongoDB/Mongoose%20%E4%B8%AD%E7%9A%84%20ObjectIds.md)
+- [Mongoose 中的 Promise](/MongoDB/Mongoose%20%E4%B8%AD%E7%9A%84%20Promise.md)
+- [Mongoose 中的枚举](/MongoDB/Mongoose%20%E4%B8%AD%E7%9A%84%E6%9E%9A%E4%B8%BE.md)
+- [Mongoose 唯一索引（unique）](/MongoDB/Mongoose%20%E5%94%AF%E4%B8%80%E7%B4%A2%E5%BC%95%EF%BC%88unique%EF%BC%89.md)
+- [Mongoose 插入文档](/MongoDB/Mongoose%20%E6%8F%92%E5%85%A5%E6%96%87%E6%A1%A3.md)
+- [Mongoose 数组](/MongoDB/Mongoose%20%E6%95%B0%E7%BB%84.md)
+- [Mongoose 时间戳（timestamps）](/MongoDB/Mongoose%20%E6%97%B6%E9%97%B4%E6%88%B3%EF%BC%88timestamps%EF%BC%89.md)
+- [Mongoose 更新文档](/MongoDB/Mongoose%20%E6%9B%B4%E6%96%B0%E6%96%87%E6%A1%A3.md)
+- [Mongoose 查询文档](/MongoDB/Mongoose%20%E6%9F%A5%E8%AF%A2%E6%96%87%E6%A1%A3.md)
+- [Mongoose 的 save() 方法](</MongoDB/Mongoose%20%E7%9A%84%20save()%20%E6%96%B9%E6%B3%95.md>)
+- [Mongoose 解决 Query was already executed 问题](/MongoDB/Mongoose%20%E8%A7%A3%E5%86%B3%20Query%20was%20already%20executed%20%E9%97%AE%E9%A2%98.md)
+- [使用 Mongoose 连接到 MongoDB](/MongoDB/%E4%BD%BF%E7%94%A8%20Mongoose%20%E8%BF%9E%E6%8E%A5%E5%88%B0%20MongoDB.md)
+- [使用 Mongoose 验证数据唯一性](/MongoDB/%E4%BD%BF%E7%94%A8%20Mongoose%20%E9%AA%8C%E8%AF%81%E6%95%B0%E6%8D%AE%E5%94%AF%E4%B8%80%E6%80%A7.md)
+- [在 Mongoose 中使用 MongoDB Explain](/MongoDB/%E5%9C%A8%20Mongoose%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20MongoDB%20Explain.md)
+
+## Nginx
+
+- [Nginx 配置旧域名重定向到新域名](/Nginx/Nginx%20%E9%85%8D%E7%BD%AE%E6%97%A7%E5%9F%9F%E5%90%8D%E9%87%8D%E5%AE%9A%E5%90%91%E5%88%B0%E6%96%B0%E5%9F%9F%E5%90%8D.md)
+- [Nginx 静态文件与 root 和 alias 混淆](/Nginx/Nginx%20%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E4%B8%8E%20root%20%E5%92%8C%20alias%20%E6%B7%B7%E6%B7%86.md)
+- [查找 Nginx 配置文件](/Nginx/%E6%9F%A5%E6%89%BE%20Nginx%20%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.md)
+
+## Node
+
+- [Express 中的 app.use() 方法](</Node/Express%20%E4%B8%AD%E7%9A%84%20app.use()%20%E6%96%B9%E6%B3%95.md>)
+- [Express 中的错误处理中间件](/Node/Express%20%E4%B8%AD%E7%9A%84%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86%E4%B8%AD%E9%97%B4%E4%BB%B6.md)
+- [JavaScript Lodash 工具库](/Node/JavaScript%20Lodash%20%E5%B7%A5%E5%85%B7%E5%BA%93.md)
+- [Node Koa 框架](/Node/Node%20Koa%20%E6%A1%86%E6%9E%B6.md)
+- [Node REPL](/Node/Node%20REPL.md)
+- [Node.js assert 模块](/Node/Node.js%20assert%20%E6%A8%A1%E5%9D%97.md)
+- [Node.js Buffer 模块 — 缓冲区](/Node/Node.js%20Buffer%20%E6%A8%A1%E5%9D%97%20%E2%80%94%20%E7%BC%93%E5%86%B2%E5%8C%BA.md)
+- [Node.js HTTP 和 HTTPS 模块](/Node/Node.js%20HTTP%20%E5%92%8C%20HTTPS%20%E6%A8%A1%E5%9D%97.md)
+- [Node.js Net 模块](/Node/Node.js%20Net%20%E6%A8%A1%E5%9D%97.md)
+- [Node.js OS 模块](/Node/Node.js%20OS%20%E6%A8%A1%E5%9D%97.md)
+- [Node.js path 模块](/Node/Node.js%20path%20%E6%A8%A1%E5%9D%97.md)
+- [Node.js readline 模块](/Node/Node.js%20readline%20%E6%A8%A1%E5%9D%97.md)
+- [Node.js 中的 util.promisify() 方法](</Node/Node.js%20%E4%B8%AD%E7%9A%84%20util.promisify()%20%E6%96%B9%E6%B3%95.md>)
+- [Node.js 文件系统模块](/Node/Node.js%20%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F%E6%A8%A1%E5%9D%97.md)
+- [Node.js 读取 CSV 文件](/Node/Node.js%20%E8%AF%BB%E5%8F%96%20CSV%20%E6%96%87%E4%BB%B6.md)
+- [Node.js 读取环境变量](/Node/Node.js%20%E8%AF%BB%E5%8F%96%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F.md)
+- [Node.js 递归获取文件夹中的所有文件](/Node/Node.js%20%E9%80%92%E5%BD%92%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E7%9A%84%E6%89%80%E6%9C%89%E6%96%87%E4%BB%B6.md)
+- [open 模块](/Node/open%20%E6%A8%A1%E5%9D%97.md)
+- [package.json 中的 browserslist 字段](/Node/package.json%20%E4%B8%AD%E7%9A%84%20browserslist%20%E5%AD%97%E6%AE%B5.md)
+- [package.json 详解](/Node/package.json%20%E8%AF%A6%E8%A7%A3.md)
+- [process.nextTick() 在 Node.js 中是如何工作的？](</Node/process.nextTick()%20%E5%9C%A8%20Node.js%20%E4%B8%AD%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84%EF%BC%9F.md>)
+- [Puppeteer](/Node/Puppeteer.md)
+- [从 MIME 类型获取文件扩展名](/Node/%E4%BB%8E%20MIME%20%E7%B1%BB%E5%9E%8B%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D.md)
+- [使用 Day.js 模块实现国际化日期](/Node/%E4%BD%BF%E7%94%A8%20Day.js%20%E6%A8%A1%E5%9D%97%E5%AE%9E%E7%8E%B0%E5%9B%BD%E9%99%85%E5%8C%96%E6%97%A5%E6%9C%9F.md)
+- [使用 Express 上传文件](/Node/%E4%BD%BF%E7%94%A8%20Express%20%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6.md)
+- [使用 fs 模块的推荐方法](/Node/%E4%BD%BF%E7%94%A8%20fs%20%E6%A8%A1%E5%9D%97%E7%9A%84%E6%8E%A8%E8%8D%90%E6%96%B9%E6%B3%95.md)
+- [使用 fs.extra 模块替代 fs](/Node/%E4%BD%BF%E7%94%A8%20fs.extra%20%E6%A8%A1%E5%9D%97%E6%9B%BF%E4%BB%A3%20fs.md)
+- [使用 node-cron 在 Node.js 中调度任务](/Node/%E4%BD%BF%E7%94%A8%20node-cron%20%E5%9C%A8%20Node.js%20%E4%B8%AD%E8%B0%83%E5%BA%A6%E4%BB%BB%E5%8A%A1.md)
+- [使用 Node.js 显示整个对象](/Node/%E4%BD%BF%E7%94%A8%20Node.js%20%E6%98%BE%E7%A4%BA%E6%95%B4%E4%B8%AA%E5%AF%B9%E8%B1%A1.md)
+- [使用 Node.js 生成子进程](/Node/%E4%BD%BF%E7%94%A8%20Node.js%20%E7%94%9F%E6%88%90%E5%AD%90%E8%BF%9B%E7%A8%8B.md)
+- [使用 Node.js 递归创建目录](/Node/%E4%BD%BF%E7%94%A8%20Node.js%20%E9%80%92%E5%BD%92%E5%88%9B%E5%BB%BA%E7%9B%AE%E5%BD%95.md)
+- [使用 Nodemailer 发送电子邮件](/Node/%E4%BD%BF%E7%94%A8%20Nodemailer%20%E5%8F%91%E9%80%81%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.md)
+- [使用 nodemon 自动重启 Node.js 应用程序](/Node/%E4%BD%BF%E7%94%A8%20nodemon%20%E8%87%AA%E5%8A%A8%E9%87%8D%E5%90%AF%20Node.js%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F.md)
+- [使用 pm2 为 Node.js 应用程序提供服务](/Node/%E4%BD%BF%E7%94%A8%20pm2%20%E4%B8%BA%20Node.js%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8F%90%E4%BE%9B%E6%9C%8D%E5%8A%A1.md)
+- [使用 process.mainModule 或 require.main 确定 Node.js 入口脚本](/Node/%E4%BD%BF%E7%94%A8%20process.mainModule%20%E6%88%96%20require.main%20%E7%A1%AE%E5%AE%9A%20Node.js%20%E5%85%A5%E5%8F%A3%E8%84%9A%E6%9C%AC.md)
+- [使用 sendFile() 在 Express 中发送静态文件](</Node/%E4%BD%BF%E7%94%A8%20sendFile()%20%E5%9C%A8%20Express%20%E4%B8%AD%E5%8F%91%E9%80%81%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6.md>)
+- [使用 zx 编写在 Node 中编写 Bash 脚本](/Node/%E4%BD%BF%E7%94%A8%20zx%20%E7%BC%96%E5%86%99%E5%9C%A8%20Node%20%E4%B8%AD%E7%BC%96%E5%86%99%20Bash%20%E8%84%9A%E6%9C%AC.md)
+- [创建 GUID、UUID](/Node/%E5%88%9B%E5%BB%BA%20GUID%E3%80%81UUID.md)
+- [删除所有的 node_modules 文件夹](/Node/%E5%88%A0%E9%99%A4%E6%89%80%E6%9C%89%E7%9A%84%20node_modules%20%E6%96%87%E4%BB%B6%E5%A4%B9.md)
+- [在 ES 模块（Node.js）中导入 JSON 文件](/Node/%E5%9C%A8%20ES%20%E6%A8%A1%E5%9D%97%EF%BC%88Node.js%EF%BC%89%E4%B8%AD%E5%AF%BC%E5%85%A5%20JSON%20%E6%96%87%E4%BB%B6.md)
+- [在 Node.js 中使用 execa 运行命令](/Node/%E5%9C%A8%20Node.js%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20execa%20%E8%BF%90%E8%A1%8C%E5%91%BD%E4%BB%A4.md)
+- [在 Node.js 中将 Buffer 转换为 JSON 和 UTF8 字符串](/Node/%E5%9C%A8%20Node.js%20%E4%B8%AD%E5%B0%86%20Buffer%20%E8%BD%AC%E6%8D%A2%E4%B8%BA%20JSON%20%E5%92%8C%20UTF8%20%E5%AD%97%E7%AC%A6%E4%B8%B2.md)
+- [如何下载和解压 Node 中的 gz 文件](/Node/%E5%A6%82%E4%BD%95%E4%B8%8B%E8%BD%BD%E5%92%8C%E8%A7%A3%E5%8E%8B%20Node%20%E4%B8%AD%E7%9A%84%20gz%20%E6%96%87%E4%BB%B6.md)
+- [如何在 Node.js 中使用 ES6 导入语法](/Node/%E5%A6%82%E4%BD%95%E5%9C%A8%20Node.js%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ES6%20%E5%AF%BC%E5%85%A5%E8%AF%AD%E6%B3%95.md)
+- [如何在 Node.js 中控制没有依赖项的日志消息](/Node/%E5%A6%82%E4%BD%95%E5%9C%A8%20Node.js%20%E4%B8%AD%E6%8E%A7%E5%88%B6%E6%B2%A1%E6%9C%89%E4%BE%9D%E8%B5%96%E9%A1%B9%E7%9A%84%E6%97%A5%E5%BF%97%E6%B6%88%E6%81%AF.md)
+- [如何在 Node.js 应用程序中使用 ESLint](/Node/%E5%A6%82%E4%BD%95%E5%9C%A8%20Node.js%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ESLint.md)
+- [如何对 npm package 进行发包](/Node/%E5%A6%82%E4%BD%95%E5%AF%B9%20npm%20package%20%E8%BF%9B%E8%A1%8C%E5%8F%91%E5%8C%85.md)
+- [常用的 npm 命令](/Node/%E5%B8%B8%E7%94%A8%E7%9A%84%20npm%20%E5%91%BD%E4%BB%A4.md)
+- [快速执行 JavaScript 文件的语法检查](/Node/%E5%BF%AB%E9%80%9F%E6%89%A7%E8%A1%8C%20JavaScript%20%E6%96%87%E4%BB%B6%E7%9A%84%E8%AF%AD%E6%B3%95%E6%A3%80%E6%9F%A5.md)
+- [打开包的主页或存储库](/Node/%E6%89%93%E5%BC%80%E5%8C%85%E7%9A%84%E4%B8%BB%E9%A1%B5%E6%88%96%E5%AD%98%E5%82%A8%E5%BA%93.md)
+- [查找未使用的 npm 依赖项](/Node/%E6%9F%A5%E6%89%BE%E6%9C%AA%E4%BD%BF%E7%94%A8%E7%9A%84%20npm%20%E4%BE%9D%E8%B5%96%E9%A1%B9%20.md)
+- [检查 npm 模块更新](/Node/%E6%A3%80%E6%9F%A5%20npm%20%E6%A8%A1%E5%9D%97%E6%9B%B4%E6%96%B0.md)
+- [防止 npm 安装不支持的 Node.js 版本](/Node/%E9%98%B2%E6%AD%A2%20npm%20%E5%AE%89%E8%A3%85%E4%B8%8D%E6%94%AF%E6%8C%81%E7%9A%84%20Node.js%20%E7%89%88%E6%9C%AC.md)
+
+## React
+
+- [React Context API](/React/React%20Context%20API.md)
+- [React Fragment](/React/React%20Fragment.md)
+- [React Hooks](/React/React%20Hooks.md)
+- [React Portals](/React/React%20Portals.md)
+- [React 严格模式](/React/React%20%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F.md)
+- [React 中的代码拆分](/React/React%20%E4%B8%AD%E7%9A%84%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86.md)
+- [React 中的单向数据流](/React/React%20%E4%B8%AD%E7%9A%84%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81.md)
+- [React 入门](/React/React%20%E5%85%A5%E9%97%A8.md)
+- [React 受控组件和非受控组件](/React/React%20%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%92%8C%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6.md)
+- [React 声明式](/React/React%20%E5%A3%B0%E6%98%8E%E5%BC%8F.md)
+- [React 展示组件与容器组件](/React/React%20%E5%B1%95%E7%A4%BA%E7%BB%84%E4%BB%B6%E4%B8%8E%E5%AE%B9%E5%99%A8%E7%BB%84%E4%BB%B6.md)
+- [React 纯函数](/React/React%20%E7%BA%AF%E5%87%BD%E6%95%B0.md)
+- [React 组合组件](/React/React%20%E7%BB%84%E5%90%88%E7%BB%84%E4%BB%B6.md)
+- [React 高阶组件](/React/React%20%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6.md)
+- [使用 React Hooks 获取数据时避免 Race Condition](/React/%E4%BD%BF%E7%94%A8%20React%20Hooks%20%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%E6%97%B6%E9%81%BF%E5%85%8D%20Race%20Condition.md)
+- [使用 React 创建一个无限滚动组件](/React/%E4%BD%BF%E7%94%A8%20React%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%97%A0%E9%99%90%E6%BB%9A%E5%8A%A8%E7%BB%84%E4%BB%B6.md)
+- [使用 React 自动聚焦字段](/React/%E4%BD%BF%E7%94%A8%20React%20%E8%87%AA%E5%8A%A8%E8%81%9A%E7%84%A6%E5%AD%97%E6%AE%B5.md)
+- [使用 Styled Components 编写样式化组件](/React/%E4%BD%BF%E7%94%A8%20Styled%20Components%20%E7%BC%96%E5%86%99%E6%A0%B7%E5%BC%8F%E5%8C%96%E7%BB%84%E4%BB%B6.md)
+- [使用 Typescript 编写自定义 React useDebounce Hook](/React/%E4%BD%BF%E7%94%A8%20Typescript%20%E7%BC%96%E5%86%99%E8%87%AA%E5%AE%9A%E4%B9%89%20React%20useDebounce%20Hook.md)
+- [修复 React 中的 “Cannot read property 'map' of undefined” 错误](/React/%E4%BF%AE%E5%A4%8D%20React%20%E4%B8%AD%E7%9A%84%20%E2%80%9CCannot%20read%20property%20'map'%20of%20undefined%E2%80%9D%20%E9%94%99%E8%AF%AF.md)
+- [在 React 中使用 useContext 切换暗、亮主题](/React/%E5%9C%A8%20React%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20useContext%20%E5%88%87%E6%8D%A2%E6%9A%97%E3%80%81%E4%BA%AE%E4%B8%BB%E9%A2%98.md)
+
+## Share
+
+- [Markdown 语法](/Share/Markdown%20%E8%AF%AD%E6%B3%95.md)
+- [五款基于浏览器的在线代码编辑器](/Share/%E4%BA%94%E6%AC%BE%E5%9F%BA%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%A8%E7%BA%BF%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8.md)
+
+## SourceCode
+
+- [co 源码解读](/SourceCode/co%20%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB.md)
+- [flexible.js 源码解读](/SourceCode/flexible.js%20%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB.md)
+- [nextTick 实现原理](/SourceCode/nextTick%20%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86.md)
+
+## TypeScript
+
+- [JavaScript 和 TypeScript 中的 void](/TypeScript/JavaScript%20%E5%92%8C%20TypeScript%20%E4%B8%AD%E7%9A%84%20void.md)
+- [JavaScript 和 TypeScript 中的布尔值](/TypeScript/JavaScript%20%E5%92%8C%20TypeScript%20%E4%B8%AD%E7%9A%84%E5%B8%83%E5%B0%94%E5%80%BC.md)
+- [TypeScript DefinitelyTyped 项目](/TypeScript/TypeScript%20DefinitelyTyped%20%E9%A1%B9%E7%9B%AE.md)
+- [TypeScript keyof 关键字](/TypeScript/TypeScript%20keyof%20%E5%85%B3%E9%94%AE%E5%AD%97.md)
+- [TypeScript 中的 const 断言](/TypeScript/TypeScript%20%E4%B8%AD%E7%9A%84%20const%20%E6%96%AD%E8%A8%80.md)
+- [TypeScript 中的类型收窄](/TypeScript/TypeScript%20%E4%B8%AD%E7%9A%84%E7%B1%BB%E5%9E%8B%E6%94%B6%E7%AA%84.md)
+- [TypeScript 命名空间](/TypeScript/TypeScript%20%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4.md)
+- [TypeScript 基础 — const 和 readonly 的区别](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20const%20%E5%92%8C%20readonly%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [TypeScript 基础 — d.ts 和 .ts 的区别](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20d.ts%20%E5%92%8C%20.ts%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [TypeScript 基础 — interface 中的函数和属性](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20interface%20%E4%B8%AD%E7%9A%84%E5%87%BD%E6%95%B0%E5%92%8C%E5%B1%9E%E6%80%A7.md)
+- [TypeScript 基础 — interface 和 type 的区别](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20interface%20%E5%92%8C%20type%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [TypeScript 基础 — interface 接口](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20interface%20%E6%8E%A5%E5%8F%A3.md)
+- [TypeScript 基础 — Null 和 Undefined](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20Null%20%E5%92%8C%20Undefined.md)
+- [TypeScript 基础 — Object 类型](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20Object%20%E7%B1%BB%E5%9E%8B.md)
+- [TypeScript 基础 — string 和 String 的区别](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20string%20%E5%92%8C%20String%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [TypeScript 基础 — 元组](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E5%85%83%E7%BB%84.md)
+- [TypeScript 基础 — 函数](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E5%87%BD%E6%95%B0.md)
+- [TypeScript 基础 — 枚举](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E6%9E%9A%E4%B8%BE.md)
+- [TypeScript 基础 — 泛型](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E6%B3%9B%E5%9E%8B.md)
+- [TypeScript 基础 — 类](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E7%B1%BB.md)
+- [TypeScript 基础 — 类型断言（Type Assertion）](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80%EF%BC%88Type%20Assertion%EF%BC%89.md)
+- [TypeScript 基础 — 类型谓词](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E7%B1%BB%E5%9E%8B%E8%B0%93%E8%AF%8D.md)
+- [TypeScript 基础 — 联合类型](/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B.md)
+- [TypeScript 声明文件](/TypeScript/TypeScript%20%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6.md)
+- [TypeScript 工具类型 — Utility Types](/TypeScript/TypeScript%20%E5%B7%A5%E5%85%B7%E7%B1%BB%E5%9E%8B%20%E2%80%94%20Utility%20Types.md)
+- [TypeScript 文字联合类型与字符串枚举](/TypeScript/TypeScript%20%E6%96%87%E5%AD%97%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B%E4%B8%8E%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9E%9A%E4%B8%BE.md)
+- [TypeScript 类型转换](/TypeScript/TypeScript%20%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2.md)
+- [TypeScript 装饰器](/TypeScript/TypeScript%20%E8%A3%85%E9%A5%B0%E5%99%A8.md)
+- [使用 TypeScript 中的类型进行对象分解](/TypeScript/%E4%BD%BF%E7%94%A8%20TypeScript%20%E4%B8%AD%E7%9A%84%E7%B1%BB%E5%9E%8B%E8%BF%9B%E8%A1%8C%E5%AF%B9%E8%B1%A1%E5%88%86%E8%A7%A3.md)
+- [在 TypeScript 中使用 unknown 而不是 any](/TypeScript/%E5%9C%A8%20TypeScript%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20unknown%20%E8%80%8C%E4%B8%8D%E6%98%AF%20any.md)
+- [缩短 TypeScript 中的导入路径](/TypeScript/%E7%BC%A9%E7%9F%AD%20TypeScript%20%E4%B8%AD%E7%9A%84%E5%AF%BC%E5%85%A5%E8%B7%AF%E5%BE%84.md)
+
+## VS Code
+
+- [VS Code 快捷键](/VS%20Code/VS%20Code%20%E5%BF%AB%E6%8D%B7%E9%94%AE.md)
+
+## Vue
+
+- [Vue 3 中的新的响应式 API](/Vue/Vue%203%20%E4%B8%AD%E7%9A%84%E6%96%B0%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%20API.md)
+- [Vue Computed — 计算属性](/Vue/Vue%20Computed%20%E2%80%94%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.md)
+- [Vue Context 参数 — Composition API](/Vue/Vue%20Context%20%E5%8F%82%E6%95%B0%20%E2%80%94%20Composition%20API.md)
+- [Vue CSS 变量 — 响应式样式 RFC](/Vue/Vue%20CSS%20%E5%8F%98%E9%87%8F%20%E2%80%94%20%E5%93%8D%E5%BA%94%E5%BC%8F%E6%A0%B7%E5%BC%8F%20RFC.md)
+- [Vue keep-alive](/Vue/Vue%20keep-alive.md)
+- [Vue Mixins](/Vue/Vue%20Mixins.md)
+- [Vue nextTick](/Vue/Vue%20nextTick.md)
+- [Vue Props](/Vue/Vue%20Props.md)
+- [Vue Router active-class 属性](/Vue/Vue%20Router%20active-class%20%E5%B1%9E%E6%80%A7.md)
+- [Vue v-model 指令](/Vue/Vue%20v-model%20%E6%8C%87%E4%BB%A4.md)
+- [Vue vue-loader](/Vue/Vue%20vue-loader.md)
+- [Vue 事件处理](/Vue/Vue%20%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86.md)
+- [Vue 依赖注入使用 Provide 和 Inject](/Vue/Vue%20%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E4%BD%BF%E7%94%A8%20Provide%20%E5%92%8C%20Inject.md)
+- [Vue 动态组件](/Vue/Vue%20%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6.md)
+- [Vue 插槽](/Vue/Vue%20%E6%8F%92%E6%A7%BD.md)
+- [Vue 条件渲染 v-if 与 v-show](/Vue/Vue%20%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%20v-if%20%E4%B8%8E%20v-show.md)
+- [Vue 的深度 CSS 选择器](/Vue/Vue%20%E7%9A%84%E6%B7%B1%E5%BA%A6%20CSS%20%E9%80%89%E6%8B%A9%E5%99%A8.md)
+- [Vue 组件声明的多种方式](/Vue/Vue%20%E7%BB%84%E4%BB%B6%E5%A3%B0%E6%98%8E%E7%9A%84%E5%A4%9A%E7%A7%8D%E6%96%B9%E5%BC%8F.md)
+- [Vue 组件通信](/Vue/Vue%20%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1.md)
+- [Vue 过渡和动画](/Vue/Vue%20%E8%BF%87%E6%B8%A1%E5%92%8C%E5%8A%A8%E7%94%BB.md)
+- [Vue 递归组件](/Vue/Vue%20%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6.md)
+- [Vue 错误处理 — onErrorCaptured 钩子](/Vue/Vue%20%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86%20%E2%80%94%20onErrorCaptured%20%E9%92%A9%E5%AD%90.md)
+- [Vue2 与 Vue3 生命周期变化](/Vue/Vue2%20%E4%B8%8E%20Vue3%20%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%8F%98%E5%8C%96.md)
+- [Vue3 Suspense 组件](/Vue/Vue3%20Suspense%20%E7%BB%84%E4%BB%B6.md)
+- [Vue3 Teleport 组件](/Vue/Vue3%20Teleport%20%E7%BB%84%E4%BB%B6.md)
+- [Vue3 中使用 defineAsyncComponent 延迟加载组件](/Vue/Vue3%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20defineAsyncComponent%20%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6.md)
+- [Vue3 使用 Event Bus](/Vue/Vue3%20%E4%BD%BF%E7%94%A8%20Event%20Bus.md)
+- [Vue3 注册全局组件](/Vue/Vue3%20%E6%B3%A8%E5%86%8C%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6.md)
+- [Vuex](/Vue/Vuex.md)
+- [watch 与 watchEffect 的区别](/Vue/watch%20%E4%B8%8E%20watchEffect%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [使用 v-once 和 v-memo 指令来提升性能](/Vue/%E4%BD%BF%E7%94%A8%20v-once%20%E5%92%8C%20v-memo%20%E6%8C%87%E4%BB%A4%E6%9D%A5%E6%8F%90%E5%8D%87%E6%80%A7%E8%83%BD.md)
+- [使用导航守卫保护 Vue 路由](/Vue/%E4%BD%BF%E7%94%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%BF%9D%E6%8A%A4%20Vue%20%E8%B7%AF%E7%94%B1.md)
+- [创建您的第一个 Vue 自定义指令](/Vue/%E5%88%9B%E5%BB%BA%E6%82%A8%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%20Vue%20%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4.md)
+- [制作您的第一个 Vue 插件](/Vue/%E5%88%B6%E4%BD%9C%E6%82%A8%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%20Vue%20%E6%8F%92%E4%BB%B6.md)
+- [在 Vue 中使用 $emit 自定义事件](/Vue/%E5%9C%A8%20Vue%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20$emit%20%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.md)
+- [在 Vue2 与 Vue3 中构建相同的组件](/Vue/%E5%9C%A8%20Vue2%20%E4%B8%8E%20Vue3%20%E4%B8%AD%E6%9E%84%E5%BB%BA%E7%9B%B8%E5%90%8C%E7%9A%84%E7%BB%84%E4%BB%B6.md)
+
+## Web API
+
+- [Battery API](/Web%20API/Battery%20API.md)
+- [Broadcast Channel API](/Web%20API/Broadcast%20Channel%20API.md)
+- [Cache API](/Web%20API/Cache%20API.md)
+- [Channel Messaging API](/Web%20API/Channel%20Messaging%20API.md)
+- [CSS Font Loading API](/Web%20API/CSS%20Font%20Loading%20API.md)
+- [Fetch API](/Web%20API/Fetch%20API.md)
+- [File System API](/Web%20API/File%20System%20API.md)
+- [getUserMedia() 方法](</Web%20API/getUserMedia()%20%E6%96%B9%E6%B3%95.md>)
+- [History API](/Web%20API/History%20API.md)
+- [IndexedDB](/Web%20API/IndexedDB.md)
+- [Intersection Observer](/Web%20API/Intersection%20Observer.md)
+- [Picture in Picture](/Web%20API/Picture%20in%20Picture.md)
+- [requestAnimationFrame](/Web%20API/requestAnimationFrame.md)
+- [Resize Observer API](/Web%20API/Resize%20Observer%20API.md)
+- [Screen Capture API](/Web%20API/Screen%20Capture%20API.md)
+- [Service Worker](/Web%20API/Service%20Worker.md)
+- [Speech Synthesis API](/Web%20API/Speech%20Synthesis%20API.md)
+- [URL 对象](/Web%20API/URL%20%E5%AF%B9%E8%B1%A1.md)
+- [Web Bluetooth API](/Web%20API/Web%20Bluetooth%20API.md)
+- [Web Fullscreen API](/Web%20API/Web%20Fullscreen%20API.md)
+- [Web Geolocation API](/Web%20API/Web%20Geolocation%20API.md)
+- [Web Notification API](/Web%20API/Web%20Notification%20API.md)
+- [Web Share API](/Web%20API/Web%20Share%20API.md)
+- [Web Vibration API](/Web%20API/Web%20Vibration%20API.md)
+- [Web Worker](/Web%20API/Web%20Worker.md)
+- [WebSocket](/Web%20API/WebSocket.md)
+- [XMLHttpRequest](/Web%20API/XMLHttpRequest.md)
+- [使用 MediaDevices API 访问您的网络摄像头](/Web%20API/%E4%BD%BF%E7%94%A8%20MediaDevices%20API%20%E8%AE%BF%E9%97%AE%E6%82%A8%E7%9A%84%E7%BD%91%E7%BB%9C%E6%91%84%E5%83%8F%E5%A4%B4.md)
+
+## WTF
+
+- [JSON Web Token](/WTF/JSON%20Web%20Token.md)
+- [Repo 托管服务](/WTF/Repo%20%E6%89%98%E7%AE%A1%E6%9C%8D%E5%8A%A1.md)
+- [WebP 图像格式](/WTF/WebP%20%E5%9B%BE%E5%83%8F%E6%A0%BC%E5%BC%8F.md)
+- [什么是 CDN？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CDN%EF%BC%9F.md)
+- [什么是 CSRF 攻击？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSRF%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)
+- [什么是 CSS-in-JS](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSS-in-JS.md)
+- [什么是 CSS？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSS%EF%BC%9F.md)
+- [什么是 Doctype？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20Doctype%EF%BC%9F.md)
+- [什么是 JAMstack？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20JAMstack%EF%BC%9F.md)
+- [什么是 NPM？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20NPM%EF%BC%9F.md)
+- [什么是 Polyfill？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20Polyfill%EF%BC%9F.md)
+- [什么是 Redis？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20Redis%EF%BC%9F.md)
+- [什么是 REST？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20REST%EF%BC%9F.md)
+- [什么是 RFC？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20RFC%EF%BC%9F.md)
+- [什么是 XSS 攻击？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20XSS%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)
+- [什么是 YAML？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20YAML%EF%BC%9F.md)
+- [什么是包管理器？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8%EF%BC%9F.md)
+- [什么是单一职责原则？](/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%E5%8D%95%E4%B8%80%E8%81%8C%E8%B4%A3%E5%8E%9F%E5%88%99%EF%BC%9F.md)
+- [优雅降级和渐进增强](/WTF/%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7%E5%92%8C%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA.md)
+
+## 前端
+
+- [Babel 入门](/%E5%89%8D%E7%AB%AF/Babel%20%E5%85%A5%E9%97%A8.md)
+- [esbuild 入门](/%E5%89%8D%E7%AB%AF/esbuild%20%E5%85%A5%E9%97%A8.md)
+- [ESLint 配置文件](/%E5%89%8D%E7%AB%AF/ESLint%20%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.md)
+- [Parcel 入门](/%E5%89%8D%E7%AB%AF/Parcel%20%E5%85%A5%E9%97%A8.md)
+- [Tree Shaking](/%E5%89%8D%E7%AB%AF/Tree%20Shaking.md)
+- [Vite 入门](/%E5%89%8D%E7%AB%AF/Vite%20%E5%85%A5%E9%97%A8.md)
+- [Webpack DefinePlugin](/%E5%89%8D%E7%AB%AF/Webpack%20DefinePlugin.md)
+- [Webpack externals](/%E5%89%8D%E7%AB%AF/Webpack%20externals.md)
+- [Webpack Watch](/%E5%89%8D%E7%AB%AF/Webpack%20Watch.md)
+- [Webpack 入门](/%E5%89%8D%E7%AB%AF/Webpack%20%E5%85%A5%E9%97%A8.md)
+- [Webpack 减少构建时间](/%E5%89%8D%E7%AB%AF/Webpack%20%E5%87%8F%E5%B0%91%E6%9E%84%E5%BB%BA%E6%97%B6%E9%97%B4.md)
+- [使用 ESLint 的 --fix 标志](/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%20ESLint%20%E7%9A%84%20--fix%20%E6%A0%87%E5%BF%97.md)
+- [使用 Prettier 格式化代码](/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%20Prettier%20%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81.md)
+- [使用 Webpack 编译 TypeScript](/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%20Webpack%20%E7%BC%96%E8%AF%91%20TypeScript.md)
+- [使用别名缩短 Webpack 中的导入路径](/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%E5%88%AB%E5%90%8D%E7%BC%A9%E7%9F%AD%20Webpack%20%E4%B8%AD%E7%9A%84%E5%AF%BC%E5%85%A5%E8%B7%AF%E5%BE%84.md)
+- [将 ES 模块与 rollup.js 捆绑并生成多种文件格式](/%E5%89%8D%E7%AB%AF/%E5%B0%86%20ES%20%E6%A8%A1%E5%9D%97%E4%B8%8E%20rollup.js%20%E6%8D%86%E7%BB%91%E5%B9%B6%E7%94%9F%E6%88%90%E5%A4%9A%E7%A7%8D%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F.md)
+- [忽略 ESLint 中的行和文件](/%E5%89%8D%E7%AB%AF/%E5%BF%BD%E7%95%A5%20ESLint%20%E4%B8%AD%E7%9A%84%E8%A1%8C%E5%92%8C%E6%96%87%E4%BB%B6.md)
+- [构建工具](/%E5%89%8D%E7%AB%AF/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7.md)
+- [添加 .editorconfig 文件](/%E5%89%8D%E7%AB%AF/%E6%B7%BB%E5%8A%A0%20.editorconfig%20%E6%96%87%E4%BB%B6.md)
+
+## 手写系列
+
+- [仅执行一次函数](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E4%BB%85%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E5%87%BD%E6%95%B0.md)
+- [实现 async、await](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20async%E3%80%81await.md)
+- [实现 call、apply、bind](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20call%E3%80%81apply%E3%80%81bind.md)
+- [实现 instanceof 运算符](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20instanceof%20%E8%BF%90%E7%AE%97%E7%AC%A6.md)
+- [实现 JS 原生数组方法](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20JS%20%E5%8E%9F%E7%94%9F%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95.md)
+- [实现 JSON.parse](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20JSON.parse.md)
+- [实现 new 运算符](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20new%20%E8%BF%90%E7%AE%97%E7%AC%A6.md)
+- [实现 Object.assign](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20Object.assign.md)
+- [实现 Object.create](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20Object.create.md)
+- [实现 Promise A+](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20Promise%20A+.md)
+- [实现 sleep 函数](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20sleep%20%E5%87%BD%E6%95%B0.md)
+- [实现一个 add 方法](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20add%20%E6%96%B9%E6%B3%95.md)
+- [实现一个 Ajax HTTP 请求库](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20Ajax%20HTTP%20%E8%AF%B7%E6%B1%82%E5%BA%93.md)
+- [实现一个 Event Bus](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20Event%20Bus.md)
+- [实现一个 JavaScript 模板引擎](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20JavaScript%20%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E.md)
+- [实现一个有效期的 localStorage API](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%9C%89%E6%95%88%E6%9C%9F%E7%9A%84%20localStorage%20API.md)
+- [实现一个简单的单页应用](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8.md)
+- [实现一个简单的双向数据绑定](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.md)
+- [实现一个精简版的 Redux](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%B2%BE%E7%AE%80%E7%89%88%E7%9A%84%20Redux.md)
+- [实现一个继承方法](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%BB%A7%E6%89%BF%E6%96%B9%E6%B3%95.md)
+- [实现数组洗牌函数](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E6%95%B0%E7%BB%84%E6%B4%97%E7%89%8C%E5%87%BD%E6%95%B0.md)
+- [构建一个虚拟 DOM](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E6%9E%84%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%99%9A%E6%8B%9F%20DOM.md)
+- [构建模块打包器](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E6%9E%84%E5%BB%BA%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E5%99%A8.md)
+- [模拟 setInterval](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E6%A8%A1%E6%8B%9F%20setInterval.md)
+- [统计字符串中出现最多的字母和个数](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E7%BB%9F%E8%AE%A1%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E5%87%BA%E7%8E%B0%E6%9C%80%E5%A4%9A%E7%9A%84%E5%AD%97%E6%AF%8D%E5%92%8C%E4%B8%AA%E6%95%B0.md)
+- [节流和防抖](/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E8%8A%82%E6%B5%81%E5%92%8C%E9%98%B2%E6%8A%96.md)
+
+## 数据结构和算法
+
+- [大 O 符号](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E5%A4%A7%20O%20%E7%AC%A6%E5%8F%B7.md)
+- [数据结构 — 二叉搜索树](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91.md)
+- [数据结构 — 二叉树](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E4%BA%8C%E5%8F%89%E6%A0%91.md)
+- [数据结构 — 双向链表](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E5%8F%8C%E5%90%91%E9%93%BE%E8%A1%A8.md)
+- [数据结构 — 图](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E5%9B%BE.md)
+- [数据结构 — 堆栈](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E5%A0%86%E6%A0%88.md)
+- [数据结构 — 链表](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E9%93%BE%E8%A1%A8.md)
+- [数据结构 — 队列](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%20%E2%80%94%20%E9%98%9F%E5%88%97.md)
+- [每日一算法：k 均值](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9Ak%20%E5%9D%87%E5%80%BC.md)
+- [每日一算法：Levenshtein 距离](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9ALevenshtein%20%E8%B7%9D%E7%A6%BB.md)
+- [每日一算法：二分搜索](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E4%BA%8C%E5%88%86%E6%90%9C%E7%B4%A2.md)
+- [每日一算法：二项式系数](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E4%BA%8C%E9%A1%B9%E5%BC%8F%E7%B3%BB%E6%95%B0.md)
+- [每日一算法：冒泡排序](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F.md)
+- [每日一算法：凯撒密码](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E5%87%AF%E6%92%92%E5%AF%86%E7%A0%81.md)
+- [每日一算法：分治法](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E5%88%86%E6%B2%BB%E6%B3%95.md)
+- [每日一算法：归并排序](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F.md)
+- [每日一算法：快速排序](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F.md)
+- [每日一算法：插入排序](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F.md)
+- [每日一算法：斐波那契数列](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97.md)
+- [每日一算法：杨辉三角形](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E6%9D%A8%E8%BE%89%E4%B8%89%E8%A7%92%E5%BD%A2.md)
+- [每日一算法：欧氏距离](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E6%AC%A7%E6%B0%8F%E8%B7%9D%E7%A6%BB.md)
+- [每日一算法：汉明距离](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E6%B1%89%E6%98%8E%E8%B7%9D%E7%A6%BB.md)
+- [每日一算法：素数](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E7%B4%A0%E6%95%B0.md)
+- [每日一算法：选择排序](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F.md)
+- [每日一算法：阶乘](/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95/%E6%AF%8F%E6%97%A5%E4%B8%80%E7%AE%97%E6%B3%95%EF%BC%9A%E9%98%B6%E4%B9%98.md)
+
+## 浏览器
+
+- [Data URL](/%E6%B5%8F%E8%A7%88%E5%99%A8/Data%20URL.md)
+- [关键渲染路径](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%85%B3%E9%94%AE%E6%B8%B2%E6%9F%93%E8%B7%AF%E5%BE%84.md)
+- [强缓存与协商缓存](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%BC%BA%E7%BC%93%E5%AD%98%E4%B8%8E%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98.md)
+- [浏览器 Hack](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%20Hack.md)
+- [浏览器内核](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8.md)
+- [浏览器同源策略](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.md)
+- [浏览器如何解析 CSS 选择器？](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%20CSS%20%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9F.md)
+- [浏览器如何解析 CSS？](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%20CSS%EF%BC%9F.md)
+- [浏览器如何解析 HTML？](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%20HTML%EF%BC%9F.md)
+- [浏览器重绘和回流（Repaint & Reflow）](/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E9%87%8D%E7%BB%98%E5%92%8C%E5%9B%9E%E6%B5%81%EF%BC%88Repaint%20&%20Reflow%EF%BC%89.md)
+
+## 计算机网络
+
+- [DNS — 域名系统](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/DNS%20%E2%80%94%20%E5%9F%9F%E5%90%8D%E7%B3%BB%E7%BB%9F.md)
+- [HTTP 2](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%202.md)
+- [HTTP Cookie](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20Cookie.md)
+- [HTTP 与 HTTPS 的区别](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20%E4%B8%8E%20HTTPS%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [HTTP 中 GET 和 POST 的区别？](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20%E4%B8%AD%20GET%20%E5%92%8C%20POST%20%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F.md)
+- [HTTPS](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTPS.md)
+- [TCP 协议](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/TCP%20%E5%8D%8F%E8%AE%AE.md)
+- [TCP 和 UDP 的区别](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/TCP%20%E5%92%8C%20UDP%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+- [UDP 协议](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/UDP%20%E5%8D%8F%E8%AE%AE.md)
+- [URL 重定向](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/URL%20%E9%87%8D%E5%AE%9A%E5%90%91.md)
+- [常见的 HTTP 状态码](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E5%B8%B8%E8%A7%81%E7%9A%84%20HTTP%20%E7%8A%B6%E6%80%81%E7%A0%81.md)
+- [常见的网络端口及对应服务](/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E5%B8%B8%E8%A7%81%E7%9A%84%E7%BD%91%E7%BB%9C%E7%AB%AF%E5%8F%A3%E5%8F%8A%E5%AF%B9%E5%BA%94%E6%9C%8D%E5%8A%A1.md)
+
+## 勘误及提问
+
+如果有疑问或者发现错误，可以在相应的 [issues 进行提问或勘误](https://github.com/lio-zero/blog/issues)。
+
+如果喜欢或者有所启发，欢迎 `Star`，对作者也是一种鼓励。
+
+## License
+
+所有文章采用[知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议](http://creativecommons.org/licenses/by-nc-sa/3.0/cn/)进行许可。
diff --git a/React/React Context API.md b/React/React Context API.md
new file mode 100644
index 0000000..14242d4
--- /dev/null
+++ b/React/React Context API.md	
@@ -0,0 +1,87 @@
+# React Context API
+
+引入 Context API 是为了允许您在应用程序中传递状态（并允许状态更新），而无需使用 `props`。
+
+React 团队建议，如果你只有几个级别的子级需要传递，那么就坚持使用 `props`，因为它仍然是一个比 Context API 简单得多的 API。
+
+在许多情况下，它使我们能够避免使用 Redux，大大简化我们的应用程序。
+
+## 如何工作？
+
+您使用 [`React.createContext()`](https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext) 创建一个上下文，它返回一个 Context 对象：
+
+```jsx
+const { Provider, Consumer } = React.createContext()
+```
+
+然后创建一个返回 `Provider` 组件的包装器组件，并将所有要从中访问上下文的组件添加为子组件：
+
+```jsx
+function Container(props) {
+  let [state, useState] = useState('Show')
+
+  return <Provider value={state}>{props.children}</Provider>
+}
+
+function App() {
+  return (
+    <>
+      <Container>
+        <Button />
+      </Container>
+    </>
+  )
+}
+```
+
+我使用 `Container` 作为这个组件的名称，因为这将是一个全局 `provider`。
+
+在包装在 `Provider` 中的组件内部，您可以使用 `Consumer` 组件来使用上下文：
+
+```jsx
+function Button() {
+  return <Consumer>{(context) => <button>{context.state}</button>}</Consumer>
+}
+```
+
+您还可以将函数传递给 `Provider` 值，`Consumer` 将使用这些函数来更新上下文状态：
+
+```jsx
+<Provider value={{ state, setState }}>{props.children}</Provider>
+
+// ...
+<Consumer>
+  {({ state, setState }) => (
+    <button onClick={() => setState('Hide')}>{state}</button>
+  )}
+</Consumer>
+```
+
+配合 Hooks：
+
+```jsx
+import { useContext } from 'react'
+
+function Button() {
+  const { state, setState } = useContext(UserContext)
+  return <button onClick={() => setState('Hide')}>{state}</button>
+}
+```
+
+您可以创建多个上下文，以使您的状态分布在各个组件之间，同时公开它并使其可以被您想要的任何组件访问。
+
+使用多个文件时，可以在一个文件中创建内容，并将其导入到所有使用位置：
+
+```jsx
+// context.js
+import React from 'react'
+export default React.createContext()
+
+// component1.js
+import Context from './context'
+// ... 使用 Context.Provider
+
+// component2.js
+import Context from './context'
+// ... 使用 Context.Consumer
+```
diff --git a/React/React Fragment.md b/React/React Fragment.md
new file mode 100644
index 0000000..96dc2b8
--- /dev/null
+++ b/React/React Fragment.md	
@@ -0,0 +1,35 @@
+# `<>` 和 `React.Fragment` 的区别
+
+`<>` 是 `React.Fragment` 的简写标签。它允许我们对元素列表进行分组，而无需将它们包装到新节点中。
+
+> **建议**：基本上，我们应该在任何时候使用 `React.Fragment` 或 `<>`，它可以避免不必要的 `div` 包装器，得到一个更加清晰的标签结构。
+
+所以我们可以这样做：
+
+```js
+return (
+  <>
+    <Header />
+    <Navigation />
+    <Main />
+    <Footer />
+  </>
+)
+```
+
+它们之间唯一的区别是简写版本不支持 `key` 属性。
+
+以下是在多行字符串中插入新行（`br`）标签的常见示例：
+
+```js
+{
+  str.split('\\n').map((item, index) => {
+    return (
+      <Fragment key={index}>
+        {item}
+        <br />
+      </Fragment>
+    )
+  })
+}
+```
diff --git a/React/React Hooks.md b/React/React Hooks.md
new file mode 100644
index 0000000..ee3b595
--- /dev/null
+++ b/React/React Hooks.md	
@@ -0,0 +1,1070 @@
+# React Hooks
+
+[Hooks](https://reactjs.org/docs/hooks-intro.html) 是 React 16.8 引入的新特性，允许函数组件访问状态和其他 React 特性。因此，通常不再需要类组件。
+
+尽管 Hooks 通常会替换类组件，但没有计划从 React 中删除类。所以，不需要强制改造类组件，两种方式是可以并存。
+
+> **Tips**：您可以在 [codesandbox](https://codesandbox.io/) 或其他在线代码编辑器调试以下的任何示例。
+
+## 什么是 Hooks？
+
+Hooks 允许我们 **hook** 到 React 特性，例如状态和生命周期方法。
+
+```js
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function FavoriteColor() {
+  const [color, setColor] = useState('red')
+
+  return (
+    <>
+      <h1>我最喜欢的颜色是 {color}!</h1>
+      <button type='button' onClick={() => setColor('blue')}>
+        Blue
+      </button>
+      <button type='button' onClick={() => setColor('red')}>
+        Red
+      </button>
+      <button type='button' onClick={() => setColor('pink')}>
+        Pink
+      </button>
+    </>
+  )
+}
+
+ReactDOM.render(<FavoriteColor />, document.getElementById('root'))
+```
+
+使用 React 提供的钩子前，我们需要使用 `import` 从 `react` 导入钩子。
+
+这里我们使用 `useState` 钩子来跟踪应用状态。状态通常指需要跟踪的应用数据或属性。
+
+## Hooks 规则
+
+Hooks 有 3 条规则：
+
+- Hooks 只能在 React 函数组件内部调用。
+- Hooks 只能在组件的顶层调用。
+- Hooks 不能是有条件的。
+
+详细内容请查阅 [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)。
+
+> **注意**：Hooks 在 React 类组件中不起作用。
+
+下面我们来看看 React 提供的一些 Hooks。
+
+## `useState` Hook
+
+React `useState` 钩子允许我们跟踪函数组件中的状态。状态通常指应用中需要跟踪的数据或属性。
+
+以 `useState` 钩子为例，详细讲解使用 Hook 的每一步。
+
+### 导入 `useState`
+
+要使用 `useState` 钩子，我们首先需要使用 `import` 关键字将它导入到我们的组件中。
+
+```js
+import { useState } from 'react'
+```
+
+我们从 react 包中解构 `useState`，因为它是一个命名导出。
+
+### 初始化 `useState`
+
+我们通过在函数组件中调用 `useState` 来初始化状态。
+
+`useState` 接受初始状态并返回两个值：
+
+- 当前状态
+- 更新状态的函数
+
+```js
+import { useState } from 'react'
+
+function FavoriteColor() {
+  const [color, setColor] = useState('')
+}
+```
+
+第一个值 `color` 是我们当前的状态。第二个值 `setColor` 是用于更新状态的函数。这些名称是变量，可以任意命名。
+
+最后，我们将初始状态设置为空字符串：`useState('')`
+
+### 读取状态
+
+我们现在可以在组件中的任何位置包含我们的状态。
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function FavoriteColor() {
+  const [color, setColor] = useState('red')
+
+  return <h1>我最喜欢的颜色是 {color}!</h1>
+}
+
+ReactDOM.render(<FavoriteColor />, document.getElementById('root'))
+```
+
+### 更新状态
+
+为了更新我们的状态，我们使用定义好的 `setColor` 状态更新函数。
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function FavoriteColor() {
+  const [color, setColor] = useState('red')
+
+  return (
+    <>
+      <h1>我最喜欢的颜色是 {color}!</h1>
+      <button type='button' onClick={() => setColor('blue')}>
+        Blue
+      </button>
+    </>
+  )
+}
+
+ReactDOM.render(<FavoriteColor />, document.getElementById('root'))
+```
+
+**注意**，我们不应该直接更新状态。例如：不允许使用 `color="red"`。
+
+### 状态可以持有什么
+
+`useState` 钩子可以用来跟踪字符串、数字、布尔值、数组、对象以及它们的任意组合！
+
+我们可以创建多个状态 Hook 来跟踪单个值。
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function User() {
+  const [name, setName] = useState('O.O')
+  const [age, setAge] = useState(20)
+  const [year, setYear] = useState(1998)
+
+  return (
+    <>
+      <h1>个人信息</h1>
+      <p>
+        我叫{name}，今年{age}岁，生于{year}年。
+      </p>
+    </>
+  )
+}
+
+ReactDOM.render(<User />, document.getElementById('root'))
+```
+
+或者，我们可以只使用一个状态并包含一个对象！
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function User() {
+  const [user, setUser] = useState({
+    name: 'O.O',
+    age: 20,
+    year: 1998
+  })
+
+  return (
+    <>
+      <h1>个人信息</h1>
+      <p>
+        我叫{user.name}，今年{user.age}岁，生于{user.year}年。
+      </p>
+    </>
+  )
+}
+
+ReactDOM.render(<User />, document.getElementById('root'))
+```
+
+由于我们现在正在跟踪单个对象，因此在渲染组件时需要引用该对象，然后引用该对象的属性。（例如：`user.name`）
+
+### 更新状态中的对象和数组
+
+当状态更新时，整个状态都会被覆盖。
+
+如果我们只想更新用户的年龄呢？
+
+如果我们只调用 `setUser({ age: 18 })`，这将从我们的状态中删除 `name` 和 `year`。
+
+我们可以使用 ES6 扩展运算符来帮助我们。
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function User() {
+  const [user, setUser] = useState({
+    name: 'O.O',
+    age: 20,
+    year: 1998
+  })
+
+  const updateUser = () => {
+    setUser((previousState) => { ...previousState, age: 18 })
+  }
+
+  return (
+    <>
+      <h1>个人信息</h1>
+      <p>
+        我叫{user.name}，今年{user.age}岁，生于{user.year}年。
+      </p>
+      <button onClick={updateUser}>18</button>
+    </>
+  )
+}
+
+ReactDOM.render(<User />, document.getElementById('root'))
+```
+
+因为我们需要状态的当前值，所以我们将一个函数传递给 `setUser` 函数。此函数接收上一个值。
+
+然后我们返回一个对象，展开 `previousState` 并仅覆盖 `age`。
+
+## `useEffect` Hook
+
+`useEffect` Hook 允许您在组件中执行**副作用（side effect）**。副作用的一些示例有：获取数据、直接更新 DOM 和定时器。
+
+> **Tips**：如果您熟悉类组件，那么可以将它想象为类组件的 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount` 钩子的结合体。
+
+`useEffect` 接受两个参数。第二个参数是可选的。
+
+```ts
+useEffect(function, [options])
+```
+
+以定时器为例，使用 `setTimeout()` 计算初始渲染后的 1 秒：
+
+```js
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+function Timer() {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setCount((count) => count + 1)
+    }, 1000)
+  })
+
+  return <h1>我已经渲染了 {count} 次！</h1>
+}
+
+ReactDOM.render(<Timer />, document.getElementById('root'))
+```
+
+如果您运行上面的示例，您会发现它一直在计数，即使它应该只计数一次！
+
+`useEffect` 在每个渲染上运行。这意味着当计数发生变化时，会发生渲染，然后触发另一个 effect。
+
+这不是我们想要的。有几种方法可以控制副作用何时运行。
+
+我们应该始终包含接受数组的第二个参数。我们可以选择将依赖项传递给该数组中的 `useEffect`。
+
+没有任何依赖：
+
+```js
+useEffect(() => {
+  // 在每个渲染上运行
+})
+```
+
+一个空数组：
+
+```js
+useEffect(() => {
+  // 仅在第一次渲染时运行
+}, [])
+```
+
+`prop` 或 `state` 值：
+
+```js
+useEffect(() => {
+  // 在第一次渲染和任何依赖项值更改时运行
+}, [prop, state])
+```
+
+所以，为了解决这个问题，让我们只在初始渲染上运行这个效果。
+
+```diff
+- useEffect(() => { ... })
++ useEffect(() => { ... }, []) // <- 在此处添加空括号
+```
+
+下面是一个依赖于变量的 `useEffect` 钩子的示例。如果 `count` 变量更新，effect 将再次运行：
+
+```js
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  const [calculation, setCalculation] = useState(0)
+
+  useEffect(() => {
+    setCalculation(() => count * 2)
+  }, [count]) // <- 在这里添加 count 变量
+
+  return (
+    <>
+      <p>总数: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>+</button>
+      <p>计算: {calculation}</p>
+    </>
+  )
+}
+
+ReactDOM.render(<Counter />, document.getElementById('root'))
+```
+
+如果存在多个依赖项，则应将它们包含在 `useEffect` 依赖项数组中。
+
+**注意传入的依赖**，如果每次传入的依赖都重新生成一个新的引用，那么也会出现无限循环的情况。
+
+```js
+const getDep = () => {
+  return {
+    foo: 'content'
+  }
+}
+
+useEffect(() => {
+  // 无限循环
+}, [getDep()])
+```
+
+这种情况可以使用字符串序列化解决。
+
+```js
+const dep = JSON.stringify(getDeps())
+
+useEffect(() => {
+  // 无限循环
+}, [dep])
+```
+
+这样比较的就是字符串是否相等。
+
+### 清理 Effect
+
+有些 effect 需要清理以减少内存泄漏。
+
+超时、订阅、事件监听器和其他不再需要的 effect 应该被处理。
+
+我们通过在 `useEffect` 钩子的末尾包含一个返回函数来实现这一点。
+
+下面以清除定时器为例：
+
+```js
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+function Timer() {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      setCount((count) => count + 1)
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <h1>我渲染了 {count} 次!</h1>
+}
+
+ReactDOM.render(<Timer />, document.getElementById('root'))
+```
+
+**注意**，要清除定时器，我们必须为其命名。
+
+## `useContext` Hook
+
+[React Context](https://github.com/lio-zero/blog/blob/main/React/React%20Context%20API.md) 是一种全局管理状态的方法。
+
+与单独使用 `useState` 相比，它可以与 `useState` 钩子一起使用，在深度嵌套的组件之间更容易地共享状态。
+
+### 问题
+
+状态应由堆栈中需要访问状态的最高父组件持有。
+
+举例来说，我们有许多嵌套组件。堆栈顶部和底部的组件需要访问状态。
+
+要在没有上下文的情况下实现这一点，我们需要将状态作为 `props` 传递给每个嵌套组件。这被称为 **prop drilling**。
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function Comp1() {
+  const [user, setUser] = useState('O.O')
+
+  return (
+    <>
+      <h1>{`Hello ${user}!`}</h1>
+      <Comp2 user={user} />
+    </>
+  )
+}
+
+function Comp2({ user }) {
+  return (
+    <>
+      <h1>组件 2</h1>
+      <Comp3 user={user} />
+    </>
+  )
+}
+
+function Comp3({ user }) {
+  return (
+    <>
+      <h1>组件 3</h1>
+      <Comp4 user={user} />
+    </>
+  )
+}
+
+function Comp4({ user }) {
+  return (
+    <>
+      <h1>组件 4</h1>
+      <Comp5 user={user} />
+    </>
+  )
+}
+
+function Comp5({ user }) {
+  return (
+    <>
+      <h1>组件 5</h1>
+      <h2>{`Hello ${user} again!`}</h2>
+    </>
+  )
+}
+
+ReactDOM.render(<Comp1 />, document.getElementById('root'))
+```
+
+即使组件 2-4 不需要状态，但它们也必须传递状态才能到达组件 5。
+
+### 解决方案
+
+解决方案是创建上下文。
+
+要创建上下文，必须导入 `createContext` 并对其进行初始化：
+
+```js
+import { useState, createContext } from 'react'
+import ReactDOM from 'react-dom'
+
+const UserContext = createContext()
+```
+
+接下来，我们将使用 Context Provider 来包装需要状态上下文的组件树。
+
+### Context Provider
+
+在 Context Provider 中包装子组件并提供状态值。
+
+```js
+function Comp1() {
+  const [user, setUser] = useState('O.O')
+
+  return (
+    <UserContext.Provider value={user}>
+      <h1>{`Hello ${user}!`}</h1>
+      <Comp2 user={user} />
+    </UserContext.Provider>
+  )
+}
+```
+
+现在，该树中的所有组件都可以访问用户上下文。
+
+### 使用 `useContext` Hooks
+
+为了在子组件中使用上下文，我们需要使用 `useContext` 钩子访问它。
+
+首先，导入 `useContext`：
+
+```js
+import { useState, createContext, useContext } from 'react'
+```
+
+然后，您可以访问所有组件中的用户上下文：
+
+```js
+function Comp5() {
+  const user = useContext(UserContext)
+
+  return (
+    <>
+      <h1>组件 5</h1>
+      <h2>{`Hello ${user} again!`}</h2>
+    </>
+  )
+}
+```
+
+完整示例：
+
+```js
+import { useState, createContext, useContext } from 'react'
+import ReactDOM from 'react-dom'
+
+const UserContext = createContext()
+
+function Comp1() {
+  const [user, setUser] = useState('O.O')
+
+  return (
+    <UserContext.Provider value={user}>
+      <h1>{`Hello ${user}!`}</h1>
+      <Comp2 user={user} />
+    </UserContext.Provider>
+  )
+}
+
+function Comp2() {
+  return (
+    <>
+      <h1>组件 2</h1>
+      <Comp3 />
+    </>
+  )
+}
+
+function Comp3() {
+  return (
+    <>
+      <h1>组件 3</h1>
+      <Comp4 />
+    </>
+  )
+}
+
+function Comp4() {
+  return (
+    <>
+      <h1>组件 4</h1>
+      <Comp5 />
+    </>
+  )
+}
+
+function Comp5() {
+  const user = useContext(UserContext)
+
+  return (
+    <>
+      <h1>组件 5</h1>
+      <h2>{`Hello ${user} again!`}</h2>
+    </>
+  )
+}
+
+ReactDOM.render(<Comp1 />, document.getElementById('root'))
+```
+
+## `useRef` Hook
+
+`useRef` 钩子允许在渲染之间持久化值。
+
+它可用于存储在更新时不会导致重新渲染的可变值，也可用于直接访问 DOM 元素。
+
+### 不会导致重新渲染
+
+如果我们试图计算应用使用 `useState` 钩子渲染的次数，我们将陷入无限循环，因为这个钩子本身会导致重新渲染。
+
+为了避免这种情况，我们可以使用 `useRef` 钩子。
+
+```js
+import { useState, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  const [inputValue, setInputValue] = useState('')
+  const count = useRef(0)
+
+  useEffect(() => {
+    count.current = count.current + 1
+  })
+
+  return (
+    <>
+      <input
+        type='text'
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+      />
+      <h1>渲染次数: {count.current}</h1>
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+`useRef()` 只返回一项。它返回一个名为 `current` 的对象。
+
+初始化 `useRef` 时，我们设置初始值为 `useRef(0)`。它其实类似于 `const count = { current: 0 }`，我们可以使用 `count` 访问 `count.current`。
+
+### 访问 DOM 元素
+
+通常，我们希望让 React 处理所有 DOM 操作。
+
+但在某些情况下，可以使用 `useRef` 而不会引起问题。
+
+在 React 中，我们可以向元素添加 `ref` 属性，以便直接在 DOM 中访问它。
+
+```js
+import { useRef } from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  const inputElement = useRef()
+
+  const focusInput = () => inputElement.current.focus()
+
+  return (
+    <>
+      <input type='text' ref={inputElement} />
+      <button onClick={focusInput}>聚焦 input</button>
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+### 跟踪状态变化
+
+`useRef` 钩子还可用于跟踪先前的状态值。
+
+这是因为我们能够在渲染之间持久化 `useRef` 值。
+
+```js
+import { useState, useEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  const [inputValue, setInputValue] = useState('')
+  const previousInputValue = useRef('')
+
+  useEffect(() => {
+    previousInputValue.current = inputValue
+  }, [inputValue])
+
+  return (
+    <>
+      <input
+        type='text'
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+      />
+      <h2>当前值: {inputValue}</h2>
+      <h2>先前值: {previousInputValue.current}</h2>
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+这一次，我们结合使用 `useState`、`useEffect` 和 `useRef` 来跟踪之前的状态。
+
+在 `useEffect` 中，每次通过在 `input` 字段中输入文本来更新 `inputValue` 时，我们都会更新 `useRef` 当前值。
+
+## `useReducer` Hook
+
+`useReducer` 钩子类似于 `useState` 钩子。它允许自定义状态逻辑。
+
+如果您发现自己在跟踪依赖于复杂逻辑的多个状态，`useReducer` 可能会很有用。
+
+`useReducer` 钩子接受两个参数：
+
+- `reducer` 函数包含自定义状态逻辑，`initialState` 可以是一个简单的值，但通常会包含一个对象。
+- `useReducer` 钩子返回当前 `state` 和 `dispatch` 方法。
+
+下面是计数器使用 `useReducer` 的示例：
+
+```js
+import { useReducer } from 'react'
+import ReactDOM from 'react-dom'
+
+const initialTodos = [
+  {
+    id: 1,
+    title: 'Todo 1',
+    complete: false
+  },
+  {
+    id: 2,
+    title: 'Todo 2',
+    complete: false
+  }
+]
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'COMPLETE':
+      return state.map((todo) => {
+        if (todo.id === action.id) {
+          return { ...todo, complete: !todo.complete }
+        } else {
+          return todo
+        }
+      })
+    default:
+      return state
+  }
+}
+
+function Todos() {
+  const [todos, dispatch] = useReducer(reducer, initialTodos)
+
+  const handleComplete = (todo) => {
+    dispatch({ type: 'COMPLETE', id: todo.id })
+  }
+
+  return (
+    <>
+      {todos.map((todo) => (
+        <div key={todo.id}>
+          <label>
+            <input
+              type='checkbox'
+              checked={todo.complete}
+              onChange={() => handleComplete(todo)}
+            />
+            {todo.title}
+          </label>
+        </div>
+      ))}
+    </>
+  )
+}
+
+ReactDOM.render(<Todos />, document.getElementById('root'))
+```
+
+这就是跟踪 todo 完成状态的逻辑。
+
+通过添加更多操作，添加、删除和完成 todo 的所有逻辑都可以包含在单个 `useReducer` 钩子中。
+
+## `useCallback` Hook
+
+React `useCallback` Hook 返回一个 **memoized**（译为**记忆**，一种函数的缓存手段）的回调函数。
+
+> **推荐**：[JavaScript 函数记忆](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E5%87%BD%E6%95%B0%E8%AE%B0%E5%BF%86.md)。
+
+这允许我们隔离资源密集型函数，以便它们不会在每次渲染时自动运行。
+
+`useCallback` Hook 仅在其中一个依赖项更新时运行，这避免传入的回调函数每次都是新的函数实例而导致依赖组件重新渲染，提高了性能。
+
+### 问题所在
+
+使用 `useCallback` 的一个原因是防止组件重新渲染，除非其 `props` 已更改。
+
+在本例中，您可能会认为 Todos 组件不会重新渲染，除非 `todos` 发生更改：
+
+```js
+// main.js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+import Todos from './Todos'
+
+const App = () => {
+  const [count, setCount] = useState(0)
+  const [todos, setTodos] = useState([])
+
+  const increment = () => {
+    setCount((c) => c + 1)
+  }
+
+  const addTodo = () => setTodos((t) => [...t, 'New Todo'])
+
+  return (
+    <>
+      <Todos todos={todos} addTodo={addTodo} />
+      <hr />
+      <div>
+        次数: {count}
+        <button onClick={increment}>+</button>
+      </div>
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+`Todos.js` 组件:
+
+```js
+import { memo } from 'react'
+
+const Todos = ({ todos, addTodo }) => {
+  console.log('子渲染')
+  return (
+    <>
+      <h2>Todos List</h2>
+      {todos.map((todo, index) => {
+        return <p key={index}>{todo}</p>
+      })}
+      <button onClick={addTodo}>添加 Todo</button>
+    </>
+  )
+}
+
+export default memo(Todos)
+```
+
+尝试运行它并单击 `+` 按钮。
+
+您会注意到，即使 `todos` 没有更改，`Todos` 组件也会重新渲染。
+
+> 先说明一下 `React.memo` 的作用，当某个组件状态更新时，它的所有子组件树将会重新渲染，而 `React.memo` 可以避免这种情况。
+
+**为什么这不起作用？**我们使用了 `memo`，所以 `Todos` 组件不应该重新渲染，因为当 `count` 增加时，`todos` 状态和 `addTodo` 函数都没有改变。
+
+这是因为所谓的**引用平等**。
+
+每次组件重新渲染时，都会重新创建其函数。因此，`addTodo` 函数实际上发生了变化。
+
+### 解决
+
+为了解决这个问题，我们可以使用 `useCallback` 钩子来防止函数被重新创建，除非有必要。
+
+使用 `useCallback` 钩子可以防止 `Todos` 组件不必要地重新渲染：
+
+```diff
+- import { useState } from 'react'
+
+- const addTodo = () => setTodos((t) => [...t, 'New Todo'])
+
++ import { useState, useCallback } from 'react'
+
++ const addTodo = useCallback(() => setTodos((t) => [...t, 'New Todo']), [todos])
+```
+
+推荐阅读：[How to Implement Memoization in React to Improve Performance](https://www.sitepoint.com/implement-memoization-in-react-to-improve-performance/)。
+
+## `useMemo` Hook
+
+React `useMemo` 钩子返回一个已缓存的值，它仅在其中一个依赖项更新时运行，避免依赖的组件每次都重新渲染，提高了性能。
+
+`useMemo` 和 `useCallback` 钩子类似。主要区别在于 `useMemo` 返回一个已缓存的值，而 `useCallback` 返回一个已缓存的函数。
+
+### 性能问题
+
+`useMemo` 钩子可以用来防止昂贵的、资源密集型的函数不必要地运行。如果您使用过 Vue，那么您可能很快就联想到 [Vue 计算属性](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20Computed%20%E2%80%94%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.md)。
+
+在本例中，我们有一个在每个渲染上运行的昂贵函数。
+
+更改计数或添加 `todo` 时，您会注意到执行延迟。
+
+```js
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+const expensiveCalculation = (num) => {
+  console.log('计算...')
+  for (let i = 0; i < 1000000000; i++) {
+    num += 1
+  }
+  return num
+}
+
+const App = () => {
+  const [count, setCount] = useState(0)
+  const [todos, setTodos] = useState([])
+  const calculation = expensiveCalculation(count)
+
+  const increment = () => {
+    setCount((c) => c + 1)
+  }
+  const addTodo = () => {
+    setTodos((t) => [...t, 'New Todo'])
+  }
+
+  return (
+    <div>
+      <div>
+        <h2>Todos List</h2>
+        {todos.map((todo, index) => {
+          return <p key={index}>{todo}</p>
+        })}
+        <button onClick={addTodo}>新增 Todo</button>
+      </div>
+      <hr />
+      <div>
+        Count: {count}
+        <button onClick={increment}>+</button>
+        <h2>昂贵的计算</h2>
+        {calculation}
+      </div>
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+### 使用 `useMemo`
+
+为了解决这个性能问题，我们可以使用 `useMemo` Hook 来缓存 `expensiveCalculation` 函数。这将影响该函数仅在需要时运行。
+
+`useMemo` Hook 接受第二个参数来声明依赖项。昂贵的函数计算只会在其依赖关系发生变化时运行。
+
+我们只需要更改上面示例的其中一行即可：
+
+```diff
+- const calculation = expensiveCalculation(count)
++ const calculation = useMemo(() => expensiveCalculation(count), [count])
+```
+
+昂贵的函数计算只会在 `count` 更改时运行，而不是在添加待办事项时运行。
+
+## 自定义 Hook
+
+Hooks 是可重用的函数。
+
+当您有需要在多个组件中使用相同的组件逻辑时，我们可以将该逻辑提取到自定义 Hook。
+
+自定义 Hook 以 `use` 开头。本节将编写一个 `useFetch` 示例。
+
+### 自定义 `useFetch` Hook
+
+在下面的代码中，我们在 `Home` 组件中获取数据并显示它。
+
+我们将使用 **[JSONPlaceholder](https://jsonplaceholder.typicode.com/)** 服务来获取假数据。
+
+使用 **JSONPlaceholder** 服务获取假 `Todos` 列表，并在页面上显示标题：
+
+```js
+// main.js
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+
+const Home = () => {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/todos')
+      .then((res) => res.json())
+      .then((data) => setData(data))
+  }, [])
+
+  return (
+    <>
+      {data &&
+        data.map((item) => {
+          return <p key={item.id}>{item.title}</p>
+        })}
+    </>
+  )
+}
+
+ReactDOM.render(<Home />, document.getElementById('root'))
+```
+
+其他组件也可能需要获取逻辑，因此我们将其提取到自定义 Hook 中。
+
+将获取逻辑移动到一个新文件以用作自定义 Hook：
+
+```js
+// useFetch.js
+import { useState, useEffect } from 'react'
+
+const useFetch = (url) => {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => setData(data))
+  }, [url])
+
+  return [data]
+}
+
+export default useFetch
+```
+
+封装为自定义钩子前后区别：
+
+```diff
+- import { useState, useEffect } from 'react'
+
+- const [data, setData] = useState(null)
+- useEffect(() => {
+-   fetch('https://jsonplaceholder.typicode.com/todos')
+-     .then((res) => res.json())
+-     .then((data) => setData(data))
+- }, [])
+
++ import useFetch from './useFetch'
+
++ const [data] = useFetch('https://jsonplaceholder.typicode.com/todos')
+```
+
+我们创建了一个名为 `useFetch.js` 的新文件，其中包含一个名为 `useFetch` 的函数，该函数包含获取数据所需的所有逻辑。
+
+我们删除了硬编码的 URL，并将其替换为可以传递给自定义钩子的 URL 变量。
+
+最后，我们从钩子中返回数据。
+
+在 `main.js` 中，我们导入 `useFetch` 钩子，并像其他钩子一样使用它。这就是我们传递 URL 以从中获取数据的地方。
+
+现在我们可以在任何组件中重用这个自定义钩子，从任何 URL 获取数据。
+
+当然，这是最简单的一个自定义钩子，您可以在此基础上加上您业务上所需要的任何逻辑。
+
+React 官网的 [Building Your Own Hooks](https://reactjs.org/docs/hooks-custom.html) 章节介绍了如何自定义 Hook。
+
+[搞懂这 12 个 Hooks，保证让你玩转 React](https://juejin.cn/post/7101486767336849421)
+
+另外，这里提供一些社区开发者提供的 Hooks：
+
+- [ahooks](https://ahooks.js.org/) 和 [usehooks-ts](https://github.com/juliencrn/usehooks-ts) — 两个很棒的 React Hooks 库
+- [30 seconds of code](https://www.30secondsofcode.org/) 提供了许多常见的 [React Hooks](https://www.30secondsofcode.org/react/t/hooks/p/1)。
+- Josh Comeau 也分享了一些常用的 [React Hooks](https://www.joshwcomeau.com/snippets/)
+
+## 最后
+
+以上便是本文介绍的 React Hooks，我们重点介绍了几个常用的钩子，它还有其他内置的钩子，例如：`useLayoutEffect`、`useDebugValue`、`useImperativeHandle`、`useId` 等。您可以在 [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html) 章节了解它们。
+
+## 更多资料
+
+React Hooks 还有很多没有讲到，详细 Hooks 介绍请查阅文档，这里也整理了一些资料供大家参考：
+
+- [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html)
+- [Understanding useMemo and useCallback](https://www.joshwcomeau.com/react/usememo-and-usecallback/)
+- [useEffect 完整指南](https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/)
+- [React Hooks 最佳实践](https://juejin.cn/post/6844904165500518414)
+- [使用 react hooks 带来的收益抵得过使用它的成本吗?](https://www.zhihu.com/question/350523308/answer/858145147)
+- [The Ugly Side of React Hooks](https://medium.com/swlh/the-ugly-side-of-hooks-584f0f8136b6) — 正如标题所暗示的那样，作者不喜欢 Hooks，并给出了理由。
+- [【React 深入】从 Mixin 到 HOC 再到 Hook](https://juejin.cn/post/6844903815762673671)
+- [「react 进阶」一文吃透 react-hooks 原理](https://juejin.cn/post/6944863057000529933)
+- [不优雅的 React Hooks](https://juejin.cn/post/7051535411042058271)
+- [React Hooks 使用误区，驳官方文档](https://juejin.cn/post/7046358484610187277)
+- [React Hooks 详解 【近 1W 字】+ 项目实战](https://juejin.cn/post/6844903985338400782)
+- [React Hook + TS 购物车实战（性能优化、闭包陷阱、自定义 hook）](https://juejin.cn/post/6844904079181905927)
+- [我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁](https://juejin.cn/post/6939766434159394830)
+- [「React 进阶」 React 全部 Hooks 使用大全（包含 React v18 版本）](https://juejin.cn/post/7118937685653192735)
diff --git a/React/React Portals.md b/React/React Portals.md
new file mode 100644
index 0000000..f3ef02b
--- /dev/null
+++ b/React/React Portals.md	
@@ -0,0 +1,23 @@
+# React Portals
+
+React 16 引入了 [Portal](https://reactjs.org/docs/portals.html)。
+
+Portal 是一种将元素渲染在其组件层次结构之外的单独组件中的一种方式。
+
+当该事件被渲染时，发生在其上的事件由 React 组件层次结构管理，而不是由元素的 DOM 位置设置的层次结构管理。
+
+因此命名为 **Portal** — 一个元素位于 DOM 树中的某个位置，它位于正常的 React 组件树之外，但包含它的 React 组件树仍然对它负责。
+
+React 提供了一个简单的 API 来实现这一点，即 `ReactDOM.createPortal()`，它接受 2 个参数。第一个是要渲染的元素，第二个是要渲染它的 DOM 元素。
+
+```js
+ReactDOM.createPortal(child, container)
+```
+
+Portal 的一个典型的用例是模态窗口。
+
+全屏渲染的模态必须位于元素之外，因此可以使用 CSS 正确设置样式。
+
+这是 React 官网提供的一个示例：[Example: Portal event bubbling](https://codepen.io/gaearon/pen/jGBWpE)。
+
+> **扩展**：Vue 3 中也实现了一个类似的内置组件 Teleport。感兴趣的话可以阅读 [Vue3 Teleport 组件](https://github.com/lio-zero/blog/blob/main/Vue/Vue3%20Teleport%20%E7%BB%84%E4%BB%B6.md)。
diff --git "a/React/React \344\270\215\345\217\230\346\200\247.md" "b/React/React \344\270\215\345\217\230\346\200\247.md"
new file mode 100644
index 0000000..2f4bb12
--- /dev/null
+++ "b/React/React \344\270\215\345\217\230\346\200\247.md"	
@@ -0,0 +1,42 @@
+# React 不变性
+
+在 React 中编程时，你可能会遇到一个概念，即不变性（Immutability），与之相反的是可变性（mutability）。
+
+这是一个有争议的话题，但无论你如何看待不可变的概念，React 和它的大多数生态系统都在某种程度上推动了这一点，所以你至少需要理解它为什么如此重要以及它的含义。
+
+在编程中，当变量的值在创建后不能更改时，它就是不可变的。
+
+在操作字符串时，你已经在使用不可变变量。默认情况下，字符串是不可变的，实际上，当你更改它们时，会创建一个新字符串并将其分配给相同的变量名。
+
+不可变变量永远不能被改变。要更新它的值，你需要创建一个新变量。
+
+这同样适用于对象和数组。
+
+要添加新项，你无需更改数组，而是通过连接旧数组和新项来创建新数组。
+
+对象从不更新，而是在更改之前复制它。
+
+> **推荐**：以上内容在[变量赋值与原始对象可变性](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%8F%98%E9%87%8F%E8%B5%8B%E5%80%BC%E4%B8%8E%E5%8E%9F%E5%A7%8B%E5%AF%B9%E8%B1%A1%E5%8F%AF%E5%8F%98%E6%80%A7.md)有介绍到，并提供了示例。
+
+这在很多地方都适用于 React。
+
+例如，你永远不应该直接改变组件的状态属性，而只能通过 `setState()` 方法。
+
+在 Redux 中，你永远不会直接改变状态，而只能通过 `reducer`，也就是函数来改变状态。
+
+**问题是，为什么?**
+
+有多种原因，其中最重要的是：
+
+- 突变可以集中化，就像 Redux 一样，这提高了调试能力并减少了错误来源。
+- 代码看起来更清晰、更容易理解。你永远不会期望一个函数在你不知道的情况下改变某个值，这给了你可预测性。当一个函数不改变对象而只是返回一个新对象时，它被称为[纯函数](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E7%BA%AF%E5%87%BD%E6%95%B0.md)。
+- 库可以优化代码，因为 JavaScript 在将旧对象引用替换为全新对象时速度更快，而不是改变现有对象。这将为你提升性能。
+
+## 最后
+
+你可以选择 [immutability-helper](https://github.com/kolodny/immutability-helper)、[Immutable](https://github.com/immutable-js/immutable-js) 或 [Immer](https://github.com/immerjs/immer) 这样成熟的库来创建不可变状态树。
+
+## 更多资料
+
+- [使用 Proxy 对象来健壮您的 JavaScript 不变性函数](https://github.com/lio-zero/blog/blob/main/JavaScript/%E4%BD%BF%E7%94%A8%20Proxy%20%E5%AF%B9%E8%B1%A1%E6%9D%A5%E5%81%A5%E5%A3%AE%E6%82%A8%E7%9A%84%20JavaScript%20%E4%B8%8D%E5%8F%98%E6%80%A7%E5%87%BD%E6%95%B0.md)
+- [为什么说 90% 的情况下，immer 完胜 immutable？](https://juejin.cn/post/7142814989307346981)
diff --git "a/React/React \344\270\245\346\240\274\346\250\241\345\274\217.md" "b/React/React \344\270\245\346\240\274\346\250\241\345\274\217.md"
new file mode 100644
index 0000000..a705992
--- /dev/null
+++ "b/React/React \344\270\245\346\240\274\346\250\241\345\274\217.md"	
@@ -0,0 +1,40 @@
+# React 严格模式
+
+你可以使用 `React.StrictMode` 内置组件，用于启用一组检查，以执行 React 并向您发出警告。
+
+一种简单的方法是将整个根组件（这里是 App）包装在 `<React.StrictMode></React.StrictMode>` 中：
+
+```js
+// main.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+```
+
+您也可以通过包装应用程序的一个或多个组件来使用它：
+
+```js
+import React from 'react'
+
+function Hello() {
+  return (
+    <>
+      <React.StrictMode>{/* ... */}</React.StrictMode>
+    </>
+  )
+}
+```
+
+该组件的主要用例之一是用作自动化的最佳实践、潜在问题和弃用检查。
+
+它无法捕捉所有内容，但您在这里有很多不错的检查可以帮助您解决开发问题。
+
+它在 React 16.3 中引入，它不会渲染成任何可见 UI，对生产环境没有影响，因此您可以始终将组件保留在代码库中。在开发中使用，它将在浏览器控制台中打印有用的警告。
+
+至于它会给出哪些警告、检查哪些内容，可以查阅官网的 [Strict Mode](https://reactjs.org/docs/strict-mode.html) 章节，这些内容随时在发生变化，这里就过多介绍。
diff --git "a/React/React \344\270\255\347\232\204\344\273\243\347\240\201\346\213\206\345\210\206.md" "b/React/React \344\270\255\347\232\204\344\273\243\347\240\201\346\213\206\345\210\206.md"
new file mode 100644
index 0000000..19e86af
--- /dev/null
+++ "b/React/React \344\270\255\347\232\204\344\273\243\347\240\201\346\213\206\345\210\206.md"	
@@ -0,0 +1,90 @@
+# React 中的代码拆分
+
+就包大小而言，现代 JavaScript 应用可能相当庞大。您不希望您的用户仅仅为了加载首屏就必须下载一个 1MB 甚至更大的 JavaScript 包，对吗？但是，当您发布一个使用 Webpack 捆绑构建的现代 Web 应用时，默认情况下会发生这种情况。
+
+捆绑包将包含可能永远不会运行的代码，因为用户可能只会在登录页面上停止，而永远不会看到应用的其余部分。
+
+**代码拆分**是只在需要的时候加载 JavaScript 的做法。
+
+**代码拆分**有两种形式，基于路由的拆分与基于组件的拆分，[react-loadable](https://github.com/thejameskyle/react-loadable) 库的 [Route-based splitting vs. Component-based splitting](https://github.com/jamiebuilds/react-loadable#route-based-splitting-vs-component-based-splitting) 这一小节有一个好的解释。
+
+这改善了：
+
+- 应用的性能
+- 对内存的影响，以及移动设备上的电池使用情况
+- 下载包的大小
+
+React 16.6 引入了 `React.lazy` 和 `React.Suspense` 方法来执行代码拆分，它们取代以前使用的所有工具或库，例如：[react-loadable](https://github.com/thejameskyle/react-loadable)。
+
+[`React.lazy`](https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy) 和 [`React.Suspense`](https://zh-hans.reactjs.org/docs/react-api.html#reactsuspense) 形成延迟加载依赖项并仅在需要时加载它的完美方式。
+
+让我们从 `React.lazy` 开始。您可以使用它来导入任何组件：
+
+```js
+import React from 'react'
+
+const TodoList = React.lazy(() => import('./TodoList'))
+
+export default () => {
+  return (
+    <>
+      <TodoList />
+    </>
+  )
+}
+```
+
+`TodoList` 组件一旦可用，就会动态添加到输出中。Webpack 将为其创建一个单独的包，并在必要时负责加载。
+
+`Suspense` 是一个组件，可用于包装任何延迟加载的组件：
+
+```js
+import React from 'react'
+
+const TodoList = React.lazy(() => import('./TodoList'))
+
+function App() {
+  return (
+    <>
+      <React.Suspense>
+        <TodoList />
+      </React.Suspense>
+    </>
+  )
+}
+```
+
+它负责在获取和渲染延迟加载的组件时处理输出。
+
+使用它的 `fallback` 属性输出一些 JSX 或组件：
+
+```js
+// ...
+<React.Suspense fallback={<p>Loading...</p>}>
+  <TodoList />
+</React.Suspense>
+// ...
+```
+
+所有这些都与 React Router 配合良好：
+
+```js
+import React from 'react'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+
+const TodoList = React.lazy(() => import('./TodoList'))
+const NewTodo = React.lazy(() => import('./NewTodo'))
+
+const App = () => (
+  <Router>
+    <React.Suspense fallback={<p>Loading...</p>}>
+      <Switch>
+        <Route exact path='/' component={TodoList} />
+        <Route path='/new' component={NewTodo} />
+      </Switch>
+    </React.Suspense>
+  </Router>
+)
+```
+
+[使用 React Suspense 预缓存图像](https://css-tricks.com/pre-caching-image-with-react-suspense/)
diff --git "a/React/React \344\270\255\347\232\204\345\215\225\345\220\221\346\225\260\346\215\256\346\265\201.md" "b/React/React \344\270\255\347\232\204\345\215\225\345\220\221\346\225\260\346\215\256\346\265\201.md"
new file mode 100644
index 0000000..23ce7eb
--- /dev/null
+++ "b/React/React \344\270\255\347\232\204\345\215\225\345\220\221\346\225\260\346\215\256\346\265\201.md"	
@@ -0,0 +1,30 @@
+# React 中的单向数据流
+
+单向数据流不是 React 独有的概念，但作为一名 JavaScript 开发人员，这可能是您第一次听到它（如果您没使用过 React 或 Vue 类似的框架）。
+
+一般来说，这个概念意味着数据只有一种方式可以传输到应用程序的其他部分。
+
+在 React 中，这意味着：
+
+- 状态传递给视图和子组件
+- 操作由视图触发
+- 操作可以更新状态
+- 状态更改被传递给视图和子组件
+
+以上的**单向数据流**的简单示意图如下：
+
+![单向数据流](https://upload-images.jianshu.io/upload_images/18281896-156f51f6a5f6afcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**视图是应用程序状态的结果。状态只能在操作发生时改变。当操作发生时，状态会更新。**
+
+由于单向绑定，数据不能以相反的方式流动（例如，双向绑定（Vue）会发生这种情况），这具有一些关键优势：
+
+- 它不易出错，因为您可以更好地控制数据
+- 调试起来更容易，因为您知道来自哪里
+- 它更有效，因为库已经知道系统每个部分的边界是什么
+
+状态始终由一个组件拥有。任何受此状态影响的数据都只能影响它下面的组件：它的子组件。
+
+更改组件的状态不会影响其父组件、同级组件或应用程序中的任何其他组件：仅影响其子组件。
+
+这就是状态经常在组件树中向上移动的原因，以便可以在需要访问它的组件之间共享。
diff --git "a/React/React \345\205\245\351\227\250.md" "b/React/React \345\205\245\351\227\250.md"
new file mode 100644
index 0000000..b603d39
--- /dev/null
+++ "b/React/React \345\205\245\351\227\250.md"	
@@ -0,0 +1,1518 @@
+# React 入门
+
+## 什么是 React？
+
+React 是一个用于创建用户界面的开源前端 JavaScript 库。它是声明式的、高效的和灵活的，并且它坚持基于组件的方法，这使我们能够创建可重用的 UI 组件。
+
+[React](https://reactjs.org/) 是一个开源的前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。它本质上是一个渲染组件的库，尽管它们不是传统的 web 组件。
+
+React 使用一种名为 JSX（使用 JavaScript + XML）的语言，开发人员可以在 React 组件中包含所有前端代码（包括 HTML 和 CSS）。
+
+React 最酷的一点是它完全关注组件渲染过程。我喜欢这一点，因为它在某种程度上遵循了[单一职责原则](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%E5%8D%95%E4%B8%80%E8%81%8C%E8%B4%A3%E5%8E%9F%E5%88%99%EF%BC%9F.md)。它将组件渲染在 web 应用中的屏幕上，但不需要担心路由、状态管理或构建整个前端应用所需的其他工具。
+
+从头开始搭建 React 应用可能会有点复杂和难以承受。但您可以在其中学到很多，当你熟悉之后，您可以使用 `create-react-app` 等工具快速构建一个 React 开发环境。
+
+## React 是如何工作的？
+
+React 不是直接操作浏览器的 DOM，而是在内存中创建一个虚拟 DOM（Virtual DOM），在对浏览器 DOM 进行更改之前，它会在其中进行所有必要的操作。
+
+React 会找出已经进行了哪些更改，并且只更改需要更改的内容。这个过程使用到了 diff 算法，通过 diff 算法可以避免一些不必要的 DOM 操作，从而提高了性能。
+
+> 简单快速过一下，虚拟 DOM 是真实 DOM 的任何一种表示形式（例如 JS 的对象表示）。当我们在虚拟 DOM 树中更改某些内容时，我们会得到一个新的虚拟树。diff 算法比较这两种树（旧树和新树），找出差异，并且只对真实 DOM 进行必要的小改动，以反映虚拟 DOM。这种方式除了性能的提升外，也方便与其他环境集成。
+
+本文是一篇 React 入门，这里不在过多解释。
+
+## 如何使用？
+
+### 引入 CDN
+
+你可以直接在 HTML 文件中练习、编写 React，通过 CDN 引入的方式：
+
+```html
+<!-- 加载 React 和 React DOM 的 UMD 版本 -->
+<script
+  crossorigin
+  src="https://unpkg.com/react@18/umd/react.development.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+></script>
+<!-- 使用 JSX 需要用到的 Babel -->
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+```
+
+一个简单的例子：
+
+```html
+<div id="root"></div>
+
+<script type="text/babel">
+  function Hello() {
+    return <h1>Hello React!</h1>
+  }
+
+  ReactDOM.render(<Hello />, document.getElementById('root'))
+</script>
+```
+
+并使用特殊的 `text/babel` [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)加载您的脚本。
+
+> **Tips**：当然，上述提供的版本仅用于开发环境，您可以使用压缩优化后可用于生产环境的 React 版本。另外，我们为什么要在 `script` 标签上使用 `crossorigin` 属性，这些您都可以在 React 官网中找到。所以看完此文，建议刷一遍文档。
+
+这种使用 React 的方式可以用于测试目的，它无需设置复杂的工作流程即可快速启动。但对于生产，您需要搭建一个 React 环境。
+
+### 使用 `create-react-app`
+
+运行以下命令来创建一个名为 `my-react-app` 的 React 应用：
+
+```bash
+npx create-react-app my-react-app
+```
+
+进入目录，并启动项目：
+
+```bash
+cd my-react-app
+npm start
+```
+
+启动后将启动跳转到浏览器，效果如下：
+
+![react](https://upload-images.jianshu.io/upload_images/18281896-fae94cbc59e6d36a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+找到 `src` 目录下的 `App.js` 文件，随意修改一些内容，浏览器将自动重新刷新为最新内容。
+
+```jsx
+function App() {
+  return <div className='App'>Hello React!</div>
+}
+```
+
+### 使用 Vite
+
+最近在使用 Vite，它旨在为现代 web 项目提供更快、更精简的开发体验。它最初只是作为 [Vue 单文件组件（SFC）](https://vuejs.org/guide/scaling-up/sfc.html)的开发服务器，但现在已经发展成为一个无捆绑的 JavaScript 开发服务器。
+
+这里不过多介绍，我们来看看如何安装 React 环境。
+
+```bash
+npm init vite@latest my-react-app
+```
+
+根据选项选择 react 即可，vite 会为您提供很轻量的 react 环境。
+
+同样的进入目录，安装依赖包，然后启动项目：
+
+```jsx
+cd my-react-app
+npm i
+npm dev
+```
+
+下面我们来看一下 React 的一些基础用法。
+
+> 额外的，您可以使用 [CodePen](https://codepen.io/) 和 [CodeSandbox](https://codesandbox.io/s) 这种在线代码编写平台。快速开发。
+
+## React 渲染 HTML
+
+React 的目标是以多种方式在网页中渲染 HTML。
+
+React 通过使用一个名为 `ReactDOM.render()` 方法。
+
+### render 函数
+
+`ReactDOM.render()` 函数有两个参数，HTML 代码和一个 HTML 元素。
+
+该函数的目的是在指定的 HTML 元素内显示指定的 HTML 代码。
+
+以下将在 `id` 为 `"root"` 的元素内显示一个段落：
+
+```jsx
+ReactDOM.render(<p>Hello</p>, document.getElementById('root'))
+```
+
+> **注意**：元素 `id` 不必称为 `"root"`，但这是标准约定。
+
+### 根节点
+
+根节点是要在其中显示结果的 HTML 元素。它就像一个由 React 管理的内容的容器。
+
+它不必是一个 `<div>` 元素，也不必具有 `id="root"`。
+
+```jsx
+// <main id="app"><main>
+ReactDOM.render(<p>Hallo</p>, document.getElementById('app'))
+```
+
+## React 中引用 DOM 元素
+
+要在 React 组件中访问 DOM 元素：
+
+```jsx
+function App() {
+  const inputEl = useRef(null)
+  const onButtonClick = () => {
+    inputEl.current.focus()
+  }
+  return (
+    <>
+      <input ref={inputEl} type='text' />
+      <button onClick={onButtonClick}>聚焦</button>
+    </>
+  )
+}
+```
+
+使用到 `useRef` 钩子。关于 Hooks 内容可以查阅 [React Hooks](https://github.com/lio-zero/blog/blob/main/React/React%20Hooks.md)。
+
+## React JSX
+
+### 什么是 JSX？
+
+[JSX](https://facebook.github.io/jsx/#sec-intro) 是 JavaScript 的语法扩展，类似 HTML/XML 的结构可以与 JavaScript 一起使用。它允许开发人员使用 HTML 语法组合 JavaScript 组件。这使得有一个清晰而熟悉的语法来定义具有属性的 DOM 树结构成为可能。
+
+虽然它看起来很像 HTML，但实际上它属于一个 JS 文件。由于它是 JavaScript 的一个扩展，除非将其编译成普通 JavaScript，否则浏览器将无法理解它。所以你需要使用一个 JSX 编译器，比如 [Babel](https://babeljs.io/)。
+
+由于我们这里使用了构建工具 Vite 搭建的环境，因此你需要关心需要安装什么依赖，就可以直接在项目中使用 JSX。
+
+### 编写 JSX
+
+JSX 允许我们用 JavaScript 编写 HTML 元素并将它们放置在 DOM 中，而无需任何 `createElement()` 或 `appendChild()` 方法。
+
+JSX 将 HTML 标签转换为 react 元素。
+
+你可以不使用 JSX，但是 JSX 使编写 React 应用变得更容易。
+
+这里有两个例子。第一个使用 JSX，第二个不使用：
+
+```jsx
+// 使用 JSX
+const elem = <h1>我喜欢使用 JSX!</h1>
+ReactDOM.render(elem, document.getElementById('root'))
+
+// 不使用 JSX
+const elem = React.createElement('h1', {}, '我不使用 JSX!')
+ReactDOM.render(elem, document.getElementById('root'))
+```
+
+JSX 是基于 ES6 的 JavaScript 语言的扩展，在运行时被编译为常规的 JavaScript。
+
+### JSX 中的表达式
+
+使用 JSX，您可以在花括号内编写表达式 `{ }`。
+
+表达式可以是 React 变量、属性或任何其他有效的 JavaScript 表达式。JSX 将执行表达式并返回结果：
+
+```jsx
+const elem = <h1>使用 JSX 时，React 的性能提高了{5 + 5} 倍</h1>
+```
+
+### 插入一大段 HTML
+
+要在多行上编写 HTML，请将 HTML 放在括号内：
+
+```jsx
+const elem = (
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript</li>
+  </ul>
+)
+```
+
+### 一个顶级元素
+
+HTML 代码必须包含在一个顶级元素中。
+
+所以如果你需要两个段落，你必须把它们放在一个父元素中。
+
+```jsx
+const elem = (
+  <div>
+    <p>我是一段文字</p>
+    <p>我也是一段文字</p>
+  </div>
+)
+```
+
+如果 HTML 不正确，或者 HTML 缺少父元素，JSX 将抛出错误。这行不通：
+
+```jsx
+const elem = (
+  <p>我是一段文字</p>
+  <p>我也是一段文字</p>
+)
+```
+
+解决此问题的一种“经典”方法是将组件和其他 HTML 元素包装在 `div` 内：
+
+```jsx
+const elem = (
+  <div>
+    <p>我是一段文字</p>
+    <p>我也是一段文字</p>
+  </div>
+)
+```
+
+一种解决方案是返回一个 JSX 元素数组：
+
+```jsx
+const elem = [<p>我是一段文字</p>, <p>我也是一段文字</p>]
+```
+
+另一种解决方案是使用 Fragment（片段）：
+
+```jsx
+const elem = (
+  <Fragment>
+    <p>我是一段文字</p>
+    <p>我也是一段文字</p>
+  </Fragment>
+)
+```
+
+最新的语法可以使用空的 HTML 标签：`<></>` 表示。
+
+```jsx
+const elem = (
+  <>
+    <p>我是一段文字</p>
+    <p>我也是一段文字</p>
+  </>
+)
+```
+
+这将防止不必要地向 DOM 添加额外的节点。
+
+> 推荐：[<> 与 React.Fragment 的区别](https://github.com/lio-zero/blog/blob/main/React/React.Fragment%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
+
+### 元素必须关闭
+
+JSX 遵循 XML 规则，因此必须正确关闭 HTML 元素。
+
+```jsx
+const elem = <input type='text' />
+```
+
+如果 HTML 没有正确关闭，JSX 会抛出错误。
+
+### 属性 `class` = `className`
+
+`class` 属性在 HTML 中是一个常用 的属性，但是由于 JSX 被渲染为 JavaScript，并且 `class` 关键字是 JavaScript 中的保留字，所以你不能在 JSX 中使用它。
+
+改用属性 `className`。
+
+JSX 通过使用 `className` 解决了这个问题。当 JSX 被渲染时，`className` 会将属性转换为 `class` 属性。
+
+```jsx
+const elem = <h1 className='myclass'>Hello React</h1>
+```
+
+### 条件 — `if` 语句
+
+React 支持 `if` 语句，但不支持 JSX。
+
+为了能够在 JSX 中使用条件语句，您应该将 `if` 语句放在 JSX 之外，或者您可以使用三元表达式代替。
+
+在 JSX 代码之外编写 `if` 语句：
+
+```jsx
+const x = 5
+let text = 'Vue'
+if (x < 10) {
+  text = 'React'
+}
+
+const elem = <h1>{text}</h1>
+```
+
+改用三元表达式：
+
+```jsx
+const x = 5
+
+const elem = <h1>{x < 10 ? 'React' : 'Vue'}</h1>
+```
+
+> 推荐一篇文章：[Good advice on JSX conditionals](https://thoughtspile.github.io/2022/01/17/jsx-conditionals/)
+>
+> **注意**：为了在 JSX 中嵌入 JavaScript 表达式，JavaScript 必须用大括号括起来，`{}`。
+
+### JSX 自动转义
+
+为了减轻 XSS 漏洞攻击的风险，JSX 强制在表达式中自动转义。
+
+这意味着您在字符串表达式中使用 HTML 实体时可能会遇到问题。
+
+您希望打印以下内容（`© 2020`）：
+
+```jsx
+<p>{'&copy; 2020'}</p>
+```
+
+但事实并非如此，它将打印 `&copy; 2020`，因为字符串被转义了。
+
+要解决此问题，可以将实体移到表达式之外：
+
+```jsx
+<p>&copy; 2020</p>
+```
+
+或者通过使用一个常量来打印与您需要打印的 HTML 实体相对应的 Unicode 表示：
+
+```jsx
+<p>{'\u00A9 2020'}</p>
+```
+
+### 在 JSX 中添加注释
+
+您可以使用表达式中的普通 JavaScript 注释向 JSX 添加注释：
+
+```jsx
+<p>
+  {/* 注释 */}
+  {
+    // 另一个注释
+  }
+</p>
+```
+
+### 扩展属性
+
+在 JSX 中，一个常见的操作是为属性赋值。
+
+```jsx
+<BlogPost title={data.title} date={data.date} />
+```
+
+你可以通过：
+
+```jsx
+<BlogPost {...data} />
+```
+
+由于 ES6 扩展运算符，`data` 对象的属性将自动用作属性。
+
+表单和样式可往下看。
+
+## React 组件
+
+组件就像返回 HTML 元素的函数。
+
+组件是独立且可重用的代码。它们的用途与 JavaScript 函数相同，但独立工作并返回 HTML。
+
+组件有两种类型，`Class` 组件和 `Function` 组件。
+
+在较旧的 React 代码库中，您可能会发现主要使用 `Class` 组件。现在建议将函数组件与 React 16.8 中添加的 Hooks 一起使用。
+
+创建 React 组件时，组件的名称必须以大写字母开头。
+
+### 类组件
+
+类组件必须包含 `extends React.Component` 语句。此语句创建对 `React.Component` 的继承，并让您的组件访问 `React.Component` 的函数。
+
+该组件还需要一个 `render()` 方法，该方法返回 HTML。
+
+```jsx
+class SayHello extends React.Component {
+  render() {
+    return <h2>Hello React!</h2>
+  }
+}
+```
+
+本文只给出这么一个简单的 `class` 创建组件的示例。
+
+> **Tips**：除了本节内容，本文不在使用类组件。详细类组件用法请查阅官网。
+
+### 函数组件
+
+这是与上面相同的示例，但使用 `Function` 组件创建。
+
+`Function` 组件也返回 HTML，其行为方式与 `Class` 组件非常相似，但 `Function` 组件可以使用更少的代码编写，更易于理解。
+
+```jsx
+function SayHello() {
+  return <h2>Hello React!</h2>
+}
+```
+
+### 渲染组件
+
+现在我们的 React 有一个 `SayHello` 的组件，它返回一个 `<h2>` 元素。
+
+要在您的应用中使用此组件，请使用与普通 HTML 类似的语法：`<SayHello />`
+
+```jsx
+ReactDOM.render(<SayHello />, document.getElementById('root'))
+```
+
+### Props
+
+组件可以作为 `props` 传递，`props` 代表属性。
+
+`props` 类似于函数参数，可以将它们作为属性发送到组件中。
+
+```jsx
+function SayHello(props) {
+  return <h2>Hello {props.language}!</h2>
+}
+
+ReactDOM.render(<SayHello language='React' />, document.getElementById('root'))
+```
+
+### 组件中的组件
+
+我们可以在其他组件内部引用组件：
+
+```jsx
+function SayHello() {
+  return <h2>Hello React!</h2>
+}
+
+function Person() {
+  return (
+    <>
+      <h1>我编写的代码输出的第一段内容</h1>
+      <SayHello />
+    </>
+  )
+}
+
+ReactDOM.render(<Person />, document.getElementById('root'))
+```
+
+### 文件中的组件
+
+React 就是重用代码，建议将组件拆分为单独的文件。
+
+为此，请创建一个带有 `.js` 文件扩展名的新文件并将代码放入其中：
+
+```jsx
+function SayHello() {
+  return <h2>Hello React!</h2>
+}
+
+export default SayHello
+```
+
+> **注意**：文件名必须以大写字符开头。
+
+关于如何编写好一个组件，这里整理了一些的资料：
+
+- [React.Component](https://reactjs.org/docs/react-component.html)
+- [Components and Props](https://reactjs.org/docs/components-and-props.html)
+- [Designing React Components, Best Practices](https://www.thisdot.co/blog/designing-react-components-best-practices)
+- [Compound Components In React](https://www.smashingmagazine.com/2021/08/compound-components-react/)
+- [How Are Function Components Different from Classes?](https://overreacted.io/how-are-function-components-different-from-classes/)
+- [Refactoring a Complex React Component — 5 Best Practices to Write Efficient and Readable Components](https://levelup.gitconnected.com/refactoring-a-complex-react-component-5-best-practices-to-write-efficient-and-readable-components-b0d06f4f22b4)
+- [寫 React Components 該注意的 6 個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e)
+
+## React Props
+
+Props 是传递给 React 组件的参数。
+
+`props` 通过 HTML 属性传递给组件。`props`代表属性。
+
+React Props 就像 JavaScript 中的函数参数和 HTML 中的属性。
+
+要将 `props` 发送到组件中，请使用与 HTML 属性相同的语法：
+
+```jsx
+const elem = <SayHello language='React' />
+```
+
+组件将参数作为 `props` 对象接收：
+
+```jsx
+function SayHello(props) {
+  return <h2>Hello {props.language}!</h2>
+}
+```
+
+### 传递数据
+
+`props` 也是您将数据从一个组件传递到另一个组件的方式，作为参数。
+
+```jsx
+function SayHello(props) {
+  return <h2>Hello {props.language}!</h2>
+}
+
+function Person() {
+  return (
+    <>
+      <h1>我编写的代码输出的第一段内容</h1>
+      <SayHello language='React' />
+    </>
+  )
+}
+
+ReactDOM.render(<Person />, document.getElementById('root'))
+```
+
+如果您有要发送的变量，而不是上面示例中的字符串，则只需将变量名称放在大括号内：
+
+```jsx
+function SayHello(props) {
+  return <h2>Hello {props.language}!</h2>
+}
+
+function Person() {
+  const language = 'React'
+  return (
+    <>
+      <h1>我编写的代码输出的第一段内容</h1>
+      <SayHello language={language} />
+    </>
+  )
+}
+
+ReactDOM.render(<Person />, document.getElementById('root'))
+```
+
+或者如果它是一个对象：
+
+```jsx
+function SayHello(props) {
+  return <h2>Hello {props.article.language}!</h2>
+}
+
+function Person() {
+  const article = { language: 'React', price: 99 }
+  const carInfo = { name: 'Ford', model: 'Mustang' }
+  return (
+    <>
+      <h1>我编写的代码输出的第一段内容</h1>
+      <SayHello language={article} />
+    </>
+  )
+}
+
+ReactDOM.render(<Person />, document.getElementById('root'))
+```
+
+> **注意**：React Props 是只读的！如果你试图改变它们的值，你会得到一个错误。
+
+## React 事件
+
+就像 HTML DOM 事件一样，React 可以根据用户事件执行操作。
+
+React 与 HTML 具有相同的事件。例如：`click`、`change`、`onMouseOver` 等。
+
+### 添加事件
+
+React 事件以 camelCase 语法编写：用 `onClick` 代替 `onclick`。
+
+React 事件处理程序写在花括号内，例如：`onClick={shoot}` 而不是 `onClick="shoot()"`。
+
+```jsx
+<button onClick={shoot}>发射!</button>
+```
+
+将 `shoot` 函数放入 `Football` 组件中：
+
+```jsx
+import ReactDOM from 'react-dom'
+
+function Football() {
+  const shoot = () => alert('好球!')
+
+  return <button onClick={shoot}>发射!</button>
+}
+
+ReactDOM.render(<Football />, document.getElementById('root'))
+```
+
+### 传递参数
+
+要将参数传递给事件处理程序，请使用箭头函数。
+
+```jsx
+function Football() {
+  const shoot = (a: string) => {
+    alert(a) // 球门
+  }
+
+  return <button onClick={() => shoot('球门!')}>发射!</button>
+}
+```
+
+**注意**，不能像这样使用：
+
+```jsx
+<button onClick={shoot('球门')}>发射!</button>
+```
+
+因为 `onClick` 中的表达式将在挂载时执行。一旦应用启动，它将执行并打印"球门"，而不会等待你的点击。
+
+### React 事件对象
+
+事件处理程序可以访问触发函数的 React 事件。
+
+在我们的示例中，事件是 `click` 事件。
+
+```jsx
+function Football() {
+  const shoot = (a, e) => alert(e.type) // click
+
+  return <button onClick={(e) => shoot('球门!', e)}>发射!</button>
+}
+```
+
+### 高级：合成事件
+
+在 React 高级指南中，有一个合成事件章节，以下是它的定义：
+
+> [合成事件](https://reactjs.org/docs/events.html)（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 W3C 规范定义了合成事件。
+
+这里不深入讨论它，但有一点需要注意，v16 和 v17 版本中的合成事件有差异，详细内容请查阅官网。
+
+关于合成事件，这里也整理了一些的资料供大家参考：
+
+- [探索 React 合成事件](https://segmentfault.com/a/1190000038251163)
+- [大佬，怎么办？升级 React17，Toast 组件不能用了](https://zhuanlan.zhihu.com/p/380941094)
+- [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)
+- [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html)
+
+> 您可以先忽略这些链接，可以在其他基础部分看完，在回头了解它们。
+
+### 示例：双击编辑文本
+
+- 双击事件使用 `onDoubleClick`，并使用 `toggle` 状态变量，当双击元素时，显示不同的元素
+- 使用 `onChange()` 事件侦听器来设置 `name` 变量的值
+- 使用 `onKeyDown()` 拦截 `Enter` 或 `ESC` 按键事件并返回显示 `p` 元素
+
+```jsx
+import ReactDOM from 'react-dom'
+import { useState } from 'react'
+
+function App() {
+  const [toggle, setToggle] = useState(true)
+  const [name, setName] = useState('test')
+
+  return (
+    <>
+      {toggle ? (
+        <p
+          onDoubleClick={() => {
+            setToggle(false)
+          }}
+        >
+          {name}
+        </p>
+      ) : (
+        <input
+          type='text'
+          value={name}
+          onChange={(event) => {
+            setName(event.target.value)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === 'Escape') {
+              setToggle(true)
+              event.preventDefault()
+              event.stopPropagation()
+            }
+          }}
+          autoFocus
+        />
+      )}
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+## React 条件渲染
+
+在 React 中，您可以有条件地渲染组件。有几种方法可以做到这一点。
+
+### `if` 语句
+
+我们可以使用 `if` 运算符来决定要渲染哪个组件。
+
+我们有两个组件：
+
+```jsx
+function Car() {
+  return <h1>Car!</h1>
+}
+
+function House() {
+  return <h1>House!</h1>
+}
+```
+
+现在，我们将创建另一个组件，它根据条件选择要渲染的组件：
+
+```jsx
+function Goal(props) {
+  const isGoal = props.isGoal
+  if (isGoal) {
+    return <Car />
+  }
+  return <House />
+}
+
+ReactDOM.render(<Goal isGoal={false} />, document.getElementById('root'))
+```
+
+尝试将 `isGoal` 属性更改为 `true`：
+
+```jsx
+ReactDOM.render(<Goal isGoal={true} />, document.getElementById('root'))
+```
+
+### 逻辑 `&&` 运算符
+
+另一种有条件地渲染 React 组件的另一种方法是使用 `&&` 运算符。
+
+我们可以使用花括号在 JSX 中嵌入 JavaScript 表达式：
+
+```jsx
+import ReactDOM from 'react-dom'
+
+function Garage(props: { cars }) {
+  const cars = props.cars
+  return (
+    <>
+      <h1>车库</h1>
+      {cars.length > 0 && <h2>你的车库里有 {cars.length} 辆车。</h2>}
+    </>
+  )
+}
+
+const cars = ['Ford', 'BMW', 'Audi']
+
+ReactDOM.render(<Garage cars={cars} />, document.getElementById('root'))
+```
+
+如果 `cars.length` 等于 `true`，则将渲染 `&&` 后面的表达式。
+
+尝试清空 `cars` 数组：
+
+```jsx
+const cars = []
+```
+
+### 三元运算符
+
+另一种有条件地渲染元素的方法是使用三元运算符。
+
+```jsx
+condition ? true : false
+```
+
+我们回到之前的例子，如果 `isGoal` 为 `true`，则返回 `Car` 组件，否则返回 `House` 组件：
+
+```jsx
+function Goal(props) {
+  const isGoal = props.isGoal
+  return <>{isGoal ? <Car /> : <House />}</>
+}
+
+ReactDOM.render(<Goal isGoal={false} />, document.getElementById('root'))
+```
+
+### 示例：点击时显示不同的组件
+
+导入 `useState` 钩子，并声明了一个 `state` 变量，根据该变量和条件渲染，实现点击时显示不同的组件：
+
+```jsx
+import ReactDOM from 'react-dom'
+import { useState } from 'react'
+
+const AddTagButton = (props) => <button onClick={props.addTag}>添加标签</button>
+
+const AnotherComponent = () => <p>某些内容</p>
+
+function App() {
+  const [state, setState] = useState('start')
+
+  return (
+    <>
+      {state === 'start' && <AddTagButton addTag={() => setState('add-tag')} />}
+      {state === 'add-tag' && <AnotherComponent />}
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+这种根据条件渲染组件的方式，开发者们称它为动态组件。
+
+关于条件渲染，推荐阅读 [7 Ways of Achieving Conditional Rendering in React](https://blog.openreplay.com/7-ways-of-achieving-conditional-rendering-in-react) 这篇文章。
+
+## React 渲染列表
+
+在 React 中，您将使用某种类型的循环来渲染列表。
+
+JavaScript `map()` 数组方法通常是首选方法。
+
+```jsx
+import ReactDOM from 'react-dom'
+
+function Car(props) {
+  return <li>I have a {props.brand}</li>
+}
+
+function User() {
+  const cars = ['Ford', 'Ferrari', 'Rolls-Royce']
+  return (
+    <>
+      <h1>您有什么车?</h1>
+      <ul>
+        {cars.map((name) => (
+          <Car brand={name} />
+        ))}
+      </ul>
+    </>
+  )
+}
+
+ReactDOM.render(<User />, document.getElementById('root'))
+```
+
+当您在 Vite 中运行此代码时，它会起作用，但您会收到一条报错信息，提示没有为列表项提供 **key**。
+
+### Key
+
+`key` 允许 React 跟踪元素。
+
+在 React diff 算法中，React 会借助元素的 `key` 值来判断，如果一个项目被更新或删除，只有该项目将被重新渲染，而不是整个列表，从而减少不必要的元素重新渲染。
+
+每个兄弟姐妹/同级元素的 `key` 都必须是唯一的。但它们可以在全局范围内复制。
+
+通常，`key` 应该是分配给每个项目的唯一 ID。但作为最后的手段，您可以使用数组索引作为 `key`。
+
+将上述示例进行重构，以包含 `key`：
+
+```jsx
+import ReactDOM from 'react-dom'
+
+function Cars(props) {
+  return <li>I have a {props.brand}</li>
+}
+
+function User() {
+  const cars = [
+    { id: 1, brand: 'Ford' },
+    { id: 2, brand: 'Ferrari' },
+    { id: 3, brand: 'Rolls-Royce' }
+  ]
+  return (
+    <>
+      <h1>您有什么车?</h1>
+      <ul>
+        {cars.map((item) => (
+          <Cars key={item.id} brand={item.brand} />
+        ))}
+      </ul>
+    </>
+  )
+}
+
+ReactDOM.render(<User />, document.getElementById('root'))
+```
+
+## React 表单
+
+与 HTML 一样，React 使用表单允许用户与网页交互。
+
+### 在 React 中添加表单
+
+添加一个与任何其他元素一样具有 React 的表单：
+
+```jsx
+import ReactDOM from 'react-dom'
+
+function MyForm() {
+  return (
+    <form>
+      <label>
+        输入你的名字:
+        <input type='text' />
+      </label>
+    </form>
+  )
+}
+
+ReactDOM.render(<MyForm />, document.getElementById('root'))
+```
+
+这将正常工作，表单将提交，页面将刷新。
+
+但这通常不是我们希望在 React 中发生的事情。我们想阻止这种默认行为，让 React 控制表单。
+
+### 处理表单
+
+处理表单是指当数据改变值或被提交时如何处理数据。
+
+在 HTML 中，表单数据通常由 DOM 处理。在 React 中，表单数据通常由组件处理。
+
+当数据由组件处理时，所有数据都存储在组件状态中。可以通过在 `onChange` 属性中添加事件处理程序来控制更改。
+
+我们可以使用 `useState` 钩子来跟踪每个输入值，并为整个应用提供“单一真实来源”。
+
+```jsx
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function MyForm() {
+  const [name, setName] = useState('')
+
+  return (
+    <form>
+      <label>
+        输入你的名字:
+        <input
+          type='text'
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </label>
+    </form>
+  )
+}
+
+ReactDOM.render(<MyForm />, document.getElementById('root'))
+```
+
+### 提交表单
+
+您可以通过在 `<form>` 的 `onSubmit` 属性中添加事件处理程序来控制提交操作：
+
+```jsx
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function MyForm() {
+  const [name, setName] = useState('')
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    alert(`你输入的名字是: ${name}`)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        输入你的名字:
+        <input
+          type='text'
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </label>
+      <input type='submit' />
+    </form>
+  )
+}
+
+ReactDOM.render(<MyForm />, document.getElementById('root'))
+```
+
+### 多个输入字段
+
+您可以通过向每个元素添加一个 `name` 属性来控制多个输入字段的值。
+
+我们将使用一个空对象初始化我们的状态。
+
+要访问事件处理程序中的字段，请使用 `event.target.name` 和 `event.target.value` 语法。
+
+要更新状态，请在属性 `name` 周围使用方括号 `[]`。
+
+```jsx
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function MyForm() {
+  const [inputs, setInputs] = useState({})
+
+  const handleChange = (event) => {
+    const name = event.target.name
+    const value = event.target.value
+    setInputs((values) => ({ ...values, [name]: value }))
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    console.log(inputs) // {username: 'O.O', age: '20'}
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        输入你的名字:
+        <input
+          type='text'
+          name='username'
+          value={inputs.username || ''}
+          onChange={handleChange}
+        />
+      </label>
+      <label>
+        输入你的年龄:
+        <input
+          type='number'
+          name='age'
+          value={inputs.age || ''}
+          onChange={handleChange}
+        />
+      </label>
+      <input type='submit' />
+    </form>
+  )
+}
+
+ReactDOM.render(<MyForm />, document.getElementById('root'))
+```
+
+我们对两个输入字段使用相同的事件处理函数，我们可以为每个字段编写一个事件处理函数，但这让我们的代码更简洁，是 React 中的首选方式。
+
+### textarea
+
+React 中的 `textarea` 元素与普通 HTML 略有不同。
+
+在 HTML 中，`textarea` 的值是开始标签 `<textarea>` 和结束标签 `</textarea>` 之间的文本。
+
+```html
+<textarea>
+  文本区的内容。
+</textarea>
+```
+
+在 React 中，`textarea` 的值放置在 `value` 属性中。我们将使用 `useState` 钩子来管理 `textarea` 的值：
+
+```jsx
+import { useState } from 'react'
+import ReactDOM from 'react-dom'
+
+function MyForm() {
+  const [textarea, setTextarea] = useState('textarea 的内容位于 value 属性中')
+
+  const handleChange = (event) => {
+    setTextarea(event.target.value)
+  }
+
+  return (
+    <form>
+      <textarea value={textarea} onChange={handleChange} />
+    </form>
+  )
+}
+
+ReactDOM.render(<MyForm />, document.getElementById('root'))
+```
+
+### select
+
+React 中的下拉列表或选择框也有点不同于 HTML。
+
+在 HTML 中，下拉列表中的选定值由 `selected` 属性定义：
+
+```html
+<select>
+  <option value="Ford">Ford</option>
+  <option value="Volvo" selected>Volvo</option>
+  <option value="Fiat">Fiat</option>
+</select>
+```
+
+在 React 中，所选值由 `select` 标签上的 `value` 属性定义：
+
+```jsx
+function MyForm() {
+  const [myCar, setMyCar] = useState('Volvo')
+
+  const handleChange = (event) => {
+    setMyCar(event.target.value)
+  }
+
+  return (
+    <form>
+      <select value={myCar} onChange={handleChange}>
+        <option value='Ford'>Ford</option>
+        <option value='Volvo'>Volvo</option>
+        <option value='Fiat'>Fiat</option>
+      </select>
+    </form>
+  )
+}
+```
+
+通过对 `<textarea>` 和 `<select>` 进行这些细微的更改，React 能够以相同的方式处理所有输入元素。
+
+### value 和 defaultValue
+
+- `value` 属性始终保存字段的当前值
+- `defaultValue` 属性保存创建字段时设置的默认值
+
+当检查 `input.value` 和 `input.getAttribute('value')` 返回一个当前值和一个原始默认值时，这有助于解决常规 DOM 交互的一些奇怪行为。
+
+如果我们希望为组件赋予一个初始值，需要将：
+
+- `value` 替换为 `defaultValue`
+- `checked` 替换为 `defaultChecked`
+
+```html
+<!-- ❌ -->
+<input name="enable" type="checkbox" checked="checked" />
+<!-- ✅ -->
+<input name="enable" type="checkbox" defaultChecked="{true}" />
+```
+
+这里涉及到了受控组件和非受控组件，详细内容请查阅 [React 受控组件和非受控组件](https://github.com/lio-zero/blog/blob/main/React/React%20%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%92%8C%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6.md)。
+
+> 额外的，[Formik](https://github.com/jaredpalmer/formik) 库可以简化所有这些表单处理内容并自动化验证、错误处理等。
+
+## React 路由
+
+Vite 构建工具没有为我们添加路由，我们需要自己手动安装依赖。[React Router](https://github.com/remix-run/react-router) 是最流行的解决方案。
+
+> **Tips**：本文使用 React Router 的最新版本。
+
+React Router 其实有由三个包组成，这里我们要在 web 应用上使用，所以我们安装 `react-router-dom`。
+
+添加 React 路由：
+
+```bash
+npm i react-router-dom
+```
+
+本节写一个简单的示例，在 `src` 文件夹中，我们将创建一个 `pages` 包含多个文件的文件夹：
+
+- `Layout.js`
+- `Home.js`
+- `Blogs.js`
+- `Contact.js`
+- `NotFoundPage.js`
+
+每个文件都将包含一个非常基本的 React 组件。
+
+### 基本用法
+
+现在我们将在我们的 `main.js` 文件中使用我们的路由器。
+
+```jsx
+// main.js
+import ReactDOM from 'react-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import Layout from './pages/Layout'
+import Home from './pages/Home'
+import Blogs from './pages/Blogs'
+import Contact from './pages/Contact'
+import NotFoundPage from './pages/NotFoundPage'
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path='blogs' element={<Blogs />} />
+          <Route path='contact' element={<Contact />} />
+          <Route path='*' element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+我们首先用 `<BrowserRouter>` 包装我们的内容，然后定义一个 `<Routes>`，它充当将在我们的应用中创建的所有单独路由的容器/父级。一个应用可以有多个 `<Routes>`（本示例仅使用一个）。
+
+`<Route>` 用于创建单个路由。它包含两个属性：
+
+- `path` 指定所需组件的 URL 路径。
+- `element` 指定路由应该渲染的组件。
+
+`<Route>` 可以嵌套。第一个 `<Route>` 具有 `/` 组件的路径，并渲染 `Layout` 组件。
+
+嵌套的 `<Route>` 继承并添加到父路由。因此，`blogs` 路径与父路径合并，成为 `/blogs`。
+
+`Home` 组件路由没有路径，但有 `index` 属性。将此路由指定为父路由的默认路由，即 `/`。
+
+设置 `path` 为 `*` 将作为任何未定义 URL 的回退。这对于 404 错误页面是很好的。
+
+### 页面/组件
+
+`Layout` 组件具有 `<Outlet>` 和 `<Link>` 元素。
+
+- `<Outlet>` 渲染当前选择的路由。
+- `<Link>` 用于设置 URL 并跟踪浏览历史记录。
+
+每当我们链接到内部路径时，我们将使用 `<Link>` 而不是 `<a href="">`。
+
+`Layout` 路由是一个共享组件，可以在所有页面上插入公共内容，例如导航菜单。
+
+```jsx
+// Layout.js
+import { Outlet, Link } from 'react-router-dom'
+
+const Layout = () => {
+  return (
+    <>
+      <nav>
+        <ul>
+          <li>
+            <Link to='/'>Home</Link>
+          </li>
+          <li>
+            <Link to='/blogs'>Blogs</Link>
+          </li>
+          <li>
+            <Link to='/contact'>Contact</Link>
+          </li>
+        </ul>
+      </nav>
+      <Outlet />
+    </>
+  )
+}
+
+export default Layout
+```
+
+```jsx
+// Home.js
+const Home = () => <h1>Home</h1>
+
+export default Home
+```
+
+```jsx
+// Blogs.js
+const Blogs = () => <h1>Blog Articles</h1>
+
+export default Blogs
+```
+
+```jsx
+// Contact.js
+const Contact = () => <h1>Contact Me</h1>
+
+export default Contact
+```
+
+```jsx
+// NotFoundPage.js
+const NotFoundPage = () => <h1>404</h1>
+
+export default NotFoundPage
+```
+
+## React CSS
+
+使用 CSS 设置 React 样式的方法有很多，本问将详细介绍三种常用方法：
+
+- 内联样式
+- CSS 样式表
+- CSS 模块
+
+### 内联样式
+
+要使用内联样式属性设置元素的样式，值必须是 JavaScript 对象：
+
+```jsx
+const Header = () => {
+  return (
+    <>
+      <h1 style={{ color: 'plum' }}>Hello Style!</h1>
+      <p>添加一点样式!</p>
+    </>
+  )
+}
+```
+
+不推荐使用这种方式，这会让代码可读性变差。
+
+> **注意**：在 JSX 中，JavaScript 表达式写在花括号内，由于 JavaScript 对象也使用花括号，所以上例中的样式写在两组花括号内 `{{}}`。
+
+#### camelCased 属性名称
+
+由于内联 CSS 是在 JavaScript 对象中编写的，因此带有连字符分隔符的属性，例如 `background-color`，必须使用驼峰式语法编写：
+
+```jsx
+const Header = () => {
+  return (
+    <>
+      <h1 style={{ backgroundColor: 'plum' }}>Hello Style!</h1>
+      <p>添加一点样式!</p>
+    </>
+  )
+}
+```
+
+#### JavaScript 对象
+
+您还可以创建带有样式信息的对象，并在样式属性中引用它：
+
+```jsx
+const Header = () => {
+  const myStyle = {
+    color: 'white',
+    backgroundColor: 'plum',
+    padding: '10px',
+    fontFamily: 'Sans-Serif'
+  }
+
+  return (
+    <>
+      <h1 style={myStyle}>Hello Style!</h1>
+      <p>添加一点样式!</p>
+    </>
+  )
+}
+```
+
+### CSS 样式表
+
+您可以在单独的文件中编写 CSS 样式，只需使用 `.css` 文件扩展名保存文件，然后将其导入您的应用。
+
+```scss
+// index.scss
+body {
+  background-color: plum;
+  color: white;
+  padding: 40px;
+  font-family: Sans-Serif;
+  text-align: center;
+}
+```
+
+在您的应用中导入样式表：
+
+```jsx
+// main.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+
+const Header = () => {
+  return (
+    <>
+      <h1>Hello Style!</h1>
+      <p>添加一点样式!</p>
+    </>
+  )
+}
+
+ReactDOM.render(<Header />, document.getElementById('root'))
+```
+
+### CSS 模块
+
+向应用添加样式的另一种方法是使用 CSS 模块。
+
+CSS 模块对于放置在单独文件中的组件很方便。
+
+模块内的 CSS 仅适用于导入它的组件，您不必担心名称冲突。
+
+创建带有 `.module.css` 扩展名的 CSS 模块，例如：`index.module.css`。
+
+```scss
+// index.module.css
+.bigPlum {
+  color: plum;
+  padding: 40px;
+  font-family: Sans-Serif;
+  text-align: center;
+}
+```
+
+在组件中导入样式表：
+
+```jsx
+import styles from './index.module.css'
+
+const SayHello = () => {
+  return <h1 className={styles.bigPlum}>Hello React!</h1>
+}
+
+export default SayHello
+```
+
+导入组件：
+
+```jsx
+// main.js
+import ReactDOM from 'react-dom'
+import SayHello from './SayHello.js'
+
+ReactDOM.render(<SayHello />, document.getElementById('root'))
+```
+
+> **扩展**：近几年流行的 CSS-in-JS 也是一种编写组件样式的方式。如果感兴趣可以阅读[什么是 CSS-in-JS？](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSS-in-JS.md)以及[使用 Styled Components 编写样式化组件](https://github.com/lio-zero/blog/blob/main/React/%E4%BD%BF%E7%94%A8%20Styled%20Components%20%E7%BC%96%E5%86%99%E6%A0%B7%E5%BC%8F%E5%8C%96%E7%BB%84%E4%BB%B6.md)。
+
+## React SASS
+
+SASS 是一个 CSS 预处理器。
+
+SASS 文件在服务器上执行并将 CSS 发送到浏览器。
+
+> 详细内容可以查看我之前写过的一篇 [SASS 预处理器](https://github.com/lio-zero/blog/blob/master/CSS/SASS%20%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8.md)。
+
+通过在终端中运行以下命令来安装 SASS：
+
+```bash
+npm i sass
+```
+
+现在我们可以在项目中包含 SASS 文件了！
+
+创建 SASS 文件的方式与创建 CSS 文件相同，但 SASS 文件具有文件扩展名 `.scss`
+
+在 SASS 文件中，您可以使用变量和其他 SASS 函数：
+
+```scss
+// index.scss
+$myColor: red;
+
+h1 {
+  color: $myColor;
+}
+```
+
+以与导入 CSS 文件相同的方式导入 SASS 文件：
+
+```jsx
+// main.js
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.scss'
+
+const Header = () => {
+  return (
+    <>
+      <h1>Hello Style!</h1>
+      <p>Add a little style!.</p>
+    </>
+  )
+}
+
+ReactDOM.render(<Header />, document.getElementById('root'))
+```
+
+另外，你可以使用 [Autoprefixer](https://github.com/postcss/autoprefixer)，这样 CSS 样式默认会自动添加前缀。
+
+## 最后
+
+这里附带一张 React 学习路线图，您可以借鉴学习。
+
+以下路线图来自 [React Developer](https://roadmap.sh/react)：
+
+![React 开发路线图](https://upload-images.jianshu.io/upload_images/18281896-55f172a3c20bfe98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 更多资料
+
+- [React 官网](https://reactjs.org/)
+- [Awesome React](https://github.com/enaqx/awesome-react)
+- [86 张脑图，一口气看完 React](https://juejin.cn/post/7085145274200358949) — 一篇不错的脑图，整理的也挺全面
diff --git "a/React/React \345\217\227\346\216\247\347\273\204\344\273\266\345\222\214\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266.md" "b/React/React \345\217\227\346\216\247\347\273\204\344\273\266\345\222\214\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..848dc7a
--- /dev/null
+++ "b/React/React \345\217\227\346\216\247\347\273\204\344\273\266\345\222\214\351\235\236\345\217\227\346\216\247\347\273\204\344\273\266.md"	
@@ -0,0 +1,90 @@
+# React 受控组件和非受控组件
+
+[受控组件](https://reactjs.org/docs/forms.html#controlled-components)（Controlled Component）和[非受控组件](https://reactjs.org/docs/uncontrolled-components.html)（UnControlled Component）取决于表单元素（如 `input`、`textarea`、`select`）是否拥有 `value` 属性。
+
+如果有 `value`，那么它是受控组件。例如：
+
+```jsx
+function App() {
+  return <input type='text' value='Hello React' />
+}
+```
+
+这种情况下，任何用户输入的内容都不会被渲染，因为 React 已经显式声明了 `value` 为 **Hello React**，所以不会再被更改。
+
+我们需要使用 `onChange` 事件来更新 `value`：
+
+```jsx
+import { useState } from 'react'
+
+function App() {
+  const [value, setValue] = useState('Hello React')
+  const handleChange = (e) => setValue(e.target.value)
+  return <input type='text' value={value} onChange={handleChange} />
+}
+```
+
+这里我们可以看出，**受控组件不维护自身内部的值，它只会依据 `props` 进行渲染。**
+
+如果没有 `value`，那么它是非受控组件。例如：
+
+```jsx
+function App() {
+  return <input type='text' />
+}
+```
+
+该 `input` 初始化会渲染空的值，任何用户输入都会被立即渲染，并且同样可以使用 `onChange` 事件监听其变化。
+
+由此得出，非受控组件会在内部维护自己的 `value`，不在由外界决定。
+
+如果想要为非受控组件一个默认值，可以使用 `defaultValue` 属性，该属性只会在初次渲染起作用。
+
+```jsx
+function App() {
+  return <input type='text' defaultValue='Hello React' />
+}
+```
+
+有了默认值的存在，非受控组件在功能上与受控组件几乎一致。
+
+## 为什么选择受控组件？
+
+**React 建议我们始终使用受控组件，这是为什么呢？**
+
+来看一个示例：
+
+```jsx
+function App() {
+  const handleChange = (e) => {
+    console.log(e.target.getAttribute('value'))
+    console.log(e.target.value)
+  }
+
+  return (
+    <input type='text' defaultValue='Hello React' onChange={handleChange} />
+  )
+}
+```
+
+尝试运行它，您会发现，`inputRef.current.value` 会实时更新，但 `inputRef.current.getAttribute('value')` 永远为 `defaultValue` 属性提供的默认值。
+
+而受控组件可以避免这个问题：
+
+```jsx
+import { useState } from 'react'
+
+function App() {
+  const [value, setValue] = useState('Hello React')
+  const handleChange = (e) => {
+    setValue(e.target.value)
+
+    console.log(e.target.getAttribute('value'))
+    console.log(e.target.value)
+  }
+
+  return <input type='text' value={value} onChange={handleChange(e)} />
+}
+```
+
+当改用受控组件的写法后，`input` 的值由 `props` 决定，`value` 会随着状态的更新而变化，所以 `e.target.getAttribute('value')` 也会随之更新。
diff --git "a/React/React \345\243\260\346\230\216\345\274\217.md" "b/React/React \345\243\260\346\230\216\345\274\217.md"
new file mode 100644
index 0000000..c92c020
--- /dev/null
+++ "b/React/React \345\243\260\346\230\216\345\274\217.md"	
@@ -0,0 +1,14 @@
+# React 声明式
+
+您可能遇到过一些文章将 React 描述为构建 UI 的声明式方法。
+
+React 使其“声明式方法”非常受欢迎，因此它与 React 一起渗透到了前端世界。
+
+这并不是一个新概念，但 React 在构建 UI 时比使用 HTML 模板更具声明式：
+
+- 您可以在不直接接触 DOM 的情况下构建 Web 界面。
+- 您可以拥有一个事件系统，而无需与实际的 DOM 事件交互。
+
+声明式的反义词是命令式。命令式方法的一个常见示例是使用 jQuery 或 DOM 事件在 DOM 中查找元素。你确切地告诉浏览器该做什么，而不是告诉它您需要什么。
+
+React 声明式方法为我们抽象了这一点。我们只需要告诉 React 我们想要一个组件以特定的方式呈现出来，并且我们永远不需要与 DOM 交互来在以后引用它。
diff --git "a/React/React \345\261\225\347\244\272\347\273\204\344\273\266\344\270\216\345\256\271\345\231\250\347\273\204\344\273\266.md" "b/React/React \345\261\225\347\244\272\347\273\204\344\273\266\344\270\216\345\256\271\345\231\250\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..a7a64ac
--- /dev/null
+++ "b/React/React \345\261\225\347\244\272\347\273\204\344\273\266\344\270\216\345\256\271\345\231\250\347\273\204\344\273\266.md"	
@@ -0,0 +1,40 @@
+# React 展示组件与容器组件
+
+在 React 中，组件通常分为两大类：**展示组件和容器组件**。
+
+每一个都有其独特的特点。
+
+- 展示组件主要涉及生成一些要输出的标签。它不管理任何类型的状态，除了与展示相关的状态
+- 容器组件主要关注**后端**操作。它可以处理各种子组件的状态。它们可能包含几个展示组件。它们可能与 Redux 交互。
+
+作为一种简化区分的方法，我们可以说展示组件关注外观，容器组件关注数据交互。
+
+例如，这是一个展示组件。它从 `props` 中获取数据，并且只关注于显示一个元素：
+
+```js
+const Users = (props) => (
+  <ul>
+    {props.users.map((user) => (
+      <li key={user.id}>{user.title}</li>
+    ))}
+  </ul>
+)
+```
+
+另一方面，这是一个容器组件。它管理和存储自己的数据，并使用展示组件显示数据。
+
+```js
+function UsersContainer() {
+  const [state, setState] = useState({
+    users: []
+  })
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/todos/1')
+      .then((res) => res.json())
+      .then((users) => setState({ users: users }))
+  }, [])
+
+  return <Users users={state.users} />
+}
+```
diff --git "a/React/React \347\272\257\345\207\275\346\225\260.md" "b/React/React \347\272\257\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..fcdeee2
--- /dev/null
+++ "b/React/React \347\272\257\345\207\275\346\225\260.md"	
@@ -0,0 +1,35 @@
+# React 纯组件
+
+在 JavaScript 中，当一个函数不改变对象而只是返回一个新对象时，它被称为[纯函数](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E7%BA%AF%E5%87%BD%E6%95%B0.md)。
+
+为了被称为纯函数，函数或方法不应产生副作用，并且在使用相同的输入多次调用时应返回相同的输出。
+
+纯函数接受输入并返回输出，而不更改输入或其他任何内容。
+
+其输出仅由参数决定。您可以调用此函数无数次，并且给定相同的参数，输出将始终相同。
+
+React 将这个概念应用于组件。当 React 组件的输出仅依赖于它的 `props` 时，它就是一个纯组件。
+
+所有功能组件都是纯组件：
+
+```js
+const Button = (props) => {
+  return <button>{props.message}</button>
+}
+```
+
+如果类组件的输出仅依赖于 `props`，则它们可以是纯的：
+
+```js
+class Button extends React.Component {
+  render() {
+    return <button>{this.props.message}</button>
+  }
+}
+```
+
+这里需要注意一下 [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) 和 `React.Component` 的区别。
+
+## 更多资料
+
+[7 Architectural Attributes of a Reliable React Component](https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/)
diff --git "a/React/React \347\273\204\345\220\210\347\273\204\344\273\266.md" "b/React/React \347\273\204\345\220\210\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..9da318d
--- /dev/null
+++ "b/React/React \347\273\204\345\220\210\347\273\204\344\273\266.md"	
@@ -0,0 +1,85 @@
+# React 组合组件
+
+在编程中，组合允许您通过组合小而单一的函数来构建更复杂的功能。
+
+例如，考虑使用 `map()` 从初始集合创建一个新数组，然后使用 `filter()` 过滤结果：
+
+```jsx
+const list = ['Express', 'Koa', 'Egg']
+list.map((item) => item).filter((item) => item === 'E') // [ 'E', 'E' ]
+```
+
+在 React 中，组合让您拥有一些非常酷的优势。
+
+您可以创建小而精简的组件，并使用它们在其上构建更多功能。
+
+> 推荐：[JavaScript 组合函数](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E5%90%88%E6%88%90%E5%87%BD%E6%95%B0.md)。
+
+## 创建组件的专用版本
+
+使用外部组件来扩展和专门化更通用的组件：
+
+```jsx
+const Button = (props) => {
+  return <button>{props.text}</button>
+}
+
+const SubmitButton = () => {
+  return <Button text='Submit' />
+}
+
+const LoginButton = () => {
+  return <Button text='Login' />
+}
+```
+
+## 将方法作为 props 传递
+
+例如，组件可以专注于跟踪点击事件，而当点击事件发生时实际发生的情况取决于容器组件：
+
+```jsx
+const Button = (props) => {
+  return <button onClick={props.onClickHandler}>{props.text}</button>
+}
+
+const LoginButton = (props) => {
+  return <Button text='Login' onClickHandler={props.onClickHandler} />
+}
+
+const Container = () => {
+  const onClickHandler = () => {
+    alert('clicked')
+  }
+
+  return <LoginButton onClickHandler={onClickHandler} />
+}
+```
+
+## 使用 children
+
+`props.children` 属性允许您将组件注入其他组件中。
+
+组件需要 `props.children` 在其 JSX 中输出：
+
+```jsx
+const Sidebar = (props) => {
+  return <aside>{props.children}</aside>
+}
+```
+
+并且您可以以透明的方式将更多组件嵌入其中：
+
+```jsx
+<Sidebar>
+  <Link title='First link' />
+  <Link title='Second link' />
+</Sidebar>
+```
+
+> **扩展**：如果您使用过 Vue，那么它类似于其中的[插槽](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20%E6%8F%92%E6%A7%BD.md)的概念。
+
+## 高阶组件
+
+当一个组件接收一个组件作为 props 并返回一个组件时，它被称为高阶组件。
+
+您可以在我的另一篇文章 [React 高阶函数](https://github.com/lio-zero/blog/blob/main/React/React%20%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6.md)中了解更多关于高阶组件的信息。
diff --git "a/React/React \351\253\230\351\230\266\347\273\204\344\273\266.md" "b/React/React \351\253\230\351\230\266\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..89e1f92
--- /dev/null
+++ "b/React/React \351\253\230\351\230\266\347\273\204\344\273\266.md"	
@@ -0,0 +1,62 @@
+# React 高阶组件
+
+您可能熟悉 JavaScript 中的[高阶函数](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0.md)。它是将函数作为参数或将函数作为结果返回的函数。
+
+在 React 中，我们将这个概念扩展到组件，因此当组件接受另一个组件作为输入并返回一个新的组件作为输出时，我们就有了一个高阶组件（HOC）。
+
+通常，高阶组件允许您创建**可组合和可复用**的代码，并且更具**封装性**。
+
+我们可以使用 HOC 将方法或属性添加到组件的状态，例如 [Redux](https://redux.js.org/) 存储。
+
+当您想要增强现有组件、操作状态或 `props` 或其渲染的标签时，可能就需要使用高阶组件。
+
+有一个约定是用 `with` 前缀预先设置高阶组件（这是一个约定，所以它不是强制性的），因此如果您有一个 `Button` 组件，它的 HOC 对应项应该被称为 `withButton`。
+
+让我们创建一个。
+
+最简单的 HOC 示例是返回未更改的组件：
+
+```js
+const withElement = (Element) => () => <Element />
+```
+
+让我们让它变得更有用一点，除了它已经附带的所有 `props`，我们为该元素添加一个 `size` 属性：
+
+```js
+const withGreet = (Element) => (props) => <Element {...props} size='small' />
+```
+
+我们在组件 JSX 中使用这个 HOC：
+
+```js
+const Button = (props) => (
+  <button>
+    Hello {props.value} {props.size}
+  </button>
+)
+
+const GreetedButton = withGreet(Button)
+```
+
+最后，在 App JSX 中渲染 `GreetedButton` 组件：
+
+```js
+function App() {
+  return (
+    <div className='App'>
+      <h1>Hello</h1>
+      <GreetedButton />
+    </div>
+  )
+}
+```
+
+这是一个非常简单的示例，但希望在将这些概念应用于更复杂的场景之前，您能够了解 HOC 的要点。
+
+## 更多资料
+
+关于高阶组件，这里整理了一些的资料供大家参考：
+
+- [React Docs: Higher-Order Components](https://reactjs.org/docs/higher-order-components.html)
+- [hoc 库 recompose](https://github.com/acdlite/recompose) 函数组件和高阶组件的 React 实用工具。（该库已不在积极维护，已经有更好的 Hooks，可以大概了解一下）
+- [深入理解 React 高阶组件](https://zhuanlan.zhihu.com/p/24776678)
diff --git "a/React/\344\275\277\347\224\250 React Hooks \350\216\267\345\217\226\346\225\260\346\215\256\346\227\266\351\201\277\345\205\215 Race Condition.md" "b/React/\344\275\277\347\224\250 React Hooks \350\216\267\345\217\226\346\225\260\346\215\256\346\227\266\351\201\277\345\205\215 Race Condition.md"
new file mode 100644
index 0000000..42844f5
--- /dev/null
+++ "b/React/\344\275\277\347\224\250 React Hooks \350\216\267\345\217\226\346\225\260\346\215\256\346\227\266\351\201\277\345\205\215 Race Condition.md"	
@@ -0,0 +1,99 @@
+# 使用 React Hooks 获取数据时避免 Race Condition
+
+[Race Condition](https://zh.wikipedia.org/wiki/%E7%AB%B6%E7%88%AD%E5%8D%B1%E5%AE%B3) （竞态条件）表示当事件的时序影响一段代码的正确性时，就会发生竞态条件。
+
+假设有这样一个场景，我们在点击带有用户姓名的按钮时假装加载他们的个人资料数据。
+
+为了帮助可视化竞态条件，我们将创建一个 `fakeFetch` 函数，该函数实现 0 到 5 秒之间的随机延迟。
+
+```tsx
+const fakeFetch = (person) =>
+  new Promise((res) =>
+    setTimeout(() => res(`${person}'s data`), Math.random() * 5000)
+  )
+```
+
+## 最初的实现
+
+我们的初始实现将使用按钮来设置当前用户资料。我们使用 `useState` 钩子来实现这一点，并保持以下状态：
+
+- `person` — 用户选择的人
+- `data` — 根据选定的人伪获取加载的数据
+- `loading` — 当前是否正在加载数据
+
+我们还使用了 `useEffect` 钩子，它在 `person` 更改时执行伪获取。
+
+```tsx
+import React, { useState, useEffect } from 'react'
+
+const App = () => {
+  const [data, setData] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [person, setPerson] = useState(null)
+
+  useEffect(() => {
+    setLoading(true)
+    fakeFetch(person).then((data) => {
+      setData(data)
+      setLoading(false)
+    })
+  }, [person])
+
+  return (
+    <>
+      <button onClick={() => setPerson('O.O')}>O.O 简介</button>
+      <button onClick={() => setPerson('D.O')}>D.O 简介</button>
+      <button onClick={() => setPerson('K.O')}>K.O 简介</button>
+      {person && (
+        <>
+          <h1>{person}</h1>
+          <p>{loading ? 'Loading...' : data}</p>
+        </>
+      )}
+    </>
+  )
+}
+export default App
+```
+
+运行上面示例，并单击其中一个按钮，则伪获取将按预期加载数据。
+
+## 命中竞态条件
+
+当我们快速地在用户资料之间切换时，麻烦就来了。考虑到我们的伪获取具有随机延迟，我们很快发现获取结果可能会无序返回。此外，我们选择的个人资料和加载的数据可能不同步。
+
+![数据不同步](https://upload-images.jianshu.io/upload_images/18281896-ea6891aff925ec40.gif?imageMogr2/auto-orient/strip)
+
+这里发生的事情是相对直观的：`useEffect` 钩子中的 `setData(data)` 只有在 `fakeFetch` promise 得到解决后才被调用。无论哪个 promise 最后解决，都将最后调用 `setData`，而不管哪个按钮实际上是最后调用的。
+
+## 取消之前的获取
+
+我们可以通过**取消**任何非最近单击的 `setData` 调用来修复此竞态条件。为此，我们在 `useEffect` 钩子内创建一个布尔变量，并从 `useEffect` 钩子返回一个清理函数，该函数将布尔 `canceld` 变量设置为 `true`。当 promise 解决时，只有当 `canceled` 变量为 `false` 时，才会调用 `setData`。
+
+如果这个描述有点混乱，那么下面的 `useEffect` 钩子的代码示例应该会有所帮助。
+
+```tsx
+useEffect(() => {
+  let canceled = false
+
+  setLoading(true)
+  fakeFetch(person).then((data) => {
+    if (!canceled) {
+      setData(data)
+      setLoading(false)
+    }
+  })
+
+  return () => (canceled = true)
+}, [person])
+```
+
+即使上一个按钮单击的 `fakeFetch` promise 稍后解决，其 `canceled` 的变量也将设置为 `true`，并且不会执行 `setData(data)`。
+
+看看示例如何运行：
+
+![数据同步](https://upload-images.jianshu.io/upload_images/18281896-078bcb5543cbaecc.gif?imageMogr2/auto-orient/strip)
+
+完美，无论我们点击了多少次不同的按钮，我们总是只会看到与最后一次按钮点击相关的数据。
+
+[**示例地址**](https://code.juejin.cn/pen/7144624728882282510)
diff --git "a/React/\344\275\277\347\224\250 React \345\210\233\345\273\272\344\270\200\344\270\252\346\227\240\351\231\220\346\273\232\345\212\250\347\273\204\344\273\266.md" "b/React/\344\275\277\347\224\250 React \345\210\233\345\273\272\344\270\200\344\270\252\346\227\240\351\231\220\346\273\232\345\212\250\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..80565b6
--- /dev/null
+++ "b/React/\344\275\277\347\224\250 React \345\210\233\345\273\272\344\270\200\344\270\252\346\227\240\351\231\220\346\273\232\345\212\250\347\273\204\344\273\266.md"	
@@ -0,0 +1,147 @@
+# 使用 React 创建一个无限滚动组件
+
+无限滚动内容是处理大量数据的常用方法。它使您能够仅加载数据的一小部分，节省带宽并避免大列表带来的渲染速度慢的问题。
+
+在本文中，我们将创建一个 `InfiniteScroll` 组件。
+
+## 设定边界
+
+虽然 `InfiniteScroll` 组件看起来是一项艰巨的任务，但事实证明，组件本身并不需要做很多事情，我们只需要非常清楚它的职责即可。一些现有的解决方案可能会让组件做更多的事情，但我认为最好让组件专门做以下任务：
+
+- 检测用户何时滚动到页面底部
+- 当检测到页面底部时，调用父级提供的函数
+- 不要冗余地调用该函数（即每次触底只调用一次）
+- 如果父函数说我们已经完成了（即没有更多的数据），则不调用该函数
+- 在安装阶段进行初始数据加载（如果用户不希望，也可以不加载）
+
+您可能想知道为什么组件不提供分页，以及它将如何渲染提供的数据。我的想法是，为了使这个组件尽可能灵活，它不应该知道任何关于分页的信息（这将对我们如何获取数据做出很大的假设），它也不应该为其子组件提供任何渲染逻辑。这只是一个辅助组件，以促进我们要进行的交互。
+
+## 定义组件接口
+
+我们可以使用前面提到的列表来定义组件的接口。
+
+```tsx
+type Props = {
+  onBottomHit: () => void
+  isLoading: boolean
+  hasMoreData: boolean
+  loadOnMount: boolean
+}
+
+const InfiniteScroll: React.FC<Props> = ({
+  onBottomHit,
+  isLoading,
+  hasMoreData,
+  children,
+  loadOnMount
+}) => {}
+```
+
+## 填充组件
+
+我们可以通过向窗口 `scroll` 事件添加滚动处理程序来检测触底。我们还需要知道可滚动内容的位置。为了了解我们的内容在哪里，我们可以使用 React ref！
+
+我将把这些放在一起，并解释我们在编写代码之后所做的工作。
+
+```tsx
+type Props = {
+  onBottomHit: () => void
+  isLoading: boolean
+  hasMoreData: boolean
+  loadOnMount: boolean
+}
+
+function isBottom(ref: React.RefObject<HTMLDivElement>) {
+  if (!ref.current) {
+    return false
+  }
+  return ref.current.getBoundingClientRect().bottom <= window.innerHeight
+}
+
+const InfiniteScroll: React.FC<Props> = ({
+  onBottomHit,
+  isLoading,
+  hasMoreData,
+  loadOnMount,
+  children
+}) => {
+  const [initialLoad, setInitialLoad] = useState(true)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (loadOnMount && initialLoad) {
+      onBottomHit()
+      setInitialLoad(false)
+    }
+  }, [onBottomHit, loadOnMount, initialLoad])
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (!isLoading && hasMoreData && isBottom(contentRef)) {
+        onBottomHit()
+      }
+    }
+    document.addEventListener('scroll', onScroll)
+    return () => document.removeEventListener('scroll', onScroll)
+  }, [onBottomHit, isLoading, hasMoreData])
+
+  return <div ref={contentRef}>{children}</div>
+}
+```
+
+我们创建了一个 `isBottom` 函数，它将 React ref 对象作为参数。如果 ref 所指向的 `div` 的底部小于或等于我们窗口的 `innerHeight`，我们就可以知道滚动位置在 `div` 下方了，那么是时候加载更多数据了！
+
+为了将此逻辑附加到窗口的 `scroll` 事件，我们使用了 `useEffect` 钩子。我们确保只在当前没有加载数据、还有更多数据以及实际触底时执行 `onBottomHit` 函数。
+
+我们还确保通过在卸载时从窗口中删除 `scroll` 事件来清除副作用。
+
+最后，我们处理了组件加载时的一个重要边缘情况。组件负载与触底相同的处理可能是更可取的。换句话说，我们希望加载一些初始数据！为此，我们确保让用户指定此行为并相应地采取行动。
+
+## 测试效果
+
+我们可以通过创建一个简单的数字列表来测试 `InfiniteSroll` 组件。它一次显示 100 个数字，最后显示 1000 个数字。我们可以添加 300 ms 的加载延迟以实现效果。
+
+```tsx
+const NUMBERS_PER_PAGE = 100
+
+function App() {
+  const [numbers, setNumbers] = useState<number[]>([])
+  const [loading, setLoading] = useState(false)
+  const [page, setPage] = useState(0)
+
+  const hasMoreData = numbers.length < 1000
+
+  const loadMoreNumbers = () => {
+    setPage((page) => page + 1)
+    setLoading(true)
+    setTimeout(() => {
+      const newNumbers = new Array(NUMBERS_PER_PAGE)
+        .fill(1)
+        .map((_, i) => page * NUMBERS_PER_PAGE + i)
+      setNumbers((nums) => [...nums, ...newNumbers])
+      setLoading(false)
+    }, 300)
+  }
+
+  return (
+    <InfiniteScroll
+      hasMoreData={hasMoreData}
+      isLoading={loading}
+      onBottomHit={loadMoreNumbers}
+      loadOnMount={true}
+    >
+      <ul>
+        {numbers.map((n) => (
+          <li key={n}>{n}</li>
+        ))}
+      </ul>
+    </InfiniteScroll>
+  )
+}
+```
+
+如果我们检查一下实际效果，就会发现它工作得很好：
+
+![无限滚动演示](https://upload-images.jianshu.io/upload_images/18281896-a79a165312f2fc5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+[查看效果](https://codepen.io/lio-zero/pen/NWdVgLV)
diff --git "a/React/\344\275\277\347\224\250 React \350\207\252\345\212\250\350\201\232\347\204\246\345\255\227\346\256\265.md" "b/React/\344\275\277\347\224\250 React \350\207\252\345\212\250\350\201\232\347\204\246\345\255\227\346\256\265.md"
new file mode 100644
index 0000000..f9b204a
--- /dev/null
+++ "b/React/\344\275\277\347\224\250 React \350\207\252\345\212\250\350\201\232\347\204\246\345\255\227\346\256\265.md"	
@@ -0,0 +1,104 @@
+# 使用 React 自动聚焦字段
+
+自动对焦可以让你的应用程序更方便用户使用，有几种方法可以自动聚焦 React 输入框。
+
+要让输入框自动聚焦，最简单的方法是使用 `autoFocus` 属性（注意大小写）：
+
+```html
+<input name="username" type="text" autoFocus />
+```
+
+由于该属性在各个浏览器的工作方式不一致，React 内部实现了一个 [polyfill](https://github.com/facebook/react/issues/11851#issuecomment-351780994)，会在元素挂载时使用 `focus()` 方法。
+
+但这并总是有用，我们需要自己封装一个。
+
+有两种实现方法：
+
+- 使用 `useCallback()`
+- 使用 `useRef()` 和 `useEffect()`
+
+我们会将它编写成一个 Hooks，以便我们可以在项目中重复使用它。
+
+## 使用 `useCallback()`
+
+`useCallback()` 钩子返回一个已记忆的回调函数。它接受两个参数。第一个是要运行的函数，第二个是运行函数所依赖的值数组。
+
+```js
+import { useCallback } from 'react'
+
+const useAutoFocus = () => {
+  const inputRef = useCallback((inputElement) => {
+    if (inputElement) {
+      inputElement.focus()
+    }
+  }, [])
+
+  return inputRef
+}
+
+export default useAutoFocus
+```
+
+注意到 `useCallback` 的第二个参数是一个空数组，这意味着该函数在组件渲染时只运行一次。
+
+当表单组件渲染时，将设置输入框的引用。它执行 `useCallback()` 钩子中的函数，该函数对输入框调用 `focus()`。
+
+## 使用 `useRef()` 和 `useEffect()`
+
+`useEffect()` 钩子会告诉 React，在组件渲染之后，您需要组件执行一些操作。它接受两个参数。第一个是要运行的函数，第二个是一个依赖项数组，其功能与 `useCallback()` 中的相同。
+
+`useRef()` 钩子对函数组件的作用与 `createRef()` 对基于类组件的作用相同。这个钩子创建了一个普通的 JavaScript 对象，您可以将其传递给一个元素，以保持对它的引用。可以通过对象的 `current` 属性访问此引用。
+
+```js
+import { useRef, useEffect } from 'react'
+
+const useAutoFocus = () => {
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  return inputRef
+}
+
+export default useAutoFocus
+```
+
+在上面的代码中，我们创建了对输入框的引用。然后，当组件渲染时，我们使用引用对象的 `current` 属性调用输入框的 `focus()`。
+
+使用示例：
+
+```js
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import useAutoFocus from './hooks/useAutoFocus'
+
+function App() {
+  const emailInput = useAutoFocus()
+
+  return (
+    <>
+      <form>
+        <label>
+          用户
+          <input name='username' type='text' ref={emailInput} />
+        </label>
+        <label>
+          密码
+          <input name='password' type='password' />
+        </label>
+        <button type='submit'>登录</button>
+      </form>
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+## 更多资料
+
+[React Hooks](https://github.com/lio-zero/blog/blob/master/React/React%20Hooks.md)
diff --git "a/React/\344\275\277\347\224\250 Styled Components \347\274\226\345\206\231\346\240\267\345\274\217\345\214\226\347\273\204\344\273\266.md" "b/React/\344\275\277\347\224\250 Styled Components \347\274\226\345\206\231\346\240\267\345\274\217\345\214\226\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..ab80be9
--- /dev/null
+++ "b/React/\344\275\277\347\224\250 Styled Components \347\274\226\345\206\231\346\240\267\345\274\217\345\214\226\347\273\204\344\273\266.md"	
@@ -0,0 +1,327 @@
+# 使用 Styled Components 编写样式化组件
+
+[Styled Components](https://styled-components.com/) 是最流行的 CSS-in-JS 库，可让您编写常规 CSS 并将其附加到 JavaScript 组件。使用它，您可以使用您已经熟悉的 CSS，而不必学习新的样式结构。
+
+本文将介绍 Styled Components 的一些功能，并提供一些示例帮助您理解。
+
+## styles 继承
+
+我们可以通过简单地将样式组件传递给 `styled` 函数来继承样式组件的样式。
+
+```js
+import styled from 'styled-components'
+
+const Div = styled.div`
+  padding: 10px;
+  color: palevioletred;
+`
+```
+
+这里我们有一个 `Div` 样式的组件。让我们创建另一个 `div` 元素来继承该组件的样式。
+
+```js
+const InheritedDiv = styled(Div)`
+  border: 1px solid palevioletred;
+`
+```
+
+`InheritedDiv` 将具有 `Div` 组件的样式以及它自己的样式。
+
+```css
+padding: 10px;
+color: palevioletred;
+border: 1px solid palevioletred;
+```
+
+## 传递 props
+
+`props` 可以传递给样式化组件，就像它们与常规 React 组件（类或函数）一样。这是可能的，因为样式化组件实际上是 React 组件。
+
+```js
+const Button = styled.button`
+  padding: 2px 5px;
+  color: white;
+  border-radius: 3px;
+`
+
+const Div = styled.div`
+  padding: 10px;
+  color: palevioletred;
+  border: 1px solid palevioletred;
+`
+```
+
+styled-components 创建了一个 React 组件，该组件渲染与 `styled` 对象中的属性相对应的 HTML 标签。
+
+`Button` 将创建并渲染 `button` HTML 标签，而 `Div` 将创建并渲染 `div` 标签。它们是组件，所以我们可以向它们传递 `props`。
+
+```html
+<Button color="black">Click Me</Button>
+<Div borderColor="green"></Div>
+```
+
+这将使样式化组件将包含 `color` 的 `props` 传递给 `Button` 组件，并将包含 `borderColor` 的 `props` 传递给 `Div` 组件。然后，我们可以使用一个函数在标签的模板字符串中获取 `props`。
+
+```js
+const Button = styled.button`
+  padding: 2px 5px;
+  color: ${(props) => (props.color ? props.color : 'white')};
+  border-radius: 3px;
+`
+
+const Div = styled.div`
+  padding: 10px;
+  color: palevioletred;
+  border: 1px solid ${(props) =>
+      props.borderColor ? props.borderColor : 'palevioletred'};
+`
+```
+
+标签模板字符串中的函数将接收一个 `props` 参数，它是传递给组件的 `props`。这使我们能够引用传递给 `Button` 和 `Div` 组件的 `color` 和 `borderColor`，从而使样式化组件的样式具有动态性。
+
+## 主题化
+
+styled-components 提供主题化功能，使您能够支持多种外观。
+
+为此，我们将使用 `ThemeProvider` 组件。
+
+```js
+import { ThemeProvider } from 'styled-components'
+```
+
+让我们设置一个主题对象来保存我们想要应用于样式化组件的 CSS 样式。
+
+```js
+const theme = {
+  boderColor: 'plum',
+  color: 'plum',
+  bgColor: 'plum'
+}
+```
+
+主题对象保存 `border-color`、`color` 和 `bgColor` 的颜色。
+
+现在，我们有两个组件：`Button` 和 `Div`。让我们使用它们的主题。
+
+```js
+const Button = styled.button`
+  padding: 2px 5px;
+  color: ${(props) => props.theme.color};
+  border-radius: 3px;
+`
+
+const Div = styled.div`
+  padding: 10px;
+  color: ${(props) => props.theme.color};
+  border: 1px solid ${(props) => props.theme.borderColor};
+`
+```
+
+如您所见，他们正在访问 `props` 中的主题属性。`ThemeProvider` 将主题对象作为 `props` 传递给组件。
+
+最后，我们将渲染 `ThemeProvider` 标签之间的 `Div` 和 `Button` 组件，并将主题对象传递给 `ThemeProvider` 中的主题 `props`。
+
+```html
+<ThemeProvider theme="{theme}">
+  <Div>
+    <Button>Click Me</Button>
+  </Div>
+</ThemeProvider>
+```
+
+`theme` 对象将在他们的 `props` 中提供给 `ThemeProvider` 的孩子。
+
+现在，如果我们更改主题对象中的任何属性值，那么 `ThemeProvider` 将把更改传递给子对象，`Div` 和 `Button` 将相应地更改它们的样式。
+
+## 全局样式
+
+到目前为止，我们所做的大部分样式都是特定于组件的。styled-components 框架还允许您创建应用于所有样式化组件的全局样式。
+
+创建一个 `globalStyles.js` 文件，导入 `createGlobalStyle` 并编写全局样式。
+
+```js
+import { createGlobalStyle } from 'styled-components'
+
+export default createGlobalStyle`
+  html {
+    margin: 0;
+  }
+
+  body {
+    margin: 0;
+  }
+`
+```
+
+接下来，将其导入 `main` 组件中。
+
+```js
+import GlobalStyle from './globalStyles'
+
+function Home() {
+  return (
+    <div>
+      <GlobalStyle />
+      {/* 其他组件 */}
+    </div>
+  )
+}
+```
+
+`GlobalStyle` 会在其余组件之前被渲染。这将在 `GlobalStyle` 之后的所有组件应用全局样式。
+
+## 切换组件类型
+
+样式化组件本质上是动态的。它们可以从创建和渲染一个 HTML 元素更改为另一个。
+
+```js
+const Button = styled.button`
+  padding: 2px 5px;
+  color: ${(props) => props.theme.color};
+  border-radius: 3px;
+`
+```
+
+`Button` 组件将创建并渲染一个按钮元素。在渲染按钮组件时，我们可以通过将 `as` props 传递给 `Button` 组件，并使用我们希望它更改为的任何 HTML 标签名来更改它。
+
+```html
+<Button as="a">Click Me</Button>
+```
+
+这将创建并渲染 `a` 标签。`as="a"` 将其从渲染 `Button` 元素更改为呈现 `a` 标签。
+
+这也可以使用 `withComponent` 方法完成。
+
+```js
+const Button = styled.button`
+  padding: 2px 5px;
+  color: palevioletred;
+  border-radius: 3px;
+`
+
+const Link = Button.withComponent('a')
+```
+
+`Link` 是一个样式化的组件，它将渲染 `a` 标签，并应用 `Button` 的 CSS 样式。
+
+## 样式化常规组件
+
+通过使用组件调用 `styled()` 方法，然后使用包含样式代码的模板祝福词，可以将常规组件转换为样式化组件。
+
+```js
+function Button(props) {
+  return <button className={props.className}>{props.children}</button>
+}
+```
+
+这里我们有一个 `Button` 组件，它渲染一个按钮元素。请注意，我们为按钮元素设置了一个 `className` 属性，并将其值分配给 `props.className`。因此继承的样式将应用于按钮元素。
+
+要将此组件转换为样式化组件，请将其传递给 `styled()` 方法。
+
+```js
+Button = styled(Button)`
+  padding: 2px 5px;
+  border-radius: 3px;
+  border: 1px solid palevioletred;
+`
+```
+
+这将使用模板字符串中的 CSS 样式设置 `Button` 组件中的按钮元素的样式。`Button` 将使用以下 CSS 代码渲染按钮元素。
+
+```css
+padding: 2px 5px;
+border-radius: 3px;
+border: 1px solid palevioletred;
+```
+
+## 指定属性
+
+您可以向样式化组件渲染的 HTML 元素添加属性。
+
+例如，可以创建如下 `Input` 组件：
+
+```js
+const Input = styled.input`
+  font-size: 14px;
+  padding: 2px 5px;
+  border: 1px solid green;
+`
+```
+
+`Input` 将渲染和输入元素。输入元素有不同的类型，包括：
+
+- `text`
+- `number`
+- `password`
+- `email`
+
+这些是在输入元素中使用 `type`属性指定的。要告诉 styled-component 您想要的输入元素类型，请使用 `attrs` 方法。
+
+```js
+const Input = styled.input.attrs({
+  type: 'text'
+})`
+  font-size: 14px;
+  padding: 2px 5px;
+  border: 1px solid green;
+`
+```
+
+这将创建一个 `text` 类型的输入元素。我们还可以向样式化组件添加其他属性。
+
+```js
+const Input = styled.input.attrs({
+  type: 'text',
+  placeholder: '在此处输入账号'
+})`
+  font-size: 14px;
+  padding: 2px 5px;
+  border: 1px solid plum;
+`
+
+const PasswordInput = styled.input.attrs({
+  type: 'password',
+  placeholder: '在此处输入密码'
+})`
+  font-size: 14px;
+  padding: 2px 5px;
+  border: 1px solid plum;
+`
+```
+
+## 与其他 CSS 框架一起使用
+
+最后，您可以将 styled-components 用于任何 CSS 框架。
+
+例如，让我们创建一个具有 Bootstrap 样式的 `Button` 组件。
+
+```js
+const PrimaryButton = styled.button.attrs({
+  className: 'btn btn-prmiary'
+})`
+  outline: none;
+`
+```
+
+我们使用 `attrs` 方法向具有 `btn`、`btn-primary` 值的组件添加 `className` 属性。这将使 Bootstrap 将其样式应用于组件。
+
+其他 CSS 框架也是如此。
+
+```js
+const MatButton = styled.button.attrs({
+  className: 'mat-button'
+})`
+  outline: none;
+`
+```
+
+上面的例子是一个 Material Design 风格的组件。
+
+## 供应商前缀
+
+Styled Components 会自动添加所有需要的供应商前缀，因此您无需担心这个问题。
+
+## 更多资料
+
+- [The styled-components Happy Path](https://www.joshwcomeau.com/css/styled-components/)
+- [Demystifying styled-components](https://www.joshwcomeau.com/react/demystifying-styled-components/)
diff --git "a/React/\344\275\277\347\224\250 Typescript \347\274\226\345\206\231\350\207\252\345\256\232\344\271\211 React useDebounce Hook.md" "b/React/\344\275\277\347\224\250 Typescript \347\274\226\345\206\231\350\207\252\345\256\232\344\271\211 React useDebounce Hook.md"
new file mode 100644
index 0000000..d7accf0
--- /dev/null
+++ "b/React/\344\275\277\347\224\250 Typescript \347\274\226\345\206\231\350\207\252\345\256\232\344\271\211 React useDebounce Hook.md"	
@@ -0,0 +1,109 @@
+# 使用 TypeScript 编写自定义 React useDebounce Hook
+
+在 [React Hooks](https://github.com/lio-zero/blog/blob/main/React/React%20Hooks.md) 中，我们介绍了如何使用，以及它的一些常用内置的 React Hooks 钩子，并在最后一节中，我们了解如何自定义钩子。这使我们可以将组件逻辑抽象为可重用的函数。
+
+在本文中，我们将继续使用 TypeScript 编写一个自定义 `useDebounce` 钩子！
+
+关于防抖，你可以看看我之前写的两篇文章：
+
+- [节流和防抖](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E8%8A%82%E6%B5%81%E5%92%8C%E9%98%B2%E6%8A%96.md)
+- [如何在用户停止输入 JavaScript 后执行函数](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%E7%94%A8%E6%88%B7%E5%81%9C%E6%AD%A2%E8%BE%93%E5%85%A5%20JavaScript%20%E5%90%8E%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0.md)
+
+## 我们的自定义钩子应该如何工作？
+
+我们可以通过多种方式编写钩子，但让它的用法看起来与 `setState` 钩子的用法相对类似：
+
+```ts
+const [value, setValue] = useState<string>('')
+```
+
+不同之处在于，我们希望：
+
+- 指定防抖时间
+- 同时获取当前值和防抖值
+
+所以它应该看起来像这样：
+
+```ts
+const [debouncedValue, value, setValue] = useDebounce<string>('', 1000)
+```
+
+然后，我们可以使用 `useEffect` 钩子根据 `debouncedValue` 更改采取一些操作：
+
+```ts
+const [debouncedValue, value, setValue] = useDebounce<string>('', 1000)
+
+useEffect(() => {
+  // do something
+}, [debouncedValue])
+```
+
+## `useDebounce` 类型
+
+首先，让我们创建 `useDebounce` 函数，并确保正确定义了其参数和返回类型。我们希望确保钩子采用泛型，为 `initialValue`（初始值）、`debouncedValue`（防抖值）和 `value`（当前/最新值）提供类型。
+
+我们的两个参数 `initialValue` 和 `time` 分别是泛型类型和数字类型。
+
+最后，我们的函数将返回三个元素组成的数组。第一个元素 `debouncedValue` 是泛型类型，第二个元素 `value` 也将是泛型类型，最后一个元素将是我们的设置的 `React.Dispatch` 类型。
+
+```ts
+function useDebounce<T>(
+  initialValue: T,
+  time: number
+): [T, T, React.Dispatch<T>] {}
+```
+
+## 编写一个没有防抖的版本
+
+我们的钩子需要保持两种状态：最新/当前值和防抖值。我们将使用 `useState` 钩子来维护这些状态。为了立即制作一个非常简单的版本，我们将使用 `useEffect` 钩子来确定最新值的更改时间，并立即更改防抖值。将来，我们将处理此过程的延迟问题。
+
+```ts
+import { useState, useEffect } from 'react'
+
+function useDebounce<T>(
+  initialValue: T,
+  time: number
+): [T, T, React.Dispatch<T>] {
+  const [value, setValue] = useState<T>(initialValue)
+  const [debouncedValue, setDebouncedValue] = useState<T>(initialValue)
+
+  useEffect(() => {
+    setDebouncedValue(value)
+  }, [value])
+
+  return [debouncedValue, value, setValue]
+}
+```
+
+## 添加防抖函数
+
+接下来可以添加抖动函数了。为此，我们可以在 `useEffect` 中使用 `setTimeout`。这里的关键是从 `useEffect` 返回一个函数来取消超时。这个函数本质上是类组件 `componentWillUnmount` 钩子的等效函数！
+
+```ts
+import React, { useState, useEffect } from 'react'
+
+function useDebounce<T>(
+  initialValue: T,
+  time: number
+): [T, T, React.Dispatch<T>] {
+  const [value, setValue] = useState<T>(initialValue)
+  const [debouncedValue, setDebouncedValue] = useState<T>(initialValue)
+
+  useEffect(() => {
+    const debounce = setTimeout(() => {
+      setDebouncedValue(value)
+    }, time)
+    return () => clearTimeout(debounce)
+  }, [value, time])
+
+  return [debouncedValue, value, setValue]
+}
+```
+
+[演示地址](https://code.juejin.cn/pen/7133521530922729484)
+
+## 最后
+
+对于 React 的 TypeScript 实践，有一个不错的项目 [React TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)，它为经验丰富的 React 开发人员提供 TypeScript 入门的备忘单。
+
+另外，如果你看到英文头疼，有一篇不错的文章 [🔖TypeScript 备忘录：如何在 React 中完美运用？](https://juejin.cn/post/6910863689260204039)，其中作者的一些实际经验和这份备忘单，值得一读。
diff --git "a/React/\344\277\256\345\244\215 React \344\270\255\347\232\204 \342\200\234Cannot read property 'map' of undefined\342\200\235 \351\224\231\350\257\257.md" "b/React/\344\277\256\345\244\215 React \344\270\255\347\232\204 \342\200\234Cannot read property 'map' of undefined\342\200\235 \351\224\231\350\257\257.md"
new file mode 100644
index 0000000..15aaedc
--- /dev/null
+++ "b/React/\344\277\256\345\244\215 React \344\270\255\347\232\204 \342\200\234Cannot read property 'map' of undefined\342\200\235 \351\224\231\350\257\257.md"	
@@ -0,0 +1,161 @@
+# 修复 React 中的 “Cannot read property 'map' of undefined” 错误
+
+这可能是你在开始使用 React 时会遇到的最常见错误之一：
+
+```text
+Cannot read property 'map' of undefined
+```
+
+在这篇文章中，我们将学习如何修复它。
+
+## 为什么会发生这种情况？
+
+**原因**：您尝试 `map` 的变量是 `undefined`。它最终可能是一个数组，但由于 React 的异步特性，当变量为 `undefined` 时，您至少会遇到一次渲染。
+
+以下提供一个示例，其中，我们从 API 获取一些数据，并使用这些数据设置状态。
+
+```jsx
+function MyComponent() {
+  const [data, setData] = useState()
+
+  useEffect(() => {
+    fetch('/api/data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }, [])
+
+  return (
+    <ul>
+      {data.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+这段代码可能看起来不错，但我们的数据获取需要一些时间，React 不会等到数据获取（或任何异步操作）发生后才第一次渲染 JSX。这意味着，在获取数据时，React 正在尝试运行 `data.map(...)`。
+
+因为我们在 `useState` 钩子中没有为 `data` 提供初始值，所以 `data` 为 `undefined`。正如我们从错误消息中所知道的，尝试调用 `undefined` 的 `map` 是有问题的！
+
+## 修复选项一：将变量默认为空数组
+
+第一个快速修复方法对于您的用例来说可能足够了：只需在等待获取数据时将有状态变量默认为数组。例如：
+
+```jsx
+function MyComponent() {
+  // useState 中的空数组
+  const [data, setData] = useState([])
+
+  useEffect(() => {
+    fetch('/api/data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }, [])
+
+  return (
+    <ul>
+      {data.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+其工作的原因是，当数据获取发生时，React 将调用空 `data` 数组上的 `map` 方法。这很好，不会渲染任何内容，也不会出现错误。一旦从 API 调用加载数据，我们的 `data` 状态将被设置，列表将正确渲染。
+
+## 修复选项二：显示加载指示器
+
+上一个修复很简单，但在加载数据之前不显示任何内容可能不是最佳的用户体验。相反，我们可以选择显示加载指示器。有几种方法可以做到这一点，但其中一种更简单的方法是添加一个称为 `loading` 的有状态变量。
+
+```jsx
+function MyComponent() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    fetch('/api/data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) {
+    return <p>正在加载数据...</p>
+  }
+
+  return (
+    <ul>
+      {data.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+这是非常简单和有效的！当数据开始获取时，我们将 `loading` 设置为 `true`。获取完成后，我们将 `loading` 设置为 `false`。注意，我们在 Promise 中使用 `finally` 方法，因为无论获取数据成功还是失败，它都将运行。
+
+## 说到获取失败
+
+我们可能应该处理获取失败的情况。此外，如果 `data` 变量不是数组，我们可以向用户显示错误消息。后一点对于确保我们永远不会尝试访问非数组上的 `map` 属性非常重要，因为它根本不起作用。
+
+```jsx
+function MyComponent() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState()
+
+  useEffect(() => {
+    setLoading(true)
+    fetch('/api/data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+      })
+      .catch((err) => {
+        setError(err)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) {
+    return <p>正在加载数据...</p>
+  }
+
+  if (error || !Array.isArray(data)) {
+    return <p>加载数据时出错!</p>
+  }
+
+  return (
+    <ul>
+      {data.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+现在，我们有了一种非常安全的方法来处理异步操作，而不会出现可怕的 “cannot read property ‘map’ of undefined” 错误！
diff --git "a/React/\345\234\250 React \344\270\255\344\275\277\347\224\250 useContext \345\210\207\346\215\242\346\232\227\343\200\201\344\272\256\344\270\273\351\242\230.md" "b/React/\345\234\250 React \344\270\255\344\275\277\347\224\250 useContext \345\210\207\346\215\242\346\232\227\343\200\201\344\272\256\344\270\273\351\242\230.md"
new file mode 100644
index 0000000..46616e6
--- /dev/null
+++ "b/React/\345\234\250 React \344\270\255\344\275\277\347\224\250 useContext \345\210\207\346\215\242\346\232\227\343\200\201\344\272\256\344\270\273\351\242\230.md"	
@@ -0,0 +1,74 @@
+# 在 React 中使用 useContext 切换暗/亮主题
+
+在 Web 应用程序中，暗/亮主题切换是很常见的。
+
+本文将展示一种使用 React 的 `useContext` 和 `useState` hooks 实现暗/亮模式切换的方法。
+
+这个示例很简单，我们总共只需要编写两个组件：`ThemeProvider` 和 `App`。
+
+您可以提前在这查看效果：[示例地址](https://code.juejin.cn/pen/7133568917863137318)。
+
+首先，我们先定义 `ThemeProvider` 组件几个必要的类型：
+
+- 我们将 `Theme` 定义为 `light` 或 `dark`，并将 `ThemeContext` 定义为具有两个属性的对象：`theme` 和 `toggleTheme`（它们通过 `useContext` 钩子提供给其他组件）。
+- 我们必须确保使用 React 导出 `createContext` 创建 `ThemeContext` 对象。
+
+我们开始编写组件：
+
+我们使用 `useState` 钩子维护 `theme` 状态，并创建一个 `toggleTheme` 函数，该函数将在 `light` 和 `dark` 之间切换状态。
+
+为了简单起见，我们简单地根据 `theme` 状态当前是 `light` 还是 `dark` 来设置文档正文的 `color` 和 `backgroundColor` 样式。最后，我们返回 `ThemeContext.Provider`，其值设置为具有 `theme` 和 `toggleTheme` 属性的对象，并在 `ThemeContext.Provider` 组件中渲染子级。
+
+```ts
+import React, { createContext, useState } from 'react'
+
+type Theme = 'light' | 'dark'
+type ThemeContext = { theme: Theme; toggleTheme: () => void }
+
+const ThemeContext = createContext<ThemeContext>({} as ThemeContext)
+
+const ThemeProvider: React.FC = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>('light')
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light')
+  }
+
+  const color = theme === 'light' ? '#333' : '#FFF'
+  const backgroundColor = theme === 'light' ? '#FFF' : '#333'
+
+  document.body.style.color = color
+  document.body.style.backgroundColor = backgroundColor
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>
+}
+```
+
+在 `App` 组件中，我们使用 `useContext` 钩子来访问 `theme` 字符串和 `toggleTheme` 函数。我们创建了一个可以切换主题的按钮，仅用于 `theme` 来确定向用户显示的内容：**Switch to dark mode** 或 **Switch to light mode**。
+
+```ts
+import React, { useContext } from 'react'
+
+const App: React.FC = () => {
+  const { theme, toggleTheme } = useContext(ThemeContext)
+
+  return (
+    <>
+      <div>Hi friend!</div>
+      <button onClick={toggleTheme}>Switch to {theme === 'light' ? 'dark' : 'light'} mode</button>
+    </>
+  )
+}
+```
+
+接着，我们只需将整个 `App` 包装在 `ThemeProvider` 组件中。当然，我们不需要在实际项目应用层面这样做，我们只需要确保任何需要 `theme` 或 `toggleTheme` 的组件都在我们的 Provider 的子树中即可。
+
+```ts
+import ReactDOM from 'react-dom'
+
+ReactDOM.render(
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>,
+  document.getElementById('app')
+)
+```
diff --git "a/Share/Markdown \350\257\255\346\263\225.md" "b/Share/Markdown \350\257\255\346\263\225.md"
new file mode 100644
index 0000000..de5f697
--- /dev/null
+++ "b/Share/Markdown \350\257\255\346\263\225.md"	
@@ -0,0 +1,392 @@
+# Markdown 语法
+
+Markdown 是一种轻量级且易于使用的语法，它允许人们使用易读易写的纯文本格式编写文档。其文件扩展名为 `.md` 或 `.markdown`。
+
+当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、reddit、掘金和知乎等平台。
+
+本文使用 [Typora](https://typora.io/) 编写，它支持 macOS 、Windows、Linux 平台，且包含多种主题，编辑后直接渲染出效果。支持导出 HTML、PDF、Word、图片等多种类型文件。
+
+> **Tips**：这篇文章是在 2021 年上半年撰写完成的。期间 Typora 已转为收费项目，现在我使用 VS Code 记录日常学到的知识。
+>
+> 另外，有一些 markdown 语法在某些网站可能无法成效，这取决于他们网站的实现，与您编写的 markdown 语法无关。您可以下载一些有名的 markdown 编辑器或其他在线编辑器进行学习。推荐一篇我之前整理的文章：[分享六款免费、优质 Markdown 编辑器](https://zhuanlan.zhihu.com/p/362791233)。
+
+下面开始讲解 markdown 语法，可能不全，最后会提供一些学习 markdown 语法的网站。
+
+## 标题
+
+```markdown
+# h1
+
+## h2
+
+### h3
+
+#### h4
+
+##### h5
+
+###### h6
+
+# Header 1
+
+## Header 2
+```
+
+效果：
+
+![标题](https://upload-images.jianshu.io/upload_images/18281896-524bfe826d774316.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+为了不影响排版，这里使用图片。
+
+## 强调
+
+```markdown
+_italic_
+_italic_
+**bold**
+**bold**
+`code`
+```
+
+效果：
+
+_italic_
+_italic_
+**bold**
+**bold**
+`code`
+
+## 列表
+
+**无序列表**使用星号（**\***）、加号（**+**）或是减号（**-**）作为列表标记
+
+```markdown
+- Item 1
+- Item 2
+
+* Item 1
+* Item 2
+
+- Item 1
+- Item 2
+```
+
+效果：
+
+- Item 1
+- Item 2
+
+- Item 1
+- Item 2
+
+- Item 1
+- Item 2
+
+**有序列表**使用数字并加上 **.** 号来表示
+
+```markdown
+1. Item 1
+2. Item 2
+```
+
+效果：
+
+1. Item 1
+2. Item 2
+
+**列表嵌套**：
+
+```markdown
+- Item 1
+  - Item 1
+```
+
+效果：
+
+- Item 1
+  - Item 1
+
+## 清单
+
+**待办事宜 Todo 列表**：
+
+```markdown
+- [ ] Update the website
+- [x] Write the press release
+```
+
+效果：
+
+- [ ] Update the website
+- [x] Write the press release
+
+![任务列表](https://upload-images.jianshu.io/upload_images/18281896-93e4a024a29bf5ed.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 链接
+
+链接使用方法如下：
+
+```markdown
+[Link name](path)
+
+<path>
+```
+
+效果：
+
+[link](https://github.com/lio-zero)
+
+[https://github.com/lio-zero](https://github.com/lio-zero)
+
+**添加标题**：
+
+```markdown
+[Link name](https://github.com/lio-zero 'title')
+```
+
+鼠标悬停链接上，查看效果：
+
+[我的 GitHub](https://github.com/lio-zero '我的 GitHub')
+
+**其他操作**：
+
+通过变量来设置一个链接，变量赋值在文档末尾进行：
+
+```markdown
+[lio][blog]
+[blog]: https://github.com/lio-zero
+```
+
+效果：
+
+![通过变量来设置一个链接](https://upload-images.jianshu.io/upload_images/18281896-e3a17cbc5f73d676.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+一些编辑器所呈现的效果跟 typora 不一样，这里直接贴图片。
+
+## 图片
+
+```markdown
+![Image alt text](/path/to/img.jpg)
+```
+
+![显示图片](https://upload-images.jianshu.io/upload_images/18281896-66e750497d771bc2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**添加标题**：
+
+```markdown
+![Image alt text](img.jpg 'title')
+```
+
+![添加标题](https://upload-images.jianshu.io/upload_images/18281896-923779045965ebc2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+**直接使用 `<img />` 标签**
+
+```html
+<img src="path" />
+```
+
+如果在 GitHub 上使用图片，您还可以：
+
+```markdown
+![GitHub Logo](/images/logo.png)
+```
+
+将当前的 URL 拼接在 `/images/logo.png` 前面。不只是图片，其他链接也是如此。
+
+> 在这一节先说一下，您可以直接在 markdown 上使用 HTML 标签，在使用内联样式进行美化。
+
+## 语法高亮
+
+使用 **```** 包裹一段代码，并指定一种语言（也可以不指定）。
+
+以下是使语法突出显示的示例：
+
+![代码](https://upload-images.jianshu.io/upload_images/18281896-579edb2101b09601.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+效果：
+
+```markdown
+code fences
+```
+
+```js
+console.log('代码块')
+```
+
+如果您有两段相同的代码，只是某一行可能存在差异，那么可以使用 `diff`，这在 GitHub 上尤其有用。
+
+```diff
+- console.log('Hello');
++ console.log('Hello')
+```
+
+## 区块引用
+
+Markdown 区块引用是在段落开头使用 **>** 符号 ，然后后面紧跟一个**空格**符号
+
+```markdown
+> 这是一个区块引用
+```
+
+效果：
+
+> 这是一个区块引用
+
+另外区块是可以嵌套的，一个 **>** 符号是最外层，两个 **>** 符号是第一层嵌套，以此类推
+
+```markdown
+> 最外层
+>
+> > 第一层嵌套
+```
+
+效果：
+
+> 最外层
+>
+> > 第一层嵌套
+
+## 分割线
+
+使用三个以上的星号、减号、底线生成一个分隔线
+
+```markdown
+---
+---
+
+---
+```
+
+效果：
+
+---
+
+---
+
+---
+
+## 删除线
+
+使用两个波浪线 **~~** 来添加删除线
+
+```markdown
+~~该内容已不再最新版本中使用~~
+```
+
+效果：
+
+~~该内容已不再最新版本中使用~~
+
+## 下划线
+
+```markdown
+<u>带下划线文本</u>
+```
+
+效果：
+
+<u>带下划线文本</u>
+
+## 脚注
+
+脚注是对文本的补充说明。
+
+```markdown
+一段文字[^info]
+```
+
+效果：
+
+![脚注](https://upload-images.jianshu.io/upload_images/18281896-27ee241c04c21fbc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 内容目录
+
+```markdown
+[TOC]
+```
+
+[TOC]
+
+![内容目录](https://upload-images.jianshu.io/upload_images/18281896-20acdcd94067a4d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+有些网站不支持这种模式，渲染效果会有问题，直接贴图片。
+
+## 表格
+
+Markdown 制作表格使用 **|** 来分隔不同的单元格，使用 **-** 来分隔表头和其他行。
+
+```markdown
+| Column 1 Heading | Column 2 Heading |
+| ---------------- | ---------------- |
+| Some content     | Other content    |
+
+| Column 1 Heading | Column 2 Heading |
+| ---------------- | ---------------- |
+| Some content     | Other content    |
+```
+
+效果：
+
+| Column 1 Heading | Column 2 Heading |
+| ---------------- | ---------------- |
+| Some content     | Other content    |
+
+| Column 1 Heading | Column 2 Heading |
+| ---------------- | ---------------- |
+| Some content     | Other content    |
+
+**对齐方式：**
+
+- **-:** 设置内容和标题栏居右对齐。
+- **:-** 设置内容和标题栏居左对齐。
+- **:-:** 设置内容和标题栏居中对齐。
+
+```markdown
+| Column 1 Heading | Column 2 Heading | Column 2 Heading |
+| :--------------- | :--------------: | ---------------: |
+| Some content     |  Other content   |    Other content |
+```
+
+效果：
+
+| Column 1 Heading | Column 2 Heading | Column 2 Heading |
+| :--------------- | :--------------: | ---------------: |
+| Some content     |  Other content   |    Other content |
+
+## 使用表情符号短代码 🌐
+
+使用开始和结束与冒号 **:**，并包括表情符号的名称。
+
+```markdown
+Gone camping! :tent: Be back soon.
+
+That is so funny! :joy:
+```
+
+效果：
+
+Gone camping! ⛺️ Be back soon.
+
+That is so funny! 😂
+
+你可以在下面这些网站上找到所有可用的 Emoji：
+
+- [emojipedia](https://emojipedia.org/)
+- [gist:7360908](https://gist.github.com/rxaviers/7360908)
+- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json)
+- [emoji-cheat-sheet](https://github.com/ikatyang/emoji-cheat-sheet)
+
+## 最后
+
+如果您在 VS Code 上撰写文章的话，可以安装以下扩展：
+
+- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
+- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
+- [markdownlint](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
+- [:emojisense:](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense)
+
+## 更多资料
+
+- [Markdown Guide](https://www.markdownguide.org/)
+- [Writing on GitHub](https://docs.github.com/en/get-started/writing-on-github)
+- [Typora 画流程图、时序图(顺序图)、甘特图](https://www.runoob.com/markdown/md-advance.html) 来自菜鸟教程的 Markdown 高级技巧中的一篇笔记
diff --git "a/Share/\344\272\224\346\254\276\345\237\272\344\272\216\346\265\217\350\247\210\345\231\250\347\232\204\345\234\250\347\272\277\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250.md" "b/Share/\344\272\224\346\254\276\345\237\272\344\272\216\346\265\217\350\247\210\345\231\250\347\232\204\345\234\250\347\272\277\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250.md"
new file mode 100644
index 0000000..327eb86
--- /dev/null
+++ "b/Share/\344\272\224\346\254\276\345\237\272\344\272\216\346\265\217\350\247\210\345\231\250\347\232\204\345\234\250\347\272\277\344\273\243\347\240\201\347\274\226\350\276\221\345\231\250.md"
@@ -0,0 +1,53 @@
+# 五款基于浏览器的在线代码编辑器
+
+日常开发中，为了快速开发、调试，或者是分享一段代码片段，我们会选择一些即时开发的在线代码编辑器。
+
+本文将介绍几款不错的在线代码编辑器。
+
+## CodeSandbox
+
+[CodeSandbox](https://link.zhihu.com/?target=https%3A//codesandbox.io/) 一个即时可用的，功能齐全的在线 IDE，可在具有浏览器的任何设备上进行 Web 开发。使你能够快速启动新项目并快速创建原型。使用 CodeSandbox，你可以轻松创建 Web 应用程序，尝试代码，测试想法并共享创建的内容。
+
+![图示](https://pic3.zhimg.com/v2-65917deb334b7b151751fe085858a00e_r.jpg)
+
+![图示](https://pic2.zhimg.com/v2-fc70af5eda7493c5e904a08c31be91b9_r.jpg)
+
+![图示](https://pic4.zhimg.com/v2-da0f1f779f86c75bc1c1a31320ab8597_r.jpg)
+
+## CodePen
+
+[CodePen](https://link.zhihu.com/?target=https%3A//codepen.io/trending) 是一个在线的前端开发环境。它的核心是允许你在浏览器中编写代码，并在构建时查看结果。对于任何技能的开发人员来说，这是一个有用的、解放性的在线代码编辑器，特别是对学习编码的人来说。CodePen 主要关注 HTML、CSS、JavaScript 等前端语言，以及转换成这些东西的预处理语法。
+
+![图示](https://pic1.zhimg.com/v2-07bd8313599836bc901035eac3dcf5cc_r.jpg)
+
+![图示](https://pic4.zhimg.com/v2-3a5405efdf0e5810831082cf1a58b5c3_r.jpg)
+
+添加相关依赖：
+
+![图示](https://pic2.zhimg.com/v2-2d2d17692eb351435b7a83a6cfd2dff1_r.jpg)
+
+## JSFiddle
+
+[JSFiddle](https://link.zhihu.com/?target=https%3A//jsfiddle.net/) 是一个在线的 shell 编辑器，可在线编辑和测试 HTML、CSS、JavaScript 代码片段。在 JSFiddle 编辑的代码，可以保存，也可分享给其他人，还可嵌入到网站中。
+
+![图示](https://pic1.zhimg.com/v2-e0a653027d944cfe303a46c92fad4678_r.jpg)
+
+## JS Bin
+
+[JS Bin](https://link.zhihu.com/?target=http%3A//js.jirengu.com/%3Fhtml%2Coutput) 是一个开放源代码的协作 Web 开发调试工具。你可以使用它来编写代码并使其既实时保存，又实时呈现完整预览，通过共享和编辑 URL 来帮助调试其他人的 JavaScript，HTML 或 CSS。
+
+![图示](https://pic3.zhimg.com/v2-5079e8f1fb168d7550162cedc36f033a_r.jpg)
+
+## 码上掘金
+
+[码上掘金](https://code.juejin.cn/) 问世不久，它是稀土掘金开发的一款在线代码编辑平台。
+
+![图示](https://upload-images.jianshu.io/upload_images/18281896-e46ab4fa736696d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+风格类似 CodePen：
+
+![图示](https://upload-images.jianshu.io/upload_images/18281896-045205d8c8f971cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 最后
+
+还有其他很多非常优秀的在线代码编辑平台，例如：[glitch](https://glitch.com/)、[replit](https://replit.com/) 和 [StackBlitz](https://stackblitz.com/) 等。
diff --git "a/SourceCode/co \346\272\220\347\240\201\350\247\243\350\257\273.md" "b/SourceCode/co \346\272\220\347\240\201\350\247\243\350\257\273.md"
new file mode 100644
index 0000000..7a26b8d
--- /dev/null
+++ "b/SourceCode/co \346\272\220\347\240\201\350\247\243\350\257\273.md"	
@@ -0,0 +1,77 @@
+# co 源码解读
+
+我相信您在很多文章中都有看到过说 `async` 是 Generator 的语法糖，**那是为什么呢？**
+
+Generator 在运行过程中的每一步 `yield` 都需要通过 `gen.next` 来完成，而 `async/await` 简化了这种操作。
+
+而今天要将的 co 库，它是一个基于 Generator 的流控制。更容易理解的说法是，它是 Generator 的一个自动执行器，通过递归自动处理过程中的每一步 `yield`，遇到错误就报错终止。
+
+使用 Co、Promise 和 Generator，我们可以实现一个类似 `async/await` 行为的异步函数。
+
+当然，co 库我们也可以自己实现，感兴趣的话可以看看我之前写的一篇[实现 async/await](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%20async%E3%80%81await.md)。
+
+co 源码地址 👉[co/index.js](https://github.com/tj/co/blob/master/index.js#L43-L106)，它的代码量很少，且大部分代码都是一些类型判断和数据转换的过程，这里我们截取其中的核心 `co` 函数，看看它是如何实现的。
+
+```js
+function co(gen) {
+  var ctx = this // 保存当前环境上下文的 this
+  var args = slice.call(arguments, 1) // 保存除了 gen 的所有参数
+
+  return new Promise(function (resolve, reject) {
+    // 如果 gen 传入的是一个函数，则调用 gen 函数并保存返回值
+    if (typeof gen === 'function') gen = gen.apply(ctx, args)
+    // 如果不存在返回值或者返回值的 next 不是一个函数，则直接返回 gen
+    if (!gen || typeof gen.next !== 'function') return resolve(gen)
+    // 先执行一下成功回调
+    onFulfilled()
+
+    // 成功的回调
+    function onFulfilled(res) {
+      var ret // 用来保存 gen.next 的返回值
+      try {
+        ret = gen.next(res)
+      } catch (e) {
+        return reject(e)
+      }
+      next(ret) // 把返回结果传入到 next 函数中
+      return null
+    }
+
+    // 失败的回调
+    function onRejected(err) {
+      var ret
+      try {
+        ret = gen.throw(err)
+      } catch (e) {
+        return reject(e)
+      }
+      next(ret)
+    }
+
+    // 获取 generator 中的下一个值，并返回一个 promise
+    function next(ret) {
+      // 如果 done 为 true，则表示已经执行完了，直接 resolve(ret.value)
+      if (ret.done) return resolve(ret.value)
+      // 否则就把 ret.value 的返回值转换成 promise
+      var value = toPromise.call(ctx, ret.value)
+      // 转换成功后调用 then 方法继续执行 onFulfilled 和 onRejected 函数
+      if (value && isPromise(value)) return value.then(onFulfilled, onRejected)
+      // 如果返回值类型不对则直接报错
+      return onRejected(
+        new TypeError(
+          'You may only yield a function, promise, generator, array, or object, ' +
+            'but the following object was passed: "' +
+            String(ret.value) +
+            '"'
+        )
+      )
+    }
+  })
+}
+```
+
+它主要是通过在两个回调（`onFulfilled` 和 `onRejected`）函数中执行 `next` 函数。
+
+在 `next` 函数中通过 `value.then` 的方式在次执行两个回调，形成一个闭环。
+
+一步步的自动执行所有的 `gen.next`，在 `ret` 的 `done` 为空的情况下跳出函数。
diff --git "a/SourceCode/dotenv \346\272\220\347\240\201\350\247\243\350\257\273.md" "b/SourceCode/dotenv \346\272\220\347\240\201\350\247\243\350\257\273.md"
new file mode 100644
index 0000000..5644c13
--- /dev/null
+++ "b/SourceCode/dotenv \346\272\220\347\240\201\350\247\243\350\257\273.md"	
@@ -0,0 +1,145 @@
+# dotenv 源码解读
+
+[dotenv](https://github.com/motdotla/dotenv) 是一个方便管理环境变量的库，用于将环境变量从 `.env` 文件加载到 `process.env` 中。
+
+我们将其导入到项目入口文件的开头：
+
+```js
+dotenv.config()
+```
+
+当项目启动时，dotenv 将 `.env` 文件中的环境变量加载到运行时的环境中，可以使用 `process.env` 去获取。
+
+这样可以帮助我们将环境变量与应用程序代码分离，更容易地进行环境配置和管理，从而提高环境变量的管理效率和应用程序的安全性和可维护性。
+
+下面我们来看看 dotenv 是如何实现将 `.env` 的环境变量添加到 `process.env` 上的。
+
+## 源码分析
+
+dotenv 的源码主要包括以下三个部分：
+
+- 加载 `.env` 文件
+- 解析 `.env` 文件中的变量
+- 将解析出的变量加载到 `process.env` 中
+
+通过查看 [`lib/main.js`](https://github.com/motdotla/dotenv/blob/master/lib/main.js) 文件，我们可以发现它只导出了两个函数：`config` 和 `parse`。
+
+我们先来看一下源码：
+
+```js
+// 简化后
+const path = require('path')
+const fs = require('fs')
+
+function _resolveHome(envPath) {
+  return envPath[0] === '~'
+    ? path.join(os.homedir(), envPath.slice(1))
+    : envPath
+}
+
+function config(options) {
+  // 获取 .env 文件的绝对路径
+  let dotenvPath = path.resolve(process.cwd(), '.env')
+  let encoding = 'utf8'
+  const debug = Boolean(options && options.debug)
+  const override = Boolean(options && options.override)
+
+  // 可选操作
+  if (options) {
+    // 自定义 .env 文件的路径
+    if (options.path != null) {
+      dotenvPath = _resolveHome(options.path)
+    }
+    // 自定义 .env 文件的编码方式，默认使用 utf8
+    if (options.encoding != null) {
+      encoding = options.encoding
+    }
+  }
+
+  try {
+    // Specifying an encoding returns a string instead of a buffer
+    // 使用 parse 函数将读取到的 key-value 解析为对象，并返回
+    const parsed = parse(fs.readFileSync(dotenvPath, { encoding }))
+
+    /**
+     * 遍历对象，判断 process.env 对象是否已存在相同的 key（环境变量）
+     * - 不存在则将其添加到 process.env 中
+     * - 存在则不添加到 process.env 中，但如果用户传入可选参数 options.override 为 true，那么将覆盖已存在的环境变量
+     */
+    Object.keys(parsed).forEach(function (key) {
+      if (!Object.prototype.hasOwnProperty.call(process.env, key)) {
+        process.env[key] = parsed[key]
+      } else {
+        if (override === true) {
+          process.env[key] = parsed[key]
+        }
+
+        if (debug) {
+          // ...
+        }
+      }
+    })
+
+    return { parsed }
+  } catch (e) {
+    // ...
+  }
+}
+```
+
+> 这里省略了一些细节，感兴趣可自行了解。
+
+`parse` 函数则用于将 `.env` 文件中的内容解析为键值对，并将它们存储在对象中返回。
+
+```js
+const LINE =
+  /(?:^|^)\s*(?:export\s+)?([\w.-]+)(?:\s*=\s*?|:\s+?)(\s*'(?:\\'|[^'])*'|\s*"(?:\\"|[^"])*"|\s*`(?:\\`|[^`])*`|[^#\r\n]+)?\s*(?:#.*)?(?:$|$)/gm
+
+function parse(src) {
+  const obj = {}
+
+  // Convert buffer to string
+  let lines = src.toString()
+
+  // Convert line breaks to same format
+  lines = lines.replace(/\r\n?/gm, '\n')
+
+  let match
+  while ((match = LINE.exec(lines)) != null) {
+    const key = match[1]
+
+    // Default undefined or null to empty string
+    let value = match[2] || ''
+
+    // Remove whitespace
+    value = value.trim()
+
+    // Check if double quoted
+    const maybeQuote = value[0]
+
+    // Remove surrounding quotes
+    value = value.replace(/^(['"`])([\s\S]*)\1$/gm, '$2')
+
+    // Expand newlines if double quoted
+    if (maybeQuote === '"') {
+      value = value.replace(/\\n/g, '\n')
+      value = value.replace(/\\r/g, '\r')
+    }
+
+    // Add to object
+    obj[key] = value
+  }
+
+  return obj
+}
+```
+
+`parse` 函数基本上每行都有注释，dotenv 文档也解释了 parse 解析遵循的规则：[What rules does the parsing engine follow?](https://github.com/motdotla/dotenv#what-rules-does-the-parsing-engine-follow)。
+
+## 总结
+
+我们总结一下这两个函数所做的工作：
+
+- 首先，获取 `.env` 文件路径。（这里忽略 `path`、`debug`、`encoding`、`override` 的解释）
+- 接着，使用 `fs` 模块读取 `.env` 文件中的内容，并将其传递给 `parse` 函数。`parse` 函数会将 `.env` 文件中的内容解析为键值对形式的对象。（具体解释，请看上面代码部分注释）
+- 最后，`config` 函数将解析出的变量附加到 `process.env` 中。
diff --git "a/SourceCode/flexible.js \346\272\220\347\240\201\350\247\243\350\257\273.md" "b/SourceCode/flexible.js \346\272\220\347\240\201\350\247\243\350\257\273.md"
new file mode 100644
index 0000000..4efca85
--- /dev/null
+++ "b/SourceCode/flexible.js \346\272\220\347\240\201\350\247\243\350\257\273.md"	
@@ -0,0 +1,82 @@
+# flexible.js 源码解读
+
+flexible.js 是移动端的一种使用 rem 适配方案。
+
+源码相对简单，需要知道的前置知识：
+
+- 使用 `rem` 作为单位，因为 `rem` 是一个相对单位，它相对于根元素的 `font-size`，页面元素的大小计算都与根元素进行换算。（默认浏览器的大小 16px）
+- `window.devicePixelRatio` 它将返回当前显示设备的物理像素分辨率与 CSS 像素分辨率之比，也就是设备像素比（DPR）。通过设备屏幕的 DPR，自动设置最合适当前设备的高清缩放。
+
+[源码地址](https://github.com/amfe/lib-flexible/blob/2.0/index.js)。
+
+这里需要解读的代码量相对较少，我直接在代码内进行注释：
+
+```js
+;(function flexible(window, document) {
+  // 获取根元素
+  var docEl = document.documentElement
+  // 获取设备像素比
+  var dpr = window.devicePixelRatio || 1
+
+  // 调整 body 字体大小，也就是子元素的默认字体大小都继承自 body
+  function setBodyFontSize() {
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + 'px'
+    } else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize)
+    }
+  }
+
+  setBodyFontSize()
+
+  // set 1rem = viewWidth / 10
+  // 也就是 1rem 等于视口/屏幕可视区域宽度的 1/10，将宽度分割为十等分
+  // 例如：iphone 6 的屏幕宽度为 375px，因此 375 / 10 = 37.5px = 1rem
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 10
+    docEl.style.fontSize = rem + 'px'
+  }
+
+  setRemUnit()
+
+  // 页面调整时重置 rem
+  window.addEventListener('resize', setRemUnit)
+  // pageshow 事件在每次加载页面时触发（包括后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发）
+  window.addEventListener('pageshow', function (e) {
+    // persisted 属性表示网页是否是来自缓存
+    if (e.persisted) {
+      setRemUnit()
+    }
+  })
+
+  // 检测是否支持 0.5px，解决 1px 在高清屏多像素问题
+  if (dpr >= 2) {
+    var fakeBody = document.createElement('body')
+    var testElement = document.createElement('div')
+    testElement.style.border = '.5px solid transparent'
+    fakeBody.appendChild(testElement)
+    docEl.appendChild(fakeBody)
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines')
+    }
+    docEl.removeChild(fakeBody)
+  }
+})(window, document)
+```
+
+相信整体看下来，您已经清楚了 flexible.js 的工作方式。
+
+另外，如果使用到了 rem 适配方案，推荐阅读[手机端页面自适应解决方案—rem 布局进阶版（附源码示例）](https://www.jianshu.com/p/985d26b40199?u_atoken=6f66415f-631b-4cd1-bd8c-5731dd1a859c&u_asession=01fvkFYMKnBoEy2E8G8BFbIn85xGPgM31gvh_adnUM1w8c3hYlNQpqbjZ-wQfizXZpX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K8zLRMGNR49ySM19OxyvpgyMKWrbBzYAhXhkL4v5_cjQmBkFo3NEHBv0PZUm6pbxQU&u_asig=05_XdN3PuBKh5kzXoHuxuBPybAeiXsANjpMmnnryRPi86-6eF8eCqMc1OqbStFqG6qPSBFYaxdJuhr1owQkP3-BqBhVMH0EMxjsAVh8Gb3q-x0b_RDAlipzbVghLgnzys8_3xW5SWZCLuPu3m8ofI4lT30AnlbXisUC4pcfY7LfMX9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzRH3sFyUHmRo6b8qI5NgOwvy7cq83-wFqfkvvwL4d3Ewdf9JIAkyKervFWgmMgV8j-3h9VXwMyh6PgyDIVSG1W-6p5luVNYr4n8BYf4nuWlzL6GwjCufiNkuwxPu3TW8JRaFEjRJqyCA1ysRwX2uVxpTVqEilRH0ZED7dJnEnXMjmWspDxyAEEo4kbsryBKb9Q&u_aref=gsYwJ%2BPjOV6iwFB%2BmX%2BRbnMI4gg%3D)。
+
+## 最后
+
+推荐阅读一下有关 CSS 单位的知识：[CSS 单位及其需要注意的地方](https://github.com/lio-zero/blog/blob/master/CSS/CSS%20%E5%8D%95%E4%BD%8D%E5%8F%8A%E5%85%B6%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9.md)。
+
+如今，视口单位已经得到了很好的支持，且能很好的解决横屏问题，比较推荐使用。
+
+以下在推荐几篇移动端适配相关的文章：
+
+- [前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配](https://juejin.cn/post/6844903935568789517)
+- [移动端适配总结](https://juejin.cn/post/6844903734347055118#heading-14)
+- [面试官：你了解过移动端适配吗？](https://juejin.cn/post/6844903631993454600)
+- [记一次移动端使用 rem 的兼容性问题](https://juejin.cn/post/6844903798436003854)
diff --git "a/SourceCode/nextTick \345\256\236\347\216\260\345\216\237\347\220\206.md" "b/SourceCode/nextTick \345\256\236\347\216\260\345\216\237\347\220\206.md"
new file mode 100644
index 0000000..f6c0bdb
--- /dev/null
+++ "b/SourceCode/nextTick \345\256\236\347\216\260\345\216\237\347\220\206.md"	
@@ -0,0 +1,167 @@
+# nextTick 实现原理
+
+Vue [`nextTick`](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20nextTick.md) 的实现基于 [JS 的运行机制](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6%20%E2%80%94%20%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%88Event-Loop%EF%BC%89.md)，通过创建一个异步任务，`nextTick` 便可达到在同步任务后执行的目的。
+
+## Vue 2 nextTick
+
+Vue 2.6 nextTick 源码地址 [src/core/util/next-tick.js](https://github.com/vuejs/vue/blob/2.6/src/core/util/next-tick.js)。
+
+源码做了两个操作：
+
+- 环境判断
+- nextTick 实现
+
+### 环境判断/嗅探环境
+
+这一步主要是判断使用哪个异步 API。依次判断：
+
+- Promise 的 `then`
+- `MutationObserver`
+- `setImmediate`
+- `setTimeout`
+
+这里不贴代码了，太长。详细代码查看 [core/util/next-tick.js](https://github.com/vuejs/vue/blob/2.6/src/core/util/next-tick.js#L13-L85)。
+
+按这个优先级顺序判断是因为 `microtask` 的优先级高，能确保队列中的微任务在一次事件循环前被执行完毕。vue 又考虑到了兼容性的问题，做了 `microtask` 向 `macrotask` 的降级方案。
+
+> **Tips**：这个队列可能是 `microTask` 队列，也可能是 `macroTask` 队列。Promise 的 `then` 和 `MutationObserver` 属于微任务队列，而 `setImmediate` 和 `setTimeout` 属于宏任务队列。
+
+依次检测它们是否存在，如果存在就使用它，以此来确定回调函数队列是以哪个 API 来异步执行。
+
+### nextTick()
+
+无论是 `Vue.nextTick()` 或 `this.$nextTick()` 都是调用 `nextTick()` 方法。
+
+`nextTick` 的主要逻辑是，将传入的函数推入到一个全局的 `callbacks` 队列中，等待下一个任务队列时遍历 `callbacks`，执行相应的回调函数。
+
+`nextTick` 的大致实现如下：
+
+```js
+let pending = false
+
+// 存放需要异步调用的任务
+const callbacks = []
+
+function flushCallbacks() {
+  pending = false
+  // 循环执行队列
+  const copies = callbacks.slice(0)
+  // 清空队列
+  callbacks.length = 0
+  for (let i = 0; i < copies.length; i++) {
+    copies[i]()
+  }
+}
+
+function nextTick(cb) {
+  // 这里减少了一些判断，详细内容请看源码
+  callbacks.push(cb)
+
+  // 根据 pending 来判断当前是否要执行 timerFunc
+  if (!pending) {
+    pending = true
+
+    // 这里会调用第一步环境判断里的异步 API，一般都是 Promise，在源码中为 timerFunc
+    // 所以我们使用 Promise 的 then 方法，在下一个微任务队列中把函数全部执行
+    Promise.resolve().then(flushCallbacks)
+  }
+}
+```
+
+测试：
+
+```js
+nextTick(() => console.log(1))
+nextTick(() => console.log(2))
+nextTick(() => console.log(3))
+
+console.log(4)
+
+// 4 1 2 3
+```
+
+第一次调用 `nextTick` 时，`then` 已经运行，但 `flushCallbacks` 还没执行。
+
+第二、三次会推入到 `callbacks` 队列中，接着执行同步函数，打印 4。
+
+此时调用栈清空了，浏览器开始检查微任务队列，发现了 `flushCallbacks` 方法，执行它。
+
+此时 `callbacks` 里的 3 个函数被依次执行。
+
+从示例看来，其实理解了事件循环，也很好理解吧。
+
+## Vue 3 nextTick
+
+Vue 3 `nextTick` 核心逻辑不变，也是基于事件循环，只不过增加了几个专门维护队列的方法。
+
+以下是 nextTick 的大致实现思路，其中简化了一些操作，核心实现不变。源码地址 👉 [`core/packages/runtime-core/src/scheduler.ts`](https://github.com/vuejs/core/blob/main/packages/runtime-core/src/scheduler.ts)。
+
+首先，肯定是从 `nextTick` 函数入手：
+
+```ts
+const p = Promise.resolve()
+
+// 利用 Promise 的 then 方法，在下一个微任务队列中把函数全部执行
+function nextTick(fn) {
+  return fn ? p.then(fn) : p
+}
+```
+
+可以看出 `nextTick` 接受一个函数作为参数，同时会创建一个 Promise 微任务。当页面调用 `nextTick` 时，会把参数 `fn` 传递给 `.then`，在队列 `p` 的任务完成后，执行 `fn`。
+
+Vue 3 中 `nextTick` 的队列由几个方法维护，基本执行顺序是：`queueJob` -> `queueFlush` -> `flushJobs` -> `nextTick` 参数的 `fn`。
+
+## queueJob
+
+`queueJob` 方法负责维护主任务队列，接受一个函数作为参数，为待入队任务，会将参数推入到 `queue` 队列中，推入前需要先进行唯一性的判断。
+
+```js
+const queue = []
+
+function queueJob(job) {
+  // 唯一性判断
+  if (!queue.includes(job)) {
+    queue.push(job) // 退出队列
+    queueFlush() // 调用 queueFlush 创建微任务
+  }
+}
+```
+
+## queueFlush
+
+`queueFlush` 方法负责尝试创建微任务，等待任务队列执行：
+
+```js
+// 是否正在等待执行
+let isFlushPending = false
+
+function queueFlush() {
+  if (isFlushPending) return
+  // 避免在事件循环周期内多次创建新的微任务
+  isFlushPending = true
+  nextTick(flushJobs)
+}
+```
+
+这里需要注意，如果同时触发了两个组件更新的话，这里会触发两次 `nextTick`，也就是两次 `then`（微任务逻辑），但这是没有必要的，我们只需要触发一次即可处理完所有的 job 调用，所以需要判断一下，如果已经触发过 `nextTick` 了，那么后面就不需要再次触发一次 `nextTick` 逻辑了。
+
+## flushJobs
+
+`flushJobs` 方法负责执行队列任务，主要逻辑如下：
+
+```js
+function flushJobs() {
+  isFlushPending = false // 是否正在等待执行
+  let job
+  // 循环执行队列，并清空
+  while ((job = queue.shift())) {
+    if (job) {
+      job()
+    }
+  }
+}
+```
+
+每次循环都从队列 `queue` 开头取出一个任务执行，直到 `queue` 为空。
+
+还有 `flushPreFlushCbs` 方法负责前置任务队列和 `flushPostFlushCbs` 方法负责执行任务队列。
diff --git "a/TypeScript/JavaScript \345\222\214 TypeScript \344\270\255\347\232\204 void.md" "b/TypeScript/JavaScript \345\222\214 TypeScript \344\270\255\347\232\204 void.md"
new file mode 100644
index 0000000..f7267bd
--- /dev/null
+++ "b/TypeScript/JavaScript \345\222\214 TypeScript \344\270\255\347\232\204 void.md"	
@@ -0,0 +1,118 @@
+# JavaScript 和 TypeScript 中的 void
+
+如果您使用过强类型语言，你可能熟悉 `void` 的概念：一种类型告诉你函数和方法在调用时不返回任何东西。
+
+`void` 作为操作符存在于 JavaScript 中，作为基本类型存在于 TypeScript 中。在这两个世界里，`void` 的工作方式和大多数人习惯的略有不同。
+
+## JavaScript 中的 `void`
+
+JavaScript 中的 `void` 是一个运算符，用于计算它旁边的表达式。无论对哪个表达式求值，`void` 总是返回 `undefined`。
+
+```js
+let i = void 2
+i === undefined // true
+```
+
+为什么我们需要这样的东西？
+
+首先，在早期，人们能够覆盖 `undefined` 并赋予它一个实际值。而 `void` 总是返回**真正的意义上 `undefined`**。
+
+其次，这是调用立即执行函数的好方法：
+
+```js
+void (function () {
+  console.log('Why')
+})()
+```
+
+所有这些都不会污染全局命名空间：
+
+```js
+void (function fn(i) {
+  if (i > 0) {
+    console.log(i--)
+    fn(i)
+  }
+})(3)
+
+console.log(typeof fn) // undefined
+```
+
+由于 `void` 总是返回 `undefined`，并且 `void` 总是对它旁边的表达式求值，因此有一种非常简洁的方法可以从函数返回，而不返回值，但仍然调用回调函数，例如：
+
+```js
+// 返回未定义的内容会导致应用程序崩溃
+function middleware(nextCallback) {
+  if (condition()) {
+    return void nextCallback()
+  }
+}
+```
+
+下面是 `void` 的一个很好的用例：当您的函数总是返回 `undefined` 时，您可以确保总是这样，它对于应用程序来说很安全。
+
+```js
+button.onclick = () => void doSomething()
+```
+
+## TypeScript 中的 `void`
+
+TypeScript 中的 `void` 是 `undefined` 的子类型。JavaScript 中的函数总是返回一些东西。要么是一个值，要么是 `undefined`：
+
+```ts
+function foo(i) {
+  console.log(i)
+}
+
+foo() // undefined
+```
+
+由于没有返回值的函数总是返回 `undefined`，并且 `void` 在 JavaScript 中总是返回 `undefined`，因此 TypeScript 中的 `void` 是告诉开发人员此函数是返回 `undefined` 的合适类型：
+
+```ts
+declare function foo(i: number): void
+```
+
+作为类型的 `void` 也可以用于形参和所有其他声明。唯一可以传递的值是 `undefined`:
+
+```ts
+declare function foo(x: void): void {}
+
+foo() // ✅
+foo(undefined) // ✅
+foo(void 2) // ✅
+```
+
+所以 `void` 和 `undefined` 基本上是一样的。但有一个区别很重要：**`void` 作为返回类型可以被不同的类型替换，以允许高级回调模式**：
+
+```ts
+function doSomething(callback: () => void) {
+  // 在当前环境中，callback 总是返回 undefined
+  let c = callback()
+  // c 也是 undefined 类型
+}
+
+// 这个函数返回一个数字
+function aNumberCallback(): number {
+  return 2
+}
+
+// 正常工作，doSomething 确保了类型安全
+doSomething(aNumberCallback)
+```
+
+这是理想的行为，并且经常在 JavaScript 应用程序中使用。
+
+如果你想确保传递的函数只返回 `undefined`，请确保调整你的回调方法签名:
+
+```ts
+function doSomething(callback: () => undefined) {
+  /* ... */
+}
+function aNumberCallback(): number {
+  return 2
+}
+
+// 类型不匹配
+doSomething(aNumberCallback)
+```
diff --git "a/TypeScript/JavaScript \345\222\214 TypeScript \344\270\255\347\232\204\345\270\203\345\260\224\345\200\274.md" "b/TypeScript/JavaScript \345\222\214 TypeScript \344\270\255\347\232\204\345\270\203\345\260\224\345\200\274.md"
new file mode 100644
index 0000000..eb35ce3
--- /dev/null
+++ "b/TypeScript/JavaScript \345\222\214 TypeScript \344\270\255\347\232\204\345\270\203\345\260\224\345\200\274.md"	
@@ -0,0 +1,188 @@
+# JavaScript 和 TypeScript 中的布尔值
+
+`boolean` 是 JavaScript 中一种原始数据类型。在 TypeScript 中，它总共允许四个值（**?**）。
+
+## JavaScript 中的布尔值
+
+`boolean` 可以取 `true` 和 `false` 的值。其他类型的值可以是 truthy 或 falsy，例如 `undefined` 或 `null`。
+
+```js
+let b = true
+if (b) console.log('logged')
+
+b = false
+if (b) console.log('not logged')
+
+b = undefined
+if (b) console.log('not logged')
+
+b = null
+if (b) console.log('not logged')
+```
+
+除了 `undefined`、`null` 或 `false` 被认为是 falsy，`""`（空字符串，包括单引号和反引号）、`-0` 和 `0`，以及`NaN` 也为 falsy。
+
+要获取任意值的布尔值，可以使用 `Boolean` 函数：
+
+```js
+Boolean(false) // false
+Boolean(true) // true
+Boolean('false') // true
+Boolean('Hello World') // true
+Boolean({}) // true
+Boolean([]) // true
+Boolean(123.4) // true
+Boolean(Symbol()) // true
+Boolean(function () {}) // true
+Boolean(undefined) // false
+Boolean(null) // false
+Boolean(NaN) // false
+Boolean(0) // false
+Boolean('') // false
+```
+
+> 有一个便捷的技巧：使用 `!!`，它与 `Boolean` 具有一样的效果。您可以尝试一下。
+
+所有空值的计算结果为 `false`。空对象 `{}` 和空数组 `[]`（它本身就是一个对象）确实有值，因为它们是其他值的容器。
+
+`Boolean` 函数非常适合从集合中过滤空值：
+
+```js
+const collection = [
+  { name: 'D.O', age: 20 },
+  undefined,
+  { name: 'D.', age: 30 },
+  false,
+  { name: 'C.', age: 2 },
+  false
+]
+
+collection.filter(Boolean)
+```
+
+如果加上 `Number`，它将所有的值转换成对应的 `number` 或 `NaN`，这是一个非常酷的方式来快速获得实际值:
+
+```js
+const x = ['1.23', 2137123, 'D.O', false, 'O.O', undefined, null]
+
+x.map(Number).filter(Boolean) // [1.23, 2137123]
+```
+
+`Boolean` 作为构造函数的形式存在，其转换规则与 `Boolean` 函数相同。但是，使用 `new Boolean(...)` 创建一个包装对象，它的值比较为 `true`，但引用比较 `false`：
+
+```js
+const value = Boolean('Stefan') // true
+const reference = new Boolean('Stefan') // [Boolean: true]
+
+value == reference // true
+value === reference // false
+```
+
+您可以通过 `valueOf()` 获得值，在进行比较：
+
+```js
+value === reference.valueOf() // true
+```
+
+## TypeScript 中的布尔值
+
+在 TypeScript 中，`boolean` 是一种原始类型。请务必使用小写版本，不要引用 `Boolean` 中的对象实例
+
+```ts
+// bad
+const boolObject: Boolean = false
+
+// good
+const boolLiteral: boolean = false
+```
+
+这是可行的，但这是一种糟糕的做法，因为我们几乎不需要 `new Boolean` 对象。
+
+您可以在 TypeScript 中将 `true`、`false`、`undefined` 和 `null` 分配给 `boolean`，而无需进行严格的 `null` 检查。
+
+```ts
+const boolTrue: boolean = true // ✅
+const boolFalse: boolean = false // ✅
+const boolUndefined: boolean = undefined // ✅
+const boolNull: boolean = null // ✅
+```
+
+因此，`boolean` 是我们唯一可以通过联合类型完全表达的：
+
+```ts
+type MyBoolean = true | false | null | undefined // 与布尔值相同
+
+const mybool: MyBoolean = true
+const yourbool: boolean = false
+```
+
+当启用 `strictNullChecks` 编译器标志时，值将减少为 `true` 和 `false`。
+
+```ts
+const boolTrue: boolean = true // ✅
+const boolFalse: boolean = false // ✅
+const boolUndefined: boolean = undefined // ❌
+const boolNull: boolean = null // ❌
+```
+
+所以我们的集合总共减少到两个值。
+
+```ts
+type MyStrictBoolean = true | false
+```
+
+我们还可以使用 `NonNullable` 帮助器类型去除空值：
+
+```ts
+type NonNullable<T> = T extends null | undefined ? never : T
+
+type MyStrictBoolean = NonNullable<MyBoolean> // true | false
+```
+
+`boolean` 由一组仅用于条件的有限值组成，这一事实允许有趣的条件类型。
+
+想象一下通过函数在数据存储中发生的变化。您在更新 `userId` 的函数中设置了一个标志。你必须提供 `userId`，然后:
+
+```ts
+type CheckUserId<Properties, AddUserId> = AddUserId extends true
+  ? Properties & { userId: string }
+  : Properties & { userId?: string }
+```
+
+根据通用 `AddUserId` 的值，我们希望属性 `userId` 被设置或者是可选的。
+
+通过从我们期望的类型扩展泛型，我们可以使这个类型更加明确
+
+```ts
+- type CheckUserId<Properties, AddUserId> =
++ type CheckuserId<
++  Properties extends {},
++  AddUserId extends boolean
++ >
+     AddUserId extends true
+     ? Properties & { userId: string }
+     : Properties & { userId?: string }
+```
+
+在使用中，它可能会声明如下函数：
+
+```ts
+declare function mutate<P, A extends boolean = false>(
+  props: CheckUserId<P, A>,
+  addUserId?: A
+): void
+```
+
+请注意，我甚至为 `A` 设置了一个默认值，以确保 `CheckUserId` 根据要设置或不设置的 `addUserId` 提供正确的信息。
+
+实际作用：
+
+```js
+mutate({}) // ✅
+mutate({ data: 'Hello World' }) // ✅
+mutate({ name: 'O.O' }, false) // ✅
+mutate({ name: 'O.O' }, true) // ❌ userId 丢失
+mutate({ name: 'O.O', userId: 'ABCD' }, true) // ✅ userId is here
+```
+
+如果您的代码很大程度上依赖于真值或假值，这将非常方便。
diff --git "a/TypeScript/TypeScript DefinitelyTyped \351\241\271\347\233\256.md" "b/TypeScript/TypeScript DefinitelyTyped \351\241\271\347\233\256.md"
new file mode 100644
index 0000000..3cc6f72
--- /dev/null
+++ "b/TypeScript/TypeScript DefinitelyTyped \351\241\271\347\233\256.md"	
@@ -0,0 +1,23 @@
+# TypeScript DefinitelyTyped 项目
+
+广泛的 JavaScript 生态系统中的 npm 包并不总是有可用的类型。
+
+有时项目不再维护，有时他们不感兴趣、不同意或没有时间使用 TypeScript。
+
+## 在 TypeScript 中使用非类型 npm 包
+
+由于缺少类型，将非类型的 npm 包与 TypeScript 一起使用将不是类型安全的。
+
+为了帮助 TypeScript 开发人员使用这些包，有一个社区维护的项目叫做 [DefinitelyTyped](http://definitelytyped.org/)。
+
+DefinitelyTyped 是一个为没有类型的 npm 包提供 TypeScript 定义的中央存储库的项目。
+
+例如 jQuery：
+
+```bash
+npm i -D @types/jquery
+```
+
+安装声明包后，通常不需要其他步骤来使用类型，TypeScript 会在使用包本身时自动选择类型。
+
+当缺少类型时，VS Code 等编辑器通常会建议安装此类包。
diff --git a/TypeScript/TypeScript Note.md b/TypeScript/TypeScript Note.md
new file mode 100644
index 0000000..8c072a0
--- /dev/null
+++ b/TypeScript/TypeScript Note.md	
@@ -0,0 +1,5 @@
+# TypeScript Note
+
+## 通过一个 Todo 来学习 TypeScript
+
+一篇值得阅读的文章：[TypeScript Tutorial for JS Programmers Who Know How to Build a Todo App](https://ts.chibicode.com/todo/)，作者介绍了如何使用 TypeScript 构建一个 Todo，且提供的示例和描述简单易懂，非常适合刚学习完 TypeScript 基础的朋友们读一读。
diff --git "a/TypeScript/TypeScript const \345\222\214 readonly \347\232\204\345\214\272\345\210\253.md" "b/TypeScript/TypeScript const \345\222\214 readonly \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..553bc2c
--- /dev/null
+++ "b/TypeScript/TypeScript const \345\222\214 readonly \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,117 @@
+# TypeScript const 和 readonly 的区别
+
+## 区别
+
+`const` 用于变量。
+
+```ts
+const message = 'Hello'
+
+// 不起作用
+message = 'World'
+```
+
+而 `readonly` 用于属性。属性可以声明为类的成员。
+
+```ts
+class Triangle {
+  public readonly numberOfVertices = 3
+}
+
+const triangle = new Triangle()
+
+// 不起作用
+triangle.numberOfVertices = 4
+```
+
+`type` 或 `interface`：
+
+```ts
+interface Person {
+  firstName: string
+  lastName: string
+  readonly fullName: string
+}
+```
+
+`const` 声明必须初始化，并且不能重新分配其值。`readonly` 属性可以在构造函数中重新分配。
+
+```ts
+class Square {
+  readonly numberOfVertices: number
+
+  constructor() {
+    this.numberOfVertices = 4
+  }
+}
+```
+
+如果不直接传递 `readonly` 属性的类或接口，而是传递别名，则可以更改 `readonly` 属性。
+
+让我们看看上面的 `Person` 接口，假设我们有以下的功能来更新人员信息：
+
+```ts
+const updatePerson = (person: {
+  firstName: string
+  lastName: string
+  fullName: string
+}) => {
+  person.fullName = `${firstName}, ${lastName}`
+}
+```
+
+我们可以更新 `fullName` 属性，因为它是 `person` 参数的属性：
+
+```ts
+let person: Person = {
+  firstName: 'Foo',
+  lastName: 'Bar',
+  fullName: 'Foo Bar'
+}
+
+updatePerson(person)
+
+person.fullName // 'Foo, Bar'
+```
+
+但是，如果我们传递原始类型 `Person`，编译器将抛出一个错误：
+
+```ts
+const updatePerson = (person: Person) => {
+  // Error: Cannot assign to 'fullName' because it is a read only property
+  // 提示很明显：无法分配给 fullName，因为它是只读属性
+  person.fullName = `${person.firstName}, ${person.lastName}`
+}
+```
+
+## 你应该知道
+
+在给定的类中，如果一个属性只有 `getter` 方法而没有 `setter` 方法，它将被视为只读。
+
+```ts
+class Square {
+  side: number = 0
+
+  get area() {
+    return this.side * this.side
+  }
+}
+
+const s = new Square()
+```
+
+设置 `s.area = 100` 将引发错误，因为 `area` 是仅准备为被获取的属性。
+
+在 React 库中，我们不会直接更改组件的 `props` 和 `state`。因为 `props` 是不可变的，`state` 可以通过 `setState()` 方法更新。
+
+React [类型定义](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts)将 `props` 和 `state` 包装为只读类型。
+
+```ts
+// P, S 分别代表 props 和 state
+class Component<P, S> {
+  constructor(props: Readonly<P>)
+
+  readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>
+  state: Readonly<S>
+}
+```
diff --git "a/TypeScript/TypeScript d.ts \345\222\214 .ts \347\232\204\345\214\272\345\210\253.md" "b/TypeScript/TypeScript d.ts \345\222\214 .ts \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..d53df88
--- /dev/null
+++ "b/TypeScript/TypeScript d.ts \345\222\214 .ts \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,45 @@
+# TypeScript *.d.ts 与 *.ts 的区别
+
+## 区别
+
+`.ts` 是标准的 TypeScript 文件。其内容将被编译为 JavaScript。
+
+`*.d.ts` 是允许在 TypeScript 中使用现有 JavaScript 代码的类型定义文件。
+
+例如，我们有一个简单的 JavaScript 函数，用于计算两个数字的总和：
+
+```ts
+// math.js
+const sum = (a, b) => a + b
+
+export { sum }
+```
+
+TypeScript 没有关于函数的任何信息，包括名称、参数类型。为了在 TypeScript 文件中使用该函数，我们在 `d.ts` 文件中提供其定义：
+
+```ts
+// math.d.ts
+declare function sum(a: number, b: number): number
+```
+
+现在，我们可以在 TypeScript 中使用该函数，而不会出现任何编译错误。
+
+`d.ts` 文件不包含任何实现，并且根本不编译为 JavaScript。
+
+## 很高兴知道
+
+TypeScript 提供了一个名为 `allowJs` 的选项，允许在 TypeScript 中使用普通 JavaScript 代码。
+
+```ts
+// tsconfig.json
+{
+  "compilerOptions": {
+    "allowJs": true,
+    ...
+  }
+}
+```
+
+当我们想要将现有的代码库从普通 JavaScript 迁移到 TypeScript 时，它非常有用。因此，我们可以将每个 JavaScript 文件逐个转换为 TypeScript，而不必完全转换整个代码。
+
+> 有关更多信息，请参阅 [Migrating from JavaScript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)。
diff --git "a/TypeScript/TypeScript interface \344\270\216 type \347\232\204\345\214\272\345\210\253.md" "b/TypeScript/TypeScript interface \344\270\216 type \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..6c64ab7
--- /dev/null
+++ "b/TypeScript/TypeScript interface \344\270\216 type \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,200 @@
+# TypeScript interface 与 type 的区别
+
+使用 `interface` 和 `type` 声明是表示给定数据结构的常用方法。
+
+```ts
+// 使用接口
+interface Point {
+  x: number
+  y: number
+}
+
+// 使用类型别名
+type Point = {
+  x: number
+  y: number
+}
+```
+
+## 区别
+
+TypeScript 中类型别名和接口之间的区别在过去更为明显，但随着 TypeScript 的最新版本，它们变得越来越相似。
+
+以下是它们的一些区别。
+
+### 对象/函数
+
+两者都可以用来描述对象的结构或函数签名，但语法不同。
+
+接口：
+
+```ts
+interface Point {
+  x: number
+  y: number
+}
+
+interface SetPoint {
+  (x: number, y: number): void
+}
+```
+
+类型别名：
+
+```ts
+type Point = {
+  x: number
+  y: number
+}
+
+type SetPoint = (x: number, y: number) => void
+```
+
+### 其他类型
+
+与接口不同，类型别名是数据类型的定义，可用于任何其他类型。例如：联合类型、交叉类型、原始类型、元组等。
+
+```ts
+// union
+type PartialPoint = PartialPointX | PartialPointY
+
+// object
+type PartialPointX = { x: number }
+type PartialPointY = { y: number }
+
+// primitive
+type Name = string
+
+// tuple
+type Data = [number, string]
+
+// other
+```
+
+### 声明合并
+
+与类型别名不同，一个接口可以定义多次，并将被视为一个接口（所有声明的成员都被合并）。
+
+```ts
+interface Point {
+  x: number
+}
+
+interface Point {
+  y: number
+}
+
+const p: Point = {
+  x: 1,
+  y: 2
+}
+```
+
+而类型别名必须是唯一的，并且不允许合并声明，否则编译器将报错。
+
+```ts
+type Person = {
+  firstName: string
+}
+
+// Throw error: Duplicate identifier
+type Person = {
+  lastName: string
+}
+```
+
+能够合并接口声明是非常有用的。例如，当我们为一个外部库提供类型定义时，它不是完全用 TypeScript 创建的。
+
+在这种情况下，如果缺少一些定义，我们可以通过声明合并来提供它们。
+
+### Extend
+
+两者都可以继承，但同样，语法不同。此外，请注意接口和类型别名不是相互排斥的。接口可以继承类型别名，反之亦然。
+
+**接口继承接口**：
+
+```ts
+interface PartialPointX {
+  x: number
+}
+interface Point extends PartialPointX {
+  y: number
+}
+```
+
+**类型别名继承类型别名**：
+
+```ts
+type PartialPointX = { x: number }
+type Point = PartialPointX & { y: number }
+```
+
+**接口继承类型别名**：
+
+```ts
+type PartialPointX = { x: number }
+interface Point extends PartialPointX {
+  y: number
+}
+```
+
+**类型别名继承接口**：
+
+```ts
+interface PartialPointX {
+  x: number
+}
+type Point = PartialPointX & { y: number }
+```
+
+### Implements
+
+类可以以相同的方式实现接口或类型别名。
+
+```ts
+interface Point {
+  x: number
+  y: number
+}
+
+class SomePoint implements Point {
+  x = 1
+  y = 2
+}
+
+type Point2 = {
+  x: number
+  y: number
+}
+
+class SomePoint2 implements Point2 {
+  x = 1
+  y = 2
+}
+```
+
+但是请注意，类和接口被视为静态蓝图。因此，它们不能**实现/继承**命名联合类型的类型别名。
+
+```ts
+type PartialPoint = { x: number } | { y: number }
+
+// FIXME: 无法实现联合类型
+class SomePartialPoint implements PartialPoint {
+  x = 1
+  y = 2
+}
+```
+
+## 建议
+
+要决定是使用类型别名还是接口，你应该仔细考虑和分析情况，你正在处理什么，具体的代码等。
+
+结合上述它们之间的区别，以下是一些我认为不错的建议：
+
+- 如果你希望定义一个变量类型，就用 `type`，如果希望能够继承并约束，就用 `interface`
+- 如果你不知道该用哪个，建议使用 `type`
+- 如果你是库的作者或为外部库创建类型定义，请使用 `interface`，方便其他人也可以扩展它们
+
+## 更多资料
+
+Stack Overflow 有更多关于这方面的讨论，地址 👉 [Interfaces vs Types in TypeScript](https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript)。也可以看看 [TypeScript 中 Interface 与 Type 的区别？在写 TypeScript 的时候，该用哪个比较好？](https://github.com/sisterAn/blog/issues/126)。
diff --git "a/TypeScript/TypeScript interface \344\270\255\347\232\204\345\207\275\346\225\260\345\222\214\345\261\236\346\200\247.md" "b/TypeScript/TypeScript interface \344\270\255\347\232\204\345\207\275\346\225\260\345\222\214\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..59eb966
--- /dev/null
+++ "b/TypeScript/TypeScript interface \344\270\255\347\232\204\345\207\275\346\225\260\345\222\214\345\261\236\346\200\247.md"	
@@ -0,0 +1,133 @@
+# TypeScript interface 中的函数和属性
+
+在接口中定义方法有两种方法。
+
+- 声明为类型为函数的属性
+
+```ts
+interface Logger {
+  log: (message: string) => void
+}
+```
+
+- 声明为正常函数
+
+```ts
+interface Logger {
+  log(message: string): void
+}
+```
+
+## 区别
+
+如果将该方法声明为接口函数，则可以添加更多重载版本。
+
+```ts
+interface Logger {
+  log(message: string): void
+}
+
+// 在其他地方
+interface Logger {
+  log(message: string, level: string): void
+}
+```
+
+另一方面，将方法声明为属性可以防止复制具有不同类型的属性声明：
+
+```ts
+interface Logger {
+  log: (message: string) => void
+}
+
+// 不起作用
+interface Logger {
+  log: (message: string, level: string) => void
+}
+```
+
+`readonly` 修饰符仅对属性声明有效。
+
+```ts
+interface Person {
+  firstName: string
+  lastName: string
+
+  readonly fullName: () => string
+
+  // 不起作用
+  // readonly fullName(): string
+}
+```
+
+TypeScript 为实现接口方法的类生成不同的输出。
+
+假设我们有一个 `ConsoleLogger` 类，它只在控制台窗口中记录消息。
+
+对于第一种方法：
+
+```ts
+interface Logger {
+  log: (message: string) => void
+}
+
+class ConsoleLogger implements Logger {
+  log = (message: string) => {
+    console.log(message)
+  }
+}
+
+// 生成的 JavaScript 代码：
+//
+// class ConsoleLogger {
+//  constructor() {
+//    this.log = (message) => {
+//      console.log(message)
+//    }
+//  }
+// }
+```
+
+对于第二种方法：
+
+```ts
+interface Logger {
+  log(message: string): void
+}
+
+class ConsoleLogger implements Logger {
+  log(message: string) {
+    console.log(message)
+  }
+}
+
+// 生成的 JavaScript 代码：
+//
+// class ConsoleLogger {
+//  log(message) {
+//    console.log(message)
+//  }
+// }
+```
+
+查看生成的 JavaScript 代码，您将看到不同的输出。
+
+第一种方法在构造函数中生成属性 `log`。这意味着每次创建类的新实例时都会创建 `log`。
+
+而第二种方法生成 `log` 方法，并且它存在于类的所有实例中。`log` 方法也是类 `prototype` 的成员，因此如果需要，我们可以扩展该类以重写该方法：
+
+```ts
+class ConsoleLogger implements Logger {
+  log(message: string) {
+    console.log(message)
+  }
+}
+
+class ConsoleLoggerWithColor extends ConsoleLogger {
+  // 重写 log 方法
+  log(message: string) {
+    // 以白色和蓝色背景区域显示消息
+    console.log('%c%s', 'color: white; background: blue', message)
+  }
+}
+```
diff --git "a/TypeScript/TypeScript interface \346\216\245\345\217\243.md" "b/TypeScript/TypeScript interface \346\216\245\345\217\243.md"
new file mode 100644
index 0000000..de3b7c8
--- /dev/null
+++ "b/TypeScript/TypeScript interface \346\216\245\345\217\243.md"	
@@ -0,0 +1,169 @@
+# TypeScript interface 接口
+
+> TypeScript 的核心原则之一是对值所具有的结构进行类型检查。
+
+在 TypeScript 中，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
+
+接口（`interface`）是最常用的类型标注方式。
+
+```ts
+// interface 关键字
+interface user {
+  name: string
+  age: number
+}
+
+function printUser(userObj: user) {
+  console.log(userObj.name)
+}
+
+const myObj = {
+  name: 'lio',
+  age: 18
+}
+
+printUser(myObj)
+```
+
+`user` 接口中给将来可能需要用到的对象属性定义类型。
+
+> **注意**：类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以
+
+## 可选属性 — `?`
+
+接口里的属性不全都是必需的。
+
+```ts
+interface user {
+  name?: string
+  age?: number
+}
+
+function printUser(userObj: user): { name: string; height: number } {
+  let newUser = { name: 'O.O', height: 180 }
+  if (userObj.name) {
+    newUser.name = userObj.name
+  }
+  if (userObj.age) {
+    newUser.height = userObj.age * userObj.age
+  }
+  return newUser
+}
+
+const myObj = { name: 'D.O' }
+printUser(myObj) // { name: 'D.O', height: 180 }
+```
+
+带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 `?` 符号。
+
+好处：
+
+- 可以对可能存在的属性进行预定义
+- 可以捕获引用了不存在的属性时的错误
+
+## 只读属性 — `readonly`
+
+一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 `readonly` 来指定只读属性：
+
+```ts
+interface Point {
+  readonly x: number
+  readonly y: number
+}
+
+const p: Point = { x: 10, y: 20 }
+p.x = 5 // Type Error
+```
+
+TypeScript 具有 `ReadonlyArray` 类型，它与 `Array` 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。
+
+```ts
+let arr: number[] = [1, 2, 3, 4]
+const ro: ReadonlyArray<number> = arr
+
+ro[0] = 12 // Type Error
+ro.push(5) // Type Error
+ro.length = 100 // Type Error
+arr = ro // Type Error
+```
+
+就算把整个 `ReadonlyArray` 赋值到一个普通数组也是不可以的。但是你可以用类型断言重写：
+
+```ts
+arr = ro as number[]
+```
+
+## 函数类型
+
+为了使用接口表示函数类型，我们需要给接口定义一个调用签名。
+
+它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
+
+```ts
+interface SearchFunc {
+  (source: string, subString: string): boolean
+}
+
+const mySearch: SearchFunc
+mySearch = function (source: string, subString: string) {
+  const result = source.search(subString)
+  return result > -1
+}
+```
+
+## 类型合并
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+interface User {
+  address: object
+}
+
+const user: User = {
+  name: 'D.O',
+  age: 18,
+  address: {}
+}
+
+console.log(user) // { name: 'D.O', age: 18, address: {} }
+```
+
+VS Code 编辑器虽然会提示你 `'User'` 已被定义。但是 `interface` 接口还是会对相同的接口名进行合并，并正常编译输出。
+
+## 任意数量标识
+
+有时候类型数量是动态的，但类型是指定需要约束的，可以这样写
+
+```ts
+interface IVariate {
+  first: string
+  readonly second: number
+  [key: string]: number
+}
+```
+
+## 接口继承（`extends`）
+
+继承使用 `extends` 关键字
+
+**单接口继承**：
+
+```ts
+interface two extends one {
+  name: string
+}
+```
+
+**多接口继承**：使用逗号 `,` 分隔各个接口
+
+```ts
+interface three extends one, two {
+  name: string
+}
+```
+
+> 推荐：[TypeScript interface 与 type 的区别](https://github.com/lio-zero/blog/blob/main/TypeScript/TypeScript%20interface%20%E4%B8%8E%20type%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
diff --git "a/TypeScript/TypeScript keyof \345\205\263\351\224\256\345\255\227.md" "b/TypeScript/TypeScript keyof \345\205\263\351\224\256\345\255\227.md"
new file mode 100644
index 0000000..420ab14
--- /dev/null
+++ "b/TypeScript/TypeScript keyof \345\205\263\351\224\256\345\255\227.md"	
@@ -0,0 +1,45 @@
+# TypeScript keyof 关键字
+
+`keyof` 是 TypeScript 中的关键字，用于从对象类型中提取键类型。
+
+## 带有显式键的 `keyof`
+
+在具有显式键的对象类型上使用时，`keyof` 会使用这些键创建联合类型。
+
+```ts
+interface Person {
+  name: string
+  age: number
+}
+
+// keyof Person 在这里创建一个 name 和 age 的联合类型，不允许使用其他字符串
+function printName(person: Person, property: keyof Person) {
+  console.log(`打印 person 属性 ${property}: '${person[property]}'`)
+}
+
+let person = {
+  name: 'O.O',
+  age: 18
+}
+
+printName(person, 'name') // 'O.O'
+```
+
+## 带索引签名的 `keyof`
+
+`keyof` 还可以与索引签名一起使用，以提取索引类型。
+
+```ts
+type StringMap = {
+  [key: string]: unknown
+}
+
+// 这里的 keyof StringMap 解析为 string
+function foo(property: keyof StringMap, value: string): StringMap {
+  return {
+    [property]: value
+  }
+}
+
+foo('name', 'O.O') // { name: 'O.O' }
+```
diff --git "a/TypeScript/TypeScript null \345\222\214 undefined.md" "b/TypeScript/TypeScript null \345\222\214 undefined.md"
new file mode 100644
index 0000000..3cbc7c0
--- /dev/null
+++ "b/TypeScript/TypeScript null \345\222\214 undefined.md"	
@@ -0,0 +1,100 @@
+# TypeScript null 和 undefined
+
+`null` 和 `undefined` 都有各自的类型名称。这些类型本身没有用处，因为我们只能将 `null` 和 `undefined` 赋值给定义为 `null` 或 `undefined` 类型的变量。
+
+```ts
+let u: undefined = undefined
+u = 'string' // compile error
+
+let n: null = null
+n = 43 // compile error
+```
+
+默认情况下，`null` 和 `undefined` 是所有类型的子类型。就是说可以把 `null` 和 `undefined` 赋值给 `number` 类型的变量。
+
+```ts
+let value: string | undefined | null = null
+value = 'hello'
+value = undefined
+```
+
+> **注意**：默认情况下，将禁用 `null` 和 `undefined` 处理，我们可以通过在 `tsconfig.json` 文件将 `strictNullChecks` 设置为 `true` 来启用。当启用 `strictNullChecks` 时，本文的示例才能正常运行。
+
+## 可选链
+
+可选链接是一种 JavaScript 功能，它与 TypeScript 的空处理配合得很好。它允许使用紧凑的语法访问对象上的属性，这些属性可能存在，也可能不存在。它可以和 **`?.`（可选链）**运算符访在问属性时一起使用。
+
+```ts
+interface User {
+  name: string
+  address?: {
+    street: string
+  }
+}
+
+function printStreet(user: User) {
+  const streetInfo = user.address?.street
+  if (streetInfo === undefined) {
+    console.log('No street info')
+  } else {
+    console.log(streetInfo)
+  }
+}
+
+let user: User = {
+  name: 'O.O'
+}
+
+printStreet(user) // 'No street info'
+```
+
+## 空值合并
+
+空值合并是另一个 JavaScript 特性，它也可以很好地与 TypeScript 的空处理配合使用。
+
+它允许编写在处理 `null` 或 `undefined` 时有回退的表达式。当表达式中可能出现其他 falsy 值，但这些值仍然有效时，这非常有用。
+
+它可以与表达式中的 **`??`（空值合并运算符）**一起使用，类似于使用 **`&&`（与运算符）**。
+
+```ts
+function printName(name: string | null | undefined) {
+  console.log(`${name ?? '无名氏'}`)
+}
+
+printName(null) // '无名氏'
+printName('O.O') // 'O.O'
+```
+
+## 空断言
+
+TypeScript 的推理系统并不完美，有时候忽略一个值为 `null` 或 `undefined` 的可能性是有意义的。一个简单的方法就是使用类型转换，但是 TypeScript 也提供了 `!` 运算符作为方便的快捷方式。
+
+```ts
+function getValue(): string | undefined {
+  return 'hello'
+}
+
+let value = getValue()
+
+value.length // value 可能为 undefined
+// 使用 ! 运算符
+value!.length // 5
+```
+
+就像类型转化一样，这可能是不安全的，应该小心使用。
+
+## 数组边界处理
+
+即使启用了 `strictNullChecks`，默认情况下 TypeScript 也会假定数组访问永远不会返回 `undefined`（除非 `undefined` 是数组类型的一部分）。
+
+```ts
+let array: number[] = [1, 2, 3]
+let value = array[0] // value 的类型为 number
+```
+
+我们可以配置 `noUncheckedIndexedAccess` 来更改此行为。
+
+```ts
+let array: number[] = [1, 2, 3]
+let value = array[0] // value 的类型为 number | undefined
+```
diff --git "a/TypeScript/TypeScript object \347\261\273\345\236\213.md" "b/TypeScript/TypeScript object \347\261\273\345\236\213.md"
new file mode 100644
index 0000000..6dadeb1
--- /dev/null
+++ "b/TypeScript/TypeScript object \347\261\273\345\236\213.md"	
@@ -0,0 +1,55 @@
+# TypeScript object 类型
+
+`object` 表示非原始类型，也就是除 `number`、`string`、`boolean`、`symbol`、`bigInt`、`null` 或 `undefined` 之外的类型。
+
+```ts
+const user: { name: string; age: number } = {
+  name: 'O.O',
+  age: 18
+}
+```
+
+## 类型推断
+
+TypeScript 可以根据属性的值推断属性的类型。
+
+```ts
+const user = {
+  type: 'gold'
+}
+
+user.type = 'wood'
+user.type = 10 // type error
+```
+
+## 可选属性
+
+可选属性是不必在对象定义中定义的属性。
+
+不带可选属性：
+
+```ts
+const user: { name: string; age: number } = {
+  name: 'O.O'
+} // type error
+```
+
+带可选属性：
+
+```ts
+const user: { name: string; age?: number } = {
+  name: 'O.O'
+}
+
+user.age = 18
+```
+
+## 索引签名
+
+索引签名可用于没有定义属性列表的对象。
+
+```ts
+const user: { [index: string]: string } = {}
+user.name = 'O.O'
+user.age = 18 // type error
+```
diff --git "a/TypeScript/TypeScript string \345\222\214 String \347\232\204\345\214\272\345\210\253.md" "b/TypeScript/TypeScript string \345\222\214 String \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..c977333
--- /dev/null
+++ "b/TypeScript/TypeScript string \345\222\214 String \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,73 @@
+# TypeScript string 和 String 的区别
+
+`string` 和 `String` 是有效的 TypeScript 类型。以下声明有效：
+
+```ts
+let foo: String = 'foo'
+let bar: string = 'bar'
+```
+
+## 区别
+
+`string` 是指 JavaScript 的基本类型，可以使用文本（单引号或双引号）或 `String` 函数（不使用 `new` 关键字）创建。
+
+以下三个声明创建相同的字符串：
+
+```ts
+const message = 'hello'
+const message = 'hello'
+const message = String('hello')
+```
+
+我们经常使用 `typeof variable==='string'` 来检查给定变量是否为原始字符串。
+
+另一方面，`String` 是一个基本包装字符串的对象，用于操纵字符串。我们可以从构造函数中创建 `String` 的实例，例如 `new String(...)`：
+
+```ts
+const message = new String('hello')
+```
+
+为了检查变量是否为 `String` 对象的实例，我们必须使用 `instanceof` 运算符：
+
+```ts
+if (variable instanceof String) {
+  // ...
+}
+```
+
+## 很高兴知道
+
+将 `String` 对象分配给基本 `string` 变量：
+
+```ts
+let foo: String = 'foo'
+let bar: string = 'bar'
+
+foo = bar // OK
+```
+
+在编写时，`String` 被声明为 [interface](https://github.com/microsoft/TypeScript/blob/master/src/lib/es5.d.ts#L374)，以便将该 `string` 被视为 `String` 的子类型。因此，分配 `foo = bar` 不会导致任何问题。
+
+但执行相反的赋值将抛出错误：
+
+```ts
+// ERROR: Type 'String' is not assignable to type 'string'.
+// string 是一个基本类型，但 String 是一个包装器对象。
+bar = foo
+```
+
+## 建议
+
+根据官方 TypeScript 的[注意事项](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html)，建议不要使用 `Number`、`String`、`Boolean`、`Symbol` 或 `Object`。
+
+```ts
+// Do NOT
+const reverse = (s: String): String => {
+  // ...
+}
+
+// Do
+const reverse = (s: string): string => {
+  // ...
+}
+```
diff --git "a/TypeScript/TypeScript \344\270\255\347\232\204 const \346\226\255\350\250\200.md" "b/TypeScript/TypeScript \344\270\255\347\232\204 const \346\226\255\350\250\200.md"
new file mode 100644
index 0000000..b8cf7f4
--- /dev/null
+++ "b/TypeScript/TypeScript \344\270\255\347\232\204 const \346\226\255\350\250\200.md"	
@@ -0,0 +1,123 @@
+# TypeScript 中的 const 断言
+
+在 TypeScript 4.3 中，TypeScript 引入了 `const` 断言。`const` 断言用于告诉 TypeScript 编译器以下内容之一：
+
+## 对象属性是只读的
+
+将对象强制转换为 `const` 时，属性标记为只读，无法修改。
+
+以下面的 `person` 变量为例，其中包含 `name` 和 `age`。
+
+```ts
+const person = {
+  name: 'O.O',
+  age: 20
+}
+```
+
+其类型按预期推断为 `string` 和 `number`。
+
+但如果我们将其断言为 `const`，`person` 对象的推断类型将被标记为只读，并且无法修改。
+
+```ts
+const person = {
+  name: 'O.O',
+  age: 20
+} as const
+
+person.name = 'D.O' // TypeError
+```
+
+如果尝试更新 `age` 字段，则会抛出错误。
+
+## 数组变成只读元组
+
+数组上的 `const` 断言允许我们将数组标记为只读元组，即数组中每个位置的内容都成为无法修改的文本类型。
+
+例如：
+
+```ts
+const arr = ['O.O', 20]
+```
+
+TypeScript 会将其推断为字符串或数字数组，即 `(string | number)[]`。
+
+![数组变成只读元组](https://upload-images.jianshu.io/upload_images/18281896-3525987296e5e7e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+但是，如果我们使用 `as const` 断言，它将被限制为只读元组，即第一个位置为 `'O.O'`，第二个位置为 `25`，并且它的值不能被修改：
+
+```ts
+const arr = ['O.O', 20] as const
+
+arr[0] = 'D.O' // TypeError
+```
+
+## 变量值应被视为文字类型
+
+文字类型允许我们定义更具体的类型，而不是像字符串或数字这样泛化的类型。例如：
+
+```ts
+type Switch = 'On' | 'Off'
+```
+
+`const` 断言允许我们将变量值标记为文字类型。例如，如果我们有一个变量 `onSwitch`，并为其赋值为 `On`，那么 TypeScript 通常会将变量的类型推断为字符串：
+
+```ts
+let onSwitch = 'On'
+```
+
+![字符串](https://upload-images.jianshu.io/upload_images/18281896-8cac895de33cc56c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+但是，如果我们使用 `const` 断言，它将被推断为 `On` 的文字类型：
+
+```ts
+let onSwitch = 'On' as const
+```
+
+![文字类型](https://upload-images.jianshu.io/upload_images/18281896-8f171acc96a349df.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+并且不能接受除 `On` 之外的任何其他变量：
+
+```ts
+onSwitch = 'Off' // TypeError
+```
+
+需要记住的一点是，`const` 断言只能应用于简单表达式。所以你不能这样做：
+
+```ts
+function switchValue(input: boolean) {
+  let onSwitch = (input ? 'On' : 'Off') as const // 行不通
+  return onSwitch
+}
+```
+
+为了解决上述问题，我们需要对三元运算符的每个输出值应用 `const` 断言：
+
+```ts
+function switchValue(input: boolean) {
+  let onSwitch = input ? ('On' as const) : ('Off' as const)
+  return onSwitch
+}
+```
+
+`onSwitch` 变量的类型被推断为一个文本类型联合 `On | Off`。
+
+---
+
+通过使用 `as const` 语法告诉编译器将元组字面量的类型推断为元组字面量，而不是 `string[]`。
+
+```ts
+const list = ['a', 'b', 'c'] as const
+```
+
+![元组字面量](https://upload-images.jianshu.io/upload_images/18281896-57ad9dfb14041776.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+这种类型的断言导致编译器推断出一个值可能的最窄类型，包括将所有内容设为只读的。它应该如下所示：
+
+```ts
+type NeededUnionType = typeof list[number] // 'a'|'b'|'c'
+```
+
+![只读联合类型](https://upload-images.jianshu.io/upload_images/18281896-b558bd7d93da267e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+来自 [TypeScript derive union type from tuple/array values](https://stackoverflow.com/questions/45251664/typescript-derive-union-type-from-tuple-array-values)
diff --git "a/TypeScript/TypeScript \344\270\255\347\232\204\347\261\273\345\236\213\346\224\266\347\252\204.md" "b/TypeScript/TypeScript \344\270\255\347\232\204\347\261\273\345\236\213\346\224\266\347\252\204.md"
new file mode 100644
index 0000000..1a84595
--- /dev/null
+++ "b/TypeScript/TypeScript \344\270\255\347\232\204\347\261\273\345\236\213\346\224\266\347\252\204.md"	
@@ -0,0 +1,239 @@
+# TypeScript 中的类型收窄
+
+在本文中，我们将学习各种收窄类型的方法。**类型（narrowing）收窄**是将类型从不太精确的类型推导为更精确的类型的过程。
+
+让我们从一个简单的函数开始：
+
+```ts
+function friends(input: string | number) {
+  // code here
+}
+```
+
+上面的函数可以接受一个数字或一个字符串。假设我们要根据 `input` 是数字还是字符串来执行不同的操作。在这种情况下，我们将使用 JavaScript 类型保护来检查它是字符串还是数字，如下所示：
+
+```ts
+function someFunc(input: string | number) {
+  if (typeof input === 'string') {
+    // do something with the string
+    console.log('input is a string')
+  }
+
+  if (typeof input === 'number') {
+    // do something with number
+    console.log('input is a number')
+  }
+}
+```
+
+## 类型保护 — Type Guard
+
+在上面的示例中，我们使用 JavaScript 类型保护将输入类型收窄为数字或字符串。类型保护用于检查变量是否属于特定类型，即数字、字符串、对象等。使用类型保护时，Typescript 希望该变量属于该类型。它将根据该信息自动键入并检查其使用情况。
+
+示例中，我们使用 `typeof` 运算符收窄类型，它检查值是否具有原始类型的类型。
+
+以下是可用的 JavaScript 类型保护的列表：
+
+**`string`**
+
+```ts
+if (typeof param === 'string') {
+  // do something with string value
+}
+```
+
+**`number`**
+
+```ts
+if (typeof param === 'number') {
+  // do something with number value
+}
+```
+
+**`bigint`**
+
+```ts
+if (typeof param === 'bigint') {
+  // do something with bigint value
+}
+```
+
+**`boolean`**
+
+```ts
+if (typeof param === 'boolean') {
+  // do something with boolean value
+}
+```
+
+**`symbol`**
+
+```ts
+if (typeof param === 'symbol') {
+  // do something with symbol value
+}
+```
+
+**`undefined`**
+
+```ts
+if (typeof param === 'undefined') {
+  // do something with undefined value
+}
+```
+
+**`object`**
+
+```ts
+if (typeof param === 'object') {
+  // do something with object value
+}
+```
+
+**`function`**
+
+```ts
+if (typeof param === 'function') {
+  // do something with the function
+}
+```
+
+下面我们来看一下其他的收窄类型方法。
+
+## 真值收窄
+
+在这种类型收窄中，我们在使用变量之前检查它是否为真。当变量为真时，TypeScript 将自动消除该变量在条件检查中出错的可能性，即 `undefined` 或 `null` 等。
+
+举个例子，下面的函数 `foo` 接受一个参数 `x`，其类型为 `string` 或 `undefined`（即可选）。
+
+```ts
+function foo(x?: string) {
+  if (x) {
+    console.log(typeof x) // "string"
+  }
+}
+
+foo('TS')
+```
+
+通过检查 `x` 是否为 `true`，`x` 的类型将变为 `string`，否则为 `undefined`。
+
+很多情况下都会进行真值收窄：表达式（`||`、`&&`、`!`）、`!!` 和 `Boolean` 等。
+
+## 等值收窄
+
+如果两个变量相等，那么两个变量的类型必须相同。如果一个变量的类型不精确（即 `unknown`、`any` 等），并且等于另一个精确类型的变量，那么 TypeScript 将使用该信息收窄第一个变量的类型。
+
+以下面的函数为例，它有两个参数：`x` 和 `y`，`x` 是 `string` 或 `number`，`y` 是 `number`。当 `x` 的值等于 `y` 的值时，`x` 的类型被推断为 `number`，否则为 `string`。
+
+```ts
+function someFunction(x: string | number, y: number) {
+  if (x === y) {
+    // 收窄到 number
+    console.log(typeof x) // number
+  } else {
+    // 这并没有收窄范围
+    console.log(typeof x) // number or string
+  }
+}
+```
+
+## 可识别联合
+
+在这种方法中，您创建了一个对象，其中包含一个文本成员，可以用来区分两个不同的联合。
+
+以下例子中，函数计算不同形状的正方形、矩形和圆形。我们将从定义 `Rectangle` 和 `Circle` 的类型开始。
+
+```ts
+type Rectangle = {
+  shape: 'reactangle'
+  width: number
+  height: number
+}
+
+type Circle = {
+  shape: 'circle'
+  radius: number
+}
+```
+
+从上述类型中，每个对象都将具有 `shape` 的文字字段，可以是 `circle` 或 `rectangle`。我们可以使用函数中的 `shape` 字段来计算面积，这将接受 `Rectangle` 和 `Circle` 的并集，如下所示：
+
+```ts
+function calculateArea(shape: Rectangle | Circle) {
+  if (shape.shape === 'reactangle') {
+    // 只能访问 reactangle 的属性，不能访问 circle 的属性
+    console.log(shape.height * shape.width)
+  }
+
+  if (shape.shape === 'circle') {
+    // 只能访问 circle 的属性，而不能访问 reactangle 的属性
+    console.log(3.14 * shape.radius * shape.radius)
+  }
+}
+```
+
+当 `shape` 字段是矩形时，您只能访问 `Rectangle` 类型中可用的属性，即 `width`、`height` 和 `shape`。这同样适用于当 `shape` 字段是 `circle` 时，TypesSript 只允许您访问 `radius` 和 `circle`，否则将抛出错误。
+
+## 使用 `in` 运算符进行收窄
+
+`in` 运算符用于确定对象是否具有包含的属性名。它以 `"property" in object` 的格式使用，其中 `property` 是要检查其是否存在于 `object` 中的属性名。
+
+在上面的例子中，我们使用有区别的并集来区分圆和矩形。我们也可以使用 `in` 运算符来实现同样的效果，但这次我们将检查一个形状是否包含某些属性，即 `Circle` 的 `radius`、`Rectangle` 的 `width` 和 `height`，结果将是相同的。
+
+```ts
+type Circle = {
+  radius: number
+}
+
+type Reactangle = {
+  width: number
+  height: number
+}
+
+function calculateArea(shape: Circle | Reactangle) {
+  if ('radius' in shape) {
+    // 现在，您可以从 shape 访问 radius
+    console.log(3.14 * shape.radius * shape.radius)
+
+    //  任何访问 height 或 width 的尝试都将导致错误
+    shape.width // TypeError
+    shape.height // TypeError
+  }
+  if ('width' in shape && 'height' in shape) {
+    // 现在可以从 shape 对象访问 height 和 width
+    console.log(shape.height * shape.width)
+
+    // 任何访问 raidus 的尝试都会导致错误
+    shape.radius // TypeError
+  }
+}
+```
+
+## 使用赋值收窄
+
+在这种类型的收窄中，一旦给变量赋值，TypeScript 就会收窄变量的类型。取一个 `number` 或 `string` 的联合类型的变量 `x`，如果我们给它赋值 `number`，类型就变成了一个数，如果我们给它赋值 `string`，类型就变成了字符串。
+
+```ts
+let x: number | string = 1
+console.log(typeof x) // "number"
+
+x = 'something'
+console.log(typeof x) // "string"
+```
+
+## 使用 `instanceof` 进行收窄
+
+JavaScript 的 `instanceof` 运算符用于检查某个值是否是某个类的实例。它以 `value instanceof value2` 的格式使用，并返回一个布尔值。当检查某个值是否为类的实例 `instanceof` 时，TypeScript 会将该类型分配给变量，从而收窄类型。
+
+以下面的示例为例，其中函数接受一个参数，可以是字符串或日期。如果是日期，我们将其转换为字符串，如果是字符串，我们将按原样返回。我们可以使用 `instanceof` 检查它是否是 `Date` 的实例，并将其转换为字符串，如下所示：
+
+```ts
+function dateToString(value: string | Date) {
+  if (value instanceof Date) {
+    // 现在的类型是 Date，您可以访问 Date 方法
+    return value.toISOString()
+  }
+  return value
+}
+```
diff --git "a/TypeScript/TypeScript \345\205\203\347\273\204.md" "b/TypeScript/TypeScript \345\205\203\347\273\204.md"
new file mode 100644
index 0000000..fafe893
--- /dev/null
+++ "b/TypeScript/TypeScript \345\205\203\347\273\204.md"	
@@ -0,0 +1,71 @@
+# TypeScript 元组
+
+## 类型化数组
+
+**元组（Tuple）**是一个类型化数组，每个索引都有预定义的长度和类型。
+
+元组很好，因为它们允许数组中的每个元素都是已知类型的值。
+
+要定义元组，请指定数组中每个元素的类型：
+
+```ts
+// 定义元组
+let ourTuple: [number, boolean, string]
+
+// 正确初始化
+ourTuple = [6, false, 'I.O']
+```
+
+正如你所看到的，我们有一个数字，布尔值和一个字符串。但如果我们试图将它们设置为错误的顺序会发生什么：
+
+```ts
+let ourTuple: [number, boolean, string]
+
+// 初始化错误会引发错误
+ourTuple = [false, 'I.O', 6]
+```
+
+即使我们有一个 `boolean`、`string` 和 `number，但顺序在元组中很重要，并且会抛出一个错误。
+
+## 只读元组
+
+一个好的做法是将元组设置为 `readonly`。
+
+元组仅具有用于初始值的强定义类型：
+
+```ts
+let ourTuple: [number, boolean, string] = [6, false, 'I.O']
+
+// 索引 3 的元组中没有类型安全性
+ourTuple.push('O.O')
+console.log(ourTuple) // [6, false, 'I.O', 'O.O']
+```
+
+您可以看到，新的 valueTuple 仅具有针对初始值的强定义类型：
+
+```ts
+// 定义只读元组
+const ourReadonlyTuple: readonly [number, boolean, string] = [6, true, 'I.O']
+
+// 抛出错误，因为它是只读的。
+ourReadonlyTuple.push('O.O') // type error
+```
+
+## 命名元组
+
+**命名元组**允许我们为每个索引处的值提供上下文。
+
+```ts
+const graph: [x: number, y: number] = [55.2, 41.3]
+```
+
+**命名元组**为索引值表示的内容提供了更多上下文。
+
+## 解构元组
+
+由于元组是数组，我们也可以对它们进行分解。
+
+```ts
+const graph: [number, number] = [55.2, 41.3]
+const [x, y] = graph
+```
diff --git "a/TypeScript/TypeScript \345\207\275\346\225\260.md" "b/TypeScript/TypeScript \345\207\275\346\225\260.md"
new file mode 100644
index 0000000..2901fdb
--- /dev/null
+++ "b/TypeScript/TypeScript \345\207\275\346\225\260.md"	
@@ -0,0 +1,101 @@
+# TypeScript 函数
+
+TypeScript 有一个特定的语法用于输入函数参数和返回值。
+
+## 返回类型
+
+可以显式定义函数返回的值的类型。
+
+```ts
+// :number 指定函数返回一个数字
+function getTime(): number {
+  return new Date().getTime()
+}
+```
+
+如果没有定义返回类型，TypeScript 将尝试通过返回的变量或表达式的类型来推断它。
+
+## void 返回类型
+
+类型 `void` 可用于指示函数不返回任何值。
+
+```ts
+function printHello(): void {
+  console.log('Hello!')
+}
+```
+
+## 参数
+
+函数参数的类型化语法与变量声明类似。
+
+```ts
+function multiply(a: number, b: number) {
+  return a * b
+}
+```
+
+如果没有定义参数类型，TypeScript 将默认使用 `any`，除非有额外的类型信息，如下面的默认参数和类型别名部分所示。
+
+## 可选参数
+
+默认情况下，TypeScript 将假定所有参数都是必需的，但它们可以显式标记为可选。
+
+```ts
+// ? 运算符在这里将参数 c 标记为可选
+function add(a: number, b: number, c?: number) {
+  return a + b + (c || 0)
+}
+```
+
+注意，可选参数不能直接使用，它需要配合[类型收窄](https://github.com/lio-zero/blog/blob/main/TypeScipt/TypeScript%20%E4%B8%AD%E7%9A%84%E7%B1%BB%E5%9E%8B%E6%94%B6%E7%AA%84.md)。
+
+## 默认参数
+
+对于具有默认值的参数，默认值位于类型注释之后：
+
+```ts
+function pow(value: number, exponent: number = 10) {
+  return value ** exponent
+}
+```
+
+TypeScript 还可以从默认值推断类型。
+
+## 命名参数
+
+键入命名参数遵循与键入普通参数相同的模式。
+
+```ts
+function divide({ dividend, divisor }: { dividend: number; divisor: number }) {
+  return dividend / divisor
+}
+```
+
+## Rest 参数
+
+Rest 形参可以像普通形参一样具有类型，但类型必须是数组，因为 Rest 参数始终是数组。
+
+```ts
+function add(a: number, b: number, ...rest: number[]) {
+  return a + b + rest.reduce((p, c) => p + c, 0)
+}
+```
+
+## 类型别名
+
+函数类型可以与具有类型别名的函数分开指定。
+
+这些类型的编写方式与箭头函数类似。
+
+```ts
+type Negate = (value: number) => number
+
+// 在这个函数中，参数 value 会自动从 Negate 类型中获得 number 类型
+const negateFunction: Negate = (value) => value * -1
+```
+
+## 更多资料
+
+- [使用泛型定义函数](https://github.com/lio-zero/blog/blob/main/TypeScript/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E5%87%BD%E6%95%B0.md)
+- [TypeScript interface 中的函数和属性](https://github.com/lio-zero/blog/blob/main/TypeScript/TypeScript%20interface%20%E4%B8%AD%E7%9A%84%E5%87%BD%E6%95%B0%E5%92%8C%E5%B1%9E%E6%80%A7.md)
diff --git "a/TypeScript/TypeScript \345\221\275\345\220\215\347\251\272\351\227\264.md" "b/TypeScript/TypeScript \345\221\275\345\220\215\347\251\272\351\227\264.md"
new file mode 100644
index 0000000..a608e56
--- /dev/null
+++ "b/TypeScript/TypeScript \345\221\275\345\220\215\347\251\272\351\227\264.md"	
@@ -0,0 +1,215 @@
+# TypeScript 命名空间
+
+我们在项目开发中会不断的引入第三方库以方便开发，这会引起一个问题：全局命名空间被污染，导致全局命名空间中组件之间的名称冲突。因此，我们需要使用命名空间组织代码块，以便唯一地标识变量、对象和类。
+
+在本文中，我们将讨论命名空间、何时需要它们，以及如何使用它们来增强 TypeScript 代码的组织。
+
+## 什么是命名空间？
+
+命名空间是组织代码的范例，以便变量、接口、函数或类在局部作用域内组合在一起，以避免全局作用域内组件之间的命名冲突。这是减少全局作用域污染的最常见策略之一。
+
+虽然模块也用于代码组织，但命名空间是一种更加简单的实现。
+
+> **扩展**：模块还提供了一些额外的好处，例如强大的代码隔离、对捆绑的支持、组件的重新导出以及命名空间不提供的组件重命名。
+
+## 为什么需要命名空间？
+
+命名空间具有以下优点：
+
+- 代码复用性
+- 减少全局作用域中的代码量，使其不那么臃肿
+- 第三方库 — 随着依赖第三方库数量不断增加，使用命名空间保护您的代码以防止您的代码和第三方库之间的同名冲突非常重要
+- 分布式开发 — 随着分布式开发的流行，污染几乎是不可避免的，因为开发人员可以更容易地使用公共变量或类名。这会导致命名冲突和全局作用域的污染
+
+## 使用命名空间的设计注意事项
+
+### 隐式依赖顺序
+
+在使用某些外部库时使用命名空间将需要在您的代码和这些库之间隐式实现依赖关系。这导致您自己管理依赖项以便正确加载它们的压力，因为依赖项可能容易出错。
+
+如果您发现自己处于这种情况，使用模块可以减轻您的压力。
+
+### Node.js 应用
+
+对于 Node.js 应用，建议使用模块而不是命名空间，因为模块是 Node 中封装和代码组织的实际标准。
+
+### 非 JavaScript 内容导入
+
+在处理非 JavaScript 内容时，推荐使用模块而不是命名空间，因为一些模块加载器（例如 [SystemJS](https://github.com/systemjs/systemjs) 和 AMD）允许导入非 JavaScript 内容。
+
+### 遗留代码
+
+当使用不再设计但不断修补的代码库时，建议使用命名空间而不是模块。
+
+此外，在移植旧的 JavaScript 代码时，命名空间会派上用场。
+
+### `module` 和 `namespace` 关键字
+
+TypeScript 中**内部模块**现在叫做**命名空间**。**外部模块**现在则简称为**模块**。
+
+这是为了与 [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/) 里的术语保持一致，也就是说 `module module_name { ... }` 相当于现在推荐的写法 `namespace namespace_name { ... }`。
+
+任何使用 `module` 关键字来声明一个内部模块的地方都应该使用 `namespace` 关键字来替换。这就避免了让新的使用者被相似的名称所迷惑。
+
+## 探索 TypeScript 中的命名空间
+
+现在我们对 TypeScript 命名空间是什么以及为什么需要它们有了共同的理解，我们可以更深入地了解如何使用它们。
+
+鉴于 TypeScript 是 JavaScript 的超集，它的命名空间概念源自 JavaScript。
+
+默认情况下，JavaScript 没有命名空间的规定，然而随着 JS 的发展，社区发掘了 IIFE（立即调用函数表达式）方法来实现命名空间：
+
+```js
+var user
+;(function (user) {
+  let name = 'O.O'
+})(user || (user = {}))
+```
+
+这是用于定义命名空间的大量代码。然而，TypeScript 的处理方式有所不同。
+
+### 单文件命名空间
+
+在 TypeScript 中，命名空间是使用 `namespace` 关键字后跟选择的名称来定义的。
+
+单个 TypeScript 文件可以具有所需的任意多个命名空间：
+
+```ts
+namespace User {}
+namespace Person {}
+```
+
+正如我们所看到的，与使用 IIFE 的 JavaScript 命名空间实现相比，TypeScript 命名空间是一个语法糖。
+
+函数、变量和类可以在命名空间内定义，如下所示：
+
+```ts
+namespace User {
+  const name = 'O.O'
+  function getName() {
+    return `${name}`
+  }
+}
+
+namespace Person {
+  const name = 'D.O'
+  function getName() {
+    return `${name}`
+  }
+}
+```
+
+上面的代码允许我们使用相同的变量和函数名而不会发生冲突。
+
+#### 访问命名空间外的变量、对象、函数和类
+
+为了访问命名空间之外的函数或类，必须在函数或类名之前添加 `export` 关键字，如下所示：
+
+```ts
+namespace User {
+  const name = 'O.O'
+  export function getName() {
+    return `${name}`
+  }
+}
+```
+
+注意，如果变量 `name` 在外部不应该被访问，那么不必为它添加 `export` 关键字。
+
+现在，我们可以访问 `getName` 方法，如下所示：
+
+```js
+User.getName() // O.O
+```
+
+#### 嵌套命名空间
+
+命名空间支持嵌套，即你可以将命名空间定义在另外一个命名空间内。
+
+```ts
+namespace namespace_name1 {
+  export namespace namespace_name2 {
+    const name = 'O.O'
+    export function getName() {
+      return `${name}`
+    }
+
+    export interface NumberValidator {
+      age: number
+    }
+  }
+}
+
+// 访问套命名空间
+let user: namespace_name1.namespace_name2.NumberValidator = {
+  age: 20
+}
+
+namespace_name1.namespace_name2.getName() // O.O
+
+console.log(user) // { age: 20 }
+```
+
+#### 命名空间别名
+
+对于深度嵌套的命名空间，命名空间别名非常方便，可以保持整洁。
+
+命名空间别名是使用 `import` 关键字定义的，如下所示：
+
+```ts
+import rename = namespace_name1.namespace_name2
+
+rename.getName() // O.O
+```
+
+### 多文件命名空间
+
+命名空间可以在多个 TypeScript 文件之间共享。可以通过使用三斜杠 `///` 引用它，并在 `reference` 标签的 `path` 属性上指定对应的文件。语法格式如下：
+
+```ts
+/// <reference path="path.ts" />
+```
+
+以下通过一个示例加深印象，假设我们有如下内容：
+
+```ts
+// constant.ts
+export const name = 'O.O'
+
+// user.ts
+/// <reference path="constant.ts" />
+
+export namespace User {
+  export function getName() {
+    return `${name}`
+  }
+}
+```
+
+在这里，我们必须引用 `constant.ts` 文件才能访问 `name`：
+
+```ts
+// index.ts
+/// <reference path="constant.ts" />
+/// <reference path="user.ts" />
+
+User.getName() // O.O
+```
+
+请注意，我们是如何使用最高级别的命名空间开始引用的。这是如何处理多文件接口中的引用。TypeScript 在编译文件时将使用此顺序。
+
+我们可以使用以下命令指示编译器将多个 TypeScript 文件编译成单个 JavaScript 文件：
+
+```bash
+tsc --outFile index.js index.ts
+```
+
+使用此命令，TypeScript 编译器将生成一个名为 `index.js` 的 JavaScript 文件。
+
+## 最后
+
+为了构建可扩展和可重用的 TypeScript 应用，TypeScript 命名空间非常方便，因为它们改进了我们应用的组织和结构。
+
+## 更多资料
+
+[TypeScript handbook: Namespaces](https://www.typescriptlang.org/docs/handbook/namespaces.html)
diff --git "a/TypeScript/TypeScript \345\243\260\346\230\216\346\226\207\344\273\266.md" "b/TypeScript/TypeScript \345\243\260\346\230\216\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..3c8b40a
--- /dev/null
+++ "b/TypeScript/TypeScript \345\243\260\346\230\216\346\226\207\344\273\266.md"	
@@ -0,0 +1,33 @@
+# TypeScript 声明文件
+
+TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 库。
+
+虽然通过直接引用可以调用库的类和方法，但是却无法使用 TypeScript 诸如类型检查等特性。
+
+为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。
+
+使用 `declare` 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对。
+
+`declare` 定义的类型只会用于编译时的检查，编译结果中将会被删除。
+
+声明文件以 `.d.ts` 为后缀：
+
+```txt
+index.d.ts
+```
+
+声明文件模块的语法格式如下：
+
+```ts
+declare module Module_Name {}
+```
+
+TypeScript 引入声明文件语法格式：
+
+```ts
+/// <reference path="lib.d.ts" />
+```
+
+很多流行的第三方库的声明文件不需要我们定义，比如 jQuery 已经有人帮我们定义好了：[jQuery in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery/index.d.ts)。
+
+[TypeScript DefinitelyTyped 项目](https://github.com/lio-zero/blog/blob/main/TypeScript/TypeScript%20DefinitelyTyped%20%E9%A1%B9%E7%9B%AE.md)
diff --git "a/TypeScript/TypeScript \345\267\245\345\205\267\347\261\273\345\236\213 \342\200\224 Utility Types.md" "b/TypeScript/TypeScript \345\267\245\345\205\267\347\261\273\345\236\213 \342\200\224 Utility Types.md"
new file mode 100644
index 0000000..ad0b6bb
--- /dev/null
+++ "b/TypeScript/TypeScript \345\267\245\345\205\267\347\261\273\345\236\213 \342\200\224 Utility Types.md"	
@@ -0,0 +1,140 @@
+# TypeScript 工具类型 — Utility Types
+
+TypeScript 附带了大量内置工具类型，可以帮助进行一些常见的类型操作，通常称为 [Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html)。
+
+本章介绍了最常用的工具类型。
+
+## Partial
+
+`Partial` 将对象中的所有属性更改为**可选**。
+
+```ts
+interface Point {
+  x: number
+  y: number
+}
+
+let pointPart: Partial<Point> = {} // Partial 允许 x 和 y 是可选的
+pointPart.x = 10
+```
+
+## Required
+
+`Required` 将对象中的所有属性更改为**必选**。与 `Partial` 相反。
+
+```ts
+interface User {
+  name?: string
+  age?: number
+}
+
+const user: User = { name: 'O.O' }
+const user2: Required<User> = { name: 'O.O' } // Type Error
+```
+
+## Readonly
+
+`Readonly` 将对象中的所有属性更改为**只读**。
+
+```ts
+interface User {
+  name?: string
+  age?: number
+}
+
+const user: User = { name: 'O.O' }
+const user2: Readonly<User> = { name: 'O.O' }
+
+user2.name = 'D.O' // Type Error
+```
+
+## Record
+
+`Record` 是定义具有特定键类型和值类型的对象类型的快捷方式。
+
+```ts
+const nameAgeMap: Record<string, number> = {
+  KAI: 27,
+  LAY: 30
+}
+```
+
+`Record<string, number>` 相当于 `{ [key: string]: number }`
+
+## Omit
+
+`Omit` 从对象类型中删除指定键。
+
+```ts
+interface Person {
+  name: string
+  age: number
+  location?: string
+}
+
+// Omit 从类型中删除了 age 和 location，不能在此处定义
+const user: Omit<Person, 'age' | 'location'> = {
+  name: 'D.O'
+}
+```
+
+## Pick
+
+`Pick` 从对象类型中删除除指定键以外的所有键。与 `Omit` 相反。
+
+```ts
+interface Person {
+  name: string
+  age: number
+  location?: string
+}
+
+// Pick 只保留了 name，因此 age 和 location 已从类型中删除，无法在此处定义
+const user: Pick<Person, 'name'> = {
+  name: 'O.O'
+}
+```
+
+## Exclude
+
+`Exclude` 从联合中删除类型。
+
+```ts
+type Primitive = string | number | boolean
+
+const value: Exclude<Primitive, string> = true // 此处不能使用字符串，因为 Exclude 将其从类型中删除。
+```
+
+## ReturnType
+
+`ReturnType` 获取函数类型的返回值类型。
+
+```ts
+type foo = () => {
+  x: number
+  y: number
+}
+
+const point: ReturnType<foo> = {
+  x: 10,
+  y: 20
+}
+```
+
+## Parameters
+
+`Parameters` 将函数类型的参数类型提取为数组。
+
+```ts
+type PointPrinter = (p: { x: number; y: number }) => void
+const point: Parameters<PointPrinter>[0] = {
+  x: 10,
+  y: 20
+}
+```
+
+## 更多资料
+
+- 更多工具类型的详细内容可查阅 TS 官网的 [Utility Types 章节](https://www.typescriptlang.org/docs/handbook/utility-types.html#requiredtype)。
+- 推荐一个不错的 TypeScript 项目 [type-challenges](https://github.com/type-challenges/type-challenges)。
+- [Ts 高手篇：22 个示例深入讲解 Ts 最晦涩难懂的高级类型工具](https://juejin.cn/post/6994102811218673700)
diff --git "a/TypeScript/TypeScript \346\226\207\345\255\227\350\201\224\345\220\210\347\261\273\345\236\213\344\270\216\345\255\227\347\254\246\344\270\262\346\236\232\344\270\276.md" "b/TypeScript/TypeScript \346\226\207\345\255\227\350\201\224\345\220\210\347\261\273\345\236\213\344\270\216\345\255\227\347\254\246\344\270\262\346\236\232\344\270\276.md"
new file mode 100644
index 0000000..f78c273
--- /dev/null
+++ "b/TypeScript/TypeScript \346\226\207\345\255\227\350\201\224\345\220\210\347\261\273\345\236\213\344\270\216\345\255\227\347\254\246\344\270\262\346\236\232\344\270\276.md"	
@@ -0,0 +1,126 @@
+# TypeScript 文字联合类型与字符串枚举
+
+在 TypeScript 中，有几种方法可以枚举类型的可能值。让我们考虑一个情况，我们的网站必须支持不同的主题，包括 `default`、`light` 和 `dark`。
+
+它们可以通过以下方法之一定义：
+
+- 使用文字字符串类型的并集
+
+```ts
+type Theme = 'DEFAULT' | 'LIGHT' | 'DARK'
+```
+
+- 使用枚举
+
+```ts
+enum Theme {
+  DEFAULT,
+  LIGHT,
+  DARK
+}
+```
+
+## 区别
+
+TypeScript 不会为文字字符串类型的并集生成代码。因此，生成的代码将具有较小的大小。
+
+以下是 TypeScript 编译 `Theme` 枚举时生成的代码：
+
+```ts
+var Theme
+;(function (Theme) {
+  Theme[(Theme['DEFAULT'] = 0)] = 'DEFAULT'
+  Theme[(Theme['LIGHT'] = 1)] = 'LIGHT'
+  Theme[(Theme['DARK'] = 2)] = 'DARK'
+})(Theme || (Theme = {}))
+```
+
+在使用联合类型的情况下，创建新变量时仍必须键入完整字符串，例如：
+
+```ts
+type Theme = 'DEFAULT' | 'LIGHT' | 'DARK'
+const theme: Theme = 'DEFAULT'
+```
+
+像 VS Code 这样的流行编辑器可以帮助我们快速地从可能的值列表中选择值，但是如果我们想将值重构为其他值，我们必须在所有位置手动更改该值。
+
+另一方面，当您重构代码或开发库时，使用 `enum` 会带来一些显著的好处。让我们来看一个简单的用例，您的库提供以下功能来将网站切换到给定的主题：
+
+```ts
+const switchTheme = (theme: Theme) => {
+  // ...
+}
+
+export { Theme, switchTheme }
+```
+
+用户现在可以将特定主题传递给 `switchTheme` 函数，而无需考虑其背后的真正值：
+
+```ts
+import { Theme, switchTheme } from 'your-lib'
+
+switchTheme(Theme.DARK)
+```
+
+与 `switchTheme('DARK')` 相比，上面的调用是多么方便和安全。
+
+## 很高兴知道
+
+自 TypeScript 3.4 起，我们可以使用 `const` 断言。
+
+```ts
+const Theme = {
+  DEFAULT: 'Default',
+  LIGHT: 'Light',
+  DARK: 'Dark'
+} as const
+
+type Theme = typeof Theme[keyof typeof Theme]
+
+let darkTheme: Theme = Theme.DARK
+let lightTheme: Theme = 'Light'
+const invalidTheme: Theme = 'Blue' // type error
+```
+
+## 建议
+
+如果未设置枚举的值，则默认情况下，这些值将设置为递增数。
+
+因此，`Theme.DEFAULT`、`Theme.LIGHT` 和 `Theme.DARK` 的值分别为 0、1 和 2。调试更加困难：
+
+```ts
+console.log(Theme.DARK) // 2
+```
+
+即使我们为枚举值设置了数字，我们仍然可以为类型为枚举的变量设置无效值：
+
+```ts
+enum Theme {
+  DEFAULT = 0,
+  LIGHT = 1,
+  DARK = 2
+}
+
+// TypeScript 不会抛出错误
+const theme: Theme.DEFAULT = 3
+```
+
+由于这些原因，建议对枚举值使用字符串文字。`Theme` 枚举应如下所示：
+
+```ts
+enum Theme {
+  DEFAULT = 'Default',
+  LIGHT = 'Light',
+  DARK = 'Dark'
+}
+
+console.log(Theme.DARK) // 'Dark'
+
+// 不能将类型 Default 分配给类型 Theme.DEFAULT
+let theme: Theme.DEFAULT = 'Default' // type error
+```
+
+## 更多资料
+
+- [TypeScript 基础 — 枚举](https://github.com/lio-zero/blog/blob/master/TypeScipt/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E6%9E%9A%E4%B8%BE.md)
+- [TypeScript 基础 — 联合类型](https://github.com/lio-zero/blog/blob/master/TypeScipt/TypeScript%20%E5%9F%BA%E7%A1%80%20%E2%80%94%20%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B.md)
diff --git "a/TypeScript/TypeScript \346\236\232\344\270\276.md" "b/TypeScript/TypeScript \346\236\232\344\270\276.md"
new file mode 100644
index 0000000..eddbe7b
--- /dev/null
+++ "b/TypeScript/TypeScript \346\236\232\344\270\276.md"	
@@ -0,0 +1,300 @@
+# TypeScript 枚举
+
+## 什么是枚举？
+
+在大多数面向对象的编程语言（如 C、C# 和 Java）中，有一种数据类型我们称为枚举 — 简称为 [`enum`](https://www.typescriptlang.org/docs/handbook/enums.html)。Java 枚举是一种特殊的 Java 类，用于定义常量集合。然而，JavaScript 没有 `enum` 数据类型，但幸运的是，它们现在[在 TypeScript 2.4 版本中可用](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html)。
+
+枚举是一组可以采用数字或字符串形式的命名常量。与 TypeScript 中可用的某些类型不同，枚举是经过预处理的，不会在编译时或运行时进行测试。
+
+```ts
+enum State {
+  on = 'ON',
+  off = 'OFF'
+}
+```
+
+`enum` 类型是对 JavaScript 标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。
+
+```ts
+enum Color {
+  Red,
+  Green,
+  Blue
+}
+
+let c: Color = Color.Green
+```
+
+## 为什么要枚举？
+
+枚举只是在 TypeScript 中组织代码的一种有用方式。以下是枚举派上用场的一些原因：
+
+- 使用枚举，你可以创建易于关联的常量，使常量更加清晰
+- 开发人员可以自由地在 JavaScript 中创建内存高效的自定义常量。正如我们所知，JavaScript 不支持枚举，但 TypeScript 可以帮助我们访问它们
+- TypeScript 枚举使用 JavaScript 中的内联代码节省了运行时间和编译时间
+- TypeScript 枚举还提供了我们以前只有在 Java 等语言中才有的一定灵活性。这种灵活性使我们可以轻松地表达和记录我们的意图和用例
+
+## TypeScript 枚举的类型
+
+TypeScript 共有三种枚举类型：
+
+- 数字枚举
+- 字符串枚举
+- 异构枚举
+
+## 数字枚举
+
+数字枚举的成员是数字。
+
+```ts
+enum Days {
+  Sun,
+  Mon,
+  Tue
+}
+
+console.log(Days) // { '0': 'Sun', '1': 'Mon', '2': 'Tue', Sun: 0, Mon: 1, Tue: 2 }
+```
+
+默认情况下，编译器会自动为每一个成员分配从 0 开始的数字。
+
+我们也可以手动指定成员的值。
+
+```ts
+enum Color {
+  Red = 1,
+  Green,
+  Blue
+}
+
+console.log(Color) // { '1': 'Red', '2': 'Green', '3': 'Blue', Red: 1, Green: 2, Blue: 3 }
+```
+
+可以看到，我们为第一个成员添加为 1，其余成员会依次递增 1。
+
+我们也可以将其设置为一个没有规则顺序：
+
+```ts
+enum Color {
+  Red = 1,
+  Green = 10,
+  Blue = 8
+}
+
+console.log(Color) // { '1': 'Red', '10': 'Green', '8': 'Blue', Red: 1, Green: 10, Blue: 8 }
+```
+
+### 常量枚举
+
+常量枚举其实就是在 `enum` 关键字前使用 `const` 修饰符，它会在**编译阶段被移除**。
+
+常量枚举的主要作用是在编译时优化代码。当 TS 编译器发现常量枚举时，它会直接在编译时将枚举成员的值替换为对应的字面量，这样可以减少运行时的常量查找操作。
+
+如果你想提高数字枚举的性能，可以将它们声明为常量。我们来看一个简单的示例：
+
+```ts
+enum Month {
+  Jan,
+  Feb,
+  Mar
+}
+
+console.log(Month.Jan) // 0
+```
+
+当编译成 JavaScript 时，运行时会查找 `Month` 和 `Month.Jan`。为了在运行时获得最佳性能，可以将枚举设置为常量，如下所示：
+
+```ts
+const enum Month {
+  Jan,
+  Feb,
+  Mar
+}
+
+console.log(Month.Jan) // 0
+```
+
+编译时使用常量生成的 JavaScript 为：
+
+```js
+console.log(0 /* Jan */)
+```
+
+如果我们加上 `console.log(Month)`，它在编译阶段将会报错。
+
+常量枚举成员在使用的地方被内联进来，且常量枚举不可能有**计算成员**。
+
+```ts
+const enum Directions {
+  Up,
+  Right = 3,
+  UpRight = 3 + 1,
+  RightDown = Directions.Right + 2,
+  RightUp = 'hello'.length // Error
+}
+```
+
+其实，当你引用到上面的错误代码时，VS Code 编辑器已经智能的提示你当前代码有误：**常量枚举成员初始值设定项只能包含文字值和其他计算的枚举值**。
+
+> **总结**：当我们不需要整个对象，而需要对象的某个值时，就可以使用常量枚举，这样就可以避免在编译时生成多余的代码和间接引用。
+
+### 计算枚举
+
+数字枚举的值可以是常量，也可以是求值的，就像 TypeScript 中的任何其他数字数据类型一样。可以使用计算值定义或初始化数值枚举：
+
+```ts
+enum Weekend {
+  Friday = 1,
+  Saturday = getDate('TGIF'),
+  Sunday = Saturday * 40
+}
+
+function getDate(day: string): number {
+  if (day === 'TGIF') {
+    return 3
+  }
+}
+
+Weekend.Saturday // 3
+Weekend.Sunday // 120
+```
+
+当枚举包含**计算成员**和**常量成员**的混合时，未初始化的枚举成员要么排在第一位，要么必须排在其他具有数值常量的初始化成员之后。
+
+忽略上述规则可能会导致初始化错误，请记住相应地重新排列枚举成员。
+
+## 字符串枚举
+
+字符串枚举的成员是字符串。
+
+```ts
+enum State {
+  Success = '成功',
+  Fail = '失败'
+}
+
+console.log(State) // { Success: '成功', Fail: '失败' }
+```
+
+如果我们为第一个枚举成员初始化为字符串，那么其他成员也必须初始化表达式，且字符串枚举是无法使用反向映射的，也就是不能枚举值获取到枚举成员。
+
+当然，你也可以省略赋值，让编译器自动使用成员的名称作为值。
+
+## 异构枚举
+
+异构枚举是指枚举成员的值可以是数字或字符串。
+
+例如，我们可以使用异构枚举来表示一组错误代码，如下所示：
+
+```ts
+enum ErrorCode {
+  Success = 0,
+  NotFound = 'NOT_FOUND',
+  Unauthorized = 'UNAUTHORIZED'
+}
+
+console.log(ErrorCode.Success) // 0
+console.log(ErrorCode.NotFound) // 'NOT_FOUND'
+```
+
+## 枚举成员
+
+枚举成员的值不可修改。
+
+```ts
+enum State {
+  success = '成功',
+  fail = '失败'
+}
+
+State.success = '等待成功' // 无法分配到 "success" ，因为它是只读属性。
+```
+
+枚举成员可以分为**常量枚举和计算枚举**：
+
+- **常量枚举（const enum）** — 常量枚举是指枚举成员的值是常量表达式，而且在编译时已经计算出结果，然后以常量的形式，出现在运行时环境。常量枚举只能包含常量成员，不能包含计算成员。
+- **计算枚举（computed enum）** — 顾名思义，需要计算的枚举成员，这些枚举成员的值不会在编译阶段计算，而是保留到程序的执行阶段。
+
+在上文数字枚举内我们已经提到。
+
+## 常规枚举与常量枚举的区别
+
+可以使用或不使用 `const` 修饰符声明枚举。
+
+常规枚举：
+
+```ts
+enum Direction {
+  Up,
+  Down,
+  Left,
+  Right
+}
+```
+
+常量枚举：
+
+```ts
+const enum Light {
+  Red,
+  Green,
+  Blue
+}
+```
+
+### 区别
+
+TypeScript 将常规枚举编译为 JavaScript 对象。给定上面的 `Direction` 枚举，它将被编译为以下 JavaScript 代码：
+
+```ts
+var Direction
+;(function (Direction) {
+  Direction[(Direction['Up'] = 0)] = 'Up'
+  Direction[(Direction['Down'] = 1)] = 'Down'
+  Direction[(Direction['Left'] = 2)] = 'Left'
+  Direction[(Direction['Right'] = 3)] = 'Right'
+})(Direction || (Direction = {}))
+```
+
+另一方面，`Light` 枚举根本不会被编译。如果不使用枚举，你将看不到任何内容。
+
+在其他情况下，所有枚举引用都被内联代码替换。例如 `console.log(Light.Red)` 编译为 `console.log(0 /* Red */)`。
+
+由于没有在运行时生成与 `const enum` 关联的 JavaScript 对象，因此不可能在 `const enum` 值上循环。
+
+当我们尝试迭代 `Light` 枚举时，TypeScript 将抛出一个错误：
+
+```js
+// ERROR
+for (let i in Light) {
+  console.log(i)
+}
+```
+
+## 你应该知道
+
+如果不希望 TypeScript 去除为 `const enum` 生成的代码，可以使用 `preserveConstEnums` 编译器标志。
+
+```json
+{
+  "compilerOptions": {
+    "preserveConstEnums": true
+  }
+}
+```
+
+使用 `keyof` 和 `typeof` 的组合，可以联合枚举类型的成员。
+
+```ts
+enum State {
+  Success = '成功',
+  Fail = '失败'
+}
+
+type OnlyState = keyof typeof State
+// => type OnlyState = "Success" | "Fail"
+
+const s1: OnlyState = 'Success'
+const s2: OnlyState = 'Fail'
+const s3: OnlyState = 'Pending' // Type Error
+```
diff --git "a/TypeScript/TypeScript \346\263\233\345\236\213.md" "b/TypeScript/TypeScript \346\263\233\345\236\213.md"
new file mode 100644
index 0000000..6b31d76
--- /dev/null
+++ "b/TypeScript/TypeScript \346\263\233\345\236\213.md"	
@@ -0,0 +1,164 @@
+# TypeScript 泛型
+
+泛型允许创建**类型变量**，可以用来创建不需要显式定义所使用类型的类、函数、类型别名或接口。
+
+它可以使编写可重用代码变得更容易。
+
+## 函数
+
+带有函数的泛型有助于生成更通用的方法，从而更准确地表示所使用和返回的类型。
+
+```ts
+function foo<S, T>(v1: S, v2: T): [S, T] {
+  return [v1, v2]
+}
+
+foo<string, number>('hello', 20) // ['hello', 20]
+```
+
+可以看到，`S` 和 `T` 相当于一个占位，在调用时，我们会显示的为泛型传递一个类型，类似于类型系统的传参，以便它能正确的解析类型。
+
+这种方式也被开发者称为泛型的**正向推导**。
+
+既然有正向推导，那么必然也会有**反向推导**。例如：
+
+```ts
+function foo<T>(v: T): T {
+  return v
+}
+
+foo('hello')
+```
+
+尝试运行它，你会发现，在没有显示的传递一个类型时，**TypeScript 依然可以从函数参数正确推断出泛型参数的类型**。
+
+**为什么呢？**
+
+因为 `foo` 函数所有被使用到的泛型 `T` 之间是互相关联的，当我们调用函数并传入参数时，它们将被统一推断出来。
+
+如果您使用的是 VS Code 编辑器，这一点尤其明显：
+
+![推断泛型参数的类型](https://upload-images.jianshu.io/upload_images/18281896-dc4c2dbc2cb7237a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 类
+
+泛型可以用来创建泛型类，比如 Map。
+
+```ts
+class NamedValue<T> {
+  private _value: T | undefined
+
+  constructor(private name: string) {}
+
+  public setValue(value: T) {
+    this._value = value
+  }
+
+  public getValue(): T | undefined {
+    return this._value
+  }
+
+  public toString(): string {
+    return `${this.name}: ${this._value}`
+  }
+}
+
+let value = new NamedValue<number>('myNumber')
+value.setValue(10)
+console.log(value.toString()) // myNumber: 10
+```
+
+如果在构造函数参数中使用泛型参数，则 TypeScript 还可以推断泛型参数的类型。
+
+## 类型别名
+
+类型别名中的泛型允许创建更可重用的类型。
+
+```ts
+type Wrapped<T> = { value: T }
+
+const wrappedValue: Wrapped<number> = { value: 10 }
+```
+
+这也适用于具有 `interface Wrapped<T> { ... }` 语法的接口。
+
+## 默认类型
+
+泛型可以指定默认值，如果没有指定或推断出其他值，则使用默认值。
+
+```ts
+class NamedValue<T = string> {
+  private _value: T | undefined
+
+  constructor(private name: string) {}
+
+  public setValue(value: T) {
+    this._value = value
+  }
+
+  public getValue(): T | undefined {
+    return this._value
+  }
+
+  public toString(): string {
+    return `${this.name}: ${this._value}`
+  }
+}
+
+let value = new NamedValue('myNumber')
+value.setValue('myValue')
+console.log(value.toString()) // myNumber: myValue
+```
+
+## 约束
+
+当我们使用泛型时，我们可以使用约束来应用于泛型类型参数。
+
+要实现它，我们可以使用 `extends` 关键字，它可以向泛型中添加约束以限制允许的内容。这些约束使得在使用泛型类型时可以依赖更具体的类型。
+
+```ts
+function foo<T extends string | number>(arg: T): T {
+  return arg
+}
+
+foo('a') // a
+foo(1) // 1
+foo(true) // TypeError
+```
+
+可以看到，我们限制了泛型 `T` 只能继承 `string` 和 `number` 类型，其他任何类型都将抛出错误。
+
+它可以与默认类型结合使用。
+
+另外，`extends` 关键字仅适用于接口和类，否则会抛出错误。
+
+值得注意的是，如果**一开始**没有明确指定泛型参数为哪种类型，我们无法操作它的属性或方法。例如：
+
+```ts
+function foo<T>(arg: T): T {
+  console.log(arg.length) // TypeError
+}
+
+foo<string>('hello')
+```
+
+可以看到，即使你在调用时，指定了泛型类型，它依然会报出类型错误。需要配合 `extends` 关键字或类型推导。
+
+## 工具类型
+
+泛型（Generics）通常被用来设置一些高级类型。
+
+我们之前写过的一篇 [TypeScript 工具类型 — Utility Types](https://github.com/lio-zero/blog/blob/main/TypeScript/TypeScript%20%E5%B7%A5%E5%85%B7%E7%B1%BB%E5%9E%8B%20%E2%80%94%20Utility%20Types.md)，它们都是使用**泛型**实现。
+
+## 何时使用泛型？
+
+要确定何时使用泛型类型，可以考虑两件事：
+
+- 函数或类是否需要处理各种数据类型？
+- 函数或类是否会在多个地方使用？
+
+## 更多资料
+
+- [TypeScript Generics for People Who Gave Up on Understanding Generics](https://ts.chibicode.com/generics/)
+- [Understanding TypeScript Generics](https://www.smashingmagazine.com/2020/10/understanding-typescript-generics/)
+- [轻松拿下 TS 泛型](https://juejin.cn/post/7064351631072526350)
diff --git "a/TypeScript/TypeScript \347\261\273.md" "b/TypeScript/TypeScript \347\261\273.md"
new file mode 100644
index 0000000..094864f
--- /dev/null
+++ "b/TypeScript/TypeScript \347\261\273.md"	
@@ -0,0 +1,210 @@
+# TypeScript 类
+
+TypeScript 向 JavaScript 类添加类型和可访问性修饰符。
+
+## 类成员的类型
+
+类的成员（属性和方法）使用类型注释进行类型化，类似于变量。
+
+```ts
+class Person {
+  name: string
+}
+
+const person = new Person()
+person.name = 'O.O'
+```
+
+## 类成员的可访问性
+
+类成员也会被赋予影响可访问性的特殊修饰符。
+
+TypeScript 中有三个主要的可访问性修饰符：
+
+- `public` —（默认）允许从任何地方访问类成员
+- `private` — 只允许从类内访问类成员
+- `protected` — 允许从类成员本身以及继承它的任何类访问该类成员
+
+```ts
+class Person {
+  private name: string
+
+  public constructor(name: string) {
+    this.name = name
+  }
+
+  public getName(): string {
+    return this.name
+  }
+}
+
+const person = new Person('O.O')
+
+console.log(person.getName()) // O.O
+console.log(person.name) // person.name 是私有的，因此无法从类外部访问
+```
+
+类中的 `this` 关键字通常指的是该类的实例。
+
+## 参数属性
+
+TypeScript 通过向参数添加可访问性修饰符，提供了一种在构造函数中定义类成员的方便方法。
+
+```ts
+class Person {
+  // name 是私有成员变量
+  public constructor(private name: string) {}
+  public getName(): string {
+    return this.name
+  }
+}
+
+const person = new Person('O.O')
+console.log(person.name)
+console.log(person.getName()) // O.O
+```
+
+## Readonly
+
+与数组类似，`readonly` 关键字可以防止更改类成员。
+
+```ts
+class Person {
+  private readonly name: string
+
+  public constructor(name: string) {
+    // name 不能在初始定义之后更改，初始定义必须在其声明或构造函数中。
+    this.name = name
+  }
+
+  public getName(): string {
+    // this.name = 'D.O' // error
+    return this.name
+  }
+}
+
+const person = new Person('O.O')
+console.log(person.getName()) // O.O
+```
+
+## `implements` 关键字
+
+接口可以用来定义类必须遵循 `implements` 关键字的类型。
+
+```ts
+interface Shape {
+  getArea: () => number
+}
+
+class Rectangle implements Shape {
+  public constructor(
+    protected readonly width: number,
+    protected readonly height: number
+  ) {}
+
+  public getArea(): number {
+    return this.width * this.height
+  }
+}
+```
+
+一个类可以通过在 `implements` 后面列出每个接口来继承多个接口，每个接口之间用逗号分隔，例如：`class Rectangle implements Shape, Colored {`
+
+## `extends` 关键字
+
+类可以通过 `extends` 关键字相互继承。一个类只能继承另一个类。
+
+```ts
+interface Shape {
+  getArea: () => number
+}
+
+class Rectangle implements Shape {
+  public constructor(
+    protected readonly width: number,
+    protected readonly height: number
+  ) {}
+
+  public getArea(): number {
+    return this.width * this.height
+  }
+}
+
+class Square extends Rectangle {
+  public constructor(width: number) {
+    super(width, width)
+  }
+
+  // getArea 从 Rectangle 中继承
+}
+```
+
+## `override` 关键字
+
+当一个类继承另一个类时，它可以用相同的名称替换父类的成员。
+
+较新版本的 TypeScript 允许使用 `override` 关键字显式标记此项。
+
+```ts
+interface Shape {
+  getArea: () => number
+}
+
+class Rectangle implements Shape {
+  // 为这些成员使用 protected 允许从该类扩展而来的类访问，比如 Square
+  public constructor(
+    protected readonly width: number,
+    protected readonly height: number
+  ) {}
+
+  public getArea(): number {
+    return this.width * this.height
+  }
+
+  public toString(): string {
+    return `Rectangle[width=${this.width}, height=${this.height}]`
+  }
+}
+
+class Square extends Rectangle {
+  public constructor(width: number) {
+    super(width, width)
+  }
+
+  // toString 替换 Rectangle 中的 toString
+  public override toString(): string {
+    return `Square[width=${this.width}]`
+  }
+}
+```
+
+默认情况下，重写方法时，`override` 关键字是可选的，仅有助于防止意外重写不存在的方法。使用设置 `noImplicitOverride` 强制在重写时使用它。
+
+## 抽象类
+
+类的编写方式可以允许它们用作其他类的基类，而不必实现所有成员。这是通过使用 `abstract` 关键字来实现的。未实现的成员也使用 `abstract` 关键字。
+
+```ts
+abstract class Polygon {
+  public abstract getArea(): number
+
+  public toString(): string {
+    return `Polygon[area=${this.getArea()}]`
+  }
+}
+
+class Rectangle extends Polygon {
+  public constructor(
+    protected readonly width: number,
+    protected readonly height: number
+  ) {
+    super()
+  }
+
+  public getArea(): number {
+    return this.width * this.height
+  }
+}
+```
+
+抽象类不能直接实例化，因为它们没有实现所有成员。
diff --git "a/TypeScript/TypeScript \347\261\273\345\236\213\346\226\255\350\250\200\357\274\210Type Assertion\357\274\211.md" "b/TypeScript/TypeScript \347\261\273\345\236\213\346\226\255\350\250\200\357\274\210Type Assertion\357\274\211.md"
new file mode 100644
index 0000000..76d5b92
--- /dev/null
+++ "b/TypeScript/TypeScript \347\261\273\345\236\213\346\226\255\350\250\200\357\274\210Type Assertion\357\274\211.md"	
@@ -0,0 +1,35 @@
+# TypeScript 类型断言（Type Assertion）
+
+类型断言可以用来手动指定一个值具体的类型，即允许变量从一种类型更改为另一种类型。
+
+当您比 TS 更了解某个值的类型，并且需要指定更具体的类型时，我们可以使用**类型断言**。
+
+类型断言有两种形式。
+
+## "尖括号" 语法：<类型>值
+
+```ts
+let someValue: any = 'this is a string'
+let strLength: number = (<string>someValue).length
+```
+
+## as 语法：值 as 类型
+
+```ts
+let someValue: any = 'this is a string'
+let strLength: number = (someValue as string).length
+```
+
+> **注意**：这两种形式是等价的。但当你在 TypeScript 里使用 JSX 时，只有 `as` 语法断言是被允许的。所以，这里推荐使用 `as` 来进行类型断言。
+
+## 示例
+
+通常情况下，我们使用 `document.querySelector()` 方法返回值类型为 `Element`。
+
+假设，我们明确 `.image` 是一个图片元素，我们可以将其类型明确指定为 `HTMLImageElement`：
+
+```ts
+let img = document.querySelector('.image') as HTMLImageElement
+```
+
+> **小技巧**：通过 `console.dir()` 打印 DOM 对象， 我们可以查看该元素的类型。
diff --git "a/TypeScript/TypeScript \347\261\273\345\236\213\350\260\223\350\257\215.md" "b/TypeScript/TypeScript \347\261\273\345\236\213\350\260\223\350\257\215.md"
new file mode 100644
index 0000000..e11c04d
--- /dev/null
+++ "b/TypeScript/TypeScript \347\261\273\345\236\213\350\260\223\350\257\215.md"	
@@ -0,0 +1,127 @@
+# TypeScript 类型谓词
+
+TypeScript 中的[类型谓词（Type Predicates）](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates)是一种特殊的类型保护，用于在运行时检查值是否满足某个条件，帮助你根据条件缩小类型范围。它允许在编译器不确定类型的情况下进行类型推断。
+
+它与 Type Guards 类似，但在函数上工作。如果函数返回 `true`，则将参数的类型更改为更有用的类型。
+
+让我们从一个基本的例子开始。假设你有一个函数，用于检查某个值是否为 `string` 类型：
+
+```ts
+function isString(s) {
+  return typeof s === 'string'
+}
+```
+
+在另一个函数中使用 `isString` 函数：
+
+```ts
+function toUpperCase(x: unknown) {
+  if (isString(x)) {
+    x.toUpperCase() // x 的类型 unknown
+  }
+}
+```
+
+TypeScript 会抛出一个错误。我们可以确定此时 `x` 的类型是 `string`。但是，由于验证封装在函数中，所以 `x` 的类型不会改变（与 Type Guard 相反）。
+
+让我们显式地告诉 TypeScript，如果 `isString` 的值为 `true`，则形参的类型是一个字符串：
+
+```ts
+function isString(s): s is string {
+  return typeof s === 'string'
+}
+```
+
+类型谓词使用 `is` 关键字表示。
+
+TypeScript 现在知道我们在 `toUpperCase` 函数中处理的是字符串。
+
+```ts
+function toUpperCase(x: unknown) {
+  if (isString(x)) {
+    x.toUpperCase() // ✅ x 是字符串
+  }
+}
+```
+
+## 缩小集合范围
+
+这不仅可以帮助你查找未知类型或多个类型，还可以缩小类型内的集合。我们来做一个掷骰子的程序。每次你掷出一个六，你就赢了。
+
+```ts
+function pipsAreValid(pips: number) {
+  // 我们检查每个离散值，因为数字也可以是介于 1 和 2 之间的值。
+  return (
+    pips === 1 ||
+    pips === 2 ||
+    pips === 3 ||
+    pips === 4 ||
+    pips === 5 ||
+    pips === 6
+  )
+}
+
+function evalThrow(count: number) {
+  if (pipsAreValid(count)) {
+    switch (count) {
+      case 1:
+      case 2:
+      case 3:
+      case 4:
+      case 5:
+        console.log('Oh!')
+        break
+      case 6:
+        console.log('赢了!')
+        break
+      case 7:
+        // TypeScript 在这里没有报错，尽管 count 不可能是 7
+        console.log('这行不通!')
+        break
+    }
+  }
+}
+```
+
+该程序一开始看起来不错，但从类型的角度来看有一些问题：`count` 是 `number` 类型。这可以作为输入参数。我们马上验证 `count` 是一个介于 1 和 6 之间的数字。一旦我们验证了这一点，`count` 就不再是任何数字了。它被缩小为六个值的离散集合。
+
+所以从 `switch` 语句开始，我的类型已经错了！为了避免任何进一步的复杂情况，让我们使用**联合类型**将数字集缩小到这六个离散值：
+
+```ts
+type Dice = 1 | 2 | 3 | 4 | 5 | 6
+
+function pipsAreValid(pips: number): pips is Dice {
+  return (
+    pips === 1 ||
+    pips === 2 ||
+    pips === 3 ||
+    pips === 4 ||
+    pips === 5 ||
+    pips === 6
+  )
+}
+
+function evalThrow(count: number) {
+  if (pipsAreValid(count)) {
+    switch (count) {
+      case 1:
+      case 2:
+      case 3:
+      case 4:
+      case 5:
+        console.log('Oh!')
+        break
+      case 6:
+        console.log('赢了!')
+        break
+      case 7:
+        // error：7 不是联合类型的
+        // 类型 7 不可与类型 Dice 进行比较
+        console.log('这行不通!')
+        break
+    }
+  }
+}
+```
+
+这对我们来说更为安全。当然，这种“类型转换”可以是任何有助于增强应用程序的东西。即使验证了复杂的对象，也可以将参数缩小到特定的类型，并确保它们与代码的其余部分保持一致。非常有用，尤其是当你依赖很多函数时。
diff --git "a/TypeScript/TypeScript \347\261\273\345\236\213\350\275\254\346\215\242.md" "b/TypeScript/TypeScript \347\261\273\345\236\213\350\275\254\346\215\242.md"
new file mode 100644
index 0000000..171b41d
--- /dev/null
+++ "b/TypeScript/TypeScript \347\261\273\345\236\213\350\275\254\346\215\242.md"	
@@ -0,0 +1,48 @@
+# TypeScript 类型转换
+
+在使用类型时，有时需要重写变量的类型，例如库提供了错误的类型。
+
+强制转换是重写类型的过程。
+
+## 使用 `as` 类型转换
+
+转换变量的一种直接方法是使用 `as` 关键字，它将直接更改给定变量的类型。
+
+```ts
+// 当不确定变量的数据类型时，我们会使用 unknown 类型。
+let x: unknown = 'hello'(x as string).length // 5
+```
+
+强制转换实际上并不会更改变量中的数据类型，例如，以下代码的工作方式与预期不符，因为变量 `x` 是一个数字。
+
+```ts
+let x: unknown = 4(x as string).length // 打印 undefined，因为数字没有长度
+```
+
+TypeScript 仍会尝试检查类型转换，以防止看起来不正确的类型转换。例如，以下内容将引发类型错误，因为 TypeScript 知道，如果不转换数据，将字符串转换为数字是没有意义的:
+
+```ts
+;(4 as string).length // Error
+```
+
+如果你使用 VS Code 编辑器，它也会提醒我们：
+
+> 类型 "number" 到类型 "string" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。ts(2352)
+
+## 使用 `<>` 类型转换
+
+使用 `<>` 与使用 `as` 进行转换的效果相同。
+
+```ts
+let x: unknown = 'hello'(<string>x).length
+```
+
+这种类型的转换不适用于 TSX，例如在处理 React 文件时。
+
+## 强制转换
+
+要覆盖 TypeScript 在强制转换时可能引发的类型错误，请先强制转换为 `unknown`，然后再转换为目标类型。
+
+```ts
+let n: unknown = 4(n as unknown as string).length // n 实际上不是一个数字，所以它将返回 undefined
+```
diff --git "a/TypeScript/TypeScript \350\201\224\345\220\210\347\261\273\345\236\213.md" "b/TypeScript/TypeScript \350\201\224\345\220\210\347\261\273\345\236\213.md"
new file mode 100644
index 0000000..c23b33c
--- /dev/null
+++ "b/TypeScript/TypeScript \350\201\224\345\220\210\347\261\273\345\236\213.md"	
@@ -0,0 +1,162 @@
+# TypeScript 联合类型
+
+当一个值可以是多个类型时，使用**联合类型。**
+
+例如，当一个属性是 `string` 或 `number` 时。
+
+## 联合（`|`，OR）
+
+使用 `|` 表示参数是 `string` 或 `number` 类型：
+
+```ts
+function isNumber(arg: string | number): boolean {
+  return typeof arg === 'number'
+}
+
+isNumber(1) // true
+isNumber('cat') // false
+isNumber(undefined) // type error
+```
+
+我们可以在任何可以使用其他类型的情况下使用联合类型。例如，使用类型别名：
+
+```ts
+type Code = string | number
+
+let x: Code = 1000
+let y: Code = 2000
+let nowhere: Code = null // type error
+```
+
+`interface` 类似，例如：
+
+```ts
+interface User {
+  message: string | number
+}
+```
+
+## 联合类型错误
+
+在使用联合类型以避免类型错误时，您需要知道自己的类型：
+
+```ts
+function printStatusCode(code: string | number) {
+  console.log(code.toUpperCase()) // type error
+}
+```
+
+在我们的示例中，调用 `toUpperCase()` 作为 `string` 方法时遇到了一个问题，`number` 无权访问它。
+
+这里，你可以利用 `typeof` 收窄类型：
+
+```ts
+function printStatusCode(code: string | number) {
+  if (typeof code === 'string') {
+    console.log(code.toUpperCase())
+  }
+}
+```
+
+TypeScript 不允许我们混合使用联合类型。例如，`string | number` 不能分配给普通 `number`。
+
+```ts
+function getCode(): string | number {
+  return 44106
+}
+
+let foo: string | number = getCode()
+foo // 44106
+
+let baz: number = getCode() // type error
+```
+
+我们可以看到函数返回 44106，这是一个数字。但我们明确地告诉编译器，该函数返回一个 `string | number`。编译器不会试图找到比我们提供的类型更好的类型。它只检查提供的类型 `string | number`。
+
+我们要做的是将它包含在指定的联合类型中。
+
+```ts
+function getCode(): number {
+  return 44106
+}
+const foo: string | number = getCode()
+baz // 44106
+```
+
+## 文字联合类型
+
+我们已经看到了 `number` 和 `string` 之类的基本类型。每个具体的数字和每个具体的字符串也是一种类型。例如，类型变量 1 只能保存数字 1。它无法容纳 2；这是一个编译时类型错误。
+
+```ts
+let one: 1 = 1
+one // 1
+
+let one: 1 = 2 // type error
+
+let one: 1 = 'one' // type error
+```
+
+这些被称为**文字类型**。例如，上面的类型 1 是文字数字类型。我们可以将文字类型与联合结合起来，只允许某些值。
+
+```ts
+let oneOrTwo: 1 | 2 = 1
+oneOrTwo // 1
+
+let oneOrTwo: 1 | 2 = 2
+oneOrTwo // 2
+
+let oneOrTwo: 1 | 2 = 3 // type error
+```
+
+起初，这似乎是一个奇怪的特性，大多数静态类型的编程语言都不支持它。然而，它在实践中非常有用，并且经常用于实用程序的 TypeScript 代码中。
+
+例如，我们可能有一个排序函数。它可以按升序（`'asc'`）或降序（`'desc'`）排序。
+
+```ts
+function sort(numbers: number[], direction: 'asc' | 'desc'): number[] {
+  const sortable = numbers.slice() // 克隆数组
+  sortable.sort()
+  if (direction === 'desc') {
+    sortable.reverse()
+  }
+  return sortable
+}
+
+sort([2, 1, 3], 'asc') //  [1, 2, 3]
+sort([2, 1, 3], 'desc') // [3, 2, 1]
+sort([2, 1, 3], 'something else') // type error
+```
+
+理论上，我们可以在上面使用布尔值。但是看到 `'asc'` 或 `'desc'` 比 `true` 或 `false` 更具描述性。
+
+当我们有两个以上的可能值时，文字类型真的很出色。例如，假设我们正在编写一个数据库库。
+
+```ts
+type DatabaseType = 'mysql' | 'postgres' | 'oracle'
+let dbType: DatabaseType = 'mysql'
+dbType // 'mysql'
+
+let dbType: DatabaseType = 'msaccess' // type error
+```
+
+有了这个类型约束，如果用户试图在不受支持的数据库中使用我们的库，就会立即被告知。它还会告诉他们数据库名称是否有输入错误。他们甚至不必运行应用程序就能看到故障。它根本无法运行，因为它包含类型错误。
+
+`true` 和 `false` 也是文字类型。`true` 类型的变量永远不能为 `false`。
+
+```ts
+let t: true = true
+t // true
+
+let t: true = false // type error
+```
+
+另一种看待布尔类型的方式是 `true | false`，这是一种比 `true` 更广泛的类型。这意味着我们不能将布尔值赋给 `true` 类型的变量，因为布尔值有时可能是 `false`。
+
+通过类比，我们不能将 `number | string` 分配给 `number` 类型的变量。
+
+```ts
+function myBoolean(): boolean {
+  return true
+}
+let t: true = myBoolean() // type error
+```
diff --git "a/TypeScript/TypeScript \350\243\205\351\245\260\345\231\250.md" "b/TypeScript/TypeScript \350\243\205\351\245\260\345\231\250.md"
new file mode 100644
index 0000000..33c58a3
--- /dev/null
+++ "b/TypeScript/TypeScript \350\243\205\351\245\260\345\231\250.md"	
@@ -0,0 +1,285 @@
+# TypeScript 装饰器
+
+随着 TypeScript 和 ES6 里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。
+
+TypeScript 官方描述对装饰器如下：
+
+> [装饰器（Decorators）](https://www.typescriptlang.org/docs/handbook/decorators.html#accessor-decorators)提供了一种为类声明及成员添加注释和元编程语法的方法。
+
+简单的说：**您可以通过使用装饰器对代码的某些部分进行注释来更改它们的行为。**
+
+其实，早在几年前 TC39 就已提出装饰器提案，并持续迭代，但目前该提案还处于第二阶段。详细内容可查阅 [proposal-decorators](https://github.com/tc39/proposal-decorators#decorators)。
+
+## 启动装饰器
+
+装饰器是一项实验性功能，因此默认情况下是禁用的。若要启用实验性的装饰器特性，你必须在命令行或 `tsconfig.json` 里启用 `experimentalDecorators` 编译器选项。
+
+命令行：
+
+```bash
+tsc --target ES5 --experimentalDecorators
+```
+
+`tsconfig.json` 文件：
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "experimentalDecorators": true
+  }
+}
+```
+
+## 装饰器的类型
+
+装饰器是一种特殊类型的声明，有 5 种不同类型的装饰器：
+
+- [类装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators)
+- [属性装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html#property-decorators)
+- [方法装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html#method-decorators)
+- [访问器装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html#accessor-decorators) - 应用于 `getter` 和 `setter`
+- [参数装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html#parameter-decorators)
+
+以下示例显示了它们可以应用的位置：
+
+```js
+// 这不是可运行的代码，因为没有定义 decorators
+@classDecorator
+class Polygon {
+  @propertyDecorator
+  edges: number
+  private _x: number
+
+  constructor(@parameterDecorator edges: number, x: number) {
+    this.edges = edges
+    this._x = x
+  }
+
+  @accessorDecorator
+  get x() {
+    return this._x
+  }
+
+  @methodDecorator
+  calculateArea(): number {
+    // ...
+  }
+}
+```
+
+> **注意**：类构造函数不能应用装饰器。
+
+装饰器使用 `@expression` 形式，`expression` 求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。
+
+## 签名概述
+
+每个装饰器函数接收不同的参数。但访问器装饰器是一个例外，因为它本质上只是一个方法装饰器，应用于访问器（`getter` 或 `setter`）。
+
+不同的签名定义在 [`typescript/lib/lib.es5.d.ts`](https://github.com/microsoft/TypeScript/blob/main/lib/lib.es5.d.ts#L1417)：
+
+```ts
+interface TypedPropertyDescriptor<T> {
+  enumerable?: boolean
+  configurable?: boolean
+  writable?: boolean
+  value?: T
+  get?: () => T
+  set?: (value: T) => void
+}
+
+declare type ClassDecorator = <TFunction extends Function>(
+  target: TFunction
+) => TFunction | void
+// 也适用于访问者装饰器
+declare type PropertyDecorator = (
+  target: Object,
+  propertyKey: string | symbol
+) => void
+declare type MethodDecorator = <T>(
+  target: Object,
+  propertyKey: string | symbol,
+  descriptor: TypedPropertyDescriptor<T>
+) => TypedPropertyDescriptor<T> | void
+declare type ParameterDecorator = (
+  target: Object,
+  propertyKey: string | symbol,
+  parameterIndex: number
+) => void
+```
+
+## 装饰器评估顺序
+
+类中不同类型的装饰器按以下顺序评估：
+
+- 实例成员 — 首先是属性装饰器，然后是访问器、参数或方法装饰器
+- 静态成员 — 首先是属性装饰器，然后是访问器、参数或方法装饰器
+- 参数装饰器应用于构造函数
+- 类装饰器应用于类
+
+将不同的类型，它们的签名和评估顺序放在一起：
+
+```ts
+function propertyDecorator(target: Object, propertyKey: string | symbol) {
+  console.log('属性装饰器', propertyKey)
+}
+
+function parameterDecorator(
+  target: Object,
+  propertyKey: string | symbol,
+  parameterIndex: number
+) {
+  console.log('参数装饰器', propertyKey, parameterIndex)
+}
+
+function methodDecorator<T>(
+  target: Object,
+  propertyKey: string | symbol,
+  descriptor: TypedPropertyDescriptor<T>
+) {
+  console.log('方法装饰器', propertyKey)
+}
+
+function accessorDecorator<T>(
+  target: Object,
+  propertyKey: string | symbol,
+  descriptor: TypedPropertyDescriptor<T>
+) {
+  console.log('访问者装饰器', propertyKey)
+}
+
+function classDecorator(target: Function) {
+  console.log('类装饰器')
+}
+
+@classDecorator
+class Polygon {
+  @propertyDecorator
+  private static _PI: number = 3.14
+  @propertyDecorator
+  edges: number
+  private _x: number
+
+  constructor(@parameterDecorator edges: number, x: number) {
+    this.edges = edges
+    this._x = x
+  }
+
+  @methodDecorator
+  static print(@parameterDecorator foo: string): void {
+    // ...
+  }
+
+  @accessorDecorator
+  static get PI(): number {
+    return Polygon._PI
+  }
+
+  @accessorDecorator
+  get x() {
+    return this._x
+  }
+
+  @methodDecorator
+  calculateArea(@parameterDecorator bar: string): number {
+    return this.x * 2
+  }
+}
+
+console.log('实例化...')
+new Polygon(3, 2)
+
+// 属性装饰器 edges
+// 访问者装饰器 x
+// 参数装饰器 calculateArea 0
+// 方法装饰器 calculateArea
+// 属性装饰器 _PI
+// 参数装饰器 print 0
+// 方法装饰器 print
+// 访问者装饰器 PI
+// 参数装饰器 undefined 0
+// 类装饰器
+// 实例化...
+```
+
+## 装饰器工厂
+
+装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用。
+
+```ts
+function color(value: string) {
+  // 这是一个装饰器工厂
+  return function (target) {
+    // 这是装饰器
+    // 做一些带有 target 和 value 的事情
+  }
+}
+```
+
+示例：
+
+```ts
+function log(textToLog: string) {
+  // 这是一个装饰器工厂
+  return function (target: Object, propertyKey: string | symbol) {
+    // 这是装饰器
+    console.log(textToLog)
+  }
+}
+
+class C {
+  @log('这将被记录下来')
+  x: number
+}
+
+// "这将被记录下来"
+```
+
+## 装饰器组合
+
+多个装饰器可以同时应用到一个声明上：
+
+```ts
+// 书写在同一行上
+@f @g x
+
+// 书写在多行上
+@f
+@g
+x
+```
+
+示例：
+
+```ts
+function log(textToLog: string) {
+  console.log(`outer: ${textToLog}`)
+  return function (target: Object, propertyKey: string | symbol) {
+    console.log(`inner: ${textToLog}`)
+  }
+}
+
+class C {
+  // 书写在同一行上
+  @log('first') @log('second') x: number
+
+  // 书写在多行上
+  @log('first')
+  @log('second')
+  x: number
+}
+
+// "outer: first"
+// "outer: second"
+// "inner: second"
+// "inner: first"
+```
+
+在 TypeScript 里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：
+
+- 由上至下依次对装饰器表达式求值。
+- 求值的结果会被当作函数，由下至上依次调用。
+
+## 更多资料
+
+[A Complete Guide to TypeScript Decorators](https://saul-mirone.github.io/a-complete-guide-to-typescript-decorator/)
diff --git "a/TypeScript/\344\275\277\347\224\250 TypeScript \344\270\255\347\232\204\347\261\273\345\236\213\350\277\233\350\241\214\345\257\271\350\261\241\345\210\206\350\247\243.md" "b/TypeScript/\344\275\277\347\224\250 TypeScript \344\270\255\347\232\204\347\261\273\345\236\213\350\277\233\350\241\214\345\257\271\350\261\241\345\210\206\350\247\243.md"
new file mode 100644
index 0000000..e44b0b5
--- /dev/null
+++ "b/TypeScript/\344\275\277\347\224\250 TypeScript \344\270\255\347\232\204\347\261\273\345\236\213\350\277\233\350\241\214\345\257\271\350\261\241\345\210\206\350\247\243.md"	
@@ -0,0 +1,43 @@
+# 使用 TypeScript 中的类型进行对象分解
+
+在编写项目时，我们经常会用到解构。但如果是在 TS 项目，它有所不同。
+
+例如：
+
+```ts
+const { name, age } = body.value
+```
+
+我尝试添加如下 `string` 和 `number` 类型：
+
+```ts
+const { name: string, age: number } = body.value
+```
+
+但这不起作用。它显然有效，但实际上这是将 `name` 属性分配给 `string` 变量，将 `age` 属性值分配给 `number` 变量。
+
+正确的语法如下：
+
+```ts
+const { name, age }: { name: string; age: number } = body.value
+```
+
+最好的方法是为该数据创建一个 `type` 或 `interface`：
+
+```ts
+type User = {
+  name: string
+  age: number
+}
+// or
+interface User {
+  name: string
+  age: number
+}
+```
+
+这种方式更加简洁：
+
+```ts
+const user: User = body.value
+```
diff --git "a/TypeScript/\345\234\250 TypeScript \344\270\255\344\275\277\347\224\250 unknown \350\200\214\344\270\215\346\230\257 any.md" "b/TypeScript/\345\234\250 TypeScript \344\270\255\344\275\277\347\224\250 unknown \350\200\214\344\270\215\346\230\257 any.md"
new file mode 100644
index 0000000..95b1964
--- /dev/null
+++ "b/TypeScript/\345\234\250 TypeScript \344\270\255\344\275\277\347\224\250 unknown \350\200\214\344\270\215\346\230\257 any.md"	
@@ -0,0 +1,63 @@
+# 在 TypeScript 中使用 unknown 而不是 any
+
+有时，我们会遇到事先不知道类型的情况，即可能是任何类型。在 TS v3 之前，我们会使用 `any` 类型来表示这些类型。但这需要进行一些权衡，比如失去 TypeScript 提供的任何类型安全性。
+
+例如：
+
+```ts
+const x: any = {
+  a: 'a-value',
+  b: 'b-value'
+}
+```
+
+你可以访问上面对象的属性，即 `x.a` 和 `x.b`，一切都将按预期工作。问题是，如果试图访问 `x.c` 值，TypeScript 不会抛出错误，因为对象 `x` 可以是任何东西。
+
+```ts
+const c = x.c
+
+console.log(c) // undefined
+```
+
+正如你所看到的，这可能是许多 bug 的来源，因为 TypeScript 在构建期间捕获的常见错误将被允许通过。这是因为当你使用 `any` 类型时，你都会选择不进行类型检查。
+
+> 推荐：[TypeScript 中 any 类型的作用是什么？](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/525)
+
+## 为什么使用 `unknown`？
+
+`unknown` 类型是在 TypeScript 的第 3 版中引入的，作为 `any` 类型的附带类型，当分配给变量时，`unknown` 意味着变量类型未知。
+
+TypeScript 不允许使用 `unknown` 的变量，除非将该变量强制转换为已知类型或收窄其类型。
+
+举个例子。
+
+```ts
+const x: unknown = 1
+
+x * x // Error
+```
+
+如果我们试图在不收窄类型的情况下将 `x` 平方，TypeScript 将抛出错误。
+
+为了修复上述错误，我们可以使用类型保护来检查它是否是一个数字，然后再将其平方。
+
+```ts
+if (typeof x === 'number') {
+  console.log(x * x)
+}
+```
+
+与最初的示例相同，如果我们将类型更改为 `unknown` 并尝试访问任何属性，TypeScript 将抛出一个错误。
+
+你需要将其强制转换，以便 TypeScript 以允许你使用它。
+
+```ts
+const x: unknown = {
+  a: 'a-value',
+  b: 'b-value'
+}
+
+console.log((x as { a: string; b: string }).b)
+```
+
+从上面的例子可以看出，`unknown` 类型迫使你通过类型转换或类型收窄来确定 `unknown` 的变量是什么。这会产生一个更好、更安全的程序，因为 TypeScript 随后可以对生成的类型进行类型检查。
diff --git "a/TypeScript/\347\274\251\347\237\255 TypeScript \344\270\255\347\232\204\345\257\274\345\205\245\350\267\257\345\276\204.md" "b/TypeScript/\347\274\251\347\237\255 TypeScript \344\270\255\347\232\204\345\257\274\345\205\245\350\267\257\345\276\204.md"
new file mode 100644
index 0000000..414cd5d
--- /dev/null
+++ "b/TypeScript/\347\274\251\347\237\255 TypeScript \344\270\255\347\232\204\345\257\274\345\205\245\350\267\257\345\276\204.md"	
@@ -0,0 +1,54 @@
+# 缩短 TypeScript 中的导入路径
+
+在 TypeScript 中，我们通常使用相对路径导入特定文件。以下是从 `helper` 和 `services` 文件夹导入多个文件的示例：
+
+```js
+import { validator } from '../../../helpers/validator'
+import { authService } from '../../../services/authService'
+```
+
+缺点是，当我们更改目录结构时，必须相应地更新这些导入。尽管 VS Code 等流行编辑器会自动更新路径，但这并不能确保该过程始终有效。
+
+幸运的是，TypeScript 提供了使用绝对路径的能力。在 TypeScript 配置文件 `tsconfig.json` 中，我们可以在 `path` 属性下指示特定路径的别名。
+
+例如，以下设置将在 `src` 文件夹中找到所有以 `@` 开头的导入：
+
+```json
+{
+  "paths": {
+    "@/*": ["src/*"]
+  }
+}
+```
+
+| 导入路径                 | 完全相同的绝对路径         |
+| ------------------------ | -------------------------- |
+| `@/helpers/validator`    | `src/helpers/validator`    |
+| `@/services/authService` | `src/services/authService` |
+
+我们的 `import` 可以缩短如下：
+
+```js
+import { validator } from '@/helpers/validator'
+import { authService } from '@/services/authService'
+```
+
+例如，有些库遵循特定的目录结构模式，我们可以预先定义给定文件夹的路径：
+
+```json
+{
+  "paths": {
+    "@helpers/*": ["src/helpers/*"],
+    "@models/*": ["src/models/*"],
+    "@services/*": ["src/services/*"]
+  }
+}
+```
+
+然后，可以将属于这些文件夹的文件的导入缩短如下：
+
+```js
+import { validator } from '@helpers/validator'
+import { userModel } from '@models/user'
+import { authService } from '@services/authService'
+```
diff --git "a/VS Code/VS Code \345\277\253\346\215\267\351\224\256.md" "b/VS Code/VS Code \345\277\253\346\215\267\351\224\256.md"
new file mode 100644
index 0000000..091e34c
--- /dev/null
+++ "b/VS Code/VS Code \345\277\253\346\215\267\351\224\256.md"	
@@ -0,0 +1,91 @@
+# VS Code 快捷键
+
+[Visual Studio Code](https://code.visualstudio.com/) 是开源代码编辑器，可运行于 Mac OS X、Windows 和 Linux。
+
+今天来说一下 VS Code 的一些常用快捷键，你可以打开官网的[快捷键文档](https://code.visualstudio.com/docs/getstarted/keybindings)进行查找，也可以在编辑器内，按 `F1` 或者 `Ctrl + shift + p`，输入 shortcuts 回车，就会自动跳转到该文档。这里也提供三个 PDF：
+
+- [键盘快捷方式 （MacOS）](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
+- [键盘快捷方式（Windows）](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
+- [键盘快捷方式 （Linux）](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)
+
+下面将参考 Windows 文档，列出常用的一些快捷键。
+
+## 常规
+
+| `Ctrl + shift + P`、`F11` | 显示命令选项板             |
+| ------------------------- | -------------------------- |
+| `Ctrl + P`                | 用于快速打开文件或其他操作 |
+| `Ctrl + Shift + N`        | 打开一个新窗口             |
+| `Ctrl + Shift + W`        | 关闭窗口                   |
+| `Ctrl + ,`                | 用户设置                   |
+| `Ctrl + K` + `Ctrl + S`   | 键盘快捷键                 |
+
+## 侧边栏
+
+| `Ctrl + B`         | 切换侧边栏          |
+| ------------------ | ------------------- |
+| `Ctrl + shift + E` | 打开资源管理器      |
+| `Ctrl + shift + F` | 打开搜索            |
+| `Ctrl + shift + D` | 打开调试            |
+| `Ctrl + shift + X` | 打开扩展            |
+| `Ctrl + shift + G` | 打开 Git 源代码控制 |
+
+## 搜索
+
+| `Ctrl + F`         | 查找                           |
+| ------------------ | ------------------------------ |
+| `Ctrl + shift + F` | 在文件夹中查找                 |
+| `Ctrl + H`         | 查找替换                       |
+| `F3` / `Shift+F3`  | 查找下一个/上一个              |
+| `Ctrl + D`         | 选中所选内容以查找下一个匹配项 |
+| `Alt + C / R / W`  | 切换区分大小写/正则表达式/全字 |
+
+## 面板
+
+| `Ctrl + J`         | 切换面板       |
+| ------------------ | -------------- |
+| `Ctrl + shift + M` | 显示问题       |
+| `Ctrl + shift + U` | 显示输出       |
+| `Ctrl + shift + Y` | 显示调试控制台 |
+| Ctrl + `           | 切换集成终端   |
+
+## 文件
+
+| `Ctrl + N`           | 新建文件             |
+| -------------------- | -------------------- |
+| `Ctrl + O`           | 打开文件...          |
+| `Ctrl + S`           | 保存                 |
+| `Ctrl + Shift + S`   | 另存为...            |
+| `Ctrl + K` + `S`     | 全部保存             |
+| `Ctrl + F4`          | 关闭                 |
+| `Ctrl + Shift + T`   | 重新打开关闭的编辑器 |
+| `Ctrl + Tab`         | 打开下一个           |
+| `Ctrl + Shift + Tab` | 打开上一个           |
+
+## 编辑器
+
+| `Ctrl + \`              | 拆分编辑器（最多 3 个） |
+| ----------------------- | ----------------------- |
+| `Ctrl + K`              | 禅宗模式                |
+| `Ctrl + Shift + T`      | 重新打开关闭的编辑页面  |
+| `Ctrl + F4`、`Ctrl + W` | 关闭编辑器              |
+
+## 调试（Debug）
+
+| `Ctrl + K`、`Ctrl + I` | 显示悬停    |
+| ---------------------- | ----------- |
+| `F10`                  | 单步跳过    |
+| `F11` / `shift + F11`  | 步入/步出   |
+| `F9`                   | 切换断点    |
+| `F5`                   | 开始/继续。 |
+| `Shift + F5`           | 停止        |
+| `Ctrl + Shift + F5`    | 重新启动    |
+
+## 显示
+
+| `F11`              | 切换全屏           |
+| ------------------ | ------------------ |
+| `Ctrl + =`         | 放大               |
+| `Ctrl + -`         | 缩小               |
+| `Ctrl + Shift + C` | 切换 Markdown 预览 |
+| `Ctrl + Shift + V` | 打开新命令提示符   |
diff --git "a/Vue/Vue 3 \344\270\255\347\232\204\346\226\260\347\232\204\345\223\215\345\272\224\345\274\217 API.md" "b/Vue/Vue 3 \344\270\255\347\232\204\346\226\260\347\232\204\345\223\215\345\272\224\345\274\217 API.md"
new file mode 100644
index 0000000..762d443
--- /dev/null
+++ "b/Vue/Vue 3 \344\270\255\347\232\204\346\226\260\347\232\204\345\223\215\345\272\224\345\274\217 API.md"	
@@ -0,0 +1,394 @@
+# Vue 3 中的新的响应式 API
+
+Vue 3 使用基于 ES6 Proxy 重新实现新的响应式系统。
+
+我们知道，Vue 2 的响应式数据声明在 `data` 选项中，而 Vue 3 则是通过两个新的 API `ref` 和 `reactive` 定义响应式数据。
+
+- `ref` 定义原始类型响应式
+- `reactive` 定义复杂类型响应式
+
+在这基础上，Vue 3 还实现了一组响应式更加高级的 API。本文将来了解一下它们。
+
+> 详细内容可查阅 [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) 和 [Reactivity API: Utilities](https://vuejs.org/api/reactivity-utilities.html)。
+
+## ref()
+
+Vue 有一个全局 `ref()` 方法，它在 JavaScript 原始类型创建一个响应式包装器。它通常只能用于基本类型：`number`、`string`、`boolean`、`bigint` 和 `symbol`。
+
+例如，下面是如何创建一个响应式计数器对象。
+
+```js
+import { ref } from 'vue'
+
+const count = ref(0)
+console.log(count.value) // 0
+
+++count.value
+console.log(count) // 1
+```
+
+> **Tips**：`ref` 内部有一层是用来判断传入的参数是否是对象，如果是将使用 `reactive` 方法进行包装。
+
+使用 Vue 的全局 [`watchEffect()`](https://vuejs.org/api/reactivity-core.html#watcheffect) 方法，您可以监视到引用的更新。
+
+```js
+import { ref, watchEffect } from 'vue'
+
+const count = ref(0)
+
+watchEffect(function handler() {
+  console.log(count.value)
+})
+
+// 打印 1，因为 Vue 知道在计数更改时调用 handler()
+++count.value
+```
+
+## reactive()
+
+Vue 3 还引入了一个 `reactive()` 方法，其行为类似于 `ref()`，但用于对象。
+
+`reactive()` 方法的作用是：为对象的属性增加响应性。在对象上调用 `reactive()` 会得到一个代理对象，可以使用 `watchEffect()` 监听变化。
+
+例如，在下面的例子中，因为 `user` 是响应式的，所以 `watchEffect()` 将在每次 `user` 更改时打印出 `user.name` 的值。
+
+```js
+import { reactive, watchEffect } from 'vue'
+
+const user = reactive({ name: 'O.O' })
+
+watchEffect(() => {
+  console.log(user.name) // 'D.O'
+})
+
+user.name = 'D.O'
+```
+
+相对于 Vue 2 的 `data` 属性，`reactive()` 的最大改进是，当您添加新属性时，`reactive()` 可以监听到，而不仅仅是访问现有属性。
+
+在下面的例子中，`watchEffect()` 足够智能，当您在 `user` 上添加一个新的属性 `age` 时监听到变化：
+
+```js
+import { reactive, watchEffect } from 'vue'
+
+const user = reactive({ name: 'O.O' })
+
+watchEffect(() => {
+  console.log(user.age) // 18
+})
+
+user.age = 18
+```
+
+`reactive()` 消除了在事件循环的同一事件上发生的变化。下面的代码将打印 61 和 62，但不会打印 59 或 60，因为这些更改同步发生在 61 之前。
+
+```js
+import { reactive, watchEffect } from 'vue'
+
+const user = reactive({ name: 'O.O' })
+
+watchEffect(() => {
+  console.log(user.age) // 61
+})
+
+user.age = 59
+user.age = 60
+user.age = 61 // <- 只会监听最后一次
+
+setTimeout(() => {
+  user.age = 62
+}) // 62
+```
+
+## isRef()
+
+`isRef()` 检查一个值是否是一个 ref 对象。
+
+```js
+const open = ref(true)
+
+console.log(isRef(open)) // true
+```
+
+## unref()
+
+如果参数是一个 `ref`，则返回内部值，否则返回参数本身。
+
+它是 `val = isRef(val) ? val.value : val` 的语法糖函数。
+
+```js
+const open = ref(true)
+
+console.log(unref(open)) // true
+```
+
+## toRef()
+
+`toRef` 可用于为源 `reactive` 对象上的属性创建 `ref`。创建的 `ref` 与其源属性同步：改变源属性将更新 `ref`，反之亦然。
+
+```js
+const state = reactive({
+  foo: 1,
+  bar: 2
+})
+
+const fooRef = toRef(state, 'foo')
+
+fooRef.value++
+console.log(state.foo) // 2
+console.log(unref(fooRef)) // 2
+
+state.foo++
+console.log(unref(fooRef)) // 3
+```
+
+它常用于将响应式对象中的某个属性单独提供给外部使用。
+
+## toRefs()
+
+`toRefs` 与 `toRef` 一致，只不过它用于一整个响应式对象。
+
+它可以在不丢失响应性的情况下，将响应式对象转换为普通对象，其结果对象的每个属性都是指向原始对象相应属性的 `ref`。每个单独的 `ref` 都是使用 `toRef()` 创建的。
+
+在对对象进行解构时，对象将会失去响应性，这时可以使用 `toRefs` 保持对象的响应式：
+
+```js
+const state = reactive({
+  foo: 1,
+  bar: 2
+})
+
+const stateAsRefs = toRefs(state)
+
+state.foo++
+console.log(unref(stateAsRefs.foo)) // 2
+stateAsRefs.foo.value++
+console.log(state.foo) // 3
+```
+
+## isProxy()
+
+`isProxy()` 检查对象是否是由 `reactive()`、`readonly()`、`shalloreactive()` 或 `shalloreadonly()` 创建的代理。
+
+```js
+const data = readonly({
+  key: 123456
+})
+
+const user = reactive({
+  name: 'O.O'
+})
+
+const open = ref(true)
+
+console.log(isProxy(user)) // true
+console.log(isProxy(data)) // true
+console.log(isProxy(open)) // false
+```
+
+## isReactive()
+
+检查对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。
+
+如果该代理是 `readonly` 创建的，但包裹了由 `reactive` 创建的另一个代理，它也会返回 `true`。
+
+```js
+const data = readonly({
+  pass: 123456
+})
+
+const user = reactive({
+  name: 'O.O'
+})
+
+const userCopy = readonly(user)
+
+console.log(isReactive(user)) // true
+console.log(isReactive(userCopy)) // true
+console.log(isReactive(data)) // false
+```
+
+## isReadonly()
+
+检查对象是否是由 `readonly()` 或 `shalloreadonly()` 创建的代理。
+
+同样，如果该代理是 `reactive` 创建的，但包裹了由 `readonly` 创建的另一个代理，它也会返回 `true`。
+
+```js
+const data = readonly({
+  pass: 123456
+})
+
+const user = reactive({
+  name: 'O.O'
+})
+
+const userCopy = readonly(user)
+
+console.log(isReadonly(data)) // true
+console.log(isReadonly(userCopy)) // true
+console.log(isReadonly(user)) // false
+```
+
+## shallowRef()
+
+浅版本的 `ref`。如果是基本数据类型，`ref` 和 `shallowRef` 的效果一样。
+
+```js
+const state = shallowRef({ count: 1 })
+
+state.value.count = 2
+state.value = { count: 2 }
+```
+
+## triggerRef()
+
+`triggerRef()` 配合 `shallowRef` 一起使用。
+
+```js
+const user = shallowRef({
+  name: 'O.O'
+})
+
+watchEffect(() => {
+  console.log(user.value.name) // O.O
+})
+
+user.value.name = 'D.O'
+
+triggerRef(user) // D.O
+```
+
+## customRef()
+
+创建一个自定义的 `ref`，对其依赖项跟踪和更新触发进行显式控制。
+
+```html
+<template>
+  <div>name：{{ name }}</div>
+  <input v-model="name" />
+</template>
+
+<script setup>
+  let value = 'front-refined'
+
+  const name = customRef((track, trigger) => {
+    return {
+      get() {
+        // 依赖收集
+        track()
+        return value
+      },
+      set(newValue) {
+        value = newValue
+        // 触发依赖
+        trigger()
+      }
+    }
+  })
+</script>
+```
+
+## shallowReactive()
+
+`reactive` 的浅版本。
+
+```js
+const state = shallowReactive({
+  foo: 1,
+  nested: {
+    bar: 2
+  }
+})
+
+state.foo++
+console.log(state.foo) // 2
+console.log(isReactive(state.nested)) // false
+
+// 它是非响应式的，但值会被修改
+state.nested.bar++
+console.log(state.nested.bar) // 3
+```
+
+## shallowReadonly()
+
+`readonly()` 的浅版本。
+
+```js
+const state = shallowReadonly({
+  foo: 1,
+  nested: {
+    bar: 2
+  }
+})
+
+// 不会报错，只会警告
+state.foo++
+// 使用 shallowReadonly 代理的对象不能被修改
+console.log(state.foo) // 1
+
+// 嵌套对象的属性可以被修改，但它是非响应式的！
+state.nested.bar++
+console.log(state.nested.bar) // 3
+```
+
+## toRaw()
+
+`toRaw` 返回 Vue 创建代理的原始对象。
+
+```js
+const open = ref(true)
+const user = reactive({
+  name: 'O.O'
+})
+
+console.log(toRaw(open)) // RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: true, _value: true}
+console.log(toRaw(user)) // {name: 'O.O'}
+```
+
+## markRaw()
+
+`markRaw` 用于标记一个对象，使其永远不会转换为代理，且返回对象本身。
+
+```js
+const foo = markRaw({})
+console.log(isReactive(reactive(foo))) // false
+
+const bar = reactive({ foo })
+console.log(isReactive(bar.foo)) // false
+```
+
+## effectScope()
+
+`effectScope` 用于创建一个 effect 作用域，可以捕获其中所创建的响应式副作用（即 `computed` 和 `watch`），以便将这些副作用可以一起处理。
+
+```js
+const scope = effectScope()
+const counter = ref(0)
+
+scope.run(() => {
+  const doubled = computed(() => counter.value * 2)
+
+  watch(doubled, () => console.log(doubled.value))
+
+  watchEffect(() => console.log('Count: ', doubled.value))
+})
+
+// 处理掉当前作用域内的所有 effect
+scope.stop() // 'Count: 0'
+```
+
+最后还有两个 API：
+
+- `getCurrentScope()` 返回当前活动的 effect 作用域（如果有）。
+- `onScopeDispose()` 在当前活动的 effect 作用域上注册 `dispose` 回调。当关联的 effect 作用域停止时，将调用回调。
+
+您可以在 Vue 提供的 [Vue SFC Playground](https://sfc.vuejs.org/) 尝试以上所有内容。
+
+对于高级响应式 API，详细请查阅 [Reactivity API: Advanced](https://vuejs.org/api/reactivity-advanced.html#reactivity-api-advanced)。
+
+另外，如果您想了解它们是如何实现的，可以在 [core/packages/reactivity/src/](https://github.com/vuejs/core/tree/main/packages/reactivity/src) 目录下找到它们。
+
+> **扩展**：**Vue 2 和 Vue 3 在源码结构上有所不同**。Vue 2 响应式的源码核心部分在 `src/core/observer` 目录下，其相关文件引用了除本身目录以外的其他内容，它们之间并不独立且耦合度较高。而 Vue 3 响应式源码全部在 `packages/reactivity` 目录下，不涉及其他任何地方，功能独立，而且单独发布成 npm 包，可以集成到其他框架（如 React）。这是目前很流行的一种大型项目管理方式 **Monorepo**。
+
+另外，关于 `watch`、`computed` 和 `watchEffect` 的相关内容，可以查看 [Vue Computed — 计算属性](https://github.com/lio-zero/blog/blob/master/Vue/Vue%20Computed%20%E2%80%94%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.md)和 [watch 与 watchEffect 的区别](https://github.com/lio-zero/blog/blob/master/Vue/watch%20%E4%B8%8E%20watchEffect%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)。
diff --git "a/Vue/Vue CSS \345\217\230\351\207\217 \342\200\224 \345\223\215\345\272\224\345\274\217\346\240\267\345\274\217 RFC.md" "b/Vue/Vue CSS \345\217\230\351\207\217 \342\200\224 \345\223\215\345\272\224\345\274\217\346\240\267\345\274\217 RFC.md"
new file mode 100644
index 0000000..006bd5d
--- /dev/null
+++ "b/Vue/Vue CSS \345\217\230\351\207\217 \342\200\224 \345\223\215\345\272\224\345\274\217\346\240\267\345\274\217 RFC.md"	
@@ -0,0 +1,84 @@
+# Vue CSS 变量 — 响应式样式 RFC
+
+[单文件组件样式 RFC](https://github.com/vuejs/rfcs/pull/231) 为 Vue 开发人员提供了一种将组件的响应数据用作 CSS 变量的方法。
+
+## 使用 SFC 样式
+
+- 声明响应式数据
+- 使用 `v-bind` 在我们的 CSS 中访问它们
+
+```html
+<template>
+  <div>
+    <div class="text">hello</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        color: 'red'
+      }
+    }
+  }
+</script>
+
+<style>
+  .text {
+    color: v-bind(color);
+  }
+</style>
+```
+
+更复杂的数据结构，假设我们有一个名为 `font` 的对象，并且其中有一个名为 `weight` 的属性。
+
+```html
+<script>
+  export default {
+    data() {
+      return {
+        color: 'red',
+        font: {
+          weight: 700
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .text {
+    color: v-bind(color);
+    /* 用引号括起来 */
+    font-weight: v-bind('font.weight');
+  }
+</style>
+```
+
+> **注意**：我们必须用引号将我们的表达式括起来。
+
+Vue 提供了内置的响应式系统，我们只需要修改响应式中的数据，便可以动态的修改页面中的外观。
+
+```html
+<div>
+  <div class="text">hello</div>
+  <button @click="color = 'plum'">Make Plum</button>
+</div>
+```
+
+## Vue SFC 样式变量如何工作？
+
+**使用到了 CSS 变量**，我们样式中的 `v-bind` 最终将被编译为使用 CSS `var` 语法和我们的新 CSS 变量。
+
+> **注意**：为避免继承问题，在父组件定义的 CSS 变量对其任何子组件均不可用。
+
+## 使用前检查浏览器支持
+
+如果您希望在生产环境中实现这一点，请确保检查浏览器对 CSS 变量的支持。
+
+如果没有 CSS 变量，SFC 样式变量将无法工作，因此如果您的应用程序需要支持某些较旧的浏览器，这对您来说可能不是一个可行的选择。
+
+以下是 [CSS 变量](https://caniuse.com/css-variables)支持情况：
+
+![css variables](https://upload-images.jianshu.io/upload_images/18281896-c37c14cc9a39ee78.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/Vue/Vue Computed \342\200\224 \350\256\241\347\256\227\345\261\236\346\200\247.md" "b/Vue/Vue Computed \342\200\224 \350\256\241\347\256\227\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..a4ac5e2
--- /dev/null
+++ "b/Vue/Vue Computed \342\200\224 \350\256\241\347\256\227\345\261\236\346\200\247.md"	
@@ -0,0 +1,130 @@
+# Vue Computed — 计算属性
+
+![计算属性](https://upload-images.jianshu.io/upload_images/18281896-ee4ce0c597e7c38e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+在模板内使用表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
+
+假设我们要呈现一个使用连字符 `-` 连接各个单词的字符串，并且全部小写，它将看起来像这样：
+
+```html
+<span> {{ text.replace(/\s/g, '-').toLowerCase() }} </span>
+```
+
+这会不会让你看起来有点杂乱，且当需要在更多的模板中使用此操作，它将更加难以处理。
+
+这时 Vue [计算属性](https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7)就派上用场了，对于任何复杂逻辑，你都应当使用**计算属性**。
+
+## 简单示例
+
+```js
+export default {
+  data() {
+    return {
+      text: 'Front End Interview'
+    }
+  },
+  computed: {
+    handleText() {
+      return this.text.replace(/\s/g, '-').toLowerCase()
+    }
+  }
+}
+```
+
+应用到模板中，它将更加清晰易读的方式进行渲染。
+
+```html
+<span> {{ handleText }} </span>
+```
+
+## Vue 计算属性缓存
+
+由于计算属性类似于 [Vue Watch](https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8)，因此它将观察一个响应式数据，并在该响应式数据发生更改时进行更新。
+
+> **计算属性是基于它们的响应式依赖进行缓存的**。它只在相关响应式依赖发生改变时它们才会重新求值。
+
+对于我们的示例，它只会在文本更改时重新计算。否则，它将返回上次更改的缓存值。
+
+下面来自 [Vue 文档](https://vuejs.org/v2/guide/computed.html) 中的示例，显示了一个永远不会重新计算的计算属性。
+
+```js
+computed: {
+  now() {
+    return new Date()
+  }
+}
+```
+
+尽管计算属性现在返回的值实际上一直在变化，但是 Vue 不会监视任何依赖。因此，它永远不会被重新计算。
+
+你可以始终使用常规的 Vue 方法，该方法将在每个 render 上重新计算一次。
+
+```js
+methods: {
+  now() {
+    return new Date()
+  }
+}
+```
+
+## 计算属性的 setter
+
+默认情况下，计算属性是只读的，无法设置。但是，如果要为允许设置其依赖的计算属性添加钩子。你可以这么做：
+
+```js
+// 带 setter 的计算属性
+computed: {
+  handleText: {
+    get() {
+      return this.text.replace(/\s/g, '-').toLowerCase()
+    },
+    set(value) {
+      this.text = value
+    }
+  }
+}
+```
+
+例如，以下是一些命令及其对代码的影响。
+
+```js
+console.log(this.handleText) // "front-end-interview-questions"
+this.handleText = 'Algorithmic Interview Questions'
+console.log(this.text) // "Algorithmic Interview Questions"
+console.log(this.handleText) // "algorithmic-interview-questions"
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/poRBOZW)
+
+## Vue3 Composition API 中的计算属性
+
+使用 `Vue3 Composition API` 访问计算属性的方式略有不同。需要先导入 `computed`：
+
+```js
+import { ref, computed, onMounted } from 'vue'
+```
+
+导入后，我们可以在 `setup` 方法中使用计算属性。
+
+```html
+<script setup>
+  // Composition API 中的计算属性
+  import { ref, computed, onMounted } from 'vue'
+  const text = ref('Front End Interview')
+  const handleText = computed({
+    get() => text.value.replace(/\s/g, '-').toLowerCase(),
+    set(value) => (text.value = value)
+  })
+
+  onMounted(() => {
+    console.log(handleText.value) // "front-end-interview"
+    handleText.value = 'Algorithmic Interview Questions'
+    console.log(text.value) // "Algorithmic Interview Questions"
+    console.log(handleText.value) // "algorithmic-interview-questions"
+  })
+</script>
+```
+
+可以看到，`computed` 属性的代码本身基本相同，但是设置不同。
+
+[查看效果](https://codepen.io/lio-zero/pen/RwKOYXW)
diff --git "a/Vue/Vue Context \345\217\202\346\225\260 \342\200\224 Composition API.md" "b/Vue/Vue Context \345\217\202\346\225\260 \342\200\224 Composition API.md"
new file mode 100644
index 0000000..bd1594e
--- /dev/null
+++ "b/Vue/Vue Context \345\217\202\346\225\260 \342\200\224 Composition API.md"	
@@ -0,0 +1,222 @@
+# Vue Context 参数 — Composition API
+
+在 Composition API 中，我们没有 `this` 与 Options API 中相同的引用。
+
+在 Options API 中，我们可以通过 `this` 访问任何选项并获得对组件本身的引用，让我们可以访问它的 `props`、`computed`、`data` 等。
+
+Vue 3 允许我们使用 Composition API，这些功能都位于 `setup` 函数内。这意味着 `setup` 是我们声明响应式数据、方法和计算属性的地方。
+
+> **Tips**：Vue 3.2 新增 `setup` 语法糖，使以下所提到的一切变的更加轻松。
+
+```js
+import { ref } from 'vue'
+export default {
+  props: {
+    lastName: String
+  },
+  setup() {
+    // 没有 this，我们如何使用 props？
+    const createdMethod = () => {
+      console.log('created')
+    }
+    const name = ref('hello')
+
+    createdMethod()
+
+    return {
+      createdMethod,
+      name
+    }
+  }
+}
+```
+
+`setup` 在我们的组件实例实际创建之前运行，并且由于我们的 `setup` 函数是我们实际上为组件定义所有内容的地方，因此不再使用 `this`。
+
+## 如何访问组件属性？
+
+Composition API 为我们提供了访问重要组件信息（如 `props` 和 `slot`）的替代方法。
+
+`setup` 函数有参数让我们访问一些组件属性：`props` 和 `context`。
+
+- `props` — 在我们的组件中包含定义的 `props`
+- `context` — 是一个 JavaScript 对象，它公开了三个组件属性
+
+这三个属性是：
+
+- `context.attrs` — 传递给组件的**非 `props` 属性**
+- `context.slots` — 所有**模板插槽渲染功能的对象**
+- `context.emit` — 组件**发出事件**的方法
+
+让我们更深入地了解其中的每一个。
+
+### context.attrs
+
+假设我们有一个自定义组件，它接受一个名为 `value` 的 prop。
+
+```js
+export default {
+  props: {
+    value: String
+  },
+  setup(props, context) {
+    console.log(context.attrs)
+  }
+}
+```
+
+然后在父组件中，我们向它传递几个属性。
+
+```html
+<template>
+  <custom-component :value="value" test="hi" @close="close" />
+</template>
+```
+
+将打印：
+
+![context](https://upload-images.jianshu.io/upload_images/18281896-165fdc2b0234c6c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，它包含除了我们声明的 `props` 之外的所有内容。这包括事件监听器和 HTML 属性之类的东西。
+
+这里的一个重要说明是 `attrs` 不是响应式的。这意味着如果我们想应用副作用来响应 `attrs` 值的变化，我们应该改用 `onUpdated` 生命周期钩子。
+
+### context.slots
+
+`context.slots` 让我们可以访问每个 `slot` 的渲染函数。当我们编写自己的**自定义渲染函数**而不使用模板代码时，这很有用。
+
+Vue 建议在大多数用例中使用模板，但如果你真的想使用 JavaScript 的全部功能，我们可以创建自己的渲染函数。
+
+[Vue 渲染函数 & JSX](https://vuejs.org/guide/extras/render-function.html)中使用自定义 `h()` 方法的一个很好的例子是，如果我们正在创建一个组件，该组件根据 `prop` 的值渲染具有不同级别标题的插槽值。
+
+```html
+<template>
+  <div>
+    <h1 v-if="level == 1">
+      <slot />
+    </h1>
+    <h2 v-if="level == 2">
+      <slot />
+    </h2>
+    <h3 v-if="level == 3">
+      <slot />
+    </h3>
+    <h4 v-if="level == 4">
+      <slot />
+    </h4>
+    <h5 v-if="level == 5">
+      <slot />
+    </h5>
+    <h6 v-if="level == 6">
+      <slot />
+    </h6>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      level: Number
+    }
+  }
+</script>
+```
+
+在这段代码中，我们对所有 6 个标题选项使用 `v-if` 和 `v-else-if` 条件。正如你所看到的，有很多重复的代码，而且看起来非常混乱。
+
+相反，我们可以使用渲染函数以编程方式生成我们的标题。使用 Composition API `setup` 函数，它看起来像这样。
+
+```js
+import { h } from 'vue'
+export default {
+  props: { level: Number },
+  setup(props, context) {
+    return () => h('h' + props.level, {})
+  }
+}
+```
+
+> **Tips**：在 Vue 2 中，它是 `render` 选项，在 Vue 3 中，它使用 `h` 替代。
+
+**但是，如何让我们的插槽进行渲染？**
+
+这就是 `context.slots` 发挥作用的地方。
+
+通过访问每个插槽的渲染函数，我们可以轻松地将插槽添加到渲染函数中。每个插槽都可以通过其名称访问，并且由于我们没有明确命名插槽，因此其默认命名为 `default`。
+
+```js
+import { h } from 'vue'
+export default {
+  props: {
+    level: Number
+  },
+  setup(props, context) {
+    return () => h('h' + props.level, {}, context.slots.default())
+  }
+}
+```
+
+现在，我们可以像这样简单的引用父组件来运行它：
+
+```html
+<template>
+  <child-component :level="1"> Hello World </child-component>
+</template>
+```
+
+这是我们完成的 DOM 的样子。
+
+![image](https://upload-images.jianshu.io/upload_images/18281896-b928ef5bd27e89a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+因此，你可能不会经常使用 `context.slots`，但是当你编写复杂的 JavaScript 渲染函数时，它是一个强大的功能。
+
+> **注意**：根据 Vue 文档，`render` 函数的优先级高于根据 `template` 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。
+
+### context.emit
+
+`context.emit` 将替换 `this.$emit` 作为我们从组件发出事件的方式。
+
+这对于向父组件发送任何类型的事件（带或不带数据）非常有用。
+
+假设我们有一个关闭按钮，它发出一个名为 `close` 的事件。
+
+```html
+<template>
+  <div>
+    <button @click="close">X</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup(props, context) {
+      const close = () => {
+        context.emit('close')
+      }
+      return {
+        closeModal
+      }
+    }
+  }
+</script>
+```
+
+然后在我们的父组件中，我们可以使用 `v-on/@` 指令监听这个 `close` 事件。
+
+```html
+<modal-component @close="handleClose" />
+```
+
+## 我们在 `setup` 中无权访问什么
+
+到目前为止，我们已经看到了 Composition API 如何使我们能够访问四个不同的属性：`props`、`attrs`、`slots` 和 `emit`。
+
+但是由于 `setup` 在创建我们的组件实例之前运行，我们将无法访问这三个组件属性：
+
+- `data`
+- `computed`
+- `methods`
+
+例如，这些是我们在 `setup` 自身内部声明的属性，但我们没有内置方法来访问所有 `data` 属性的列表。也不推荐在 Vue 3 中混用 Vue 2 的写法/功能。
+
+> 关于 Composition API 的问题，可以查看 [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)。
diff --git a/Vue/Vue Mixins.md b/Vue/Vue Mixins.md
new file mode 100644
index 0000000..ceb80bf
--- /dev/null
+++ b/Vue/Vue Mixins.md	
@@ -0,0 +1,150 @@
+# Vue Mixins
+
+当你在 Vue 开发具有相似的组件时，你可能会一遍遍的复制粘贴相同的逻辑（`data`、`watch`、`computed` 等）。当然，你可能会想到将其编写为单个组件，并用 `props` 对其进行自定义。但是，如果有很多 `props` 很容易会造成混乱。
+
+Vue 有一个很好的解决方案：[Mixins](https://v3.cn.vuejs.org/guide/mixins.html)，它是不同组件之间共享**可重用**代码的最简单方法之一。
+
+一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被合并到该组件本身的选项（有例外，往下看）。
+
+> **注意**：Vue 3 不在建议在使用 Mixin（但未被移除），因为有更好的 Composition API 的支持，编写 Hooks 更有利于逻辑复用。
+
+## 基本用法
+
+mixin 对象可以使用**任何组件选项**（`data`、`watch`、`create` 和 `computed` 等），并且当组件使用 `mixin` 时，mixin 对象中的所有信息都将很好地混入组件中。然后，该组件可以访问 `mixin` 中的所有选项，就像您在组件本身中声明它一样。
+
+定义一个 mixin 对象：
+
+```js
+// mixin.js
+export default {
+  data() {
+    msg: 'Hello World'
+  },
+  created() {
+    console.log(1)
+  },
+  methods: {
+    displayMessage() {
+      console.log(2)
+    }
+  }
+}
+```
+
+将定义好的 mixin 通过通过组件的 `mixins` 选项合并到组件中：
+
+```js
+import mixin from './mixin.js'
+
+new Vue({
+  mixins: [mixin],
+  created() {
+    console.log(this.data)
+    this.displayMessage()
+  }
+})
+// 输出：
+// 1
+// {msg: 'Hello World'}
+// 2
+```
+
+正如你所看到的，在使用 mixin 之后，该组件包含 mixin 中的所有数据，并且可以使用 `this` 进行访问。您也可以使用**变量**而不是单独的文件来定义 mixin。
+
+> **注意**：在使用 Vue 生命周期钩子时，`mixins` 内的钩子将在组件的钩子之前被调用。
+
+## 全局混入
+
+上面的基本用法，主要是在单个组件内的选项合并，如果你需要每个组件都可以使用，可以在全局混入：
+
+```js
+Vue.mixin({
+  created() {
+    const myOption = this.$options.myOption
+    if (myOption) {
+      console.log(myOption)
+    }
+  }
+})
+
+new Vue({
+  myOption: 'hello!'
+})
+// => "hello!"
+```
+
+> 请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例（包括第三方组件）。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为[插件](https://cn.vuejs.org/v2/guide/plugins.html)发布，以避免重复应用混入。
+
+## 数据在各组件中互不影响
+
+```js
+// mixin.js
+export default {
+  data () {
+    counter: 1
+  }
+}
+
+// comp1.vue
+import mixin from './mixin.js'
+export default {
+  mixins: [mixin],
+  created() {
+    this.counter++ // 2
+  }
+}
+
+// comp2.vue
+import mixin from './mixin.js'
+export default {
+  mixins: [mixin]
+}
+```
+
+可以看到，两个组件都混入了对象，但两个组件间的操作不会互相影响。
+
+## 命名冲突
+
+当 Mixin 中存在与组件中的选项同名的 `data`、`method` 或任何组件选项时，组件及其 mixin 之间的命名**冲突**可能发生。如果发生这种情况，**组件本身**的属性将具有优先权。
+
+例如，组件和 `mixin.js` 内同时存在 `data` 选项，都包含一个 `title` 属性，`this.title` 会返回组件中定义的值：
+
+```js
+// mixin.js
+export default {
+  data () {
+    title: 'Mixin'
+  }
+}
+
+import mixin from './mixin.js'
+export default {
+  mixins: [mixin],
+  data () {
+    title: 'Component'
+  },
+  created() {
+    console.log(this.title) // "Component"
+  }
+}
+```
+
+如您所见，内部组件的数据优先于默认的 mixin 值。
+
+## Mixins 与组件的优先级
+
+我们在这里总结一下 Mixins 与组件的优先级：
+
+- 组件中 `data` 定义的属性和 `methods` 中的方法会覆盖 mixins 中同名属性和方法
+- 对于 `created`、`mounted` 等生命周期钩子，mixins 中生命周期钩子优先执行，再执行组件中生命周期钩子
+- 对于相同的 `computed` 属性，组件的 `computed` 属性将覆盖 mixins 内的 `computed` 属性；而对于相同的 `watch` 监听，mixins 中的 `watch` 监听先执行。
+
+## Mixins 和 Vuex 的区别
+
+- vuex 用于状态管理，它定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
+- Mixins 可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
+
+## Mixins 和组件的区别
+
+- 组件 — 在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 `props` 来传值，但本质上两者是相对独立的。
+- Mixins — 在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
diff --git a/Vue/Vue Props.md b/Vue/Vue Props.md
new file mode 100644
index 0000000..fdc7722
--- /dev/null
+++ b/Vue/Vue Props.md	
@@ -0,0 +1,49 @@
+# Vue Props
+
+Props 是任何现代 JavaScript 框架的重要组成部分。
+
+在组件之间传递数据的能力是 Vue 项目的基本要素。在 Vue3 中，访问 `props` 的方式与以前有所不同。
+
+## 为什么使用 Props 很重要？
+
+[Props](https://vuejs.org/guide/components/props.html#creating-vnodes) 是可在组件上注册的自定义属性，可让我们将数据从父组件传递到其子组件之一。
+
+由于 Props 使我们能够在组件之间共享数据，因此它使我们可以将 Vue 项目和组件组织为更多的模块化组件。
+
+## Vue3 获取 props 的方式
+
+在 Vue3 之前，组件的 `props` 是 `this` 对象的一部分，可以通过使用 `this.propName` 进行访问。
+
+但是，Vue3 的一大变化是 `setup` 方法的引入。`this` 不会具有它在 Vue2 中使用过的属性。
+
+那么我们如何不使用 `this` 来使用 Vue3 `props` 呢？
+
+`setup` 方法有两个参数：
+
+- `context` — 一个对象，它公开了曾经在 `this` 上的特定属性
+- `props` — 包含组件的 `props` 的对象
+
+现在，我们只需要使用 `props.propName`，不再需要 `this`。
+
+```js
+setup (props, context) {
+  // context 包含了 attrs、slots 和 emit
+  console.log(props.propName) // 访问组件的一个 props
+}
+```
+
+## 为什么 Vue3 Props 和 Vue2 不同？
+
+Vue3 改变访问 `props` 的方式背后的主要动机是让它在组件/方法中更清晰。有时，在查看 Vue2 代码时，`this` 所指的可能是模糊的。
+
+Vue 团队在设计 Vue3 时的一个大目标是使其在大型项目中更具可扩展性。其中一部分是将 Options API 重新设计为 Composition API，以便更好地组织代码。
+
+Options API 和 Composition API 对比（看颜色划分即可）：
+
+![Options API 和 Composition API 对比](https://upload-images.jianshu.io/upload_images/18281896-f8cb2a5ff5d1e2d1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> 关于 Composition API 的问题，可以查看 [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)。
+
+通过去除 `this` 的引用，使用显式的 `context` 和 `props` 变量，可以提高大型 Vue 项目的可读性。
+
+如您所知，Vue3 Props 的工作原理与 Vue2 大致相同，主要的变化是我们如何在新的 `setup` 方法中访问它们。
diff --git "a/Vue/Vue Router active-class \345\261\236\346\200\247.md" "b/Vue/Vue Router active-class \345\261\236\346\200\247.md"
new file mode 100644
index 0000000..d843d97
--- /dev/null
+++ "b/Vue/Vue Router active-class \345\261\236\346\200\247.md"	
@@ -0,0 +1,34 @@
+# Vue Router active-class 属性
+
+[`active-class`](https://router.vuejs.org/zh/api/#active-class) 是 vue-router 模块的 `router-link` 组件的属性，当 `router-link` 标签被点击时将会应用这个样式。
+
+有两种使用方式：
+
+- 直接在路由 Router 构造函数中配置 `linkActiveClass` 属性
+
+```js
+export default new Router({
+  linkActiveClass: 'active'
+})
+```
+
+使用这种方式，会在每个 `router-link` 标签上引用这个样式（当被点击后），如果您只想在某部分 `router-link` 上使用，则可以选择第二种。
+
+- 单独在 `router-link` 标签上使用 `active-class` 属性
+
+```html
+<router-link to="/about" active-class="active">about</router-link>
+```
+
+最后，为您选中的链接设置样式：
+
+```css
+a.router-link-exact-active {
+  color: plum;
+}
+
+.active {
+  font-size: 16px;
+  font-weight: bold;
+}
+```
diff --git a/Vue/Vue keep-alive.md b/Vue/Vue keep-alive.md
new file mode 100644
index 0000000..6e41218
--- /dev/null
+++ b/Vue/Vue keep-alive.md	
@@ -0,0 +1,243 @@
+# Vue keep-alive
+
+> **Tips**：本文示例仅限于 Vue 2。
+
+当使用动态组件时，当您切换 [`:is` 指令](https://vuejs.org/v2/guide/components.html#Dynamic-Components)的值时，Vue 会重新创建组件的新实例。尽管它在大多数情况下很有用，但有时我们想要保存隐藏元素的状态。
+
+这时 Vue 的 [`keep-alive`](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) 组件就派上用场了，它可以是提高速度并提供更好的用户体验的好方法。
+
+## 什么是 `keep-alive`？
+
+为了理解 `<keep-alive>`，您首先必须了解什么是动态组件。简而言之，它可以使用 `v-bind:is` 指令在不同组件之间切换。
+
+最常见的示例是 **Tab 切换**，其中根据打开的选项卡，内容切换到不同的组件。
+
+通常，当您在动态组件之间切换时，Vue 会为您的组件创建一个全新的实例。
+
+然而，Vue `<keep-alive>` 是一个围绕动态组件的包装器元素。当组件处于非活动状态时，它会存储对组件的缓存引用。
+
+这意味着 Vue 不必每次切换组件时都创建一个新实例。相反，当您返回时，它只使用缓存的引用。
+
+`<keep-alive>` 是 Vue 的抽象元素，这意味着它既不渲染 DOM 元素，也不显示为组件。
+
+> **Tips**：抽象元素使用 `abstract` 属性定义。
+
+## `keep-alive` 应用场景
+
+在大多数情况下，动态组件的内置功能是完美的。在某些情况下，您可能想要缓存状态，例如：
+
+- 缓存表单上的用户输入，读取进度等。
+- 你的组件会调用很多 API，而你只想调用一次
+- 您的组件需要花一些时间来设置数据和计算属性，您希望在它们之间快速切换
+
+## 基本使用
+
+你可以在 [Vue keep-alive](https://codepen.io/lio-zero/pen/xxgeWzL) 进行简单的测试，已经给出基本模板。
+
+假设我们有一个父选项卡组件，它有两个子组件 `About` 和`Contact`。
+
+```html
+<!-- About.vue -->
+<template>
+  <div>Hello Vue!</div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      console.log('已挂载 About')
+    }
+  }
+</script>
+
+<!-- Contact.vue -->
+<template>
+  <div>
+    <input type="text" placeholder="请输入内容..." />
+    <input type="button" value="Send" />
+  </div>
+</template>
+
+<script>
+  export default {
+    mounted() {
+      console.log('已挂载 Contact')
+    }
+  }
+</script>
+```
+
+父组件具有两个按钮，用于切换动态组件。
+
+```html
+<template>
+  <div>
+    <button v-for="tab in tabs" :key="tab" @click="component = tab">
+      {{ tab }}
+    </button>
+    <component :is="component" />
+  </div>
+</template>
+
+<script>
+  import About from '@/components/About.vue'
+  import Contact from '@/components/Contact.vue'
+  export default {
+    components: { About, Contact },
+    data() {
+      return {
+        tabs: ['About', 'Contact'],
+        component: 'About'
+      }
+    }
+  }
+</script>
+```
+
+现在，如果您运行您的应用，您应该会看到类似这样的内容。
+
+![演示](https://upload-images.jianshu.io/upload_images/18281896-4b3b3966cac9152a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+在组件之间切换时，您应注意：
+
+- 每次切换选项卡时，来自 `mount()` 的消息都会打印在控制台中
+
+![演示](https://upload-images.jianshu.io/upload_images/18281896-e9d99757a3f1ba1b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+- 如果在 `Contact` 中输入内容，然后切换选项卡，在 `Contact` 选项卡输入的信息将不存在。
+
+![演示](https://upload-images.jianshu.io/upload_images/18281896-9bb88642470e120f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+这两个都是因为没有使用 `keep-alive`，Vue 会创建组件的新实例，因此所有生命周期钩子都会重新运行，并且您所做的任何输入都会丢失。
+
+转到 `Tabs.vue` 组件，将动态组件包装在 `<keep-alive>` 组件中
+
+```html
+<keep-alive>
+  <component :is="component" />
+</keep-alive>
+```
+
+现在上面出现的问题都不存在：
+
+- 来自 `mount()` 的消息应该由每个组件打印一次，并且只能打印一次
+- 如果您在 `Contact` 选项卡上输入信息，则在切换选项卡返回时，该输入仍应存在
+
+虽然这是使用 `keep-alive` 组件的简单用例，但它是说明为什么要使用它们的一个很好的例子。
+
+## `include`、`exclude` 和 `max` 属性
+
+`include` 和 `exclude` 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，是 2.1.0 新增的属性。
+
+- `include` — 只有匹配的组件会被缓存。
+- `exclude` — 任何匹配的组件都不会被缓存。
+
+```html
+<!-- 逗号分隔字符串 -->
+<keep-alive include="Contact">
+  <component :is="component"></component>
+</keep-alive>
+
+<!-- 正则表达式 -->
+<keep-alive :include="/About|Contact/">
+  <component :is="component"></component>
+</keep-alive>
+
+<!-- 数组 -->
+<keep-alive :include="['About', 'Contact']">
+  <component :is="component"></component>
+</keep-alive>
+
+<!-- 与 include 用法一致，但目的是任何匹配的组件都不会被缓存 -->
+<keep-alive exclude="Contact">
+  <component :is="component"></component>
+</keep-alive>
+```
+
+匹配首先检查组件自身的 `name` 选项，如果 `name` 选项不可用，则匹配它的局部注册名称（父组件 `components` 选项的键值）。匿名组件不能被匹配。
+
+`max` 表示最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。是 2.5.0 新增的属性。
+
+> `max` 的实现使用到了 [LRU 算法](https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU))，后面找个时间讲一讲。
+
+```html
+<keep-alive :max="2">
+  <component :is="view"></component>
+</keep-alive>
+```
+
+## `keep-alive` 生命周期钩子
+
+为了帮助观察何时切换 `<keep-alive>` 的组件，我们有两个独特的钩子：
+
+- `activated()` 在被 `keep-alive` 缓存的组件激活/进入时调用。
+- `deactivated()` 在被 `keep-alive` 缓存的组件停用/离开时调用。
+
+> **注意**：Vue 3 更名为 `onActivated` 和 `onDeactivated`。且这两个钩子在服务器端渲染（SSR）期间不被调用。
+
+使用前面的示例使用这些钩子，在切换组件时将其输出到控制台。
+
+```js
+// About.vue
+create() {
+  console.log('About 数据初始化')
+},
+mounted() {
+  console.log('About 已挂载')
+},
+activated () {
+  console.log('About 已激活')
+},
+deactivated () {
+  console.log('About 已停用')
+}
+```
+
+现在，如果我们运行我们的应用并在选项卡之间切换，我们将看到数据初始化和挂载的消息仅打印一次，而激活/停用的消息则重复打印。
+
+**注意**：当动态组件首次显示时，它触发 `create` 和 `mounted`，又触发 `activated`。因此，确保您不会两次计算某些逻辑很重要。
+
+## 结合 router 缓存部分页面
+
+在 router 中设置路由的元信息 `meta`
+
+```js
+export default new Router({
+  routes: [
+    {
+      path: '/about',
+      name: 'About',
+      component: About,
+      meta: {
+        keepAlive: false // 不需要缓存
+      }
+    },
+    {
+      path: '/contact',
+      name: 'Contact',
+      component: Contact,
+      meta: {
+        keepAlive: true // 需要被缓存
+      }
+    }
+  ]
+})
+```
+
+使用 `$route.meta` 的 `keepAlive` 属性
+
+```html
+<keep-alive>
+  <router-view v-if="$route.meta.keepAlive"></router-view>
+</keep-alive>
+<router-view v-if="!$route.meta.keepAlive"></router-view>
+```
+
+## `keep-alive` 的利弊
+
+当然，使用 `<keep-alive>` 而不只是默认的动态组件是有利有弊。
+
+- 优点：存储组件缓存，更快的组件
+- 缺点：容易过度使用，通常情况下就足够了。
+
+对于大多数情况，仅使用默认的动态组件而无需 `<keep-alive>` 是最佳解决方案。但是，如果您想轻松保存用户状态，则 `<keep-alive>` 组件是一种非常简单的方法。
diff --git a/Vue/Vue nextTick.md b/Vue/Vue nextTick.md
new file mode 100644
index 0000000..58d1dbd
--- /dev/null
+++ b/Vue/Vue nextTick.md	
@@ -0,0 +1,31 @@
+# Vue nextTick
+
+Vue 在修改数据后，视图不会立即更新，而是在同一事件循环中的所有数据完成之后，再进行统一视图更新，即 Vue 中 DOM 更新是异步的。
+
+而 [`nextTick`](https://vuejs.org/api/general.html#nexttick) 的作用正是在下次 DOM 更新循环结束之后执行延迟回调。常用于修改数据后获取更新后的 DOM。
+
+以下是一个简单的示例：
+
+```html
+<template>
+  <div ref="elem">{{ open }}</div>
+</template>
+
+<script setup>
+  import { ref, nextTick, unref, onMounted } from 'vue'
+  const elem = ref(null)
+  const open = ref(true)
+
+  onMounted(() => {
+    open.value = false
+    console.log(unref(elem).innerHTML) // true
+    // DOM 还没有更新
+    nextTick(() => {
+      // DOM 更新了
+      console.log(unref(elem).innerHTML) // false
+    })
+  })
+</script>
+```
+
+尽管 MVVM 框架并不推荐访问 DOM，但有时确实免不了需要进行一些 DOM 操作，例如：使用第三方插件、视图更新后，基于新视图的进行操作等。而 `nextTick` 可以确保我们操作更新后的 DOM。
diff --git "a/Vue/Vue v-model \346\214\207\344\273\244.md" "b/Vue/Vue v-model \346\214\207\344\273\244.md"
new file mode 100644
index 0000000..11d43f1
--- /dev/null
+++ "b/Vue/Vue v-model \346\214\207\344\273\244.md"	
@@ -0,0 +1,206 @@
+# Vue v-model 指令
+
+`v-model` 是 Vue 应用中最常用的指令。它通常用于在表单元素上创建双向数据绑定，并与 `input`、`checkbox`、`select`、`textarea` 和 `radio` 表单元素一起使用。
+
+在下面的例子中，`v-model` 应用于 `input` 元素，将 `someVal` 变量与 `input` 的原生 `value` 属性绑定在一起。
+
+```html
+<input v-model="someVal" />
+```
+
+`v-model` 本质上是一种语法糖，通过在内部为不同类型的 `input` 元素使用不同的属性并抛出不同的事件。
+
+上面的示例中，指令会监听原生的 `input` 事件，并在每次触发时更新 `someVal`。
+
+因此，我们可以将上述代码重写为具有相同效果的事件和属性：
+
+```html
+<input :value="someVal" @input="someVal = $event.target.value" />
+```
+
+不难看出，**单向绑定 + 事件**便可达到双向绑定的效果。
+
+这就是 `v-model` 应用于常规输入的工作原理。
+
+其他的表单元素如下：
+
+- `input` 元素若是 `text / textarea` 类型，使用 `value` 属性和 `input` 事件。
+- `input` 元素若是 `radio / checkbox` 类型，使用 `checked` 属性和 `change` 事件。
+- `select` 元素使用 `value` 属性和 `change` 事件。
+
+## 在组件上使用 `v-model`
+
+要在组件上使用 `v-model` 指令实现双向绑定，我们可以在每个会发出 `update:modelValue` 事件并接受 `modelValue` 值的组件上使用 `v-model`。
+
+> **注意**：Vue 2.x 使用 `value` 属性和 `input` 事件。
+
+以下是一个 `myCounter` 组件：
+
+```html
+<template>
+  <button @click="changeValue(modelValue - 1)">-</button>
+  <span>{{ modelValue }}</span>
+  <button @click="changeValue(modelValue + 1)">+</button>
+</template>
+
+<script setup>
+  defineProps({
+    modelValue: Number
+  })
+  const emit = defineEmits(['update:modelValue'])
+  const changeValue = (newVal) => {
+    console.log(newVal)
+    emit('update:modelValue', newVal)
+  }
+</script>
+```
+
+由于每次更改 `update:modelValue` 事件时都会发出一个新值，并接受 `modelValue` 属性，因此我们可以安全地在此组件上使用 `v-model` 指令：
+
+```html
+<myCounter v-model="count" />
+<!-- 相当于 -->
+<custom-input
+  :modelValue="searchText"
+  @update:modelValue="searchText = $event"
+></custom-input>
+```
+
+## `v-model` 参数
+
+`v-model` 还支持通过参数来修改默认名称：
+
+```html
+<template>
+  <!-- v-model 参数 -->
+  <custom-input v-model:title="pageTitle"></custom-input>
+  <!-- 相同于 -->
+  <!-- <custom-input :title="pageTitle" @update:title="pageTitle = $event" /> -->
+
+  <p>Title: {{ pageTitle }}</p>
+</template>
+
+<script setup lang="ts">
+  import CustomInput from './CustomInput.vue'
+  import { ref } from 'vue'
+
+  const pageTitle = ref('Vue')
+</script>
+```
+
+```html
+<!-- CustomInput -->
+<template>
+  <input :value="title" @input="$emit('update:title', $event.target.value)" />
+</template>
+
+<script setup>
+  defineProps({
+    title: String
+  })
+</script>
+```
+
+## 多个 `v-model` 绑定
+
+Vue 3 允许我们在同一组件上绑定多个 `v-model`：
+
+```html
+<template>
+  <custom-input v-model:title="pageTitle" v-model:content="pageContent" />
+  <!-- 相同于 -->
+  <!-- <custom-input
+    :title="pageTitle"
+    @update:title="pageTitle = $event"
+    :content="pageContent"
+    @update:content="pageContent = $event"
+  /> -->
+  <p>Value: {{ pageTitle }}</p>
+  <p>content: {{ pageContent }}</p>
+</template>
+
+<script setup>
+  import CustomInput from './component/CustomInput.vue'
+  import { ref } from 'vue'
+
+  const pageTitle = ref('admin')
+  const pageContent = ref('Element')
+</script>
+```
+
+```html
+<!-- CustomInput -->
+<template>
+  <input :value="title" @input="$emit('update:title', $event.target.value)" />
+  <input
+    :value="content"
+    @input="$emit('update:content', $event.target.value)"
+  />
+</template>
+
+<script setup>
+  defineProps({
+    title: String,
+    content: String
+  })
+</script>
+```
+
+## `v-model` 修饰符
+
+`v-model` 支持的三个修饰符：
+
+- `.lazy` — 默认情况下，`v-model` 监听 `input` 事件，这意味着每次输入值都会同步更新数据。`.lazy` 修饰符将事件监听改为 `change` 事件，也就是失焦时同步更新数据。这减少了 Vue 实例同步次数，并且在某些情况下，可以显著提高性能。
+- `.number` — 将有效输入字符串强制转换为数字。
+- `.trim` — 修剪输入，想一下 JS 字符串的 `trim()` 方法。
+
+```html
+<input type="text" v-model.trim.lazy="value" />
+```
+
+你可以自由的链接多个修饰符以达到目的。
+
+Vue 3 还有一些其他的更改，如 `.sync` 修饰符被合并到了 `v-model` 中、自定义 `v-model` 修饰符。
+
+## 自定义 `v-model` 修饰符
+
+Vue 允许我们自定义 `v-model` 修饰符。
+
+以下是官网的一个[示例](https://vuejs.org/guide/components/events.html#usage-with-v-model)：
+
+```html
+<custom-input v-model.capitalize="text" />
+
+<script setup>
+  import { ref } from 'vue'
+  const text = ref('')
+</script>
+```
+
+```html
+<input type="text" :value="modelValue" @input="emitValue" />
+
+<script setup>
+  const props = defineProps({
+    modelValue: String,
+    modelModifiers: { default: () => ({}) } // <- 关键
+  })
+  const emit = defineEmits(['update:modelValue'])
+  const emitValue = (e) => {
+    let value = e.target.value
+    if (props.modelModifiers.capitalize) {
+      value = value.charAt(0).toUpperCase() + value.slice(1)
+    }
+    emit('update:modelValue', value)
+  }
+</script>
+```
+
+组件的 `v-model` 上所添加的修饰符，可以通过 `modelModifiers` prop 在组件内访问到。
+
+更多详细内容请看官网（实时更新）。
+
+## 更多资料
+
+- [Form Input Bindings](https://vuejs.org/guide/essentials/forms.html)
+- [Component Events](https://vuejs.org/guide/components/events.html#usage-with-v-model)
diff --git a/Vue/Vue vue-loader.md b/Vue/Vue vue-loader.md
new file mode 100644
index 0000000..f6a9ba8
--- /dev/null
+++ b/Vue/Vue vue-loader.md	
@@ -0,0 +1,17 @@
+# Vue vue-loader
+
+[vue-loader](https://github.com/vuejs/vue-loader) 作为 webpack 中一个为解析 `.vue` 文件的 loader。主要的作用是将 [Vue 单文件组件](https://vuejs.org/guide/scaling-up/sfc.html)（SFC，Single-File Component）解析为 vue runtime 可识别的组件模块，也就是浏览器可识别的 JavaScript 文件。
+
+有了 vue-loader，我们就可以在项目中编写 SFC 格式的 Vue 组件。
+
+## 原理
+
+vue-loader 使用 [`@vue/compiler-sfc`](https://www.npmjs.com/package/@vue/compiler-sfc) 将 SFC 中的内容拆分为 `template`、`script` 和 `style` 三个**虚拟模块**，然后分别匹配 webpack 配置中对应的 `rules`。比如：
+
+- `<template>` 中的内容会通过 vue template compiler 转换为 `render` 函数后合并到 `script` **虚拟模块**中。
+- `<script>` 模块会匹配所有跟处理 JavaScript 或 TypeScript 相关的 loader。
+- `<style scoped>` 会经过一些处理策略的处理，成为只匹配特定元素的私有样式。
+
+详细工作流程请查阅 [vue-loader README](https://github.com/vuejs/vue-loader#what-is-vue-loader)。
+
+关于声明了 `scoped` 属性，CSS 样式就仅应用于当前组件，它的原理回答范式可以查看 👉 [你知道 Vue scoped 原理吗？这波你在第几层？](https://juejin.cn/post/7098569051860893709#comment)。
diff --git "a/Vue/Vue \344\272\213\344\273\266\345\244\204\347\220\206.md" "b/Vue/Vue \344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000..2a660ee
--- /dev/null
+++ "b/Vue/Vue \344\272\213\344\273\266\345\244\204\347\220\206.md"	
@@ -0,0 +1,235 @@
+# Vue 事件处理
+
+[Vue 事件](https://vuejs.org/v2/guide/events.html)处理是每个 Vue 项目的必要方面。它用于捕获用户输入，共享数据以及许多其他创造性方式。
+
+在本文中，我将介绍基础知识，并提供一些用于处理事件的代码示例。
+
+## 基本事件处理
+
+使用 `v-on` 指令（`@` 简称），我们可以监听 DOM 事件并运行处理程序方法或内联 Javascript：
+
+```html
+<div v-on:click="handleClick" />
+<!-- 相当于 -->
+<div @click="handleClick" />
+```
+
+我们将介绍您可能想捕获的一些更常见的事件，单击此处以获取 [DOM 事件](https://developer.mozilla.org/en-US/docs/Web/Events)的完整列表。
+
+## 发出自定义事件
+
+任何 Web 框架中的常见用例都是希望子组件能够向其父组件发出事件。这将允许双向数据绑定。
+
+这样的一个示例是将数据从输入组件发送到父表单。
+
+根据我们使用的是 Options API 还是 Composition API，发出事件的语法是不同的。
+
+在 Options API 中，我们可以简单地调用 `this.$emit(eventName, payload)`：
+
+```js
+export default {
+  methods: {
+    handleUpdate() {
+      this.$emit('update', 'Hello World')
+    }
+  }
+}
+```
+
+但是，Composition API 没有 `this`。相反，我们可以使用 Vue3 `setup` 方法直接访问 `emit` 方法。
+
+> `setup` 方法的第二个参数是上下文变量，它包含三个属性：`attrs`、`slot` 和 `emit`。
+
+只要导入上下文对象，就可以使用与 Options API 相同的参数来调用 `emit`。
+
+```js
+export default {
+  setup(props, context) {
+    const handleUpdate = () => {
+      context.emit('update', 'Hello World')
+    }
+    return { handleUpdate }
+  }
+}
+```
+
+整理代码的一种方法是使用对象解构直接导入 `emit`。看起来像这样。
+
+```js
+export default {
+  setup(props, { emit }) {
+    const handleUpdate = () => {
+      emit('update', 'Hello World')
+    }
+    return { handleUpdate }
+  }
+}
+```
+
+无论我们使用 Options API 还是 Composition API，我们的父组件都以相同的方式监听自定义事件。
+
+```html
+<HelloWorld @update="inputUpdated" />
+```
+
+如果我们发出的方法也传递了一个值，则可以用两种不同的方式捕获它-取决于我们是内联工作还是使用其他方法。
+
+首先，我们可以 `$event` 在模板中使用传递的值。
+
+```html
+<HelloWorld @update="inputUpdated($event)" />
+```
+
+其次，如果我们使用方法来处理事件，则传递的值将作为第一个参数自动传递给我们的方法。
+
+```html
+<HelloWorld @update="inputUpdated" />
+
+<script>
+  methods: {
+    inputUpdated: (value) => {
+      console.log(value) // WORKS TOO
+    }
+  }
+</script>
+```
+
+## 处理鼠标修饰符
+
+以下是我们可以在 `v-on` 指令中捕获的主要 [DOM 鼠标事件](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) 的列表：
+
+```html
+<div
+  @mousedown="handleEvent"
+  @mouseup="handleEvent"
+  @click="handleEvent"
+  @dblclick="handleEvent"
+  @mousemove="handleEvent"
+  @mouseover="handleEvent"
+  @mousewheel="handleEvent"
+  @mouseout="handleEvent"
+>
+  与我互动！
+</div>
+```
+
+对于我们的点击事件，我们还可以添加鼠标事件修饰符来限制哪些鼠标按钮将触发我们的事件。有三个鼠标按键：`left`、`right` 和 `middle`。
+
+```html
+<!-- 这将仅在鼠标左键单击时触发 -->
+<div @mousedown.left="handleLeftClick">Left</div>
+```
+
+## 按键修饰符
+
+我们可以监听三个 DOM [键盘事件](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)：
+
+```html
+<input
+  type="text"
+  placeholder="Type something"
+  @keypress="handleKeyPressed"
+  @keydown="handleKeyDown"
+  @keyup="handleKeyUp"
+/>
+```
+
+通常，我们希望在某个按键上监听这些事件，Vue 具有某些键的别名可以帮助到我们。
+
+- `enter`
+- `tab`
+- `delete`（捕获“删除”和“退格”键）
+- `esc`
+- `space`
+- `up`
+- `down`
+- `left`
+- `right`
+
+```html
+<input type="text" placeholder="Type something" @keyup.enter="handleEnter" />
+```
+
+需要注意的是，Vue 2.x 中，我们还可以使用[键码](https://keycode.info/) 的方式，但在 Vue3.x 不在适用：
+
+```html
+<!-- ❌ -->
+<input type="text" placeholder="Type something" @keyup.13="handleEnter" />
+```
+
+一些特殊的字符无法被匹配，如 "、'、/、=、> 和 .。这些应该在监听器内使用事件对象单独判断。
+
+```html
+<input type="text" placeholder="Type something" @keyup.,="handleEnter" />
+```
+
+> **注意**：Vue 3.x 不在支持自定义按键 `config.keyCodes`
+
+## 系统修饰符
+
+对于某些项目，我们可能只想在用户按下修饰符的情况下触发事件。修饰符类似于 `Command` 或 `shift`。
+
+在 Vue 中，有四个系统修饰符。
+
+- `shift`
+- `alt`
+- `ctrl`
+- `meta` （在 Mac 上为 cmd，在 Windows 上为 Windows 键）
+
+这对于在 Vue 应用程序中创建诸如自定义键盘快捷键之类的功能非常有用。
+
+```html
+<!-- 为 Shift + a clear 的自定义快捷方式 -->
+<button @keyup.shift.a="clear">清除</button>
+```
+
+在 Vue 文档中，还有一个 `exact` 修饰符，确保仅在按下我们指定的键且没有其他键的情况下才触发事件。
+
+```html
+<!-- 仅为 Shift + a 执行 clear -->
+<button @keyup.shift.a.exact="clear">清除</button>
+```
+
+鼠标按钮修饰符：`lefe`、`right` 和 `middle`，默认行为为 `left `（左键点击）。
+
+```html
+<button @click.middle="clear">清除</button>
+```
+
+## 事件修饰符
+
+对于所有 DOM 事件，我们可以使用一些修饰符来更改其运行方式。无论是停止传播还是阻止默认操作，Vue 都有几个内置的 DOM 事件修饰符。
+
+```html
+<!-- 阻止默认操作 -->
+<form @submit.prevent />
+
+<!-- 停止事件传播 -->
+<form @submit.stop="submitForm" />
+
+<!-- 串联的修饰符 -->
+<form @submit.stop.prevent="submitForm" />
+
+<!-- 防止事件被触发多次 -->
+<el-button @click.once="handleClose">执行一次</el-button>
+```
+
+使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `v-on:click.prevent.self` 会阻止所有的点击，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。
+
+以下时 Vue 提供的完整事件修饰符：
+
+- `stop` 阻止事件传播
+- `prevent` 阻止默认事件
+- `capture` 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
+- `self` 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
+- `once` 仅执行一次
+- `passive` 修饰符尤其能够提升移动端的性能
+
+> **注意**：不要把 `.passive` 和 `.prevent` 一起使用，因为 `.prevent` 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，`.passive` 会告诉浏览器你不想阻止事件的默认行为。
+
+```html
+<!-- 这其中包含 `event.preventDefault()` 的情况 -->
+<div @scroll.passive="onScroll">...</div>
+```
+
+滚动事件的默认行为（即滚动行为）将会立即触发，而不会等待 `onScroll` 完成。
diff --git "a/Vue/Vue \344\276\235\350\265\226\346\263\250\345\205\245\344\275\277\347\224\250 Provide \345\222\214 Inject.md" "b/Vue/Vue \344\276\235\350\265\226\346\263\250\345\205\245\344\275\277\347\224\250 Provide \345\222\214 Inject.md"
new file mode 100644
index 0000000..2095e9c
--- /dev/null
+++ "b/Vue/Vue \344\276\235\350\265\226\346\263\250\345\205\245\344\275\277\347\224\250 Provide \345\222\214 Inject.md"	
@@ -0,0 +1,169 @@
+# Vue 依赖注入使用 Provide 和 Inject
+
+使用 Provide 和 Inject 的 Vue 依赖注入对于构建 Vue 插件或避免 [prop Drilling](https://kentcdodds.com/blog/prop-drilling)（在层次结构中一路传递 prop，即使许多组件之间不需要 prop）提供帮助。
+
+> 如果您使用过 React，那么您应该不陌生。
+
+查看 [Composition API 文档](https://v3.vuejs.org/guide/component-provide-inject.html)，在 Vue3 中，使用 `provide` 和 `inject` 的依赖注入将更加常见。这主要是因为插件将不得不切换到使用这种模式，因为 Composition API 改变了这种引用（它不再让我们访问组件本身）。
+
+在本文中，我们将介绍在 Vue3 中使用 `provide` 和 `inject`，以及如何使用它在组件层次结构中轻松分发内容。
+
+## 什么是 Provide 和 Inject？
+
+在 Vue 3 中，每个父级（或根 Vue 实例）都可以为其所有子级提供依赖关系。这包括深度嵌套的子级，无论组件层次结构有多深。
+
+接着，我们可以把这个值注入任何一个子级。
+
+![在深层组件结构中使用 Provide 和 Inject](https://upload-images.jianshu.io/upload_images/18281896-e968881c1407a949.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+基本上，我们所需要的只是依赖项的某个键，出于我们的目的，我们将使用一个简单的字符串。
+
+然后，我们的 `provide` 方法将把键与某个值关联起来，我们的 `inject` 方法将使用相同的字符串检索该值。
+
+来看一个简单示例：
+
+```html
+<!-- Root component -->
+<script setup>
+  import { provide } from 'vue'
+
+  provide('open', false)
+</script>
+```
+
+```html
+<!-- DeepChild component -->
+<script setup>
+  import { inject } from 'vue'
+
+  // 第二个可选参数是默认值（如果不存在）
+  const open = inject('open', true) // false
+</script>
+```
+
+可以看到，我们在根组件提供想要传递给后代组件的变量，然后它下面的每个组件都可以使用 `inject` 接受需要的变量。
+
+### 全局依赖关系
+
+如果我们想在全局范围内提供一些东西，我们可以使用 `app.provide` 在声明我们的 Vue 应用程序实例的任何地方使用。
+
+```js
+import { createApp } from 'vue'
+
+const app = createApp({})
+
+// 这在整个 Vue 应用程序下都可使用
+app.provide('mode', 'dark')
+```
+
+这在构建 Vue3 插件时尤其有用。
+
+## 使用 `ref` 来提供响应式数据
+
+官网有这样一句话：
+
+> `provide` 和 `inject` 绑定并不是可响应的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
+
+如果我们希望将响应式数据传递给子组件，这也非常方便。我们所要做的就是使用 `ref()` 向方法传递一个响应式属性。
+
+```html
+<!-- inside provider component -->
+<script setup>
+  import { provide, ref } from 'vue'
+
+  const open = ref(false)
+
+  function updateOpen() {
+    open.value = !open.value
+  }
+
+  provide('open', {
+    open,
+    updateOpen
+  })
+</script>
+```
+
+```html
+<!-- in injector component -->
+<script setup>
+  import { inject } from 'vue'
+
+  const { open, updateOpen } = inject('open')
+</script>
+
+<template>
+  <button @click="updateOpen">{{ open }}</button>
+</template>
+```
+
+## 在 Option API 中使用提供和注入
+
+到目前为止，我们已经看到了如何使用 `setup` 方法在 Composition API 中使用 `provide` 和 `inject`。但是，与 Vue3 的其他特性一样，同样的功能可以通过 Options API 来实现。
+
+它们不是 `provide` 和 `inject` 方法，而是作为 `export default` 对象上的选项公开。
+
+这些行为类似，我们只需要为我们想要提供的每个 prop 提供一个键和值。然后，无论我们想在哪里注入这些值，我们都可以在数组中列出特定属性的键。
+
+```js
+export default {
+  // inside provider component
+  provide: {
+    open: false
+  }
+}
+```
+
+```js
+export default {
+  // in injector component
+  inject: ['open'],
+  created() {
+    console.log(this.open) // false
+  }
+}
+```
+
+我们仍然可以注入响应式数据，但因为我们不使用 `ref`，我们可以在 Options API 中使用 `this`。
+
+```js
+export default {
+  // inside provider component
+  data() {
+    return {
+      status: false
+    }
+  },
+  provide: {
+    open: this.status
+  }
+}
+```
+
+```js
+export default {
+  // in injector component
+  inject: ['open'],
+  created() {
+    console.log(this.open) // false
+  }
+}
+```
+
+## 什么时候使用 Provide/Inject？
+
+`provide/inject` 是避免 **Prop 钻取**的一个好方法。回顾一下，当我们的根组件中有一个值，并且层次结构中只有一个子组件需要访问该值时，就需要进行 `provide/inject`。
+
+如果我们只使用 `props`，我们需要不断地将这个 prop 逐级透传给所有中间组件，以便它到达我们层次结构的底部。
+
+如果我们的代码库中发生某些变化，这会引入许多错误位置以及需要重构的位置。
+
+`provide/inject` 通过只要求具有原始值的组件和需要该值的组件具有代码来修复此问题。这使得代码库的维护更加容易。
+
+但是，仍有一些情况下 `props` 是更好的解决方案。
+
+例如，如果我们需要确保我们的值遵循某种格式，那么 prop 验证非常有用。这可以包括字符串格式化、输入验证，甚至只是要求组件需要某些 prop。
+
+这具体看项目场景而定。
+
+另外，[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) 是一个 Vue 的属性装饰器，其中提供相同功能的 `@Provide` 和 `@Inject` 依赖注入装饰器。需要注意的是，它只支持到 Vue 2.6.12。
diff --git "a/Vue/Vue \345\212\250\346\200\201\347\273\204\344\273\266.md" "b/Vue/Vue \345\212\250\346\200\201\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..a1a9942
--- /dev/null
+++ "b/Vue/Vue \345\212\250\346\200\201\347\273\204\344\273\266.md"	
@@ -0,0 +1,72 @@
+# Vue 动态组件
+
+Vue 动态组件可以非常方便地让代码更具可读性和适应性。它们可以将多个条件组件（使用 `v-if`、`v-else-if` 和`v-else` 切换的组件）简化为一行代码。
+
+简而言之，它们允许您以最简单的方式在不同组件之间切换。
+
+## 什么是动态组件？
+
+动态组件是在运行时在组件之间动态切换的方法。
+
+为了更好地理解，让我们看看一些示例。
+
+- 浏览选项卡式组件而无需路由到新页面
+- 在一个组件元素中管理不同类型的弹窗
+- 根据用户是否登录显示不同的内容
+
+所有这些都需要唯一的组件，但动态组件提供了一种快捷方式，而不必逐个包含所有组件。
+
+使用动态组件有几个好处：
+
+- 从开发人员的角度来看，它使您的代码更具可重用性。如果您只需要使用一个元素，而不是为所有内容添加一个 `v-if`，那么它的可伸缩性和可读性就更高。
+- 从用户方面来说，使用动态组件可以使页面更具交互性，并节省页面负载，从而获得更快的用户体验。
+
+> **这是双赢的。开发更容易，用户也会受益。**
+
+现在我们知道了什么是动态组件以及它们为什么有用，让我们学习如何使用它们。
+
+## 如何使用 Vue 动态组件？
+
+使用动态组件非常简单。我们只需要知道两件事：
+
+- `<component>` 组件
+- `v-bind:is` 属性
+
+`<component>` 组件可以根据数据的状态动态渲染不同的组件，而 `v-bind:is` 或 `:is`（简写）属性告诉 `<component>` 渲染哪个已注册组件。
+
+`v-bind:is` 属性可以传递两种类型的值：
+
+- 已注册组件名
+- 实际导入的组件对象
+
+使用也很简单，这里我们使用 `<script setup>` 语法糖。
+
+只需要使用 `import` 语句导入我们想要使用的组件，声明一个变量来存放切换的组件，将 `component` 元素添加到模板中。
+
+```html
+<script setup>
+  import { shallowRef } from 'vue'
+  import ComponentA from '@/components/A.vue'
+  import ComponentB from '@/components/B.vue'
+
+  const comp = shallowRef(ComponentA)
+</script>
+
+<template>
+  <div>
+    <button @click="comp = ComponentA">Component A</button>
+    <button @click="comp = ComponentB">Component B</button>
+    <component :is="comp" />
+  </div>
+</template>
+```
+
+这里我们还添加了两个按钮来控制两个组件的切换。
+
+[演示地址](https://sfc.vuejs.org/#eNqNUstugzAQ/JWVL2mlgO+IRIX+Qc++ELI0TvFDtiEHxL/XxojQtFS5wD5mxuNdD6TQOu07JBnJbW24dmDRdfrIJAAXWhkHA9hL1bbq9oENjNAYJWDnObsV5l35v0Tpirmf0iLo/okpF0w5YwKqVtI6/xUaDqsTX+7Sr0zmNLr0/nziUOi2cji5zc+8nwIfnjrnlIS3uuX114GRWfUuxchxSaDIaSQ8Sy9/0MtHeoDHVsbtTGcEaLRJo8+cLu7JnsQRJaLS6dUq6dcxBDCbG5aRDKZKqPmZhZyRi3PaZpTapg6DvNpUmU/qo9R00nGBKVqRnIy6WTRemJH9SoP6Yo8mMSjPaND8p/kA/aUbZEcmR3+Vae/hPW1tZzX47YFML+M5lXJLZfwGn0H5aA==)
+
+Vue2 和 Vue3 写法区别不大，详细内容请查阅 [Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components) 和 [Built-in Special Elements](https://vuejs.org/api/built-in-special-elements.html#built-in-special-elements)。
+
+您还可以为它添加更多其他的东西，例如：使用 [Vue 过渡](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20%E8%BF%87%E6%B8%A1%E5%92%8C%E5%8A%A8%E7%94%BB.md)以使它无缝转换，[`keep-alive`](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20keep-alive.md) 保存组件状态等。
+
+> 但是即使在最简单的情况下，Vue 动态组件也可以使您的代码更具可维护性和适应性。
diff --git "a/Vue/Vue \346\217\222\346\247\275.md" "b/Vue/Vue \346\217\222\346\247\275.md"
new file mode 100644
index 0000000..c9acf82
--- /dev/null
+++ "b/Vue/Vue \346\217\222\346\247\275.md"	
@@ -0,0 +1,192 @@
+# Vue 插槽
+
+本文参考官网的[插槽](https://vuejs.org/v2/guide/components-slots.html)，你可以在 [CodeSandbox](https://codesandbox.io/s/competent-black-vdp1l?file=/src/components/Home.vue) 测试效果，基本模板已经给出。
+
+> 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot` 和 `slot-scope` 这两个目前已被废弃但未被移除且仍在[文档中](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)的 attribute。新语法的由来可查阅这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。
+
+## 默认插槽（单个插槽）
+
+使用 `<slot>` 标签来提供一个占位符的作用，父组件可以在使用该组件时，传递一些内容。
+
+```html
+<!-- nav.vue -->
+<div>
+  <h2>我是一个标题</h2>
+  <slot> 仅在没有插槽内容时显示 </slot>
+</div>
+```
+
+你可以在 `<slot></slot>` 添加默认内容，它只会在没有提供内容的时候被渲染。
+
+将组件与数据用于插槽：
+
+```html
+<nav>
+  <p>这个会放在 slot 里</p>
+</nav>
+```
+
+当组件渲染的时候，`<slot></slot>` 将会被替换为你指定的内容。
+
+> **注意**：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
+
+## 具名插槽（多个插槽）
+
+> 自 2.6.0 起有所更新。已废弃的使用 `slot` 属性的语法在[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)。
+
+对于这样的情况，`<slot>` 元素有一个特殊的属性：`name`。这个属性可以用来定义额外的插槽：
+
+```html
+<div class="container">
+  <header>
+    <slot name="header"></slot>
+  </header>
+  <main>
+    <slot>Default content</slot>
+  </main>
+  <footer>
+    <slot name="footer"></slot>
+  </footer>
+</div>
+```
+
+一个不带 `name` 的 `<slot>` 出口会带有隐含的名字 `default`。
+
+在向具名插槽提供内容的时候，我们可以在一个 `<template>` 元素上使用 `v-slot` 指令，并以 `v-slot` 的参数的形式提供其名称：
+
+```html
+<Layout>
+  <template v-slot:header>
+    <h1>Here might be a page title</h1>
+  </template>
+
+  <!-- 默认插槽 -->
+  <p>A paragraph for the main content.</p>
+  <p>And another one.</p>
+  <!-- 或
+    <template v-slot:default>
+      <p>A paragraph for the main content.</p>
+      <p>And another one.</p>
+    </template>
+  -->
+
+  <template v-slot:footer>
+    <p>Here's some contact info</p>
+  </template>
+</Layout>
+```
+
+现在 `<template>` 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 `v-slot` 的 `<template>` 中的内容都会被视为默认插槽的内容。
+
+它将替换为以下内容：
+
+```html
+<div class="container">
+  <header>
+    <h1>Here might be a page title</h1>
+  </header>
+  <main>
+    <p>A paragraph for the main content.</p>
+    <p>And another one.</p>
+  </main>
+  <footer>
+    <p>Here's some contact info</p>
+  </footer>
+</div>
+```
+
+注意 **`v-slot` 只能添加在 `<template>` 上**（只有[一种例外情况](https://cn.vuejs.org/v2/guide/components-slots.html#%E7%8B%AC%E5%8D%A0%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99%E8%AF%AD%E6%B3%95)），这一点和已经废弃的 [`slot` 属性](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95) 不同。
+
+## 作用域插槽
+
+> 自 2.6.0 起有所更新。已废弃的使用 `slot-scope` 属性的语法在[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)。
+
+有时让插槽内容能够访问子组件中才有的数据是很有用的。
+
+下面例子中，为了让 `user` 在父级的插槽内容中可用，我们可以将 `user` 作为 `<slot>` 元素的一个属性绑定上去：
+
+```html
+<header>
+  <slot name="header" :user="user"></slot>
+</header>
+```
+
+绑定在 `<slot>` 元素上的属性被称为**插槽 prop**。现在在父级作用域中，我们可以使用带值的 `v-slot` 来定义我们提供的插槽 prop 的名字：
+
+```html
+<Layout>
+  <template v-slot:header="{ user }">
+    {{ user }}
+    <h1>我在父组件头部传递内容给子组件的插槽</h1>
+  </template>
+</Layout>
+```
+
+在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 `slotProps`，你可以随意命名，也可以解构它：
+
+```html
+<Layout>
+  <template v-slot:header="{ user }">
+    {{ user }}
+    <h1>我在父组件头部传递内容给子组件的插槽</h1>
+  </template>
+</Layout>
+```
+
+当只有默认插槽时，你可以这么写：
+
+```html
+<Layout v-slot="slotProps">
+  {{ slotProps.user }}
+  <h1>我在父组件头部传递内容给子组件的插槽</h1>
+</Layout>
+```
+
+我们可以直接将 `v-slot` 用在组件上，但注意默认插槽的缩写语法**不能**和具名插槽混用，因为它会导致作用域不明确：
+
+```html
+<!-- 无效，会导致警告 -->
+<Layout v-slot="{ user }">
+  {{ user }}
+  <template v-slot:header="header"> header 在这里无法使用 </template>
+</Layout>
+```
+
+只要出现多个插槽，请始终为所有的插槽使用完整的基于 `<template>` 的语法：
+
+```html
+<Layout>
+  <template v-slot:header="{ user }"> {{ user }} </template>
+
+  <template v-slot:footer="{ footer }"> {{ footer }} </template>
+</Layout>
+```
+
+## 动态插槽名（2.6.0 新增）
+
+[动态指令参数](https://cn.vuejs.org/v2/guide/syntax.html#%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0)也可以用在 `v-slot` 上，来定义动态的插槽名：
+
+```html
+<Layout>
+  <template v-slot:[dynamicSlotName]> ... </template>
+</Layout>
+```
+
+## 具名插槽的缩写（2.6.0 新增）
+
+`v-slot` 的缩写为 `#`，例如 `v-slot:header` 可以的简写为 `#header`：
+
+```html
+<Layout>
+  <template #header>
+    <h1>Here might be a page title</h1>
+  </template>
+</Layout>
+```
+
+该简写只在其有参数的时候才可用。以下语法是无效的：
+
+```html
+<!-- 这样会触发一个警告 -->
+<current-user #="{ user }"> {{ user }} </current-user>
+```
diff --git "a/Vue/Vue \346\227\240\346\270\262\346\237\223\347\273\204\344\273\266.md" "b/Vue/Vue \346\227\240\346\270\262\346\237\223\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..c045538
--- /dev/null
+++ "b/Vue/Vue \346\227\240\346\270\262\346\237\223\347\273\204\344\273\266.md"	
@@ -0,0 +1,74 @@
+# Vue 无渲染组件
+
+在 Vue.js 中，你可以使用无渲染组件来定义一个组件，这个组件并不会在 DOM 中渲染出任何内容。无渲染组件通常用于封装一些复杂的逻辑或提供一些公共的功能，但并不需要渲染任何 DOM 元素。
+
+你可以使用虚拟节点 `VNode` 来定义一个无渲染组件。虚拟节点是一个用于表示 DOM 元素的 JavaScript 对象，但并不会真正地渲染出来。
+
+举个例子，假设我们要定义一个名为 `RenderLess` 的无渲染组件：
+
+```html
+<!-- RenderLess.vue -->
+<script>
+  export default {
+    render(createElement) {
+      return createElement()
+    }
+  }
+</script>
+```
+
+这个无渲染组件并不会在 DOM 中渲染出任何内容，但是你可以在模板中像普通组件一样使用它：
+
+```html
+<template>
+  <div>
+    <RenderLess></RenderLess>
+  </div>
+</template>
+```
+
+你还可以在无渲染组件中提供一些其他的功能，例如 `props`、`computed`、`methods` 等选项，就像普通组件一样。
+
+例如，使用 `this.$scopedSlots.default` 访问组件的默认插槽，然后将一个对象作为参数传递给这个插槽，其中包含 `props` 传递过来的 `message` 属性。
+
+```html
+<!-- RenderLess.vue -->
+<script>
+  export default {
+    props: ['message'],
+    render() {
+      return this.$scopedSlots.default({ message: this.message })
+    }
+  }
+</script>
+```
+
+你可以像这样使用它：
+
+```html
+<template>
+  <RenderLess message="Hello Vue!">
+    <template v-slot="{ message }">
+      <p>{{ message }}</p>
+    </template>
+  </RenderLess>
+</template>
+
+<script>
+  import Renderless from './Renderless.vue'
+
+  export default {
+    components: {
+      Renderless
+    }
+  }
+</script>
+```
+
+这跟使用普通组件一样，只不过它不会渲染任何 DOM。
+
+使用无渲染组件的好处在于，我们可以将逻辑与标签分离。
+
+但需要注意，无渲染组件不能包含子组件，因为它们并不会在 DOM 中渲染出任何内容。
+
+> 如果你对 Vue 插槽不是很了解，可以阅读 [Vue 插槽](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20%E6%8F%92%E6%A7%BD.md) 了解插槽的用法。
diff --git "a/Vue/Vue \346\234\211\347\212\266\346\200\201\347\273\204\344\273\266\345\222\214\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266.md" "b/Vue/Vue \346\234\211\347\212\266\346\200\201\347\273\204\344\273\266\345\222\214\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..e8b9331
--- /dev/null
+++ "b/Vue/Vue \346\234\211\347\212\266\346\200\201\347\273\204\344\273\266\345\222\214\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266.md"	
@@ -0,0 +1,88 @@
+# Vue 有状态组件和函数式组件
+
+Vue.js 支持两种类型的组件：**有状态组件和函数式组件**。
+
+## 有状态组件
+
+有状态组件是完整的 Vue 组件，它具有自己的状态（也就是数据）和生命周期函数。有状态组件是以 Vue 类的形式定义的，并且通常使用模板来声明如何渲染组件。
+
+以下是 Vue 中有状态组件的一个简单示例：
+
+```html
+<template>
+  <div>
+    {{ message }}
+    <button @click="changeMessage">Change Message</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        message: 'Hello World!'
+      }
+    },
+    methods: {
+      changeMessage() {
+        this.message = 'Hello Vue!'
+      }
+    }
+  }
+</script>
+```
+
+可以看到，它与普通的组件并无差异，它有自己的数据和方法，并使用模板声明如何渲染视图。
+
+## 函数式组件
+
+[函数式组件](https://cn.vuejs.org/guide/extras/render-function.html#functional-components)是没有状态的组件。它只是一个接收 `props` 选项并返回视图的纯函数。函数式组件的声明方式更简单，因此在某些情况下可以提高渲染性能。
+
+以下是 Vue 中函数式组件的一个简单示例：
+
+```html
+<!-- MyComponent.vue -->
+<script>
+  export default {
+    functional: true,
+    props: ['message'],
+    render(createElement, context) {
+      return createElement('div', context.props.message)
+    }
+  }
+</script>
+```
+
+我们添加 `functional: true` 表明当前组件是一个函数式组件。
+
+示例中，它没有自己的数据和方法，而是使用纯函数的形式接收 `props` 并渲染视图。
+
+你也可以用以下方式定义函数式组件：
+
+```html
+<!-- MyComponent.vue -->
+<template functional>
+  <h1>{{ props.message }}</h1>
+</template>
+```
+
+然后，在其他组件中使用它：
+
+```html
+<template>
+  <MyComponent v-bind="{ message: 'Hello Vue!' }" />
+</template>
+
+<script>
+  import MyComponent from './MyComponent'
+  export default {
+    components: {
+      MyComponent
+    }
+  }
+</script>
+```
+
+## 最后
+
+你可以根据组件的需求来选择使用哪种类型的组件。通常来说，如果组件需要拥有自己的状态，就使用有状态组件；如果组件只是简单地接收 `props` 并渲染视图，就使用函数式组件。
diff --git "a/Vue/Vue \346\235\241\344\273\266\346\270\262\346\237\223 v-if \344\270\216 v-show.md" "b/Vue/Vue \346\235\241\344\273\266\346\270\262\346\237\223 v-if \344\270\216 v-show.md"
new file mode 100644
index 0000000..8345e3c
--- /dev/null
+++ "b/Vue/Vue \346\235\241\344\273\266\346\270\262\346\237\223 v-if \344\270\216 v-show.md"	
@@ -0,0 +1,95 @@
+# Vue 条件渲染 v-if 与 v-show
+
+## 什么是条件渲染？
+
+在 Vue 中，有两种方法可以有条件地渲染应用程序的某些部分：`v-if` 和 `v-show`。
+
+条件渲染是控制是否渲染模板代码的能力。我们可以使用应用程序的当前状态来实现这一点。
+
+让我们看一个例子。假设我们正在创建一个表单，如果密码长度小于 6 个字符，我们希望显示一条无效的输入错误消息。
+
+```html
+<tempalte>
+  <div>
+    {{ email }} {{ password }}
+    <p><input type="text" placeholder="Email" v-model="email" /></p>
+    <p><input type="pass" placeholder="pass" v-model="pass" /></p>
+    <p class="error-message" v-if="pass.length < 6">密码必须至少为6个字符</p>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const email = ref('')
+const password= ref('')
+</script>
+```
+
+在本例中，我们使用 `v-if` 指令，然后传入一个布尔语句，如果语句为 `true`，渲染元素。如果为 `false`，则不会渲染。
+
+回到例子，我们将 `v-if` 替换为 `v-show`：
+
+```html
+<p class="error-message" v-show="pass.length < 6">密码必须至少为6个字符</p>
+```
+
+可以看到，它们有同样效果，但它们的工作方式是不同的。
+
+## `v-if` 和 `v-show` 有什么区别？
+
+**关键区别在于 `v-if` 有条件地渲染元素，而 `v-show` 有条件地显示元素。**
+
+这意味着 `v-if` 在切换条件时实际上会销毁和重新创建元素。同时，`v-show` 将始终将元素保留在 DOM 中，并且只会通过更改其 CSS 来切换其显示。
+
+```html
+<template>
+  <div>
+    <p v-if="active">使用 v-if</p>
+    <p v-show="active">使用 v-show</p>
+    <button @click="active = !active">切换状态</button>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue'
+
+  const active = ref(false)
+</script>
+```
+
+当我们的元素被显示时，DOM 看起来像这样。
+
+![active: true](https://upload-images.jianshu.io/upload_images/18281896-102255b0ae3fff4a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+当我们按下按钮时，DOM 看起来像这样。
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-b6a819f6aac25bcf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，使用 `v-if`，条件块已从 DOM 中完全删除。但是对于 `v-show`，它 `display` 被设置为 `none`。
+
+## 如何选择？
+
+> 经常有这么一道面试题，问 `v-if` 与 `v-show` 的区别？
+
+回顾上文，我们知道两者的共同点都是**控制元素显示和隐藏**。
+
+那他们的不同点呢？这里总结几点：
+
+- `v-show` 控制的是元素的 CSS（display）；`v-if` 是控制元素本身的添加或删除。
+- `v-show` 切换的时候不会触发组件的生命周期。 `v-if` 由 `false` 变为 `true` 会触发组件的`beforeCreate`、`create`、`beforeMount`、`mounted` 钩子（跟组件的初始化执行的钩子一致），由 `true` 变为 `false` 会触发组件的 `beforeDestory`、`destoryed` 钩子。
+
+如果以性能为准则：
+
+- `v-if` 具有更高的切换成本（每当条件更改时）
+- `v-show` 具有更高的初始渲染成本。
+
+因此，如果您需要频繁切换某些内容，请使用 `v-show`。如果条件在运行时变化不那么频繁，请使用 `v-if`。
+
+另一件要考虑的事情是使用 `v-if` 允许我们将其他逻辑块与它结合使用。具体来说，我们可以使用 `v-else` 和 `v-else-if` 块来真正将高级逻辑构建到我们的应用程序中。
+
+```html
+<template>
+  <p v-if="active">使用 v-if</p>
+  <p v-else-if="true">else if</p>
+  <p v-else>else</p>
+</template>
+```
diff --git "a/Vue/Vue \346\250\241\346\235\277\347\274\226\350\257\221\345\231\250.md" "b/Vue/Vue \346\250\241\346\235\277\347\274\226\350\257\221\345\231\250.md"
new file mode 100644
index 0000000..9b26d6d
--- /dev/null
+++ "b/Vue/Vue \346\250\241\346\235\277\347\274\226\350\257\221\345\231\250.md"	
@@ -0,0 +1,72 @@
+# Vue 模板编译器
+
+[`vue-template-compiler`](https://www.npmjs.com/package/vue-template-compiler) 模块是将 vue 模板和 [SFC](https://vuejs.org/guide/scaling-up/sfc.html)（单文件组件）编译为 JavaScript 的工具。
+
+大多数开发人员不会使用到 `vue-template-compiler`。但是像 Webpack 的 [`vue-loader`](https://www.npmjs.com/package/vue-loader) 这样的打包工具使用 `vue-template-compiler` 来完成实际编译 `.vue` 文件的繁重工作。
+
+`vue-template-compiler` 有两个主要功能：
+
+- 将模板转换为 [`render()` 函数](https://vuejs.org/guide/extras/render-function.html)
+- 解析 SFC
+
+## 编译模板为渲染函数
+
+Vue 模板只是一个普通的字符串。`vue-template-compiler` 的 `compile()` 函数转换模板字符串，你可以将其用作组件的 `render()` 函数。
+
+```js
+const compiler = require('vue-template-compiler')
+const { renderToString } = require('vue-server-renderer').createRenderer()
+
+// 基于字符串模板编译 render() 函数
+const { render } = compiler.compileToFunctions('<h1>Hello {{ message }}</h1>')
+
+Vue.component('hello', {
+  props: ['message'],
+  render
+})
+
+const app = new Vue({
+  template: '<hello message="Vue"></hello>'
+})
+
+const data = await renderToString(app)
+
+console.log(data) // <h1 data-server-rendered="true">Hello Vue</h1>
+```
+
+## 解析 `.vue` 文件
+
+`vue-template-compiler` 有一个 [`parseComponent()`](https://www.npmjs.com/package/vue-template-compiler#compilerparsecomponentfile-options) 函数，可以将单文件组件（`.vue` 文件）编译为 JavaScript。
+
+```js
+const compiler = require('vue-template-compiler')
+
+const parsed = compiler.parseComponent(`
+  <template>
+    <h1>{{ message }}</h1>
+  </template>
+  <script>
+    export default {
+      data() {
+        return { message: 'Hello Vue' }
+      }
+    }
+  </script>
+`)
+
+// 包含 template 和 data 属性
+const appComponent = Object.assign(
+  { template: parsed.template.content },
+  eval(parsed.script.content)
+)
+
+Vue.component('app', appComponent)
+
+const app = new Vue({
+  template: '<app />'
+})
+
+const data = await renderToString(app)
+
+console.log(data) // <h1 data-server-rendered="true">Hello Vue</h1>
+```
diff --git "a/Vue/Vue \347\232\204\346\267\261\345\272\246 CSS \351\200\211\346\213\251\345\231\250.md" "b/Vue/Vue \347\232\204\346\267\261\345\272\246 CSS \351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000..e109cc9
--- /dev/null
+++ "b/Vue/Vue \347\232\204\346\267\261\345\272\246 CSS \351\200\211\346\213\251\345\231\250.md"	
@@ -0,0 +1,19 @@
+# Vue 的深度 CSS 选择器
+
+我们知道，当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。 如果你希望 `scoped` 样式中的一个选择器能够作用得“更深”，例如影响子组件或修改第三方库组件的样式时，你可以使用深度选择器。
+
+在 Vue2.x 有三种选择：
+
+- `>>>` — 有些例如 SASS 预处理器无法正常解析，使用前需注意
+- `/deep/` 和 `::v-deep` — 支持预处理器解析，它们都是 `>>>` 的别名，但在 Vue 3.x 将不在被支持。
+
+如果使用后面两种，Vue 会提示你：
+
+> **[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.**
+
+在 Vue3.x 中以上语法将替换为 `:deep()` 和 `::v-deep()` 的任意一种。
+
+另外，Vue3 还提供了**插槽选择器**和**全局选择器**
+
+- `:slotted()` — 默认情况下，作用域样式不影响由 `<slot/>` 渲染的内容，因为它们被认为是由传入它们的父组件所拥有。要明确定位插槽内容，请使用 `:slotted` 伪类
+- `:global()` — 如果只想全局应用一个规则，可以使用 `global` 伪类，而不是创建另一个 `<style>`
diff --git "a/Vue/Vue \347\273\204\344\273\266\345\243\260\346\230\216\347\232\204\345\244\232\347\247\215\346\226\271\345\274\217.md" "b/Vue/Vue \347\273\204\344\273\266\345\243\260\346\230\216\347\232\204\345\244\232\347\247\215\346\226\271\345\274\217.md"
new file mode 100644
index 0000000..64aaf19
--- /dev/null
+++ "b/Vue/Vue \347\273\204\344\273\266\345\243\260\346\230\216\347\232\204\345\244\232\347\247\215\346\226\271\345\274\217.md"	
@@ -0,0 +1,46 @@
+# Vue 组件声明的多种方式
+
+- [单文件组件](https://vuejs.org/guide/scaling-up/sfc.html)（SFC）
+
+```html
+<script setup>
+  import { ref } from 'vue'
+  const hi = ref('Hello Vue!')
+</script>
+
+<template>
+  <p class="hi">{{ hi }}</p>
+</template>
+
+<style>
+  .hi {
+    color: plum;
+    font-weight: bold;
+  }
+</style>
+```
+
+- [渲染函数](https://vuejs.org/guide/extras/render-function.html) — 创建虚拟 DOM 节点（vnode），Vue 2 和 Vue 3 略有不同。
+
+```js
+import { h } from 'vue'
+
+const vnode = h('button', 'Hello World!')
+```
+
+> 您可以在 [Vue SFC Playground](https://sfc.vuejs.org/#eNptULtuwzAM/BVWi10gkdHVcAJ061igQxctedCPQBIFiU4LOP73UnZadMjGI3l3PE7qNQR9HVHVqkmnOASGhDyGvfGDCxQZJojYwgxtJAeFrBbGn8gnhhApJNjBGdvB43tG5WQ8AOM31/DBcfCd8fPzL8GlTtZFrize0FqCT4r2/FTIwj+7/qHZ1dMZhd2XxXFkJl9s1gN0doPbLavfnciittSVC0d6TbVGk1ACGF2wB0ZBAE3/sp+m5bJ5bipBS3fwYRTPrRMBuzNK5kbJqKn+2Gqj1pO37hD0JZGXHy7xzX2QjKph6eSehMnYqJ45pLqqUnvKn78kTbGrpNJx9Dw41Jjc9hjpK2EUYaOyxCyPVPMPiQ6W0w==) 进行平常的 Demo 演示、练习。
+
+- [JSX/TSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) — 如果您使用 Vite 构建项目，可以使用 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 插件以支持它。
+
+```js
+const elem = <h1>我喜欢使用 JSX!</h1>
+```
+
+> 关于 JSX 的介绍：[JSX Introduction](https://facebook.github.io/jsx/#sec-intro)。
+
+## 更多资料
+
+还有其他一些类似形式创建组件的方法，这里不再介绍，详细内容可以阅读下文：
+
+- [7 Ways To Define A Component Template in VueJS](https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d)
+- [Writing multiple Vue components in a single file](https://codewithhugo.com/writing-multiple-vue-components-in-a-single-file/)
diff --git "a/Vue/Vue \347\273\204\344\273\266\351\200\232\344\277\241.md" "b/Vue/Vue \347\273\204\344\273\266\351\200\232\344\277\241.md"
new file mode 100644
index 0000000..e8db9a3
--- /dev/null
+++ "b/Vue/Vue \347\273\204\344\273\266\351\200\232\344\277\241.md"	
@@ -0,0 +1,796 @@
+# Vue 组件通信
+
+本文将介绍 Vue 2 和 Vue 3 组件通信的各种方式。
+
+## Vue 2 的组件通信
+
+Vue 2.x 组件通信共有 12 种：
+
+- `props`
+- `$emit / v-on`
+- `.sync`
+- `v-model`
+- `ref`
+- `$children / $parent`
+- `$attrs / $listeners`
+- `provide / inject`
+- `EventBus`
+- `Vuex`
+- `$root`
+- `slot`
+
+**父子组件通信**：
+
+- `props`
+- `$emit / v-on`
+- `$attrs / $listeners`
+- `ref`
+- `.sync`
+- `v-model`
+- `$children / $parent`
+- `provide / inject`（也可以，但不推荐）
+
+**兄弟组件通信**：
+
+- `EventBus`
+- `Vuex`
+- `$parent`
+
+**跨层级组件通信**：
+
+- `provide / inject`
+- `EventBus`
+- `Vuex`
+- `$attrs / $listeners`
+- `$root`
+
+### `props`
+
+`props` 是最常用的，用于父组件向子组件传送数据。
+
+```html
+<template>
+  <ChildComponent :msg="msg" />
+</template>
+```
+
+父组件通过 `props` 向下传递数据给子组件。子组件接受方式有两种：
+
+- 数组
+- 对象
+
+使用对象可以规定接收的数据类型、默认值、验证等。
+
+```js
+// 数组
+export default {
+  props: ['msg']
+}
+
+// 对象
+export default {
+  props: {
+    msg: {
+      type: String,
+      default: '默认值'
+    }
+  }
+}
+```
+
+有几点需要注意：
+
+- 子组件接收父组件的数据不能被直接修改，这样会报错。如果子组件使用到 `props` 进行修改的话可以借用 `computed`。
+- 组件中的数据共有三种形式：`data`、`props`、`computed`。
+- Vue 实例属性挂载顺序为 `props` —> `methods` —> `data` —> `computed` —> `watch`。不要出现同名属性的情况，否则数据将被覆盖/报错。
+
+### `$emit/v-on`
+
+`$emit/v-on` 通过事件形式传递数据。
+
+子组件通过 `$emit` 派发事件的方式给父组件传递数据，触发父组件更新等操作
+
+父组件：
+
+```html
+<template>
+  <ChildComponent @sendMsg="getChildMsg" />
+</template>
+
+<script>
+  export default {
+    methods: {
+      getChildMsg(msg) {
+        console.log(msg)
+      }
+    }
+  }
+</script>
+```
+
+子组件：
+
+```js
+export default {
+  data() {
+    return {
+      msg: 'Hello Vue'
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('sendMsg', this.msg)
+    }
+  }
+}
+```
+
+其中 `$emit` 的第二个参数附带子组件想要传递给父组件的数据。
+
+### `.sync`
+
+`.sync` 可以帮我们实现父组件向子组件传递数据的双向绑定。
+
+子组件接收到数据后可以直接修改，并且会同时修改父组件的数据。
+
+父组件：
+
+```html
+<template>
+  <ChildComponent :open.sync="open" />
+</template>
+
+<script>
+  import ChildComponent from './ChildComponent.vue'
+  export default {
+    data() {
+      return {
+        open: true
+      }
+    }
+  }
+</script>
+```
+
+子组件：
+
+```js
+export default {
+  props: ['open'],
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(newVal) {
+        this.$emit('update:page', newVal)
+      }
+    }
+  }
+}
+```
+
+当我们在子组件里修改 `currentOpen` 时，父组件的 `open` 也会随之改变。
+
+### `v-model`
+
+`v-model` 与 `.sync` 类似，可以实现父组件向子组件传递数据的双向绑定。子组件通过 `$emit` 修改父组件的数据。
+
+父组件：
+
+```html
+<template>
+  <div>
+    {{ value }}
+    <ChildComponent v-model="value" />
+  </div>
+</template>
+
+<script>
+  import ChildComponent from './ChildComponent.vue'
+  export default {
+    data() {
+      return {
+        value: 'Hello Vue'
+      }
+    }
+  }
+</script>
+```
+
+子组件：
+
+```html
+<!-- 第一种：默认 prop 和 event -->
+<template>
+  <input :value="value" @input="handlerChange" />
+</template>
+
+<script>
+  export default {
+    props: ['value'],
+    methods: {
+      handlerChange(e) {
+        this.$emit('input', e.target.value)
+      }
+    }
+  }
+</script>
+
+<!-- 第二种：自定义 prop 和 event -->
+<template>
+  <input :value="message" @input="handlerChange" />
+</template>
+
+<script>
+  export default {
+    props: ['message'],
+    model: {
+      prop: 'message',
+      event: 'change'
+    },
+    methods: {
+      handlerChange(e) {
+        this.$emit('change', e.target.value)
+      }
+    }
+  }
+</script>
+```
+
+默认情况下，一个组件上的 `v-model` 会把 `value` 用作 prop 且把 `input` 用作 event。也就是上面示例中的第一种方式。
+
+而 `model` 选项允许一个自定义组件在使用 `v-model` 时自定义 prop 和 event。也就是上面示例中的第二种方式。
+
+这种方式在 Vue 3 中得到简化。继续往下看。
+
+### `ref`
+
+通过在子组件上绑定 `ref`，从而获取子组件实例来调用组件的属性或方法。
+
+父组件：
+
+```html
+<template>
+  <ChildComponent ref="child" />
+</template>
+
+<script>
+  import ChildComponent from './ChildComponent.vue'
+  export default {
+    mounted() {
+      // 引用组件实例，获取组件的属性和方法
+      const child = this.$refs.child
+      console.log(child.name) // O.O
+      child.handleMethod('调用了子组件的方法')
+    }
+  }
+</script>
+```
+
+子组件：
+
+```js
+export default {
+  data() {
+    return {
+      name: 'O.O'
+    }
+  },
+  methods: {
+    handleMethod(name) {
+      console.log(name)
+    }
+  }
+}
+```
+
+### `$parent / $children`
+
+父组件使用 `$children` 访问子组件，子组件使用 `$parent` 访问父组件。
+
+父组件：
+
+```js
+export default {
+  data() {
+    return {
+      name: 'O.O'
+    }
+  },
+  methods: {
+    handleMethod() {
+      return '父组件的方法'
+    }
+  },
+  mounted() {
+    // 获取第一个子组件中的属性
+    this.$children[0].name // K.O
+    // 调用第一个子组件的方法
+    this.$children[0].handleMethod() // 第一个子组件的方法
+  }
+}
+```
+
+子组件：
+
+```js
+export default {
+  data() {
+    return {
+      name: 'K.O'
+    }
+  },
+  methods: {
+    handleMethod() {
+      return '第一个子组件的方法'
+    }
+  },
+  mounted() {
+    // 获取父组件中的属性
+    this.$parent.name // O.O
+    // 调用父组件的方法
+    this.$parent.handleMethod() // 父组件的方法
+  }
+}
+```
+
+### `$attrs / $listeners`
+
+多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这两个，比如父组件向孙子组件传递数据时。
+
+- `$attrs` 包含父作用域里除 `class` 和 `style` 除外的非 `props` 属性集合。通过 `this.$attrs` 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 `v-bind="$attrs"`
+- `$listeners` 包含了父作用域中不含 `.native` 修饰器的事件监听集合。如果还要继续传给子组件内部的其他组件，就可以通过 `v-on="$linteners"`。在创建更高层次的组件时非常有用。
+
+父组件：
+
+```html
+<template>
+  <ChildComponent :name="name" title="Hello Vue" />
+</template>
+
+<script>
+  import ChildComponent from './ChildComponent.vue'
+  export default {
+    data() {
+      return {
+        name: 'O.O'
+      }
+    }
+  }
+</script>
+```
+
+子组件：
+
+```html
+<template>
+  <!-- 继续传给孙子组件 -->
+  <SubChild v-bind="$attrs" />
+</template>
+
+<script>
+  import SubChild from './SubChild.vue'
+  export default {
+    props: ['name'], // 这里可以接收，也可以不接收
+    mounted() {
+      // 如果 props 接收了 name 就是 { title: 'Hello Vue' }，否则就是 { name: 'O.O', title: 'Hello Vue' }
+      console.log(this.$attrs)
+    }
+  }
+</script>
+```
+
+### `provide / inject`
+
+`provide` 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 `inject` 来接收 `provide` 提供的数据或方法。
+
+父组件：
+
+```js
+export default {
+  data() {
+    msg: 'hi'
+  },
+  provide() {
+    return {
+      name: 'O.O',
+      msg: this.msg,
+      handlerMethod: this.handlerMethod
+    }
+  },
+  methods: {
+    handlerMethod() {
+      console.log('这是注入的方法')
+    }
+  }
+}
+
+// 也可以使用这种方式，但无法使用组件的 this
+export default {
+  provide: {
+    name: 'O.O'
+  },
+}
+```
+
+后代组件：
+
+```js
+export default {
+  inject: ['name', 'msg', 'handlerMethod'],
+  mounted() {
+    console.log(this.msg) // hi
+    this.handlerMethod()
+  }
+}
+```
+
+**注意**，provide`和`inject` 绑定并不是可响应的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
+
+### `EventBus`
+
+使用 `EventBus`（**事件总线**）可以处理任何组件间的通信。
+
+具体步骤是创建一个 Vue 实例，然后 `$on` 监听事件，`$emit` 来派发事件。
+
+首先，创建并导出一个 Vue 实例：
+
+```js
+// src/eventBus.js
+import Vue from 'vue'
+export default new Vue()
+```
+
+祖先元素使用 `$on` 方法监听 `eventBus` 的事件：
+
+```js
+import bus from '@/eventbus'
+
+export default {
+  // ...
+  mounted() {
+    bus.$on('change-open', () => {
+      this.open = !this.open
+    })
+  }
+}
+```
+
+后代元素使用 `$emit` 触发 `eventBus` 的事件：
+
+```js
+import bus from '@/eventBus'
+
+export default {
+  // ...
+  methods: {
+    handleClick(e) {
+      bus.$emit('change-open')
+    }
+  }
+}
+```
+
+这种方式直接抽离成一个文件，可以在任何地方引入。
+
+您也可以直接挂载到全局，或者注入到 Vue 的根对象上。
+
+```js
+// 挂载全局
+import Vue from 'vue'
+Vue.prototype.$bus = new Vue()
+
+// 注入到 Vue 根对象上
+new Vue({
+  el: '#app',
+  data: {
+    Bus: new Vue()
+  }
+})
+```
+
+### `Vuex`
+
+Vuex 可以在任何组件形式上实现通信，您可以阅读我之前写过的一篇 [Vuex](https://github.com/lio-zero/blog/blob/main/Vue/Vuex.md) 文章。
+
+这里不过多介绍。
+
+### `$root`
+
+`$root` 为当前组件树的根组件实例，如果当前实例没有父组件，那么这个值就是它自己。
+
+通过维护根实例上的 `data`，就可以实现组件间的数据共享。
+
+```js
+export default {
+  mounted() {
+    console.log(this.$root) // 直接访问到根组件
+  }
+}
+```
+
+### `slot`
+
+`slot` 的作用域插槽可以将子组件的数据传递给父组件。
+
+父组件：
+
+```html
+<Layout>
+  <template v-slot:header="{ user }">
+    {{ user }}
+    <h1>我在父组件头部传递内容给子组件的插槽</h1>
+  </template>
+</Layout>
+```
+
+子组件：
+
+```html
+<template>
+  <header>
+    <slot name="header" :user="user"></slot>
+  </header>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        user: { name: 'O.O' }
+      }
+    }
+  }
+</script>
+```
+
+详细内容可以阅读 [Vue 插槽](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20%E6%8F%92%E6%A7%BD.md)。
+
+## Vue 3 的组件通信
+
+Vue 3 基于新的响应式系统重新实现，它的一些新的功能、API 也有所改变。
+
+以下介绍的内容为 Vue 3.2 以上版本。Vue 3 版本迭代很快，可能有一些 API 略有不同，详细请查阅官网。
+
+### `props` 属性
+
+父组件与子组件传值，通过 `props`：
+
+```html
+<template>
+  <Child name="Vue 3" />
+</template>
+```
+
+子组件：
+
+```html
+<template>
+  <div>{{ name }}</div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    name: String
+  })
+
+  console.log(props.name) // Vue 3
+</script>
+```
+
+Vue 3 的示例中，我们都使用 `setup` 语法糖。
+
+### `$emit`
+
+`$emit` 我在 [Vue $emit 自定义事件](https://github.com/lio-zero/blog/blob/main/Vue/%E5%9C%A8%20Vue%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20%24emit%20%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.md) 有介绍到，这里我们简单的写一个示例。
+
+子组件向父组件传递数据：`$on` 和 `$emit`。
+
+父组件使用 `$on`（简写 `@`）绑定一个自定义事件（这里是 `@custom-change`）接受子组件传递过来的数据：
+
+```html
+<template>
+  <MyInput @custom-change="handleChange" />
+</template>
+
+<script setup>
+  import MyInput from './MyInput.vue'
+  const handleChange = (value) => {
+    console.log('Child msg: ', value)
+  }
+</script>
+```
+
+子组件通过 `$emit` 方法传递数据给父组件：
+
+```html
+<!-- MyInput.vue -->
+<template>
+  <input type="text" @change="handleEmit" />
+</template>
+
+<script setup>
+  const emit = defineEmits(['customChange'])
+
+  const handleEmit = (e) => {
+    emit('customChange', e.target.value)
+  }
+</script>
+```
+
+### `attrs`
+
+`attrs` 包含父作用域里除 `class` 和 `style` 除外的非 `props` 属性集合。
+
+父组件：
+
+```html
+<template>
+  <Child :firstName="firstName" :lastName="lastName" name="D.O" />
+</template>
+
+<script setup>
+  import Child from './child.vue'
+  import { ref } from 'vue'
+
+  const firstName = ref('Hello')
+  const lastName = ref('Vue')
+</script>
+```
+
+子组件：
+
+```html
+<script setup>
+  import { useAttrs } from 'vue'
+  defineProps({
+    firstName: String
+  })
+  const attrs = useAttrs()
+  console.log(attrs) // { lastName: "Vue", name: "D.O" }
+</script>
+```
+
+这里 `firstName` 已经被 props 接收，所以 `attrs` 只有 `lastName` 和 `name`。
+
+### `v-model` 指令
+
+关于 `v-model`，我在 [Vue v-model 指令](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20v-model%20%E6%8C%87%E4%BB%A4.md)做了详细介绍，下面简单带过。
+
+我们可以在组件上使用 `v-model` 指令实现双向绑定。
+
+父组件：
+
+```html
+<template>
+  <Child v-model:first="firstName" v-model:last="lastName" />
+  <div>{{ firstName }} {{ lastName }}</div>
+</template>
+
+<script setup>
+  import Child from './child.vue'
+  import { ref } from 'vue'
+
+  const firstName = ref('Hello')
+  const lastName = ref('Vue2')
+</script>
+```
+
+子组件：
+
+```html
+<template>
+  <button @click="handlerClick">按钮</button>
+</template>
+
+<script setup>
+  const emit = defineEmits(['update:first', 'update:last'])
+
+  const handlerClick = () => {
+    emit('update:first', 'Hello')
+    emit('update:last', 'Vue3')
+  }
+</script>
+```
+
+### `defineExpose / ref`
+
+通过 `defineExpose` 暴露子组件的属性或方法，然后在父组件引用子组件的位置绑定 `ref`，获取子组件的属性或调用子组件方法。
+
+父组件：
+
+```html
+<template>
+  <Child ref="child" />
+  <button @click="handlerClick">按钮</button>
+</template>
+
+<script setup>
+  import Child from './child.vue'
+  import { ref } from 'vue'
+
+  const child = ref(null)
+  const handlerClick = () => {
+    // 获取子组件对外暴露的属性和方法
+    console.log(child.value.name) // O.O
+    child.value.sayHi() // Hello Vue
+  }
+</script>
+```
+
+子组件：
+
+```html
+<script setup>
+  defineExpose({
+    name: 'O.O',
+    sayHi() {
+      console.log('Hello Vue')
+    }
+  })
+</script>
+```
+
+### `provide/inject`
+
+`provide / inject` 为依赖注入，可以穿透多层组件，实现数据从父组件传递到子组件。
+
+- `provide` — 可以让我们指定想要提供给后代组件的数据
+- `inject` — 在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以拿到
+
+父组件：
+
+```html
+<template>
+  <div>provide 和 reject</div>
+  <Child />
+</template>
+
+<script setup>
+  import Child from './child.vue'
+  import { provide } from 'vue'
+
+  provide('name', 'O.O')
+</script>
+```
+
+子组件：
+
+```html
+<template>
+  <div>子组件</div>
+</template>
+
+<script setup>
+  import { inject } from 'vue'
+
+  const name = inject('name')
+  console.log(name) // O.O
+</script>
+```
+
+`provide/inject` 适用于祖先和后代关系的组件间的通信，祖先元素通过 `provide` 提供一个值，后代元素则通过 `inject` 获取到这个值。
+
+如果需要设置全局变量或方法，可以将它们放在根组件的 `provide` 中，这样所有的组件都能使用它们。
+
+如果需要变量是响应式的，使用 `ref` 或 `reactive` 包装一下。
+
+> 推荐：[Vue 依赖注入使用 Provide 和 Inject](https://github.com/lio-zero/blog/blob/main/Vue/Vue%20%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E4%BD%BF%E7%94%A8%20Provide%20%E5%92%8C%20Inject.md)
+
+### mitt
+
+Vue3 中不再有 `EventBus` 跨组件通。
+
+因为，在 Vue3 中，Vue 不再是构造函数，而是 `Vue.createApp({})` 返回一个没有 `$on`、`$emit` 和 `$once` 方法的对象。
+
+**怎么办？**有一个 [mitt](https://github.com/developit/mitt) 库可以帮助到我们，其原理还是 `EventBus`。
+
+详细内容可以查阅我写的另一篇 [Vue3 使用 Event Bus](https://github.com/lio-zero/blog/blob/main/Vue/Vue3%20%E4%BD%BF%E7%94%A8%20Event%20Bus.md)。
+
+### Vuex 和 Pinia
+
+Vue3 的全局状态管理器有两个，第一个是 [Vuex 4](https://vuex.vuejs.org/zh/)，第二个则的 [Pinia](https://pinia.vuejs.org/)
+
+这里不过多介绍，详细内容可以查阅官网。
+
+> 对于 Vue 2，我写过一篇较老的文章 [Vuex](https://github.com/lio-zero/blog/blob/main/Vue/Vuex.md)，可以看看。
diff --git "a/Vue/Vue \350\277\207\346\270\241\345\222\214\345\212\250\347\224\273.md" "b/Vue/Vue \350\277\207\346\270\241\345\222\214\345\212\250\347\224\273.md"
new file mode 100644
index 0000000..c9b15db
--- /dev/null
+++ "b/Vue/Vue \350\277\207\346\270\241\345\222\214\345\212\250\347\224\273.md"	
@@ -0,0 +1,211 @@
+# Vue 过渡和动画
+
+**Vue 过渡和动画是使您的网站**更具现代感并为网站访问者提供更好的用户体验的好方法。
+
+为了适应广泛的开发人员，Vue 提供了几种方法来实现过渡：
+
+- CSS 过渡/动画样式
+- JavaScript 钩子可以对 DOM 进行编辑
+- 使用第三方 CSS/JS 库
+
+本文将介绍如何在 Vue 中使用它们。
+
+## 什么是 `<transition>` 元素？
+
+`transition` 元素是一个内置组件包装器，可以帮助您向元素添加过渡功能。本质上，它设置了不同的钩子，并向不断变化的元素添加类，以便我们可以在过渡的不同阶段对它们进行样式设置。
+
+有 6 个不同的过渡类（3 个用于进入，3 个用于离开）。
+
+- `v-enter-from` / `v-leave-from`：过渡的开始状态；过渡开始后将其删除（在 Vue2 中，它们是 `v-enter`和`v-leave`）
+- `v-enter-active` / `v-leave-active`：过渡的活动状态
+- `v-enter-to` / `v-leave-to`：过渡的结束状态
+
+> **注意**：给 `transition` 添加 `name` 属性时，类的格式是`{name}-enter-from`，`{name}-enter-active`，依此类推。
+
+我们来看一个简单的示例。
+
+## Vue 过渡示例
+
+使用 `<transition>` 内置组件包裹需要过渡的元素，并将 `name` 属性值设置为已定义好的类 ：
+
+```html
+<template>
+  <h1>Vue 过渡动画</h1>
+  <button @click="open = !open">切换动画</button>
+  <transition name="fade">
+    <p v-if="open" class="example-div">Hello Vue</p>
+  </transition>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  const open = ref(true)
+</script>
+```
+
+添加过渡样式：
+
+```css
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+```
+
+注意这些类前面的 `fade` 前缀，它是我们在 `transition` 标签上使用 `name` 属性的值。
+
+以上示例中，当过渡处于活动状态时，向 `opacity` 属性添加过渡，使其平滑移动。
+
+## 自定义类名和 JS 钩子
+
+我们还可以通过将以下 6 个属性中的任何一个添加到我们的 `<transition>` 元素中来覆盖这些默认类的任何一个：
+
+- `enter-from-class`
+- `enter-active-class`
+- `enter-to-class`
+- `leave-from-class`
+- `leave-active-class`
+- `leave-to-class`
+
+这在将自定义库添加到代码中时，这特别有用，例如 Animate.css，后面我们会介绍。
+
+```html
+<transition
+  enter-active-class="animate__animated animate__fadeIn animate__zoomIn"
+  leave-active-class="animate__animated animate__fadeOut animate__zoomOut"
+>
+  ...
+</transition>
+```
+
+另外， `transition` 元素还会触发 JS 钩子，因此我们可以捕获它们，并使用 JavaScript（而不是 CSS）执行动画。可用的钩子是：
+
+- `before-enter / before-leave`
+- `enter / leave`
+- `after-enter / after-leave`
+- `enter-cancelled / leave-cancelled`
+
+```html
+<transition @before-enter="beforeEnter">...</transition>
+```
+
+然后，我们可以在 JavaScript 中处理它们。
+
+```js
+// done 是一个可选的回调方法
+beforeEnter(el, done) {
+  done()
+}
+```
+
+## 使用 Vue 过渡的高级用法
+
+### 让您的组件在加载时进行过渡
+
+我们只需将 `appear` 属性添加到您的过渡元素中。
+
+```html
+<transition name="fade" appear>...</transition>
+```
+
+### 在多个元素之间过渡
+
+假设您有两个像这样彼此交替的 `div`。
+
+```html
+<transition name="fade" appear>
+  <div v-if="visible">Option A</div>
+  <div v-else>Option B</div>
+</transition>
+```
+
+你所要做的就是把它们包装在一个过渡元素中。要使代码按您想要的方式运行，需要注意以下几点：
+
+- **绝对定位元素** — 当 Vue 在这两个元素之间转换时，有时两个元素都是可见的，并转换为 `in/out`。如果你想要一个平滑的效果，您可能希望将它们绝对放置在彼此之上。否则，当元素从 DOM 中添加/删除时，它们可能只是到处跳跃。
+- **如果元素具有相同的标签，则必须向组件添加 `key` 属性** 如果您的元素具有相同的标签，Vue 将尝试优化内容，只替换元素的内容。根据文档，如果在多个元素之间转换，最好添加一个键。
+
+## 自定义过渡时间
+
+Vue 通常可以检测到您的过渡/动画结束的时间，但是如果您想设置确切的持续时间，Vue 过渡有一个 `duration` 属性。
+
+您既可以为 `enter` 和 `leave` 过渡都传递一个值，也可以传递具有两个值的对象。
+
+```html
+<transition :duration="500">...</transition>
+
+<transition :duration="{ enter: 1000, leave: 200 }">...</transition>
+```
+
+## 动态组件之间的过渡
+
+您只需要将 Vue 动态组件包装在 `transition` 元素中。
+
+```html
+<transition name="fade" appear>
+  <component :is="componentType" />
+</transition>
+```
+
+### 创建可重用的 Vue 过渡组件
+
+在 Vue 中工作时要养成的一个好习惯是尝试设计可重用的组件。
+
+我们只需要将 `transition` 元素放在根中并插入组件插槽，以便我们可以添加更多内容。
+
+```html
+<template>
+  <transition name="fade" appear>
+    <slot></slot>
+  </transition>
+</template>
+```
+
+现在，您不必担心将过渡样式、名称和所有内容添加到每个组件中，而只需使用此组件即可。
+
+## 第三方库
+
+为了方便使用 Vue 过渡效果，我们可以使用第三方动画库，例如：[Animate.css](https://animate.style/)。
+
+### 安装
+
+使用 CDN：
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
+/>
+```
+
+使用 npm：
+
+```npm
+npm i animate.css
+```
+
+导入
+
+```js
+// main.js
+import 'animate.css'
+```
+
+现在，在 `transition` 元素中，我们可以使用 `enter-active-class` 和 `leave-active-class` 属性，将 `animate.js` 动画类添加到我们的元素上。
+
+```html
+<transition
+  enter-active-class="animate__animated animate__fadeIn animate__zoomIn"
+  leave-active-class="animate__animated animate__fadeOut animate__zoomOut"
+>
+  ...
+</transition>
+```
+
+> **注意**：对于 `animate.js`，我们需要添加动画类 `animate__animated`。
+
+它提供了许多动画类，详细[查看官网](https://animate.style/)。
diff --git "a/Vue/Vue \351\200\222\345\275\222\347\273\204\344\273\266.md" "b/Vue/Vue \351\200\222\345\275\222\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..c9a8dd8
--- /dev/null
+++ "b/Vue/Vue \351\200\222\345\275\222\347\273\204\344\273\266.md"	
@@ -0,0 +1,123 @@
+# Vue 递归组件
+
+> [SFC](https://vuejs.org/guide/scaling-up/sfc.html) 可以通过其文件名隐式引用自身。
+
+即组件通过组件名引用自身，这种情况就是[递归组件](https://vuejs.org/api/sfc-script-setup.html#using-components)。
+
+一个简单的示例：
+
+```html
+<!-- index.vue -->
+<template>
+  <TreeItem :treeData="treeData"></TreeItem>
+</template>
+
+<script setup>
+  import TreeItem from './TreeItem.vue'
+
+  const treeData = [
+    {
+      label: 'Level one 1',
+      children: [
+        {
+          label: 'Level two 1-1',
+          children: [
+            {
+              label: 'Level three 1-1-1'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Level one 2',
+      children: [
+        {
+          label: 'Level two 2-1',
+          children: [
+            {
+              label: 'Level three 2-1-1'
+            }
+          ]
+        },
+        {
+          label: 'Level two 2-2',
+          children: [
+            {
+              label: 'Level three 2-2-1'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Level one 3',
+      children: [
+        {
+          label: 'Level two 3-1',
+          children: [
+            {
+              label: 'Level three 3-1-1'
+            }
+          ]
+        },
+        {
+          label: 'Level two 3-2',
+          children: [
+            {
+              label: 'Level three 3-2-1'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+</script>
+```
+
+```html
+<!-- TreeItem.vue -->
+<template>
+  <div class="tree">
+    <div v-for="tree in treeData" :key="tree.label">
+      <div class="tree-node__label">{{ tree.label }}</div>
+      <div
+        v-if="tree.children && tree.children.length"
+        class="tree-node__children"
+      >
+        <!-- 递归调用自身 -->
+        <TreeItem :treeData="tree.children" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    treeData: {
+      type: Array,
+      default: () => []
+    }
+  })
+</script>
+```
+
+上面的示例中，我们使用 `TreeItem` 组件，引用了自身。
+
+我们知道，在使用递归的时候，我们需要给予递归正确的终止条件，以确保不会导致无限循环。Vue 递归组件也不例外，我们需要使用 `v-if` 指令进行判断。
+
+在 Vue3 中，它会通过其文件名隐式引用自身。而在 Vue2 中，你需要指定一个 `name` 选项。
+
+```js
+export default {
+  name: 'TreeItem'
+}
+```
+
+还需要注意，它的优先级低于导入的组件。如果您的命名导入与组件的推断名称冲突，您可以为导入设置别名：
+
+```js
+import { TreeItem as TreeItemChild } from './components'
+```
+
+递归组件应用场景相对较少，常用于 Tree、Menu 这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构。
diff --git "a/Vue/Vue \351\224\231\350\257\257\345\244\204\347\220\206 \342\200\224 onErrorCaptured \351\222\251\345\255\220.md" "b/Vue/Vue \351\224\231\350\257\257\345\244\204\347\220\206 \342\200\224 onErrorCaptured \351\222\251\345\255\220.md"
new file mode 100644
index 0000000..ca36b1f
--- /dev/null
+++ "b/Vue/Vue \351\224\231\350\257\257\345\244\204\347\220\206 \342\200\224 onErrorCaptured \351\222\251\345\255\220.md"	
@@ -0,0 +1,185 @@
+# Vue 错误处理 — onErrorCaptured 钩子
+
+Vue 实例有一个 [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) 钩子，每当事件处理程序或生命周期钩子抛出错误时，Vue 会调用该钩子。
+
+例如，下面的代码将增加一个计数器，每次单击按钮时，组件 `test` 都会抛出一个错误。
+
+```html
+<template>
+  <span id="count">{{ count }}</span>
+  <test></test>
+</template>
+
+<script setup>
+  import { onErrorCaptured, ref } from 'vue'
+  import test from './test.vue'
+
+  const count = ref(0)
+
+  onErrorCaptured((err) => {
+    console.log('Caught error', err.message)
+    ++count.value
+    return false
+  })
+</script>
+```
+
+`test.vue` 组件内容如下：
+
+```html
+<!-- 这里我们没有提供 notAMethod 方法供按钮调用 -->
+<template>
+  <button @click="notAMethod()">Throw</button>
+</template>
+```
+
+按照上面的步骤走，您将在控制台看到 `onErrorCaptured` 捕获的错误：
+
+```txt
+Caught error _ctx.notAMethod is not a function
+```
+
+[示例地址](https://sfc.vuejs.org/#eNp9Ur1u1EAQfpVhm/Mp/qE++SyiEyUd5TaOPb5zsHdXs+ujsFxRQKRI/AiQEDR0FAghqBASvExkkrdgd32B5CKlmr9vv29mdnp2qFS87ZAtWGqwVU1uMOMCINUqF1CXS84K2QnDWdb34F0YhjRx5QloUJssTbzhwjn/aGyoC6qVAY2mUx5ft0qSgR5KrGqBK2ljgcKEIMV9IkmrXJmOsAyBsIIBKpItzGyPsyvPndquEntpN4QFOEghhS1OrS4dSXB37vJ7gkHvkuCpnDdYkLN7bQQBEs1hmcEO7+hlg3Ej18FslXfrjQELkTQLnY1b1Dpfo5cEODjwjcTbvOlwSpHdBQmo8kb7jBO2C/WLyljIphGjNlfxsZbCfo1X5ruC5mxx2QtndmwXc7YxRulFkuiqcLs41rGkdWK9mKx+3WKMuo2OSD7WSJaYs/AKR2KTW6SIUJRISLdx7kFv8PqZuBjsKJc/487rThTB+e93F09Px2cvz35+Hr99HD+cjM9fnP16D0KawwdoNrKE8e2P8fsbmxxPTy5efTn/+uTP608QRe64rp/oUWeMFHCvaOrikT3U/yTB3N7rw41tKk0m1PXTZMNf5AMWgQ==)
+
+## `onErrorCaptured` 只捕获嵌套组件中的错误
+
+一个常见的问题是，当错误发生在注册 `onErrorCaptured` 钩子的同一组件中时，Vue 不会调用 `onErrorCaptured`。
+
+例如，如果从上述示例中删除 `test` 组件，并将按钮内联到顶级 Vue 实例中，Vue 将不会调用 `onErrorCaptured`。
+
+```html
+<template>
+  <span id="count">{{ count }}</span>
+  <button @click="notAMethod">Throw</button>
+</template>
+
+<script setup>
+  import { onErrorCaptured, ref } from 'vue'
+  import test from './test.vue'
+
+  const count = ref(0)
+
+  // Vue 不会调这个钩子，因为错误发生在这个 Vue 实例中，而不是子组件。
+  onErrorCaptured((err) => {
+    console.log('Caught error', err.message)
+    ++count.value
+    return false
+  })
+</script>
+```
+
+## 异步错误
+
+好的一面是，当异步函数抛出错误时，Vue 会调用 `onErrorCapture`。
+
+例如，如果子组件异步抛出错误，Vue 仍然会将错误冒泡给父组件。
+
+```html
+<template>
+  <span id="count">{{ count }}</span>
+  <test />
+</template>
+
+<script setup>
+  import { onErrorCaptured, ref } from 'vue'
+  import test from './test.vue'
+
+  const count = ref(0)
+
+  onErrorCaptured((err) => {
+    console.log('Caught error', err.message)
+    ++count.value
+    return false
+  })
+</script>
+```
+
+`test.vue`：
+
+```html
+<template>
+  <button @click="test">Throw</button>
+</template>
+
+<script setup>
+  // Vue 会将异步错误冒泡到父级的 onErrorCaptured()，因此每次单击该按钮时，
+  // Vue 都会调用带有 err 的 onErrorCaptured() 钩子。
+  // err.message = 'Oops'
+  const test = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    throw new Error('Oops!')
+  }
+</script>
+```
+
+控制台将打印：
+
+```txt
+Caught error Oops!
+```
+
+## 错误传播
+
+在前面的示例中，您可能已经注意到 `return false`。如果 `onErrorCaptured()` 函数没有 `return false`，则 Vue 会将错误冒泡到父组件的 `onErrorCaptured()`：
+
+```html
+<template>
+  <span id="count">{{ count }}</span>
+  <test1 />
+</template>
+
+<script setup>
+  import { onErrorCaptured, ref } from 'vue'
+  import test1 from './test1.vue'
+
+  // 由于 test1 组件的 onErrorCaptured() 没有 return false，Vue 将冒泡显示错误。
+  const count = ref(0)
+
+  onErrorCaptured((err) => {
+    console.log('Caught top-test error', err.message)
+    ++count.value
+    return false
+  })
+</script>
+```
+
+`test1.vue`：
+
+```html
+<template>
+  <test2 />
+</template>
+
+<script setup>
+  import { onErrorCaptured, ref } from 'vue'
+  import test2 from './test2.vue'
+
+  onErrorCaptured((err) => {
+    console.log('test 1 error', err.message)
+  })
+</script>
+```
+
+`test2.vue`：
+
+```html
+<template>
+  <button @click="notAMethod()">Throw</button>
+</template>
+```
+
+![错误传播](https://upload-images.jianshu.io/upload_images/18281896-6b893d29b97b1a74.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+另一方面，如果 `onErrorCaptured()` 方法使用 `return false`，Vue 将停止该错误的传播：
+
+```js
+// test2.vue
+onErrorCaptured((err) => {
+  console.log('test 1 error', err.message)
+  return false
+})
+```
+
+## 最后
+
+您可以继续阅读 [Handling Errors in Vue with Error Boundaries](https://medium.com/@dillonchanis/handling-errors-in-vue-with-error-boundaries-91f6ead0093b) 这篇文章，它利用 `onErrorCaptured` 钩子封装了一个类似 React [`ErrorBoundary`](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) 的组件。[组件地址](https://github.com/dillonchanis/vue-error-boundary)。
diff --git "a/Vue/Vue2 \344\270\216 Vue3 \347\224\237\345\221\275\345\221\250\346\234\237\345\217\230\345\214\226.md" "b/Vue/Vue2 \344\270\216 Vue3 \347\224\237\345\221\275\345\221\250\346\234\237\345\217\230\345\214\226.md"
new file mode 100644
index 0000000..89756a4
--- /dev/null
+++ "b/Vue/Vue2 \344\270\216 Vue3 \347\224\237\345\221\275\345\221\250\346\234\237\345\217\230\345\214\226.md"	
@@ -0,0 +1,96 @@
+# Vue2 与 Vue3 生命周期变化
+
+## Vue2 Options API 中的生命周期钩子
+
+以下是来自 Vue 2.x 文档中生命周期钩子的[示意图](https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA)：
+
+![Vue2 实例的生命周期](https://upload-images.jianshu.io/upload_images/18281896-3afae0bef1f401bf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+每个主要的 Vue 生命周期事件都分为两个钩子，分别在该事件之前和之后分别调用。
+
+主要的四个事件，八个主要钩子如下：
+
+- 创建 —— 在组件的创建上运行
+- 挂载 —— 在挂载 DOM 时运行
+- 更新 —— 修改反应性数据后运行
+- 销毁 —— 在元素被销毁之前立即运行。
+
+Vue 生命周期钩子使您有机会在 Vue 对组件执行特定操作时运行代码。Vue 为每个组件公开的钩子包括：
+
+- `beforeCreate`
+- `created`
+- `beforeMount`
+- `mounted`
+- `beforeUpdate`
+- `updated`
+- `beforeDestroy`
+- `destroyed`
+
+上面的列表是有序的。因此，Vue 总是调在 `created` 之前调用 `beforeCreate`，反过来，Vue 在 `beforeMount` 之前调用 `created`。
+
+例如：以下钩子可用于在组件完成初始渲染并创建 DOM 节点后运行代码：
+
+```js
+export default {
+  mounted() {
+    console.log('组件现在已挂载。')
+  }
+}
+```
+
+## Vue3 Composition API 中的生命周期钩子
+
+以下是来自 Vue3 新文档中生命周期钩子的[示意图](https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram)：
+
+![Vue3 实例的生命周期](https://upload-images.jianshu.io/upload_images/18281896-5ec6bff030d00cb6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+在 Composition API 中，我们必须先将生命周期钩子导入我们的项目中，然后才能使用它们。这是为了使项目尽可能轻巧。
+
+Composition API 不包括 `beforeCreate` 和 `created`（由 `setup` 方法本身代替），我们可以在 `setup` 方法中访问 9 个生命周期钩子
+
+| `onBeforeMount`   | 在挂载开始之前调用                     |
+| ----------------- | -------------------------------------- |
+| `onMounted`       | 在挂载组件时调用                       |
+| `onBeforeUpdate`  | 在响应性数据更改时以及重新渲染之前调用 |
+| `onUpdated`       | 重新渲染后调用                         |
+| `onBeforeUnmount` | 在销毁 Vue 实例之前调用                |
+| `onUnmounted`     | 在实例销毁后调用                       |
+| `onActivated`     | 激活 keep-alive 的组件时调用           |
+| `onDeactivated`   | 停用 keep-alive 的组件时调用           |
+| `onErrorCaptured` | 从子组件捕获错误时调用                 |
+
+导入并使用它们：
+
+```js
+import { onMounted } from 'vue'
+
+export default {
+  setup() {
+    onMounted(() => {
+      console.log('mounted in the Composition API!')
+    })
+  }
+}
+```
+
+## Vue2 和 Vue3 的生命周期钩子对比
+
+| Options API     | Composition API 中钩子在 `setup` 中 |
+| --------------- | ----------------------------------- |
+| `beforeCreate`  | `setup()`                           |
+| `created`       | `setup()`                           |
+| `beforeMount`   | `onBeforeMount`                     |
+| `mounted`       | `onMounted`                         |
+| `beforeUpdate`  | `onBeforeUpdate`                    |
+| `updated`       | `onUpdated`                         |
+| `beforeDestroy` | `onBeforeUnmounted`                 |
+| `destroyed`     | `onUnmounted`                       |
+| `errorCaptured` | `onErrorCaptured`                   |
+
+除了上述介绍和一些命名上的变化，具体用法差不多。Vue3 还新增了用于调试和服务端渲染场景的钩子：
+
+- `onRenderTracked` — 调试钩子，响应式依赖被收集时调用
+- `onRenderTriggered` — 调试钩子，响应式依赖被触发时调用
+- `onServerPrefetch` — 组件实例在服务器上被渲染前调用
+
+详细内容查阅新文档 [Composition API: Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)。
diff --git "a/Vue/Vue3 Suspense \347\273\204\344\273\266.md" "b/Vue/Vue3 Suspense \347\273\204\344\273\266.md"
new file mode 100644
index 0000000..349d7fc
--- /dev/null
+++ "b/Vue/Vue3 Suspense \347\273\204\344\273\266.md"	
@@ -0,0 +1,108 @@
+# Vue3 Suspense 组件
+
+[`Suspense` 组件](https://vuejs.org/guide/built-ins/suspense.html#suspense)是 Vue3 新增的内置组件之一。它允许我们的应用程序在等待异步组件的同时渲染一些备用内容，让我们创造一个流畅的用户体验。
+
+## 什么是 `Suspense` 组件？
+
+`Suspense` 组件用于在等待某种异步组件解析时显示回退内容。
+
+您可能会想，**我们什么时候会使用异步组件？**
+
+老实说，比你想象的要多。每当我们希望我们的组件等待它获取数据（通常是在异步 API 调用中）时，我们可以使用 Vue3 Composition API 创建一个异步组件。
+
+以下是一些异步组件有用的实例：
+
+- 在加载页面之前显示加载动画
+- 显示占位符内容
+- 处理延迟加载的图像
+- etc
+
+以前，在 Vue2 中，我们必须使用条件（例如 `v-if` 或 `v-else`）来检查数据是否已加载并显示回退内容。
+
+但是现在，Vue3 内置了 `Suspense`，所以我们不必担心数据加载时的跟踪和相应内容的渲染。
+
+## 如何使用 Suspense 组件？
+
+> 有两种类型的异步依赖可以等待 `<Suspense>`：
+>
+> - 带有 `async setup()` 钩子的组件。这包括使用 `<script setup>` 顶级 `await` 表达式的组件。
+> - [异步组件](https://vuejs.org/guide/components/async.html)。
+>
+> 对于异步组件，你可以看看之前写过的一篇 [Vue3 中使用 defineAsyncComponent 延迟加载组件](https://github.com/lio-zero/blog/blob/master/Vue/Vue3%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20defineAsyncComponent%20%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E7%BB%84%E4%BB%B6.md)。
+
+例如，我们有一个 `TodoInfo` 组件，其中使用了 `<script setup>`，该组件在完全渲染前异步加载一些数据。
+
+```html
+<template>
+  <h1>{{ title }}</h1>
+</template>
+
+<script setup>
+  const getTodoInfo = async () => {
+    return await fetch('https://jsonplaceholder.typicode.com/todos/1')
+      .then(response => response.json())
+      .then(json => json)
+  }
+
+  var { title } = await getTodoInfo()
+</script>
+```
+
+然后，我们有一个 `TodoList.vue` 组件，其中包含 `TodoInfo` 组件。
+
+如果我们要在等待组件获取数据并解析时显示 `Loading...` 之类的内容，只需要三步：
+
+- 将异步组件包装在 `<template #default>` 标签中
+- 在异步组件旁边添加一个同级的 `<template #fallback>` 标签
+- 将两个组件包装在 `<Suspense>` 组件中
+
+使用插槽，`Suspense` 将渲染备用内容，直到默认内容准备就绪为止。然后，它会自动切换到显示我们的异步组件。
+
+它看起来有点像这样。
+
+```html
+<Suspense>
+  <template #default>
+    <todo-info />
+  </template>
+  <template #fallback>
+    <div>Loading...</div>
+  </template>
+</Suspense>
+```
+
+## 捕获组件错误
+
+当我们使用异步组件时，我们还可以捕获错误并向用户显示一些错误消息。
+
+在 Vue2 中，我们可以使用 [errorCaptured](https://vuejs.org/v2/api/#errorCaptured) 钩子，但是在 Vue3 中，它已重命名为 `onErrorCaptured`。
+
+不管它被命名为什么，当任何子代组件的错误被捕获时，这个钩子就会运行。我们可以在 `Suspense` 中使用这个来渲染出错时的错误。
+
+如果我们处理错误以显示错误消息，那么上面的组件就是这样的。
+
+```html
+<template>
+  <div v-if="errMsg">{{ errMsg }}</div>
+  <Suspense v-else>
+    <template #default>
+      <todo-info />
+    </template>
+    <template #fallback>
+      <div>Loading...</div>
+    </template>
+  </Suspense>
+</template>
+
+<script setup>
+  import { onErrorCaptured } from 'vue'
+
+  const errMsg = ref(null)
+  onErrorCaptured((e) => {
+    errMsg.value = '出错了!'
+    return true
+  })
+</script>
+```
+
+> 之前写过一篇相关的文章：[Vue 错误处理 — onErrorCaptured 钩子](https://github.com/lio-zero/blog/blob/master/Vue/Vue%20%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86%20%E2%80%94%20onErrorCaptured%20%E9%92%A9%E5%AD%90.md)。
diff --git "a/Vue/Vue3 Teleport \347\273\204\344\273\266.md" "b/Vue/Vue3 Teleport \347\273\204\344\273\266.md"
new file mode 100644
index 0000000..9bdc4e5
--- /dev/null
+++ "b/Vue/Vue3 Teleport \347\273\204\344\273\266.md"	
@@ -0,0 +1,73 @@
+# Vue3 Teleport 组件
+
+> [`<Teleport>`](https://v3.vuejs.org/guide/teleport.html)是一个内置组件，它允许我们将组件模板的一部分“传送”到存在于该组件 DOM 层次结构之外的 DOM 节点中。
+
+## Teleport 的目的
+
+我们首先要了解的是，何时使用、以及为什么使用 `Teleport`。
+
+在处理更大的 Vue 项目时，以逻辑的方式组织代码库变得非常重要。然而，当处理某些类型的组件（如模态框、通知或工具提示）时，模板 HTML 的逻辑可能位于不同的文件中，而不是我们想要渲染元素的文件中。
+
+事实上，很多时候，当这些元素与我们的 Vue 应用程序的 DOM 完全分开处理时，它们更容易管理。这一切都是因为处理嵌套组件的定位、`z-index` 和样式可能会因为处理其所有父组件的范围而变得棘手。
+
+这就是 `Teleport` 功能派上用场的地方。我们可以在其逻辑所在的组件中编写模板代码，这意味着我们可以使用组件的 `data` 或 `props`。随后将其渲染到 Vue 应用程序的范围之外。
+
+如果不使用 `Teleport`，我们将不得不担心事件传播，以便将逻辑从子组件传递到 DOM 树，但现在要简单得多。
+
+让我们看一个例子。
+
+## Teleport 示例
+
+假设我们有一个子组件，我们想在其中触发弹出的通知。
+
+首先，在 `</body>` 之前添加一个 `<div>`：
+
+```html
+<body>
+  <div id="app"></div>
+  <div id="notification"></div>
+</body>
+```
+
+接下来，让我们开始创建触发要渲染通知的组件。
+
+```html
+<template>
+  <teleport to="#notification">
+    <div v-if="isOpen" class="notification">您干嘛呀！</div>
+  </teleport>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const isOpen = ref(false)
+  const closePopup: any = ref(null)
+  const showNotification = () => {
+    isOpen.value = true
+    clearTimeout(closePopup.value)
+    closePopup.value = setTimeout(() => {
+      isOpen.value = false
+    }, 2000)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .notification {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    width: 300px;
+    padding: 30px;
+    background-color: plum;
+  }
+</style>
+```
+
+它的步骤很简单：
+
+- 在您想要插入 DOM 的地方，预留一个标签，并提供一个 `id` 或 `class`，让 `teleport` 知道是哪个标签。
+- 编写一段需要渲染的 HTML 结构，并使用 `teleport` 组件包裹住它。
+- 在 `teleport` 标签上使用 `to` 属性，指向预留的标签。`to` 的值为提供标签的 `id` 或 `class`。
+
+您可以指定多个 `Teleport` 用于不同的目的。详细内容查阅官网。
diff --git "a/Vue/Vue3 \344\270\255\344\275\277\347\224\250 defineAsyncComponent \345\273\266\350\277\237\345\212\240\350\275\275\347\273\204\344\273\266.md" "b/Vue/Vue3 \344\270\255\344\275\277\347\224\250 defineAsyncComponent \345\273\266\350\277\237\345\212\240\350\275\275\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..c67fb53
--- /dev/null
+++ "b/Vue/Vue3 \344\270\255\344\275\277\347\224\250 defineAsyncComponent \345\273\266\350\277\237\345\212\240\350\275\275\347\273\204\344\273\266.md"	
@@ -0,0 +1,114 @@
+# Vue3 中使用 defineAsyncComponent 延迟加载组件
+
+使用 Vue3 的 `defineAsyncComponent` 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。
+
+这是一个改善初始页面加载的好方法，因为我们的应用程序将以较小的块加载，而不必在页面加载时加载每个组件。
+
+## 什么是 `defineAsyncComponent`
+
+以下示例来自官网[异步组件](https://vuejs.org/guide/components/async.html)：
+
+```js
+import { defineAsyncComponent } from 'vue'
+
+const AsyncComp = defineAsyncComponent(() => {
+  return new Promise((resolve, reject) => {
+    // ...load component from server
+    resolve(/* loaded component */)
+  })
+})
+// ... use `AsyncComp` like a normal component
+```
+
+我们还可以使用 `import` 从其他文件轻松添加 Vue 组件。
+
+```js
+import { defineAsyncComponent } from 'vue'
+
+// 简单用法
+const ArticleList = defineAsyncComponent(() =>
+  import('@/components/ArticleList.vue')
+)
+```
+
+这是使用 `defineAsyncComponent` 的最简单方法，但我们也可以传入一个完整的选项对象，该对象配置了几个更高级的参数。
+
+```js
+const AsyncPopup = defineAsyncComponent({
+  loader: () => import('./ArticleList.vue'),
+  // 加载异步组件时使用的组件
+  loadingComponent: LoadingComponent,
+  // 加载失败时使用的组件
+  errorComponent: ErrorComponent
+  // 在显示加载组件之前延迟。默认值：200ms。
+  delay: 1000,
+  // 超过给定时间，则会显示错误组件。默认值：Infinity。
+  timeout: 3000
+})
+```
+
+一般默认就已足够。
+
+## 使用 `defineAsyncComponent` 延迟加载组件
+
+我们简单的模拟请求文章数据的 `ArticleList.vue` 组件：
+
+```html
+// ArticleList.vue
+<template>
+  <div>{{ article }}</div>
+</template>
+
+<script setup>
+  // API call
+  const getArticleInfo = async () => {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    const article = {
+      title: 'Vue3 中使用 defineAsyncComponent 延迟加载组件',
+      author: 'lio'
+    }
+    return article
+  }
+
+  const article = await getArticleInfo()
+</script>
+```
+
+我们使用 `defineAsyncComponent` 延迟加载 组件，并使用 `Suspense` 元素包装这个组件：
+
+```html
+<template>
+  <button @click="show = true">Login</button>
+  <Suspense v-if="show">
+    <template #default>
+      <ArticleList />
+    </template>
+    <template #fallback>
+      <p>Loading...</p>
+    </template>
+  </Suspense>
+</template>
+
+<script setup>
+  import { defineAsyncComponent } from 'vue'
+
+  const ArticleList = defineAsyncComponent(() =>
+    import('@/components/ArticleList.vue')
+  )
+  const show = ref(false)
+</script>
+```
+
+**默认情况下，我们使用 `defineAsyncComponent` 定义的所有组件都是可挂起的。**
+
+这意味着，如果组件的父链中存在 `Suspense`，它将被视为该 `Suspense` 的异步依赖项。我们的组件加载、错误、延迟和超时选项将被忽略，而将由 `Suspense` 处理。
+
+最终效果如下：
+
+![defineAsyncComponent](https://upload-images.jianshu.io/upload_images/18281896-37529d3041f24598.gif?imageMogr2/auto-orient/strip)
+
+用户将看到 Loading...，然后在 1s 之后请求完数据后，展示完整的组件。
+
+## 最后
+
+当创建包含数十个组件的大型项目时，`defineAsyncComponent` 可能非常有用。当我们使用延迟加载组件时，我们可以加快页面加载时间，改善用户体验，并最终提高应用程序的保留率和转换率。
diff --git "a/Vue/Vue3 \344\275\277\347\224\250 Event Bus.md" "b/Vue/Vue3 \344\275\277\347\224\250 Event Bus.md"
new file mode 100644
index 0000000..81f6379
--- /dev/null
+++ "b/Vue/Vue3 \344\275\277\347\224\250 Event Bus.md"	
@@ -0,0 +1,113 @@
+# Vue3 使用 Event Bus
+
+在 Vue2 中，创建 Event Bus 如下：
+
+```js
+export const bus = new Vue()
+```
+
+```js
+bus.$on(...)
+bus.$emit(...)
+```
+
+在 Vue3 中，Vue 不再是构造函数，而是 `Vue.createApp({})` 返回一个没有 `$on`、`$emit` 和 `$once` 方法的对象。
+
+根据官方文档 [Vue 3 迁移指南](https://v3-migration.vuejs.org/breaking-changes/events-api.html#event-bus)所建议的，我们可以使用 [mitt](https://github.com/developit/mitt) 或 [tiny-emitter](https://github.com/scottcorgan/tiny-emitter) 库在组件之间调度事件。
+
+这里我们使用 mitt，它的源码也很简单，👉 [地址](https://github.com/developit/mitt/blob/main/src/index.ts)。
+
+## 安装
+
+```js
+pnpm i mitt
+```
+
+您也可以单独把代码拷贝一份到项目，代码量较少。
+
+## 用法
+
+与 Vue2 一样，封装为 `myBus.js`：
+
+```js
+import mitt from 'mitt'
+export default mitt()
+```
+
+或者，你也可以定义为全局变量：
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import mitt from 'mitt'
+
+const app = createApp(App)
+app.config.globalProperties.emitter = mitt()
+```
+
+然后，封装一个 hooks：
+
+```js
+// src/hooks/useEmitter.js
+import { getCurrentInstance } from 'vue'
+
+export default function useEmitter() {
+  const internalInstance = getCurrentInstance()
+  const emitter = internalInstance.appContext.config.globalProperties.emitter
+
+  return emitter
+}
+```
+
+当然，为了方便管理，你也可以在需要用到的地方单独引入 mitt。
+
+## 示例
+
+假设我们有一个 `sidebar` 和 `header`，其中包含一个关闭/打开侧栏的按钮，我们需要该按钮来切换侧边栏组件内的某些属性。
+
+点击按钮发出 `toggle-sidebar` 带有一些 payload 的事件：
+
+```html
+<template>
+  <button @click="toggleSidebar">toggle</button>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import useEmitter from '@/hooks/useEmitter'
+
+  const sidebarOpen = ref(true)
+  const emitter = useEmitter()
+
+  const toggleSidebar = () => {
+    sidebarOpen.value = !sidebarOpen.value
+    emitter.emit('toggle-sidebar', sidebarOpen.value)
+  }
+</script>
+```
+
+在侧边栏中接收带有 payload 的事件：
+
+```html
+<template>
+  <aside class="sidebar" :class="{'sidebar--toggled': !isOpen}">
+    {{ isOpen }}
+  </aside>
+</template>
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import useEmitter from '@/hooks/useEmitter'
+
+  const isOpen = ref(true)
+  const emitter = useEmitter()
+
+  onMounted(() => {
+    emitter.on('toggle-sidebar', (isOpen) => {
+      isOpen.value = isOpen
+    })
+  })
+</script>
+```
+
+## 更多资料
+
+[实现一个 Event Bus](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20Event%20Bus.md)
diff --git "a/Vue/Vue3 \346\263\250\345\206\214\345\205\250\345\261\200\347\273\204\344\273\266.md" "b/Vue/Vue3 \346\263\250\345\206\214\345\205\250\345\261\200\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..219a7d7
--- /dev/null
+++ "b/Vue/Vue3 \346\263\250\345\206\214\345\205\250\345\261\200\347\273\204\344\273\266.md"	
@@ -0,0 +1,80 @@
+# Vue3 注册全局组件
+
+本文将介绍如何注册在整个 Vue 应用程序中使用的 Vue3 全局组件。这与我们在 Vue2 中声明它们的方式有些许不同，但是却很简单。
+
+## 什么是 Vue 全局组件？
+
+首先，我们必须了解 Vue3 全局组件是什么以及为什么要使用它。
+
+通常，当我们想在 Vue 实例中包含一个组件时，我们会在本地注册它。通常看起来像这样。
+
+```html
+<script>
+  import TkBadge from '../components/TkBadge.vue'
+
+  export default {
+    components: {
+      TkBadge
+    }
+  }
+</script>
+```
+
+但是，假设有一个组件，我们需要在 Vue 项目中**多次**使用它。在每个文件中本地注册此组件可能会很麻烦，尤其是在我们重构了项目或进行某些操作的情况下。
+
+在这种情况下，全局注册组件可能会很有用，使它可以在我们的 Vue 实例的所有子组件中访问。换句话说，全局注册一个组件意味着我们不必将其导入每个文件中。
+
+让我们看一下如何在 Vue2 中完成此操作以及现在如何在 Vue3 中进行操作。
+
+## Vue2 全局组件
+
+在 Vue2 中，无论我们在哪里创建 Vue 实例，我们都只需要调用 `Vue.component` 方法来注册全局组件。
+
+此方法有两个参数：
+
+- 我们全局组成部分的名称
+- 组件本身
+
+一个简单的实例：
+
+```js
+import Vue from 'vue'
+import TkBadge from './components/TkBadge'
+import App from './App.vue'
+
+Vue.component('TkBadge', TkBadge) // 全局注册 - 我们可以在任何地方使用
+
+new Vue({
+  render: (h) => h(App)
+}).$mount('#app')
+```
+
+现在，此 `TkBadge` 组件可以在此 Vue 实例的所有子组件中使用！
+
+## Vue3 全局组件
+
+在 Vue3 中，由于创建我们的 Vue 实例（使用 `createApp`）的工作方式略有不同，因此代码略有不同，但是它很容易理解。
+
+首先必须创建应用程序，而不是从 Vue 对象中声明全局组件。然后，我们可以像以前一样运行相同的 `component()` 方法。
+
+```js
+import { createApp } from 'vue'
+import TkBadge from './components/TkBadge'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.component('TkBadge', TkBadge)
+
+app.mount('#app')
+```
+
+如您所见，它们非常相似，但是 Vue 实例的初始化方式略有不同，使我们对语法进行了一些更改。
+
+现在，你可以在根实例提供的任何组件中使用。
+
+## 建议
+
+- 重要的是要仔细考虑何时要使用全局组件还是本地组件。
+- 如果默认情况下只是将所有内容都设为全局组件，则意味着即使不使用组件，该组件仍将包含在我们的构建中，增加页面加载时间。
+- 正确使用全局组件可以成为非常强大的工具，并且随着 Vue3 中的新变化，在 Vue 项目中仍然很容易使用这些类型的组件。
diff --git a/Vue/Vuex.md b/Vue/Vuex.md
new file mode 100644
index 0000000..11c9f2e
--- /dev/null
+++ b/Vue/Vuex.md
@@ -0,0 +1,446 @@
+# Vuex
+
+官方介绍：
+
+> [Vuex](https://vuex.vuejs.org/zh/) 是一个专为 Vue.js 应用程序开发的**状态管理模式 + 库**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
+
+简单的说，它是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。
+
+![vuex](https://upload-images.jianshu.io/upload_images/18281896-8a572061902274a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> **注意**：本文为 Vue 2.x 写法，Vue 3 详细的语法变更请查阅 [Vuex 4.x 文档](https://vuex.vuejs.org/zh/)。此外，Vue 3.x 的下一代 Vuex 开发重心已转移到 [pinia](https://github.com/vuejs/pinia)，它支持 Vue 2.x 和 Vue 3.x 版本。
+
+Vuex Store 有 3 个主要概念：`state`、`mutations` 和 `actions`，另外还有 `getters` 和 `modules`，我们会在下文中一一讲解。
+
+## 安装
+
+首先，安装 vuex：
+
+```bash
+$ npm i vuex
+# or
+$ yarn add vuex
+```
+
+创建 `store/index.js` 文件：
+
+```js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {}
+  // ...
+})
+
+export default store
+```
+
+在主文件 `main.js` 导入，并在 vue 实例中注入已经创建好的 `store`：
+
+```js
+import store from './store'
+
+const app = new Vue({
+  store,
+  ...App
+})
+
+app.$mount()
+```
+
+通过在根实例中注册 `store` 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 `this.$store` 访问到。
+
+## State
+
+[State](https://vuex.vuejs.org/zh/guide/state.html) 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 `state` 中进行储存。
+
+```js
+state: {
+  count: 1,
+  msg: 'hello world!'
+}
+```
+
+- **获取方式一**：使用 `store.state` 获取。
+
+```js
+this.$store.state.count // 1
+```
+
+- **获取方式二**：使用 `mapState` 函数，将全局数据映射为当前组件的 `computed` 计算属性使用。
+
+```js
+import { mapState } from 'vuex'
+
+...mapState(['count', 'msg'])
+```
+
+## Mutations
+
+[Mutations](https://vuex.vuejs.org/zh/guide/mutations.html) 用于变更 Store 中的状态，且 [`mutations` 必须是同步的](https://vuex.vuejs.org/zh/guide/mutations.html#mutation-%E5%BF%85%E9%A1%BB%E6%98%AF%E5%90%8C%E6%AD%A5%E5%87%BD%E6%95%B0)。
+
+Mutations 是改变存储中状态数据的唯一方法，通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
+
+```js
+mutations: {
+    // 定义事件处理函数
+  increment(state) {
+    // 变更状态
+    state.count++
+  },
+  // 可以在触发 mutations 时传递参数：
+  incrementN(state, step) {
+    state.count += step
+  },
+  decrementN(state, step) {
+    state.count += step
+  }
+}
+```
+
+**调用方式一**：使用 `store.commit` 方法。
+
+```js
+// 调用 commit 函数
+this.$store.commit('increment')
+// 触发 mutations 时携带参数
+this.$store.commit('incrementN', 3)
+```
+
+**调用方式二**：使用 `mapMutations` 函数，映射为当前组件的 `methods` 函数。
+
+```js
+import { mapMutations } from 'vuex'
+
+methods: {
+  ...mapMutations(['increment', 'incrementN'])
+}
+```
+
+## Actions
+
+[Actions](https://vuex.vuejs.org/zh/guide/actions.html) 的存在是因为 `mutations` 必须是同步的，而 `actions` 可以是异步的。
+
+Actions 将允许我们异步更新状态，但将使用现有的 `mutations`。如果你需要按照特定的顺序同时执行几个不同的 `mutations`，这会非常有帮助。
+
+```js
+actions: {
+  asyncDecrementN({ commit }, asyncNum) {
+    await new Promise((resolve) => setTimeout(resolve, asyncNum.duration))
+    commit('decrementN', asyncNum.by)
+  }
+}
+```
+
+- **获取方式一**：使用 `store.dispatch` 获取异步方法。
+
+```js
+// 触发 actions 异步任务时携带参数
+methods: {
+  asyncDecrementN() {
+    this.$store.dispatch('asyncDecrementN', {
+      by: -3,
+      duration: 1000,
+    })
+  }
+}
+```
+
+- **获取方式二**：使用 `mapActions` 函数，映射为当前组件的 `methods` 函数，内部会将 `actions` 处理为 Vue 实例方法。
+
+```js
+import { mapActions } from 'vuex'
+
+methods: {
+  ...mapActions(['asyncDecrementN'])
+}
+```
+
+需要注意的是，Vuex 不会为你处理异步操作中的错误。如果异步操作抛出错误，你将得到未处理的 Promise `reject`，除非你使用 `.catch()` 或 `async/await` 显式处理该错误。
+
+```js
+actions: {
+  asyncDecrementN({ commit }, asyncNum) {
+    await new Promise((resolve) => setTimeout(resolve, asyncNum.duration))
+    throw new Error('Oops')
+  }
+}
+
+const err = await this.$store
+  .dispatch('asyncDecrementN', {
+    by: -3,
+    duration: 1000
+  })
+  .catch((err) => err)
+
+err.message // "Oops"
+```
+
+关于 `actions`，还有一个非常有用的 API：[`subscribeAction` API](https://vuex.vuejs.org/api/#subscribeaction)。你可以使用它注册一个回调，它会在每次进行 `dispatch` 操作时调用该回调。
+
+```js
+store.subscribeAction((action, state) => {
+  console.log(action) // { type: 'asyncDecrementN', payload: { by: -3, duration: 1000 } }
+})
+```
+
+`subscribeAction()` API 是许多 [Vuex plugins](https://vuex.vuejs.org/guide/plugins.html) 的基础，因此使用 `actions` 可以让你更好地利用 Vue 社区的插件。
+
+## Getters
+
+[Getters](https://vuex.vuejs.org/zh/guide/getters.html) 可以对 store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
+
+```js
+// 展示数据，而不是更改状态
+getters: {
+  newCount: (state) => state.count * 3
+}
+```
+
+- **获取方式一**：通过暴露的 `store.getters` 对象获取属性。
+
+```js
+this.$store.getters.newCount
+```
+
+- **获取方式二**：使用 `mapGetters` 函数，将全局数据映射为当前组件的计算属性使用。
+
+```js
+import { mapGetters } from 'vuex'
+
+computed: {
+  ...mapGetters(['newCount'])
+}
+```
+
+`getters` 会对 store 状态的变化做出响应，就像计算属性一样。因此，如果你更新 `getters` 所依赖的状态属性之一，则 `getters` 值也会更新：
+
+```js
+mutations: {
+  changeCount(state, val) {
+    state.count = val
+  }
+}
+
+this.$store.commit('changeCount', 2)
+this.$store.getters.newCount // 6
+```
+
+## Modules
+
+> 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
+
+为了解决以上问题，Vuex 允许我们将 store 分割成**模块（module）**。每个模块拥有自己的 `state`、`mutations`、`actions` 和 `getters`。
+
+```js
+// module/moduleA.js
+const moduleA = {
+  state: () => ({
+    name: '李四'
+  }),
+  mutations: {},
+  actions: {},
+  getters: {}
+}
+
+export default moduleA
+
+// module/moduleB.js
+const moduleB = {
+  state: () => ({
+    name: '老六'
+  }),
+  mutations: {},
+  actions: {}
+}
+
+export default moduleB
+
+// store/index.js
+import moduleA from './module/moduleA'
+import moduleB from './module/moduleB'
+const store = new Vuex.Store({
+  modules: {
+    moduleA,
+    moduleB
+  }
+})
+
+store.state.moduleA // -> moduleA 的状态
+store.state.moduleB // -> moduleB 的状态
+```
+
+详细信息请看 [modules](https://vuex.vuejs.org/zh/guide/modules.html)。
+
+## 其他
+
+### 热重载
+
+Vuex 支持在开发过程中[热重载](https://vuex.vuejs.org/zh/guide/hot-reload.html) `mutations`、`modules`、`actions` 和 `getters`。
+
+### 项目结构
+
+Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
+
+- 应用层级的状态应该集中到单个 store 对象中。
+- 提交 `mutations` 是更改状态的唯一方法，并且这个过程是同步的。
+- 异步逻辑都应该封装到 `actions` 里面。
+
+如果你的 store 文件太大，只需将 `actions`、`mutations` 和 `getters` 分割到单独的文件。对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
+
+```txt
+└── store
+  ├── index.js          # 我们组装模块并导出 store 的地方
+  ├── actions.js        # 根级别的 action
+  ├── mutations.js      # 根级别的 mutation
+  └── modules
+    ├── cart.js       # 购物车模块
+    └── products.js   # 产品模块
+```
+
+### 插件
+
+Vuex 的 store 接受 `plugins` 选项，这个选项暴露出每次 `mutations` 的钩子。Vuex `plugins` 就是一个函数，它接收 store 作为唯一参数：
+
+```js
+const myPlugin = (store) => {
+  // 当 store 初始化后调用
+  store.subscribe((mutation, state) => {
+    // 每次进行 commit 操作时调用该回调，mutation 的格式为 { type, payload }
+  })
+}
+```
+
+然后像这样使用：
+
+```js
+const store = new Vuex.Store({
+  // ...
+  plugins: [myPlugin]
+})
+```
+
+### 表单处理
+
+在 Vuex 严格模式下，状态变更需要在 `mutations` 函数下执行。在你不了解这个的情况下，使用 `v-model` 时，可能会发生一些错误。
+
+```html
+<input v-model="obj.message" />
+```
+
+假设这里的 `obj` 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，`v-model` 会试图直接修改 `obj.message`。在严格模式中，由于这个修改不是在 `mutations` 函数中执行的, 这里会抛出一个错误。
+
+**方式一**：给 `<input>` 中绑定 value，然后侦听 `input` 或者 `change` 事件，在事件回调中调用一个方法。
+
+```html
+<input :value="message" @input="updateMessage" />
+
+<script>
+  export default {
+    computed: {
+      ...mapState({
+        message: (state) => state.obj.message
+      })
+    },
+    methods: {
+      updateMessage(e) {
+        this.$store.commit('updateMessage', e.target.value)
+      }
+    }
+  }
+</script>
+```
+
+`mutations` 函数：
+
+```js
+mutations: {
+  updateMessage(state, message) {
+    state.obj.message = message
+  }
+}
+```
+
+**方式二**：使用 `setter` 的双向绑定计算属性。
+
+```js
+computed: {
+  message: {
+    get () {
+      return this.$store.state.obj.message
+    },
+    set (value) {
+      this.$store.commit('updateMessage', value)
+    }
+  }
+}
+```
+
+### 严格模式
+
+开启严格模式，仅需在创建 store 的时候传入 `strict: true`：
+
+```js
+const store = new Vuex.Store({
+  // ...
+  strict: true
+})
+```
+
+在严格模式下，无论何时发生了状态变更且不是由 `mutations` 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
+
+**不要在生产环境下启用严格模式**。严格模式会深度监测状态树来检测不合规的状态变更，请确保在生产环境下关闭严格模式，以避免性能损失。
+
+类似于插件，我们可以让构建工具来处理这种情况：
+
+```js
+const store = new Vuex.Store({
+  // ...
+  strict: process.env.NODE_ENV !== 'production'
+})
+```
+
+## 常见的问题
+
+### 谈谈你对 Vuex 的理解？
+
+理解如下两张图，结合官网对 Vuex 的解释（[Vuex 是什么？](https://vuex.vuejs.org/zh/)）：
+
+![flow](https://vuex.vuejs.org/flow.png)
+
+![vuex](https://vuex.vuejs.org/vuex.png)
+
+### 什么时候使用 Vuex？
+
+Vuex 通过全局注入 store 对象，来实现组件间的状态共享。
+
+开发大型单页应用时（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用 vuex 比较合适。
+
+如果只是简单的多个组件间传递数据，可以使用组件间常用的通信方法。
+
+### Vuex 的设计思想
+
+Vuex 借鉴了 [Flux](https://facebook.github.io/flux/docs/overview)、[Redux](http://redux.js.org/) 和 [The Elm Architecture](https://guide.elm-lang.org/architecture/)，将数据存放到全局的 store，再将 store 挂载到每个 vue 实例组件中，利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
+
+### Vuex 统一管理状态的好处
+
+- 能够在 Vuex 中集中管理共享的数据，易于开发和后期维护
+- 能够高效地实现组件之间的数据共享，提高开发效率
+- 存储在 Vuex 中的数据都是响应式的，能够实时保存数据与页面的同步
+
+### Mutations 和 Actions 有什么区别？
+
+- `mutations` 是 Vuex 用于修改 store 中状态的唯一方法，而 `actions` 只能通过 `mutations` 修改状态。
+- `actions` 可以包含任意异步操作，而 `mutations` 只能是同步操作。
+- 它们提交的方式不同，`mutations` 使用 `commit` 方法，而 `actions` 使用 `dispatch` 方法。
+
+这些你都可以在官网找到 — [Mutation](https://vuex.vuejs.org/zh/guide/mutations.html) 和 [Action](https://vuex.vuejs.org/zh/guide/actions.html)
+
+## 更多资料
+
+[打造 Vue 技术栈中的“时间宝石“](https://xlbd.me/posts/create-a-time-gem-in-vue-tech-stack#%E4%BD%BF%E7%94%A8)
diff --git "a/Vue/watch \344\270\216 watchEffect \347\232\204\345\214\272\345\210\253.md" "b/Vue/watch \344\270\216 watchEffect \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..0644eca
--- /dev/null
+++ "b/Vue/watch \344\270\216 watchEffect \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,191 @@
+# watch 与 watchEffect 的区别
+
+在开发 Vue 应用程序的整个过程中，您将拥有大量的响应性数据属性。您的应用程序将跟踪 `input` 字段、`data` 计算和一系列其他属性，并且可能需要在值更新时执行操作。
+
+Vue 中的 watcher 可以观察响应性属性，并可以检测到属性何时发生变化。它本质上充当组件响应式数据的事件监听器。
+
+特别是当与异步 API 调用配合使用时，例如：
+
+- ID 更改时从数据库获取对象
+- `prop` 更改时重新运行动画
+- 监听路由变化
+- etc
+
+在 Vue3 中，除了 [`watch`](https://vuejs.org/api/reactivity-core.html#watch) 方法之外，还有一个新的 [`watchEffect`](https://vuejs.org/api/reactivity-core.html#watcheffect) 方法，可以在 Composition API 中使用。下面我们来简单介绍一下这两个方法。
+
+## 如何使用 Vue watch？
+
+[Vue Options API](https://vuejs.org/api/) 提供了一个 `watch` 选项，您可以在其中定义监视对象。要使用它，首先必须在 `data` 对象中具有要跟踪的属性。
+
+```js
+export default {
+  data() {
+    return {
+      title: 'Vue2'
+    }
+  },
+  watch: {
+    // Watcher
+  }
+}
+```
+
+然后，我们必须查看 watcher 方法的结构。您所要做的就是声明一个与要观察的属性同名的函数。
+
+它应该带有两个参数：
+
+- 被监听属性的新 `value`
+- 被监听属性的旧 `value`
+
+例如，这是 `title` 属性的 watcher。
+
+```js
+watch: {
+  title(newTitle, oldTitle) {
+    console.log(`标题从 ${oldTitle} 更改为 ${newTitle})
+  }
+}
+```
+
+每当 `title` 值发生变化时，我们都可以在控制台中看到以下内容。
+
+![watch title](https://upload-images.jianshu.io/upload_images/18281896-15c48e35d55ec856.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+Vue watcher 只跟踪一个依赖项，**但如果我们需要跟踪两个依赖项呢**？
+
+在 Vue2 中，我们可以为每个方法创建两个相同的 watcher，但 Vue3 Composition API 为该用例提供了更好的解决方案，它就是 `watchEffect`。
+
+## Vue `watchEffect` 是如何工作的？
+
+`watchEffect` 是 Vue3 中跟踪响应依赖关系的方法之一。本质上，我们可以使用响应性属性编写一个方法，**每当它们的任何值更新时**，我们的方法就会运行。
+
+需要注意的一点是，除了在依赖项更改时运行外，**每当组件初始化时，`watchEffect` 也会立即运行**，因此在装载 DOM 之前尝试访问 DOM 时要小心。
+
+### 简单示例
+
+让我们看一个非常简单的示例。
+
+假设我们有某种响应性的 `userID` 属性，并且只想在它发生变化时打印出来。
+
+```html
+<script setup>
+  import { ref, watchEffect } from 'vue'
+
+  const userID = ref(0)
+  watchEffect(() => console.log('Value: ' + userID.value))
+  setTimeout(() => {
+    userID.value = 1
+  }, 1000)
+</script>
+```
+
+当我们的组件初始化时，`watchEffect` 将运行并记录起始值。然后，每当 `userID` 的值改变时，就会触发 `watchEffect`。
+
+![watchEffect](https://upload-images.jianshu.io/upload_images/18281896-80e8a547e8a4536b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 为什么与 watch 不同？
+
+那么，既然已经有了 `watch` 方法，为什么这个新的 `watchEffect` 方法还会存在呢?
+
+有一些关键的区别：
+
+- `watchEffect` 将在其**任何**依赖项更改时运行方法，`watch` 跟踪一个或多个**特定**的响应性属性，并且仅在该属性发生更改时运行。
+- 默认情况下，`watch` 是惰性的，因此仅当依赖项更改时才会触发。`watchEffect` 在创建组件后立即运行，然后跟踪依赖关系。
+
+但是，我们也可以为 `watch` 传递一个 `immediate` 属性，使其在初始化时运行。
+
+```html
+<script setup>
+  import { ref, watch } from 'vue'
+
+  watch(
+    title,
+    (newTitle, oldTitle) => {
+      console.log(`标题从 ${oldTitle} 更改为 ${newTitle}`)
+    },
+    {
+      immediate: true
+    }
+  )
+</script>
+```
+
+`watch` 在以下情况下很有用：
+
+- 您需要控制哪些依赖项会触发该方法
+- 您需要访问之前的值
+
+这需要看您的项目适合哪一种。
+
+## 对于 `watcheffect` 需要注意的事项
+
+以下整理 [Vue 文档对于 WatchEffect](https://v3.cn.vuejs.org/guide/reactivity-computed-watchers.html#watcheffect) 需要注意的事项。
+
+### props 是响应的
+
+这是一个方便的小知识。一个很好的用例是根据 `prop` 属性更改页面上的其他值。
+
+例如，假设我们有一个 `SongPlayer` 组件，该组件接受一个 `songID` 值作为 `prop`。如果我们更改了歌曲，我们将希望加载有关它的所有内容。我们可以用 `prop` 来做到这一点。
+
+```html
+<script setup>
+  import { ref, watchEffect } from 'vue'
+
+  const props = defineProps({
+    songID: String
+  })
+
+  watchEffect(() => console.log(props.songID))
+</script>
+```
+
+### 使用 `onInvalidate()` 清除副作用
+
+使用 Vue `watchEffect` 的一个常见用例是，每当响应性依赖项发生变化时，就进行某种异步 API 调用。但是，如果依赖关系在第一个 API 调用完成之前再次发生变化，会发生什么呢？
+
+**这就是无效副作用出现的原因。**
+
+我们的 `watchEffect` 方法还有一个 `onInvalidate` 方法，每当该方法要再次运行或监视程序停止时，该方法就会运行。
+
+我们可以像这样停止异步 API 调用。
+
+```html
+<script setup>
+  import { watchEffect } from 'vue'
+
+  const props = defineProps({
+    songID: String
+  })
+
+  watchEffect((onInvalidate) => {
+    // 异步 API 调用
+    const apiCall = someAsyncMethod(props.songID)
+
+    onInvalidate(() => {
+      // 取消 API 调用
+      apiCall.cancel()
+    })
+  })
+</script>
+```
+
+### 停止观察者
+
+我们还可以手动阻止一个观察者。如果我们想观察一个依赖项，直到它达到某个值，然后停止它，这可能很有用。如果我们在它达到目标值后继续观察，我们只是在**浪费资源**。
+
+我们的 Vue `watchEffect` 方法返回一个 `stop` 方法，该方法将停止我们的观察程序。
+
+因此，我们可以简单地将其存储为变量，并在稍后调用它。
+
+```html
+<script setup>
+  import { watchEffect } from 'vue'
+
+  const props = defineProps({
+    songID: String
+  })
+
+  let stopWatcher = watchEffect(() => console.log(props.songID))
+  stopWatcher()
+</script>
+```
diff --git "a/Vue/\344\275\277\347\224\250 v-once \345\222\214 v-memo \346\214\207\344\273\244\346\235\245\346\217\220\345\215\207\346\200\247\350\203\275.md" "b/Vue/\344\275\277\347\224\250 v-once \345\222\214 v-memo \346\214\207\344\273\244\346\235\245\346\217\220\345\215\207\346\200\247\350\203\275.md"
new file mode 100644
index 0000000..5d035db
--- /dev/null
+++ "b/Vue/\344\275\277\347\224\250 v-once \345\222\214 v-memo \346\214\207\344\273\244\346\235\245\346\217\220\345\215\207\346\200\247\350\203\275.md"	
@@ -0,0 +1,83 @@
+# 使用 v-once 和 v-memo 指令来提升性能
+
+优化渲染的一种极其简单的方法是仅重新渲染所需要的内容。
+
+每当组件的数据发生更改时，该组件及其子组件将重新渲染，Vue 中的 `v-once` 和 `v-memo` 指令可以减少这种不必要的渲染。
+
+## v-once
+
+`v-once` 指令仅渲染元素/组件一次。初始渲染后，该元素及其所有子元素将被视为静态内容。
+
+```html
+<!-- 单个元素 -->
+<span v-once>{{ msg }}</span>
+<!-- 有子元素的元素 -->
+<div v-once>
+  <p>{{ msg }}</p>
+</div>
+<!-- 组件 -->
+<my-component v-once :comment="msg"></my-component>
+<!-- `v-for` 指令 -->
+<ul>
+  <li v-for="i in list" v-once>{{ i }}</li>
+</ul>
+```
+
+当与 `v-if` 或 `v-show` 一起使用时，一旦我们的元素被渲染一次，`v-if` 或 `v-show` 将不再适用，这意味着如果它在第一次渲染时可见，它将始终可见。如果它是隐藏的，它将永远是隐藏的。
+
+```html
+<template>
+  <p v-once v-if="show">{{ msg }}</p>
+  <el-button @click="show = !show">切换</el-button>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const msg = ref('Hello')
+  const show = ref(true)
+</script>
+```
+
+以上 `p` 标签将始终可见。
+
+## v-memo
+
+[`v-memo`](https://vuejs.org/api/built-in-directives.html#v-memo) 是 Vue 3.2 新增的一个指令。它接受一个依赖数组，并且只有在数组中的一个值发生变化时才会重新渲染。
+
+```html
+<template>
+  <p v-memo="[msg]">{{ msg }}</p>
+  <el-button @click="msg = 'change msg'">切换</el-button>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const msg = ref('hello')
+</script>
+```
+
+如果传入一个空的依赖项数组，它将与使用 `v-once` 相同，它永远不会重新渲染。
+
+```html
+<template>
+  <p v-memo="[]">{{ msg }}</p>
+  <!-- 等同于  -->
+  <p v-once>{{ msg }}</p>
+
+  <el-button @click="msg = 'change msg'">切换</el-button>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const msg = ref('hello')
+</script>
+```
+
+**注意**，`v-memo` 在 `v-for` 循环中不起作用，所以如果我们想用 `v-for` 记忆一些东西，我们必须把它们放在同一个元素上。
+
+## 最后
+
+更多指令相关内容可以查看 [Built-in Directives](https://vuejs.org/api/built-in-directives.html)。
diff --git "a/Vue/\344\275\277\347\224\250\345\257\274\350\210\252\345\256\210\345\215\253\344\277\235\346\212\244 Vue \350\267\257\347\224\261.md" "b/Vue/\344\275\277\347\224\250\345\257\274\350\210\252\345\256\210\345\215\253\344\277\235\346\212\244 Vue \350\267\257\347\224\261.md"
new file mode 100644
index 0000000..87935ca
--- /dev/null
+++ "b/Vue/\344\275\277\347\224\250\345\257\274\350\210\252\345\256\210\345\215\253\344\277\235\346\212\244 Vue \350\267\257\347\224\261.md"	
@@ -0,0 +1,176 @@
+# 使用导航守卫保护 Vue 路由
+
+[Vue Router](https://router.vuejs.org/zh/) 中的守卫主要分为三类：全局守卫、路由守卫和组件守卫。
+
+- 当触发任何导航时（即 URL 更改时），会调用全局守卫；
+- 当调用关联路由时（即 URL 匹配特定路由时），会调用每个路由守卫；
+- 当创建、更新或销毁路由中的组件时，会调用组件守卫。
+
+在每个类别中，都有额外的方法，可以让您更细粒度地控制应用程序路由。下面是 Vue 路由器中每种导航保护类型中所有可用方法的快速分解。
+
+以下将介绍 Vue Router 4.x 在 Composition API 中如何使用导航守卫。
+
+先讲一下守卫钩子主要有 3 个参数 `to`、`from`、`next`：
+
+- `to` — 即将进入的目标路由对象。
+- `from` — 当前导航正要离开的路由。
+- `next` — 控制路由的跳转。
+
+需要注意的是，在 Vue Router 4.x 和高版本的 3.x 中，`next` 不在是必须的，它被认为是一个常见的错误来源。它仍然存在，但可以通过 `return false` 来替代它。
+
+您可以在相关 [Issues](https://github.com/vuejs/rfcs/issues/177) 和 [Motivation](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0037-router-return-guards.md#motivation) 找到答案。
+
+## 全局守卫
+
+**`beforeEach`：全局前置守卫**，进入任何路由之前的操作。常用于进入页面前的权限验证，判断是否登录、页面 `title` 的修改等。
+
+```js
+import NProgress from 'nprogress'
+
+router.beforeEach((to, from) => {
+  NProgress.start()
+  document.title = 'Hello World!'
+
+  // 权限验证...
+
+  return true
+})
+```
+
+**`beforeResolve`（2.5.0+ 新增）：全局解析守卫**，确认导航之前的操作，但在所有组件守卫和异步路由组件被解析之后
+
+```js
+router.beforeResolve(async (to, from) => {
+  console.log(to, from)
+})
+```
+
+**`afterEach`：全局后置钩子**，路由解析后的操作，没有 `next` 参数，不会影响导航本身。
+
+```js
+import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+
+router.afterEach((to, from, failure) => {
+  // https://next.router.vuejs.org/api/#navigationfailuretype
+  if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+    console.log(failure.type)
+  }
+
+  NProgress.done()
+})
+```
+
+## 路由守卫
+
+`beforeEnter`：进入特定路由前的操作。
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history:  createWebHistory(),
+  routes: [
+    // ...
+    {
+      path: '/login',
+      name: 'login'
+      component: Login,
+      beforeEnter(to, from) {
+        console.log(to)
+        console.log(from)
+        // 拒绝进入该组件
+        return false
+      }
+    }
+  ]
+})
+```
+
+## 组件守卫
+
+组件内也可以直接定义路由导航守卫，称为[组件守卫](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB)。
+
+> **注意**：如果你使用 Composition API 来编写组件，Vue Router 不支持 `beforeRouteEnter` API。
+
+![https://github.com/vuejs/router/blob/main/CHANGELOG.md](https://upload-images.jianshu.io/upload_images/18281896-6a3edf1581b94a3e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+- `beforeRouteUpdate`：调用相同组件的新路由后的操作，它无法使用 `this`。常用于路由参数变化后重新请求数据。
+
+例如：当从 `/article/1` 跳转到 `/article/2` 时，将触发 `onBeforeRouteUpdate`：
+
+```js
+import { onBeforeRouteUpdate } from 'vue-router'
+
+onBeforeRouteUpdate(() => {
+  console.log('路由更新')
+})
+```
+
+- `beforeRouteLeave`：离开路由前的操作，它无法访问 `this`。常用于用户未保存当前页面的数据就准备跳转，离开当前路由，可以通过该钩子弹出一个提示窗口。
+
+```js
+import { onBeforeRouteLeave } from 'vue-router'
+
+onBeforeRouteLeave(() => {
+  const answer = confirm('数据未保存，您确定离开吗？')
+
+  // 取消导航并停留在同一页面上
+  if (!answer) return false
+})
+```
+
+> **注意**：使用守卫时，有一些是需要调用 `next` 的，否则将不会进入到该页面。
+
+## 应用示例
+
+### 进度条
+
+```js
+NProgress.configure({ showSpinner: false })
+
+router.beforeEach(async (to) => {
+  if (to.meta.loaded) {
+    return true
+  }
+
+  NProgress.start()
+  return true
+})
+
+router.afterEach(async () => {
+  NProgress.done()
+  return true
+})
+```
+
+### 切换滚动至顶部
+
+```js
+// 路由切换滚动至顶部
+const isHash = (href) => /^#/.test(href)
+
+router.afterEach(async (to) => {
+  // 滚动至顶部
+  isHash(to?.href) && document.body.scrollTo(0, 0)
+  return true
+})
+```
+
+这里提供了几个简单的示例，守卫其实更多的是访问组件、权限等的一些逻辑操作，这里不进行介绍。
+
+## Vue Router 完整的导航解析流程
+
+以下是 Vue Router 官网给出了[完整的导航解析流程](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B)：
+
+1. 导航被触发。
+2. 在失活的组件里调用 `beforeRouteLeave` 守卫。
+3. 调用全局的 `beforeEach` 守卫。
+4. 在重用的组件里调用 `beforeRouteUpdate` 守卫(2.2+)。
+5. 在路由配置里调用 `beforeEnter`。
+6. 解析异步路由组件。
+7. 在被激活的组件里调用 `beforeRouteEnter`。
+8. 调用全局的 `beforeResolve` 守卫(2.5+)。
+9. 导航被确认。
+10. 调用全局的 `afterEach` 钩子。
+11. 触发 DOM 更新。
+12. 调用 `beforeRouteEnter` 守卫中传给 `next` 的回调函数，创建好的组件实例会作为回调函数的参数传入。
diff --git "a/Vue/\345\210\233\345\273\272\346\202\250\347\232\204\347\254\254\344\270\200\344\270\252 Vue \350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md" "b/Vue/\345\210\233\345\273\272\346\202\250\347\232\204\347\254\254\344\270\200\344\270\252 Vue \350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md"
new file mode 100644
index 0000000..23b0c8e
--- /dev/null
+++ "b/Vue/\345\210\233\345\273\272\346\202\250\347\232\204\347\254\254\344\270\200\344\270\252 Vue \350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.md"	
@@ -0,0 +1,204 @@
+# 创建您的第一个 Vue 自定义指令
+
+在 Vue 中，指令是直接编辑 DOM 的最佳方法之一。
+
+例如 `v-if`、`v-show`、`v-bind` 等。如果您使用过 Vue，那么您一定对它们很熟悉。
+
+正如您可能猜到的，[Vue 自定义指令](https://vuejs.org/guide/reusability/custom-directives.html#custom-directives)是 Vue 让我们为项目构建额外指令的方式。它们是在整个项目中添加独特且可重用功能的好方法。
+
+Vue 自定义指令可以操作元素，也可以处理 DOM 中的响应性。
+
+## 什么是自定义指令？
+
+从本质上讲，自定义指令使您可以使项目适合您的需求。如果您使用 Vue 插件，您会注意到他们非常频繁地使用自定义指令。
+
+例如，在 [vue-lazyload](https://github.com/hilongjw/vue-lazyload) 插件中，它使用指令 `v-lazy` 添加自定义功能，从而使图像加载更加有效。在这里使用指令是最好的情况，因为我们希望直接编辑 DOM。
+
+> 您可能会问：“我不能注册 `computed` 和 `watch` 这样的组件选项吗？ ”
+
+尽管组件选项对于抽象和代码重用很有用，但定制指令仍然是直接操作 DOM 元素的最佳方式之一。
+
+## 指令钩子
+
+与组件及其生命周期钩子一样，每个 Vue 指令都有自己的钩子可以触发。
+
+Vue2 和 Vue3 中的指令钩子不同。
+
+以下是 Vue2 指令钩子：
+
+- `bind` — 当指令绑定到元素时调用一次
+- `inserted` — 将绑定元素插入其父节点时
+- `update` — 当元素更新时（但所有子元素尚未更新）
+- `componentUpdated` — 子项也已更新后
+- `unbind` — 当指令与元素解除绑定时调用一次
+
+以下是 Vue3 指令钩子：
+
+- `created` — 在应用元素的属性或事件侦听器之前调用。
+- `beforeMount` — 与旧的 `bind` 钩子相同
+- `mounted` — 与旧的 `inserted` 钩子相同
+- `beforeUpdate` — 在元素本身更新之前调用（如生命周期钩子）
+- `updated` — 与旧的 `componentUpdated` 钩子相同
+- `beforeUnmount` — 在卸载元素之前调用（如生命周期钩子）
+- `unmounted` — 与旧的 `unbind` 钩子相同
+
+在实现这些钩子时，每个钩子都有一些可以接受的参数。
+
+- `el` — 指令绑定到此元素；允许您修改它
+- `binding` — 一个对象包含很多属性
+- `vnode` — 虚拟节点
+- `oldNode` — 先前的虚拟节点（仅在 `update` 钩子中可用）
+
+> [Vue 文档中关于指令](https://vuejs.org/guide/reusability/custom-directives.html#directive-hooks)的一个重要注意事项是，您应该将这些参数（除 `el` 外）视为只读，并且永远不要修改它们。
+
+### `binding` 对象
+
+`binding` 对象包含几个属性，可以帮助您向钩子添加功能。
+
+- `name` — 指令的名称（无 `v` 前缀）
+- `value` — 传递给指令的值
+- `oldValue` — 指令的前一个值（仅在 `update` 钩子中可用）
+- `expression` — 绑定到字符串的表达式（例如 `v-my-directive = "3 * 3"`，`expression = "3 * 3"`）
+- `arg` — 传递给字符串的任何参数（例如 `v-my-directive:blue`，`arg = blue`）
+- `modifiers` — 所有作为对象传递的修饰符（例如 `v-my-directive.blue.link`，`modifiers = { blue：true, link：true }`）
+
+## 添加自定义指令
+
+在我们的 `main.js` 文件中或您定义 `Vue` 实例的任何位置，我们只需要使用 `Vue.directive` 方法即可。Vue 3 则是使用 [`app.directive`](https://vuejs.org/api/application.html#app-directive)。
+
+现在，让我们创建一个 `v-font-size` 指令来操作组件的字体大小。
+
+在 `main.js` 中，我们将添加一些代码来监听 `beforeMount` 和 `update` 钩子，并调整字体大小。
+
+```js
+// Vue 2
+Vue.directive('font-size', {
+  bind(el, binding) {
+    el.style.fontSize = 24 + 'px'
+  },
+  updated(el, binding) {
+    el.style.fontSize = 24 + 'px'
+  }
+})
+
+// Vue 3
+app.directive('font-size', {
+  beforeMount(el, binding) {
+    el.style.fontSize = 20 + 'px'
+  },
+  updated(el, binding) {
+    el.style.fontSize = 20 + 'px'
+  }
+})
+```
+
+下面将使用 Vue3 钩子实现该指令，但是如果需要，您可以从上面将它们映射到 Vue2 钩子。
+
+然后，在任何组件文件中，都可以使用前缀 `v-` 来访问它。
+
+```html
+<p v-font-size>使用 font-size 指令</p>
+```
+
+还有另一种定义 Vue 指令的方法。
+
+```js
+app.directive('font-size', (el, binding) => {
+  el.style.fontSize = 24 + 'px'
+})
+```
+
+如果传递的是一个函数而不是一个对象，那么它将在 `mounted` 和 `update` 钩子期间运行。
+
+## 向指令传递参数
+
+有几种方法可以增加对指令的控制。这可以通过传递附加值、参数或修饰符来实现。
+
+### 传递值 — 用于响应性数据
+
+传递数据最直观的方法就是给它一个值。这允许指令在值发生变化时进行响应性更新。这也提供了最灵活的控制，因为您可以接受广泛的值（任何字体大小）。
+
+对于我们的示例，假设我们希望更好地控制元素中的字体大小。
+
+```html
+<p v-font-size="64">使用 font-size 指令</p>
+<!-- 或者使用变量 -->
+<p v-font-size="fontSize">使用 font-size 指令</p>
+```
+
+在指令内部，您需要更改方法以使用 `binding` 对象中的值。
+
+```js
+app.directive('font-size', (el, binding, vnode) => {
+  el.style.fontSize = binding.value + 'px'
+})
+```
+
+### 向指令发送参数
+
+如果您真的不需要任何响应性，而只想提供一种为指令提供多个选项的方法。参数是做到这一点的好方法。
+
+```js
+app.directive('font-size', (el, binding, vnode) => {
+  console.log(binding + ' ' + vnode)
+  let defaultSize = 16
+  switch (binding.arg) {
+    case 'small':
+      defaultSize = 12
+      break
+    case 'large':
+      defaultSize = 32
+      break
+    default:
+      defaultSize = 16
+      break
+  }
+  el.style.fontSize = defaultSize + 'px'
+})
+```
+
+然后在我们的模板中。
+
+```html
+<p v-font-size:small>小号 font-size 指令</p>
+<p v-font-size:medium>中等 font-size 指令</p>
+<p v-font-size:large>大号 font-size 指令</p>
+```
+
+### 使用修饰符
+
+修饰符与参数类似，因为它们不适合响应性。但当与 `args` 结合使用时，您可以创建一个高度定制的系统。
+
+这是因为可以对一个指令应用多个修饰符。
+
+```js
+app.directive('font-size', (el, binding, vnode) => {
+  console.log(binding + ' ' + vnode)
+  let defaultSize
+  if (binding.modifiers.small) {
+    defaultSize = 12
+  } else if (binding.modifiers.large) {
+    defaultSize = 32
+  } else {
+    defaultSize = 16
+  }
+
+  if (binding.modifiers.red) {
+    el.style.color = '#ff0000'
+  }
+
+  el.style.fontSize = defaultSize + 'px'
+})
+```
+
+然后我们可以在模板中使用它们：
+
+```html
+<p v-font-size.small.red>小号 font-size directive</p>
+<p v-font-size.medium>中等 font-size directive</p>
+<p v-font-size.large>大号 font-size 指令</p>
+```
+
+输出内容如下所示：
+
+![v-font-size 指令](https://upload-images.jianshu.io/upload_images/18281896-cc1905a1b06090b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/Vue/\345\210\266\344\275\234\346\202\250\347\232\204\347\254\254\344\270\200\344\270\252 Vue \346\217\222\344\273\266.md" "b/Vue/\345\210\266\344\275\234\346\202\250\347\232\204\347\254\254\344\270\200\344\270\252 Vue \346\217\222\344\273\266.md"
new file mode 100644
index 0000000..3c608c5
--- /dev/null
+++ "b/Vue/\345\210\266\344\275\234\346\202\250\347\232\204\347\254\254\344\270\200\344\270\252 Vue \346\217\222\344\273\266.md"	
@@ -0,0 +1,236 @@
+# 制作您的第一个 Vue 插件
+
+随着 Vue 的普及，社区创建的 Vue 插件变得越来越普遍和强大。
+
+本文将带您创建您的第一个 Vue 插件。
+
+## 如何设置插件
+
+概括地说，我们的插件只是一个公开 `install()` 方法的 JavaScript 模块。该方法需要 2 个参数：
+
+- Vue 构造函数
+- `options` 对象
+
+在我们的 Vue 项目中，在 `src/plugins` 文件夹下创建一个新的 `first-plugin.js` 文件。
+
+其中，我们使用 `export default` 导出插件，并使用 `install(Vue, options)` 方法公开它。
+
+```js
+// first-plugin.js
+export default {
+  // 由 Vue.use(FirstPlugin) 调用
+  install(Vue, options) {}
+}
+```
+
+现在，让我们实际向该插件添加一些内容。
+
+## 向插件添加功能
+
+一种查看我们的插件运行情况的简单方法是创建一个全局 `mixin`，该全局 `mixin` 将包含在所有 Vue 实例中。使用 [`Vue.mixin`](https://vuejs.org/v2/guide/mixins.html#Global-Mixin) 函数可以做到这一点。
+
+如果您不熟悉，这是 [`Vue mixins`](https://learnvue.co/2019/12/how-to-manage-mixins-in-vuejs/) 的基本概述。本质上，它们允许您注入到其他组件选项。它们是提取和重用组件之间通用功能的好方法。`Mixins` 还允许您的插件访问 Vue 生命周期钩子。
+
+我们在 `Vue.mixin` 函数内声明其他组件选项。以下将在 `create` 生命周期钩子打印 Vue 实例：
+
+```js
+// first-plugin.js
+export default {
+  install(Vue, options) {
+    // 创建一个 mixin
+    Vue.mixin({
+      created() {
+        console.log(Vue)
+      }
+    })
+  }
+}
+```
+
+### 安装插件
+
+如果您现在要运行项目，您会注意到什么都没有改变。那是因为我们还没有安装我们的插件。
+
+在 `src/main.js` 文件中，即声明我们的 Vue 构造函数的文件中，我们只需要导入并安装插件文件即可。
+
+```js
+// main.js
+import FirstPlugin from './plugins/first-plugin.js'
+
+Vue.use(FirstPlugin)
+```
+
+**`Vue.use()` 的一大优点是可确保您的插件仅安装一次。**如果没有这一功能，而您又不小心将它添加了两次，它将减慢您的应用程序的运行速度，并可能使某些功能混乱。
+
+现在，我们已经安装完插件。打开控制台，您将看到 Vue 实例的输出。
+
+## 声明全局属性
+
+**全局数据/方法**是一种向代码中添加广泛功能的有用方法。
+
+假设我们希望应用程序的当前版本为全局属性。
+
+```js
+// first-plugin.js
+install(Vue, options) {
+  // 定义全局属性
+  Vue.VERSION = 'v2.0.3'
+}
+```
+
+> **注意**：不要在 Vue 实例内过度使用全局变量，它非常容易在全局作用域内过度拥挤，使用起来很痛苦。
+
+## 定义实例属性
+
+实例属性是将数据和方法添加到 Vue 项目的便捷方法。我更喜欢使用实例属性，以使我的全局作用域保持整洁并易于理解。
+
+在此示例中，我刚刚创建了一个实例方法，该方法采用一个字符串并将其放置在 `<i>` 标签内。
+
+```js
+// first-plugin.js
+// 定义实例方法
+Vue.prototype.$italicHTML = function (text) {
+  return `<i>${text}</i>`
+}
+```
+
+> **注意**：`$` 不是必需的语法，这只是 Vue 用于实例属性以避免冲突的命名约定。
+
+我们可以在任何组件内像这样使用它。
+
+```html
+<div v-html="$italicHTML(content)"></div>
+```
+
+## 全局过滤器
+
+[Vue 过滤器](https://v3.cn.vuejs.org/guide/migration/filters.html#%E8%BF%87%E6%BB%A4%E5%99%A8)可以使文本转换变得非常容易。
+
+> **注意**：Vue3 已移除过滤器。
+
+同其他操作一样，我们要做的就是调用 Vue 构造函数方法 `Vue.filter()`，并提供一个全局可用的过滤器名称和如何处理文本内容的回调函数。
+
+假设我们要使用过滤器来根据较长的文本生成预览代码片段。大致内容如下：
+
+```js
+// first-plugin.js
+// 定义全局过滤器
+Vue.filter('preview', (value) => {
+  if (!value) {
+    return ''
+  }
+  return value.substring(0, userOptions.cutoff) + '...'
+})
+```
+
+## 添加自定义指令
+
+[自定义指令](https://vuejs.org/v2/guide/custom-directive.html)是对特定元素进行 DOM 访问的好方法。
+
+查看 [Vue 文档](https://vuejs.org/v2/guide/custom-directive.html)中的示例，让我们在插件内创建一个自定义指令，该指令自动将元素聚焦在页面上。
+
+在 `install()` 方法内部，我们只需要使用 `Vue.directive()` 方法来声明我们的新指令。
+
+```js
+// first-plugin.js
+// 添加自定义指令
+Vue.directive('focus', {
+  // 将绑定元素插入 DOM 时
+  inserted(el) {
+    // 聚焦元素
+    el.focus()
+  }
+})
+```
+
+我们可以在任何组件内像这样使用它。这就是我们在页面加载时自动聚焦文本输入的方式。
+
+```html
+<input type="text" placeholder="text" v-focus />
+```
+
+## 合并选项对象
+
+至此，我们还没有涉及 `install()` 方法的第二个参数。此方法使您的插件在不同情况下更加灵活。
+
+为了使用 `options` 对象，我们首先向我们的插件传递一些选项供我们在插件内部选择。
+
+使用 `options` 对象时，一种**最佳实践**是创建一些默认值。我们可以通过在插件文件中定义默认选项对象，然后使用 JavaScript 的[扩展语法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)将默认选项与参数 选项合并来实现这一点。
+
+回顾我们前面过滤器的例子，假设我们要添加一个选项，该选项允许我们设置文本预览的截止点。看起来像这样：
+
+```js
+// first-plugin.js
+const defaultOptions = {
+  cutoff: 50
+}
+
+export default {
+  // 由 Vue.use(FirstPlugin) 调用
+  install(Vue, options) {
+    // 将默认选项与 arg 选项合并
+    let userOptions = { ...defaultOptions, ...options } // 其余插件代码
+  }
+}
+```
+
+现在，即使没有任何选项传递给插件，它仍将使用默认值运行。
+
+如果我们确实想传递选项，那很简单。在 `src/main.js` 文件中，我们要做的就是在 `Vue.use()` 方法中添加第二个参数。此参数将是一个选项对象。
+
+```js
+// main.js
+Vue.use(FirstPlugin, { cutoff: 100 })
+```
+
+因为我们将参数选项放在扩展语法的右侧，所以它会覆盖默认值。
+
+## 最终的插件
+
+```js
+// first-plugin.js
+const defaultOptions = {
+  cutoff: 50
+}
+
+export default {
+  install(Vue, options) {
+    let userOptions = { ...defaultOptions, ...options }
+    Vue.mixin({
+      created() {
+        console.log(Vue)
+      }
+    })
+    Vue.VERSION = 'v2.0.3'
+    Vue.prototype.$italicHTML = function (text) {
+      return '<i>' + text + '</i>'
+    }
+    Vue.filter('preview', (value) => {
+      if (!value) {
+        return ''
+      }
+      return value.substring(0, userOptions.cutoff) + '...'
+    })
+    Vue.directive('focus', {
+      inserted: function (el) {
+        el.focus()
+      }
+    })
+  }
+}
+```
+
+就功能而言，此插件绝对遍地都是。但是，如果您继续进行下去，那么现在您已经熟悉了构建更高级的插件所需的大多数工具，方法和技术。
+
+## 总结
+
+本文，我们介绍了四种方法在插件内添加全局功能：
+
+- `Vue.mixin`
+- 实例属性和方法（`Vue.pertotype` 和 `Vue.pertotype.method`）
+- `Vue.filter()` 过滤器（Vue3 已经将其移除）
+- `Vue.directive()` 指令
+
+## 更多资料
+
+**[awesome-vue](https://github.com/vuejs/awesome-vue)** 库收集了与 Vue.js 相关的精彩内容的精选列表。
diff --git "a/Vue/\345\234\250 Vue \344\270\255\344\275\277\347\224\250 $emit \350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md" "b/Vue/\345\234\250 Vue \344\270\255\344\275\277\347\224\250 $emit \350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..881fe04
--- /dev/null
+++ "b/Vue/\345\234\250 Vue \344\270\255\344\275\277\347\224\250 $emit \350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md"	
@@ -0,0 +1,146 @@
+# 在 Vue 中使用 $emit 自定义事件
+
+Vue `$emit` 允许我们从子组件向其父组件发送自定义事件。
+
+在标准 Vue 流中，这是触发某些事件或从子组件发送数据到父组件的最佳方式。
+
+本文详细介绍 Vue `$emit`。
+
+## Vue $emit 是如何工作的？
+
+每个 Vue `$emit` 调用可以传递两个参数：
+
+- **事件名称** — 这是我们可以在父组件中监听的事件名
+- **有效 payload 对象** — 我们希望跟随事件一起传递的数据（可选）
+
+```js
+$emit('event-name', data)
+```
+
+在代码中使用 Vue `$emit` 有很多不同的方法：
+
+- 使用 `$emit` 内联
+- Options API — `this.$emit`
+- Composition API — `context.emit`
+- `setup script` 语法糖 `defineEmits` 方法
+
+根据你的情况，每种方法都有自己的优缺点，所以让我们来看看每种方法的一个例子，你可以看到哪种方法适合你。
+
+## 在 Vue 中使用 `$emit` 内联事件
+
+在构建自己的自定义表单输入时，您可能希望从组件中发送数据。
+
+```html
+<!-- CustomInput.vue -->
+<template>
+  <input type="text" @change='$emit('customChange', $event.target.value)' />
+</template>
+```
+
+以上存在一个问题，我们将无法监听像 `@change` 这样的标准输入事件。
+
+假设我们的父组件是这样设置的，监听自定义事件 `custom-change` 并记录其值。
+
+```html
+<template>
+  <CustomInput @custom-change="logChange" />
+</template>
+
+<script>
+  import MyInput from './components/MyInput.vue'
+  export default {
+    components: {
+      MyInput
+    },
+    methods: {
+      logChange(event) {
+        console.log(event)
+      }
+    }
+  }
+</script>
+```
+
+为了实现这一点，我们需要自定义文本输入来侦听本地输入事件，然后发出自己的事件。
+
+要实际传递原始更改事件的值，我们需要将带有事件有效负载的自定义事件（在此例中为 `event.target.value`）作为第二个参数发送。
+
+```html
+<template>
+  <input type="text" @change="$emit('customChange', $event.target.value)" />
+</template>
+```
+
+现在，如果我们输入自定义输入，我们的父组件将正确地记录所有更改。
+
+## 在 Options API 中以 `$emit()` 发送事件
+
+在 Options API 中，可以使用 `this` 调用 `$emit` 方法，然后将 `e.target.value` 传递给它。
+
+```html
+<script>
+  export default {
+    methods: {
+      customChange(e) {
+        this.$emit('customChange', e.target.value)
+      }
+    }
+  }
+</script>
+```
+
+## 使用 `context.emit` 在 Composition API 中发送事件
+
+在 Composition API 中，由于安装程序在创建组件之前运行，因此我们无法访问 `this`。
+
+相反，我们可以使用 `setup` 函数的第二个参数 `context` 来访问 `emit` 方法。
+
+> `context` 还可以获取 `slots` 和 `attrs`。
+
+两种获取方法：
+
+- 使用 `setup` 获取整个 `context` 对象
+- 仅通过解构 `context` 获取 `emit`
+
+我们可以调用与 Options API 完全相同的 `emit`：创建一个方法，调用 `emit`，并将参数传递给它！
+
+```html
+<script>
+  export default {
+    setup(props, { emit }) {
+      const customChange = (e) => {
+        emit('customChange', e.target.value)
+      }
+
+      return {
+        customChange
+      }
+    }
+  }
+</script>
+```
+
+以上就是 Vue `emit()` 方法发送自定义事件的三种不同方法。
+
+## setup 语法糖 `setup script`
+
+可以通过 `defineEmits` 方法定义 emit 自定义事件。
+
+```html
+<script setup>
+  const emit = defineEmits(['customChange'])
+  const handleAPI = (e) => {
+    emit('customChange', e.target.value)
+  }
+</script>
+```
+
+## 监听事件时使用 `kebab-case`
+
+Vue 官方文档建议在事件名称中使用 **kebab-case**，即使是在脚本中。**如果您使用的是 Vue2，这一点至关重要**。
+
+在 Vue2 中，事件名称没有自动将 **camelCase** 转换为 **kebab-case**，`v-on` 指令会自动将事件名称转换为小写，因此 **camelCase** 命名的事件不可能被侦听。
+
+例如，如果我们发出一个名为 `myEvent` 的事件，则侦听 `my-event` **将不起作用**。
+
+在 Vue3 中，事件名称（如 `props` 和 `components`）可以在不同情况下自动转换。与 `props` 类似，最好还是坚持每种编程语言的约定，**在脚本中使用 camelCase，在模板中使用 kebab-case**。
diff --git "a/Vue/\345\234\250 Vue2 \344\270\216 Vue3 \344\270\255\346\236\204\345\273\272\347\233\270\345\220\214\347\232\204\347\273\204\344\273\266.md" "b/Vue/\345\234\250 Vue2 \344\270\216 Vue3 \344\270\255\346\236\204\345\273\272\347\233\270\345\220\214\347\232\204\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..bf21290
--- /dev/null
+++ "b/Vue/\345\234\250 Vue2 \344\270\216 Vue3 \344\270\255\346\236\204\345\273\272\347\233\270\345\220\214\347\232\204\347\273\204\344\273\266.md"	
@@ -0,0 +1,263 @@
+# 在 Vue2 与 Vue3 中构建相同的组件
+
+**Vue2 和 Vue3 有什么不同？** 我们以一些简单的示例，来看看具体的变化。
+
+你可以查看 [Vue3 文档](https://v3.vuejs.org/guide/introduction.html)，以了解更加详细的内容示例。
+
+## 创建模板
+
+Vue3 支持 **Fragments**，这意味着组件可以有多个根节点。
+
+```html
+<template>
+  <div class="app"></div>
+  <div class="popup"></div>
+</template>
+```
+
+## 设置数据
+
+主要的区别所在：`Options API` 与 `Composition API`
+
+- `Options API` 将我们的代码分为不同的属性：`data`、`computed`、`methods` 等。
+- `Composition API` 允许我们按函数而不是属性的类型对代码进行分组。
+
+假设我们只有两个 `data` 属性：`username` 和 `password`。
+
+Vue2 代码看起来像这样，我们只需在 `data` 属性中写上这两个值。
+
+```js
+export default {
+  props: {},
+  data() {
+    return {
+      username: '',
+      password: ''
+    }
+  }
+}
+```
+
+在 Vue3 中，使用一种新的 `setup()` 方法进行所有组件初始化的工作。
+
+此外，为了使开发人员能够更好地控制响应性数据，我们可以直接访问 Vue 的 `reactive` API。
+
+创建响应性数据包括三个步骤：
+
+- 从 vue 导入 `reactive`
+- 使用 `reactive` 方法声明我们的数据
+- 让我们的 `setup` 方法返回响应式数据，以便我们的模板可以访问它
+
+就代码而言，它看起来有点像这样。
+
+```js
+import { reactive } from 'vue'
+
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      username: '',
+      password: ''
+    })
+
+    return { state }
+  }
+}
+```
+
+然后，在我们的模板中，像 `state.username` 和 `state.password` 那样访问它们。
+
+## 在 Vue2 与 Vue3 中创建方法
+
+**Vue2 Options API** 有一个单独的方法部分。在这里，我们可以定义所有的方法，并以我们想要的方式组织它们。
+
+```js
+export default {
+  props: {},
+  data() {},
+  methods: {
+    login() {}
+  }
+}
+```
+
+**Vue3 Composition API** 中的 `setup()` 方法也可以处理方法。它的工作原理与声明数据有些类似，我们必须先声明我们的方法，然后 `return` 它，以便组件的其他部分可以访问它。
+
+```js
+export default {
+  props: {},
+  setup() {
+    // ...
+    const login = () => {}
+    return {
+      login
+    }
+  }
+}
+```
+
+## 生命周期钩子
+
+在 Vue2 中，我们可以直接从组件选项访问[生命周期钩子](https://vuejs.org/guide/essentials/lifecycle.html)。以下使用到 `mounted` 钩子打印一些内容：
+
+```js
+export default {
+  data() {},
+  mounted() {
+    console.log('component mounted')
+  },
+  ethods: {}
+}
+```
+
+现在使用 **Vue3 Composition API**，几乎所有内容都在 `setup()` 方法内部。这包括 `mounted` 的生命周期钩子。
+
+但是，默认情况下不包括生命周期钩子，因此我们必须导入 `onMounted` 方法作为在 `Vue3` 中调用的方法。
+
+然后，在 `setup()` 方法中，我们可以通过传递函数来使用 `onMounted` 方法。
+
+```js
+import { reactive, onMounted } from 'vue'
+
+export default {
+  props: {},
+  setup() {
+    // ...
+    onMounted(() => {
+      console.log('component mounted')
+    })
+    // ...
+  }
+}
+```
+
+> 阅读：[Vue2 与 Vue3 生命周期变化](https://github.com/lio-zero/blog/blob/master/Vue/Vue2%20%E4%B8%8E%20Vue3%20%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%8F%98%E5%8C%96.md)
+
+## 计算属性 — `computed`
+
+让我们添加一个将用户名转换为小写字母的 `computed` 属性。
+
+为了在 Vue2 中实现这一点，我们向 `options` 对象添加一个 `computed`。
+
+```js
+export default {
+  // ..
+  computed: {
+    lowerCaseUsername() {
+      return this.username.toLowerCase()
+    }
+  }
+}
+```
+
+您可能也注意到了，在 Vue3 中使用一些方法，您需要从 vue 中导出它们，才能够使用。
+
+> Vue3 的设计允许开发人员导入他们所使用的内容，并且在他们的项目中没有不必要的包。基本上，他们不希望开发人员必须包含他们从未使用过的东西，这在 Vue2 中正成为一个日益严重的问题。
+
+因此，要在 Vue3 中使用 `computed` 属性，首先必须将 `computed` 导入到组件中。
+
+然后，类似于我们之前创建 `reactive` 数据的方式，在添加一个属性，如下所示：
+
+```js
+import { reactive, onMounted, computed } from 'vue'
+
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      username: '',
+      password: '',
+      lowerCaseUsername: computed(() => state.username.toLowerCase())
+    })
+
+    // ...
+  }
+}
+```
+
+> 阅读：[Vue Computed — 计算属性](https://github.com/lio-zero/blog/blob/master/Vue/Vue%20Computed%20%E2%80%94%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.md)
+
+## 访问 `props`
+
+访问 `props` 在 Vue2 和 Vue3 之间的一个重要区别，**`this` 意味着完全不同。**
+
+在 Vue2 中，`this` 几乎总是指组件，而不是特定的属性。虽然这让表面上的事情变得简单，但它使类型支持成为一种痛苦。
+
+但是，我们可以很容易地访问 `props`，让我们添加一个简单的示例，例如在 `mounted` 钩子期间打印 `title`：
+
+```js
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'Vue2'
+    }
+  },
+  mounted() {
+    console.log('title: ' + this.title)
+  }
+}
+```
+
+但是在 Vue3 中，我们不再使用 `this` 来访问 `props`，发送事件和获取属性。相反，`setup()` 方法采用两个参数：
+
+- `props` — 对组件 `props` 的不可变访问
+- `context` — Vue3 公开的选定属性（`emit`、`slots` 和 `attrs`）
+
+使用 `props` 参数，上面的代码如下所示。
+
+```js
+setup (props) {
+  onMounted(() => {
+    console.log('title: ' + props.title)
+  })
+}
+```
+
+## `emit` 事件
+
+同样，在 Vue2 中**发出事件**非常简单，但是 Vue3 使您可以更好地控制如何访问属性/方法。
+
+假设在我们的例子中，当我们按下**提交按钮**时，我们想向父组件发出一个 `login` 事件。
+
+Vue2 代码只需调用 `this.$emit` 并传入我们的有效负载对象即可。
+
+```js
+login() {
+  this.$emit('login', {
+    username: this.username,
+    password: this.password
+  })
+}
+```
+
+然而，在 Vue3 中，我们现在知道 `this` 不再意味着相同的事情，所以我们必须以不同的方式来做。
+
+幸运的是，`context` 对象暴露了 `emit`，它提供了与 `this.$emit` 相同的东西。
+
+我们所要做的就是将 `context` 作为第二个参数添加到 `setup` 方法中。我们将对 `context` 对象进行解构，使代码更加简洁。
+
+然后，我们只需要调用 `emit` 发送事件即可。然后，像以前一样，`emit` 方法采用两个参数：
+
+- 事件名称
+- 与事件一起传递的有效 payload 对象
+
+```js
+setup(props, { emit }) {
+  const login = () => {
+    emit('login', {
+      username: state.username,
+      password: state.password
+    })
+  }
+}
+```
+
+> 阅读：[在 Vue 中使用 $emit 自定义事件](https://github.com/lio-zero/blog/blob/master/Vue/%E5%9C%A8%20Vue%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20%24emit%20%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.md)
+
+## 最后
+
+Vue2 和 Vue3 中的所有概念都是相同的，但是我们访问属性的某些方式已经有所变化。
+
+总的来说，我认为 Vue3 将帮助开发人员编写更有组织的代码，特别是在大型项目中。这主要是因为 **Composition API** 允许您按特定功能将代码分组在一起，甚至可以将功能提取到自己的文件中，然后根据需要将其导入组件中。
diff --git a/WTF/CORS.md b/WTF/CORS.md
new file mode 100644
index 0000000..d60aaa1
--- /dev/null
+++ b/WTF/CORS.md
@@ -0,0 +1,181 @@
+# CORS
+
+在浏览器中运行的 JavaScript 应用程序通常只能访问为其提供服务的同一域（源）上的 HTTP 资源。
+
+加载图片、脚本或样式总是有效的，但对另一台服务器的 XHR 和 Fetch 调用将失败，除非该服务器实现了允许该连接的方式。
+
+这种方式被称为 CORS（Cross-Origin Resource Sharing），即**跨源资源共享**。
+
+需要 CORS 的一件非常重要的事情是 ES 模块，如果你没有在服务器上设置允许服务第三方源的 CORS 策略，则请求将失败。
+
+跨域资源在**访问不同的协议 + 域名（主域名、子域名）+ 端口**的情况下将失败。
+
+这是为了你的安全，防止恶意用户利用 Web 平台。
+
+但是，如果你同时控制服务器和客户端，那么你就有充分的理由允许它们相互通信。
+
+## 如何控制？
+
+CORS 通过在浏览器和服务器之间增加一些 HTTP headers 来实现跨域资源共享。具体来说，当一个资源从一个域（源）加载到另一个域（目标）时，浏览器会发送一个 `OPTIONS` 请求（称为**预检请求**）到目标域，用来确定是否允许跨域访问。服务器接收到 `OPTIONS` 请求后，可以返回一个 HTTP 响应头，告诉浏览器是否允许跨域访问。
+
+具体来说，服务器会返回一个 `Access-Control-Allow-Origin` 响应头，用来指定允许跨域访问的源。如果这个响应头的值为 `*`，表示允许所有源进行跨域访问；如果这个响应头的值为具体的域名，则只有该域名所对应的源才可以继续进行跨域访问。
+
+当然，CORS 还提供了一些额外的 HTTP 头，用来控制更细粒度的跨域访问。比如：
+
+- `Access-Control-Allow-Methods` 响应头用来指定允许跨域访问的 HTTP 方法，比如 `GET`、`POST`、`PUT` 等。
+- `Access-Control-Allow-Headers` 响应头用来指定允许跨域访问的 HTTP headers，比如 `Content-Type`、`X-Requested-With` 等。
+- `Access-Control-Allow-Credentials` 响应头用来指定允许跨域访问的请求凭据，比如 Cookie、HTTP 认证参数等。
+- etc
+
+详细的 CORS 介绍请查阅阮一峰老师的[跨域资源共享 CORS 详解](https://www.ruanyifeng.com/blog/2016/04/cors.html)。
+
+## 以 Express 为例
+
+如果你使用 Node.js 和 Express 作为框架，可以使用 [CORS](https://github.com/expressjs/cors) 中间件，该中间件为我们处理了这一切。
+
+查看 cors 源码 [lib/index.js](https://github.com/expressjs/cors/blob/master/lib/index.js)，其实现与上述所讲的一致，通过在 HTTP 响应中添加特定的响应头来解决跨域请求。
+
+### 基本用法
+
+以下是 Node.js Express 框架实现的简单服务器：
+
+```js
+const express = require('express')
+const app = express()
+
+app.get('/without-cors', (req, res, next) => {
+  res.json({ msg: 'no CORS!' })
+})
+
+const server = app.listen(3000, () => {
+  console.log('Listening on port %s', server.address().port)
+})
+```
+
+如果 `/without-cors` 遇到来自不同来源的 `fetch` 请求，它将引发 CORS 问题。
+
+![由于 CORS 政策，fetch 失败](https://upload-images.jianshu.io/upload_images/18281896-b5f5fb2ffbcb2362.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果要让请求正常运行，我们只需要导入 `cors` 并注册中间件：
+
+```js
+const express = require('express')
+const cors = require('cors')
+const app = express()
+
+app.use(cors())
+
+app.get('/with-cors', (req, res, next) => {
+  res.json({ msg: 'xxx' })
+})
+
+// ...
+```
+
+当然，你也可以在单个路由中使用：
+
+```js
+app.get('/with-cors', cors(), (req, res, next) => {)
+```
+
+![请求成功](https://upload-images.jianshu.io/upload_images/18281896-19da6b82b17f8ece.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### 仅允许特定来源
+
+然而，这个例子有一个问题：**任何请求都将被服务器作为跨域接受**。
+
+正如你在 **Network** 面板中看到的，传递的请求中有一个 `Access-Control-Allow-Origin: *`
+
+![CORS 响应标头](https://upload-images.jianshu.io/upload_images/18281896-4ad5b5062f14f2d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+你需要将服务器配置为只允许为一个源服务，并阻止所有其他源。
+
+你可以这样做：
+
+```js
+const cors = require('cors')
+
+// 注意，origin 的末尾不需要斜杆
+const corsOptions = {
+  origin: 'https://example.com'
+}
+
+app.get('/articles/:id', cors(corsOptions), (req, res, next) => {
+  // ...
+})
+```
+
+你还可以提供更多服务：
+
+```js
+const whitelist = ['http://example1.com', 'http://example2.com']
+
+const corsOptions = {
+  origin(origin, callback) {
+    if (whitelist.indexOf(origin) !== -1) {
+      callback(null, true)
+    } else {
+      callback(new Error('CORS 不允许'))
+    }
+  }
+}
+```
+
+详细用法请[查阅文档](https://github.com/expressjs/cors#cors)。
+
+## 预检
+
+有一些请求是以简单的方式处理的。所有 `GET` 请求都属于这个组。
+
+还有一些 `POST` 和 `HEAD` 请求也是如此。
+
+如果 `POST` 满足使用 `Content-Type` 的要求，它们也将在这个组中：
+
+- `application/x-www-form-urlencoded`
+- `multipart/form-data`
+- `text/plain`
+
+所有其他请求都必须经过一个预批准阶段，即**预检（Preflight）**。浏览器这样做是为了确定它是否有权通过发出 `OPTIONS` 请求来执行某项操作。
+
+预检请求包含一些服务器将用于检查权限的 headers：
+
+```http
+OPTIONS /resource/request
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: origin, x-requested-with, accept
+Origin: https://example.com
+...
+```
+
+服务器将响应如下内容：
+
+```http
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+...
+```
+
+我们检查了 `POST`，但服务器告诉我们还可以为该特定资源发出其他 HTTP 请求类型。
+
+按照上面的 Node.js Express 示例，服务器还必须处理 `OPTIONS` 请求：
+
+```js
+var express = require('express')
+var cors = require('cors')
+var app = express()
+
+// 只允许在一个资源上使用 OPTIONS
+app.options('/resource/request', cors())
+
+// 在所有资源上允许 OPTIONS
+app.options('*', cors())
+```
+
+## 最后
+
+CORS 是一种安全机制，它用于在浏览器和服务器之间添加限制，以避免恶意的跨域请求。因此，在使用 cors 模块时，应该根据实际情况设置适当的 CORS 策略，以保证应用的安全性。
+
+## 更多资料
+
+[How to win at CORS](https://jakearchibald.com/2021/cors/)
diff --git a/WTF/Code Golf.md b/WTF/Code Golf.md
new file mode 100644
index 0000000..6612cbc
--- /dev/null
+++ b/WTF/Code Golf.md	
@@ -0,0 +1,17 @@
+# Code Golf
+
+> [Code Golf](https://en.wikipedia.org/wiki/Code_golf) 是一种娱乐性的计算机编程比赛，参赛者努力获得解决特定问题的尽可能短的源代码。
+
+以下是偶然间发现 [aem1k](https://aem1k.com/) 上的其中一个示例：
+
+```html
+<pre id=p style=background:#0a1922>
+  <svg onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'>
+</pre>
+```
+
+它是如此的神奇，👉 [查看示例](https://aem1k.com/meta/quine/)。其中还收集了一些其他类似的项目，代码地址 [aemkei.github.io](https://github.com/aemkei/aemkei.github.io)。
+
+## 更多资料
+
+[CreepyCodeCollection](https://github.com/MinhasKamal/CreepyCodeCollection)
diff --git a/WTF/ECMAScript.md b/WTF/ECMAScript.md
new file mode 100644
index 0000000..6d731bf
--- /dev/null
+++ b/WTF/ECMAScript.md
@@ -0,0 +1,96 @@
+# ECMAScript
+
+每当你阅读 JavaScript 时，你都会不可避免地看到以下术语之一：
+
+- ES3
+- ES5
+- ES6、ES7 ... ES13
+- ES2015、ES2016 ... ES2022
+- ECMAScript 2015、ECMAScript 2016 ... ECMAScript 2022
+
+**它们是什么意思呢？**
+
+它们都指的是一个标准，称为 [ECMAScript](https://www.ecma-international.org/)。
+
+ECMAScript 是 JavaScript 所基于的标准，通常缩写为 ES。
+
+除了 JavaScript，其他语言也实现了 ECMAScript，包括：
+
+- ActionScript（Flash 脚本语言），由于 Flash 于 2020 年正式停产，它正在失去生气
+- JScript（微软脚本方言），因为当时 JavaScript 仅由 Netscape 支持，浏览器大战正处于顶峰，所以 微软不得不为 Internet Explorer 构建自己的版本
+
+当然，JavaScript 是 ES 中最流行和使用最广泛的实现。
+
+**为什么取这个奇怪的名字**？Ecma International 是瑞士标准协会，负责制定国际标准。
+
+创建 JavaScript 时，它由 Netscape 和 Sun Microsystems（Java 的制造商）提供给 Ecma，他们给它命名为 ECMA-262 别名 ECMAScript。
+
+> 根据 [Wikipedia](https://en.wikipedia.org/wiki/ECMAScript) 的说法，Netscape 和 Sun Microsystems 发布的这份新闻稿可能有助于确定名称选择，其中可能包括委员会成员微软的法律和品牌问题。
+
+在 IE9 之后，微软停止将其在浏览器中的 ES 支持标记为 JScript，并开始将其称为 JavaScript。
+
+所以到 201x 为止，支持 ECMAScript 规范的唯一流行语言是 JavaScript。
+
+## 什么是 TC39？
+
+TC39 是发展 JavaScript 的委员会。
+
+TC39 的成员是涉及 JavaScript 和浏览器供应商的公司，包括 Mozilla、Google、Facebook、Apple、Microsoft 等。
+
+## ECMASCript 语法提案的批准流程
+
+每个标准版本的语法提案都必须经过 5 个阶段：
+
+- Stage 0（Strawperson）— 展示阶段
+- Stage 1（Proposal）— 征求意见阶段
+- Stage 2（Draft）— 草案阶段
+- Stage 3（Candidate）— 候选阶段
+- Stage 4（Finished）— 定案阶段
+
+当语法特性到达 Stage 4 时，该特性将随当年的版本发布，成为正式的 ECMAScript 标准。
+
+但是，JS 引擎例如 V8（Chrome 和 Node.js）或 SpiderMonkey（Firefox）会试验性地支持 Stage 4 之前的语法特性，这样开发者可以进行测试和反馈。
+
+详细内容请查阅 [The TC39 Process](https://tc39.es/process-document/)。
+
+## ES 版本
+
+我发现令人困惑的是，为什么有时 ES 版本是根据版本号而有时是根据年份来引用的，而年份恰好在数字上 -1，这增加了 JS/ES 的普遍困惑。
+
+在 ES2015 之前，ECMAScript 规范通常以其版本命名。因此 ES5 是 2009 年发布的 ECMAScript 规范更新的正式名称。
+
+**为什么会发生这种情况**？在 ES2015 诞生的过程中，名称从 ES6 更改为 ES2015，但由于这一更改时间较晚，人们仍然将其称为 ES6。
+
+这张表应该清楚一点：
+
+| 版    | 正式名字 | 发布日期      |
+| ----- | -------- | ------------- |
+| ES13  | ES2022   | 2022 年 6 月  |
+| ES12  | ES2021   | 2021 年 6 月  |
+| ES11  | ES2020   | 2020 年 6 月  |
+| ES10  | ES2019   | 2019 年 6 月  |
+| ES9   | ES2018   | 2018 年 6 月  |
+| ES8   | ES2017   | 2017 年 6 月  |
+| ES7   | ES2016   | 2016 年 6 月  |
+| ES6   | ES2015   | 2015 年 6 月  |
+| ES5.1 | ES5.1    | 2011 年 6 月  |
+| ES5   | ES5      | 2009 年 12 月 |
+| ES4   | ES4      | 弃            |
+| ES3   | ES3      | 1999 年 12 月 |
+| ES2   | ES2      | 1998 年 6 月  |
+| ES1   | ES1      | 1997 年 6 月  |
+
+ES3 至 ES5 中间有长达九年的时间没有更新，期间发布的 ES4 被弃用（至于为什么可以看最后提供的链接）。
+
+可以看到，TC39 通常会在每月的 6 月份发布 ECMAScript 标准。
+
+## ES Next
+
+ES.Next 是一个始终表示 JavaScript 的下一个版本的名称。
+
+所以在写这篇文章的时候，ES2022 已经发布了，ES.Next 就是 ES2023。
+
+## 更多资料
+
+- [从 ES4 历史做的一些不友好的揣测](https://segmentfault.com/a/1190000008550491)
+- [ECMAScript 6 会重蹈 ECMAScript 4 的覆辙吗？](https://www.zhihu.com/question/24715618/answer/34813745)
diff --git a/WTF/JSON Web Token.md b/WTF/JSON Web Token.md
new file mode 100644
index 0000000..90db2fa
--- /dev/null
+++ b/WTF/JSON Web Token.md	
@@ -0,0 +1,183 @@
+# JSON Web Token
+
+JSON Web Token（JWT）是用于为应用程序创建访问令牌（token）的标准。
+
+它是这样工作的：
+
+- 用户通常以用户名和密码的形式提供其凭据。
+- 凭据将发送到服务器进行验证。
+- 服务器生成一个令牌来验证用户身份，并将其发送给客户端。
+- 令牌保存在浏览器中（通常保存在 cookie 或 `localStorage` 中），对于后续的每个请求，客户端都会将令牌发送回服务器，以便服务器知道请求来自特定的身份。
+
+这种架构在现代 Web 应用程序中非常有效，在对用户进行身份验证后，我们对 REST 或 GraphQL API 执行 API 请求。
+
+JWT 是经过加密签名的（但不是加密的，因此在 JWT 中存储用户数据时必须使用 HTTPS），因此我们可以保证在收到它时可以信任它，因为没有任何中间人可以在不使其无效的情况下拦截和修改它或它所持有的数据。
+
+**JWT 的用途：主要用于 API 认证和服务器到服务器的授权。**
+
+> 推荐：[使用 JS 进行 API 身份验证](https://github.com/lio-zero/blog/blob/main/JavaScript/%E4%BD%BF%E7%94%A8%20JS%20%E8%BF%9B%E8%A1%8C%20API%20%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81.md)。
+
+## JWT 令牌是如何生成的？
+
+JWT 由三部分组成：**Header（头部）、Payload（负载）、Signature（签名）**。
+
+使用 Node.js，你可以使用以下代码生成令牌的第一部分：
+
+```js
+const header = { alg: 'HS256', typ: 'JWT' }
+const encodedHeader = Buffer.from(JSON.stringify(header)).toString('base64')
+```
+
+我们将签名算法设置为 `HMAC SHA256`（JWT 支持多种算法），然后从这个 JSON 编码的对象创建一个缓冲区，并使用 base64 对其进行编码。
+
+第一部分的结果是 `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9`。
+
+接下来，我们添加 payload，我们可以使用任何类型的数据对其进行自定义。有一些保留字段，包括 `iss` 和 `exp`，用于标识令牌的签发人和过期时间。
+
+你可以使用对象将自己的数据添加到令牌中：
+
+```js
+const payload = { username: 'lio' }
+```
+
+我们将这个 JSON 编码的对象转换为 Buffer，并使用 base64 对结果进行编码，就像我们之前所做的那样：
+
+```js
+const encodedPayload = Buffer.from(JSON.stringify(payload)).toString('base64')
+```
+
+在这种情况下，第二部分结果为 `eyJ1c2VybmFtZSI6ImxpbyJ9`。
+
+接下来，我们从 header 和 payload 内容中获得签名，这确保了即使我们的内容被拦截，也不会被更改，因为我们的签名将无效。为此，我们将使用 Node `crypto` 模块：
+
+```js
+const crypto = require('crypto')
+const jwtSecret = 'secretKey'
+
+const signature = crypto
+  .createHmac('sha256', jwtSecret)
+  .update(encodedHeader + '.' + encodedPayload)
+  .digest('base64')
+```
+
+我们使用 `secretKey` 密钥，并创建加密签名的 base64 编码表示。
+
+在我们的例子中，签名的值是：`vbaMqQKO16NNvbU1ttuwH1UmSKRlLMvyK/W8Xx1aV/s=`。
+
+我们几乎完成了所有工作，我们只需要通过用点（`.`）分隔来连接 header、payload 和 signature 的 3 个部分：
+
+```js
+const jwt = `${encodedHeader}.${encodedPayload}.${signature}`
+```
+
+## API 认证
+
+这可能是使用 JWT 的唯一合理方法。
+
+一个常见的场景是：你注册了一个服务，并从服务仪表板下载了一个 JWT。从现在开始，你将使用它对服务器的所有请求进行身份验证。
+
+另一个相反的用例是，当你管理 API 并且客户端连接到你时发送 JWT，并且你希望你的用户仅通过传递令牌来发送后续请求。
+
+在这种情况下，客户端需要将令牌存储在某处，**但哪里是存储令牌的最佳选择呢？**
+
+在这之前，我们需要先了解两种导致令牌被盗的常见攻击手段。
+
+## 身份验证令牌漏洞
+
+身份验证令牌可以提供比用户名和密码等永久凭据更高的安全性。但是如果令牌被盗，它可以用来访问另一个用户的帐户。
+
+有两种类型的攻击可能导致身份验证令牌被盗：
+
+- 在跨站脚本（XSS）攻击中，恶意 JavaScript 被注入到你的网站并运行。此代码可以从 `localStorage` 或 Cookie 中获取身份验证令牌，或将其发送给第三方。
+- 在跨站请求伪造（CSRF）攻击中，HTTP 请求从第三方网站发送到你的网站（通常通过在恶意网站上提交隐藏表单）。如果用户已经登录到你的网站，他们的身份验证 Cookie 将自动发送，在他们不知情的情况下代表他们发起操作。
+
+关于是否应该将身份验证令牌保存在 `localStorage` 或 Cookie 中以降低这些风险，存在很多争论。
+
+> 推荐：[什么是 XSS 攻击？](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20XSS%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)和[什么是 CSRF 攻击？](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSRF%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)
+
+## 你应该将身份验证令牌存储在哪里？
+
+存储在 `localStorage` 中的令牌不会受到 CSRF 的攻击，因为 `localStorage` 不会随每个 HTTP 请求自动发送到服务器。但它容易受到 XSS 攻击，JavaScript 可以轻松访问它们。
+
+```js
+localStorage.setItem('token', 'abc123')
+```
+
+可以使用 `HttpOnly` 标志设置 Cookie。这会阻止 JavaScript 访问 Cookie，从而保护其免受 XSS 攻击。它仍然会随每个 HTTP 请求自动发送，因此仍然容易受到 CSRF 攻击。
+
+许多文章建议，带有 `HttpOnly` 标志的 Cookie 是更安全的选项，因为虽然令牌可以使用，但它永远不会公开。
+
+```js
+document.cookie = 'token=abc123; secure; HttpOnly;'
+```
+
+然而，JavaScript 也不能用于设置带有 `HttpOnly` 标志的 Cookie。Cookie 只能由服务器设置。如果你的应用程序完全是客户端的，并且你使用 JavaScript 存储令牌，则不能使用此标志。在这种情况下，Cookie 与 `localStorage` 一样容易受到 XSS 攻击。
+
+**那么，你应该使用哪一个？**
+
+- 对于仅限客户端的应用程序，`localStorage` 实际上可能更安全，因为它不易受到 CSRF 攻击。
+- 如果你可以使用服务器端代码获取和设置令牌，那么带有 `HttpOnly` 标志的 Cookie 可能是更好的选择。
+
+> 推荐：[HTTP Cookie](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20Cookie.md)
+
+## 选择最好的 JWT 库
+
+根据你使用的语言和环境，你可以从多个库中进行选择。最受欢迎的是 [jwt.io](https://jwt.io/#libraries-io) 网站。
+
+它提供了在线 JWT 调试器，并且提供了各种流行语言的相关库：
+
+- [JST Debugger](https://jwt.io/#debugger)
+- [JWT Libraries](https://jwt.io/#libraries-io)
+
+## 不要将 JWT 作为会话令牌
+
+你不应该将 JWT 用于会话。使用常规的服务器端会话机制，因为它效率更高，更不容易暴露数据。
+
+## 什么是基于会话的身份验证，它有何不同？
+
+在基于令牌的身份验证之前，保持用户登录的一种流行方式是基于会话的身份验证。
+
+使用基于会话的身份验证时，仍会生成一个令牌来代表用户。服务器使用令牌设置一个 Cookie，该令牌会在后续每个请求中发送，就像基于令牌的身份验证一样。
+
+但是，服务器不是将令牌和相关的用户信息存储在数据库中或使其自包含，而是在内存中维护一个包含所有用户详细信息的会话。
+
+以下是一个简单示例：
+
+```js
+let sessions = {
+  la9183651jbk: {
+    username: 'abc@123.com',
+    display: 'GangTe',
+    permissions: ['admin', 'registration', 'homework']
+  },
+  ls8659183raw: {
+    username: 'xyz@987.com',
+    display: 'LinLee',
+    permissions: ['registration', 'homework']
+  }
+}
+```
+
+这种方式有几个主要缺点。
+
+对于具有许多用户的大型应用程序，在内存中保持许多会话处于活动状态会对服务器性能产生很大影响。将它们存储在数据库中，并仅在需要时访问它们，这样性能会更好。
+
+如今，一个应用程序的各个部分分布在多个服务器上也很常见，有时使用第三方服务。由于会话存储在服务器内存中，因此基于会话的身份验证需要在该服务器上运行所有内容。
+
+基于令牌的身份验证还提供了一种使用新令牌更新或刷新令牌的方法，以提高安全性。会话令牌通常在用户注销之前不会更改，这使得它们更不安全，更容易被欺骗。
+
+基于会话的身份验证仍然存在，并且对于较小的应用程序来说仍然是一种完全有效的方法。
+
+但是今天，基于令牌的身份验证是处理身份验证的标准方法，并以基于会话的身份验证无法满足的方式解决了现代 Web 应用的许多需求和挑战。
+
+## 进一步阅读
+
+- [JSON Web Token 入门教程](https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html)
+- [Introduction to JSON Web Tokens](https://jwt.io/introduction/)
+- [Learn how to use JSON Web Tokens (JWT) for Authentication](https://github.com/dwyl/learn-json-web-tokens/blob/master/README.md)
+- [Why JWTs Suck as Session Tokens](https://developer.okta.com/blog/2017/08/17/why-jwts-suck-as-session-tokens)
+- [Stop using JWT for sessions](http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/)
+- [Stop using JWT for sessions, part 2: Why your solution doesn’t work](http://cryto.net/~joepie91/blog/2016/06/19/stop-using-jwt-for-sessions-part-2-why-your-solution-doesnt-work/)
+- [Branca](https://branca.io/) 一种安全令牌的数据格式，听说比 JWT 更安全，同类项目还有 [Paseto](https://paseto.io/)
+- [JWT Common Attacks](https://blog.devgenius.io/jwt-common-attacks-b41de384113e)
+- [前端无痛刷新 Token](https://juejin.cn/post/7075348765162340383)
diff --git "a/WTF/Repo \346\211\230\347\256\241\346\234\215\345\212\241.md" "b/WTF/Repo \346\211\230\347\256\241\346\234\215\345\212\241.md"
new file mode 100644
index 0000000..6eeb0d1
--- /dev/null
+++ "b/WTF/Repo \346\211\230\347\256\241\346\234\215\345\212\241.md"	
@@ -0,0 +1,11 @@
+# Repo 托管服务
+
+有不同的存储库托管服务平台，最流行的有：[GitHub](https://github.com/)、[GitLab](https://gitlab.com/) 和 [Bitbucket](https://bitbucket.com/)。
+
+它们使用 Git 进行软件开发和版本控制的互联网托管提供商。它提供了 Git 的分布式版本控制和源代码管理功能，以及它自己的特性。
+
+## 更多资料
+
+- [GitLab docs](https://docs.gitlab.com/)
+- [GitHub Docs - Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world)
+- [How to Use Bitbucket Cloud](https://bitbucket.org/product/guides)
diff --git "a/WTF/WebP \345\233\276\345\203\217\346\240\274\345\274\217.md" "b/WTF/WebP \345\233\276\345\203\217\346\240\274\345\274\217.md"
new file mode 100644
index 0000000..3b63c3f
--- /dev/null
+++ "b/WTF/WebP \345\233\276\345\203\217\346\240\274\345\274\217.md"	
@@ -0,0 +1,75 @@
+# WebP 图像格式
+
+WebP 是 Google 开发的一种开源图像格式，它承诺生成比 JPG 和 PNG 格式更小的图像，同时生成更好看的图像。
+
+- WebP 支持透明度，如 PNG 和 GIF 图像
+- WebP 支持动画，例如 GIF 图像
+- 使用 WebP，你可以设置图像的质量比例，决定是要获得更好的质量还是更小的尺寸（就像 JPG 图像中发生的那样）
+
+所以 WebP 可以做所有 GIF、JPG 和 PNG 图像可以做的一切，以单一格式，并生成更小的图像。
+
+如果你想比较各种格式的图像的外观，可以访问 Google 提供的 [WebP 图像示例](https://developers.google.com/speed/webp/gallery)。
+
+我们要知道，WebP 并不算很新的东西，它已经存在了好几年了。
+
+## 对比其他图像格式，WebP 小了多少？
+
+生成较小图像的前提非常有趣，尤其是当你考虑到大部分网页大小取决于用户应下载的图像资源的数量和大小时。
+
+Google 发布了一项对 100 万张图像的结果的比较[研究](https://developers.google.com/speed/webp/docs/c_study)，结果如下：
+
+WebP 总体上比 JPEG 或 JPEG 2000 实现更高的压缩率。对于网页上最常见的小图片来说，文件大小最小化的收益尤其高。
+
+你应该尝试你打算提供的图像类型，并在此基础上形成你的意见。
+
+在我的测试中，无损压缩生成的 WebP 图像比 PNG 小 50%。PNG 只有在使用有损压缩时才会达到这个文件大小。
+
+## 生成 WebP 图像
+
+所有现代图形和图像编辑工具都允许你导出到 `.webp` 文件。
+
+还存在用于将图像直接转换为 WebP 的命令行工具。Google 为此提供了一套[工具](https://developers.google.cn/speed/webp/download)。
+
+`cwebp` 是一个命令行程序，用于将任何图像转换为 `webp`：
+
+```bash
+cwebp image.png -o image.webp
+```
+
+使用 `cwebp -h` 查看所有选项。
+
+## 浏览器支持
+
+[WebP 支持情况](https://caniuse.com/webp)：
+
+![WebP 支持情况](https://upload-images.jianshu.io/upload_images/18281896-651bae1111a408b1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，除了 IE，所有主流浏览器都支持 WebP。
+
+## 如何使用 WebP？
+
+有几种不同的方法可以做到这一点。
+
+当 `HTTP_ACCEPT` 请求头包含 `image/webp` 时，你可以使用服务器级的机制来提供 WebP 图像，而不是 JPG 和 PNG。
+
+第一个是最方便的，因为对你和你的网页完全透明。
+
+另一个选择是使用 [Modernizr](https://modernizr.com/) 并检查 `Modernizr.webp` 设置。
+
+如果你不需要支持 IE，一个非常方便的方法是使用 `<picture>` 标签，现在除了 IE（所有版本）之外的所有主流浏览器都支持这个标签。
+
+`<picture>` 标签通常用于响应式图像，但我们也可以将它用于 WebP。
+
+你可以指定图片列表，它们将按顺序使用。以下示例中，支持 WebP 的浏览器将使用第一张图片，如果不支持则回退到 JPG：
+
+```html
+<picture>
+  <source type="image/webp" srcset="image.webp" />
+  <img src="image.jpg" alt="一张图片" />
+</picture>
+```
+
+## 更多资料
+
+- [HTML picture 标签](https://github.com/lio-zero/blog/blob/main/HTML/HTML%20picture%20%E6%A0%87%E7%AD%BE.md)
+- [WebP，淘宝都在用的图片优化方法](https://juejin.cn/post/7039564188385017864)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 CDN\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 CDN\357\274\237.md"
new file mode 100644
index 0000000..42c282e
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 CDN\357\274\237.md"	
@@ -0,0 +1,34 @@
+# 什么是 CDN？
+
+CDN 表示内容分发网络（ContentDelivery Network）。
+
+它是一系列分布在全球各地的服务器，所有服务器都链接在一起。
+
+在帮助加快网站速度的背景下，他们的工作是分发资源（如图像、JavaScript 文件、CSS 和 HTML），以便它们在物理上合理地接近可能想要访问您的网站的每个用户，以提高连接速度并减少延迟。
+
+CDN 是终极缓存，也是在全球范围内提供内容服务的最便宜的方式。
+
+访问者永远不会访问托管您文件的实际 web 服务器，而是会访问这些 CDN 服务器，从而帮助减少负载。
+
+CDN 不仅仅是缓存数据，根据使用的 CDN 提供商，它们可以做更多的工作，包括：
+
+- **速度更快** — 更靠近用户的网络可以提高速度并减少延迟。
+- **更少的停机时间** — 如果 CDN 的一个节点发生故障，其他节点可以处理流量。
+- **更低的带宽成本** — 与从可能未针对服务大量流量进行优化的集中位置提供所有流量相比，**降低了带宽和服务器功率的成本**。
+- **更小的内容大小** — 许多 CDN 通过压缩内容并缩小 HTML、CSS 和 JS，为其服务的内容添加了额外的优化。一些甚至优化了图像，以确保根据最终用户能够看到的内容发送最佳版本。
+- **增强安全性** — 对网站的一种常见攻击称为 DDoS（分布式拒绝服务），其中一些不良行为者用数据淹没您的网站。CDN 具有内置的保护功能，可以帮助减轻这些攻击类型，从阻止传入请求到利用庞大的边缘服务器网络来适当分配负载。
+
+CDN 从源服务器获取原始资源，只要源服务器不变，它将继续为资源的本地副本提供服务：
+
+![CDN 的工作方式](https://upload-images.jianshu.io/upload_images/18281896-73ee14b26fc59173.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## CDN 提供商
+
+每个 CDN 服务器都位于不同的大陆，并且取决于 CDN 的构建方式，也位于大陆的不同部分。
+
+每个大公司都使用 CDN 服务资源，您可以使用国内或国外的提供商提供的 CDN 服务。
+
+- 国外的 CDN 提供商主要有：Cloudflare、Azure CDN、Google Cloud CDN、Akamai 和 CloudFront 等。
+- 国内的 CDN 提供商主要有：百度云、七年云存储、又拍云、腾讯云、阿里云或其他公司的服务（百度云和七牛云提供部分免费空间）。
+
+CDN 也可以通过您的 Web 主机直接集成。例如，可以使用 Netlify，它集成了一个自动 CDN，这使网站在世界各地都可以快速运行。
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 CSRF \346\224\273\345\207\273\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 CSRF \346\224\273\345\207\273\357\274\237.md"
new file mode 100644
index 0000000..a3d94e3
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 CSRF \346\224\273\345\207\273\357\274\237.md"	
@@ -0,0 +1,28 @@
+# 什么是 CSRF 攻击？
+
+> **[CSRF](https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0)（Cross-site request forgery，跨站点请求伪造）**是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。与 XXS 相比，XSS 利用的是用户对指定网站的信任，而 CSRF 利用的是网站对用户网页浏览器的信任。
+
+## CSRF 的攻击原理
+
+- 用户登录了受信任的网站，并在本地生成了 cookie。
+- 在不退出登录的情况下，访问了危险网站。
+- 危险网站会发出一个请求到受信任的网站，受信任的网站不知道请求是用户访问的还是危险网站访问的，由于浏览器会自动带上用户 cookie，所以受信任的网站会根据用户的权限处理危险网站所发出的请求，达到了模拟用户操作的目的。
+
+## CSRF 的防范
+
+- 对于 GET 的请求，我们不应对数据进行任何修改操作。
+- 请求时附带验证信息，比如**验证码**或者 `token`。
+- 对于 `cookie`，我们可以设置 `SameSite`（`Lax` 或 `Strict`）来规定浏览器不能在跨域请求中携带 Cookie，可以减少 CSRF 攻击。
+- 验证 HTTP `Referer` 字段，判断请求来源。`Referer` 指的是页面请求来源。意思是**只接受本站的请求，服务器才做响应**，如果不是，就拦截请求。
+
+## 更多资源
+
+- [理解 CSRF(跨站请求伪造)](https://github.com/pillarjs/understanding-csrf/blob/master/README_zh.md)
+- [Cross-Site Request Forgery Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
+- [HTTP Cookie](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20Cookie.md)
+- [Cookie 的 SameSite 属性](https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html)
+- [前端安全系列之二：如何防止 CSRF 攻击？](https://juejin.cn/post/6844903689702866952)
+- [安全问题：CSRF 和 XSS](https://github.com/poetries/FE-Interview-Questions/blob/master/%E5%AE%89%E5%85%A8%E9%97%AE%E9%A2%98%EF%BC%9ACSRF%E5%92%8CXSS.md)
+- [Preventing CSRF and XSRF Attacks](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/)
+- [【面试篇】寒冬求职之你必须要懂的 Web 安全](https://juejin.cn/post/6844903842635579405)
+- [第 28 题：cookie 和 token 都存放在 header 中，为什么不会劫持 token？](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/31)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 CSS-in-JS.md" "b/WTF/\344\273\200\344\271\210\346\230\257 CSS-in-JS.md"
new file mode 100644
index 0000000..0d684ee
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 CSS-in-JS.md"	
@@ -0,0 +1,61 @@
+# 什么是 CSS-in-JS？
+
+以前，Web 非常简单，CSS 甚至不存在。我们用 `table` 和 `frame` 布置页面。
+
+然后 CSS 开始出现，一段时间后，框架可以极大地帮助构建网格和布局，[Bootstrap](https://getbootstrap.com/) 和 [Foundation](https://get.foundation/) 在这方面发挥了很大的作用。
+
+诸如 SASS 和其他预处理器在很大程度上减缓了框架的采用，并更好地组织代码，BEM 和 SMACSS 等约定在使用中得到了发展，尤其是在团队中。
+
+> 推荐：[BEM 命令规范](https://github.com/lio-zero/blog/blob/main/CSS/BEM%20%E5%91%BD%E4%BB%A4%E8%A7%84%E8%8C%83.md) 和 [SASS 预处理器](https://github.com/lio-zero/blog/blob/main/CSS/SASS%20%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8.md)
+
+约定并不是万能的解决方案，而且它们很难记住，因此在过去几年中，随着 JavaScript 和构建过程在每个前端项目中的使用越来越多，CSS 逐渐融入 JavaScript（JS-in-CSS）。
+
+新工具探索了使用 CSS-in-JS 的新方法，其中一些工具取得了成功，并越来越受欢迎：
+
+- [Styled JSX](https://github.com/vercel/styled-jsx)
+- [jsxstyle](https://github.com/jsxstyle/jsxstyle)
+- [Radium](https://github.com/FormidableLabs/radium)
+- [Emotion](https://github.com/emotion-js/emotion)
+- [Styled Components](https://www.styled-components.com/)
+- [JSS](http://cssinjs.org/)
+- [Aphrodite](https://github.com/Khan/aphrodite)
+- etc
+
+你可以在 [css-in-js](https://github.com/MicheleBertoli/css-in-js) 这个仓库中找到这些库，这是一份众多 CSS in JS 技术的比较。
+
+其中最流行的工具之一是 Styled Components 和 Emotion。
+
+这意味着它是 [CSS Modules](https://github.com/css-modules/css-modules) 的继承者，是一种编写 CSS 的方法，其作用范围仅限于单个组件，而不会泄漏到页面中的任何其他元素。
+
+Styled Components 允许你在组件中编写简单的 CSS，而不用担心类名冲突。
+
+> 推荐：[使用 Styled Components 编写样式化组件](https://github.com/lio-zero/blog/blob/main/React/%E4%BD%BF%E7%94%A8%20Styled%20Components%20%E7%BC%96%E5%86%99%E6%A0%B7%E5%BC%8F%E5%8C%96%E7%BB%84%E4%BB%B6.md)。
+
+使用 CSS-in-JS 的好处：
+
+- 组件化思考 — 无需维护一堆样式表，样式直接在组件上编写。
+- 消除无用代码 — 当组件被渲染时，样式被应用，组件销毁时，样式随组件消失。
+- 范围界定 — 编写新样式不会影响到网站的其他内容，无需担心全局范围的样式受到影响。
+- 命名 — 无需考虑设置一个 ID 或类。
+- CSS 中 JavaScript 的可能性 — 在样式中使用 JS 特有的功能。
+- 代码共享 — 往往一个组件设计好后，可以在任何项目中使用。
+- 设计系统友好
+
+使用 CSS-in-JS 的缺点：
+
+- 学习曲线
+- 新的依赖
+- 挑战现状
+
+有一个不错的 [CSS-in-JS playground](https://www.cssinjsplayground.com/)，你可以在这里尝试各种流行的 CSS-in-JS 解决方案，并支持实时预览。
+
+## 进一步阅读
+
+- [What are CSS Modules and why do we need them?](https://css-tricks.com/css-modules-part-1-need/)
+- [CSS Modules](https://glenmaddern.com/articles/css-modules)
+- [awesome-css-in-js](https://github.com/tuchk4/awesome-css-in-js)
+- [CSS in JS: Benefits, Drawbacks, and Tooling](https://medium.com/object-partners/css-in-js-benefits-drawback-and-tooling-80286b03f9aa)
+- [Facebook 重构：抛弃 Sass / Less，迎接原子化 CSS 时代](https://juejin.cn/post/6917073600474415117)
+- [重新构想原子化 CSS](https://antfu.me/posts/reimagine-atomic-css-zh)
+- [Why We're Breaking Up with CSS-in-JS](https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b) — Emotion 的维护者 Sam 所在公司弃用了 CSS-in-JS 方案，引起了不小的讨论。译文可看 [「译」为什么我们正在放弃 CSS-in-JS](https://juejin.cn/post/7158712727538499598)
+- [精读《请停止 css-in-js 的行为》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/7.%E7%B2%BE%E8%AF%BB%E3%80%8A%E8%AF%B7%E5%81%9C%E6%AD%A2%20css-in-js%20%E7%9A%84%E8%A1%8C%E4%B8%BA%E3%80%8B.md)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 CSS\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 CSS\357\274\237.md"
new file mode 100644
index 0000000..86ff760
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 CSS\357\274\237.md"	
@@ -0,0 +1,25 @@
+# 什么是 CSS？
+
+CSS 代表级联样式表，包含一组规则的文件，用于控制 HTML 文档（即网页）的显示。级联意味着，当规则发生冲突时，稍后读取的规则优先于先前读取的规则。
+
+CSS 的主要职责是将表现与内容分离。网页的内容和结构由从 Web 服务器发送到您正在使用的浏览器的 HTML 决定，而 CSS 控制内容在页面上的显示方式。
+
+例如，以下一段 HTML：
+
+```html
+<p><em>CSS</em> styles</p>
+```
+
+除了段落（`<p>`）和强调（`<em>`）元素的合理默认值之外，这并没有告诉浏览器如何渲染内容。
+
+但当我的 Web 服务器向你的浏览器发送了那段 HTML 时，它还告诉它在旁边包含一些 CSS。CSS 是负责确定渲染方式，比如：
+
+- 字体
+- 文字大小和间距
+- 文字颜色
+- etc
+
+## 学习资料
+
+- [The Importance of Learning CSS](https://www.joshwcomeau.com/css/the-importance-of-learning-css/)
+- [WTF, HTML and CSS?](http://wtfhtmlcss.com/#doctype)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 Doctype\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 Doctype\357\274\237.md"
new file mode 100644
index 0000000..655b3ee
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 Doctype\357\274\237.md"	
@@ -0,0 +1,74 @@
+# 什么是 Doctype？
+
+任何 HTML 文档都必须在第一行以 Document Type Declaration（缩写为 doctype，文档类型声明）开头，它告诉浏览器页面中使用的 HTML 版本。
+
+此文档类型声明（不区分大小写）：
+
+```html
+<!DOCTYPE html>
+```
+
+它告诉浏览器这是一个 HTML5 文档。
+
+## 浏览器渲染模式
+
+通过上面这种声明，浏览器可以以**标准模式**渲染文档。
+
+如果没有它，浏览器将以**怪癖模式**（Quirks Mode）渲染页面。
+
+如果您从未听说过怪癖模式，那么您必须知道浏览器引入这种渲染模式是为了使以 "旧样式" 编写的页面与使用的新功能和标准兼容。如果没有它，随着浏览器和 HTML 的发展，旧页面会破坏它们的外观，而 Web 平台在这方面一直非常具有保护性。
+
+浏览器基本上默认为怪癖模式，除非它们识别出该页面是为**标准模式**编写的。
+
+还有一点需要注意，IE <= 10 用户要避免怪癖模式，可以使用：
+
+```html
+<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+```
+
+将其添加在页面 `<head>` 标签中，在加载任何脚本之前。
+
+## 较旧的 HTML 版本
+
+HTML 有一组奇怪的版本：
+
+- HTML（1991）
+- HTML 2.0（1995）
+- HTML 3.2（1997）
+- HTML 4.01（1999）
+- XHTML（2000）
+- HTML5（2014）
+
+严格的 HTML 4.01 文档的文档类型是:
+
+```html
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+```
+
+XHTML 类似：
+
+```html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+```
+
+他们需要 DTD（文档类型定义），因为那些旧的 HTML 版本是基于 SGML，一种定义文档结构的格式。
+
+XHTML 还要求 HTML 标签具有命名空间，如下所示：
+
+```html
+<html xmlns="http://www.w3.org/1999/xhtml"></html>
+```
+
+这些文档类型声明总是要求您将 DTD 声明保存在某个地方，因为几乎不可能记住它。另外，对于严格模式或过渡模式（不太严格）有不同的 DTD。
+
+XHTML 是一个 XML 词汇表，而 HTML4（及更低版本）是 SGML 应用。当前的 HTML，即 HTML5 在很大程度上受到 HTML4 的启发，但不是 SGML 应用，并且放弃了 XHTML 的许多严格规则。
+
+HTML5 不是基于 SGML，而是基于它自己的标准，因此不需要 DTD，我们从这个非常简单的声明中受益：
+
+```html
+<!DOCTYPE html>
+```
+
+## 更多资料
+
+[指定文档类型](https://github.com/lio-zero/blog/blob/main/HTML/%E6%8C%87%E5%AE%9A%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B.md)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 JAMstack\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 JAMstack\357\274\237.md"
new file mode 100644
index 0000000..1f77daa
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 JAMstack\357\274\237.md"	
@@ -0,0 +1,63 @@
+# 什么是 JAMstack？
+
+在过去的几年里，你肯定遇到过 [JAMstack](https://jamstack.org/) 这个术语。
+
+它定义了一组用于实现目标的技术，如 [LAMP](https://zh.wikipedia.org/wiki/LAMP) 和 [MEAN](https://zh.wikipedia.org/wiki/MEAN)（如果您熟悉的话）。
+
+## JAMstack 是什么意思？
+
+JAM 代表 JavaScript、API 以及 Markup。而 stack 译为**技术栈**，也就是构建应用时具体使用到的技术集合。
+
+它描述了创建具有以下关键特征的 Web 应用和网站的趋势：
+
+- 有一个 "dumb" 的 Web 服务器（或 CDN）发送运行应用程序所需的 HTML，通常使用静态网站生成器生成。没有生成 HTML。
+- 应用程序可以加载一些从 API 接收数据的 JavaScript。像导航这样的页面交互可能导致从 API 获取更多的数据。身份验证也是通过 API 完成的。
+
+与传统方法相比，这种新方法是一种新的方式：
+
+- 应用程序中已经提供内容的传统网站（如静态网站）
+- 基于 CMS 的网站，从后端的数据库加载信息
+- 使用任何后端语言的服务器渲染应用程序
+
+它也不同于具有服务器端渲染部分的客户端渲染网站（例如，使用 React 构建）。JAMstack 根本不涉及服务器渲染。
+
+## 使用 JAMstack 有什么优势？
+
+- **它很快**。HTML 已经生成，Web 服务器必须只为它提供服务，而不涉及任何类型的后端操作，例如从数据库中查找数据或为每个请求生成页面 HTML。它可以很容易地通过 CDN（内容分发网络）提供服务。
+- **它是有效的**。因为没有后端，所以没有瓶颈（例如，没有数据库）。
+- **它更便宜**，因为通过 CDN 提供资源比通过后端服务器提供资源的成本要低得多
+- **它更安全**，因为后端仅通过 API 公开
+
+服务器动态渲染网站应用程序的传统方法，例如 WordPress、Laravel 和 Rails，在许多情况下正被更轻的方法所取代。
+
+一个典型的 WordPress 网站可以为每个页面加载向数据库发出 30-100 个请求，具体取决于安装的插件数量。除非被大量缓存，否则当它在 [Hacker News](https://news.ycombinator.com/)、[Reddit](https://www.reddit.com/) 或任何其他大型网站上流行时，您都可以认出它，因为您会看到一个空白页面，这意味着服务器崩溃了，因为该网站无法支持所有流量。很多时候，这是一个失去的机会，因为当网站的人气达到顶峰时，它就不起作用了。
+
+提供静态 HTML 页面要比这高效得多，而且在需要时仍然可以获取动态数据，在加载 HTML 后使用单独的 API 调用。
+
+![JAMstack](https://upload-images.jianshu.io/upload_images/18281896-e5d5dcf792f97069.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 有哪些技术可用于构建 JAMstack 应用程序？
+
+- [Gatsby](https://www.gatsbyjs.org/)
+- [Next.js](https://flaviocopes.com/nextjs/)
+- [Nuxt.js](https://nuxtjs.org/)
+- [Hugo](https://gohugo.io/)
+- etc
+
+还有很多，您可以在 JAMstack 官网 [Site Generators](https://jamstack.org/generators/) 查找几乎所有很能的静态站点生成器列表。
+
+另外，它还列出了众多的 [Headless CMS](https://jamstack.org/headless-cms/)。
+
+## JAMstack 可以用来做什么？
+
+许多应用程序都可以被归入 JAMstack 的范畴，其可能性是无限的，从简单的博客到电子商务网站，再到更复杂的 Web 应用程序。
+
+## 更多资料
+
+2021 年 Jamstack 社区调查可以查看 [Jamming into the Mainstream: Jamstack Community Survey 2021](https://jamstack.org/survey/2021/)。另外，2022 的调查正在进行中。
+
+其他：
+
+- [Jamstack Training](https://jamstack.training/) — Jamstack 视频课程
+- [JAMSTACK](https://css-tricks.com/tag/jamstack/)
+- 关于 Jamstack 的对话：[Demystifying JAMstack: An Interview With Phil Hawskworth](https://www.smashingmagazine.com/2019/05/demystifying-jamstack-interview-phil-hawskworth/) 和 [JAMstack Fundamentals: What, What And How](https://www.smashingmagazine.com/2019/06/jamstack-fundamentals-what-what-how/)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 NPM\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 NPM\357\274\237.md"
new file mode 100644
index 0000000..7be7de1
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 NPM\357\274\237.md"	
@@ -0,0 +1,57 @@
+# 什么是 NPM？
+
+[npm 是由 npm, Inc](https://www.npmjs.com/) 维护的 JavaScript 编程语言的主要包管理器。NPM 是 JavaScript 运行时环境 Node.js 的默认包管理器。它既充当注册表，也提供命令行工具。它被认为[是世界上最大的软件注册中心](https://docs.npmjs.com/about-npm/)。
+
+npm 为前端代码（要在浏览器中运行的 JavaScript 包）和后端代码（Node.js 库）提供服务。
+
+虽然有一些 npm 的替代品，例如 [yarn](https://yarnpkg.com/) 或者 [pnpm](https://pnpm.io/)，但它们通常只提供命令行工具，但实际上使用 npm 作为注册表或包的源。
+
+> 安装 Node.js 时，npm 程序就安装在您的计算机上。
+
+## 什么是包？
+
+Node.js 中的包包含模块所需的所有文件。
+
+模块是可以包含在项目中的 JavaScript 库。
+
+### 下载包
+
+下载一个包非常容易。打开命令行界面，告诉 npm 下载你想要的包。
+
+```bash
+npm i upper-case
+```
+
+下载完后，npm 会创建一个名为 `node_modules` 的文件夹，将在其中放置相关依赖包。您将来在项目上安装的所有软件包都将放置在此文件夹中。
+
+### 使用包
+
+像我们使用 Node 其他模块一样，我们将下载好的包，导入后使用：
+
+```js
+const uc = require('upper-case')
+
+console.log(uc.upperCase('Hello World!'))
+```
+
+## 使用 NPM 有哪些好处？
+
+通过 npm，您可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。
+
+对于 Node 应用开发而言，您可以通过 `package.json` 文件来管理项目信息，配置脚本， 以及指明项目依赖的具体版本。
+
+> 推荐 [package.json 详解](https://github.com/lio-zero/blog/blob/master/Node/package.json%20%E8%AF%A6%E8%A7%A3.md)
+
+关于 NPM 的更多信息，你可以查阅[官方文档](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)。
+
+## 更多资料
+
+- [awesome-npm](https://github.com/sindresorhus/awesome-npm) 收集了众多的与 npm 相关的资源。
+- [awesome-micro-npm-packages](https://github.com/parro-it/awesome-micro-npm-packages)
+- [how-to-npm](https://github.com/workshopper/how-to-npm)
+- [Bundlephobia](https://bundlephobia.com/) 查找将 npm 包添加到您的捆绑包的成本
+- [npm trends](https://www.npmtrends.com/) 相同类型 npm 包的比较
+- [npmview](https://github.com/pd4d10/npmview)
+- [如何对 npm package 进行发包](https://github.com/lio-zero/blog/blob/master/Node/%E5%A6%82%E4%BD%95%E5%AF%B9%20npm%20package%20%E8%BF%9B%E8%A1%8C%E5%8F%91%E5%8C%85.md)
+- [防止 npm 安装不支持的 Node.js 版本](https://github.com/lio-zero/blog/blob/master/Node/%E9%98%B2%E6%AD%A2%20npm%20%E5%AE%89%E8%A3%85%E4%B8%8D%E6%94%AF%E6%8C%81%E7%9A%84%20Node.js%20%E7%89%88%E6%9C%AC.md)
+- [常用的 npm 命令](https://github.com/lio-zero/blog/blob/master/Node/%E5%B8%B8%E7%94%A8%E7%9A%84%20npm%20%E5%91%BD%E4%BB%A4.md)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 PWA\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 PWA\357\274\237.md"
new file mode 100644
index 0000000..fdadf4b
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 PWA\357\274\237.md"	
@@ -0,0 +1,235 @@
+# PWA
+
+[PWA](https://zh.wikipedia.org/wiki/%E6%B8%90%E8%BF%9B%E5%BC%8F%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F)（Progressive Web App，渐进式 Web 应用程序）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。
+
+PWA 是一个术语，它标识了一组旨在为基于 Web 的应用创造更好体验的技术。
+
+## 什么是 PWA？
+
+PWA 是一种基于设备支持的应用，它可以提供额外的功能，当网站是安全的（使用 HTTPS），它们可以利用 [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) 为用户提供离线支持，[推送通知](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)可以帮助重新吸引用户，几乎原生的应用外观和速度，以及资源的本地缓存，而 [Web App Manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest) 允许用户安装 PWA 和本地应用。
+
+这项技术最初由 Google 于 2015 年推出，并被证明为开发人员和用户带来了许多好处。
+
+开发人员可以使用 Web 堆栈构建几乎一流的应用，这通常比构建本地应用更容易、更便宜，尤其是在考虑构建和维护跨平台应用的影响时。
+
+开发者可以从安装阻力的减少中获益，因为在商店中添加应用并不能为 99.99% 的应用带来任何曝光度，而搜索引擎可以提供同样的好处。
+
+渐进式 Web 应用是一种使用特定技术开发的网站，使移动体验比普通的移动优化网站更愉快，在某种程度上，它几乎像原生应用一样工作，因为它提供了以下功能:
+
+- 离线支持
+- 加载速度
+- 安全的
+- 能够发出推送通知
+- 在没有 URL 栏的情况下，即可获得沉浸式的全屏用户体验
+
+移动平台对 PWA 提供了越来越多的支持，甚至当用户检测到正在访问的网站是 PWA 时，会要求用户将应用添加到主屏幕。
+
+但首先，要稍微澄清一下名称。PWA 可能是一个令人困惑的术语，一个好的定义是 Web 应用利用现代浏览器的功能（如 Web Worker 和 Web App Manifest），让其移动设备将应用**升级**为一流公民应用。
+
+## PWA 替代品
+
+在构建移动体验方面，PWA 与其他替代方案相比如何？
+
+让我们重点讨论每种方法的优缺点，看看 PWA 适合哪些地方。
+
+### 原生移动应用
+
+原生移动应用是构建移动应用最明显的方式。iOS 平台上的 Objective-C 或 Swift，Android 上的 Java/Kotlin 和 Windows Phone 上的 C#。
+
+每个平台都有自己的 UI 和 UX 约定，原生小部件提供了用户期望的体验。它们可以通过平台应用商店进行部署和分发。
+
+**原生应用的主要痛点是**，只能在一个平台上使用，而跨平台开发需要学习、掌握和更新许多不同的方法和最佳实践。因此，如果您有一个小团队，甚至您是在 3 个平台上开发应用的独立开发人员，您需要花费大量时间学习技术和环境，管理不同的库，并使用不同的工作流程（例如，iCloud 仅适用于 iOS 设备，没有 Android 版本）。
+
+### 混合应用
+
+混合应用使用 Web 技术构建，但可以部署到应用商店。中间是一个框架或某种方式来打包应用，因此可以将其发送到传统的应用商店进行审查。
+
+最常见的平台是 Phonegap、Cordova、Ionic Framework 和许多其他平台，通常您在页面上看到的是一个 WebView，它实质上加载了一个本地 web 页面。
+
+混合应用的关键方面是**一次编写、随处运行**的概念，不同的平台代码在构建时生成，您正在使用 JavaScript、HTML 和 CSS 构建应用，设备功能（麦克风、摄像头、网络、GPS...）通过 JavaScript API 公开。
+
+**构建混合应用的坏处是**，除非您做得很好，否则您可能会选择提供一个共同点，有效地创建一个在所有平台上都不是最佳的应用，因为该应用忽略了特定于平台的人机交互准则.
+
+此外，复杂视图的性能可能会受到影响。
+
+### 跨平台应用
+
+跨平台应用不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生应用。
+
+常见的有 React Native、Xamarin、Flutter 等。
+
+以 React Native 为例。
+
+React Native 通过 JavaScript API 公开移动设备的原生控件，但实际上是在创建原生应用，而不是在 WebView 中嵌入网站。
+
+它将这种方法与混合应用区分开来，即**一次学习，随处编写**，这意味着跨平台的方法是相同的，但您要创建完全独立的应用，以便在每个平台上提供良好的体验。
+
+性能与原生应用相当，因为您构建的本质上是一个原生应用，通过应用商店分发。
+
+关于以上的内容，可以阅读阮一峰老师的 [H5 手机 App 开发入门：概念篇](https://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html)和 [H5 手机 App 开发入门：技术篇](https://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html)。
+
+## PWA 功能
+
+在上一节中，您看到了 PWA 的主要竞争对手。那么 PWA 与它们相比如何，它的主要特点是什么？
+
+### 特性
+
+PWA 有一点与上述方法完全不同：**它们没有部署到应用商店**。
+
+这是一个关键的优势，因为如果您有足够的影响力，那么应用商店是有益的，这可以让您的应用走红，但除非您处于 0.001%中，否则您不会从应用商店中获得太多的好处。
+
+PWA 可以通过 SEO 发现，当用户访问具有 PWA 功能的网站时，浏览器和设备会询问用户是否想要将该应用安装到主屏幕上。这是非常重要的，因为常规的 SEO 可以应用于你的 PWA，从而减少对付费获取的依赖。
+
+没有进入商店意味意味着你不需要通过各平台的批准就可以放入用户的口袋里，并且你可以随时发布更新内容，而不需要经过各平台标准审批流程。
+
+PWA 基本上是增强型 HTML5 应用/响应式网站，最近引入的一些关键技术使一些关键功能成为可能。如果你还记得，最初的 iPhone 没有开发原生应用的选项，开发者被告知开发 HTML5 移动应用，可以安装到主屏幕上，但当时的技术还没有做好准备。
+
+PWA 可以**离线运行**。使用 Service Worker 可以让应用始终具有最新的内容，并在后台下载，并支持推送通知，以提供更多的重新参与机会。
+
+此外，可共享性为想要共享您的应用的用户提供了更好的体验，因为他们只需要一个 URL。
+
+### 好处
+
+**那么，用户和开发者为什么要关心 PWA 呢？**
+
+- PWA 更轻量。原生应用的大小可以达到 100MB 或更多，而 PWA 可以在 KB 范围内
+- 没有原生平台代码
+- 降低获取成本（说服用户安装应用比说服用户访问网站获得首次体验要困难得多）
+- 构建和发布更新所需的工作量大大减少
+- 对深度链接的支持要比普通的应用商店应用多得多
+
+### 核心概念
+
+- **响应式** — UI 与设备屏幕大小相适应
+- **接近原生应用** — 它不像一个网站，而是尽可能地成为一个应用
+- **离线支持** — 它将使用设备存储提供离线体验
+- **重新吸引用户** — 推送通知可帮助用户在安装应用后重新发现应用
+- **保持最新内容** — 应用在线后会自动更新自身和内容
+- **安全** — 通过 HTTPS，PWA 可以阻止通讯窃听，而且能保证内容不被篡改
+- **渐进式** — 它可以在任何设备上运行，即使是旧设备，即使功能较少（例如，仅作为网站，不可安装）
+- **可被安装** — 设备浏览器提示用户安装你的应用
+- **可被发现** — 搜索引擎和 SEO 优化可以提供比应用商店更多的用户
+- **可被链接** — 只需轻松地分享 URL 便可链接至 PWA 中，无需复杂的安装步骤
+
+## Service Worker
+
+PWA 的部分定义是它必须离线工作。
+
+因为允许 Web 应用离线工作的是 Service Worker，这意味着 Service Worker 是 PWA 的必需组成部分。
+
+> **Tips**：不要将 Service Worker 与 Web Worker 混淆，它们是完全不同的东西。
+
+Service Worker 是一个 JavaScript 文件，充当 Web 应用和网络之间的中间人。正因为如此，它可以提供缓存服务，并加快应用的渲染速度，改善用户体验。
+
+由于安全原因，只有 HTTPS 网站可以使用 Service Worker，这也是 PWA 必须通过 HTTPS 提供服务的部分原因。
+
+用户第一次访问应用时，设备上的 Service Worker 不可用。第一次访问时，Web Worker 被安装了，然后在后续访问网站的不同页面时，会调用这个 Service Worker。
+
+> 推荐：[Service Worker](https://github.com/lio-zero/blog/blob/main/Web%20API/Service%20Worker.md)。
+
+## App Manifest
+
+App Manifest 是一个 JSON 文件，可用于提供有关 PWA 的设备信息。
+
+您可以在所有 Web 页面标题中添加指向 manifest 的链接：
+
+```html
+<link rel="manifest" href="/manifest.webmanifest" />
+```
+
+该文件将告诉设备如何设置：
+
+- 应用的名称和简称
+- 各种尺寸的图标位置
+- 相对于域的起始 URL
+- 默认方向
+- 启动屏幕
+- 快捷方式
+- 屏幕截图
+
+例如：
+
+```json
+{
+  "name": "The Weather App",
+  "short_name": "Weather",
+  "description": "PWA 示例",
+  "icons": [
+    {
+      "src": "images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Today's agenda",
+      "url": "/today",
+      "description": "List of events planned for today"
+    },
+    {
+      "name": "New event",
+      "url": "/create/event"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "screenshot1.webp",
+      "sizes": "1280x720",
+      "type": "image/webp"
+    },
+    {
+      "src": "screenshot2.webp",
+      "sizes": "1280x720",
+      "type": "image/webp"
+    }
+  ],
+  "start_url": "/index.html?utm_source=app_manifest",
+  "orientation": "portrait",
+  "display": "standalone",
+  "background_color": "#3E4EB8",
+  "theme_color": "#2F3BA2"
+}
+```
+
+- [`screenshots`](https://developer.mozilla.org/en-US/docs/Web/Manifest/screenshots) 定义了一组用于展示应用的屏幕截图。这些图像旨在供渐进式 Web 应用商店使用。
+- [shortcut](https://developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts) 定义指向 Web 应用中关键任务或页面的快捷方式或链接数组
+
+另外，[App Manifest 是一份 W3C 工作草案](https://www.w3.org/TR/appmanifest/)。
+
+## App Shell
+
+[App Shell](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure#app_shell) 不是一种技术，而是一种设计概念，旨在首先加载和渲染 Web 应用容器，然后再加载实际内容，从而给用户一种类似于应用的良好印象。
+
+这与 Apple HIG（人机界面指南）建议使用类似于用户界面的启动画面是一样的，这是一种心理暗示，可以降低应用加载时间过长的感觉。
+
+### 缓存
+
+[App Shell](https://developers.google.com/web/updates/2015/11/app-shell) 与内容分开缓存，它的设置使得从缓存中检索 shell 构建块需要很短的时间。
+
+## 更多资料
+
+- [Learn PWA](https://web.dev/learn/pwa/)
+- [Progressive web app structure](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure)
+- [小程序鼻祖 —— 在国内逐渐消亡的 PWA 可以带给我们哪些启示？](https://juejin.cn/post/7088496764331753502)
+- [全平台的轻量体验：PWA 使用指南及应用推荐](https://zhuanlan.zhihu.com/p/362663779)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 Polyfill\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 Polyfill\357\274\237.md"
new file mode 100644
index 0000000..4c5e3d5
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 Polyfill\357\274\237.md"	
@@ -0,0 +1,24 @@
+# 什么是 Polyfill？
+
+[Polyfill](https://developer.mozilla.org/zh-CN/docs/Glossary/Polyfill) 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。
+
+例如：浏览器不支持[管道运算符](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%A6%82%E4%BD%95%E5%9C%A8%20JavaScript%20%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%AE%A1%E9%81%93%EF%BC%88%E7%AE%A1%E9%81%93%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89%EF%BC%9F.md)，Babel 提供了 [`@babel/plugin-proposal-pipeline-operator`](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 插件可以让我们在浏览器中使用它。
+
+一些不错的 Polyfill：
+
+- [fetch](https://github.com/github/fetch) `window.fetch` JavaScript polyfill。
+- [fastclick](https://github.com/ftlabs/fastclick) 可消除带有触摸 UI 的浏览器上的点击延迟 Polyfill。另外，关于移动设备浏览器 300ms 点击延迟 有不清楚的，可以阅读[移动端 300ms 点击延迟和点击穿透](https://juejin.cn/post/6844903633528553485)。
+- [Respond](https://github.com/scottjehl/Respond) 用于最小/最大宽度 CSS3 媒体查询的快速轻量级 polyfill（适用于 IE 6-8 等）
+- [es6-promise](https://github.com/stefanpenner/es6-promise) ES6 风格的 Promise 的 polyfill
+- [unfetch](https://github.com/developit/unfetch) 🐕 最小 500b 的 `fetch` polyfill。
+
+[Modernizr](https://modernizr.com/) 提供了 HTML5 特性所有可能的 polyfill 列表：[HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)。
+
+[Polyfill.io](https://polyfill.io/v3/) 是一种通过选择性地填充浏览器所需的内容来减少 Web 开发挫折的服务。Polyfill.io 读取每个请求的 User-Agent header，并返回适用于请求浏览器的 polyfill。
+
+> **Tips**：还是有必要说明一下，上面这些 Polyfill 随着 Web 的发展，大多数原生功能在浏览器中都已被很好的支持。您可能不在需要它们，这要看您是否需要兼容低版本浏览器。另外，可以在 [Can I Use](https://caniuse.com/) 上查看它们的支持情况。
+
+## 更多资料
+
+- [What is a Polyfill?](https://remysharp.com/2010/10/08/what-is-a-polyfill)（Remy Sharp，概念发明者）
+- [Polyfill 和转译器](https://zh.javascript.info/polyfills)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 REST\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 REST\357\274\237.md"
new file mode 100644
index 0000000..4071da3
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 REST\357\274\237.md"	
@@ -0,0 +1,26 @@
+# 什么是 REST？
+
+[REST](https://restfulapi.net/)（REpresentational State Transfer）是一种用于网络架构的软件设计模式。RESTful web 应用程序以其资源信息的形式公开数据。
+
+通常，这个概念用于 web 应用程序管理状态。对于大多数应用程序，读取、创建、更新和删除数据是一个共同的主题。数据被模块化成单独的表，比如 `posts`，`users`，`comments`。
+
+一个 RESTful API 通过以下方式公开了对这些数据的访问:
+
+- 资源的标识符。这称为资源的端点或 URL。
+- 服务器应该以 HTTP 方法或谓词的形式对该资源执行的操作。常见的 HTTP 方法有 `GET`、`POST`、`PUT` 和 `DELETE`。
+
+下面是一个带有 `posts` 资源的 URL 和 HTTP 方法的示例:
+
+- 读取：=> `/posts/` GET
+- 读取所有 => `/record/` GET
+- 创建：=> `/posts/new` POST
+- 更新：=> `/posts/:id` PUT
+- 删除：=> `/posts/:id` DELETE
+
+该模式的替代方案，如 [GraphQL](https://graphql.org/)
+
+## 更多资料
+
+- [RESTful API 设计指南](https://www.ruanyifeng.com/blog/2014/05/restful_api.html)
+- [What is REST — A Simple Explanation for Beginners, Part 1: Introduction](https://medium.com/extend/what-is-rest-a-simple-explanation-for-beginners-part-1-introduction-b4a072f8740f)
+- [What is REST — A Simple Explanation for Beginners, Part 2: REST Constraints](https://medium.com/@shifrb/what-is-rest-a-simple-explanation-for-beginners-part-2-rest-constraints-129a4b69a582)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 RFC\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 RFC\357\274\237.md"
new file mode 100644
index 0000000..2f95d96
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 RFC\357\274\237.md"	
@@ -0,0 +1,27 @@
+# 什么是 RFC？
+
+[RFC](https://zh.wikipedia.org/wiki/RFC)（Request for Comments）代表意见征求。
+
+现在，你可能在各种环境中使用 RFC。但从传统意义上说，我们所说的互联网上的 RFC 是指由工程师和计算机科学家撰写的出版物，面向互联网领域的其他专业人士。
+
+RFC 有着悠久的历史，可以追溯到 1969 年的 [ARPANET](https://zh.wikipedia.org/wiki/ARPANET) 时代。互联网就是这样创建的，RFC 是讨论的起点，或者是人们用来实现实际软件的协议实现细节。
+
+RFC 这个名字鼓励了社区围绕这些最初以印刷形式传播的论文进行讨论。
+
+如今，在被添加为正式 RFC 之前，RFC 需要经历各种步骤，这可能需要数月或数年的讨论。这是因为今天的 RFC 一旦发布，就不能再更改了。整个过程由互联网工程任务组 [IETF](https://zh.wikipedia.org/wiki/%E4%BA%92%E8%81%94%E7%BD%91%E5%B7%A5%E7%A8%8B%E4%BB%BB%E5%8A%A1%E7%BB%84) 管理。
+
+对 RFC 文档的修订需要作为独立的 RFC 发布，并且较旧的 RFC 被标记为被那些较新的修订所取代。其他 RFC 补充了旧 RFC 指定的内容。
+
+例如，1992 年的 RFC 1349，标题为 **Type of Service in the Internet Protocol Suite**，在 1998 年被 RFC 2474 淘汰，标题为 **Definition of the Differentiated Services Field (DS Field) in the IPv4 and IPv6 Headers**。
+
+以下是一些非常著名的 RFC 文档，非常值得一读。它们是互联网的基础：
+
+- [RFC 791：IP](https://tools.ietf.org/html/rfc791)
+- [RFC 793：TCP](https://tools.ietf.org/html/rfc793)
+- [RFC 1034：DNS](https://tools.ietf.org/html/rfc1034)
+- [RFC 4291：IPv6](https://tools.ietf.org/html/rfc4291)
+- [RFC 6749：OAuth 2.0](https://tools.ietf.org/html/rfc6749)
+
+其他一些 RFC 技术性较差，如 [RFC 1855 Netiquette 指南](https://tools.ietf.org/html/rfc1855)，还有一些只是工程师们为工程师们开的有趣玩笑，如 [RFC 2324](https://tools.ietf.org/html/rfc2324)，超文本咖啡壶控制协议。
+
+总而言之，RFC 是经过严格讨论和技术验证后添加到 IETF 认可的官方协议列表中的技术文件，并且作为标准，它们可以由软件供应商实施。
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 Redis\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 Redis\357\274\237.md"
new file mode 100644
index 0000000..f5eacd3
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 Redis\357\274\237.md"	
@@ -0,0 +1,34 @@
+# 什么是 Redis？
+
+[Redis](https://redis.io/) 是一款了不起的开源软件，可以满足 Web 应用程序中的各种需求。
+
+它是一个 NoSQL 数据库，以**键/值**形式存储数据。它可以与任何编程语言一起使用，因为它不是特定于 JavaScript 的技术，而是用 C 编写的。
+
+我们可以存储值并将其与键关联，然后再检索它们。
+
+键不仅包含字符串，还可以包含哈希、集合、列表和排序集。
+
+**高性能**是由其主要特征之一，它是一个内存数据库。数据在内存中保存、存储和访问，而不是写入数据库。
+
+大多数数据库将数据存储在磁盘上，并通过在内存中保存缓存集来进行优化。
+
+Redis 做的恰恰相反，它将数据保存在内存中。
+
+默认情况下，Redis 将存储的数据集的快照保存到磁盘，您可以配置此操作的详细信息以及数据存储的位置。
+
+Redis 是我最喜欢的工具之一，因为它具有灵活性。您在如何存储和管理数据存储方面有很大的自由，并且可以根据您的需要以多种不同的方式使用它。
+
+它是一个 NoSQL 数据库，这意味着与 PostgreSQL 或其他基于 SQL 和模式的数据库相比，它非常灵活。
+
+它通常用作缓存存储机制，但也用作消息代理，一种在不同进程和应用程序之间进行通信的方式。
+
+## 更多资料
+
+以下是一份备忘但和面试题集：
+
+- [Redis Cheat Sheet](https://lzone.de/cheat-sheet/Redis)
+- [Redis Cheat Sheet](https://simplecheatsheet.com/tag/redis-cheat-sheet/)
+- [GitHub](https://gist.github.com/LeCoupa/1596b8f359ad8812c7271b5322c30946)
+- [Redis Interview Questions from Javapoint](https://www.javatpoint.com/redis-interview-questions-and-answers)
+- [Redis Interview Questions from Wisdomjobs](https://www.wisdomjobs.com/e-university/redis-interview-questions-answers.html)
+- [Redis Interview Questions from Career Guru](https://career.guru99.com/top-10-redis-interview-questions/)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 Serverless\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 Serverless\357\274\237.md"
new file mode 100644
index 0000000..6b459da
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 Serverless\357\274\237.md"	
@@ -0,0 +1,37 @@
+# 什么是 Serverless？
+
+Serverless 是一种**无服务器架构**，它标识了一种特定的运行程序的方式，不涉及管理你自己的服务器。
+
+你创建一个函数，将它放在云服务器的某个位置，然后你所拥有的就是一个要调用的 URL。
+
+当你调用该 URL 时，函数将被执行。
+
+其他人管理服务器、扩展和安全。不需要担心内核更新或移动到你的 Linux 发行版的下一个 LTS 版本。
+
+从定价模型来看，Serverless 也非常方便。传统上，你可能会每月租用一台 VPS（虚拟专用服务器），并按月支付费用，不管你的实际使用情况。
+
+如果由于有人在受欢迎的地方分享了你的网站而导致用户激增，那么除非你升级到更大的服务器，否则服务器可能无法满足所有请求。
+
+使用 Serverless，你需要为请求付费，而不是为服务器付费。如果没有人使用你的服务，你无需支付任何费用。如果有 10 万人一起跳转到你的网站，你的功能就会扩大，因为为你管理功能的公司已经具备了处理流量的所有要素，并自动将更多资源投入到你的功能中。你为使用的资源付费，而不是为将来可能使用的某些资源付费。
+
+如果操作得当，从心理角度来看，这对独立开发项目的开发人员来说也是一种解放。你不负责为应用提供动力的服务器，因此你不会 24/7 全天候待命以修复可能发生的任何问题。你不必是一个系统管理员或 devops 专家来运行你的应用。
+
+**听起来很梦幻，有哪些陷阱？**
+
+首先，Serverless 仍处于早期的阶段。所有参与者都有不同的实现方式，围绕它的工具在质量上也各不相同。
+
+在定价方面，如果你有一个可预测的流量，并且你可以以更低的价格购买服务器，例如通过在阿里云上预订实例，那么这对你可能没有意义。
+
+你也不能控制服务器，这意味着你必须依赖可用的基础设施进行日志记录、监视和调试，而且很难在本地重新生成你的设置。
+
+## 更多资料
+
+以上仅粗略介绍了 Serverless，以下提供一些链接供大家学习：
+
+- [frontend-focus/Serverless](https://github.com/lio-zero/frontend-focus#serverless) — 一份 Serverless 精彩列表
+- [精读《Serverless 给前端带来了什么》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/94.%E7%B2%BE%E8%AF%BB%E3%80%8AServerless%20%E7%BB%99%E5%89%8D%E7%AB%AF%E5%B8%A6%E6%9D%A5%E4%BA%86%E4%BB%80%E4%B9%88%E3%80%8B.md)
+- [Serverless 初探](https://cloud.tencent.com/developer/article/1005537)
+- [Serverless（无服务）基础知识](https://juejin.cn/post/6844903904224903181)
+- [探索 Serverless 中的前端开发模式](https://juejin.cn/post/6844903844745330695)
+- [你学 BFF 和 Serverless 了吗](https://juejin.cn/post/6844904185427673095)
+- [Building an API using Serverless framework](https://awstip.com/building-an-api-using-serverless-framework-cbc1e8912806)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 XSS \346\224\273\345\207\273\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 XSS \346\224\273\345\207\273\357\274\237.md"
new file mode 100644
index 0000000..5726dd9
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 XSS \346\224\273\345\207\273\357\274\237.md"	
@@ -0,0 +1,208 @@
+# 什么是 XSS 攻击？
+
+> [XSS](https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC)（Cross Site Scripting）是跨站脚本攻击。它是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及用户端脚本语言。
+
+## XSS 是前端问题还是后端问题？
+
+两者都是。这是一个涉及前端和后端的网站架构问题。
+
+## XSS 攻击原理
+
+在 XSS 攻击中，恶意代码会被注入你的网站，然后被执行。例如：当注入具有渲染完整标签的属性的字符串时是可能的（如 `Element.innerHTML` 和 `Element.outerHTML`），而不仅仅是文本（如 `Node.textContent` 和 `Element.innerText`）。
+
+不过，有一个内置的保护措施。
+
+仅仅注入一个 `script` 标签不会让你受到攻击，因为你注入的 DOM 部分已经被解析并运行了。
+
+```js
+// 这行不通
+const div = document.querySelector('#app')
+div.innerHTML = '<script>alert("XSS 攻击")</script>'
+```
+
+但是，稍后运行的 JavaScript 将继续运行（不是立刻执行的代码）。
+
+在此示例中，我们尝试从无效来源加载图像。当它失败时，`onerror` 事件会运行一些恶意 JavaScript。
+
+```js
+// 这将运行
+div.innerHTML = `<img src="/path/to" onerror="alert('XSS 攻击')">`
+```
+
+在这种情况下，它只是在提醒一条消息。但在真实的场景中，代码可能会从我们的网站上抓取敏感数据，并将其发送给第三方来源。
+
+链接是另一个潜在的攻击媒介。如果 `href` 或 `src` 属性是从第三方数据中设置的，则有恶意的用户可以在 URL 前加上 `javascript:` 或 `data:text/html`，并在用户单击链接或元素加载时运行代码。
+
+```js
+div.innerHTML = `<a href="javascript:alert('另一个 XSS 攻击')">点我有惊喜</a>`
+```
+
+这些攻击方式不需要你做任何的登录认证，只是通过简单、合法的操作，向你的页面注入脚本。
+
+## XSS 的攻击方式
+
+- 反射型 XSS
+- 存储型 XSS
+- DOM 型 XSS
+
+这里不过多介绍，关于 XSS 攻击方式可以查看最后附加的链接，我们重点来看看如何防范 XSS 攻击。
+
+## XSS 防范措施
+
+这里，我们介绍几种防范措施：
+
+- 编码
+- 验证
+- CSP
+
+### HTML 转义特殊字符
+
+进行编码以转义数据。这样做，浏览器将不会解析 JavaScript，因为例如 `<script>` 将被编码为 `&lt;script&gt;`。
+
+```js
+const escapeHTML = function (handleString) {
+  return handleString
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/ /g, '&nbsp;')
+    .replace(/\'/g, '&#39;')
+    .replace(/\"/g, '&quot;')
+}
+
+escapeHTML('<script>alert("xss")</script>') // '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
+```
+
+以上是一个简单的 HTML 转义函数示例，它对一些特殊字符转义。
+
+它并不包含所有需要转义的内容，你可以使用 [DOMPurify](https://github.com/cure53/DOMPurify) 代替这段代码，它是一个专业的 HTML 转义库，支持转义所有可能的字符。
+
+作为一般规则，应始终进行编码。
+
+### 使用 XSS 库针对用户输入源过滤，设置标签白名单
+
+你可以使用黑名单或白名单策略进行验证。不同之处在于：
+
+- 使用黑名单可以决定要禁止哪些标签
+- 使用白名单可以决定允许哪些标签
+
+白名单更安全，因为黑名单容易出错、复杂且不具有前瞻性。
+
+这里，我们使用白名单指定的配置对不受信任的 HTML 进行清理（以防止 XSS），这里用到 [jsxss](http://jsxss.com/) 库：
+
+```js
+import xss from 'xss'
+const html = xss('<script>alert("xss")</script>')
+
+console.log(html)
+```
+
+### Cookie 设置 HttpOnly
+
+在 HTTP 的响应头中设置 `set-cookie: httpOnly` 字段，让浏览器知道不能通过 `document.cookie` 的方式获取到 Cookie 内容。
+
+例如，以下使用 Node.js Express 框架的 `express-session` 中间件来设置 `HttpOnly` 属性。
+
+```js
+const express = require('express')
+const session = require('express-session')
+
+const app = express()
+
+app.use(
+  session({
+    name: 'session',
+    secret: 'my secret',
+    resave: false,
+    saveUninitialized: true,
+    cookie: {
+      httpOnly: true,
+      secure: true
+    }
+  })
+)
+
+app.listen(3000, () => {
+  console.log('Server running on port 3000')
+})
+```
+
+在这里，我们使用了 `session` 中间件来启用会话。我们通过在 Cookie 配置中添加 `httpOnly: true` 和 `secure: true` 来设置 `HttpOnly` 和 `secure` 属性。
+
+需要注意的是，`secure` 属性表示只能在 HTTPS 上传输 Cookie, 你需要在你的网站上部署 HTTPS 才能使用它。
+
+虽然避免了攻击者直接获取到 Cookie，但是攻击者仍然可以在页面内发起别的请求，直接篡改用户的信息。我们可以配合 token 或者验证码的形式来防止这种情况的发生。而这两种相比，验证码的安全性会更高一些。
+
+> 推荐：[HTTP Cookie](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20Cookie.md)
+
+## 设置 CSP 安全策略
+
+> 内容安全策略（[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)，Content Security Policy）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS 和数据注入等。
+
+启用 CSP 的方式有 2 种。
+
+- 添加 `meta` 标签 `http-equive`
+
+```html
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self'; img-src https://*; child-src 'none';"
+/>
+```
+
+- 在 HTTP 响应头中设置 `Content-Security-Policy` 字段。
+
+```http
+Content-Security-Policy: default-src 'self'
+```
+
+这会告诉浏览器只允许加载来自当前网站的资源。
+
+还可以设置更细粒度的策略，如指定允许脚本加载的域名，或者禁止使用 `eval` 等。
+
+## 其他的攻击方式
+
+除了本文所讲的 XSS 攻击外，还有：
+
+- [CSRF 攻击](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20CSRF%20%E6%94%BB%E5%87%BB%EF%BC%9F.md) — 通过伪装来自可信来源的请求来实施恶意操作。
+- SQL 注入攻击 — 通过插入恶意代码来破坏数据库。
+- DDoS 攻击 — 通过利用大量请求来使网站瘫痪。
+- 上传文件漏洞 — 通过上传恶意文件来获取服务器权限。
+- DNS 查询攻击 — 通过欺骗 DNS 服务器来重定向流量到恶意网站。
+- 会话劫持 — 通过盗用用户的会话标识来获取敏感信息。
+- 钓鱼攻击 — 通过钓鱼链接和恶意网站来窃取用户数据。
+- 命令注入攻击 — 通过插入恶意代码来执行系统命令。
+- 文件包含漏洞 — 通过利用文件包含功能来访问系统文件。
+- 密码破解攻击 — 通过暴力猜测和字典攻击来破解密码。
+
+这些攻击方式都有不同的防御方法，需要综合考虑并采取适当的措施来防御。
+
+## 总结
+
+- 合适的 HTML 转义可以有效避免 XSS 漏洞，阻止浏览器将用户输入解析为实际 HTML，因此不会执行脚本。
+- 对于不受信任的输入字段，限制其输入长度。
+- 如果需要创建一个元素，请使用 `document.createTextNode()`。
+- 如果需要向 HTML 标签添加属性，请使用 `setAttribute()` 方法。
+- 如果需要向 URL 添加内容，请使用 `window.encodeURIComponent()` 方法。
+- 如果需要向 HTML 元素添加内容，请使用 `textContent` 属性而不是 `innerHTML`，这样可以阻止浏览器通过 HTML 解析器运行字符串，而 HTML 解析器将在其中执行脚本。
+- 针对用户输入源和不可信数据源必须进行过滤和校验。如 `<script>`、`<img>`、`<a>` 等标签要进行过滤。
+- 在进行事件绑定时，应该避免使用一些可能被滥用的事件（如 `onLoad`），并且使用 `addEventListener()` 进行事件绑定会更安全，不要使用 HTML 元素的属性来进行事件绑定（如 `onclick`），因为这样可能会有潜在的安全隐患。最后，还应该确保事件处理程序是可信的。
+- 避免拼接 HTML，采用比较成熟的渲染框架，如 Vue/React 等。
+- 通过 CSP 安全策略和其他 HTTP 响应头的设置（如 `X-XSS-Protection` 和 `X-Content-Type-Options`）可以有效防止 XSS 攻击，但是需要注意它们可能会导致其他问题。
+- 为 Cookie 设置 `httpOnly` 来禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie。
+- 使用验证码可以防止脚本冒充用户提交危险操作，但是需要考虑可能的绕过方式，例如 OCR。
+- 使用 XSS 攻击字符串和自动扫描工具寻找潜在的 XSS 漏洞，同时应该确保测试用例是最新的，并且覆盖了所有可能的输入类型和输出场景。
+- 通过使用安全的 API 来防御 XSS 攻击，例如 [DOMPurify](https://github.com/cure53/DOMPurify)。
+
+## 更多资料
+
+- [前端安全系列（一）：如何防止 XSS 攻击？](https://tech.meituan.com/2018/09/27/fe-security.html)
+- [web 安全之 XSS 攻击原理及防范](https://www.cnblogs.com/tugenhua0707/p/10909284.html)
+- [Cross-site Scripting (XSS)](https://www.acunetix.com/websitesecurity/cross-site-scripting/)
+- XSS 攻击脑图：[xss virus 1.0](https://raw.githubusercontent.com/phith0n/Mind-Map/master/xss%20virus%201.0.png)、[XSS 脑图](https://raw.githubusercontent.com/phith0n/Mind-Map/master/XSS%E8%84%91%E5%9B%BE.png) 和 [XSS2](https://raw.githubusercontent.com/phith0n/Mind-Map/master/XSS2.png)
+- [5 ways to prevent code injection in JavaScript and Node.js](https://snyk.io/blog/5-ways-to-prevent-code-injection-in-javascript-and-node-js/)
+- [XSS 前端防火墙 —— 内联事件拦截](http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-1/)
+- [XSS 前端防火墙 —— 可疑模块拦截](http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-2/)
+- [XSS 前端防火墙 —— 无懈可击的钩子](http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-3/)
+- [XSS 前端防火墙 —— 天衣无缝的防护](http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-4/)
+- [XSS 前端防火墙 —— 整装待发](http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-5/)
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 YAML\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 YAML\357\274\237.md"
new file mode 100644
index 0000000..7ce934b
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 YAML\357\274\237.md"	
@@ -0,0 +1,140 @@
+# 什么是 YAML？
+
+> YAML 是 "YAML Ain't a Markup Language"（YAML 不是一种标记语言）的递归缩写。在开发的这种语言时，YAML 的意思其实是："Yet Another Markup Language"（仍是一种标记语言），但为了强调这种语言以数据做为中心，而不是以标记语言为重点，而用反向缩略语重命名。
+
+[官网](https://yaml.org/)原文是这样解释的：
+
+> YAML is a human-friendly data serialization language for all programming languages.
+>
+> 翻译：YAML 是一种适用于所有编程语言的人性化数据序列化语言。
+
+您可以将数据序列化视为将结构化数据集移动到某些编程语言中可用对象的过程。
+
+## 数据序列化语言的快速比较
+
+JSON 和 XML 是您可能熟悉的另外两种序列化语言。YAML 类似于 JSON 和 XML，但自称更具可读性。让我们看一个例子。
+
+假设我们想在一个 `posts` 数组中表示两篇博客文章。每个帖子都将包含以下属性：
+
+- `title`（字符串）
+- `tags`（字符串数组）
+- `body`（字符串，格式为 markdown）
+
+### XML
+
+使用占位符内容时，此帖子数组在使用 XML 时可能与以下内容类似：
+
+```xml
+<posts>
+  <post>
+    <title>xxx</title>
+    <tags>
+      <tag>xxx</tag>
+      <tag>xxx</tag>
+      <tag>xxx</tag>
+    </tags>
+    <body>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quidem at, suscipit quo ullam
+      quaerat vitae perspiciatis aliquid delectus, quas mollitia, unde consequuntur commodi
+      cupiditate officia natus? Quis, fugiat consectetur.
+    </body>
+  </post>
+  <post>
+    <title>xxx</title>
+    <tags>
+      <tag>xxx</tag>
+      <tag>xxx</tag>
+      <tag>xxx</tag>
+    </tags>
+    <body>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quidem at, suscipit quo ullam
+      quaerat vitae perspiciatis aliquid delectus, quas mollitia, unde consequuntur commodi
+      cupiditate officia natus? Quis, fugiat consectetur.
+    </body>
+  </post>
+</posts>
+```
+
+结构明显且僵硬。它具有 HTML 的类似，但它很冗长。例如，注意某个标签比标签本身需要更多字符。
+
+### JSON
+
+这是使用 JSON 构建相同内容时的样子：
+
+```json
+{
+  "posts": [
+    {
+      "title": "xxx",
+      "tags": ["xxx", "xxx", "xxx"],
+      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quidem at, suscipit quo ullam quaerat vitae perspiciatis aliquid delectus, quas mollitia, unde consequuntur commodi cupiditate officia natus? Quis, fugiat consectetur."
+    },
+    {
+      "title": "xxx",
+      "tags": ["xxx", "xxx", "xxx"],
+      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quidem at, suscipit quo ullam quaerat vitae perspiciatis aliquid delectus, quas mollitia, unde consequuntur commodi cupiditate officia natus? Quis, fugiat consectetur."
+    }
+  ]
+}
+```
+
+在某些情况下，这可能更具可读性，`tags` 是一个简洁而明显的数组，而在其他情况下则更加困难，例如 `body`，因为 JSON 不适合多行字符串。
+
+### YAML
+
+现在让我们看一下 YAML 中的相同数据：
+
+```yaml
+posts:
+  - title: xxx
+    tags:
+      - xxx
+      - xxx
+      - xxx
+    body: |-
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quidem at, suscipit quo ullam
+      quaerat vitae perspiciatis aliquid delectus, quas mollitia, unde consequuntur commodi
+      cupiditate officia natus? Quis, fugiat consectetur.
+  - title: xxx
+    tags:
+      - xxx
+      - xxx
+      - xxx
+    body: |-
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quidem at, suscipit quo ullam
+      quaerat vitae perspiciatis aliquid delectus, quas mollitia, unde consequuntur commodi
+      cupiditate officia natus? Quis, fugiat consectetur.
+```
+
+可以看到，非常简洁。
+
+注意 YAML 的以下特征：
+
+- 我们并不（总是）需要引号（在某些情况下，引号是必要的）。
+- 包装文本很简单（`body` 可读性强）。
+- 我们只需要几个有趣的字符来表示我们正在处理的对象的类型，比如一个连字符（`-`）意味着我们正在处理一个数组。
+
+## YAML 的优劣
+
+YAML 已经在很多地方流行起来，因为它与 JSON 和 XML 等替代方案相比可读性很强。和 Markdown 一样，它也意味着读写起来又快又容易。
+
+但在处理深度嵌套的结构时，YAML 显的很麻烦。因为 YAML 依赖于结构的缩进，当嵌套多层时很容易丢失。
+
+随着复杂性的增加，JSON 和 XML 等语言的僵化开始显得更受欢迎。
+
+## 何时使用 YAML
+
+正是出于这些原因，我更倾向于支持 YAML：
+
+- 相对扁平的对象。
+- 将手动编辑的文件（当数据结构要以编程方式操作时，我更倾向于使用 JSON）。
+
+## JavaScript 相关工具
+
+- [YAML Checker](https://yamlchecker.com/) 提供了一种快速简便的方法来验证 YAML。
+- [yaml](https://github.com/eemeli/yaml) 用于 YAML 的 JavaScript 解析器和字符串生成器
+- [js-yaml](https://github.com/nodeca/js-yaml) JavaScript YAML 解析器和转储器。
+
+## 最后
+
+各种编程语言的 YAML 用法可以查阅[官网](https://yaml.org/)，教程可以阅读阮一峰老师的 [YAML 语言教程](https://www.ruanyifeng.com/blog/2016/07/yaml.html)。
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257 pnpm\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257 pnpm\357\274\237.md"
new file mode 100644
index 0000000..28e284e
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257 pnpm\357\274\237.md"	
@@ -0,0 +1,67 @@
+# 什么是 pnpm？
+
+[pnpm](https://pnpm.io/)（Performant NPM，高性能的 npm）是一个新的包管理器，它提出了另一种价值主张，将库代码存储集中到一个中心位置，并将其与你所从事的所有项目共享。
+
+它基本上是 npm 的替代品，这意味着一旦安装了它，就可以调用 `pnpm install` 来下载项目依赖项。
+
+如果你有 10 个使用 Vue 的项目，在同一版本中，pnpm 将安装一次，然后在所有其他项目中引用第一次安装。
+
+这也意味着，与使用标准 npm 过程下载资源相比，项目初始化部分花费的时间要少得多。即使 npm 缓存了包，速度也会更快，因为 pnpm 会硬链接到中央本地存储库，而 npm 会从缓存中复制包。
+
+使用 npm 安装 pnpm：
+
+```bash
+npm i -g pnpm
+```
+
+然后，作为 pnpm 的替代品，你可以使用所有 npm 命令：
+
+```bash
+pnpm i vue
+pnpm update vue
+pnpm uni vue
+# ...
+```
+
+pnpm 在那些需要维护大量具有相同依赖项的项目中尤其受欢迎。
+
+除了 npm 常用命令外，pnpm 还提供了一些实用程序，包括 [`pnpm recursive`](https://pnpm.io/cli/recursive)，用于在文件夹中的所有项目中运行相同的命令。例如，你可以通过运行 `pnpm recursive install` 来初始化存储在当前文件夹中的 100 个项目。
+
+如果你使用 npx，这是一种方便（也是推荐）的方式来运行诸如 `create-vue` 之类的实用程序，那么你将通过使用 pnpm 附带的 pnpx 命令获得 pnpm 的好处：
+
+```bash
+pnpx create-react-app my-cool-new-app
+```
+
+## 软件包安装在哪里？
+
+![pnpm 的优势](https://upload-images.jianshu.io/upload_images/18281896-d70622a859489140.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+上图来自官网，展示了 pnpm 的所创建非扁平化的 `node_modules` 文件夹，也告诉我们软件包安装的具体安装位置。
+
+所有 npm 包都安装在全局目录 `~/.pnpm-store/v3/files` 下（其中 `~` 表示你的主文件夹）。
+
+关于该工具还有许多更高级的知识需要学习，但我希望这有助于你开始使用 pnpm！（你可以在最后提供的资料中学习到它们）
+
+## 你应该转而使用 pnpm 吗？
+
+这里有几点可以供你参考：
+
+- 磁盘空间不足
+- 同一仓库管理多个项目（monorepo）
+
+否则，你可以继续使用 npm 或 yarn。
+
+## 最后
+
+遇到问题无法解决，建议看看官网的 [PNPM FAQ](https://pnpm.io/faq) 或 [GitHub Issus](https://github.com/pnpm/pnpm/issues)。
+
+## 更多资料
+
+更加详细的内容可以阅读以下文章：
+
+- [关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?](https://juejin.cn/post/6932046455733485575)
+- [pnpm 是凭什么对 npm 和 yarn 降维打击的](https://juejin.cn/post/7127295203177676837)
+- [包管理工具的演进](https://mp.weixin.qq.com/s/beP1bxgbTT1Z91KS3svDvw)
+- [精读《pnpm》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/253.%E7%B2%BE%E8%AF%BB%E3%80%8Apnpm%E3%80%8B.md)
+- [pnpm 社区](https://pnpm.io/zh/community/articles) — pnpm 社区整理了众多文章、视频、工具等内容。
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257\345\214\205\347\256\241\347\220\206\345\231\250\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257\345\214\205\347\256\241\347\220\206\345\231\250\357\274\237.md"
new file mode 100644
index 0000000..c94ab0b
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257\345\214\205\347\256\241\347\220\206\345\231\250\357\274\237.md"
@@ -0,0 +1,13 @@
+# 什么是包管理器？
+
+包管理器允许您管理项目正常工作所需的依赖项（您或其他人编写的外部代码）。
+
+包管理器是分布式软件的集合。它是一个巨大的插件库，不是环境或编程语言的原生代码库，而是在其上提供一些功能。
+
+例如，考虑像 [Lodash](https://github.com/lodash/lodash) 这样的 JavaScript 库。它为 JavaScript 编程语言提供了一组实用程序。例如，它的 [`last`](https://lodash.com/docs#last/) 方法返回数组的最后一个元素。默认情况下，JavaScript 不提供这种功能。我可以编写自己的函数来处理提取数组的最后一个元素，也可以安装 Lodash 库来处理该功能。
+
+但软件包可能要复杂得多。例如，服务器端语言可能具有处理应用程序用户身份验证的包。
+
+使用维护良好的分布式软件包的一个好处是，它们得到了社区的支持和测试。这意味着您可以获取可靠、稳定且可以正常工作的代码，并为您的项目编写更少的代码。
+
+包管理器通常与**注册表**或包所在的位置配合使用。它们可以由同一个提供者支持，也可以分开。例如，对于 JavaScript，NPM 既是包管理器（命令行工具）也是注册表。但是还有其他 JavaScript 包管理器，如 [Yarn](https://yarnpkg.com/)、[PNPM](https://pnpm.io/)，它们只处理命令行部分，但使用 NPM 作为它们安装的包的源（注册表）。
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257\345\215\225\344\270\200\350\201\214\350\264\243\345\216\237\345\210\231\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257\345\215\225\344\270\200\350\201\214\350\264\243\345\216\237\345\210\231\357\274\237.md"
new file mode 100644
index 0000000..c2d9308
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257\345\215\225\344\270\200\350\201\214\350\264\243\345\216\237\345\210\231\357\274\237.md"
@@ -0,0 +1,11 @@
+# 什么是单一职责原则？
+
+单一职责原则（SRP：Single responsibility principle）在某种程度上是不言自明的。在编程中，所有东西，例如类、函数、模块、插件，都应该做一件事。
+
+这种方法的一些好处包括：
+
+- 测试具有主要目的的代码更容易，使其更有可能是可靠和稳定的。
+- 如果多个职责合并在一起，其中一项需要改变，则更有可能打破其他职责。通过保持功能和职责分离，它增加了更大系统中其他部分的稳定性。
+- 新开发人员通常更容易跳入代码并了解代码在做什么。但是，采用这种方法需要权衡取舍，你可能会为任何给定的代码引入更多的依赖关系，这也会增加复杂性。
+
+因为这个想法是让代码专注于一件事，所以我经常将这个原则描述为一段代码应该做一件事并做好。之所以这么说，是因为我发现通过将代码分解为单独的职责，生成的代码应该比将职责合并时更好，更可靠、更稳定、更容易阅读和理解。
diff --git "a/WTF/\344\273\200\344\271\210\346\230\257\347\253\257\345\217\243\357\274\237.md" "b/WTF/\344\273\200\344\271\210\346\230\257\347\253\257\345\217\243\357\274\237.md"
new file mode 100644
index 0000000..ee9ea55
--- /dev/null
+++ "b/WTF/\344\273\200\344\271\210\346\230\257\347\253\257\345\217\243\357\274\237.md"
@@ -0,0 +1,22 @@
+# 什么是端口？
+
+在发出网络请求时，您使用 IP 地址或主机名和端口。
+
+例如：
+
+- `http://localhost:8080`（端口 8080）
+- `ftp://127.0.0.1:29392`（端口 29392）
+
+## 什么是端口?
+
+它是一种允许多个应用在同一台计算机上，使用同一协议进行响应的技术。
+
+例如，我们可能在机器上运行一个 web 服务器。第二个 web 服务器可以在不同的端口上启动。
+
+假设第一个运行在端口 80 上，这是使用 HTTP 协议的 web 服务器的默认端口。可以在除端口 80 以外的任何其他端口上运行相同的程序。例如，通常使用端口 8080 或端口 81。
+
+默认情况下，HTTPS 在端口 443 上运行。
+
+每个协议都有不同的默认端口，但程序不需要使用它。它们可以使用 1 到 65535 之间的任何未使用端口（16 位无符号 = 2^16）。
+
+我之前在[常见的网络端口及对应服务](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E5%B8%B8%E8%A7%81%E7%9A%84%E7%BD%91%E7%BB%9C%E7%AB%AF%E5%8F%A3%E5%8F%8A%E5%AF%B9%E5%BA%94%E6%9C%8D%E5%8A%A1.md)提供了一个列表，感兴趣的可以了解一下。
diff --git "a/WTF/\344\274\230\351\233\205\351\231\215\347\272\247\345\222\214\346\270\220\350\277\233\345\242\236\345\274\272.md" "b/WTF/\344\274\230\351\233\205\351\231\215\347\272\247\345\222\214\346\270\220\350\277\233\345\242\236\345\274\272.md"
new file mode 100644
index 0000000..536db49
--- /dev/null
+++ "b/WTF/\344\274\230\351\233\205\351\231\215\347\272\247\345\222\214\346\270\220\350\277\233\345\242\236\345\274\272.md"
@@ -0,0 +1,29 @@
+# 优雅降级和渐进增强
+
+## 渐进增强
+
+> [渐进增强](https://developer.mozilla.org/zh-CN/docs/Glossary/Progressive_Enhancement)（Progressive enhancement）是一种设计理念，其核心是为尽可能多的用户提供基本内容和功能，同时进一步为现代化浏览器用户提供最佳体验，运行所有需要的代码。
+
+换句话讲，就是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
+
+在 Web 设计时，需要强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能，同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:
+
+- 所有浏览器都必须能访问基本内容
+- 所有浏览器都必须能使用基本功能
+- 所有内容都包含在语义化标签中
+- 通过外部 CSS 提供增强的布局
+- 通过非侵入式、外部 JavaScript 提供增强功能
+- 尊重最终用户的 Web 浏览器首选项
+
+渐进增强的选择：媒体查询、JavaScript Polyfill 和 JavaScript 检测库（例如 [Modernizr](https://modernizr.com/)）等。
+
+## 优雅降级
+
+> [优雅降级](https://developer.mozilla.org/zh-CN/docs/Glossary/Graceful_degradation)（Graceful degradation）是一种设计理念，其核心是尝试构建可在最新浏览器中运行的现代网站/应用程序，而作为降级体验，在低版本浏览器中仍然提供必要的内容和功能。
+
+换句话讲，就是一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
+
+## 更多资料
+
+- [特征检测、特征推断和使用 UA 字符串之间有什么区别？](https://github.com/lio-zero/blog/blob/main/JavaScript/%E7%89%B9%E5%BE%81%E6%A3%80%E6%B5%8B%E3%80%81%E7%89%B9%E5%BE%81%E6%8E%A8%E6%96%AD%E5%92%8C%E4%BD%BF%E7%94%A8%20UA%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B9%8B%E9%97%B4%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F.md)
+- [A quick introduction to progressive enhancement](https://blog.logrocket.com/a-quick-introduction-to-progressive-enhancement/)
diff --git a/Web API/Battery API.md b/Web API/Battery API.md
new file mode 100644
index 0000000..cc638bf
--- /dev/null
+++ b/Web API/Battery API.md	
@@ -0,0 +1,57 @@
+# Battery API
+
+[Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) 方法提供有关设备的电池状态的信息。例如：允许访问以查看设备电池的电池电量，是否正在充电等信息。
+
+![Battery API 支持情況](https://upload-images.jianshu.io/upload_images/18281896-9ff9d30ef48cf8ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 示例
+
+以下是一个 🔋 电池的充电状态的示例：
+
+```js
+const h5 = document.querySelector('h5')
+const batteryIndicator = document.querySelector('.indicator')
+const hasSupport = () => Boolean('getBattery' in navigator)
+const setClass = (element, classToAdd) =>
+  (element.className = 'indicator ' + classToAdd)
+
+async function initBattery() {
+  const battery = await navigator.getBattery()
+
+  function handleBattery() {
+    try {
+      // 电池属性更新时触发
+      battery.addEventListener('chargingchange', updateUI)
+      battery.addEventListener('levelchange', updateUI)
+      battery.addEventListener('chargingtimechange', updateUI)
+      battery.addEventListener('dischargingtimechange', updateUI)
+
+      updateUI()
+    } catch {
+      console.warn('您的浏览器不支持此功能')
+    }
+  }
+
+  function updateUI() {
+    // 电池电量
+    batteryIndicator.style.height = battery.level * 100 + '%'
+
+    if (battery.charging) {
+      h5.classList.add('batteryMan')
+    } else {
+      h5.classList.remove('batteryMan')
+    }
+
+    // 检查电池是否正在充电
+    battery.charging
+      ? setClass(batteryIndicator, 'charging')
+      : setClass(batteryIndicator, 'notCharging')
+  }
+
+  handleBattery()
+}
+
+initBattery()
+```
+
+[示例地址](https://codepen.io/lio-zero/pen/OJpxrpK)
diff --git a/Web API/Broadcast Channel API.md b/Web API/Broadcast Channel API.md
new file mode 100644
index 0000000..09dd786
--- /dev/null
+++ b/Web API/Broadcast Channel API.md	
@@ -0,0 +1,78 @@
+# Broadcast Channel API
+
+[Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) 可以在同源情况下，实现 1 对 1 消息在不同窗口、Tab 页面、`iframe` 或 Web Worker 之间发送。
+
+Broadcast Channel API 也可用于发送 1 对多消息，同时与多个实体通信。
+
+以下 MDN 提供的 Broadcast Channel API 的原理图：
+
+![Broadcast Channel API 的原理](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API/broadcastchannel.png)
+
+[Broadcast 支持情况](https://caniuse.com/?search=Broadcast)：
+
+![Broadcast 支持情况](https://upload-images.jianshu.io/upload_images/18281896-17a6b106cd217502.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 基本用法
+
+首先，初始化 `BroadcastChannel` 对象：
+
+```js
+const channel = new BroadcastChannel('test_channel')
+```
+
+要在频道（本例 `test_channel`）上发送消息，请使用 `postMessage()` 方法：
+
+```js
+channel.postMessage('Hey!')
+```
+
+消息可以是任何受支持的值：
+
+- 所有基本类型，不包括 `Symbol`
+- 数组
+- 对象字面量
+- String、Date、RegExp 对象
+- Blob、File、FileList 对象
+- ArrayBuffer、ArrayBufferView 对象
+- FormData 对象
+- ImageData 对象
+- map 和 set 对象
+
+要从频道接收消息，需要监听 `message` 事件：
+
+```js
+channel.onmessage = (event) => {
+  console.log('Received', event.data)
+}
+```
+
+此事件会为所有监听器触发，发送消息的监听器除外。
+
+您可以使用以下方法关闭频道：
+
+```js
+channel.close()
+```
+
+以下是一个简单的示例：
+
+```js
+const hasSupport = () => Boolean('BroadcastChannel' in window)
+const CHANNEL_NAME = 'web_api_channel'
+
+function run() {
+  const receiver = document.getElementById('test_channel')
+
+  const bc = new BroadcastChannel(CHANNEL_NAME)
+  bc.postMessage('I am superman!')
+  bc.onmessage = (event) => {
+    console.log(`在频道 "${event.data}" 上收到消息 "${CHANNEL_NAME}"`)
+
+    receiver.innerText = event.data
+  }
+}
+```
+
+## 更多资料
+
+[broadcast-channel](https://github.com/pubkey/broadcast-channel) 用于不同的浏览器选项卡或 nodejs-processes + LeaderElection 通道之间发送数据。
diff --git a/Web API/CSS Font Loading API.md b/Web API/CSS Font Loading API.md
new file mode 100644
index 0000000..b5c0018
--- /dev/null
+++ b/Web API/CSS Font Loading API.md	
@@ -0,0 +1,53 @@
+# CSS Font Loading API
+
+[CSS Font Loading API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API) 提供动态加载字体资源的事件和接口。
+
+如果您熟悉 [Web Font Loader](https://github.com/typekit/webfontloader) 库的话，那么就把这个 API 想成是在浏览器中原生实现的。
+
+由一个 `FontFace` 构造函数创建，语法如下：
+
+```js
+new FontFace(family, source, descriptors)
+```
+
+- `family` — 指定在设置元素样式时可用于匹配此字体的字体系列名称。
+- `source` — 字体来源。可以是：
+  - 字体文件的 URL。
+  - `ArrayBuffer`（或 `ArrayBufferView`）中的二进制字体数据。
+- `descriptors` — 可选。作为对象传递的一组可选描述符。
+
+详细 API 请查阅 MDN。
+
+下面通过一个示例来了解它的具体用法。
+
+## 示例
+
+```js
+const hasSupport = () => typeof FontFace === 'function'
+
+async function run() {
+  try {
+    // 定义字体
+    const getFont = new FontFace(
+      'Bitter',
+      'url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)'
+    )
+
+    // 加载字体
+    await getFont.load()
+
+    // 将字体添加到文档
+    document.fonts.add(getFont)
+  } catch (e) {
+    console.error('字体加载错误: ', e)
+  }
+}
+
+run()
+```
+
+[查看示例](https://codepen.io/lio-zero/pen/xxjqWYG)
+
+## 更多资料
+
+[Optimizing Web Font Rendering Performance](https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/#font-load-events)
diff --git a/Web API/Cache API.md b/Web API/Cache API.md
new file mode 100644
index 0000000..36d5abb
--- /dev/null
+++ b/Web API/Cache API.md	
@@ -0,0 +1,150 @@
+# Cache API
+
+[Cache API](https://developer.mozilla.org/zh-CN/docs/Web/API/Cache) 是 Service Worker 规范的一部分，是一种增强资源缓存能力的好方法。
+
+它允许你缓存 URL 可寻址资源，这意味着资源、网页、HTTP API 响应。
+
+它并不意味着缓存单个数据块，这是 [IndexedDB API](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API) 的任务。
+
+[Cache API 支持情况](https://caniuse.com/?search=Cache%20API)：
+
+![Cache API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-fa4b948b048befbe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 检测 Cache API 是否可用
+
+Cache API 通过 `caches` 对象公开。要检测 API 是否在浏览器中实现，只需使用以下命令检查其是否存在：
+
+```js
+if ('caches' in window) {
+  console.log('支持 Cache API')
+}
+```
+
+## 初始化缓存
+
+使用 `caches.open` API，它返回一个带有缓存对象的 Promise 以供使用：
+
+```js
+caches.open('my-cache').then((cache) => {
+  // 你可以开始使用缓存
+})
+// or
+const cache = await caches.open('my-cache')
+```
+
+`my-cache` 是我用来标识要初始化的缓存的名称。它就像一个变量名，你可以使用任何你想要的名字。
+
+如果缓存尚不存在，`caches.open` 则创建它。
+
+## 将项目添加到缓存
+
+`cache` 对象公开了两个将项目添加到缓存的方法：`add` 和 `addAll`。
+
+### cache.add()
+
+`add` 接受单个 URL，并在调用时获取资源并缓存它。
+
+```js
+const cache = await caches.open('my-cache')
+cache.add('/api/todos')
+```
+
+> **Tips**：你可以使用 [JSONPlaceholder](https://jsonplaceholder.typicode.com/) 进行测试。
+
+为了允许对获取进行更多控制，你可以传递一个 `Request` 对象，而不是字符串，它是 [Fetch API](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch) 规范的一部分：
+
+```js
+const cache = await caches.open('my-cache')
+cache.add(
+  new Request('/api/todos', {
+    // the options
+  })
+)
+```
+
+### cache.addAll()
+
+`addAll` 接受一个数组，并在所有资源都被缓存后返回一个 Promise。
+
+```js
+const cache = await caches.open('my-cache')
+
+// 所有请求都已缓存
+const allCache = await cache.addAll(['/api/todos', '/api/todos/today'])
+```
+
+### 手动获取和添加
+
+`cache.add()` 自动获取资源并将其缓存。
+
+Cache API 通过 `cache.put()` 对此提供了更细粒度的控制。你负责获取资源，然后告诉 Cache API 存储一个响应：
+
+```js
+const url = '/api/todos'
+
+const res = await fetch(url)
+const cache = await caches.open('my-cache')
+
+cache.put(url, res)
+```
+
+## 从缓存中检索项目
+
+如果需要从缓存中检索项目，可以使用 `cache.match()` 或 `matchAll()`，它们返回一个 `Response` 对象，其中包含有关请求的所有信息和网络请求的响应。
+
+```js
+const cache = await caches.open('my-cache')
+
+// res 是响应对象
+const res = await cache.match('/api/todos')
+```
+
+`cache.match()` 返回第一个匹配请求相关联的 `Response`，而 `matchAll()` 返回所有匹配请求的数组。
+
+## 获取缓存
+
+### 获取所有可用的缓存
+
+`caches.keys()` 方法列出了每个可用缓存的键。
+
+```js
+// keys 是一个包含键列表的数组
+const keys = await caches.keys()
+```
+
+### 获取缓存中的所有项目
+
+```js
+const cache = await caches.open('my-cache')
+
+const cachedItems = await cache.keys()
+```
+
+`cachedItems` 是一个 `Request` 对象数组，其中包含 `url` 属性中资源的 URL。
+
+## 删除缓存
+
+### 删除可用缓存
+
+`caches.delete()` 方法接受一个缓存标识符，并在执行时从系统中清除缓存及其缓存项。
+
+```js
+caches.delete('my-cache').then(() => {
+  console.log('已成功删除')
+})
+```
+
+### 从缓存中删除项目
+
+给定一个 `cache` 对象，其 `delete()` 方法将从中删除缓存的资源。
+
+```js
+caches.open('my-cache').then((cache) => {
+  cache.delete('/api/todos')
+})
+```
+
+## 更多资料
+
+- [Cache API](https://bitsofco.de/cache-api-101/)
+- [精读《Caches API》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/88.%E7%B2%BE%E8%AF%BB%E3%80%8ACaches%20API%E3%80%8B.md)
diff --git a/Web API/Channel Messaging API.md b/Web API/Channel Messaging API.md
new file mode 100644
index 0000000..1c2f2bf
--- /dev/null
+++ b/Web API/Channel Messaging API.md	
@@ -0,0 +1,186 @@
+# Channel Messaging API
+
+给定在同一文档中但在不同上下文中运行的两个脚本，[Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) 允许它们通过通道传递消息进行通信。
+
+[Channel Messaging API 支持情况](https://caniuse.com/?search=Channel%20Messaging%20)：
+
+![Channel Messaging API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-e28f6b742bc95a17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 基本用法
+
+调用 `new MessageChannel()` 消息通道被初始化。
+
+```js
+const channel = new MessageChannel()
+```
+
+通道有 2 个属性，称为：
+
+- `port1`
+- `port2`
+
+这些属性是 [`MessagePort`](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort) 对象。`port1` 是创建通道的部分使用的端口，`port2` 是通道接收器使用的端口（顺便说一下，通道是双向的，因此接收器也可以发回消息）。
+
+在通道的每一端，您在一个端口上监听，并将消息发送到另一个端口。
+
+发送消息通过 `postMessage` 方法：
+
+```js
+otherWindow.postMessage()
+```
+
+`otherWindow` 是其他浏览上下文。它接受消息、来源和端口。例如：
+
+```js
+const data = { name: 'O.O' }
+const channel = new MessageChannel()
+window.postMessage(data, [channel.port2])
+```
+
+消息可以是任何受支持的值：
+
+- 所有基本类型，但不包括 `symbol`
+- 数组
+- 对象字面量
+- String、Date 和 RegExp 对象
+- Blob、File 和 FileList 对象
+- ArrayBuffer 和 ArrayBufferView 对象
+- FormData 对象
+- ImageData 对象
+- Map 和 Set 对象
+
+Origin（源）是一个 URI（例如 `https://example.com`）。您可以使用 `*` 来允许不太严格的检查，或指定域，或指定 `/` 来设置同域目标，而无需指定它是哪个域。
+
+另一个浏览上下文使用 `message` 事件监听消息：
+
+```js
+self.addEventListener('message', (event) => {
+  console.log('新消息到达!')
+})
+```
+
+在这种情况下，`self` 与使用 `window` 相同，你也可以省略。
+
+在事件处理程序中，我们可以通过查看事件对象的 `data` 属性来访问发送的数据：
+
+```js
+self.addEventListener('message', (event) => {
+  console.log('新消息到达!')
+  console.log(event.data)
+})
+```
+
+我们可以使用 `MessagePort.postMessage` 进行回复：
+
+```js
+self.addEventListener('message', (event) => {
+  console.log('新消息到达!')
+  console.log(event.data)
+
+  const data = { message: 'hey' }
+  event.ports[0].postMessage(data)
+})
+```
+
+可以通过调用端口上的 `close()` 方法关闭通道：
+
+```js
+self.addEventListener('message', (event) => {
+  console.log('新消息到达!')
+  console.log(event.data)
+
+  const data = { message: 'hey' }
+  event.ports[0].postMessage(data)
+  event.ports[0].close()
+})
+```
+
+## 带有 iframe 的示例
+
+下面是一个在文档和嵌入其中的 `iframe` 之间进行通信的示例。
+
+主文档定义了一个 `iframe` 和 `span`，我们将在其中打印从 `iframe` 文档发送的消息。加载 `iframe` 文档后，我们会在创建的通道上向其发送一条消息。
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <iframe src="iframe.html" />
+    <span></span>
+  </body>
+  <script>
+    const channel = new MessageChannel()
+    const display = document.querySelector('span')
+    const iframe = document.querySelector('iframe')
+
+    iframe.addEventListener('load', () => {
+      iframe.contentWindow.postMessage('Hey', '*', [channel.port2])
+    })
+
+    channel.port1.onmessage = (event) => {
+      display.innerHTML = event.data
+    }
+  </script>
+</html>
+```
+
+`iframe` 页面内容更简单：
+
+```html
+<!DOCTYPE html>
+<html>
+  <script>
+    window.addEventListener('message', (event) => {
+      // 发回消息
+      event.ports[0].postMessage('从 iframe 返回的消息')
+    })
+  </script>
+</html>
+```
+
+如您所见，我们甚至不需要初始化通道，因为 `message` 当从容器页面接收到消息时，处理程序会自动运行。
+
+发送的事件由以下属性组成：
+
+- `data` — 从另一个窗口发送的对象
+- `origin` — 发送消息的窗口的原始 URI
+- `source` — 发送消息的窗口对象
+
+始终验证消息发送人的来源。
+
+`event.ports[0]` 是我们在 `iframe` 中引用 `port2` 的方式，因为 `ports` 是一个数组，并且端口被添加为第一个元素。
+
+## Service Worker 的例子
+
+Service Worker 是一个事件驱动的 Worker，是一个与网页相关联的 JavaScript 文件。
+
+重要的是要知道 Service Worker 与主线程是隔离的，我们必须使用消息与它们进行通信。
+
+下面是附加到主文档中的脚本处理向 Service Worker 发送消息的方式:
+
+```js
+// worker 是已实例化的 Service Worker
+
+const messageChannel = new MessageChannel()
+messageChannel.port1.addEventListener('message', (event) => {
+  console.log(event.data)
+})
+
+worker.postMessage(data, [messageChannel.port2])
+```
+
+在 Service Worker 代码中，我们为 `message` 事件添加了一个事件监听器：
+
+```js
+self.addEventListener('message', (event) => {
+  console.log(event.data)
+})
+```
+
+它可以通过向 `messageChannel.port2` 发送消息来发回消息：
+
+```js
+self.addEventListener('message', (event) => {
+  event.ports[0].postMessage(data)
+})
+```
diff --git a/Web API/EyeDropper API.md b/Web API/EyeDropper API.md
new file mode 100644
index 0000000..fadaee5
--- /dev/null
+++ b/Web API/EyeDropper API.md	
@@ -0,0 +1,34 @@
+# EyeDropper API
+
+[EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 是一种用于在网页上提取颜色的技术。它可以让用户选择屏幕（包括浏览器窗口外）的任何一点，并返回该点的颜色值。这对于设计师或开发人员来说非常有用，因为它可以让他们更轻松地获取网页上的颜色。
+
+在没有实现 EyeDropper API 之前，我们可以使用 Canvas API 来实现获取图像颜色。例如，可以在 `canvas` 上绘制图像，然后使用 `getImageData()` 方法获取图像数据，并使用该数据来提取颜色。
+
+现在，我们可以方便的获取网页上任何位置的颜色，甚至获取浏览器窗口外的颜色。
+
+以下是 EyeDropper API 的简单使用示例：
+
+```js
+const eyeDropper = new EyeDropper()
+
+document.getElementById('eyeDropper-btn').addEventListener('click', (e) => {
+  eyeDropper
+    .open()
+    .then((colorSelectionResult) => {
+      // 返回所选像素的十六进制颜色值（#RRGGBB）
+      console.log(colorSelectionResult.sRGBHex)
+    })
+    .catch((e) => {
+      // 处理用户选择退出 eyedropper 模式而不进行选择
+      console.log(e)
+    })
+})
+```
+
+## 浏览器支持情况
+
+EyeDropper API 还处于试验阶段，目前仅在最新的 Chrome、Edge 以及 Opera 浏览器版本中得到支持。
+
+![EyeDropper API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-c460dc823c1a659f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+浏览器兼容性表：[Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility) 或 [Can I use](https://caniuse.com/?search=EyeDropper%20API)。
diff --git a/Web API/Fetch API.md b/Web API/Fetch API.md
new file mode 100644
index 0000000..74e1f9d
--- /dev/null
+++ b/Web API/Fetch API.md	
@@ -0,0 +1,308 @@
+# Fetch API
+
+自 1998 年发布 IE5 以来，我们可以选择使用 [XMLHttpRequest](https://github.com/lio-zero/blog/blob/main/Web%20API/XMLHttpRequest.md)（XHR）在浏览器中进行异步网络调用。
+
+几年后，GMail 和其他应用大量使用它，并使这种方法如此流行，以至于它不得不有一个名字：AJAX。
+
+直接使用 XMLHttpRequest 一直很痛苦，一些开发者将它抽象成库，尤其是 jQuery 围绕它构建了自己的辅助函数：
+
+- `jQuery.ajax()`
+- `jQuery.get()`
+- `jQuery.post()`
+- etc
+
+它们在使其更易于访问方面产生了巨大的影响，特别是在确保所有功能都能在较旧的浏览器上运行。
+
+[Fetch API](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API) 已被标准化为异步网络请求的现代方法，并使用 Promises 作为构建块。
+
+以下是目前[浏览器对 Fetch API 的支持](https://caniuse.com/?search=Fetch%20API)：
+
+![Fetch API 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-5ddf552173e8d102.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，Fetch 对除 IE 以外的主流浏览器都有很好的支持。
+
+GitHub 发布的 [fetch polyfill](https://github.com/github/fetch) 允许我们在任何浏览器上使用 fetch。
+
+## 使用 Fetch
+
+使用 Fetch 对 GET 请求非常简单：
+
+```js
+fetch('/file.json')
+```
+
+fetch 将发出一个 HTTP 请求来获取 `file.json` 同域上的资源。
+
+如您所见，`fetch` 函数在全局 `window` 范围内可用。
+
+> Tips：您可以使用 [JSONPlaceholder](http://jsonplaceholder.typicode.com/) 提供的 API 进行测试。
+
+现在让我们让它更有用一点，让我们看看文件的内容是什么：
+
+```js
+fetch('./file.json')
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+```
+
+调用 `fetch()` 将返回一个 promise。然后，我们可以通过传递带有 promise 的 `then()` 方法的处理程序来等待 promise 解析。
+
+该处理程序接收 fetch promise 的返回值，这是一个 Response 对象。
+
+我们将在下一节中详细了解这个对象。
+
+### 捕捉错误
+
+由于 `fetch()` 返回了一个 promise，我们可以使用 promise 的 `catch` 方法来拦截请求执行期间发生的任何错误，以及在 `then` 回调中完成的处理：
+
+```js
+fetch('./file.json')
+  .then((response) => {
+    // ...
+  })
+  .catch((err) => console.error(err))
+```
+
+捕获错误的另一种方法是在第一个 `then` 中管理错误：
+
+```js
+fetch('./file.json')
+  .then((response) => {
+    if (!response.ok) {
+      throw Error(response.statusText)
+    }
+    return response
+  })
+  .then((response) => {
+    // ...
+  })
+```
+
+## 响应对象
+
+`fetch()` 调用返回的响应对象包含有关请求和网络请求响应的所有信息。
+
+以下是一些元数据：
+
+### headers
+
+通过访问 `response` 对象上的 `headers` 属性，可以查看请求返回的 HTTP 头：
+
+```js
+fetch('./file.json').then((response) => {
+  console.log(response.headers.get('Content-Type'))
+  console.log(response.headers.get('Date'))
+})
+```
+
+![获取请求头](https://upload-images.jianshu.io/upload_images/18281896-d177f7513aef13f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### status
+
+`status` 属性是一个整数，表示 HTTP 响应状态。
+
+例如：
+
+- 200-299 为成功状态
+- 301、302、303、307 或 308 是重定向
+
+```js
+fetch('./file.json').then((response) => console.log(response.status))
+```
+
+> 推荐：[常见的 HTTP 状态码](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E5%B8%B8%E8%A7%81%E7%9A%84%20HTTP%20%E7%8A%B6%E6%80%81%E7%A0%81.md)
+
+### statusText
+
+`statusText` 是表示响应状态消息的属性。如果请求成功，则状态为 OK。
+
+```js
+fetch('./file.json').then((response) => console.log(response.statusText))
+```
+
+### url
+
+url 表示我们获取的属性的完整 URL。
+
+```js
+fetch('./file.json').then((response) => console.log(response.url))
+```
+
+### 正文内容
+
+响应有一个正文，可以使用多种方法访问：
+
+- `text()` 以字符串形式返回正文
+- `json()` 将正文作为 JSON 解析的对象返回
+- `blob()` 将正文作为 Blob 对象返回
+- `formData()` 将正文作为 FormData 对象返回
+- `arrayBuffer()` 将正文作为 ArrayBuffer 对象返回
+
+所有这些方法都返回一个 Promise。例如：
+
+```js
+fetch('./file.json')
+  .then((response) => response.text())
+  .then((body) => console.log(body))
+
+fetch('./file.json')
+  .then((response) => response.json())
+  .then((body) => console.log(body))
+```
+
+![获取 JSON 数据](https://upload-images.jianshu.io/upload_images/18281896-5ac04e422151a768.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### 获取 JSON
+
+也可以使用 ES8 的异步函数编写相同的内容：
+
+```js
+;(async () => {
+  const response = await fetch('./file.json')
+  const data = await response.json()
+  console.log(data)
+})()
+```
+
+## 请求对象
+
+Request 对象表示一个资源请求，通常使用 `new Request()` API 创建。
+
+例如：
+
+```js
+const req = new Request('/api/todos')
+```
+
+Request 对象提供了几个只读属性来检查资源请求的详细信息，包括：
+
+- `method` — 请求的方法（GET、POST 等）
+- `url` — 请求的 URL
+- `headers` — 请求的关联 headers 对象
+- `referrer` — 请求的引用者
+- `cache` — 请求的缓存模式（例如，`default`、`reload` 和 `no-cache`）
+
+并公开了几种方法，包括 `json()`、`text()` 和 `formData()` 来处理请求的正文。
+
+> [完整的 API 列表](https://developer.mozilla.org/docs/Web/API/Request)
+
+## 请求头
+
+能够设置 HTTP 请求头是至关重要的，并且 fetch 使我们能够使用 Headers 对象完成这项工作：
+
+```js
+const headers = new Headers()
+headers.append('Content-Type', 'application/json')
+```
+
+或者：
+
+```js
+const headers = new Headers({
+  'Content-Type': 'application/json'
+})
+```
+
+要将 headers 附加到请求，我们使用 Request 对象，并将其传递给 `fetch()`，而不是传递 URL。
+
+```js
+fetch('./file.json')
+```
+
+替换为：
+
+```js
+const request = new Request('./file.json', {
+  headers: new Headers({
+    'Content-Type': 'application/json'
+  })
+})
+
+fetch(request)
+```
+
+Headers 对象不限于设置值，但我们也可以查询它：
+
+```js
+headers.has('Content-Type')
+headers.get('Content-Type')
+```
+
+我们可以删除之前设置的 header：
+
+```js
+headers.delete('X-My-Custom-Header')
+```
+
+## POST 请求
+
+Fetch 还允许在请求中使用任何其他 HTTP 方法：POST、PUT、DELETE 或 OPTIONS 等。
+
+在请求的 `method` 属性中指定方法，并在请求头和请求体中传递其他参数：
+
+POST 请求示例：
+
+```js
+const options = {
+  method: 'post',
+  headers: {
+    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
+  },
+  body: 'name=O.O&test=1'
+}
+
+fetch(url, options).catch((err) => {
+  console.error('Request failed', err)
+})
+```
+
+## 如何取消获取请求
+
+在引入 fetch 之后的几年中，一旦打开请求，就无法中止。
+
+现在，由于引入了 `AbortController` 和 `AbortSignal`，我们可以使用通用 API 来通知中止事件。
+
+通过将 `signal` 作为 fetch 参数传递来集成此 API：
+
+```js
+const controller = new AbortController()
+const signal = controller.signal
+
+fetch('./file.json', { signal })
+```
+
+您可以设置在 fetch 请求启动 5 秒后触发中止事件的超时，以取消该请求：
+
+```js
+setTimeout(() => controller.abort(), 5 * 1000)
+```
+
+如果 fetch 已经返回，调用 `abort()` 不会导致任何错误。
+
+当出现中止信号时，fetch 将使用名为 `AbortError` 的 `DOMException` 拒绝 promise：
+
+```js
+fetch('./file.json', { signal })
+  .then((response) => response.text())
+  .then((text) => console.log(text))
+  .catch((err) => {
+    if (err.name === 'AbortError') {
+      console.error('Fetch aborted')
+    } else {
+      console.error('Another error', err)
+    }
+  })
+```
+
+我在另一篇文章分享了 XHR、Axios 以及今天的主题 Fetch API 如何取消网络请求，如果您想了解，可以查看[取消已发送的网络请求](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%8F%96%E6%B6%88%E5%B7%B2%E5%8F%91%E9%80%81%E7%9A%84%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82.md)。
+
+到这里，您已经基本了解了 Fetch API 如何使用。您可以在 👇 下面查看更多关于 Fetch API 的详细内容。
+
+## 更多资料
+
+- [Fetch API 教程](http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html)
+- [Fetch](https://zh.javascript.info/fetch)
+- [Fetch API](https://zh.javascript.info/fetch-api)
+- [Fetch：下载进度](https://zh.javascript.info/fetch-progress)
+- [Fetch：中止（Abort）](https://zh.javascript.info/fetch-abort)
+- [Fetch：跨源请求](https://zh.javascript.info/fetch-crossorigin)
diff --git a/Web API/File System API.md b/Web API/File System API.md
new file mode 100644
index 0000000..ebfaa48
--- /dev/null
+++ b/Web API/File System API.md	
@@ -0,0 +1,103 @@
+# File System API
+
+[File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) 仅适用于基于 Chromium 的 Web 浏览器。
+
+File System Access API 使读写用户文件和访问文件系统变得更加简单。
+
+File System Access API 支持情況：
+
+![File System Access API 支持情況](https://upload-images.jianshu.io/upload_images/18281896-6ea37298b56aff42.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，它的支持情况不是很理想，仅在部分 Chromium 浏览器版本中得到支持。
+
+下面是一个获取文本/图像文件的示例。
+
+## 示例：获取文本/图像文件
+
+```js
+const hasSupport = () => Boolean('showOpenFilePicker' in window)
+const buttonText = document.querySelector('#button-text')
+const buttonImage = document.querySelector('#button-image')
+
+buttonText.addEventListener('click', textUpload)
+buttonImage.addEventListener('click', imageUpload)
+
+async function textUpload() {
+  const root = document.getElementById('api-filesystem')
+  const contentText = root.querySelector('#content-text')
+  const contentImage = root.querySelector('#content-image')
+  const fileName = root.querySelector('#filename')
+
+  try {
+    let [fileHandle] = await window.showOpenFilePicker({
+      types: [
+        {
+          description: 'Text Files',
+          accept: {
+            'text/plain': ['.txt']
+          }
+        }
+      ]
+    })
+    let file = await fileHandle.getFile()
+    let content = await file.text()
+
+    root.style.display = 'flex'
+
+    contentText.innerText = content
+    contentText.style.display = 'block'
+
+    fileName.innerText = file.name
+    contentImage.innerHTML = ''
+  } catch (error) {
+    console.log('文件选择器已取消', error)
+  }
+}
+
+async function imageUpload() {
+  const root = document.getElementById('api-filesystem')
+  const contentText = root.querySelector('#content-text')
+  const contentImage = root.querySelector('#content-image')
+  const fileName = root.querySelector('#filename')
+
+  try {
+    let [fileHandle] = await window.showOpenFilePicker({
+      types: [
+        {
+          description: '图像文件',
+          accept: {
+            'image/*': ['.gif', '.jpeg', '.jpg', '.png', '.webp']
+          }
+        }
+      ]
+    })
+    let file = await fileHandle.getFile()
+    let imageURL = URL.createObjectURL(file)
+
+    contentImage.innerHTML = ''
+
+    const img = document.createElement('img')
+    img.setAttribute('src', imageURL)
+    img.setAttribute('alt', file.name)
+    img.style.height = 'auto'
+    img.style.width = '100%'
+
+    root.style.display = 'flex'
+
+    contentImage.appendChild(img)
+    fileName.innerText = file.name
+    contentText.innerText = ''
+    contentText.style.display = 'none'
+  } catch (error) {
+    console.log('图像选择已取消。', error)
+  }
+}
+```
+
+[查看效果](https://codepen.io/lio-zero/pen/GRxpYoW) — 在 CodePen 上代码内嵌在 `iframe` 内，导致无法访问执行成功，将其复制到本地进行测试。
+
+由于 File System Access API 兼容性不佳，如果您想在项目中使用，建议使用 [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) 库，其提供了简洁的 API 和优雅降级方案。
+
+## 进一步阅读
+
+[The File System Access API: simplifying access to local files](https://web.dev/file-system-access/)
diff --git a/Web API/History API.md b/Web API/History API.md
new file mode 100644
index 0000000..e720207
--- /dev/null
+++ b/Web API/History API.md	
@@ -0,0 +1,131 @@
+# History API
+
+[History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 允许你与浏览器历史交互，触发浏览器导航方法并更改地址栏内容。
+
+它在与现代单页应用程序结合时特别有用，在这些应用程序上，你永远不会对新页面发出服务器端请求，而是页面始终相同：只是内部内容发生了变化。
+
+在浏览器中运行的现代 JavaScript 应用程序如果不与 History API 交互，无论是显式的还是在框架级别上，对用户来说都将是一个糟糕的体验，因为后退和前进按钮都会中断。
+
+此外，在浏览应用程序时，**视图会发生变化，但地址栏不会**。
+
+另外，重新加载按钮也会中断：由于没有深度链接，重新加载页面将使浏览器显示不同的页面。
+
+History API 是在 HTML5 中引入的，现在所有现代浏览器都支持。
+
+![History API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-b724fdd263bfb643.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+IE 从版本 10 开始支持它，如果你需要支持 IE9 及更早版本，请使用 [history.js](https://github.com/browserstate/history.js/) 库。
+
+## 访问 History API
+
+History API 在 `window` 对象上可用，因此你可以这样调用它：`window.history` 或 `history`，因为 `window` 它是全局对象（可以省略）。
+
+## 浏览历史
+
+`window.history` 对象包含浏览器的历史。
+
+让我们从使用 History API 可以做的最简单的事情开始。
+
+返回上一个页面：
+
+```js
+history.back()
+```
+
+这将转到会话历史记录中的上一个条目。你可以使用 `forward` 转到下一个：
+
+```js
+history.forward()
+```
+
+这就像使用浏览器的后退和前进按钮一样。
+
+`go()` 允许你向后或向前导航多个深度级别。例如：
+
+```js
+history.go(0) // 参数为 0，表示刷新页面
+history.go(-1) // 相当于 history.back()
+history.go(-2) // 相当于调用 2 次 history.back()
+history.go(1) // 相当于 history.forward()
+history.go(3) // 相当于调用 3 次 history.forward()
+```
+
+要想知道历史记录中有多少条目，可以调用：
+
+```js
+history.length
+```
+
+## 向历史记录中添加条目
+
+使用 `history.pushState()` 可以通过编程方式创建新的历史记录条目。
+
+传递 3 个参数：
+
+- 第一个是可以包含任何内容的对象（但是有大小限制，并且对象需要可序列化）。
+- 第二个参数目前未被主要浏览器使用（[查看](https://github.com/whatwg/html/issues/2174)），因此通常传递一个空字符串。
+- 第三个参数是与新状态关联的 URL。请注意，该 URL 需要属于当前 URL 的同一个源域。
+
+以下示例将创建一条新的历史记录：
+
+```js
+const state = { name: 'O.O' }
+
+history.pushState(state, '', '/user')
+```
+
+上面代码中，将在浏览器历史记录中插入一条新的记录。
+
+调用它不会改变页面的内容，也不会像更改 `window.location` 那样引起任何浏览器操作。
+
+> **注意**：当前页面的搜索栏会发生变化，但是不会刷新当前页面。
+
+## 修改历史记录条目
+
+`history.pushState()` 允许你向历史添加新状态，而 `history.replaceState()` 允许你编辑当前历史状态。
+
+```js
+history.pushState({}, '', '/posts')
+
+const state = { post: 'first' }
+history.pushState(state, '', '/post/first')
+
+const state = { post: 'second' }
+history.replaceState(state, '', '/post/second')
+```
+
+如果你现在调用：
+
+```js
+history.back()
+```
+
+浏览器直接转到 `/posts`，因为 `/post/first` 被 `/post/second` 替换。
+
+## 访问当前历史记录条目状态
+
+访问属性：
+
+```js
+history.state
+```
+
+其返回当前状态对象（传递给 `pushState` 或 `replaceState` 的第一个参数）。
+
+## `onpopstate` 事件
+
+每次活动历史状态更改时（用户前进或后退操作），都会在 `window` 上调用 `popstate` 事件，将当前状态作为回调参数：
+
+```js
+window.addEventListener('popstate', (e) => {
+  console.log(e.state) // pushState 或 replaceState 的第一个参数
+})
+```
+
+需要注意的是，调用 `history.pushState()` 或 `history.replaceState()` 不会触发 `popstate` 事件。
+
+只有在做出浏览器动作时，才会触发该事件。例如：用户点击浏览器的前进、后退按钮，或者在 JavaScript 代码中调用 `history.go()`、`history.back()` 或 `history.forward()` 方法。
+
+每次调用 `history.back()`、`history.forward()` 或 `history.go()` 时，都会记录新的状态对象（传递给 `pushState` 或 `replaceState` 的第一个参数）。
+
+还有一点需要注意，不同的浏览器在加载页面时处理 `popstate` 事件的形式存在差异。页面加载时 Chrome 和 Safari 通常会触发 `popstate` 事件，但 Firefox 则不会。
diff --git a/Web API/ImageCapture API.md b/Web API/ImageCapture API.md
new file mode 100644
index 0000000..6e4ad47
--- /dev/null
+++ b/Web API/ImageCapture API.md	
@@ -0,0 +1,103 @@
+# ImageCapture API
+
+[ImageCapture API](https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture) 接口提供了从相机或其他摄影设备捕获图像或照片的方法。
+
+ImageCapture API 允许网页应用程序访问和控制用户的计算机上的摄像头。这使得开发人员创建的网页应用程序，可以让用户拍摄照片或视频，并将其上传到网页或将其发送到后端服务器。
+
+## 获取权限
+
+要使用 ImageCapture API，首先需要让用户授权访问其摄像头。这可以通过使用 `navigator.permissions.query()` 方法来完成。例如：
+
+```js
+navigator.permissions.query({ name: 'camera' }).then(function (result) {
+  if (result.state == 'granted') {
+    // 用户已授权访问摄像头
+  } else if (result.state == 'prompt') {
+    // 用户尚未授权访问摄像头，需要请求授权
+  } else if (result.state == 'denied') {
+    // 用户拒绝了访问摄像头的请求
+  }
+})
+```
+
+## 访问摄像头
+
+如果用户已授权访问摄像头，则可以使用 `navigator.mediaDevices.getUserMedia()` 方法获取摄像头的流。例如：
+
+```js
+navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+  // 将流播放到 video 元素上
+  const videoElement = document.getElementById('video')
+  videoElement.srcObject = stream
+})
+```
+
+然后，可以使用 ImageCapture 构造函数来创建一个新的 ImageCapture 对象，该对象可以用于访问和控制摄像头。例如：
+
+```js
+const imageCapture = new ImageCapture(stream.getVideoTracks()[0])
+```
+
+ImageCapture 对象提供了许多方法，可用于拍摄照片、获取摄像头的信息和设置摄像头的参数。具体来说，可以使用以下方法：
+
+- `captureFrame` 方法返回一个包含当前摄像头帧的图像数据的 ImageBitmap 对象。
+- `grabFrame()` 方法可以获取摄像头的当前帧并返回一个 ImageBitmap 对象。
+- `takePhoto()` 方法拍摄一张照片并返回一个包含照片数据的 Blob 对象。
+- `getCapabilities()` 方法返回一个对象，其中包含有关摄像头功能的信息，如光圈、快门速度和 ISO 的范围。
+- `getPhotoCapabilities()` 方法返回一个对象，其中包含有关摄像头拍摄照片功能的信息，如分辨率、图像质量和对焦模式的范围。
+- `setOptions()` 方法设置摄像头的参数，如光圈、快门速度和 ISO。
+
+> ImageBitmap 对象是一种图像数据类型，它可以高效地处理和显示图像。它可以用于在网页中显示图像，或将图像数据发送到后端服务器进行处理。
+
+下面是一个示例，展示了如何使用这些方法：
+
+```js
+// 拍摄照片
+imageCapture.takePhoto().then((blob) => {
+  // 将照片显示在 img 元素上
+  const imgElement = document.getElementById('img')
+  imgElement.src = URL.createObjectURL(blob)
+})
+
+// 获取摄像头功能信息
+imageCapture.getCapabilities().then((capabilities) => {
+  console.log('摄像头功能：', capabilities)
+})
+
+// 设置摄像头参数
+imageCapture.setOptions({
+  imageHeight: 480,
+  imageWidth: 640,
+  iso: 100
+})
+```
+
+如果需要获取摄像头的当前帧，还可以：
+
+```js
+// 获取摄像头的当前帧
+imageCapture.grabFrame().then((imageBitmap) => {
+  // 将图像数据显示在 canvas 元素上
+  const canvas = document.getElementById('canvas')
+  const context = canvas.getContext('2d')
+  context.drawImage(imageBitmap, 0, 0)
+})
+```
+
+需要注意，使用 `grabFrame` 方法时，需要保证摄像头流正在播放。如果摄像头流已停止，则会返回一个 rejected Promise。
+
+此外，`grabFrame` 方法还可以接受一个可选的参数，用于设置图像的分辨率。这里不在赘述。
+
+[一个 ImageCapture API 的演示地址](https://codepen.io/lio-zero/pen/OJvyqdK)
+
+## 浏览器的支持情况
+
+[ImageCapture API 支持情况](https://caniuse.com/mdn-api_imagecapture)：
+
+![ImageCapture API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-9654b88c3f3e8f52.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+还需要注意，ImageCapture API 仅在支持 [`getUserMedia()` API](<https://github.com/lio-zero/blog/blob/main/Web%20API/getUserMedia()%20%E6%96%B9%E6%B3%95.md>) 的浏览器中可用，这意味着仅在现代浏览器中才能使用它。此外，还需要注意，ImageCapture API 仅能访问和控制摄像头，而不能访问摄像头的音频流。如果需要访问摄像头的音频流，可以使用 [MediaStream API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream)。
+
+## 最后
+
+ImageCapture API 可以让你在网页中访问和控制摄像头，从而为用户提供更丰富的体验。
diff --git a/Web API/IndexedDB.md b/Web API/IndexedDB.md
new file mode 100644
index 0000000..60cb4d1
--- /dev/null
+++ b/Web API/IndexedDB.md	
@@ -0,0 +1,298 @@
+# IndexedDB
+
+> MDN：[IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) 是一种底层异步 API，浏览器内置的数据库，用于在客户端存储大量的结构化数据（也包括文件/[二进制大对象 blob](https://github.com/lio-zero/blog/blob/main/JavaScript/Blob%20%E5%AF%B9%E8%B1%A1.md)）。
+
+IndexedDB 是多年来引入浏览器的存储功能之一。它是一种键/值存储（noSQL 数据库，非关系型的数据库），被认为是在浏览器中存储数据的最终解决方案。
+
+它是一个异步 API，这意味着执行昂贵的操作不会阻塞 UI 线程为用户提供草率的体验。它可以存储无限量的数据，但一旦超过某个阈值，用户会被提示给网站更高的限制。
+
+所有现代浏览器都支持 [IndexedDB](http://caniuse.com/#feat=indexeddb)。
+
+![IndexedDB 支持情况](https://upload-images.jianshu.io/upload_images/18281896-7e4e1f68409d6e08.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+它支持事务、版本控制并提供良好的性能。
+
+在浏览器内部，我们还可以使用：
+
+- [Cookie](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/HTTP%20Cookie.md) — 可以承载非常少量的字符串（容量 ~4kb）
+- Web Storage（或 DOM Storage），通常用于标识 `localStorage` 和 `sessionStorage` 这两个键/值存储的术语。`sessionStorage` 不保留数据，会话结束时清除数据，`localStorage` 保留跨会话的数据，不主动清除，永远保留数据。
+
+`localStorage` 和 `sessionStorage` 的缺点是存储大小有限且不一致，浏览器实现为每个网站提供 2MB 到 10MB 的存储空间。
+
+过去我们也有 Web SQL，它是 SQLite 的包装器，但现在一些现代浏览器**已弃用**和不支持它，它从未成为公认的标准，因此不应该使用它。
+
+虽然技术上可以为每个网站创建多个数据库，但通常只**创建一个数据库**，并且在该数据库中可以创建**多个对象库（Object Store）**，可以理解为一张张表。
+
+数据库对域来说是私有的，因此任何其他网站都无法访问另一个网站 IndexedDB 存储。
+
+存储包含许多具有唯一键的项，该键表示可以识别对象的方式。
+
+您可以通过执行添加、编辑和删除操作，并迭代它们所包含的项，使用事务更改这些存储。
+
+## IndexedDB 特点
+
+总结一下上面介绍的 IndexedDB 特点：
+
+- **储存空间大** — 相比于其他本地存储，IndexedDB 存储空间几乎无限量，但一旦超过某个阈值，用户会被提示给网站更高的限制。
+- **支持二进制储存** — IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
+- **同源限制** — 数据库对域来说是私有的，因此任何其他网站都无法访问另一个网站 IndexedDB 存储。
+- **异步** — 使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用。
+- **支持事务** — 执行一系列操作，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
+- **键值对储存** — IndexedDB 内部采用**对象库（object store）**存放数据。所有类型的数据都可以直接存入，包括**字符串、数字、对象、数组、日期**。对象库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是唯一的，不能有重复，否则会抛出一个错误。
+
+## IndexedDB 库
+
+IndexedDB API 功能强大，但对于简单的情况可能看起来太复杂如果你更喜欢一个简单的 API，请尝试：
+
+- [localForage](https://localforage.github.io/localForage/) — 一个简单的 Polyfill，提供了简单的客户端数据存储的值语法。它在后台使用 IndexedDB，并且在不支持 IndexedDB 的浏览器中回退到 WebSQL 或 localStorage。
+- [Dexie.js](http://www.dexie.org/) — IndexedDB 的包装，通过简单的语法，可以进行代码开发。
+- [pouchdb](https://pouchdb.com/) — 使用 IndexedDB 在浏览器中实现 CouchDB 的客户端。
+- [idb](https://www.npmjs.com/package/idb) — 一个微小的（〜115k）库，大多数 API 类似，但做了一些细微的改进，让数据库的空间有了很大的提升。
+- [idb-keyval](https://www.npmjs.com/package/idb-keyval) — 使用 IndexedDB 实现的超级简单且小巧的键（~600B）基于 Promise 对值存储。
+- [JsStore](https://jsstore.net/) — 一个 SQL 语法的 IndexedDB 包装器。
+- [lovefield](https://github.com/google/lovefield) — Lovefield Web App 的关系数据库，使用安全的 JavaScript 编写环境，可以用于不同的浏览中运行，类似 SQL 的 API，速度快、方便易用。
+- [MiniMongo](https://github.com/mWater/minimongo) — 由 localstorage 支持的客户端内存中的 mongodb，通过 http 进行服务器同步。MeteorJS 使用 MiniMongo。
+
+这些库使 IndexedDB 对开发者来说更加友好。
+
+下面我将使用 [idb](https://github.com/jakearchibald/idb) 库提供使用示例，如果您想了解原生 IndexedDB API 操作可以阅读阮一峰老师的[浏览器数据库 IndexedDB 入门教程](http://www.ruanyifeng.com/blog/2018/07/indexeddb.html)，其中可以了解一些未在本文中涉及的基本概念（很重要）。
+
+## 创建 IndexedDB 数据库
+
+最简单的方法是使用 CDN unpkg：
+
+```html
+<script type="module">
+  import { openDB, deleteDB } from 'https://unpkg.com/idb?module'
+</script>
+```
+
+在使用 IndexedDB API 之前，请始终确保在浏览器中检查支持，即使它广泛可用，但您永远不知道用户正在使用的是哪种浏览器：
+
+```js
+;(() => {
+  'use strict'
+
+  if (!('indexedDB' in window)) {
+    console.warn('IndexedDB not supported')
+    return
+  }
+
+  // ...IndexedDB code
+})()
+```
+
+接着，使用 `openDB()` 创建数据库：
+
+```js
+;(async () => {
+  // ...
+
+  const dbName = 'mydbname'
+  const storeName = 'store1'
+  const version = 1 // 版本从 1 开始（默认）
+
+  const db = await openDB(dbName, version, {
+    upgrade(db, oldVersion, newVersion, transaction) {
+      const store = db.createObjectStore(storeName)
+    }
+  })
+})()
+```
+
+前两个参数是数据库名称和版本号。第三个参数（可选）是一个对象，它包含一个仅在版本号高于当前安装的数据库版本时才调用的 `upgrade` 函数。在函数体中，您可以升级数据库的结构（对象库和索引）。
+
+## 将数据添加到对象库中
+
+### 创建对象库时添加数据，并对其进行初始化
+
+可以使用对象库的 `put` 方法，但首先我们需要一个对它的引用，可以从 `db.createObjectStore()` 中获取。
+
+使用 `put` 时，值是第一个参数，键是第二个参数。这是因为如果在创建对象库时指定 `keyPath`，则不需要在每个 `put()` 请求中输入键名，只需写入值即可。
+
+这将在我们创建 `store0` 后立即填充它：
+
+```js
+;(async () => {
+  //...
+  const dbName = 'mydbname'
+  const storeName = 'store0'
+  const version = 1
+
+  const db = await openDB(dbName, version, {
+    upgrade(db, oldVersion, newVersion, transaction) {
+      const store = db.createObjectStore(storeName)
+      store.put('Hello world!', 'Hello')
+    }
+  })
+})()
+```
+
+### 使用事务在已创建对象库时添加数据
+
+要在以后添加项目，您需要创建一个读/写事务，以确保数据库的完整性（如果操作失败，事务中的所有操作都将回滚，状态将回到已知状态）。
+
+为此，使用对调用 `openDB` 时获得的 `dbPromise` 对象的引用，然后运行：
+
+```js
+;(async () => {
+  //...
+  const dbName = 'mydbname'
+  const storeName = 'store0'
+  const version = 1
+
+  const db = await openDB(/* ... */)
+
+  const tx = db.transaction(storeName, 'readwrite')
+  const store = await tx.objectStore(storeName)
+
+  const val = 'hey!'
+  const key = 'Hello again'
+  const value = await store.put(val, key)
+  await tx.done
+})()
+```
+
+## 从对象库获取数据
+
+使用 `get()` 方法从对象库中获取一项：
+
+```js
+const key = 'Hello again'
+const item = await db.transaction(storeName).objectStore(storeName).get(key)
+```
+
+使用 `getAllKeys` 方法获取存储的所有键：
+
+```js
+const items = await db
+  .transaction(storeName)
+  .objectStore(storeName)
+  .getAllKeys()
+```
+
+使用 `getAll` 方法获取所有存储的值：
+
+```js
+const items = await db.transaction(storeName).objectStore(storeName).getAll()
+```
+
+## 从 IndexedDB 中删除数据
+
+删除数据库、对象库和数据。
+
+### 删除数据库
+
+使用 `deleteDB()` 方法删除整个 IndexedDB 数据库：
+
+```js
+const dbName = 'mydbname'
+await deleteDB(dbName)
+```
+
+### 删除对象库
+
+使用事务删除对象库中的数据：
+
+```js
+;(async () => {
+  //...
+
+  const dbName = 'mydbname'
+  const storeName = 'store1'
+  const version = 1
+
+  const db = await openDB(dbName, version, {
+    upgrade(db, oldVersion, newVersion, transaction) {
+      const store = db.createObjectStore(storeName)
+    }
+  })
+
+  const tx = await db.transaction(storeName, 'readwrite')
+  const store = await tx.objectStore(storeName)
+
+  const key = 'Hello again'
+  await store.delete(key)
+  await tx.done
+})()
+```
+
+### 从数据库的早期版本迁移
+
+```js
+const name = 'mydbname'
+const version = 1
+
+openDB(name, version, {
+  upgrade(db, oldVersion, newVersion, transaction) {
+    console.log(oldVersion)
+  }
+})
+```
+
+在这个回调中，您可以检查用户正在更新哪个版本，并相应地执行一些操作。
+
+可以使用以下语法从以前的数据库版本执行迁移：
+
+```js
+;(async () => {
+  //...
+  const dbName = 'mydbname'
+  const storeName = 'store0'
+  const version = 1
+
+  const db = await openDB(dbName, version, {
+    upgrade(db, oldVersion, newVersion, transaction) {
+      switch (oldVersion) {
+        case 0: // 之前未创建数据库
+          // 版本 1 中引入的对象库
+          db.createObjectStore('store1')
+        case 1:
+          // 版本 2 中的新对象库
+          db.createObjectStore('store2', { keyPath: 'name' })
+      }
+      db.createObjectStore(storeName)
+    }
+  })
+})()
+```
+
+## 唯一键
+
+如案例 1 所示，`createObjectStore()` 接受指示数据库索引键的第二个参数。当您存储对象时，这非常有用：`put()` 调用不需要第二个参数，但可以只获取值（对象），键将映射到具有该名称的对象属性。
+
+索引为您提供了一种稍后通过该特定键检索值的方法，并且它必须是唯一的（每个项必须具有不同的键）
+
+可以将键设置为自动递增，因此不需要在客户端代码上跟踪它：
+
+```js
+db.createObjectStore('notes', { autoIncrement: true })
+```
+
+如果值尚未包含唯一键（例如，如果收集的电子邮件地址没有关联名称），请使用自动递增。
+
+## 检查对象库是否存在
+
+您可以通过调用 `objectStoreNames()` 方法来检查对象库是否已存在：
+
+```js
+const storeName = 'store1'
+
+if (!db.objectStoreNames.contains(storeName)) {
+  db.createObjectStore(storeName)
+}
+```
+
+## 最后
+
+以上内容仅仅是一些基础知识和 API 的基本用法。IndexedDB 还有很多高级的内容可以讨论。
+
+但本文到此就结束了，我希望这是一个良好的开端。
+
+更多内容往下看。
+
+## 更多资料
+
+- 原生 IndexedDB API 操作可以看看阮一峰老师的[浏览器数据库 IndexedDB 入门教程](http://www.ruanyifeng.com/blog/2018/07/indexeddb.html)
+- [How to Store Unlimited\* Data in the Browser with IndexedDB](https://www.sitepoint.com/indexeddb-store-unlimited-data/)
+- [IndexedDB](https://zh.javascript.info/indexeddb)
diff --git a/Web API/Intersection Observer.md b/Web API/Intersection Observer.md
new file mode 100644
index 0000000..cb8a87b
--- /dev/null
+++ b/Web API/Intersection Observer.md	
@@ -0,0 +1,86 @@
+# Intersection Observer
+
+[`IntersectionObserver`](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) 浏览器 API 将使我们能够轻松检测元素何时完全或部分出现在屏幕上。
+
+当您需要禁用 UI 直到屏幕上显示某些内容时，Intersection Observer 非常方便。
+
+例如，如果您使用过简书，您可能会发现当头部 `header` 滚动到一定区域时，会切换为另一个 `header`，以下是使用 Intersection Observer 实现的示例：
+
+```js
+const block = document.querySelector('.block')
+const header = document.querySelector('.header')
+const otherHeader = document.querySelector('.other-header')
+
+const observer = new IntersectionObserver((entries) => {
+  if (entries[0].intersectionRatio > 0) {
+    header.classList.remove('switch-header')
+    otherHeader.classList.remove('switch-other-header')
+  } else {
+    header.classList.add('switch-header')
+    otherHeader.classList.add('switch-other-header')
+  }
+})
+
+observer.observe(block)
+```
+
+[演示地址](https://codepen.io/lio-zero/pen/jOyQQrB)
+
+`IntersectionObserver` 是浏览器原生提供的构造函数，接受两个参数：
+
+- `callback` 是可见性变化时的回调函数
+- `option` 是配置对象（可选）
+
+构造函数的返回值是一个观察器实例。
+
+```js
+let io = new IntersectionObserver(callback, option)
+```
+
+实例的 `observe` 方法可以指定观察哪个 DOM 节点，需要观察多个节点，就要调用多次该方法：
+
+```js
+io.observe(el)
+```
+
+实例的 `unobserve` 方法可以停止观察：
+
+```js
+io.unobserve()
+```
+
+实例的 `disconnect` 方法可以关闭观察：
+
+```js
+io.disconnect()
+```
+
+以上是它实例的几个方法。
+
+本来继续往下写的，但已经有很多关于它的教程了，这里推荐阮一峰老师的 [IntersectionObserver API 使用教程](https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)。
+
+以下是一些不错示例：
+
+- [示例一](https://codepen.io/lio-zero/pen/ZEBJNQg)
+- [示例二](https://codepen.io/michellebarker/full/xxwLpRG)
+- [返回顶部](https://codepen.io/lio-zero/pen/JjEpajw)
+
+还有很多示例，包括懒加载、无限滚动、虚拟列表等，您可以进一步阅读下面的文章。
+
+## 更多资料
+
+关于 IntersectionObserver API 的文章很多，以下是一些不错的文章：
+
+- [Intersection Observer comes to Firefox](https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox/)
+- [Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver](https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/)
+- [Implementing Infinite Scroll And Image Lazy Loading In React](https://www.smashingmagazine.com/2020/03/infinite-scroll-lazy-image-loading-react/)
+- [Using IntersectionObserver to Check if Page Scrolled Past Certain Point](https://css-tricks.com/using-intersectionobserver-to-check-if-page-scrolled-past-certain-point/)
+- [Sticky Table of Contents with Scrolling Active States](https://css-tricks.com/sticky-table-of-contents-with-scrolling-active-states/)
+- [How to Detect When a Sticky Element Gets Pinned](https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/)
+- [A Few Functional Uses for Intersection Observer to Know When an Element is in View](https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/)
+- [Lazy Loading Images with Vue.js Directives and Intersection Observer](https://css-tricks.com/lazy-loading-images-with-vue-js-directives-and-intersection-observer/)
+- [Styling Based on Scroll Position](https://css-tricks.com/styling-based-on-scroll-position/)
+- [Parsing Markdown into an Automated Table of Contents](https://css-tricks.com/parsing-markdown-into-an-automated-table-of-contents/)
+- [Lozad.js: Performant Lazy Loading of Images](https://css-tricks.com/lozad-js-performant-lazy-loading-images/)
+- [Table of Contents with IntersectionObserver](https://css-tricks.com/table-of-contents-with-intersectionobserver/)
+- [IntersectionObserver 实现虚拟列表初探](https://mp.weixin.qq.com/s/UEOE-nK2C8NyID2Xq1QwQw)
diff --git a/Web API/Network Information API.md b/Web API/Network Information API.md
new file mode 100644
index 0000000..2f49141
--- /dev/null
+++ b/Web API/Network Information API.md	
@@ -0,0 +1,44 @@
+# Network Information API
+
+[Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) 允许网页访问有关系统设备的网络连接信息，如连接类型（例如，wifi、cellular 等）、信号强度和数据传输速率。
+
+使用 Network Information API 可以在网页上显示有关网络连接信息的内容，也可以根据网络状态来调整网页的行为。例如，可以在网络连接速度较慢时，选择加载更小的图像或不加载某些内容。
+
+要使用 Network Information API，需要在网页中引入 `navigator.connection` 对象。这个对象的 `effectiveType` 属性可以返回当前网络的类型，可能的值包括 "slow-2g"、"2g"、"3g" 和 "4g"。它还有其他一些属性，详细内容请查阅 MDN。
+
+以下示例展示了如何使用 Network Information API 显示当前网络连接的类型：
+
+```js
+if (navigator.connection) {
+  const connection = navigator.connection
+  console.log(connection.effectiveType)
+}
+```
+
+Network Information API 还可以通过监听 `connection` 对象的 `change` 事件来跟踪网络状态的变化。这个事件会在网络连接类型或速度发生变化时触发。
+
+```js
+if (navigator.connection) {
+  navigator.connection.addEventListener('change', () => {
+    console.log(navigator.connection.effectiveType)
+  })
+}
+```
+
+需要注意的是，Network Information API 只能访问网络连接的一些信息，而无法访问具体的网络地址或个人信息。
+
+## 浏览器的支持情况
+
+[Network Information API 支持情况](https://caniuse.com/netinfo)：
+
+![Network Information API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-cdfe20a877ead084.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+Network Information API 还处于实验阶段，不是所有浏览器都支持。在使用之前，应该先检查浏览器是否支持这个 API，以避免在不支持的浏览器中出现错误。
+
+## 最后
+
+使用 Network Information API 可以在网页中创建更加高效和适应性强的应用，但要谨慎使用，以免影响用户体验。
+
+## 更多资料
+
+[How to detect internet speed in JavaScript](https://hackthestuff.com/article/how-to-detect-internet-speed-in-javascript) — 另一种检测网络速度的方法
diff --git a/Web API/Page Visibility API.md b/Web API/Page Visibility API.md
new file mode 100644
index 0000000..9828487
--- /dev/null
+++ b/Web API/Page Visibility API.md	
@@ -0,0 +1,104 @@
+# Page Visibility API
+
+[Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) 用于确定文档在显示器上是否可见的。
+
+以下是 MDN 所描述的：
+
+> 使用选项卡式浏览，任何给定网页都有可能在后台，因此对用户不可见。页面可见性 API 提供了您可以观察的事件，以便了解文档何时可见或隐藏，以及查看页面当前可见性状态的功能。
+
+在过去，如果需要监听可见性变化，可以使用 `blur` 和 `focus` 事件。
+
+```js
+window.addEventListener('focus', () => {
+  // do something
+})
+
+window.addEventListener('blur', () => {
+  // do something
+})
+```
+
+但这种方式不能准确的监听页面是否可见，因为 `blur` 事件是在页面失去焦点时触发的，所以当用户点击搜索栏、控制台或窗口边框等操作时，它就会被触发。
+
+Page Visibility API 的 `visibilitychange` 事件很好的解决了这种情况。
+
+## `visibilitychange` 事件
+
+当用户导航到一个新的页面、关闭标签页、最小化或关闭浏览器都将将触发 [visibilitychange](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event) 事件。
+
+```js
+// 页面的可见性状态发生变化
+document.addEventListener('visibilitychange', () => {
+  // do something
+})
+```
+
+Page Visibility API 提供了两个属性可以检查页面的浏览器选项卡是否聚焦：
+
+- `document.hidden`
+- `document.visibilityState`
+
+### `document.hidden`
+
+`document.hidden` 属性检查页面的浏览器选项卡是否可见或隐藏。
+
+```js
+const isBrowserTabFocused = () => !document.hidden
+
+isBrowserTabFocused() // true
+```
+
+### `document.visibilityState`
+
+`document.visibilityState` 表示页面所处的状态，当前页面的可见性，有三个取值：
+
+- `visible` — 页面彻底不可见。
+- `hidden` — 页面至少一部分可见。
+- `prerender` — 页面即将或正在渲染，处于不可见状态。
+
+以下示例在页面可见性变化时，修改页面标题：
+
+```js
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'hidden') {
+    document.title = '爱我'
+  } else {
+    document.title = '恨我'
+  }
+})
+```
+
+## 常见用途
+
+- 动画、视频和音频可以在页面显示时播放，在页面隐藏时暂停
+- 线上考试用户切换页面的警告提示
+- 停止轮询操作，一些实时获取数据的请求
+- etc
+
+以下是一个视频播放/暂停的简单示例：
+
+```js
+document.addEventListener('visibilitychange', function () {
+  if (document.visibilityState === 'hidden') {
+    video.pause()
+  }
+
+  if (document.visibilityState === 'visible') {
+    video.play()
+  }
+})
+```
+
+## 支持情况
+
+以下是 Can I Use 显示的各浏览器支持情况：
+
+![Page Visibility API](https://upload-images.jianshu.io/upload_images/18281896-cf5e202f34832618.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 最后
+
+页面可见性 API 对于节省资源和提高性能特别有用，它使页面在文档不可见时避免执行不必要的任务。
+
+## 更多资料
+
+更详细的内容可以阅读 MDN 或阮一峰的 [Page Visibility API 教程](https://www.ruanyifeng.com/blog/2018/10/page_visibility_api.html)。
diff --git a/Web API/Picture in Picture.md b/Web API/Picture in Picture.md
new file mode 100644
index 0000000..102c4c9
--- /dev/null
+++ b/Web API/Picture in Picture.md	
@@ -0,0 +1,87 @@
+# Picture in Picture
+
+[Picture-in-picture](https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API) （画中画）功能允许用户在一个小的叠加窗口中弹出网页中播放的视频，用于在浮动窗口上显示内容。它允许用户在与背景页面和其他网站交互时继续查看内容。
+
+[Picture in Picture 支持情况](https://caniuse.com/picture-in-picture)：
+
+![Picture in Picture 支持情况](https://upload-images.jianshu.io/upload_images/18281896-d69ddefd4562fb13.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 实现画中画
+
+一个 `video` 和一个切换画中画功能的按钮。
+
+```html
+<video id="video" src="video.mp4" controls autoplay />
+<button id="toggle">toggle</button>
+```
+
+JS 只需要调用 `video` 元素的 `requestPictureInPicture` 方法即可，然后再调用 `document` 对象下的 `exitPictureInPicture` 方法就可以关闭画中画功能了。
+
+另外，`document` 对象下的 `pictureInPictureElement` 指向画中画功能生效的那个 `video` 元素，如果没有开启画中画，那么返回值是 `null`
+
+`requestPictureInPicture` 和 `exitPictureInPicture` 都是异步 API 的，返回 Promise
+
+```js
+// 进入画中画
+video.requestPictureInPicture()
+// 退出画中画
+document.exitPictureInPicture()
+// 画中画生效的 video 元素
+document.pictureInPictureElement
+```
+
+我们可以检查 API 是否受支持，如下所示：
+
+```js
+const hasSupport = () => Boolean('pictureInPictureEnabled' in document)
+```
+
+## 画中画活动
+
+浏览器使我们能够检测视频何时进入画中画模式或离开画中画模式。由于可以进入或退出画中画模式，因此最好依靠事件检测来更新媒体控件。
+
+事件分别为 `enterpictureinpicture` 和 `leavepictureinpicture`，它们在视频进入或退出画中画模式时触发。
+
+在我们的示例中，我们需要根据视频当前是否处于画中画模式来更新 `button` 标签。
+
+```js
+video.addEventListener('enterpictureinpicture', () => {
+  button.textContent = '退出画中画模式'
+})
+
+video.addEventListener('leavepictureinpicture', () => {
+  button.textContent = '进入画中画模式'
+})
+```
+
+## 自定义画中画窗口
+
+默认情况下，浏览器在画中画窗口中显示**播放/暂停**按钮，除非视频正在播放[MediaStream 对象](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream)（由虚拟视频源（如相机，视频记录设备，屏幕共享服务或其他硬件产生）来源）。
+
+还可以添加直接从画中画窗口转到上一曲目或下一曲目的控件：
+
+```js
+navigator.mediaSession.setActionHandler('previoustrack', () => {
+  // Go to previous track
+})
+
+navigator.mediaSession.setActionHandler('nexttrack', () => {
+  // Go to next track
+})
+```
+
+## 禁用视频中的画中画
+
+`video` 的 `disablePictureInPicture` 属性可以禁用画中画：
+
+```html
+<video disablePictureInPicture controls src="video.mp4" />
+```
+
+为了减少代码占用太篇幅，没有提供完整的示例，点击此处 👉 查看[完整示例](https://codepen.io/lio-zero/pen/yLKyrwZ)。
+
+## 进一步阅读
+
+- [Picture-in-Picture standard](https://wicg.github.io/picture-in-picture)
+- [Picture-in-Picture Sample](https://googlechrome.github.io/samples/picture-in-picture/)
+- [An Introduction to the Picture-in-Picture Web API](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/)
diff --git a/Web API/Push API.md b/Web API/Push API.md
new file mode 100644
index 0000000..088d7e4
--- /dev/null
+++ b/Web API/Push API.md	
@@ -0,0 +1,397 @@
+# Push API
+
+[Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) 允许 Web 应用接收服务器推送的消息，即使 Web 应用当前未在浏览器中打开或未在设备上运行。
+
+使用 Push API，你可以向用户发送消息，将消息从服务器推送到客户端，即使用户没有浏览网站。
+
+这使你能够发送通知和内容更新，让你拥有更积极的受众。
+
+这是很大的提升，因为与原生应用相比，移动网络缺少的支柱之一是接收通知的能力，以及离线支持。
+
+以下是 Can I Use 提供的 [Push API 支持情況](https://caniuse.com/?search=Push%20API)：
+
+![Push API 支持情況](https://upload-images.jianshu.io/upload_images/18281896-4e8d39bd8df62a37.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 它如何工作？
+
+当用户访问你的 Web 应用时，你可以触发一个面板，询问是否允许发送更新。安装了一个 Service Worker，并在后台运行，以监听推送事件。
+
+> 推送和通知是一个独立的概念和 API，有时由于 iOS 中使用的推送通知术语而混为一谈。基本上，当使用 Push API 接收到推送事件时，就会调用 [Notifications API](https://github.com/lio-zero/blog/blob/main/Web%20API/Web%20Notification%20API.md)。
+
+你的服务器将通知发送到客户端，如果获得权限，Service Worker 将接收推送事件。Service Worker 通过触发通知对此事件做出响应。
+
+## 获得用户的权限
+
+使用 Push API 的第一步是获得用户从你那里接收数据的权限。
+
+许多网站对这个面板的实现很糟糕，在第一页加载时就显示出来了。用户还不相信你的内容是好的，他们通常会拒绝权限。需要有一个好的做法。
+
+有 6 个步骤：
+
+- 检查是否支持 Service Worker
+- 检查是否支持 Push API
+- 注册一个 Service Worker
+- 向用户请求权限
+- 订阅用户并获取 PushSubscription 对象
+- 将 PushSubscription 对象发送到服务器
+
+### 检查是否支持 Service Worker
+
+```js
+const hasSupportServiceWorker = () => Boolean('serviceWorker' in navigator)
+
+// 不支持 service Worker 直接返回
+if (!hasSupportServiceWorker) return
+```
+
+### 检查是否支持 Push API
+
+```js
+const hasSupportPushManager = () => Boolean('PushManager' in navigator)
+
+// 不支持 Push API 直接返回
+if (!hasSupportPushManager) return
+```
+
+### 注册 Service Worker
+
+此代码注册位于 `worker.js` 域根目录中的文件中的 Service Worker：
+
+```js
+window.addEventListener('load', () => {
+  navigator.serviceWorker.register('/worker.js').then(
+    (registration) => {
+      console.log(`Service Worker 注册已完成: ${registration.scope}`)
+    },
+    (err) => {
+      console.log('Service Worker 注册失败', err)
+    }
+  )
+})
+```
+
+你可以查阅 [Service Worker](https://github.com/lio-zero/blog/blob/main/Web%20API/Service%20Worker.md) 了解它是如何工作的。
+
+### 向用户请求权限
+
+现在 Service Worker 已注册，你可以请求权限。
+
+实现这一点的 API 随着时间的推移发生了变化，它从接受回调函数作为参数变为返回 Promise，打破了向后和向前的兼容性，我们需要做一下兼容处理，因为我们不知道用户的浏览器实现了哪种方法。
+
+我们调用 `Notification.requestPermission()`，代码如下：
+
+```js
+const askPermission = () => {
+  return new Promise((resolve, reject) => {
+    const permissionResult = Notification.requestPermission((result) => {
+      resolve(result)
+    })
+
+    if (permissionResult) {
+      permissionResult.then(resolve, reject)
+    }
+  }).then((permissionResult) => {
+    if (permissionResult !== 'granted') {
+      throw new Error('没有权限')
+    }
+  })
+}
+```
+
+`permissionResult` 值是一个字符串，其值可以为：
+
+- `granted`
+- `default`
+- `denied`
+
+此代码使浏览器显示权限对话框：
+
+![浏览器权限对话框](https://upload-images.jianshu.io/upload_images/18281896-6553d8f09248dede.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果用户点击**禁止按钮**，你将无法再请求用户的许可，除非他们在浏览器的**高级设置**面板中取消阻止该网站（这种情况不太可能发生）。
+
+### 订阅用户并获取 PushSubscription 对象
+
+如果用户允许我们，我们可以订阅它并调用 `registration.pushManager.subscribe()`：
+
+```js
+const APP_SERVER_KEY = 'XXX'
+
+window.addEventListener('load', () => {
+  navigator.serviceWorker.register('/worker.js').then(
+    (registration) => {
+      askPermission()
+        .then(() => {
+          const options = {
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(APP_SERVER_KEY)
+          }
+          return registration.pushManager.subscribe(options)
+        })
+        .then((pushSubscription) => {
+          // 现在，我们有了 pushSubscription 对象
+        })
+    },
+    (err) => {
+      console.log('Service Worker 注册失败', err)
+    }
+  )
+})
+```
+
+`APP_SERVER_KEY` 是一个字符串，称为 **Application SERVER KEY** 或 **VAPID KEY**，用于标识应用程序公钥，是公钥/私钥对的一部分。
+
+出于安全原因，它将作为验证的一部分，以确保你（并且只有你，而不是其他人）可以将推送消息发送回用户。
+
+### 将 PushSubscription 对象发送到服务器
+
+在前面的代码段中，我们得到了 `pushSubscription` 对象，它包含了向用户发送推送消息所需的全部内容。我们需要将此信息发送到服务器，以便以后能够发送通知。
+
+首先，我们创建对象的 JSON 表示：
+
+```js
+const subscription = JSON.stringify(pushSubscription)
+```
+
+我们可以使用 Fetch API 将其发布到我们的服务器：
+
+```js
+const sendToServer = (subscription) => {
+  return fetch('/api/subscription', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(subscription)
+  })
+    .then((res) => {
+      if (!res.ok) throw new Error('发生错误')
+      return res.json()
+    })
+    .then(({ data }) => {
+      if (!(data && data.success)) throw new Error('发生错误')
+    })
+}
+
+sendToServer(subscription)
+```
+
+在服务器端，`/api/subscription` 接口接收 POST 请求，并可以将订阅信息存储到其存储器中。
+
+## 服务器端的工作方式
+
+到目前为止，我们只讨论了客户端部分：**获得用户的权限以便在将来收到通知**。
+
+**服务器呢？它应该做什么，以及如何与客户端交互？**
+
+这些服务器端示例，我们使用最熟悉的 Node.js Express.js 作为基本 HTTP 框架，但你可以使用任何语言或框架编写服务器端 Push API 处理程序。
+
+### 注册新的客户端订阅
+
+当客户端发送新订阅时，请记住我们使用了 `/api/subscription` HTTP POST 接口，在 `body` 中以 JSON 格式发送 `PushSubscription` 对象详细信息。
+
+我们初始化 Express.js：
+
+```js
+const express = require('express')
+const app = express()
+```
+
+以下函数确保请求有效，具有 body 和接口属性，否则它会向客户端返回错误：
+
+```js
+const isValidSaveRequest = (req, res) => {
+  if (!req.body || !req.body.endpoint) {
+    res.status(400)
+    res.setHeader('Content-Type', 'application/json')
+    res.send(
+      JSON.stringify({
+        error: {
+          id: 'no-endpoint',
+          message: '订阅必须有一个端点'
+        }
+      })
+    )
+    return false
+  }
+  return true
+}
+```
+
+下一个函数将订阅保存到数据库中，返回在插入完成（或失败）时解析的 Promise。`insertToDatabase` 函数是一个占位符，我们这里不讨论这些细节：
+
+```js
+const saveSubscriptionToDatabase = (subscription) => {
+  return new Promise((resolve, reject) => {
+    insertToDatabase(subscription, (err, id) => {
+      if (err) {
+        reject(err)
+        return
+      }
+
+      resolve(id)
+    })
+  })
+}
+```
+
+我们在下面的 POST 请求处理程序中使用这些函数。我们检查请求是否有效，然后保存请求，然后将 `data.success: true` 响应返回给客户端，或返回错误：
+
+```js
+app.post('/api/subscription', (req, res) => {
+  if (!isValidSaveRequest(req, res)) return
+
+  saveSubscriptionToDatabase(req, res.body)
+    .then((subscriptionId) => {
+      res.setHeader('Content-Type', 'application/json')
+      res.send(JSON.stringify({ data: { success: true } }))
+    })
+    .catch((err) => {
+      res.status(500)
+      res.setHeader('Content-Type', 'application/json')
+      res.send(
+        JSON.stringify({
+          error: {
+            id: 'unable-to-save-subscription',
+            message: '已收到订阅，但未能保存它'
+          }
+        })
+      )
+    })
+})
+
+app.listen(3000, () => {
+  console.log('Listening on port 3000')
+})
+```
+
+### 发送推送消息
+
+现在服务器已经在其列表中注册了客户端，我们可以向其发送推送消息。让我们通过创建一个示例代码段来了解其工作原理，该代码段获取所有订阅并同时向所有订阅发送推送消息。
+
+此示例中，我们会使用 [web-push](https://github.com/web-push-libs/web-push) 库来处理发送推送消息。
+
+> 我们之所以使用库，是因为 Web Push 协议很复杂，而库允许我们抽象出许多低级代码，以确保我们能够安全、正确地处理任何边缘情况。
+
+首先，我们初始化生成一个私钥和公钥，并将它们设置为 VAPID 详细信息：
+
+```js
+const webpush = require('web-push')
+const vapidKeys = webpush.generateVAPIDKeys()
+
+const PUBLIC_KEY = 'XXX'
+const PRIVATE_KEY = 'YYY'
+
+const vapidKeys = {
+  publicKey: PUBLIC_KEY,
+  privateKey: PRIVATE_KEY
+}
+
+webpush.setVapidDetails(
+  'mailto:my@email.com',
+  vapidKeys.publicKey,
+  vapidKeys.privateKey
+)
+```
+
+然后，我们设置一个 `triggerPush()` 方法，负责将推送事件发送给客户端。它只是调用 `webpush.sendNotification()` 并捕获任何错误。如果返回错误 HTTP 状态代码是 410，这意味着用户离开了，我们从数据库中删除该订阅者。
+
+```js
+const triggerPush = (subscription, dataToSend) => {
+  return webpush.sendNotification(subscription, dataToSend).catch((err) => {
+    if (err.statusCode === 410) {
+      return deleteSubscriptionFromDatabase(subscription.id)
+    } else {
+      console.log('订阅已不再有效: ', err)
+    }
+  })
+}
+```
+
+我们没有实现从数据库中获取订阅，但我们将其保留：
+
+```js
+const getSubscriptionsFromDatabase = () => {
+  // stub
+}
+```
+
+代码的核心是将 POST 请求回调到 `/api/push` 接口：
+
+```js
+app.post('/api/push', (req, res) => {
+  return getSubscriptionsFromDatabase()
+    .then((subscriptions) => {
+      let promiseChain = Promise.resolve()
+      for (let i = 0; i < subscriptions.length; i++) {
+        const subscription = subscriptions[i]
+        promiseChain = promiseChain.then(() =>
+          triggerPush(subscription, dataToSend)
+        )
+      }
+      return promiseChain
+    })
+    .then(() => {
+      res.setHeader('Content-Type', 'application/json')
+      res.send(JSON.stringify({ data: { success: true } }))
+    })
+    .catch((err) => {
+      res.status(500)
+      res.setHeader('Content-Type', 'application/json')
+      res.send(
+        JSON.stringify({
+          error: {
+            id: 'unable-to-send-messages',
+            message: `发送推送失败 ${err.message}`
+          }
+        })
+      )
+    })
+})
+```
+
+上面的代码所做的工作是：从数据库中获取所有订阅，然后对它们进行迭代，并调用我们前面解释的 `triggerPush()` 函数。
+
+订阅完成后，我们会返回一个成功的 JSON 响应，除非发生错误并返回 500 错误。
+
+### 现实场景中
+
+除非你有一个非常特殊的用例，或者你只是想学习技术或者你喜欢 DIY，否则你不太可能建立自己的推送服务器。相反，你通常希望使用 [OneSignal](https://onesignal.com) 之类的平台，它可以透明地免费处理所有平台的 Push 事件，包括 Safari 和 iOS。
+
+## 接收推送事件
+
+**当从服务器发送推送事件时，客户端如何获取它？**
+
+客户端很简单，我们只需要在 Service Worker 内部运行，并监听 `push` 事件：
+
+```js
+self.addEventListener('push', (event) => {
+  console.log('data: ', event.data)
+})
+```
+
+`event.data` 包含 PushMessageData 对象，该对象以你想要的格式公开检索服务器发送的推送数据的方法：
+
+- `arrayBuffer()` - 作为 ArrayBuffer 对象
+- `blob()` - 作为 Blob 对象
+- `json()` - 解析为 JSON
+- `text()` - 纯文本
+
+你通常会使用 `event.data.json()`。
+
+## 显示通知
+
+它与 Notifications API 有一些交集，因为 Push API 的主要用例之一是显示通知。
+
+在 Service Worker 中的 `push` 事件监听器中，我们需要向用户显示通知，并告诉事件等待浏览器显示后，函数才能终止。我们延长事件生存周期，直到浏览器显示完通知（直到 Promise 得到解决），否则 Service Worker 可能会在处理过程中停止：
+
+```js
+self.addEventListener('push', (event) => {
+  const promiseChain = self.registration.showNotification('Hello, world!')
+  event.waitUntil(promiseChain)
+})
+```
+
+## 更多资料
+
+[Web Push Arrives in Firefox 44](https://hacks.mozilla.org/2016/01/web-push-arrives-in-firefox-44/)
diff --git a/Web API/Resize Observer API.md b/Web API/Resize Observer API.md
new file mode 100644
index 0000000..6f0c68a
--- /dev/null
+++ b/Web API/Resize Observer API.md	
@@ -0,0 +1,54 @@
+# Resize Observer API
+
+[Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。
+
+[Resize Observer API 支持情况](https://caniuse.com/?search=Resize%20Observer%20API)：
+
+![Resize Observer API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-a8f6e24e0ffffbf2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+响应迅速的 Web 应用程序会根据视口大小调整其内容。这通常是通过 CSS 和媒体查询来实现的。当 CSS 能力不够时，我们会使用 JavaScript。Javascript DOM 操作通过侦听 `window.resize` 事件与视口大小保持同步。
+
+现代的 Web 应用程序通过一系列组件构成，这些组件也需要响应。以往的方法（CSS 媒体查询，JS `window.resize`，以及其他 Hack）无法跟踪组件的大小。
+
+随着响应式 Web 应用的普及，对响应式组件的需求也会随之增长。ResizeObserver 的出现正是为组件提供响应大小变化的方式。
+
+## 示例：调整图像大小
+
+下面是一个使用 `ResizeObserver` 在调整图像大小的示例。
+
+```js
+const hasSupport = () => (window.ResizeObserver ? true : false)
+const range = document.getElementById('range')
+const img = document.getElementById('img')
+const text = document.getElementById('resize-value')
+
+function init() {
+  if (hasSupport()) {
+    let resizeObserver = new ResizeObserver(() => {})
+
+    resizeObserver.observe(img)
+  }
+
+  return '不支持 Resize Observer API'
+}
+
+function resize(e) {
+  const value = e.target.value
+
+  img.style.width = `${value}%`
+  text.textContent = `${value}%`
+}
+
+range.addEventListener('input', (e) => {
+  resize(e)
+})
+
+init()
+```
+
+[示例地址](https://codepen.io/lio-zero/pen/poLvXde)
+
+## 更多资料
+
+- [resize-observer](https://github.com/WICG/resize-observer)
+- [Resize Observer standard](https://drafts.csswg.org/resize-observer/)
diff --git a/Web API/SSE.md b/Web API/SSE.md
new file mode 100644
index 0000000..0243fe5
--- /dev/null
+++ b/Web API/SSE.md	
@@ -0,0 +1,95 @@
+# SSE
+
+[SSE](https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events)（Server Sent Events，服务器发送事件）是一种新的 HTTP API，用于将事件从服务器推送到客户端。
+
+与 WebSocket 不同，服务器发送的事件建立在 HTTP 协议之上，因此不需要 `ws://` URL 或额外的 npm 模块。
+
+SSE 还会[自动处理重新连接](https://web.dev/eventsource-basics/#toc-reconnection-timeout)，因此，如果连接丢失，无需编写代码重新连接。
+
+在客户端，我们可以使用 [`EventSource`](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Interfaces) 类连接到服务器端事件源。
+
+下面我们以 Node.js Express 框架作为服务器写一个简单的示例。
+
+在客户端，我们只需将 `EventSource` 类指向配置为处理 SSE 的 Express 路由，并监听 `message` 事件。
+
+```js
+const source = new EventSource('/events')
+
+source.addEventListener('message', (event) => {
+  console.log('New message: ', event.data)
+})
+```
+
+Express 方面比较复杂。要支持 SSE，我们需要设置 3 个 header，然后使用 [`flushHeaders()`](https://nodejs.org/api/http.html#http_request_flushheaders) 将 header 发送到客户端：
+
+- `Cache-Control: no-cache` — 不使用资源的缓存版本
+- `Content-Type: text/event-stream` — 所有客户端知道这个响应是一个 HTTP stream
+- `Connection: keep-alive` — 所有 Node.js 知道保持 HTTP socket 打开
+
+调用 `flushHeaders()` 后，你就可以开始使用 `res.write()` 方法编写事件了。
+
+**为什么使用 `res.write()` 而不使用 `res.send()` 或 `res.end()` 呢？**
+
+`res.write()` 方法写入 HTTP 连接而不显式结束 HTTP 响应。需要确保不使用 `res.send()` 或 `res.end()`，因为它们会显式结束响应。
+
+以下是使用 `/events` 接口处理 SSE 的独立 Express 服务器的示例：
+
+```js
+const express = require('express')
+const fs = require('fs')
+
+async function run() {
+  const app = express()
+
+  app.get('/events', async (req, res) => {
+    res.set({
+      'Cache-Control': 'no-cache',
+      'Content-Type': 'text/event-stream',
+      Connection: 'keep-alive'
+    })
+    res.flushHeaders()
+
+    // 如果连接丢失，告诉客户端每 10 秒重试一次
+    res.write('retry: 10000\n\n')
+    let count = 0
+
+    while (true) {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      console.log('Emit', ++count)
+      // 将包含当前 count 的 SSE 作为字符串发出
+      res.write(`data: ${count}\n\n`)
+    }
+  })
+
+  const index = fs.readFileSync('./index.html', 'utf8')
+  app.get('/', (req, res) => res.send(index))
+
+  await app.listen(3000)
+  console.log('Listening on port 3000')
+}
+
+run().catch(console.err)
+```
+
+这里需要注一下，服务器发送每一条消息由 `\n\n` 分割，一条消息有几个可用字段：
+
+- `data` — 消息体（body），一系列多个 `data` 被解释为单个消息，各个部分之间由 `\n` 分隔。
+- `id` — 更新 `lastEventId`，重连时以 `Last-Event-ID` 发送此 id。
+- `retry` — 建议重连的延迟，以 ms 为单位。无法通过 JavaScript 进行设置。
+- `event` — 事件名，必须在 `data:` 之前。
+
+如果存在疑问，可以查看下一节提供的链接，有详细讲解。
+
+运行上面的服务器，并访问 `http://localhost:3000`，打开控制台查看消息。
+
+## 最后
+
+本文介绍了什么是 SSE，以及使用一个 Express 示例，了解如何在客户端和服务端使用 SSE。
+
+关于 SSE 的详细内容，例如 `EventSource` 对象的具体事件/方法、服务器的响应格式等，可以查阅 [Server Sent Events](https://zh.javascript.info/server-sent-events)。
+
+## 更多资料
+
+- [Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2](https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2/)
+- [Implementing Push Technology Using Server-Sent Events](https://www.sitepoint.com/implementing-push-technology-using-server-sent-events/)
diff --git a/Web API/Screen Capture API.md b/Web API/Screen Capture API.md
new file mode 100644
index 0000000..2dc79c5
--- /dev/null
+++ b/Web API/Screen Capture API.md	
@@ -0,0 +1,48 @@
+# Screen Capture API
+
+[Screen Capture API](https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API) 对现有的媒体捕获和流 API 进行了补充，让用户选择一个屏幕或屏幕的一部分（如一个窗口）作为媒体流进行捕获。然后，该流可以被记录或通过网络与他人共享。
+
+```js
+const video = document.getElementById('screen-video')
+const hasSupport = () => Boolean('mediaDevices' in navigator)
+
+async function onCapture() {
+  video.srcObject = await navigator.mediaDevices.getDisplayMedia({
+    video: {
+      aspectRatio: 16 / 9
+    },
+    audio: {
+      echoCancellation: true,
+      sampleRate: 44100
+    }
+  })
+
+  const track = video.srcObject.getVideoTracks()[0]
+
+  console.info(JSON.stringify(track.getSettings(), null, 2))
+  console.info(JSON.stringify(track.getConstraints(), null, 2))
+}
+
+function onStop() {
+  const video = document.getElementById('screen-video')
+
+  video.srcObject.getTracks().forEach((stream) => stream.stop())
+
+  video.srcObject = null
+}
+
+startCapture.addEventListener('click', () => {
+  onCapture()
+})
+
+stopCapture.addEventListener('click', () => {
+  onStop()
+})
+```
+
+[示例地址](https://codepen.io/lio-zero/pen/KKowOrG)
+
+## 更多资料
+
+- [WebRTC-Experiment](https://github.com/muaz-khan/WebRTC-Experiment) — 用于音频/视频以及屏幕活动记录的 WebRTC JavaScript 库
+- [在浏览器中截屏](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%88%AA%E5%B1%8F.md)
diff --git a/Web API/Service Worker.md b/Web API/Service Worker.md
new file mode 100644
index 0000000..640f9b4
--- /dev/null
+++ b/Web API/Service Worker.md	
@@ -0,0 +1,261 @@
+# Service Worker
+
+[Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) 是渐进式 Web 应用的核心，因为它允许缓存资源和推送通知，这是迄今为止将原生应用的两个主要区别功能。
+
+Service Worker 是您的网页和网络之间的可编程代理，提供拦截和缓存网络请求的能力，有效地使您能够为应用创建离线优先体验。
+
+它是一种特殊的 [web worker](https://github.com/lio-zero/blog/blob/main/Web%20API/Web%20Worker.md)，是一种与网页相关联的 JavaScript 文件，在 worker 上下文上运行，与主线程分离，具有非阻塞的优点，因此可以在不牺牲 UI 响应性的情况下进行计算。
+
+它位于一个单独的线程上，没有 DOM 访问权限，也无法访问 [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) 和 [XHR API](https://github.com/lio-zero/blog/blob/main/Web%20API/XMLHttpRequest.md)，并且只能使用 [Channel Messaging API](https://github.com/lio-zero/blog/blob/main/Web%20API/Channel%20Messaging%20API.md) 与主线程通信。
+
+Service Worker 可以与其他 Web API 一起使用的有：
+
+- [Fetch API](https://github.com/lio-zero/blog/blob/main/Web%20API/Fetch%20API.md)
+- [Cache API](https://github.com/lio-zero/blog/blob/main/Web%20API/Cache%20API.md)
+
+它们仅在 HTTPS 协议页面上可用，但本地请求除外，本地请求不需要安全连接以便于测试。
+
+## 后台处理
+
+Service Worker 独立于与其关联的应用运行，并且可以在不活动时接收消息。
+
+例如，它们可以在以下情况正常工作：
+
+- 当您的移动应用处于后台时，未处于活动状态
+- 当您的移动应用关闭时，即使不在后台运行
+- 当浏览器关闭时，如果应用正在浏览器中运行
+
+Service Worker 主要场景是：
+
+- 它们可以用作缓存层来处理网络请求，并缓存脱机时使用的内容
+- 允许推送通知
+- Service Worker 仅在需要时运行，在不使用时停止
+
+## 离线支持
+
+传统上，Web 应用的离线体验一直很差。如果没有网络，网络移动应用通常无法运行，而本地移动应用能够提供工作版本或某种好消息。
+
+这不是一条好消息，但这是没有网络连接的 Chrome 中网页的样子：
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-518cf264a81ae23a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+也许这唯一的好处是你可以通过点击恐龙来玩一个免费的游戏，但它很快就会变得无聊。
+
+> 您可以通过在浏览器地址栏输入：chrome://dino/ 快速开始游戏。您可以在[有趣的 Chrome 彩蛋：谷歌小恐龙游戏](https://chinese.freecodecamp.org/news/do-you-know-the-chrome-dino-game-millions-of-people-are-playing/)详细了解它。
+
+在过去，HTML5 AppCache 已经承诺允许 Web 应用缓存资源并离线工作，但其缺乏灵活性和令人困惑的行为清楚地表明它不足以胜任这项工作，未能兑现其承诺（并且已经停止使用）。
+
+Service Worker 是离线缓存的新标准。
+
+### 在安装期间预缓存资源
+
+在整个应用中重复使用的资源，如图像、CSS、JavaScript 文件，可以在第一次打开应用时安装。
+
+这为所谓的 [App Shell](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure#app_shell) 架构奠定了基础。
+
+### 缓存网络请求
+
+使用 Fetch API，我们可以编辑来自服务器的响应，确定服务器是否不可访问，并提供来自缓存的响应。
+
+## Service Worker 生命周期
+
+Service Worker 需要经过 3 个步骤才能完全正常工作：
+
+- 注册
+- 安装
+- 激活
+
+### 注册
+
+注册告诉浏览器 Service Worker 在哪里，并在后台开始安装。
+
+注册 Service Worker 的示例代码位于 `worker.js`：
+
+```js
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/worker.js').then(
+      (registration) => {
+        console.log('Service Worker注册完成范围: ', registration.scope)
+      },
+      (err) => {
+        console.log('Service Worker 注册失败', err)
+      }
+    )
+  })
+} else {
+  console.log('不支持 Service worker')
+}
+```
+
+即使多次调用此代码，浏览器也只会在 Service Worker 是新的、之前未注册或已更新的情况下执行注册。
+
+#### 作用域
+
+`register()` 方法还接受一个作用域参数，该参数是一个路径，用于确定 Service Worker 可以控制应用的哪个部分。
+
+它默认为包含 Service Worker 文件的文件夹中包含的所有文件和子文件夹，因此如果您将其放在根文件夹中，它将控制整个应用。在子文件夹中，它将仅控制在该路由下可访问的页面。
+
+下面的示例通过指定 `/notifications/` 文件夹作用域来注册 worker。
+
+```js
+navigator.serviceWorker.register('/worker.js', {
+  scope: '/notifications/'
+})
+```
+
+`/` 很重要：在这种情况下，页面 `/notifications` 不会触发 Service Worker，而作用域如果是：
+
+```js
+{
+  scope: '/notifications'
+}
+```
+
+它会奏效的。
+
+> **注意**：Service Worker 无法从文件夹中**启动**自己，如果其文件放在 `/notifications` 下，则无法控制 `/` 路径或不在 `/notifications` 下的任何其他路径。
+
+### 安装
+
+如果浏览器确定某个 Service Worker 已过时或以前从未注册过，它将继续安装它。
+
+```js
+self.addEventListener('install', (event) => {
+  // ...
+})
+```
+
+这是事件可以通过初始化缓存来准备要使用的 Service Worker，并使用 Cache API 缓存应用 App Shell 和静态资源。
+
+### 激活
+
+激活阶段是 Service Worker 成功注册和安装后的第三步。
+
+此时，Service Worker 将能够处理新的页面加载。
+
+它无法与已加载的页面交互，这意味着 Service Worker 仅在用户第二次与应用交互或重新加载已打开的页面时才有用。
+
+```js
+self.addEventListener('activate', (event) => {
+  // ...
+})
+```
+
+此事件的一个良好用例是清理旧缓存和与旧版本相关但在新版本的 Service Worker 中未使用的内容。
+
+## 更新 Service Worker
+
+要更新 Service Worker，只需要改变一个字节，当运行注册代码时，它将被更新。
+
+一旦 Service Worker 被更新，它将不可用，直到所有加载了旧 Service Worker 的页面都被关闭。
+
+这确保了在已经工作的应用/页面上不会出现任何中断。
+
+刷新页面是不够的，因为旧的 worker 仍在运行，并且没有被删除。
+
+## 获取事件
+
+当在网络上请求资源时，将触发 `fetch` 事件。
+
+这使我们能够在发出网络请求之前查看缓存。
+
+例如，下面的代码段使用 Cache API 检查请求 URL 是否已存储在缓存的响应中，如果是这种情况，则返回缓存的响应。否则，它执行 `fetch` 请求并返回它。
+
+```js
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        // 在缓存中找到条目
+        return response
+      }
+      return fetch(event.request)
+    })
+  )
+})
+```
+
+## 后台同步
+
+后台同步允许延迟传出连接，直到用户具有一个工作网络连接。
+
+这是确保用户可以脱机使用应用并对其采取操作的关键，以及在连接打开时排队等待服务器端更新，而不是显示出试图获取信号的无休止的轮询。
+
+```js
+navigator.serviceWorker.ready.then((swRegistration) => {
+  return swRegistration.sync.register('event1')
+})
+```
+
+此代码在 Service Worker 中监听事件：
+
+```js
+self.addEventListener('sync', (event) => {
+  if (event.tag == 'event1') {
+    event.waitUntil(doSomething())
+  }
+})
+```
+
+`doSomething()` 返回一个 promise。如果失败，将安排另一个同步事件自动重试，直到成功。
+
+这还允许应用在有可用的工作连接时立即从服务器更新数据。
+
+## 推送事件
+
+Service Worker 通过使用以下工具，使 Web 应用能够向用户提供本机推送通知：
+
+- [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
+- [Notification API](https://github.com/lio-zero/blog/blob/main/Web%20API/Web%20Notification%20API.md)
+
+Push 和 Notification 实际上是两种不同的概念和技术，但它们结合起来提供了我们所知的推送通知。Push 提供了一种机制，允许服务器向 Service Worker 发送信息，Notification 是 Service Worker 向用户显示信息的方式。
+
+由于 Service Worker 即使在应用未运行时也会运行，因此他们可以监听即将到来的推送事件，并提供用户通知，或更新应用的状态。
+
+推送事件由后端通过浏览器推送服务（如 [Firebase](http://firebase.google.com) 提供的推送服务）启动。
+
+以下是 Service Worker 如何监听传入推送事件的示例：
+
+```js
+self.addEventListener('push', (event) => {
+  console.log('Received a push event', event)
+
+  const options = {
+    title: '我有个消息给你!',
+    body: '这是消息的正文',
+    icon: '/img/icon-192x192.png',
+    tag: 'tag-for-this-notification'
+  }
+
+  event.waitUntil(self.registration.showNotification(title, options))
+})
+```
+
+## 关于控制台日志的说明
+
+如果您在 Service Worker 中有任何控制台日志语句（`console.log` 等），请确保启用 Chrome DevTools 或等效工具提供的保留日志功能。
+
+否则，由于 Service Worker 在加载页面之前进行操作，并且在加载页面前清除了控制台，因此您将不会在控制台中看到任何日志。
+
+## 最后
+
+我最近在学习 Vite，并试图了解其源码。
+
+我发现了一个很棒的示例 [browser-vite](https://github.com/divriots/browser-vite)，作者将 Vite 成功的运行到浏览器上，而我们知道 Vite 是依赖 node 才能运行的。
+
+**它是如何实现的？**
+
+如作者所描述的，它由 Service Worker 提供服务。当然，不止这一点，您可以在提供的博文 [Vite in the browser](https://divriots.com/blog/vite-in-the-browser) 找到它所有的一切。
+
+这是一个不错的示例，将它作为学完基本 Service Worker 后的第一个用例把！
+
+## 更多资料
+
+- [Add a Service Worker to Your Site](https://css-tricks.com/add-a-service-worker-to-your-site/)
+- [Service Worker](https://frontendian.co/service-workers)
+- [Making A Service Worker: A Case Study](https://www.smashingmagazine.com/2016/02/making-a-service-worker/)
+- [Service workers explained](https://github.com/w3c/ServiceWorker/blob/main/explainer.md)
+- [借助 Service Worker 和 cacheStorage 缓存及离线开发](https://www.zhangxinxu.com/wordpress/2017/07/service-worker-cachestorage-offline-develop/)
+- [Service Worker 模拟单页应用 SPA](https://itnext.io/your-single-page-app-is-now-a-polyfill-7881fb01694e)
+- [Progressive web app structure](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/App_structure)
diff --git a/Web API/Speech Synthesis API.md b/Web API/Speech Synthesis API.md
new file mode 100644
index 0000000..8a91d50
--- /dev/null
+++ b/Web API/Speech Synthesis API.md	
@@ -0,0 +1,154 @@
+# Speech Synthesis API
+
+[Speech Synthesis API](https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesis) 是 Web Speech API 的一部分，同时也是 Speech Recognition API 的一部分，尽管目前仅在实验模式下在 Chrome 上支持。
+
+[Speech Synthesis API 的支持情况](https://caniuse.com/?search=Speech%20Synthesis%20API)：
+
+![Speech Synthesis API 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-b2fdec23f8d8ac94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 基本用法
+
+使用 Speech Synthesis API 的最简单示例仅限于一行：
+
+```js
+speechSynthesis.speak(new SpeechSynthesisUtterance('你好'))
+```
+
+将其复制并粘贴到您的浏览器控制台中，您的将听到这句话！
+
+## API
+
+`SpeechSynthesisUtterance` 代表语音请求。在上面的示例中，我们传递了一个字符串。这是浏览器应该大声读出的信息。
+
+获得语音对象后，可以执行一些调整来编辑语音属性：
+
+```js
+const utterance = new SpeechSynthesisUtterance('你好')
+```
+
+`SpeechSynthesis` 接口在 `window` 对象上可用。它的方法有 `speak()`、`pause()`、`cancel()`、`resume()` 和 `getVoices()`：
+
+- `speak()` —— 添加一个 utterance 到语音谈话队列；它将会在其他语音谈话播放完之后播放。
+- `pause()` —— 把 SpeechSynthesis 对象置为暂停状态。
+- `cancel()` —— 移除所有语音谈话队列中的谈话。
+- `resume()` —— 把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。
+- `getVoices()` —— 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。
+
+`SpeechSynthesisUtterance` 的实例属性有：
+
+- `utterance.rate` — 设置速度，接受 [0.1 - 10] 之间，默认为 1
+- `utterance.pitch` — 设置音高，接受 [0 - 2] 之间，默认为 1
+- `utterance.volume` — 设置音量，接受 [0 - 1] 之间，默认为 1
+- `utterance.lang` — 设置语言（值使用 BCP 47 语言标记，比如 en-US 或 it-IT）
+- `utterance.text` — 您可以将其作为属性传递，而不是在构造函数中进行设置。文本最多可包含 32767 个字符
+- `utterance.voice` — 设置语音
+
+示例：
+
+```js
+const utterance = new SpeechSynthesisUtterance('你好')
+utterance.pitch = 1.5
+utterance.volume = 0.5
+utterance.rate = 8
+speechSynthesis.speak(utterance)
+```
+
+下文是上面一些方法更详细的讲解。
+
+## 设置声音
+
+浏览器有不同数量的可用语音。要查看列表，请使用以下代码：
+
+```js
+console.log(`Voices #: ${speechSynthesis.getVoices().length}`)
+
+speechSynthesis.getVoices().forEach((voice) => {
+  console.log(voice.name, voice.lang)
+})
+```
+
+![可用语音列表](https://upload-images.jianshu.io/upload_images/18281896-67b64a6ae806c0d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 跨浏览器实现以获取语言
+
+由于我们有这种差异，我们需要一种方法来抽象它，以使用 API。本例进行了以下抽象：
+
+```js
+const getVoices = () => {
+  return new Promise((resolve) => {
+    let voices = speechSynthesis.getVoices()
+    if (voices.length) {
+      resolve(voices)
+      return
+    }
+
+    speechSynthesis.addEventListener('voiceschanged', () => {
+      voices = speechSynthesis.getVoices()
+      resolve(voices)
+    })
+  })
+}
+
+const printVoicesList = async () => {
+  ;(await getVoices()).forEach((voice) => {
+    console.log(voice.name, voice.lang)
+  })
+}
+
+printVoicesList()
+```
+
+## 使用自定义语言
+
+默认语音说英语。
+
+通过设置 `lang` 属性，您可以使用任何想要的语言：
+
+```js
+let utterance = new SpeechSynthesisUtterance('中国')
+utterance.lang = 'zh-CN'
+speechSynthesis.speak(utterance)
+```
+
+## 使用另一个声音
+
+你可以有多个可用的声音选择：
+
+```js
+const lang = 'zh-CN'
+const voiceIndex = 1
+
+const speak = async (text) => {
+  if (!speechSynthesis) return
+
+  const message = new SpeechSynthesisUtterance(text)
+  message.voice = await chooseVoice()
+  speechSynthesis.speak(message)
+}
+
+const getVoices = () => {
+  return new Promise((resolve) => {
+    let voices = speechSynthesis.getVoices()
+    if (voices.length) {
+      resolve(voices)
+      return
+    }
+    speechSynthesis.addEventListener('voiceschanged', () => {
+      voices = speechSynthesis.getVoices()
+      resolve(voices)
+    })
+  })
+}
+
+const chooseVoice = async () => {
+  const voices = (await getVoices()).filter((voice) => voice.lang == lang)
+
+  return new Promise((resolve) => {
+    resolve(voices[voiceIndex])
+  })
+}
+
+speak('点个关注不迷路')
+```
+
+[演示效果](https://codepen.io/lio-zero/pen/xxWwQdr)
diff --git a/Web API/URL API.md b/Web API/URL API.md
new file mode 100644
index 0000000..21aee81
--- /dev/null
+++ b/Web API/URL API.md	
@@ -0,0 +1,90 @@
+# URL API
+
+[URL API](https://developer.mozilla.org/en-US/docs/Web/API/URL_API) 是 URL 标准的一个组成部分，它定义了什么构成了有效的统一资源定位器，以及提供了解析、构造、规范化和编码 URL 的简单方法的 API。URL 标准还定义了域、主机和 IP 地址等概念。
+
+URL（Uniform Resource Locator）API 是用来处理和解析 URL 的库。
+
+常用的 URL API 有 URL 和 URLSearchParams。
+
+- URL 类用于表示 URL，并提供了许多方法来操作 URL 的各个部分，如协议、域名、端口号、路径等。
+- URLSearchParams 类用于表示 URL 中的查询字符串（即 `?` 后面的部分），并提供了许多方法来操作查询参数。
+
+> 在[使用 URLSearchParams 在 JavaScript 中获取查询字符串值](https://github.com/lio-zero/blog/blob/main/JavaScript/%E4%BD%BF%E7%94%A8%20URLSearchParams%20%E5%9C%A8%20JavaScript%20%E4%B8%AD%E8%8E%B7%E5%8F%96%E6%9F%A5%E8%AF%A2%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC.md)这篇文章中我们已经有所介绍，下面就不在进行过多讲解。
+
+现在 `currentUrl` 有一组可用于检查 URL 的属性：
+
+URL 类提供了一组可用于检查 URL 的属性：
+
+- `hash` 属性包含 URL 标识中的 `#` 和 fragment 标识符（fragment 即我们通常所说的 URL hash）
+- `protocol` 属性可以获取 URL 的协议
+- `host` 属性可以获取 URL 的域名（包括端口）
+- `port` 属性可以获取 URL 的端口号
+- `pathname` 属性可以获取 URL 的路径
+- `searchParams` 属性可以直接访问 URL 的查询字符串（使用 URLSearchParams 处理）
+- `href` 属性可以获取或设置整个 URL
+- `origin` 属性可以获取 URL 的协议、域名和端口号
+- `username`、`password`、`hostname` 属性可以获取或设置 URL 的用户名、密码和域名（不包括端口号）
+
+除了 `origin` 和 `searchParams` 是只读属性外，你可以更改其中的任何一个，并通过调用 `toString()` 方法或通过引用 `href` 属性生成新的 URL 字符串。
+
+但请注意，URL API 仅在浏览器中可用，如果要在 Node.js 中使用，则需要使用 `url` 模块。
+
+以上 URL 属性完整介绍可以在左侧点击查看 👉 [完整列表](https://developer.mozilla.org/zh-CN/docs/Web/API/URL#%E5%B1%9E%E6%80%A7)。
+
+以下是使用 URL 类属性的简单示例：
+
+```js
+const url = new URL('https://www.example.com/path?key=value')
+
+url.protocol // 'https:'
+url.host // 'www.example.com'
+url.port // '' => 如果未指定端口号，则为空字符串
+url.pathname // '/path'
+// ...
+
+// 获取 URL 中的查询字符串（使用 URLSearchParams 处理）
+const searchParams = new URLSearchParams(url.search)
+
+// 获取查询参数
+searchParams.get('key') // 'value'
+
+// 设置查询参数
+searchParams.set('key', 'newValue')
+
+// 重新设置 URL 的查询字符串
+url.search = searchParams.toString()
+```
+
+## 静态方法
+
+[URL](https://developer.mozilla.org/zh-CN/docs/Web/API/URL) 对象提供了 2 个静态方法，使用 Blob 操作 URL：
+
+- `URL.createObjectURL()`
+- `URL.revokeObjectURL()`
+
+给定一个 blob，您可以使用 `URL.createObjectURL()` 函数生成一个 URL：
+
+```js
+const myURL = URL.createObjectURL(aBlob)
+```
+
+一旦您拥有 blob URL，您可以使用以下方法从内存中销毁它：
+
+```js
+URL.revokeObjectURL(myURL)
+```
+
+关于以上 URL 对象提供的两个静态方法，有几个不错的使用案例：
+
+- [从剪贴板粘贴图像](https://github.com/lio-zero/blog/blob/main/JavaScript/%E4%BB%8E%E5%89%AA%E8%B4%B4%E6%9D%BF%E7%B2%98%E8%B4%B4%E5%9B%BE%E5%83%8F.md)
+- [调整图像大小](https://github.com/lio-zero/blog/blob/main/JavaScript/%E8%B0%83%E6%95%B4%E5%9B%BE%E5%83%8F%E5%A4%A7%E5%B0%8F.md)
+- [将 JSON 数据下载为文件](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%B0%86%20JSON%20%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD%E4%B8%BA%E6%96%87%E4%BB%B6.md)
+- [前端文件上传-用对象处理文件](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%89%8D%E7%AB%AF%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0.md#%E7%94%A8%E5%AF%B9%E8%B1%A1%E5%A4%84%E7%90%86%E6%96%87%E4%BB%B6)
+- [下载文件](https://github.com/lio-zero/blog/blob/main/JavaScript/%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6.md)
+- [MDN：在 web 应用程序中使用文件](https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)
+
+## 浏览器支持情况
+
+除了 IE 和 Opera Mini，现代浏览器都支持 URL API：
+
+![URL API 的支持情况](https://upload-images.jianshu.io/upload_images/18281896-c7ca63a2133169e4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git a/Web API/Web Bluetooth API.md b/Web API/Web Bluetooth API.md
new file mode 100644
index 0000000..1a27041
--- /dev/null
+++ b/Web API/Web Bluetooth API.md	
@@ -0,0 +1,61 @@
+# Web Bluetooth API
+
+[Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) 允许网站通过 GATT（**Generic Attribute Profile**） 客户端与附近用户选择的低功耗蓝牙（[BLE](https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Bluetooth_low_energy)）设备进行安全和隐私保护的通信 API。基于 Promise 规范。
+
+> 维基百科：
+>
+> - [BLE](https://zh.wikipedia.org/wiki/%E8%93%9D%E7%89%99%E4%BD%8E%E5%8A%9F%E8%80%97)：**低功耗蓝牙**（**Bluetooth Low Energy**，或称**Bluetooth LE**、**BLE**，旧商标**Bluetooth Smart**）也称**蓝牙低能耗**、**低功耗蓝牙**，是[蓝牙技术联盟](https://zh.wikipedia.org/wiki/%E8%97%8D%E7%89%99%E6%8A%80%E8%A1%93%E8%81%AF%E7%9B%9F)设计和销售的一种[个人局域网](https://zh.wikipedia.org/wiki/%E5%80%8B%E4%BA%BA%E5%8D%80%E5%9F%9F%E7%B6%B2%E7%B5%A1)技术，旨在用于医疗保健、[运动健身](https://zh.wikipedia.org/wiki/%E9%AB%94%E9%81%A9%E8%83%BD)、信标、安防、家庭娱乐等领域的新兴应用。相较[经典蓝牙](https://zh.wikipedia.org/wiki/%E8%97%8D%E7%89%99)，低功耗蓝牙旨在保持同等通信范围的同时显著降低功耗和成本。
+>
+> - GATT 是一个在蓝牙连接之上的发送和接收很短的数据段的通用规范。
+
+其还在实验阶段，在生产中使用之前，请仔细检查浏览器兼容性表。以下是 [Can I Use](https://caniuse.com/?search=Web%20Bluetooth) 给出的兼容情况：
+
+![Web Bluetooth API 兼容情况](https://upload-images.jianshu.io/upload_images/18281896-0e5ad83219d0a864.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> 注意：此 API 在 Web Worker 中不可用。
+
+## 基础用法
+
+下面，我们将使用一个简单的示例，来看看如何获取一台 BLE 设备的基本信息。
+
+**注意**：为了方便实现效果，我们自己在本地手写一个配置选项。
+
+我们使用 `navigator.bluetooth.requestDevice()` 方法并为函数提供一个配置对象，该对象含有关我们要使用哪个设备，以及都有哪些服务可用的信息。它将返回一个 `Promise` 对象。如果没有蓝牙设备选择界面，则此方法返回与条件匹配的第一个设备。
+
+```html
+<button class="btn">点我！</button>
+```
+
+```js
+let options = {
+  filters: [
+    { services: ['heart_rate'] },
+    { services: [0x1802, 0x1803] },
+    { services: ['c48e6067-5295-48d3-8d5c-0395f61792b1'] },
+    { name: '设备名' },
+    { namePrefix: '前缀' }
+  ],
+  optionalServices: ['battery_service']
+}
+
+const button = document.querySelector('.btn')
+button.addEventListener('click', function () {
+  navigator.bluetooth
+    .requestDevice(options)
+    .then((device) => {
+      console.log('Got device:', device.name)
+      // 在此处实现设备调用
+    })
+    .catch((err) => {
+      console.log('Error: ' + err)
+    })
+})
+```
+
+效果如下：
+
+![匹配设备](https://upload-images.jianshu.io/upload_images/18281896-ae49381c97050407.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 更多资源
+
+目前，已经有很多例子可以实践和借鉴，你可以在 [demos](https://github.com/WebBluetoothCG/demos) 或 [Web Bluetooth Samples](https://googlechrome.github.io/samples/web-bluetooth/) 查看更多例子，如：Web 蓝牙打印机、LED 显示器、赛车等。
diff --git a/Web API/Web Fullscreen API.md b/Web API/Web Fullscreen API.md
new file mode 100644
index 0000000..26f3585
--- /dev/null
+++ b/Web API/Web Fullscreen API.md	
@@ -0,0 +1,75 @@
+# Web Fullscreen API
+
+[`Fullscreen API`](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) 可以使用你以全屏模式打开或关闭元素。例如，允许 `video` 或 `canvas` 元素，使其占据整个屏幕的。
+
+你还需要知道：
+
+- 全屏显示可以是任意元素
+- HTML5 API 存在兼容性问题，即使高版本浏览器也有兼容性问题
+- 不同浏览器需要添加不同的前缀 `webkit`、`moz`、`ms`
+
+![Fullscreen API 的兼容情况](https://upload-images.jianshu.io/upload_images/18281896-3b7fe2b9171715d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 基本用法
+
+主要了解它的两个方法：
+
+- `document.requestFullscreen()` — 在系统上以全屏模式显示选定的元素，从而关闭其他应用程序以及浏览器和系统 UI 元素。
+- `document.exitFullscreen()` — 将全屏模式退出到正常模式。
+
+```js
+const fullscreen = (mode = true, el = 'body') =>
+  mode
+    ? document.querySelector(el).requestFullscreen()
+    : document.exitFullscreen()
+
+fullscreen() // 默认全屏模式打开 "body"
+fullscreen(false) // 退出全屏模式
+```
+
+CSS 还提供了一个 `:fullscreen` 伪元素，当浏览器在全屏模式下时应用。
+
+```css
+.elem:fullscreen {
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+## 兼容
+
+并不是所有的浏览器都支持 Fullscreen API，你可以做一下适当的兼容来解决问题。
+
+```js
+function launchFullScreen(elem) {
+  if (elem.requestFullScreen) {
+    elem.requestFullScreen()
+  } else if (elem.mozRequestFullScreen) {
+    elem.mozRequestFullScreen()
+  } else if (elem.webkitRequestFullScreen) {
+    elem.webkitRequestFullScreen()
+  } else if (elem.msRequestFullscreen) {
+    elem.msRequestFullscreen()
+  } else {
+    elem.oRequestFullScreen()
+  }
+}
+```
+
+对应的，也需要添加 CSS 前缀。**注意**：有些使用旧的 `:full-screen` 语法而不是标准 `:fullscreen`。
+
+```css
+div:-webkit-full-screen {
+}
+:-moz-full-screen {
+}
+:-ms-fullscreen {
+}
+```
+
+## 更多资料
+
+[screenfull](https://github.com/sindresorhus/screenfull) — 跨浏览器使用 JavaScript Fullscreen API 的简单包装器。
+
+它的源码很简单，可以阅读一下 👉 [地址](https://github.com/sindresorhus/screenfull/blob/main/index.js)。
diff --git a/Web API/Web Geolocation API.md b/Web API/Web Geolocation API.md
new file mode 100644
index 0000000..7807009
--- /dev/null
+++ b/Web API/Web Geolocation API.md	
@@ -0,0 +1,174 @@
+# Web Geolocation API
+
+[Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)（地理定位 API）允许用户在需要时向 Web 应用程序提供用户的地理位置。出于隐私原因，用户需要获得报告位置信息的权限。
+
+它是基于权限的，要求用户批准在一个网站和一个请求的基础上共享该数据。它还需要 SSL 证书，尽管在本地运行时可以不使用 SSL 证书。
+
+## 用途
+
+实际上 JavaScript 可以捕获你的经度和纬度，并可以发送到后端 Web 服务器，做一些奇特的位置感知的事情，比如：
+
+- 在地图上显示用户的位置、用户附近的兴趣点或标注一些其他信息
+- `watchPosition` 方法可以用于路线导航（GPS）
+
+如今，大多数浏览器和移动设备都支持地理定位 API。以下是 [Can I Use](https://www.caniuse.com/?search=geolocation) 给出的兼容情况：
+
+![Geolocation API 兼容情况](https://upload-images.jianshu.io/upload_images/18281896-c816f3e05fdbb900.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> **注意**：地理位置功能涉及用户隐私，出于安全考虑，当一个 Web 页尝试获取地理位置信息时，会请求用户批准地理位置访问权限。用户可能会拒绝，浏览器将不会共享你的定位数据。另外，该 API 只能在 HTTPS 环境使用。
+
+浏览器通过 `navigator.geolocation` 属性提供该 API，该属性将返回一个 Geolocation 对象。该对象具有以下三个方法。
+
+- `Geolocation.getCurrentPosition()` — 返回一个 Position 对象，表示用户的当前位置。
+- `Geolocation.watchPosition()` — 指定一个监听函数，每当用户的位置发生变化，就执行该监听函数。
+- `Geolocation.clearWatch()` — 取消 `watchPosition()` 方法指定的监听函数。
+
+下面我们将来讲讲这三个方法。
+
+## 获取用户的位置
+
+我们可以使用 `navigator.geolocation.getCurrentPosition()` 方法来获取用户的位置：
+
+```js
+navigator.geolocation.getCurrentPosition(success, error, options)
+```
+
+该方法接受三个参数。
+
+- `success` — 用户同意给出位置时的回调函数，它的参数是一个 Position 对象。
+- `error` — 用户拒绝给出位置时的回调函数，它的参数是一个 PositionError 对象。该参数可选。
+- `options` — 参数对象，该参数可选。
+
+Position 对象有两个属性。
+
+- `Position.coords` — 返回一个 Coordinates 对象，表示当前位置的坐标。
+- `Position.timestamp` — 返回一个对象，代表当前时间戳。
+
+PositionError 对象主要有两个属性。
+
+- `PositionError.code` — 整数，表示发生错误的原因。`1`表示无权限，有可能是用户拒绝授权；`2`表示无法获得位置，可能设备有故障；`3`表示超时。
+- `PositionError.message` — 字符串，表示错误的描述。
+
+参数对象 `option` 可以指定三个属性。
+
+- `enableHighAccuracy` — 是否返回高精度结果。如果设为 `true`，可能导致响应时间变慢或（移动设备的）功耗增加；反之，如果设为 `false`，设备可以更快速地响应。默认值为 `false`。
+- `timeout` — 正整数，表示等待查询的最长时间，单位为毫秒。默认值为 `Infinity`。
+- `maximumAge` — 正整数，表示可接受的缓存最长时间，单位为毫秒。如果设为 `0`，表示不返回缓存值，必须查询当前的实际位置；如果设为 `Infinity`，必须返回缓存值，不管缓存了多少时间。默认值为 `0`。
+
+```js
+const options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+}
+
+const success = (pos) => {
+  const crd = pos.coords
+  console.log(`经度：${crd.latitude} 度`)
+  console.log(`纬度：${crd.longitude} 度`)
+  console.log(`海拔：${crd.altitude} 米`)
+  console.log(`经度和纬度属性的精度：${crd.accuracy} 米`)
+  console.log(`海拔的精确度：${crd.altitudeAccuracy} 米`)
+  console.log(`设备的速度：${crd.speed} 米/秒`)
+  console.log(`设备运行的方向：${crd.heading} 度`)
+}
+
+// 处理错误和拒绝
+const error = (err) => {
+  console.warn(`ERROR(${err.code}): ${err.message}`)
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options)
+
+// 经度: xxx 度
+// 纬度: xxx 度
+// 海拔：xxx 米
+// 经度和纬度属性的精度：xxx 米
+// 海拔的精确度：xxx 米
+// 设备的速度：xxx 米/秒
+// 设备运行的方向：xxx 度
+```
+
+询问允许获取位置：
+
+![询问允许获取位置](https://upload-images.jianshu.io/upload_images/18281896-c22b4bd32f82a9dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+使用上面的代码，浏览器将会询问您是否透露自己的地理位置信息。
+
+> **注意**：只能在 HTTPS 中获取到该值，你可以在有 HTTPS 的网站，打开控制台进行测试，测试完后马上关闭。
+
+![HTTP 不可使用该 API](https://upload-images.jianshu.io/upload_images/18281896-d127d43866343e5d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+以上警告是在不安全的 HTTP 下运行该语句的情况。
+
+如果使用的是谷歌，可以在设置的**隐私设置**和安全性管理网站授予地理位置的情况
+
+![管理](https://upload-images.jianshu.io/upload_images/18281896-81f5bce07bbacdf6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## Coordinates 对象
+
+上述获取用户位置的例子中，我们正是通过 `Position.coords` 属性来使用 `Coordinates` 对象，该坐标接口用于表示设备在地球上的位置和海拔，以及计算这些属性的精确度。
+
+以下属性都返回浮点数，全部为只读属性：
+
+- `Coordinates.latitude` — 表示纬度。
+- `Coordinates.longitude` — 表示经度。
+- `Coordinates.altitude` — 表示相对于海平面的位置海拔（单位：米）。如果实现无法提供数据，则此值可以为 `null`。
+- `Coordinates.accuracy` — 表示经度和纬度属性的精度（单位：米）。
+- `Coordinates.altitudeAccuracy` —表示海拔的精度（单位：米）。此值可以为 `null`。
+- `Coordinates.speed` — 表示设备的速度（单位：米/秒）。此值可以为 `null`。
+- `Coordinates.heading` — 表示设备运行的方向（单位：度）。表示设备离正北方向有多远。0 度表示正北，方向是顺时针方向确定的（这意味着东是 90 度，西是 270 度）。如果 `Coordinates.speed` 为 0，`heading` 属性返回 `NaN`。如果设备无法提供标题信息，则此值为 `null`。
+
+## Geolocation.watchPosition()
+
+`Geolocation.watchPosition()` 对象指定一个监听函数，每当用户的位置发生变化，就是自动执行这个函数。
+
+```js
+navigator.geolocation.watchPosition(success[, error[, options]])
+```
+
+该方法接受三个参数。
+
+- `success` — 表示监听成功的回调函数，该函数可以传入一个 Position 对象作为参数。
+- `error` — 可选，表示监听失败的回调函数，该函数可以传入一个 PositionError 对象作为参数。
+- `options` — 可选，表示监听的参数配置对象。
+
+该方法返回一个整数值，表示监听函数的编号。该整数用来供`Geolocation.clearWatch()`方法取消监听。
+
+```js
+let target = {
+  latitude: 0,
+  longitude: 0
+}
+
+let options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+}
+
+const success = (pos) => {
+  const crd = pos.coords
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target')
+    navigator.geolocation.clearWatch(id)
+  }
+}
+
+const error = (err) => {
+  console.warn('ERROR(' + err.code + '): ' + err.message)
+}
+
+const id = navigator.geolocation.watchPosition(success, error, options)
+```
+
+## Geolocation.clearWatch()
+
+`Geolocation.clearWatch()` 方法用来取消 `Geolocation.watchPosition()` 方法指定的监听函数。
+
+```js
+navigator.geolocation.clearWatch(id)
+```
+
+该参数由 `Geolocation.watchPosition()` 返回的监听函数的编号获得。
diff --git a/Web API/Web Notification API.md b/Web API/Web Notification API.md
new file mode 100644
index 0000000..b8fd1ae
--- /dev/null
+++ b/Web API/Web Notification API.md	
@@ -0,0 +1,132 @@
+# Web Notification API
+
+[Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/notification) 是浏览器向开发人员公开的接口，允许在用户允许的情况下向用户显示消息，即使网站/Web 应用未在浏览器中打开。
+
+这些消息是一致的和原生的，这意味着接收者习惯于它们的 UI 和 UX（用户界面和用户体验），是系统范围的，而不是特定于您的网站。
+
+与 Push API 相结合，这项技术可以成为提高用户参与度和增强应用功能的成功途径。
+
+> Notifications API 与 Service Worker 进行了大量的交互，因为它是推送通知所需要的。您可以使用 Notifications API 而不使用 Push API，但是它的用例是有限的。
+
+```js
+if (window.Notification && Notification.permission !== 'denied') {
+  Notification.requestPermission((status) => {
+    // 如果用户接受，状态为 granted
+    const n = new Notification('Title', {
+      body: '我是正文内容!',
+      icon: '/path/to/icon.png' // 可选
+    })
+  })
+}
+
+n.close()
+```
+
+## 权限
+
+要向用户显示通知，您必须具有这样做的权限。
+
+`Notification.requestPermission()` 方法调用请求此权限。
+
+你可以调用：
+
+```js
+Notification.requestPermission()
+```
+
+它将请求弹出一个选项框：
+
+![授予权限](https://upload-images.jianshu.io/upload_images/18281896-279e258846894ecd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+它将显示一个权限授予面板，除非之前已经授予了权限。
+
+要在用户交互（允许或拒绝）时执行操作，您可以向其附加处理函数：
+
+```js
+const process = (permission) => {
+  if (permission === 'granted') {
+    // do something
+  }
+}
+
+Notification.requestPermission((permission) => {
+  process(permission)
+}).then((permission) => {
+  process(permission)
+})
+```
+
+看看我们是如何传入回调并期待一个 promise 的。这是因为过去对 `Notification.requestPermission()` 的不同实现，我们现在必须支持它，因为我们事先不知道浏览器中运行的是哪个版本。因此，为了将内容保存在一个位置，我在 `process()` 函数中提取了权限处理。
+
+在这两种情况下，函数都会被传递一个 `permission` 字符串，该字符串可以具有以下值之一：
+
+- `granted` — 用户接受，我们可以显示权限
+- `denied` — 用户拒绝，我们无法显示任何权限
+- 也可以通过检查 `Notification.permission` 属性来检索这些值，如果用户已经授予权限，则该属性的计算结果为 `granted` 或 `denied`，但如果您尚未调用 `Notification.requestPermission()`，它将解析为 `default`。
+
+## 创建通知
+
+浏览器中 `window` 对象公开的 `Notification` 对象，允许您创建通知并自定义其外观。
+
+下面是一个最简单的示例，在您请求权限后生效：
+
+```js
+Notification.requestPermission()
+new Notification('Hey')
+```
+
+![创建通知](https://upload-images.jianshu.io/upload_images/18281896-3216545d1ddc3ef7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+您有几个选项可以自定义通知。
+
+## 添加正文
+
+首先，可以添加一个正文，正文通常显示为单行：
+
+```js
+new Notification('Hey', {
+  body: '您应该关注 lio!'
+})
+```
+
+![向通知添加正文](https://upload-images.jianshu.io/upload_images/18281896-2930ba459622cc7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 添加图像
+
+您可以添加 `icon` 属性：
+
+```js
+new Notification('Hey', {
+  body: '您应该关注 lio!',
+  icon: 'https://github.com/fluidicon.png'
+})
+```
+
+![在通知中添加图像](https://upload-images.jianshu.io/upload_images/18281896-9b8b9881e43adee4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 关闭通知
+
+您可能希望在打开通知后将其关闭。
+
+为此，请创建对您打开的通知的引用：
+
+```js
+const n = new Notification('Hey')
+```
+
+然后，您可以稍后使用以下命令将其关闭：
+
+```js
+n.close()
+```
+
+或超时：
+
+```js
+setTimeout(n.close(), 1000)
+```
+
+## 更多资料
+
+- [Notifications API](https://notifications.spec.whatwg.org/)
+- [An Introduction to the Web Notifications API](https://www.sitepoint.com/introduction-web-notifications-api/)
diff --git a/Web API/Web Share API.md b/Web API/Web Share API.md
new file mode 100644
index 0000000..7ed9257
--- /dev/null
+++ b/Web API/Web Share API.md	
@@ -0,0 +1,112 @@
+# Web Share API
+
+> [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) 允许网站调用主机平台的本地共享功能的一种方法。
+
+平常我们要分享网页的内容到其他应用，需要通过自己实现分享接口。而该 API 正是为了解决这个问题提出的，用于将数据（文本、URL、图像或文件）从 Web 共享到用户选择的应用程序。
+
+该 API 不仅可以改善网页性能，只需要一个按钮，就可以实现多种分享方式，而且不限制分享目标的数量和类型。您平常使用分享的都可以使用到该 API，包括：社交媒体应用、电子邮件、即时消息、以及本地系统安装的、且接受分享的应用，都会出现在系统的分享弹窗，这对手机网页尤其有用
+
+> **注意**：Web Share API 只有通过 HTTPS 提供内容时才能使用，保存传输的安全。
+
+以下是 [Can I Use](https://caniuse.com/?search=Web%20Share%20API) 给出 Web Share API 的支持情况：
+
+![Web Share API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-a69a6ef27711a675.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+目前，支持程度相对较低，桌面的 Safari 浏览器，手机的安卓 Chrome、Firefox 浏览器和 iOS Safari 浏览器支持该 API。
+
+## 基本用法
+
+```js
+const sharePromise = navigator.share(data)
+```
+
+`data` 为要分享的数据的对象。至少需要指定以下一个字段。可选配置包括：
+
+- `url` —— 要分享的 URL。
+- `text` —— 要分享的文本内容。
+- `title` —— 要分享的标题。
+- `files` —— 要分享的文件。
+
+在使用时，可以先检查本机系统是否支持该接口。在不支持 Web Share API 的情况下，`navigator.share` 方法为将返回 `undefined`。
+
+```js
+if (navigator.share) {
+  // 支持
+}
+```
+
+以下是一个简单的例子，展示了一个基本的共享操作。作为对按钮单击的响应，此 JavaScript 代码共享当前页面的 `URL`。
+
+```js
+const text = {
+  title: document.title,
+  url: document.querySelector('link[rel=canonical]')
+    ? document.querySelector('link[rel=canonical]').href
+    : document.location.href,
+  text: 'Hello World'
+}
+
+shareBtn.addEventListener('click', () => {
+  navigator
+    .share(text)
+    .then(() => {
+      console.log('谢谢分享！')
+    })
+    .catch((err) => {
+      console.error('Error：', err)
+    })
+})
+```
+
+`navigator.share` 方法将会返回一个 `Promise` 对象。调用该方法后，会立即弹出系统的分享弹窗，一旦用户完成分享，这个 `Promise` 对象就会变为 `resolved` 状态。如果指定的共享数据格式不正确，`promise` 将会立即拒绝。如果用户取消了分享，`promise` 也会拒绝。
+
+因为其返回的是 `Promise` 对象，所以也可以使用更简便的 `async/await` 方法：
+
+```js
+const text = {
+  title: 'Web Share API',
+  url: 'https://www.jianshu.com/u/3f644e66afa3'
+}
+
+shareBtn.addEventListener('click', async () => {
+  try {
+    await navigator.share(text)
+    console.log('已成功分享数据')
+  } catch (err) {
+    console.error('分享失败：', err.message)
+  }
+})
+```
+
+大致效果如下：
+
+![Chrome 浏览器](https://upload-images.jianshu.io/upload_images/18281896-abac6866455ee79a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![IOS Safari 浏览器](https://upload-images.jianshu.io/upload_images/18281896-ad6e0bc02d7d1698.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 分享文件
+
+上面介绍可选配置时，我们还看到了一个分享文件的 `files` 字段。
+
+在分享文件之前，我们还需要使用 `navigator.canShare()` 方法，判断这个文件是可以否被分享。
+
+> **注意**：因为不是所有文件都允许分享的，目前只有图像、视频、音频和文本文件可以分享。
+
+如果 `navigator.canShare()` 调用成功，将返回一个布尔值 `true`，表示该文件可以被分享。
+
+```js
+const text = {
+  files: filesArray,
+  title: 'Picture',
+  text: 'I am Superman'
+}
+
+if (navigator.canShare && navigator.canShare({ files: filesArray })) {
+  navigator
+    .share(text)
+    .then(() => console.log('分享成功'))
+    .catch((err) => console.log('分享失败', err))
+} else {
+  console.log('您的系统不支持共享文件。')
+}
+```
diff --git a/Web API/Web Streams.md b/Web API/Web Streams.md
new file mode 100644
index 0000000..8ae6f74
--- /dev/null
+++ b/Web API/Web Streams.md	
@@ -0,0 +1,357 @@
+# Web Streams
+
+[Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 允许 JavaScript 以编程方式访问从网络接收的数据流，并且允许开发人员根据需要处理它们。
+
+使用流，我们可以从网络或其他来源接收资源，并在第一个 bit 到达时立即处理它，而不用等待资源完全下载后再使用。
+
+## 什么是流（Streams）?
+
+我可能最先想到的一个示例是加载 b 站视频，你不必完全加载它就可以开始观看。
+
+或者直播，你甚至不知道内容什么时候结束。
+
+内容甚至不必结束，它可以无限地产生。
+
+## Streams API
+
+Streams API 允许我们处理此类内容。
+
+我们有 2 种不同的流模式：读取流和写入流。
+
+让我们从可读流开始。
+
+## 可读流
+
+对于可读流，我们有 3 类对象：
+
+- [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+- [`ReadableStreamDefaultReader`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader)
+- [`ReadableStreamDefaultController`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultController)
+
+我们可以使用 ReadableStream 对象来使用流。
+
+下面是可读流的第一个示例。Fetch API 允许从 web 中获取资源，并将其作为流提供：
+
+```js
+const stream = fetch('https://github.com/').then((res) => res.body)
+```
+
+![ReadableStream 对象](https://upload-images.jianshu.io/upload_images/18281896-1bbb559dd1d4cd4d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+获取响应的 `body` 属性是一个 ReadableStream 对象实例。这是我们的可读流。
+
+## 读取器
+
+对 ReadableStream 对象上调用 `getReader()` 将返回一个 ReadableStreamDefaultReader 对象，即**读取器**。我们可以这样做：
+
+```js
+const reader = fetch('https://github.com/').then((res) => res.body.getReader())
+```
+
+![ReadableStreamDefaultReader 对象](https://upload-images.jianshu.io/upload_images/18281896-2a359a502b28d731.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+我们以块的形式读取数据，其中块是一个字节或[类型化数组](https://github.com/lio-zero/blog/blob/main/JavaScript/%E7%B1%BB%E5%9E%8B%E5%8C%96%E6%95%B0%E7%BB%84.md)。数据块在流中排队，我们每次读取一个数据块。
+
+单个流可以包含不同类型的块。
+
+一旦有了 ReadableStreamDefaultReader 对象，就可以使用 `read()` 方法访问数据。
+
+一旦创建了读取器，流就会被锁定，没有其他读取器可以从中获取数据块，直到我们对它调用 `releaseLock()`。
+
+> 你可以 tee 一个流来达到这种效果，稍后将对此进行更多介绍。
+
+## 从可读流中读取数据
+
+一旦我们有了 ReadableStreamDefaultReader 对象实例，我们就可以从中读取数据。
+
+以下是如何从 GitHub 网页逐字节读取 HTML 内容流的第一个块（出于 CORS 原因，你可以在该网页上打开的 DevTools 窗口中执行此操作）。
+
+```js
+fetch('https://github.com/').then((res) => {
+  res.body
+    .getReader()
+    .read()
+    .then(({ value, done }) => {
+      console.log(value)
+    })
+})
+```
+
+![Uint8Array](https://upload-images.jianshu.io/upload_images/18281896-8166b3ea8e6c1ebc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+如果打开每一组数组项，你将看到单个项。这些是存储在 Uint8Array 中的字节：
+
+![字节存储在 Uint8Array 中](https://upload-images.jianshu.io/upload_images/18281896-9ef5b0a28aa95947.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+你可以使用 [Encoding API](https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API) 将这些字节转换为字符：
+
+```js
+const decoder = new TextDecoder('utf-8')
+
+fetch('https://github.com/').then((res) => {
+  res.body
+    .getReader()
+    .read()
+    .then(({ value, done }) => {
+      console.log(decoder.decode(value))
+    })
+})
+```
+
+这将打印出页面中加载的字符：
+
+![将字节转换为字符](https://upload-images.jianshu.io/upload_images/18281896-4276d0f897ac7129.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+以下代码加载流的每个块，并打印出来：
+
+```js
+;(async () => {
+  const fetchedResource = await fetch('https://github.com/')
+  const reader = await fetchedResource.body.getReader()
+
+  let charsReceived = 0
+  let result = ''
+
+  reader.read().then(function processText({ done, value }) {
+    if (done) {
+      console.log('流已完成。收到的内容: ')
+      console.log(result)
+      return
+    }
+
+    console.log(`目前已收到 ${result.length} 个字符!`)
+
+    result += value
+
+    return reader.read().then(processText)
+  })
+})()
+```
+
+我将其包装在一个 `async` 立即执行函数中，以使用 `await`。
+
+> 如果你在浏览器的控制台中测试，无需包括立即执行函数，因为浏览器会优先支持 ES 提案中新出的特性，ES 13 中已支持顶层 `await` 的使用。
+
+我们创建的 `processText()` 函数接收一个具有 2 个属性的对象。
+
+- `done` — 如果流结束并且我们获得了所有数据，则为 `true`
+- `value` — 接收到的当前块的值
+
+我们创建这个递归函数来处理整个流。
+
+## 创建流
+
+> WARN：在 Edge 和 IE 中不支持
+
+我们刚刚看到了如何使用 Fetch API 生成的可读流，这是一种开始处理流的好方法，因为用例很实用。
+
+现在让我们看看如何创建一个可读流，这样我们就可以使用代码访问资源。
+
+我们之前已经使用过 ReadableStream 对象。现在，让我们使用 `new` 关键字创建一个全新的：
+
+```js
+const stream = new ReadableStream()
+```
+
+这个流现在不是很有用。它是一个空流，如果有人想从中读取数据，则没有数据。
+
+我们可以通过在初始化期间传递一个对象来定义流的行为。此对象可以定义这些属性：
+
+- `start` — 创建可读流时调用的函数。在这里，你可以连接到数据源并执行管理任务。
+- `pull` — 在未达到内部队列高水位线时，重复调用函数以获取数据。
+- `cancel` — 取消流时调用的函数。例如：在接收端调用 `cancel()` 方法时。
+
+下面是对象结构的基本示例：
+
+```js
+const stream = new ReadableStream({
+  start(controller) {},
+  pull(controller) {},
+  cancel(reason) {}
+})
+```
+
+`start()` 和 `pull()` 获得一个控制器对象，它是 ReadableStreamDefaultController 对象的一个实例，允许你控制流状态和内部队列。
+
+为了向流中添加数据，我们调用 `controller.enqueue()` 传递保存数据的变量：
+
+```js
+const stream = new ReadableStream({
+  start(controller) {
+    controller.enqueue('Hello')
+  }
+})
+```
+
+当我们准备关闭流时，我们调用 `controller.close()`。
+
+`cancel()` 获取一个原因，它是在流被取消时提供给 `ReadableStream.cancel()` 方法调用的字符串。
+
+我们还可以传递决定排队策略的可选第二个对象。它包含两个属性：
+
+- `highWaterMark` — 可存储在内部队列中的区块总数。我们在前面讨论 `pull()` 时提到过这一点。
+- `size` — 一种可以用来更改块大小的方法，以字节表示。
+
+```js
+{
+  highWaterMark, size()
+}
+```
+
+这些主要用于控制流上的压力，尤其是在管道链的上下文中，这在 Web API 中仍处于试验阶段。
+
+当达到流的 highWaterMark 值时，会向管道中的前一个流发送一个背压信号，告诉它们减缓数据压力。
+
+我们有 2 个定义排队策略的内置对象：
+
+- `ByteLengthQueuingStrategy` — 等待块的字节累积大小超过指定的高水位线
+- `CountQueuingStrategy` — 会一直等到累积的块数超过指定的高水位线
+
+设置一个 32 字节高水位线的示例：
+
+```js
+new ByteLengthQueuingStrategy({ highWaterMark: 32 * 1024 }
+```
+
+设置 1 块高水位线的示例：
+
+```js
+new CountQueuingStrategy({ highWaterMark: 1 })
+```
+
+我提到这一点是为了告诉你，你可以控制流入流中的数据量，并与其他参与者进行通信，但随着事情变得非常复杂，我们不会深入讨论更多细节。
+
+## 准备流
+
+之前我提到过，一旦我们开始读一个取流，它就会被锁定，其他读取器无法访问它，直到我们在它上调用 `releaseLock()`。
+
+但是，我们可以在流本身上使用 `tee()` 方法复制流：
+
+```js
+const stream = // ...
+const tees = stream.tee()
+```
+
+`tees` 现在是一个包含 2 个新流的数组，你可以使用 `tees[0]` 和 `tees[1]` 读取这些流。
+
+## 可写流
+
+对于可写流，我们有 3 类对象：
+
+- [WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream)
+- [WritableStreamDefaultWriter](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultWriter)
+- [WritableStreamDefaultController](https://developer.mozilla.org/en-US/docs/Web/API/WritableStreamDefaultController)
+
+我们可以使用 `WritableStream` 对象创建稍后可以使用的流。
+
+创建一个新的可写流：
+
+```js
+const stream = new WritableStream()
+```
+
+我们必须传递一个对象才能有用。该对象将具有以下可选方法实现：
+
+- `start()` 对象初始化时调用
+- `write()` 当块准备好写入接收器时调用（在写入之前保存流数据的底层结构）
+- `close()` 完成写入块时调用
+- `abort()` 要发出错误信号时调用
+
+大致结构：
+
+```js
+const stream = new WritableStream({
+  start(controller) {},
+  write(chunk, controller) {},
+  close(controller) {},
+  abort(reason) {}
+})
+```
+
+`start()`、`close()` 和 `write()` 被传递给控制器，这是一个 WritableStreamDefaultController 对象实例。
+
+至于 `ReadableStream()`，我们可以将第二个对象传递给设置队列策略的 WritableStream。
+
+例如，让我们创建一个流，给定一个存储在内存中的字符串，创建一个消费者可以连接到的流。
+
+我们首先定义一个解码器，使用 Encoding API `TextDecoder()` 构造函数将接收到的字节转换为字符：
+
+```js
+const decoder = new TextDecoder('utf-8')
+```
+
+我们可以初始化 WritableStream 实现 `close()` 方法，当消息完全接收并且客户端代码调用它时，它将打印到控制台：
+
+```js
+const writableStream = new WritableStream({
+  write(chunk) {
+    // ...
+  },
+  close() {
+    console.log(`信息是 ${result}`)
+  }
+})
+```
+
+我们通过初始化 ArrayBuffer 并将其添加到块来启动 `write()` 实现。然后，我们使用 Encoding API 的 `decoder.decode()` 方法将这个块（一个字节）解码为字符。然后将此值添加到对象外部声明的 `result` 字符串中：
+
+```js
+let result
+
+const writableStream = new WritableStream({
+  write(chunk) {
+    const buffer = new ArrayBuffer(2)
+    const view = new Uint16Array(buffer)
+    view[0] = chunk
+    const decoded = decoder.decode(view, { stream: true })
+    result += decoded
+  },
+  close() {
+    // ...
+  }
+})
+```
+
+WritableStream 对象现在已初始化。
+
+我们现在开始实现将使用此流的客户端代码。
+
+我们首先从 `writableStream` 对象获取 `WritableStreamDefaultWriter` 对象：
+
+```js
+const writer = writableStream.getWriter()
+```
+
+接下来，我们定义要发送的消息：
+
+```js
+const message = 'Hello!'
+```
+
+然后初始化编码器，对要发送到流的字符进行编码：
+
+```js
+const encoder = new TextEncoder()
+const encoded = encoder.encode(message, { stream: true })
+```
+
+此时，字符串已编码为字节数组。现在，我们在此数组上使用 `forEach` 循环将每个字节发送到流。在每次调用流写入器的 `write()` 方法之前，我们都会检查 `ready` 属性，该属性返回一个 promise，因此我们只在流写入器准备就绪时进行写入：
+
+```js
+encoded.forEach((chunk) => writer.ready.then(() => writer.write(chunk)))
+```
+
+我们现在唯一错过的是关闭 `writer`。`forEach` 是一个同步循环，这意味着我们只有在每个项目都被写入之后才会到达这一点。
+
+我们仍然检查 `ready` 属性，然后调用 `close()` 方法：
+
+```js
+writer.ready.then(() => {
+  writer.close()
+})
+```
+
+## 更多资料
+
+- [精读《web streams》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/214.%E7%B2%BE%E8%AF%BB%E3%80%8Aweb%20streams%E3%80%8B.md)
+- [2016 - the year of web streams](https://jakearchibald.com/2016/streams-ftw/)
diff --git a/Web API/Web Vibration API.md b/Web API/Web Vibration API.md
new file mode 100644
index 0000000..21fd1fb
--- /dev/null
+++ b/Web API/Web Vibration API.md	
@@ -0,0 +1,67 @@
+# Web Vibration API
+
+> 大多数现代移动设备包括振动硬件，其允许软件代码通过使设备摇动来向用户提供物理反馈。[Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) 为 Web 应用程序提供访问此硬件（如果存在）的功能，如果设备不支持此功能，则不会执行任何操作。
+
+如上所述，您可以使用 Vibration API 控制设备的振动能力。
+
+根据 [Can I Use](https://caniuse.com/?search=Vibration%20API%20)，绝大部分主流浏览器都支持 Vibration API：
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-3fc4455223fd6263.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+对于以下的例子，你可以用手机查看 👉 [Vibration API 示例](https://codepen.io/lio-zero/pen/YzZxRWY)，测试其效果。**注意**：苹果自带的 Safari 不支持该功能，在测试时，**注意把手机的振动打开**。
+
+## 一次振动
+
+你可以通过指定单个值或仅由一个值组成的数组来一次振荡振动硬件：
+
+```js
+const oneVibrate = () => navigator.vibrate(200)
+// or
+const oneVibrate = () => navigator.vibrate([200])
+```
+
+以上两个例子都可以使设备振动 200 ms。
+
+## 振动模式
+
+你可以给定一组数组来描述设备振动和不振动的交替时间段。例如：
+
+```js
+const vibratePart = () => navigator.vibrate([500, 250, 500, 250, 500])
+```
+
+这会使设备振动 500 ms，然后暂停 250 ms，然后再次振动设备 500 ms。
+
+**注意**：由于振动在每个振动周期结束时自动停止，因此您不必提供最后一个值去暂停，换句话说，数组长度只需要设置奇数个。
+
+## 停止振动
+
+当值为 0、空数组或数组元素全为 0 时，调用 [`Navigator.vibrate()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate) 将取消当前正在进行的任何振动模式。
+
+## 持续振动
+
+一些基于 `setInterval` 和 `clearInterval` 操作将允许您创建持续的振动：
+
+```js
+var vibrateInterval
+
+// 在传递水平开始振动
+const startVibrate = (duration) => navigator.vibrate(duration)
+
+// 停止振动
+const stopVibrate = () => {
+  // 清除间隔并停止持续振动
+  if (vibrateInterval) clearInterval(vibrateInterval)
+  navigator.vibrate(0)
+}
+
+// 在给定的持续时间和间隔内开始持续振动
+// 假设给定了一个数值
+const startPeristentVibrate = (duration, interval) => {
+  vibrateInterval = setInterval(function () {
+    startVibrate(duration)
+  }, interval)
+}
+```
+
+当然上面的代码片段没有考虑到振动参数为数组情况；基于数组的持久性振动将需要计算数组项的和，并基于该数量创建周期（可能具有额外的延迟）。
diff --git a/Web API/Web Workers.md b/Web API/Web Workers.md
new file mode 100644
index 0000000..88cf291
--- /dev/null
+++ b/Web API/Web Workers.md	
@@ -0,0 +1,247 @@
+# Web Workers
+
+JavaScript 是单线程的，没有任何东西可以同时并行运行。
+
+这很好，因为我们不需要担心并发编程会出现的一整套问题。
+
+有了这个限制，JavaScript 代码从一开始就必须是高效的，否则用户会有不好的体验。昂贵的操作应该是异步的，以避免阻塞线程。
+
+随着 JavaScript 应用程序需求的增长，这在某些场景中开始成为一个问题。
+
+[Web Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API) 引入了在浏览器内部**并行**执行的可能性。
+
+通过将耗时的的任务分发给 Web Workers，它将在后台独立运行的 JavaScript，而不会影响页面的性能。
+
+但它也存在一些局限性：
+
+- 无法访问 DOM — `window` 对象和 `document` 对象
+- 它可以使用消息传递与主 JavaScript 程序进行通信
+- 受[浏览器同源策略](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.md)影响，它需要从同一来源（域、端口和协议）加载
+- 如果使用文件协议（`file://`）提供页面，它将不起作用
+
+## 浏览器对 Web Workers 的支持
+
+[Web Workers 的支持情況](https://caniuse.com/?search=Web%20Workers)：
+
+![Web Workers 的支持情況](https://upload-images.jianshu.io/upload_images/18281896-ffca3ed4de89d477.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，它可以在任何主流浏览器中使用。
+
+你可以使用以下方式检查 Web Workers 支持：
+
+```js
+if (typeof Worker !== 'undefined') {}
+```
+
+## 创建 Web Workers
+
+你可以通过初始化一个 Worker 对象来创建一个 Web Workers，并从同一个源加载一个 JavaScript 文件：
+
+```js
+const worker = new Worker('worker.js')
+```
+
+## 与 Web Workers 的通信
+
+与 Web Workers 通信主要方式有两种：
+
+- Web Workers 对象提供的 [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage)
+- [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API)
+
+### Web Workers 对象中使用 `postMessage`
+
+你可以在 `Worker` 对象上使用 `postMessage` 发送消息。
+
+> **Tips**：消息是传输的，而不是共享的。
+
+```js
+// main.js
+const worker = new Worker('worker.js')
+worker.postMessage('hello')
+```
+
+并使用 `onmessage` 监听消息：
+
+```js
+// worker.js
+onmessage = (event) => {
+  console.log(event.data)
+}
+
+onerror = (event) => {
+  console.error(event.message)
+}
+```
+
+`onerror` 监听错误消息。
+
+#### 发回消息
+
+worker 线程可以将消息发送回创建它的函数。使用它的全局 `postMessage()` 方法：
+
+```js
+// worker.js
+onmessage = (event) => {
+  console.log(event.data)
+  postMessage('hey')
+}
+
+onerror = (event) => {
+  console.error(event.message)
+}
+```
+
+```js
+// main.js
+const worker = new Worker('worker.js')
+worker.postMessage('hello')
+
+worker.onmessage = (event) => {
+  console.log(event.data)
+}
+```
+
+#### 多个事件监听器
+
+使用 `onmessage` 创建的事件监听器，后创建的会覆盖已创建的。
+
+我们可以转而使用 `addEventListener` 方法监听事件：
+
+```js
+// worker.js
+addEventListener('message', (event) => {
+  console.log(event.data)
+  postMessage('hey')
+})
+
+addEventListener('message', (event) => {
+  console.log(`我很好奇，我也在听`)
+})
+
+addEventListener('error', (event) => {
+  console.log(event.message)
+})
+```
+
+在 Worker 线程中，`self` 和 `this` 都代表子线程的全局对象。当然，它可以省略，例如上面调用 `addEventListener` 省略了它们。
+
+```js
+// main.js
+const worker = new Worker('worker.js')
+worker.postMessage('hello')
+
+worker.addEventListener('message', (event) => {
+  console.log(event.data)
+})
+```
+
+### 使用 Channel Messaging API
+
+我们可以选择使用更通用的 [Channel Messaging API](https://github.com/lio-zero/blog/blob/main/Web%20API/Channel%20Messaging%20API.md) 来与 Web Workers 通信，而不是使用 Web Workers 提供的内置 postMessage API。
+
+```js
+// main.js
+const worker = new Worker('worker.js')
+const messageChannel = new MessageChannel()
+
+messageChannel.port1.addEventListener('message', (event) => {
+  console.log(event.data)
+})
+
+worker.postMessage('main', [messageChannel.port2])
+```
+
+```js
+// worker.js
+addEventListener('message', (event) => {
+  console.log(event.data)
+})
+```
+
+Web Workers 可以通过向 `messageChannel.port2` 发送消息来返回消息，如下所示：
+
+```js
+addEventListener('message', (event) => {
+  event.ports[0].postMessage(data)
+})
+```
+
+## Web Workers 生命周期
+
+Web Workers 被启动，如果它们没有通过 `worker.onmessage` 或 `addEventListener` 保持在监听模式下，它们将在其代码运行完成后立即关闭。
+
+可以在主线程中使用 `terminate()` 方法停止 Web Workers 运行：
+
+```js
+// main.js
+const worker = new Worker('worker.js')
+worker.postMessage('hello')
+worker.terminate()
+```
+
+也可以在 Worker 线程内部使用 `close()` 全局方法进行关闭：
+
+```js
+// worker.js
+onmessage = (event) => {
+  console.log(event.data)
+  close()
+}
+
+onerror = (event) => {
+  console.error(event.message)
+}
+```
+
+## 在 Web Workers 中加载脚本和库
+
+Web Workers 可以使用在其全局作用域中定义的 [`importScripts()`](https://developer.mozilla.org/zh-CN/docs/Web/API/WorkerGlobalScope/importScripts) 方法加载脚本和库：
+
+```js
+importScripts('bar.js', 'foo.js')
+```
+
+## Web Workers 中可用的 API
+
+如前所述，Web Workers 无法访问 DOM，因此你无法与 `window` 和 `document` 对象进行交互。此外，`parent` 也不可用。
+
+但是，你可以使用许多其他 API，包括：
+
+- XHR API
+- Fetch API
+- BroadcastChannel API
+- FileReader API
+- IndexedDB
+- Notifications API
+- Promises
+- Service Workers
+- Channel Messaging API
+- Cache API
+- Console API（`console.log()` 等）
+- `setTimeout` 和 `setInterval`
+- `addEventListener()` 和 `removeEventListener()`
+- Location API
+- Navigator API
+- WebSockets
+- WebGL
+- SVG Animations
+
+## 使用库减少工作量
+
+一些库可以帮助我们减少使用 Web Workers 的工作量：
+
+- [comlink](https://github.com/GoogleChromeLabs/comlink) — 基于 Web Workers API 的友好抽象层
+- [workerize](https://github.com/developit/workerize) — 在 Web Workers 中运行模块
+- [Greenlet](https://github.com/developit/greenlet) — 在 Web Workers 中运行任意一段异步代码
+
+## 更多资料
+
+- [Web Worker 使用教程](https://www.ruanyifeng.com/blog/2018/07/web-worker.html)
+- [精读《谈谈 Web Workers》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/76.%E7%B2%BE%E8%AF%BB%E3%80%8A%E8%B0%88%E8%B0%88%20Web%20Workers%E3%80%8B.md)
+- [Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+- [7 Things You Need To Know About Web Workers](https://www.developer.com/microsoft/7-things-you-need-to-know-about-web-workers/)
+- [When should you be using Web Workers?](https://dassur.ma/things/when-workers/) — 你应该始终使用 Web Workers
+- [For the Sake of Your Event Listeners, Use Web Workers](https://macarthur.me/posts/use-web-workers-for-your-event-listeners)
+- [The State Of Web Workers In 2021](https://www.smashingmagazine.com/2021/06/web-workers-2021/)
+- [Web workers vs Service workers vs Worklets](https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/)
+- [Using Web Workers to Speed-Up Your JavaScript Applications](https://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications)
diff --git a/Web API/WebSocket.md b/Web API/WebSocket.md
new file mode 100644
index 0000000..93cd0aa
--- /dev/null
+++ b/Web API/WebSocket.md	
@@ -0,0 +1,135 @@
+# WebSocket
+
+[WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) 是 Web 应用程序中 HTTP 通信的替代方案。
+
+它在客户端和服务器之间提供了一个长时间的双向通信通道。
+
+一旦建立，通道将保持开放状态，以低延迟和开销提供非常快速的连接。
+
+以下是 [WebSocket 的支持情况](https://caniuse.com/websockets)：
+
+![浏览器对 WebSocket 的支持](https://upload-images.jianshu.io/upload_images/18281896-60ead383f2d687ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，所有现代浏览器都支持 WebSocket。
+
+## WebSocket 与 HTTP 的区别
+
+HTTP 是一种非常不同的协议，也是一种不同的通信方式。
+
+HTTP 是一种请求/响应协议：当客户端请求时，服务器会返回一些数据。
+
+使用 WebSocket：
+
+- 服务器可以向客户端发送消息，而无需客户端明确请求
+- 客户端和服务器可以同时相互通信
+- 发送消息需要交换非常少的数据开销。这意味着低延迟通信。
+
+WebSocket 非常适合实时和长时间的通信。
+
+HTTP 非常适合偶尔进行数据交换和客户端发起的交互。
+
+HTTP 的实现要简单得多，而 WebSocket 需要更多的开销。
+
+## 安全的 WebSocket
+
+始终对 WebSocket 使用安全、加密的协议 `wss://`。
+
+`ws://` 指的是不安全的 WebSocket 版本（`WebSocket` 的 `http:`），出于显而易见的原因，应避免使用。
+
+## 创建新的 WebSocket 连接
+
+```js
+const url = 'wss://myServer.com'
+const connection = new WebSocket(url)
+```
+
+`connection` 是一个 WebSocket 对象。
+
+成功建立连接后，将触发 `open` 事件。
+
+通过将回调函数分配给 `connection` 对象的 `onopen` 属性来监听它：
+
+```js
+connection.onopen = () => {
+  //...
+}
+```
+
+如果出现任何错误，将触发 `onerror` 函数回调：
+
+```js
+connection.onerror = (error) => {
+  console.log(`WebSocket error: ${error}`)
+}
+```
+
+## 使用 WebSocket 将数据发送到服务器
+
+一旦连接打开，您就可以向服务器发送数据。
+
+您可以在 `onopen` 回调函数中方便地执行此操作：
+
+```js
+connection.onopen = () => {
+  connection.send('hey')
+}
+```
+
+## 使用 WebSocket 从服务器接收数据
+
+使用 `onmessage` 上的回调函数进行监听，该函数在收到 `message` 事件时调用：
+
+```js
+connection.onmessage = (e) => {
+  console.log(e.data)
+}
+```
+
+## 在 Node.js 中实现服务器
+
+[`ws`](https://github.com/websockets/ws) 是 Node.js 的一个流行 WebSocket 库。
+
+我们将使用它来构建 WebSocket 服务器。它还可以用于实现客户端，并使用 WebSocket 在两个后端服务之间进行通信。
+
+使用 pnpm 安装它：
+
+```js
+pnpm i ws
+```
+
+您只需要编写的代码很少：
+
+```js
+const WebSocket = require('ws')
+
+const wss = new WebSocket.Server({ port: 8080 })
+
+wss.on('connection', (ws) => {
+  ws.on('message', (message) => {
+    console.log(`Received message => ${message}`)
+  })
+  ws.send('ho!')
+})
+```
+
+此代码在端口 8080（WebSocket 的默认端口）上创建一个新服务器，并在建立连接时添加一个回调函数，发送 `ho!` 到客户端，并记录它接收到的消息。
+
+## 调试 websocket
+
+Chrome 和 Firefox 有一种方便的方式来可视化通过 WebSocket 发送的所有信息。他们对 DevTools 的支持一直在提高。
+
+在这两种情况下，您都可以查看 Network 面板，并选择 WS 以仅过滤 WebSocket 连接。
+
+![Chrome 演示](https://upload-images.jianshu.io/upload_images/18281896-ac9d3e9fff5f196b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![Chrome 详细信息](https://upload-images.jianshu.io/upload_images/18281896-763f91c206013c05.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+Firefox DevTools 在这方面要做的更好，能展示的内容更多：
+
+![Firefox 中的数据](https://upload-images.jianshu.io/upload_images/18281896-432939dd4daed395.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+查看这篇关于 [Mozilla Hacks 的帖子](https://hacks.mozilla.org/2019/10/firefoxs-new-websocket-inspector/)，了解更多关于如何使用这个工具的信息。
+
+## 更多资料
+
+[WebSocket 教程](https://www.ruanyifeng.com/blog/2017/05/websocket.html)
diff --git a/Web API/XMLHttpRequest.md b/Web API/XMLHttpRequest.md
new file mode 100644
index 0000000..b301762
--- /dev/null
+++ b/Web API/XMLHttpRequest.md	
@@ -0,0 +1,130 @@
+# XMLHttpRequest
+
+首先，我们先来了解**什么是 AJAX**？
+
+[**AJAX**](https://zh.wikipedia.org/wiki/AJAX)（Asynchronous JavaScript and XML，异步 JavaScript 与 XML），指的是一套综合了多项技术的浏览器端网页开发技术。用于创建快速动态网页的技术。
+
+传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页。如 `Form` 表单提交，用户点击提交按钮，浏览器将会刷新页面。而通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以**在不重新加载整个网页的情况下，对网页的某部分进行更新。**
+
+而 AJAX 的实现，正是基于本文将要讲的主题 `XMLHttpRequest`。
+
+## XMLHttpRequest 介绍
+
+[XMLHttpRequest](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest)（XHR）是微软在九十年代发明的，在 2002-2006 期间，随着所有浏览器的实现，XHR 成为了标准。2006 年，W3C 标准化了 XMLHttpRequest。
+
+在这几年的发展中，像 GMail 或 Google 地图，它们在很大程度上都基于 XHR。
+
+且为了方便使用和跨浏览器 XHR 存在的一些不一致性，像 jQuery 这样的库通过为开发人员提供易于使用的抽象而得到了普及，这反过来又帮助推广了这种技术的使用。
+
+## XHR 请求示例
+
+以下代码创建一个 XMLHttpRequest (XHR) 请求对象，并附加一个响应 `onreadystatechange` 事件的回调函数。
+
+设置 xhr 连接是为了执行对 `https://jsonplaceholder.typicode.com/todos/1` 的 GET 请求，并使用 `send()` 方法发送：
+
+```js
+const xhr = new XMLHttpRequest()
+xhr.onreadystatechange = () => {
+  if (xhr.readyState === 4) {
+    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
+  }
+}
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1')
+xhr.send()
+```
+
+## 其他 `open()` 参数
+
+在上面的示例中，我们只是将方法和 URL 传递给请求。
+
+我们还可以指定其他 HTTP 方法（`get`、`post`、`head`、`put`、`delete` 和 `options`）。
+
+其他参数允许您指定一个标志，以便在设置为 `false` 时使请求同步，以及一组用于 HTTP 身份验证的凭据：
+
+```js
+open(method, url, asynchronous, username, password)
+```
+
+### `onreadystatechange`
+
+在 XHR 请求过程中多次调用 `onreadystatechange`。我们显式忽略除 `readyState === 4` 之外的所有状态，这意味着请求已完成。
+
+状态为：
+
+- 1（OPEN）：请求开始
+- 2 (HEADERS_RECEIVED)：HTTP response header 已被接收
+- 3（LOADING）：响应正在被加载
+- 4 (DONE)：请求完成
+
+## 中止 XHR 请求
+
+可以通过调用 XHR 对象上的 `abort()` 方法中止 XHR 请求。
+
+```js
+const xhr = new XMLHttpRequest()
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true)
+xhr.send()
+
+// 取消发送请求
+xhr.abort()
+```
+
+如果您对 axios 和 fetch 如何取消已发送的网络请求感兴趣，可以阅读[取消已发送的网络请求](https://github.com/lio-zero/blog/blob/main/JavaScript/%E5%8F%96%E6%B6%88%E5%B7%B2%E5%8F%91%E9%80%81%E7%9A%84%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82.md)。
+
+## 与 jQuery 的比较
+
+使用 jQuery，这些行可以转换为：
+
+```js
+$.get('https://jsonplaceholder.typicode.com/todos/1', (data) => {
+  console.log(data)
+}).fail((err) => {
+  console.error(err)
+})
+```
+
+## 与 Fetch 的比较
+
+使用 Fetch API：
+
+```js
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((res) => res.json())
+  .then((data) => console.log(data))
+  .catch((err) => {
+    console.error(err)
+  })
+```
+
+使用 `async/await`：
+
+```js
+const data = fetch('https://jsonplaceholder.typicode.com/todos/1').then((res) =>
+  res.json()
+)
+const result = await data()
+console.log(result)
+```
+
+它们都是与 XHR 请求等效的代码。
+
+## 跨域请求
+
+请注意，XMLHttpRequest 连接受到出于安全原因而强制执行的特定限制的约束。
+
+其中最明显的一项是[同源策略](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.md)的执行。
+
+您无法访问另一台服务器上的资源，除非该服务器使用 CORS（跨源资源共享）明确支持这一点。
+
+## 最后
+
+在本文，我们简单的了解了它的一些基本操作。
+
+`XMLHttpRequest` 还有很多其他的内容，您可以在下面提供的文章中了解它们。
+
+## 进一步阅读
+
+- [XMLHttpRequest](https://zh.javascript.info/xmlhttprequest)
+- [XMLHttpRequest Level 2 使用指南](https://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html)
+- [实现一个 AJAX HTTP 请求库](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20Ajax%20HTTP%20%E8%AF%B7%E6%B1%82%E5%BA%93.md)
diff --git "a/Web API/getUserMedia() \346\226\271\346\263\225.md" "b/Web API/getUserMedia() \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..a7db4d9
--- /dev/null
+++ "b/Web API/getUserMedia() \346\226\271\346\263\225.md"	
@@ -0,0 +1,150 @@
+# getUserMedia() 方法
+
+由 `navigator.mediaDevices` 暴露 MediaDevices 的对象为我们提供了 `getUserMedia` 方法。
+
+> **注意**：`navigator` 对象还公开了一个 `getUserMedia()` 方法，该方法可能仍然有效，但已弃用。为了保持一致性，API 已移动到 `mediaDevices` 对象内部。
+
+假设我们有一个按钮：
+
+```html
+<button>开启流媒体</button>
+```
+
+我们一直等到用户点击这个按钮，然后调用 `navigator.mediaDevices.getUserMedia()` 方法。
+
+我们传递一个描述所需媒体约束的对象。如果我们需要视频输入，我们会调用：
+
+```js
+navigator.mediaDevices.getUserMedia({
+  video: true
+})
+```
+
+我们可以非常具体地处理这些约束：
+
+```js
+navigator.mediaDevices.getUserMedia({
+  video: {
+    minAspectRatio: 1.333,
+    minFrameRate: 60,
+    width: 640,
+    height: 480
+  }
+})
+```
+
+您可以通过调用 `navigator.mediaDevices.getSupportedConstraints()` 获得设备支持的所有约束的列表。
+
+如果我们只想要音频，我们可以通过 `audio: true`：
+
+```js
+navigator.mediaDevices.getUserMedia({
+  audio: true
+})
+```
+
+如果我们两者都想要：
+
+```js
+navigator.mediaDevices.getUserMedia({
+  video: true,
+  audio: true
+})
+```
+
+此方法返回一个 promise，因此我们将使用 `async/await` 在 `stream` 变量中获取结果：
+
+```js
+document.querySelector('button').addEventListener('click', async (e) => {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: true
+  })
+})
+```
+
+单击按钮将触发浏览器中的面板，以允许使用媒体设备：
+
+![权限画面](https://upload-images.jianshu.io/upload_images/18281896-ab865f8bae19b5d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+完成后，我们从 `getUserMedia()` 获得的 `stream` 对象现在可以用于各种事情。最直接的方法是在页面中的 `video` 元素中显示视频流：
+
+```html
+<button>开启流媒体</button>
+
+<video autoplay />
+```
+
+```js
+document.querySelector('button').addEventListener('click', async (e) => {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: true
+  })
+  document.querySelector('video').srcObject = stream
+})
+```
+
+## 示例
+
+以下示例中，它要求您访问摄像机并在页面中播放视频。
+
+添加两个按钮，一个访问摄像头以开启视频流，另一个停止视频里，然后添加一个具有 `autoplay` 属性的 `video` 元素。
+
+```html
+<button id="start">开启视频流</button>
+<button id="stop">停止视频流</button>
+
+<video autoplay />
+```
+
+JS 监听按钮的点击，然后调用 `navigator.mediaDevices.getUserMedia()` 请求视频。然后，我们在调用 `stream.getUserMedia()` 的结果上调用 `stream.getVideoTracks()` 来访问摄像机的名称。
+
+流被设置为 `video` 标签的源对象，以便可以进行播放：
+
+```js
+const start = document.querySelector('#start')
+const stop = document.querySelector('#stop')
+
+let stream = null
+
+stop.addEventListener('click', async (e) => {
+  stream && stream.stop()
+})
+
+start.addEventListener('click', async (e) => {
+  try {
+    const mediaStream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: true
+    })
+
+    stream = mediaStream.getVideoTracks()[0]
+    alert(`获取视频: ${stream.label}`)
+
+    document.querySelector('video').srcObject = mediaStream
+  } catch (error) {
+    alert(`${error.name}`)
+    console.error(error)
+  }
+})
+```
+
+`getUserMedia()` 的参数还可以指定视频流的附加要求：
+
+```js
+navigator.mediaDevices.getUserMedia(
+  {
+    video: {
+      mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },
+      optional: [{ minFrameRate: 60 }, { maxWidth: 640 }, { maxHeight: 480 }]
+    }
+  },
+  successCallback,
+  errorCallback
+)
+```
+
+要获得音频流，您也需要音频媒体对象，然后调用 `stream.getAudioTracks()` 而不是 `stream.getVideoTracks()`。
+
+我们点击停止按钮，通过调用 `track.stop()` 来停止视频流。
+
+[完整示例](https://codepen.io/lio-zero/pen/NWYpMPv)
diff --git a/Web API/requestAnimationFrame.md b/Web API/requestAnimationFrame.md
new file mode 100644
index 0000000..8d619f7
--- /dev/null
+++ b/Web API/requestAnimationFrame.md	
@@ -0,0 +1,115 @@
+# requestAnimationFrame
+
+[`requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) 提供了一种更可预测的方式来连接到浏览器渲染周期。
+
+`requestAnimationFrame()` 可以在浏览器下一次重绘之前调用回调函数。这个方法的优点在于可以使动画更加流畅，因为它能够让浏览器自动调整回调函数的调用频率，从而适应当前的**屏幕刷新率**。
+
+```js
+function draw() {
+  // 绘制动画
+  requestAnimationFrame(draw)
+}
+
+requestAnimationFrame(draw)
+```
+
+它不是特定于动画的 API，但这是它使用最多的地方。
+
+JavaScript 有一个[JavaScript 运行机制 — 事件循环（Event-Loop）](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6%20%E2%80%94%20%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%88Event-Loop%EF%BC%89.md)，它不断运行以执行 JavaScript。
+
+过去，动画是使用 `setTimeout()` 或 `setInterval()` 执行的。执行一点动画，然后调用 `setTimeout()` 在几毫秒后再次重复此代码：
+
+```js
+const performAnimation = () => {
+  //...
+  setTimeout(performAnimation, 1000 / 60)
+}
+setTimeout(performAnimation, 1000 / 60)
+```
+
+或者：
+
+```js
+const performAnimation = () => {
+  //...
+}
+setInterval(performAnimation, 1000 / 60)
+```
+
+你可以通过获取 `setTimeout` 或 `setInterval` 的引用并清除它来停止动画：
+
+```js
+let timer
+
+const performAnimation = () => {
+  // ...
+  timer = setTimeout(performAnimation, 1000 / 60)
+}
+
+timer = setTimeout(performAnimation, 1000 / 60)
+
+// ...
+
+clearTimeout(timer)
+```
+
+`performAnimation()` 调用之间的 `1000 / 60` 间隔是由显示屏的刷新率决定。在大多数情况下，刷新率为每秒 60 Hz，也就是说每秒钟会有 60 次重绘。因为如果显示屏由于其局限性而无法显示，那么执行重绘是没有用的。这将导致我们拥有大约 16.6ms 的时间来显示每一帧。
+
+使用这种方法的问题在于，即使我们准确地指定了这个精度，浏览器可能正在忙着执行其他操作，而我们的 `setTimeout` 调用可能无法及时完成重绘，它将被延迟到下一个周期。
+
+这很糟糕，因为我们丢失了一帧，而下一帧动画将执行 2 次，导致眼睛注意到笨拙的动画。
+
+`requestAnimationFrame` 是执行动画的标准方式，它以一种不同寻常的方式工作，尽管代码看起来与 `setTimeout` 或 `setInterval` 代码非常相似：
+
+```js
+let request
+
+const performAnimation = () => {
+  request = requestAnimationFrame(performAnimation)
+  // 使某物动画
+}
+
+requestAnimationFrame(performAnimation)
+
+// ...
+
+cancelAnimationFrame(request) // 停止动画
+```
+
+## 优化
+
+`requestAnimationFrame()` 的引入对 CPU 非常友好，如果当前窗口或选项卡不可见，则会停止动画的运行。
+
+在引入 `requestAnimationFrame()` 时，即使选项卡被隐藏，`setTimeout` 或 `setInterval` 也会继续运行。但现在，由于 `requestAnimationFrame()` 方法在节省电池方面被证明是成功的，浏览器也对这些方法（`setTimeout` 或 `setInterval`）实施了节流，允许每秒最多执行 1 次。
+
+使用 `requestAnimationFrame` 浏览器可以进一步优化资源消耗，使动画更加流畅。
+
+## 浏览器支持情况
+
+[`requestAnimationFrame` 浏览器支持情况](https://caniuse.com/requestAnimationFrame)：
+
+![`requestAnimationFrame` 浏览器支持情况](https://upload-images.jianshu.io/upload_images/18281896-b0b06e1d74ead659.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 总结
+
+在某些情况下，比如硬件性能差的设备上，浏览器可能会降低屏幕刷新率，以节省资源。`requestAnimationFrame` 就是为了解决这个问题而设计的，它能够让浏览器根据当前的性能情况，自动调整回调函数的调用频率，从而让动画看起来更加流畅。
+
+通过上述所介绍的，我们可以总结出 `requestAnimationFrame` 相比 `setTimeout` 有以下优点：
+
+- 可以让浏览器自动调整回调函数的调用频率，从而达到最佳的动画流畅度。
+- 在浏览器切换到后台运行时，会自动停止调用回调函数，从而节省资源。
+- 在绘制动画时，能处理用户的输入事件，使动画与用户交互更加流畅。
+
+但是，`requestAnimationFrame` 也有一些缺点：
+
+- 它不能指定回调函数的调用时间，只能在下一次重绘之前调用。
+- 在某些情况下，比如浏览器刚启动时，可能会出现回调函数调用的延迟。
+
+因此，在开发动画时，应该根据具体情况选择最合适的方法。
+
+## 更多资料
+
+- [JavaScript 中的 setTimeout 和 setInterval 方法](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E4%B8%AD%E7%9A%84%20setTimeout%20%E5%92%8C%20setInterval%20%E6%96%B9%E6%B3%95.md)
+- [Using requestAnimationFrame](https://css-tricks.com/using-requestanimationframe/)
+- [Replacements for setInterval Using requestAnimationFrame](https://css-tricks.com/snippets/javascript/replacements-setinterval-using-requestanimationframe/)
+- [TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations](https://www.testufo.com/animation-time-graph)
diff --git a/Web API/requestIdleCallback.md b/Web API/requestIdleCallback.md
new file mode 100644
index 0000000..bd1da4f
--- /dev/null
+++ b/Web API/requestIdleCallback.md	
@@ -0,0 +1,103 @@
+# requestIdleCallback
+
+[`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) 是浏览器提供给我们的空闲调度算法，它维护着一个队列，允许浏览器进入等待状态，直到它识别出一个空闲期。
+
+`requestIdleCallback` 接收两个参数：回调函数和一个可选的选项对象。
+
+- 回调函数会在浏览器空闲时调用，它接收一个参数，表示空闲时间的信息。这个函数通常用于执行那些计算量较大的但又不是很紧急的任务，比如统计或者埋点。不要去影响浏览器中优先级较高的任务，比如动画绘制、用户输入等。
+- 选项对象可以用来设置一些可选的参数。例如，你可以用 `timeout` 选项来设置超时时间，表示如果回调函数在超时时间内没有被调用，那么它就会被立即执行。
+
+下面是一个使用 `requestIdleCallback` 的例子：
+
+```js
+requestIdleCallback(
+  () => {
+    console.log('All work and no play makes Jack a dull boy!')
+  },
+  { timeout: 1000 }
+)
+```
+
+这个例子会在浏览器空闲时调用回调函数，如果在 1 秒钟内浏览器没有空闲，那么回调函数就会立即执行。
+
+## 模拟 `requestIdleCallback`
+
+如果浏览器不支持 `requestIdleCallback`，你可以通过模拟这个 API 来达到同样的效果。
+
+下面是一个模拟 `requestIdleCallback` 的例子：
+
+```js
+window.requestIdleCallback =
+  window.requestIdleCallback ||
+  function (cb) {
+    return setTimeout(() => {
+      const start = Date.now()
+      cb({
+        didTimeout: false,
+        timeRemaining: () => {
+          return Math.max(0, 50 - (Date.now() - start))
+        }
+      })
+    }, 1)
+  }
+```
+
+我们使用了 `setTimeout` 来模拟实现一个 `requestIdleCallback`，并通过计算时间差来模拟空闲时间。
+
+`cancelIdleCallback` 使用 `clearTimeout` 模拟实现，用于取消已注册的回调函数：
+
+```js
+window.cancelIdleCallback =
+  window.cancelIdleCallback ||
+  function (id) {
+    clearTimeout(id)
+  }
+```
+
+需要注意，以上只是一个简单的模拟实现，它并不能与真正的 `requestIdleCallback` 完全相同。你可以根据自己的需要来改进这个模拟实现。
+
+> 以上示例来自 [requestIdleCallback.js](https://gist.github.com/paullewis/55efe5d6f05434a96c36)。
+
+## 使用案例
+
+在很多前端框架和工具中，也有很多类似的实现。
+
+[swr](https://github.com/vercel/swr) 有一个简单的模拟实现：
+
+```js
+const rIC = window['requestIdleCallback'] || ((f) => setTimeout(f, 1))
+```
+
+使用 [swr](https://github.com/vercel/swr) 中进行资源请求的 `revalidate`，也是通过 `rIC` 来提高性能。
+
+React 的时间分片也是基于类似 `rIC` 而实现，然而因为 `rIC` 的兼容性及 50ms 流畅问题，React 自己实现了一个 [scheduler](https://github.com/facebook/react/tree/main/packages/scheduler)。
+
+## 关于 50ms 问题
+
+在某些浏览器上，`requestIdleCallback` 回调函数会在 50ms 的延迟之后执行。这个问题会导致回调函数的执行可能会被延迟，影响浏览器的性能。
+
+这个问题在 Google Chrome 和 Microsoft Edge 中比较常见。它的原因是这些浏览器的 JavaScript 引擎会将所有的回调函数放在同一个任务队列中，并且每个任务之间会有 50ms 的延迟。这意味着，如果你希望在这些浏览器中避免 50ms 问题，你可以考虑使用其他方法来替代 `requestIdleCallback`。
+
+例如，你可以使用 `requestAnimationFrame` 来替代 `requestIdleCallback`。[`requestAnimationFrame`](https://github.com/lio-zero/blog/blob/main/Web%20API/requestAnimationFrame.md) 是浏览器用于动画渲染的 API，它会在浏览器每一帧渲染之前调用回调函数。这意味着，你可以在每一帧渲染之前执行任务，避免 50ms 的延迟。
+
+你也可以使用 `setTimeout` 来替代 `requestIdleCallback`。`setTimeout` 可以设置回调函数在特定的时间之后执行，你可以设置一个较小的时间值，来避免 50ms 的延迟。
+
+## `requestIdleCallback` 需要注意的地方
+
+使用 `requestIdleCallback` 时，要注意一些事项：
+
+- 它并不是所有浏览器都支持的，你需要检查浏览器是否支持这个 API。
+- 回调函数可能会在浏览器空闲时被调用，也可能会在浏览器忙碌时被调用。所以你不能保证回调函数一定会在浏览器空闲时被调用。
+- 回调函数的执行可能会被延迟（50ms 问题），所以你不能依赖它来执行时间敏感的任务。
+- 回调函数可能会被多次调用，所以你需要注意避免重复执行。
+- 回调函数中不要操作 DOM，因为它本来就是利用的重排重绘后的间隙空闲时间，重新操作 DOM 又会造成重排重绘。
+- 如果回调函数执行时间过长，可能会影响浏览器的性能。所以你需要尽量保证回调函数的执行时间尽量短。
+
+## 最后
+
+总的来说，`requestIdleCallback` 是一个很好的用来执行不是很重要的任务的方法，但是它并不适合所有情况。你需要谨慎地使用它，并且要注意上面提到的事项。
+
+## 更多资源
+
+- [Cooperative Scheduling of Background Tasks](https://w3c.github.io/requestidlecallback/#idle-periods)
+- [Cooperative Scheduling with requestIdleCallback](https://hacks.mozilla.org/2016/11/cooperative-scheduling-with-requestidlecallback/)
diff --git "a/Web API/\344\275\277\347\224\250 MediaDevices API \350\256\277\351\227\256\346\202\250\347\232\204\347\275\221\347\273\234\346\221\204\345\203\217\345\244\264.md" "b/Web API/\344\275\277\347\224\250 MediaDevices API \350\256\277\351\227\256\346\202\250\347\232\204\347\275\221\347\273\234\346\221\204\345\203\217\345\244\264.md"
new file mode 100644
index 0000000..21eba87
--- /dev/null
+++ "b/Web API/\344\275\277\347\224\250 MediaDevices API \350\256\277\351\227\256\346\202\250\347\232\204\347\275\221\347\273\234\346\221\204\345\203\217\345\244\264.md"	
@@ -0,0 +1,191 @@
+# 使用 MediaDevices API 访问您的网络摄像头
+
+[MediaDevices API](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices) 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。
+
+> **注意**：MediaDevices API 只有通过 HTTPS 提供内容时，才能访问网络摄像头。该 API 还基于 Promise 规范。
+
+以下是 [Can I Use](https://caniuse.com/?search=MediaDevices%20API) 给出的支持情况：
+
+![MediaDevices API 支持情况](https://upload-images.jianshu.io/upload_images/18281896-e84336d614ba3622.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 访问摄像头示例
+
+简单的 HTML 结构如下：
+
+```html
+<button id="start-webcam-btn">开启摄像头</button>
+<button id="stop-webcam-btn">停止摄像头</button>
+
+<div id="container">
+  <video autoplay="true" id="videoElement"></video>
+</div>
+```
+
+CSS 如下：
+
+```css
+.videoElement {
+  width: 500px;
+  height: 500px;
+  border: 10px solid plum;
+}
+```
+
+### 开启摄像头
+
+使用 `navigator.mediaDevices.getUserMedia(constraints)` 访问摄像头。将返回的 `stream` 分配给了一个 `<video>` 元素。
+
+```js
+var video = document.querySelector('#videoElement')
+
+const start = () => {
+  if (navigator.mediaDevices.getUserMedia) {
+    navigator.mediaDevices
+      .getUserMedia({ video: true })
+      .then((stream) => {
+        video.srcObject = stream
+      })
+      .catch((err) => {
+        console.log('ERROR: ', err)
+      })
+  }
+}
+```
+
+你可以在 👉[查看效果](https://codepen.io/lio-zero/pen/GRWLppK)。
+
+如果你点击了按钮，但没有打开摄像头的话，可能是你禁止了浏览器访问。如果你使用谷歌浏览器，可以在浏览器地址栏最右边的看到如下：
+
+![禁止访问摄像头](https://upload-images.jianshu.io/upload_images/18281896-00f91364d42259ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+你可以允许或者禁止浏览器使用您的摄像头。
+
+![允许或者禁止浏览器使用您的摄像头](https://upload-images.jianshu.io/upload_images/18281896-7c70a24933da494e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+### 停止网络摄像头
+
+```js
+const stop = (e) => {
+  const stream = video.srcObject
+  const tracks = stream.getTracks()
+
+  for (i = 0; i < tracks.length; i++) {
+    var track = tracks[i]
+    track.stop()
+  }
+
+  video.srcObject = null
+}
+```
+
+## constraints 参数
+
+> 在介绍使用 `mediaDevices.getUserMedia(constraints)` 时，需要了解的一些关于 `constraints` 参数的配置选择。
+
+`constraints` —— 指定了请求的媒体类型和相对应的参数。
+
+以下同时请求不带任何参数的音频和视频：
+
+```js
+const constraints = {
+  audio: true,
+  video: true
+}
+```
+
+如果为某种媒体类型设置了 `true` ，得到的结果的流中就需要有此种类型的轨道。
+
+如果其中一个由于某种原因无法获得，`getUserMedia()` 将会产生一个错误。
+
+当由于隐私保护的原因，无法访问用户的摄像头和麦克风信息时，应用可以使用额外的 `constraints` 参数请求它所需要或者想要的摄像头和麦克风能力。下面演示了应用想要使用 `1280 x 720` 的摄像头分辨率：
+
+```js
+const constraints = {
+  audio: true,
+  video: { width: 1280, height: 720 }
+}
+```
+
+浏览器会试着满足这个请求参数，但是如果无法准确满足此请求中参数要求或者用户选择覆盖了请求中的参数时，有可能返回其它的分辨率。
+
+强制要求获取特定的尺寸时，可以使用关键字 `min`，`max` 或者 `exact`（就是 `min == max`）。以下参数表示要求获取最低为 `1280 x 720` 的分辨率。
+
+```js
+const constraints = {
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}
+```
+
+如果摄像头不支持请求的或者更高的分辨率，返回的 `Promise` 会处于 `rejected` 状态，而且用户将不会得到要求授权的提示。
+
+造成不同表现的原因是，相对于简单的请求值和 `ideal` 关键字而言，关键字 `min`，`max` 和 `exact` 有着内在关联的强制性，请看一个更详细的例子：
+
+```js
+const constraints = {
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}
+```
+
+当请求包含一个 `ideal`（应用最理想的）值时，这个值有着更高的权重，意味着浏览器会先尝试找到最接近指定的理想值的设定或者摄像头（如果设备拥有不止一个摄像头）。
+
+简单的请求值也可以理解为是应用理想的值，因此我们的第一个指定分辨率的请求也可以写成如下：
+
+```js
+const constraints = {
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}
+```
+
+并不是所有的 `constraints` 都是数字。例如，在移动设备上面，如下的例子表示优先使用前置摄像头（如果有的话）：
+
+```js
+const constraints = {
+  audio: true,
+  video: {
+    facingMode: 'user'
+  }
+}
+```
+
+强制使用后置摄像头，可以使用：
+
+```js
+const constraints = {
+  audio: true,
+  video: {
+    facingMode: {
+      exact: 'environment'
+    }
+  }
+}
+```
+
+在某些情况下，比如 WebRTC 上使用受限带宽传输时，低帧率可能更适宜。
+
+```js
+const constraints = {
+  video: {
+    frameRate: {
+      ideal: 10,
+      max: 15
+    }
+  }
+}
+```
+
+## 更多资料
+
+- [Sketchy Webcam Filter Effects](https://frontend.horse/articles/sketchy-webcam-filter-effects/)
+- [How to Record Audio Using the MediaStream API](https://www.sitepoint.com/mediastream-api-record-audio/)
diff --git "a/\345\211\215\347\253\257/Babel \345\205\245\351\227\250.md" "b/\345\211\215\347\253\257/Babel \345\205\245\351\227\250.md"
new file mode 100644
index 0000000..972d723
--- /dev/null
+++ "b/\345\211\215\347\253\257/Babel \345\205\245\351\227\250.md"	
@@ -0,0 +1,172 @@
+# Babel 入门
+
+Babel 是一个很棒的工具，它已经存在了相当长的一段时间，但是现在几乎每个 JavaScript 开发人员都依赖它，而且这种情况还会继续，因为 Babel 现在是不可或缺的，并为每个 Web 开发人员解决了一个大问题。
+
+**哪个问题？**
+
+每个 Web 开发人员都有一个问题：JavaScript 的一项功能在最新版本的浏览器中可用，但在旧版本中不可用。或者 Chrome 或 Firefox 实现了它，但 IE 和 Edge 没有。
+
+例如，箭头函数：
+
+```js
+;[1, 2, 3].map((n) => n + 1)
+```
+
+现在所有现代浏览器都支持它。IE11 不支持它，Opera Mini 也不支持，您可以通过以下方式查看 JS 语法的兼容情况：
+
+- [Can I Use](https://caniuse.com/)
+- [ES6 Compatibility Table](https://kangax.github.io/compat-table/es6/)
+
+**那么你应该如何处理这个问题呢？**你应该继续前进，把那些浏览器比较旧/不兼容的客户抛在脑后，还是应该编写更旧的 JavaScript 代码来让所有用户都满意？
+
+Babel 是一个编译器：它接收以一种标准编写的代码，并将其转译成另一种标准的代码。
+
+您可以配置 Babel 以将现代 ES6+ 语法转换为 ES5 语法：
+
+```js
+;[1, 2, 3].map(function (n) {
+  return n + 1
+})
+```
+
+这必须在构建时发生，因此您必须设置一个工作流来为您处理此问题。Webpack 是一种常见的解决方案，但现在，我更多的使用 Vite。
+
+## 安装 Babel
+
+在本地安装 Babel：
+
+```bash
+npm i -D @babel/core @babel/cli
+```
+
+在过去，很多人都会建议全局安装 `@babel/cli`，但现在 babel 维护人员不鼓励这样做，因为通过在本地使用它，您可以在每个项目中拥有不同版本的 babel，并且在您的存储库中签入 babel 更有利于团队工作。
+
+使用 npm 自带的 npx 运行 babel：
+
+```bash
+npx babel script.js
+```
+
+## Babel 示例配置
+
+Babel 开箱即用并没有做任何有用的事情，您需要对其进行配置并添加插件。
+
+> [Babel 插件列表](https://babeljs.io/docs/en/plugins)
+
+为了解决介绍中提到的问题（在每个浏览器中使用箭头函数），我们安装：
+
+```bash
+npm i -D @babel/plugin-transform-arrow-functions
+```
+
+在 `.babelrc` 配置：
+
+```json
+{
+  "plugins": ["@babel/plugin-transform-arrow-functions"]
+}
+```
+
+以下是一个示例：
+
+```js
+// script.js
+var a = () => {}
+var a = (b) => b
+
+const double = [1, 2, 3].map((num) => num * 2)
+console.log(double) // [2,4,6]
+
+var bob = {
+  _name: 'Bob',
+  _friends: ['Sally', 'Tom'],
+  printFriends() {
+    this._friends.forEach((f) => console.log(this._name + ' knows ' + f))
+  }
+}
+console.log(bob.printFriends())
+```
+
+运行 `npx babel script.js`，将输出：
+
+```js
+var a = () => {}
+var a = (b) => b
+
+const double = [1, 2, 3].map((num) => num * 2)
+console.log(double) // [2,4,6]
+
+var bob = {
+  _name: 'Bob',
+  _friends: ['Sally', 'Tom'],
+  printFriends() {
+    this._friends.forEach((f) => console.log(this._name + ' knows ' + f))
+  }
+}
+console.log(bob.printFriends())
+```
+
+## Babel 预设
+
+上面，我们介绍了如何将 Babel 配置为编译为特定的 JavaScript 特性。
+
+你可以添加更多的插件，但你不能一个一个地添加到配置特性，这是不现实的。
+
+这就是 Babel 提供预设的原因。
+
+官方预设有：
+
+- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 用于编译 ES2015+ 语法
+- [`@babel/preset-typescript`](https://babeljs.io/docs/en/babel-preset-typescript) 用于 TypeScript
+- [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) 用于 React
+- [`@babel/preset-flow`](https://babeljs.io/docs/en/babel-preset-flow) 用于 Flow
+
+我们这里介绍以下 `@babel/preset-env`。
+
+### @babel/preset-env 预设
+
+`@babel/preset-env` 预设支持所有现代 JavaScript 特性。
+
+默认情况下 `@babel/preset-env` 将使用 [browserslist](https://github.com/ai/browserslist#queries) 配置源，除非设置了 [`targets`](https://babeljs.io/docs/en/babel-preset-env#targets) 或 [`ignoreBrowserslistConfig`](https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig) 选项。
+
+例如，支持所有浏览器的最后 2 个版本，但对于 IE，支持自 IE 9 以来的所有版本：
+
+```json
+{
+  "presets": [
+    [
+      "@babel-preset-env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "ie >= 9"]
+        }
+      }
+    ]
+  ]
+}
+```
+
+或者，我不需要浏览器支持，只要让我使用 Node.js 12.0 即可：
+
+```json
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": "12.0"
+        }
+      }
+    ]
+  ]
+}
+```
+
+[有关预设的更多信息](https://babeljs.io/docs/en/presets)
+
+至于构建工具配置 Babel，可以查看它们各自的官网/生态，例如：webpack 需要配置 [babel-loader](https://webpack.docschina.org/loaders/babel-loader)。与配合构建工具，我们不在需要 `.babelrc` 文件。
+
+> 这里推荐我最近新建的仓库 [frontend-focus](https://github.com/lio-zero/frontend-focus)。
+
+另外，有一篇 Babel 7 的文章可以看看，[不容错过的 Babel7 知识](https://juejin.cn/post/6844904008679686152)，但这篇文章已经是两年前了的。前端技术栈日新月异，建议多看看官方文档。
diff --git "a/\345\211\215\347\253\257/ESLint \351\205\215\347\275\256\346\226\207\344\273\266.md" "b/\345\211\215\347\253\257/ESLint \351\205\215\347\275\256\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..683f61e
--- /dev/null
+++ "b/\345\211\215\347\253\257/ESLint \351\205\215\347\275\256\346\226\207\344\273\266.md"	
@@ -0,0 +1,269 @@
+# ESLint 配置文件
+
+你可以使用 `.eslint.*` 文件或 `package.json` 文件中的 `eslintConfig` 选项来[配置 ESLint](https://eslint.org/docs/latest/user-guide/configuring)。你的 `.eslint.*` 文件可以是 `.eslintrc.json`、`.eslintrc.js` 或 `.eslintrc.yml`，也可以是 `.eslintrc`。
+
+> 配置文件优先级：.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json。详细内容可以查看[如何在 Node.js 应用程序中使用 ESLint](https://github.com/lio-zero/blog/blob/main/Node/%E5%A6%82%E4%BD%95%E5%9C%A8%20Node.js%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ESLint.md)
+
+下面是一个简单的 `.eslintrc.json` 文件，它启用了 [`no-unused-vars` ESLint 规则](https://eslint.org/docs/latest/rules/no-unused-vars):
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {
+    "no-unused-vars": "error"
+  }
+}
+```
+
+你也可以将 ESLint 配置定义为一个导出文件的 JavaScript 对象。下面是等价的 `.eslintrc.js` 文件。
+
+```js
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    no-unused-vars: 'error'
+  }
+}
+```
+
+如果你更喜欢 [YAML](https://yaml.org/)，你也可以写一个 `.eslintrc.yml` 文件。
+
+```yaml
+parserOptions:
+  ecmaVersion: 2020
+rules:
+  no-unused-vars: error
+```
+
+给定上面的每一个 ESLint 配置文件，在下面的脚本 `test.js` 中运行 ESLint 将打印一个 **'message' is assigned a value but never used** 错误。
+
+```js
+const message = 'Hello, World'
+```
+
+下面是 `eslint` 从上述 `test.js` 文件的命令行运行时的输出。
+
+```bash
+$ ./node_modules/.bin/eslint ./test.js
+
+/scratch/test.js
+  1:7  error  'message' is assigned a value but never used  no-unused-vars
+
+✖ 1 problem (1 error, 0 warnings)
+
+$ echo $?
+1
+```
+
+> **Tips**：`echo $?` 命令是在 [Linux 中获取最后一个命令的退出代码的方式](https://shapeshed.com/unix-exit-codes/)。退出代码 `0` 意味着命令成功，即使出现警告，`eslint` 也成功了。如果退出代码为 `1`，则表示执行失败。
+
+## 规则
+
+[rules](https://eslint.org/docs/latest/rules/) 是 ESLint 的基本构建块。每个 ESLint 配置都是一组规则，以及这些规则执行的严格程度（错误或警告）。甚至 [JavaScript Standard Style](https://github.com/standard/standard/blob/master/RULES.md) 也是作为 ESLint 规则的集合。
+
+规则配置可以是字符串（或用相应数字代替）或数组。如果规则配置为字符串，则必须为 `'off'`、`'warn'` 或 `'error'`。
+
+- `"off"` 或 `0` — 告诉 ESLint 忽略给定的规则
+- `"warn"` 或 `1` — 告诉 ESLint 将违反给定的行为视为警告（不影响退出代码）
+- `"error"` 或 `2` — 告诉 ESLint 在违反给定规则时出错（触发时退出代码为 1）
+
+例如，下面是一个 `.eslintrc.json`，它将 `no-unused-vars` 视为警告。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {
+    "no-unused-vars": "warn"
+  }
+}
+```
+
+如果规则配置是一个数组，数组的第一个元素是一个字符串或对应数字（`'off'`， `'warn'` 或 `'error'`），第二个元素是配置单个规则的选项。例如，下面的 `.eslintrc.json` 告诉 ESLint，当任何一行代码的长度超过 66 个字符时，使用 [`max-len` 规则](https://eslint.org/docs/latest/rules/max-len) 就会出错。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {
+    "max-len": ["error", { "code": 66 }]
+  }
+}
+```
+
+## 使用 `extends`
+
+列出您想要使用的每一个 ESLint 规则通常是不可行、不推荐的，所以 ESLint 提供了一个 [`extends` 选项](https://eslint.org/docs/latest/user-guide/configuring#extending-configuration-files)，允许您扩展现有的 ESLint 配置，并进行覆盖。
+
+出于实际目的，如果你正在构建自己的 ESLint 配置，我建议使用 ESLint 内置的 `eslint:recommended` 配置作为起点。
+
+```json
+{
+  "extends": "eslint:recommended"
+}
+```
+
+你可以在 [ESLint 推荐的配置中找到一个完整的规则列表](https://eslint.org/docs/latest/rules/)。你可以通过指定你自己的 `rules` 属性来覆盖 ESLint 推荐的配置中的单个规则。例如，下面的 ESLint 配置使用推荐的配置，除了禁用 `no-undef` 规则。
+
+```json
+{
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-undef": "off"
+  }
+}
+```
+
+## `parser` 选项
+
+`parserOptions` 配置选项告诉 ESLint 你的目标是什么版本的 JavaScript。例如，当您设置 `parserOptions.ecmaVersion` 为 `2017` 时，下面的 JavaScript 是有效的：
+
+```js
+;(async function () {
+  console.log('Hello, World!')
+})()
+```
+
+但是，如果您更改 `parser.ecmaVersion` 为 `2016`，ESLint 将会失败并出现以下错误，因为异步函数在 ES2017 才被引入。
+
+```bash
+$ ./node_modules/.bin/eslint ./test.js
+
+/scratch/test.js
+  1:8  error  Parsing error: Unexpected token function
+
+✖ 1 problem (1 error, 0 warnings)
+```
+
+ESLint 还内置了对 [JSX](https://thecodebarbarian.com/overview-of-jsx-with-non-react-examples.html) 的支持。例如，假设您有以下 `test.js` 文件：
+
+```jsx
+const hello = () => <h1>Hello, World</h1>
+```
+
+通常，ESLint 会在上面的脚本中抛出一个错误 `Parsing error: Unexpected token <`。但是您可以通过将 `parserOptions.ecmaFeatures.jsx` 设置为 `true` 来启用 JSX，如下所示。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": false
+    }
+  }
+}
+```
+
+## 环境
+
+仅仅指定 `ecmaVersion` 并不总是足够的。不同的 JavaScript 运行时和框架具有不同的全局变量和语义。例如，下面的脚本在 Node.js 中运行良好，但在浏览器中却不行，因为浏览器没有全局变量 `process`。
+
+```js
+process.env.MESSAGE = 'Hello, World'
+```
+
+使用下面的 ESLint 配置，您将收到 `'process' is not defined` 错误。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {
+    "no-undef": "error"
+  }
+}
+```
+
+但是一旦你告诉 ESLint 这个脚本将使用 `"env": {"node": true}` 在 node .js 中运行，ESLint 就不会在上面的脚本中出错。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "env": {
+    "node": true
+  },
+  "rules": {
+    "no-undef": "error"
+  }
+}
+```
+
+另一个常用的 `env` 是 `browser`，它告诉 ESLint 这个脚本将在浏览器中运行。这使您的脚本可以访问仅限浏览器的全局变量，例如 `window`。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "no-undef": "error"
+  }
+}
+```
+
+ESLint 档有一个支持环境的[完整列表](https://eslint.org/docs/latest/user-guide/configuring#specifying-environments)。
+
+## 插件
+
+ESLint 自带了各种各样的[内置规则](https://eslint.org/docs/latest/rules/)，但你也可以找到许多在 npm 上有额外规则的插件。许多 ESLint 插件为使用特定的库和框架提供了额外的规则。
+
+例如，[eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue) 提供了额外的特定于 Vue 规则。运行 `npm i eslint-plugin-vue -D` 后，你可以在 ESLint 配置中添加一个 `plugins` 列表，其中包括 `'eslint-plugin-vue'`，或者简称为 `'vue'`，因为 ESLint 足够聪明，可以为你添加 `'eslint-plugin-'` 前缀。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "plugins": ["vue"]
+}
+```
+
+一旦你这样做了，你就可以访问特定于 Vue 的规则，比如 [`no-async-in-computed-properties`](https://eslint.vuejs.org/rules/no-async-in-computed-properties.html)。下面的 ESLint 配置打开了 `no-async-in-computed-properties` 规则。
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "plugins": ["eslint-plugin-vue"],
+  "rules": {
+    "vue/no-async-in-computed-properties": "error"
+  }
+}
+```
+
+如果你在下面的 `test.js` 文件中运行 ESLint，`vue/no-async-in-compute -properties` 规则将会出错，因为 `badProperty` 被设置为一个异步函数:
+
+```js
+const Vue = require('vue')
+
+module.exports = Vue.component('bad-component', {
+  template: '<h1>Hello</h1>',
+  computed: {
+    badProperty: async function () {
+      return 42
+    }
+  }
+})
+```
+
+```bash
+$ ./node_modules/.bin/eslint ./test.js
+
+/scratch/test.js
+  6:18  error  Unexpected async function declaration in "badProperty" computed property  vue/no-async-in-computed-properties
+
+✖ 1 problem (1 error, 0 warnings)
+```
diff --git "a/\345\211\215\347\253\257/Parcel \345\205\245\351\227\250.md" "b/\345\211\215\347\253\257/Parcel \345\205\245\351\227\250.md"
new file mode 100644
index 0000000..05902e4
--- /dev/null
+++ "b/\345\211\215\347\253\257/Parcel \345\205\245\351\227\250.md"	
@@ -0,0 +1,108 @@
+# Parcel 入门
+
+[Parcel](https://parceljs.org/) 是一个面向 web 的零配置构建工具。它将出色的开箱即用的开发体验与可伸缩的体系结构相结合，可以将您的项目从刚开始的阶段发展到大规模的生产应用。
+
+它和 webpack 属于同一个工具类别，但有着不同的价值主张。
+
+其主要特点包括：
+
+- 资源捆绑（JS、CSS、HTML、图像）
+- 零配置代码拆分
+- 使用 Babel、PostCSS 和 PostHTML 进行自动转换
+- 热模块替换
+- 代码诊断
+- 开发服务器
+- 缓存和并行处理以加快构建速度
+- etc
+
+Parcel 承诺无需任何配置即可完成所有这些工作，并且速度也很快。
+
+## 基本用法
+
+全局安装：
+
+```bash
+npm i -g parcel-bundler
+```
+
+使用：
+
+```bash
+parcel watch index.html
+```
+
+它将开始扫描 HTML 页面源中的资源，并用输出文件替换它处理的任何引用。
+
+你也可以将 Parcel 指向一个 JS 文件：
+
+```bash
+parcel watch entry.js
+```
+
+## 开发服务器
+
+Parcel 附带了一个内置的开发服务器，因此您无需设置。您可以从以下方式开始：
+
+```bash
+parcel index.html
+```
+
+## 打包
+
+当你对你的应用感到满意，并且你想创建一个可用于生产环境的捆绑包时，运行：
+
+```bash
+parcel build index.html
+```
+
+生产捆绑包禁用热模块更新，不监视您的更改，一旦捆绑完成，它就会存在，并使用压缩器压缩代码。
+
+它还自动将 `NODE_ENV` 变量应用到生产中，使库生成生产环境代码。
+
+## 资源
+
+### JavaScript
+
+Parcel 支持 ES Modules（`import...`）和 CommonJS（`require...`）。
+
+它使用动态导入执行自动[代码拆分](https://parceljs.org/code_splitting.html)。
+
+动态导入返回一个 Promise，而不是在应用启动时加载所有依赖项，我们可以要求浏览器加载它们，但仅在应用的某些部分就绪时执行。
+
+或者，我们可以要求浏览器仅在需要时才加载它们，例如当用户单击特定链接时。
+
+### CSS
+
+Parcel 支持纯 CSS、SASS、Less 和 Stylus。
+
+您可以使用 [CSS Modules](https://github.com/css-modules/css-modules) 编写 CSS 。
+
+### 转换
+
+当 Parcel 发现您有以下配置之一：
+
+- Babel（`.babelrc`）
+- PostCSS（`.postcssrc`）
+- PostHTML（`.posthtmlrc`）
+
+它将在捆绑过程中自动使用它。
+
+### 热模块更新
+
+热模块替换（HMR）是构建应用时的一项有用功能。当我们保存 CSS 或 JavaScript 的新副本时，HMR 负责更新浏览器中的模块，而不刷新整个应用。
+
+## Parcel 与 webpack 的对比
+
+webpack 可能对一些新开发人员来说，相当困难，它允许你做很多事情，但也意味着我们需要仔细配置它，使其完全满足我们的需求。
+
+有时 `webpack.config.js` 文件增长到数百行，我们将其复制/粘贴到下一个项目中，如果我们需要修改它，这是一个痛苦的过程。
+
+Parcel 承诺我们可以做很多 webpack 所做的事情，但根本不需要任何配置，依赖于约定而不是配置。
+
+从 webpack 4 开始，将引入零配置模式，这主要是为了响应 Parcel 的成功，它带有一些约定，而不是总是需要配置。
+
+Parcel 不需要任何配置即可快速开发小型应用项目，且只需一些简单的配置即可将小型项目扩展到大型应用。
+
+## 最后
+
+到此结束，更多详细内容请查阅[官方文档](https://parceljs.org/docs/)。
diff --git "a/\345\211\215\347\253\257/Tree Shaking.md" "b/\345\211\215\347\253\257/Tree Shaking.md"
new file mode 100644
index 0000000..78d6859
--- /dev/null
+++ "b/\345\211\215\347\253\257/Tree Shaking.md"	
@@ -0,0 +1,99 @@
+# Tree Shaking
+
+## 浏览器原生 ES 模块和性能问题
+
+ES 模块为您提供了一种原生方式，可以将代码分解为更小的模块化部分，并将变量和函数的范围限制在需要的地方。
+
+当您 `import` 导入函数或变量时，必须下载该模块的整个文件。如果只从一个包含数百个函数的文件中导入一个函数，那么最终下载的 JavaScript 将远远超过实际需要的。
+
+例如，假设我们有一个导出三个实用函数的工具库。
+
+```js
+// utils.js
+export function shuffle() {}
+export function foo() {}
+export function baz() {}
+
+export { shuffle, foo, baz }
+```
+
+在另一个文件中，我们要使用 `shuffle()` 函数，所以我们使用 `import` 导入它。
+
+```js
+import { shuffle } from './path/to/utils.js'
+
+let name = ['O.O', 'D.O', 'K.O', 'O.K']
+shuffle(name)
+```
+
+如果您使用浏览器原生 ES 模块，使用 `[type="module"]` 加载脚本，则整个 `utils.js` 文件将由浏览器下载、编译和解析。
+
+您只需要 `shuffle()`，但浏览器必须抓取整个文件才能为您获取该函数。可以想象，这是一个性能问题，尤其是对于较大的库。
+
+这就是需要 **Tree Shaking** 的原因。
+
+## 什么是 Tree Shaking，它是如何工作的？
+
+模块打包器是获取 JavaScript 文件并将所有 `import` 函数和变量组合或连接到单个文件中的工具。
+
+为了尽可能提高文件的性能，现代的模块打包器，比如 [webpack](https://webpack.docschina.org/)、[rollup.js](https://www.rollupjs.org/) 或 [esbuild](https://esbuild.github.io/) 使用一个名为 **tree shaking** 的过程。
+
+> `Tree Shaking` 指基于 ES Module 进行静态分析，通过 AST 将用不到的函数进行移除，从而减小打包体积。
+
+当他们在文件中遇到 `import` 时，他们只会导入您指定的函数和变量（以及他们使用的任何内部变量或函数）。使用上面的示例，捆绑文件将仅包含 `shuffle()` 函数和 `name` 数组。
+
+```js
+function shuffle(arr) {
+  // do something...
+}
+
+let name = ['Gandalf', 'Radagast', 'Merlin']
+shuffle(name)
+```
+
+浏览器原生 ES 模块还有其他性能挑战，因此如果您正在使用它们，我建议您使用模块打包器。
+
+## webpack 的 Tree Shaking
+
+从 webpack 4+ 开始，生产环境下 webpack 会自动为您优化和减少捆绑包的大小，它使用的优化技术是 [Tree Shaking](https://webpack.js.org/guides/tree-shaking/)。本质上，它是一种用于删除未使用代码的优化技术，通过分析静态的 ES 模块，来移除未使用的代码。
+
+您还可以通过在配置文件中添加带有特定字段的 [`optimization` 对象](https://webpack.js.org/configuration/optimization/)来手动优化应用程序。
+
+`minimize` 字段用于指示 webpack 最小化包大小。默认情况下，webpack 将尝试使用 [TerserPlugin](https://www.npmjs.com/package/terser-webpack-plugin) 来实现这一点，它是 webpack 附带的一个代码压缩包。
+
+> `minimize` 适用于通过从代码中删除不必要的数据来最小化代码，从而减少处理后生成的代码大小。
+
+我们还可以通过在 `optimization` 对象中添加一个 `minimizer` 数组字段来使用其他首选缩小器。下面的 [uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin) 就是一个例子。
+
+```js
+// webpack.config.js
+const Uglify = require('uglifyjs-webpack-plugin')
+
+module.exports = {
+  optimization {
+    minimize : true,
+    minimizer : [
+      new Uglify({
+        cache : true,
+        test: /\.js(\?.*)?$/i,
+      })
+    ]
+  }
+}
+```
+
+`uglifyjs-webpack-plugin` 有两个非常重要的选项。首先，启用 `cache` 意味着只有当现有文件发生新更改时，Uglify 才会缩小它们，而 `test` 选项指定了我们要缩小的特定文件类型。
+
+> **注意**：[uglifyjs-webpack-plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin) 提供了一个全面的选项列表，可用于缩小代码。
+
+## 引入支持 Tree Shaking 的 Package
+
+为了减小生产环境体积，我们可以**使用一些支持 ES 的 package，比如使用 `lodash-es` 替代 `lodash`**。
+
+我们可以在 [npm.devtool](https://npm.devtool.tech/lodash-es)中查看某个库是否支持 Tree Shaking。
+
+查看两者对比：
+
+![lodash-es](https://upload-images.jianshu.io/upload_images/18281896-8539dd5cf141adf7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![lodash](https://upload-images.jianshu.io/upload_images/18281896-62582741c8395bdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
diff --git "a/\345\211\215\347\253\257/Vite \345\205\245\351\227\250.md" "b/\345\211\215\347\253\257/Vite \345\205\245\351\227\250.md"
new file mode 100644
index 0000000..b985350
--- /dev/null
+++ "b/\345\211\215\347\253\257/Vite \345\205\245\351\227\250.md"	
@@ -0,0 +1,73 @@
+# Vite 入门
+
+[Vite](https://vitejs.dev/) 是一个构建工具，最初只是作为 [Vue 单文件组件](https://vuejs.org/guide/scaling-up/sfc.html)（SFC）的开发服务器，但现在已经发展成为一个无捆绑的 JavaScript 开发服务器。它旨在为现代 Web 项目提供更快、更精简的开发体验。
+
+Vite 不会在开发环境中捆绑我们的项目，而是使用原生 ES 模块导入。
+
+根据官方[文档](https://github.com/vitejs/vite)：
+
+> Vite 是一个固执己见的 Web 开发构建工具，它在开发过程中通过原生 ES 模块导入为您的代码提供服务，并将其与用于生产的 [Rollup](https://rollupjs.org/) 捆绑在一起。
+
+Vite 与当前可用的其他开发服务器之间的主要区别在于，它在开发过程中不会捆绑您的文件。
+
+## 它是如何工作的？
+
+模块打包器如今流行的原因之一是，当 ES 模块首次在 ES2016 中引入时，浏览器对 ES6 模块的支持较差。许多现代浏览器现在都支持原生 ES 模块，您可以使用原生的 `import` 和 `export` 语句，我们可以使用 `script` 标签中的 `type="module"` 属性在 HTML 中包含我们的导入，以指定我们要导入的模块：
+
+```html
+<script type="module" src="/path/to/file.js"></script>
+```
+
+根据[文档](https://vitejs.dev/guide/)，源代码中的 ES 导入语法直接提供给浏览器，任何支持原生 `<script module>` 的浏览器都会自动解析它们，然后为每次导入发出 HTTP 请求。开发服务器拦截来自浏览器的 HTTP 请求，并在必要时执行代码转换。
+
+启动时间大幅提升。
+
+### Vite 特性
+
+使用 Vite 的一些好处包括：
+
+- 裸模块解析
+- 模块热替换（HMR）
+- 按需编译
+- 配置选项
+
+您可以通过在开发模式下的配置文件中添加 [Koa 中间件](https://github.com/koajs/koa)和为构建生成一个 [Rollup 插件](https://github.com/rollup/plugins)来添加对自定义文件转换的支持。
+
+Vite 的其他功能包括：
+
+- 支持 `.tsx` 和 `.jsx` 文件使用 [esbuild](https://github.com/evanw/esbuild) 进行编译
+- 对 TypeScript 的开箱即用支持，也使用 [esbuild](https://github.com/evanw/esbuild) 进行编译
+- 资源 URL 处理
+- 支持 CSS 预处理器、PostCSS 和 CSS 模块
+- 支持模式选项和环境变量
+- etc
+
+## 基本用法
+
+为了开始使用 Vite，我们将使用 `create-vite-app`，这是一个引导新 Vite 项目的样板文件，除了 Vue 以外，它还支持 React 和 Preact 等多个样板。
+
+依次输入以下命令，使用模板创建新的 Vite 应用程序：
+
+```bash
+npx create-vite-app my-vite-project
+npm i
+npm run dev
+```
+
+效果如下：
+
+![使用 Vite 快速构建一个开发环境](https://upload-images.jianshu.io/upload_images/18281896-f6dd6f93d6b827d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+运行以下命令打包应用程序：
+
+```bash
+vite build
+```
+
+Vite 使用 Rollup 进行生产构建，生产构建输出位于项目根目录中的 `dist` 目录中。它包含可以部署在任何地方的静态资源（并且可以进行 polyfill 以支持旧版浏览器）。
+
+## 最后
+
+本文简单介绍了 Vite 是如何工作的，它的一些特性，已经如何使用 Vite 构建前端项目。
+
+后面，我会深入它的内部，带您了解它内部的各种工作原理。
diff --git "a/\345\211\215\347\253\257/Webpack DefinePlugin.md" "b/\345\211\215\347\253\257/Webpack DefinePlugin.md"
new file mode 100644
index 0000000..fae7eb8
--- /dev/null
+++ "b/\345\211\215\347\253\257/Webpack DefinePlugin.md"	
@@ -0,0 +1,72 @@
+# Webpack DefinePlugin
+
+Webpack 的 [`DefinePlugin()`](https://webpack.js.org/plugins/define-plugin/) 函数允许你用另一个令牌替换编译代码中的给定令牌。一个常见的用例是，当您不能直接使用 `.env` 文件时，使用它来定义环境变量。
+
+假设我们的 `.env` 文件有一个 `KEY` 值：
+
+```js
+KEY = 123456
+```
+
+我们使用 [`dotenv`](https://www.npmjs.com/package/dotenv) 模块，并配置如下 webpack：
+
+```js
+'use strict'
+
+const webpack = require('webpack')
+require('dotenv').config()
+
+const compiler = webpack({
+  entry: {
+    app: `${__dirname}/src/main.js`
+  },
+  output: {
+    path: `${__dirname}/public`,
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __KEY: `${process.env.KEY}`
+    })
+  ]
+})
+```
+
+编译前：
+
+```js
+console.log(__KEY)
+```
+
+编译后：
+
+```js
+/******/ ;() => {
+  // webpackBootstrap
+  /******/ 'use strict'
+  var __webpack_exports__ = {} // CONCATENATED MODULE: ./app.js
+
+  /***/ ;() => {
+    eval(
+      "console.log('123456')\r\n\n\n//# sourceURL=webpack://webpack-DefinePlugin/./app.js?"
+    )
+
+    /***/
+  }
+
+  /******/
+}
+```
+
+## 切换环境
+
+另一个有用的技巧是使用 `DefinePlugin()` 在开发和生产服务器 URL 之间切换。例如，假设您希望根据 `NODE_ENV` 将前端发出请求的服务器切换到另一个服务器。下面是使用 `DefinePlugin()` 的方法：
+
+```js
+new Webpack.DefinePlugin({
+  URL:
+    process.env.NODE_ENV === 'development'
+      ? `'http://localhost:3000'`
+      : `'https://api.myapp.com'`
+})
+```
diff --git "a/\345\211\215\347\253\257/Webpack Watch.md" "b/\345\211\215\347\253\257/Webpack Watch.md"
new file mode 100644
index 0000000..9c35010
--- /dev/null
+++ "b/\345\211\215\347\253\257/Webpack Watch.md"	
@@ -0,0 +1,60 @@
+# Webpack Watch
+
+通常，当您在开发阶段运行 Webpack 时，您希望在 [`watch` 模式](https://webpack.js.org/configuration/watch/)下运行它。这将配置 Webpack 来监视项目中的文件更改，并在文件更改时重新编译。换句话说，你不必每次都手动重新运行 Webpack。
+
+例如，假设您有以下 `webpack.config.js` 文件。它需要一个 `app.js` 文件，并将其编译为 `./bin/app.min.js`。
+
+```js
+module.exports = {
+  mode: 'development',
+  entry: {
+    app: `${__dirname}/app.js`
+  },
+  target: 'web',
+  output: {
+    path: `${__dirname}/bin`,
+    filename: '[name].min.js'
+  }
+}
+```
+
+假设 `app.js` 包含一个简单的打印语句：
+
+```js
+console.log('Hello, world')
+```
+
+现在，运行 `./node_modules/.bin/webpack --watch`，您应该会看到下面的输出。确保你同时安装了 Webpack 和 Webpack CLI。
+
+![watch](https://upload-images.jianshu.io/upload_images/18281896-4eb27b7e0768f918.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+我们修改 `app.js`：
+
+```js
+console.log('Hello, world !')
+```
+
+Webpack 将检测到更改并重新编译：
+
+![watch](https://upload-images.jianshu.io/upload_images/18281896-66433f90342ae6f5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 启用 `watch` 模式的其他方法
+
+您还可以从 Webpack 配置文件启用监视模式：
+
+```js
+module.exports = {
+  mode: 'development',
+  watch: true, // 启用 watch 模式
+  entry: {
+    app: `${__dirname}/app.js`
+  },
+  target: 'web',
+  output: {
+    path: `${__dirname}/bin`,
+    filename: '[name].min.js'
+  }
+}
+```
+
+然而，这种方法通常是一个糟糕的选择，因为如果您在 CI/CD 工具或 `git commit` 钩子中进行编译，您不想在 `watch` 模式下运行 Webpack。你应该使用 `--watch` 启用 `watch` 模式，除非您确定永远不希望在没有 `watch` 的情况下运行 Webpack。
diff --git "a/\345\211\215\347\253\257/Webpack \345\205\245\351\227\250.md" "b/\345\211\215\347\253\257/Webpack \345\205\245\351\227\250.md"
new file mode 100644
index 0000000..45b0de1
--- /dev/null
+++ "b/\345\211\215\347\253\257/Webpack \345\205\245\351\227\250.md"	
@@ -0,0 +1,455 @@
+# Webpack 入门
+
+[Webpack](https://webpack.docschina.org/) 是一种用于编译 JavaScript 模块的工具，也称为模块捆绑器。
+
+给定大量文件，它会生成一个文件（或几个文件）来运行您的应用程序。
+
+它可以执行许多操作：
+
+- 捆绑资源。
+- 监视更改并重新运行任务。
+- 可以运行 Babel 转译到 ES5，允许您使用最新的 JavaScript 功能，而不必担心浏览器支持。
+- 可以将 CoffeeScript 转换为 JavaScript
+- 可以将内联图像转换为 Data URI。
+- 允许您对 CSS 文件使用 `require()`。
+- 可以运行开发 Web 服务器。
+- 可以处理热模块替换。
+- 可以将输出文件拆分为多个文件，以避免在第一个页面命中时加载巨大的 js 文件。
+- 可以执行 [Tree Shaking](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Tree%20Shaking.md)（摇树）。
+
+Webpack 不仅限于在前端使用，它在后端 Node.js 开发中也很有用。
+
+webpack 的前身，以及仍然被广泛使用的工具，包括：
+
+- [Grunt](https://gruntjs.com/)
+- [Broccoli](https://broccoli.build/)
+- [Gulp](https://gulpjs.com/)
+
+> 推荐：[构建工具](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7.md)
+
+这些和 Webpack 的功能有很多相似之处，但主要区别在于它们被称为任务运行器，而 Webpack 是作为模块捆绑器诞生的。
+
+这是一个更专注的工具：您指定应用程序的入口点（它甚至可以是一个带有 `script` 标签的 HTML 文件），webpack 分析文件，并将运行应用程序所需的所有内容打包到一个 JavaScript 输出文件中（如果使用代码拆分，则打包到更多文件中）。
+
+## 安装 webpack
+
+可以为每个项目全局或本地安装 Webpack。
+
+### 全局安装
+
+以下是使用 Yarn 全局安装：
+
+```bash
+yarn global add webpack webpack-cli
+```
+
+使用 npm：
+
+```bash
+npm i -g webpack webpack-cli
+```
+
+完成后，您应该可以运行：
+
+```bash
+webpack-cli
+```
+
+### 本地安装
+
+Webpack 也可以在本地安装。这是推荐的设置，因为每个项目都可以更新 webpack，而且您不太愿意只为一个小项目使用最新的功能，而不是更新所有使用 webpack 的项目。
+
+yarn：
+
+```bash
+yarn add webpack webpack-cli -D
+```
+
+npm：
+
+```bash
+npm i webpack webpack-cli -D
+```
+
+完成后，将其添加到您的 `package.json` 文件中：
+
+```json
+{
+  //...
+  "scripts": {
+    "build": "webpack"
+  }
+}
+```
+
+完成后，您可以通过键入运行以下命令来 webpack：
+
+```bash
+yarn build
+```
+
+## Webpack 配置
+
+默认情况下，如果您遵守以下约定，webpack（从版本 4 开始）不需要任何配置：
+
+- 应用程序的入口点是 `./src/index.js`
+- 输出放在 `./dist/main.js`。
+- Webpack 在生产模式下工作
+
+> Webpack 5
+
+当然，当您需要的时候，您可以自定义 webpack 的每一项。webpack 配置存储在项目根文件夹下的 `webpack.config.js` 文件中。
+
+## 入口点
+
+默认情况下，入口点为 `./src/index.js`，以下简单的示例使用 `./index.js` 文件作为入口文件：
+
+```js
+module.exports = {
+  // ...
+  entry: './index.js'
+  // ...
+}
+```
+
+## 输出
+
+默认情况下，输出在 `./dist/main.js` 中生成。以下示例将输出包放入 `app.js` 中：
+
+```js
+module.exports = {
+  // ...
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'app.js'
+  }
+  // ...
+}
+```
+
+## Loader
+
+使用 webpack 可以在 JavaScript 代码中使用 `import` 或 `require` 语句，不仅可以包括其他 JavaScript，还包括任何类型的文件，例如 CSS。
+
+Webpack 旨在处理我们所有的依赖关系，而不仅仅是 JavaScript，而 loader 是实现此目的的一种方式。
+
+例如，在您的代码中，您可以使用：
+
+```js
+import 'style.css'
+```
+
+通过使用此 loader 配置：
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [{ test: /\.css$/, use: 'css-loader' }]
+  }
+  // ...
+}
+```
+
+正则表达式以任何 CSS 文件为目标。
+
+loader 可以有以下选项：
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true
+            }
+          }
+        ]
+      }
+    ]
+  }
+  // ...
+}
+```
+
+您可以为每个规则要求多个 loader：
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+  // ...
+}
+```
+
+在本例中，`css-loader` 解释 `import 'style.css'` 中的 CSS 指令。然后，`style-loader` 负责使用 `<style>` 标签将 CSS 注入 DOM 中。
+
+顺序很重要，它是相反的（最后一个先执行）。
+
+> 这涉及到了 Loader 的执行机制。推荐：阿宝哥的[多图详解，一次性搞懂 Webpack Loader](https://juejin.cn/post/6992754161221632030)。
+
+**有哪些 loader？**很多很多！您可以在此处找到[完整列表](https://webpack.js.org/loaders/)。
+
+常用的 loader 是 [Babel](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Babel%20%E5%85%A5%E9%97%A8.md)，它用于将现代 JavaScript 转换到 ES5 代码：
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  }
+  // ...
+}
+```
+
+这个示例使 Babel 预处理我们所有的 React/JSX 文件：
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  }
+  // ...
+}
+```
+
+[请参阅 `babel-loader` 此处的选项](https://webpack.js.org/loaders/babel-loader/)。
+
+## 插件
+
+插件就像 loader，但需要类固醇。它可以做 loader 做不到的事情，它是 webpack 的主要组成部分。
+
+举个例子：
+
+```js
+module.exports = {
+  // ...
+  plugins: [new HTMLWebpackPlugin()]
+  // ...
+}
+```
+
+`HTMLWebpackPlugin` 插件的任务是自动创建 HTML 文件，添加输出 JS 包路径，这样 JavaScript 就可以提供服务了。
+
+[有很多插件可用](https://webpack.js.org/plugins/)。
+
+一个有用的插件，`CleanWebpackPlugin` 可以用来在创建任何输出之前清除 `dist/` 文件夹，这样在更改输出文件的名称时就不会留下文件：
+
+```js
+module.exports = {
+  // ...
+  plugins: [new CleanWebpackPlugin(['dist'])]
+  // ...
+}
+```
+
+## webpack 模式
+
+此模式（在 webpack 4 中引入）设置了 webpack 工作的环境。它可以将其设置为 `development` 或 `production`（默认为 `production`）
+
+```js
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'app.js'
+  }
+}
+```
+
+开发模式：
+
+- 构建速度非常快
+- 优化程度低于生产模式
+- 不删除注释
+- 提供更详细的错误信息和建议
+- 提供更好的调试体验
+
+生产模式构建速度较慢，因为它需要生成更优化的捆绑包。生成的 JavaScript 文件的大小更小，因为它删除了生产中不需要的许多内容。
+
+## 运行 webpack
+
+如果全局安装，则可以从命令行手动运行 Webpack，但通常需要在 `package.json` 内编写一个脚本，然后使用 `npm` 或 `yarn` 运行。
+
+例如，我们之前使用的 `package.json` 脚本定义：
+
+```json
+"scripts": {
+  "build": "webpack"
+}
+```
+
+允许我们通过运行：
+
+```bash
+npm run build
+yarn run build
+yarn build
+```
+
+## 观察变化
+
+当您的应用发生变化时，Webpack 可以自动重建捆绑包，并持续监听下一个变化。
+
+只需添加此脚本：
+
+```json
+"scripts": {
+  "watch": "webpack --watch"
+}
+```
+
+然后运行：
+
+```bash
+npm run watch
+yarn run watch
+yarn watch
+```
+
+`watch` 模式的一个不错的特性，只有在构建没有错误时才会更新捆绑包。如果有错误，`watch` 将继续监听更改，并尝试重新构建包，但当前的工作包不受这些问题的构建的影响。
+
+## 处理图像
+
+Webpack 允许我们使用 [`file-loader`](https://webpack.js.org/loaders/file-loader/) 以非常方便的方式使用图像。
+
+简单的配置：
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: ['file-loader']
+      }
+    ]
+  }
+  // ...
+}
+```
+
+允许您在 JavaScript 中导入图像：
+
+```js
+import Icon from './icon.png'
+
+const img = new Image()
+img.src = Icon
+element.appendChild(img)
+```
+
+`file-loader` 还可以处理其他资源类型，如字体、CSV 文件、XML 等。
+
+另一个处理图像的好工具是 [`url-loader`](https://github.com/webpack-contrib/url-loader)。
+
+此示例将加载任何小于 8KB 的 PNG 文件作为 [Data URL](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/Data%20URL.md)。
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.png$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192
+            }
+          }
+        ]
+      }
+    ]
+  }
+  // ...
+}
+```
+
+## 处理 SASS 代码并将其转换为 CSS
+
+使用 `sass-loader`、`css-loader` 和 `style-loader`:
+
+```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader']
+      }
+    ]
+  }
+  // ...
+}
+```
+
+## 生成 Source Maps
+
+例如，由于 webpack 捆绑了代码，因此必须使用 Source Maps（源映射）来获取对引发错误的原始文件的引用。
+
+您告诉 webpack 使用配置的 [`devtool` 属性](https://webpack.js.org/configuration/devtool)生成源映射：
+
+```js
+module.exports = {
+  /*...*/
+  devtool: 'inline-source-map'
+  /*...*/
+}
+```
+
+`devtool` 有许多可能的值，最常用的可能是：
+
+- `none` — 不添加源映射
+- `source-map` — 非常适合生产环境，提供了一个可以最小化的独立源映射，并在包中添加了一个引用，因此开发工具知道源映射是可用的。当然，您应该配置服务器以避免发送它，并将其用于调试目的
+- `inline-source-map` — 非常适合开发环境，将源映射内联为 Data URL
+
+关于 Source Map 详细内容可以阅读 [Introduction to JavaScript Source Maps](https://developer.chrome.com/blog/sourcemaps/)。另外，推荐[深入浅出之 Source Map](https://juejin.cn/post/7023537118454480904)。
+
+## 更多资料
+
+- [webpack-demos](https://github.com/ruanyf/webpack-demos)
+- [Webpack 减少构建时间](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20%E5%87%8F%E5%B0%91%E6%9E%84%E5%BB%BA%E6%97%B6%E9%97%B4.md)
+- [Webpack DefinePlugin](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20DefinePlugin.md)
+- [Webpack Watch](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20Watch.md)
+- [使用 Webpack 编译 TypeScript](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%20Webpack%20%E7%BC%96%E8%AF%91%20TypeScript.md)
+- [Webpack externals](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20externals.md)
+- [使用别名缩短 Webpack 中的导入路径](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%E5%88%AB%E5%90%8D%E7%BC%A9%E7%9F%AD%20Webpack%20%E4%B8%AD%E7%9A%84%E5%AF%BC%E5%85%A5%E8%B7%AF%E5%BE%84.md)
+- [构建模块打包器](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E6%9E%84%E5%BB%BA%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E5%99%A8.md)
diff --git "a/\345\211\215\347\253\257/Webpack \345\207\217\345\260\221\346\236\204\345\273\272\346\227\266\351\227\264.md" "b/\345\211\215\347\253\257/Webpack \345\207\217\345\260\221\346\236\204\345\273\272\346\227\266\351\227\264.md"
new file mode 100644
index 0000000..c8362c9
--- /dev/null
+++ "b/\345\211\215\347\253\257/Webpack \345\207\217\345\260\221\346\236\204\345\273\272\346\227\266\351\227\264.md"	
@@ -0,0 +1,304 @@
+# Webpack 减少构建时间
+
+> Webpack 构建项目的速度很大程度上取决于项目的复杂度和电脑配置。确保项目在有足够的磁盘空间和良好的处理器情况下运行。
+
+除此之外，我们可以通过一些配置来提升 webpack 的构建速度。webpack 的 [Build Performance](https://webpack.docschina.org/guides/build-performance/) 章节提供了一些提高构建/编译性能的方法。本文将根据 webpack 提供的优化建议来减少项目构建时间。
+
+## 保持最新的 Webpack、Node 和包管理器
+
+使用最新的 webpack 版本（新优化），并且与 Node 版本同步，重点是 `npm/yarn/pnpm` 包管理器，较新的版本创建更高效的模块树并提高解析速度。
+
+## 优化 Loader 的文件搜索范围
+
+通过使用 `include` 和 `exclude` 字段，仅将 loader 应用在实际需要将其转换的模块：
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: path.resolve(__dirname, 'src'),
+        exclude: /node_modules/
+      }
+    ]
+  }
+}
+```
+
+以上示例中，`test` 设置仅在 JS 文件时才使用 `babel-loader`，`include` 仅在 `src` ⽂件夹下查找，`exclude` 排除 `node_modules` 目录。
+
+另外，将 Babel 编译过的文件缓存起来，下次只需要编译更改过的文件即可，这样可以大幅度加快打包时间。
+
+```js
+loader: 'babel-loader?cacheDirectory=true'
+```
+
+## 使用更快的 `swc-loader` 替代 `babel-loader`
+
+在 webpack 中耗时最久的当属负责 AST 转换的 loader。
+
+JavaScript 是单线程语言，使用 JavaScript 编写的 loader 无法使用多核 CPU 处理编译任务链，导致性能很低。
+
+而 swc 使用 Rust 编写，在处理 CPU 密集型任务有天然的优势。
+
+正如官网所描述的：
+
+> SWC 在单线程上比 Babel 快 20 倍，在四核上比 Babel 快 70 倍。
+
+以下是一个 [swc-loader](https://swc.rs/docs/usage/swc-loader) 简单的配置：
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.m?js$/,
+      exclude: /(node_modules)/,
+      use: {
+        loader: 'swc-loader'
+      }
+    }
+  ]
+}
+```
+
+## 别名 — `resolve.alias`
+
+通过别名的方式来映射一个路径，能让 webpack 更快找到路径：
+
+```js
+const path = require('path')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@': resolve('src')
+    }
+  }
+}
+```
+
+> 推荐：[使用别名缩短 Webpack 中的导入路径](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%E5%88%AB%E5%90%8D%E7%BC%A9%E7%9F%AD%20Webpack%20%E4%B8%AD%E7%9A%84%E5%AF%BC%E5%85%A5%E8%B7%AF%E5%BE%84.md)
+
+## 解析
+
+减少以下方法条目数量，因为他们会增加文件系统调用的次数。（层级不要过深）
+
+- [`resolve.modules`](https://webpack.docschina.org/configuration/resolve/#resolvemodules) 告诉 webpack 解析模块时应该搜索的目录。
+- [`resolve.extensions`](https://webpack.docschina.org/configuration/resolve/#resolveextensions) 尝试按顺序解析后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
+- [`resolve.mainFiles`](https://webpack.docschina.org/configuration/resolve/#resolvemainfiles) 解析目录时要使用的文件名。
+- [`resolve.descriptionFiles`](https://webpack.docschina.org/configuration/resolve/#resolvedescriptionfiles) 用于描述的 JSON 文件。
+
+如果不使用 [symlinks](https://classic.yarnpkg.com/en/package/symlinks)（例如 `npm link` 或 `yarn link`），可以设置：
+
+```js
+resolve: {
+  symlinks: false
+}
+```
+
+如果你使用自定义 resolve plugin 规则，并且没有指定 context 上下文，可以设置：
+
+```js
+resolve: {
+  cacheWithContext: false
+}
+```
+
+## 减少项目体积
+
+减少编译结果的整体大小，以提高构建性能。尽量保持 chunk 体积小
+
+- 使用数量更少/体积更小的 library（例如：`moment -> day.js`、`lodash -> lodash/es`）。
+- 在多页面应用程序中使用 [SplitChunksPlugin](https://webpack.docschina.org/plugins/split-chunks-plugin#root)，并开启 `async` 模式。
+- 移除未引用代码 — 涉及到了 [Tree Shaking](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Tree%20Shaking.md)。
+- 只编译你当前正在开发的那些代码（缓存）。
+
+## 最小化 entry chunk
+
+确保在生成 entry chunk 时，尽量减少其体积以提高性能。将 `optimization.runtimeChunk` 设置为 `true` 或 `'multiple'`，会为每个入口添加一个只含有 runtime 的额外 chunk。所以它的生成代价较低：
+
+```js
+module.exports = {
+  // ...
+  optimization: {
+    runtimeChunk: true
+  }
+}
+```
+
+## 开启多进程解析耗时 loader
+
+webpack 提供了 [`thread-loader`](https://webpack.docschina.org/loaders/thread-loader) 允许我们可以将耗时的 loader 放置在独立的线程下运行：
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve('src'),
+        use: [
+          'thread-loader' // 注意，这里需要放置在第一位
+          // 后面放置耗时的 loader （例如 babel-loader）
+        ]
+      }
+    ]
+  }
+}
+```
+
+配置 `thread-loader`：
+
+```js
+use: [
+  {
+    loader: 'thread-loader',
+    options: {
+      workers: 2,
+      workerParallelJobs: 50,
+      workerNodeArgs: ['--max-old-space-size=1024'],
+      poolRespawn: false,
+      poolTimeout: 2000,
+      poolParallelJobs: 50,
+      name: 'my-pool'
+    }
+  }
+]
+```
+
+详细的介绍，查看[文档](https://webpack.docschina.org/loaders/thread-loader#examples)。
+
+> **Tips**：[`happypack`](https://www.npmjs.com/package/happypack) 插件作者已表示不在维护此项目，建议使用上述给出的 `thread-loader` 模块替换。
+
+## 压缩代码
+
+webpack v5 提供了开箱即用最新版本的 [`terser-webpack-plugin`](https://webpack.docschina.org/plugins/terser-webpack-plugin)，其默认的生产环境下缩小您的代码。但如果需要自定义配置，仍需要安装它。
+
+```js
+const TerserPlugin = require('terser-webpack-plugin')
+
+module.exports = {
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()]
+  }
+}
+```
+
+其中，你可以配置 [`parallel`](https://webpack.docschina.org/plugins/terser-webpack-plugin#parallel) 属性，它使用多进程并发运行以提高构建速度。
+
+```js
+new TerserPlugin({
+  parallel: true,
+  cache: true
+})
+```
+
+> **注意**，这里启用了 `cache` 意味着只有当现有文件发生新更改时，terser 才会压缩它们，提升二次构建速度。
+
+你也可以选择其他受欢迎的插件，例如：
+
+- [`closure-webpack-plugin`](https://github.com/webpack-contrib/closure-webpack-plugin)
+- [`webpack-parallel-uglify-plugin`](https://github.com/gdborton/webpack-parallel-uglify-plugin)
+
+如果决定尝试一些其他压缩插件，只要确保它们也会按照 [Tree Shaking](https://webpack.docschina.org/guides/tree-shaking) 指南中所描述的具有删除未引用代码（dead code）的能力，并将它作为 [`optimization.minimizer`](https://webpack.docschina.org/configuration/optimization/#optimization-minimizer)。
+
+## 避免额外的优化步骤
+
+webpack 通过执行额外的算法任务，来优化输出结果的体积和加载性能。这些优化适用于小型代码库，但是在大型代码库中却非常耗费性能：
+
+```js
+module.exports = {
+  // ...
+  optimization: {
+    removeAvailableModules: false,
+    removeEmptyChunks: false,
+    splitChunks: false
+  }
+}
+```
+
+- 如果模块已经包含在所有父级模块中，告知 webpack 从 chunk 中检测出这些模块，或移除这些模块。将 `optimization.removeAvailableModules` 设置为 `true` 以启用这项优化。在生产环境中默认会被开启。
+- 如果 chunk 为空，告知 webpack 检测或移除这些 chunk。将 `optimization.removeEmptyChunks` 设置为 `false` 以禁用这项优化。
+- 对于动态导入模块，默认使用 webpack v4+ 提供的全新的通用分块策略（common chunk strategy）。请在 [SplitChunksPlugin](https://webpack.docschina.org/plugins/split-chunks-plugin/) 页面中查看配置其行为的可用选项。
+
+## 输出结果不携带路径信息
+
+webpack 会在输出的 bundle 中生成路径信息。然而，在打包数千个模块的项目中，这会导致造成垃圾回收性能压力。在 `options.output.pathinfo` 设置中关闭：
+
+```js
+module.exports = {
+  // ...
+  output: {
+    pathinfo: false
+  }
+}
+```
+
+## 持久化缓存
+
+在 webpack 4 之前，我们可以使用 `hard-source-webpack-plugin`、`cache-loader` 等插件，或 webpack 的 `DllPlugin` 来开启缓存以提搞编译构建效率。
+
+例如，[`HardSourceWebpackPlugin`](https://github.com/mzgoddard/hard-source-webpack-plugin) 用于为模块提供中间缓存步骤，提升二次构建速度：
+
+```js
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
+
+module.exports = {
+  plugins: [new HardSourceWebpackPlugin()]
+}
+```
+
+缓存默认的存放路径是：`node_modules/.cache/hard-source`。
+
+> **注意**：首次构建时间并没有太大变化，它只在后续的的构建中有所提升，而且建议不要在开发环境中使用它，它并不理想，但在生产环境中会得到很大提升。另外，它已经有好几年未维护。
+
+webpack 5 为了我们内置缓存插件，通过添加 [`cache`](https://webpack.js.org/configuration/cache/#cache) 配置项来开启缓存，开启后将持久缓存生成的 webpack 模块和 chunks，以提升构建速度。
+
+```js
+module.exports = {
+  // ...
+  cache: true
+}
+```
+
+对于开发环境使用 `true`，对于生产环境使用 `false`。
+
+当将 `cache.type` 设置为 `'filesystem'` 是会开放更多的可配置项。详细请查阅文档。
+
+## 其他
+
+- 每个 loader 都有一个启动时间，去除无用的 loader。
+- webpack 会自动开启 [**tree-shaking** 优化](https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/#major-changes-optimization)，去除无用代码
+- 使用 `speed-measure-webpack-plugin` 插件分析每个 loader/plugin 的耗时：
+
+```js
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
+
+const smp = new SpeedMeasurePlugin()
+
+const webpackConfig = smp.wrap({
+  plugins: [new MyPlugin(), new MyOtherPlugin()]
+})
+```
+
+- 使用 [`webpack-bundle-analyzer`](https://www.npmjs.com/package/webpack-bundle-analyzer) 分析包的体积：
+
+```js
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+module.exports = {
+  plugins: [new BundleAnalyzerPlugin()]
+}
+```
+
+- [DllPlugin](https://webpack.docschina.org/plugins/dll-plugin) 表示动态链接库。它采用 webpack 的 DllPlugin 和 DllReferencePlugin 引入 dll，让一些基本上不会做任何改动的代码先打包成静态资源，避免反复编译浪费时间。具体操作不在展示，有一些文章建议不在使用它，详细内容可以查阅[辛辛苦苦学会的 webpack dll 配置，可能已经过时了](https://juejin.cn/post/6844903952140468232)。
+- 将不怎么需要更新的第三方库脱离 webpack 打包，不被打入 bundle 中，从而减少打包时间。webpack 的 [`externals`](https://webpack.js.org/configuration/externals/) 可以帮助到您，它告诉 webpack 从 bundle 中排除某个依赖。`external` 通常用于排除将通过 CDN 加载的依赖。
+- [工具存在某些可能会降低构建性能的问题](https://webpack.docschina.org/guides/build-performance/#specific-tooling-issues)
diff --git "a/\345\211\215\347\253\257/esbuild \345\205\245\351\227\250.md" "b/\345\211\215\347\253\257/esbuild \345\205\245\351\227\250.md"
new file mode 100644
index 0000000..1b49e37
--- /dev/null
+++ "b/\345\211\215\347\253\257/esbuild \345\205\245\351\227\250.md"	
@@ -0,0 +1,514 @@
+# esbuild 入门
+
+[esbuild](https://esbuild.github.io/) 是一个快速的 JavaScript 打包器，主要目标是带来构建工具性能的新时代，并在此过程中创建易于使用的现代捆绑器。
+
+esbuild 是一个用 Go 编写的快速而简单的 JavaScript 捆绑包，其主要特点有：
+
+- 极速，无需缓存
+- ES6 和 CommonJS 模块
+- ES6 模块的 Tree Shaking
+- JavaScript 和 Go 的 [API](https://esbuild.github.io/api/)
+- [TypeScript](https://esbuild.github.io/content-types/#typescript) 和 [JSX](https://esbuild.github.io/content-types/#jsx) 语法
+- [sourcemap](https://esbuild.github.io/api/#sourcemap)
+- [minify](https://esbuild.github.io/api/#minify)
+- [plugins](https://esbuild.github.io/plugins/)
+
+以上是 esbuild 官方对该项目的一些介绍。
+
+本文将介绍 esbuild 的一些基本的用法，如何捆绑 JavaScript 应用程序，包括 TypeScript、图像文件、CSS 等。
+
+## 安装 esbuild
+
+首先，使用 npm 安装 esbuild：
+
+```bash
+npm i -g esbuild
+```
+
+然后，您可以通过调用 esbuild 命令来验证是否安装成功：
+
+```bash
+$ esbuild --version
+# 0.14.38
+```
+
+如果您不想在全局范围内安装 esbuild，也可以这样做：
+
+```bash
+npm i esbuild
+```
+
+但您必须使用完整路径调用 esbuild：
+
+```bash
+$ ./node_modules/.bin/esbuild --version
+# 0.14.38
+```
+
+## 使用 esbuild 捆绑 TypeScript
+
+创建一个 `main.ts` 文件，其中有如下内容：
+
+```ts
+let message: string = 'Hello esbuild!'
+console.log(message)
+```
+
+通过 CLI 捆绑 TypeScript 代码：
+
+```bash
+$ esbuild main.ts --outfile=output.js --bundle --loader:.ts=ts
+  output.js  87b
+
+Done in 4ms
+```
+
+esbuild 命令接受 `main.ts` 作为入口，它是应用程序启动的地方。
+
+然后，提供 `outfile` 选项作为定义输出文件的方法。如果不提供此选项，esbuild 会将结果发送到 `stdout`。
+
+`loader` 选项是用于加载 TypeScript 文件扩展名的选项。但是，您可以忽略此选项，因为 esbuild 可以根据文件扩展名决定使用哪个 `loader`。
+
+通过 `bundle` 选项，esbuild 将把所有依赖项内联到 `output.js` 文件中。
+
+运行命令后，将捆绑到 `output.js` 文件，内容如下：
+
+```js
+;(() => {
+  // main.ts
+  var message = 'Hello esbuild!'
+  console.log(message)
+})()
+```
+
+我们来看一下不使用 `bundle` 选项的情况。
+
+我们更改 `main.ts` 文件的内容如下：
+
+```ts
+import { sayHello } from './lib'
+
+SayHello()
+```
+
+在创建 `lib.ts` 文件，其中编写一个 `sayHello` 并导出：
+
+```js
+export function sayHello() {
+  console.log('Hello esbuild!')
+}
+```
+
+如果不使用 `bundle` 选项，esbuild 只会在结果中导入依赖项：
+
+```bash
+$ esbuild main.ts
+import { sayHello } from "./lib";
+sayHello();
+```
+
+但如果使用 `bundle` 选项，esbuild 将在结果中内联 `lib.ts` 的内容：
+
+```bash
+$ esbuild main.ts --bundle
+(() => {
+  // lib.ts
+  function sayHello() {
+    console.log("Hello esbuild!");
+  }
+
+  // main.ts
+  sayHello()
+})();
+```
+
+使用 `bundle` 选项，可以将所有代码打包到一个文件中。换句话说，两个文件变成一个文件。
+
+## 使用 esbuild 捆绑 React
+
+使用 esbuild 集成 React 到项目中及极其简单。
+
+首先，使用 npm 安装 React 库：
+
+```bash
+npm i react react - dom
+```
+
+然后创建一个名为 `App.js` 的文件，添加以下内容：
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+function App() {
+  return <div>Hello esbuild!</div>
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+创建一个 HTML 文件，以便 React 可以将您的应用程序渲染到具有 ID 为 `root` 的 `div` 中。将以下代码添加到 `index.html` 文件中：
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Hello esbuild!</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="AppBundle.js"></script>
+  </body>
+</html>
+```
+
+在 HTML 文件中，我们使用 `AppBundle.js` 这是捆绑的 JavaScript 文件的名称。
+
+```bash
+esbuild App.js --bundle --outfile=AppBundle.js --loader:.js=jsx
+```
+
+我们使用 `bundle` 选项绑定 JavaScript 文件。然后，使用 `outfile` 选项为输出文件指定所需的名称。
+
+最后一个选项 `loader` 实际上不是可选的。告诉 esbuild 对带有 `.js` 扩展名的文件使用 JSX 加载器，因为 JSX 语法在 `App.js` 中。如果不使用 JSX 加载器，esbuild 将抛出一个错误。如果输入文件的扩展名是 `.jsx` 而不是 `.js`，可以省略 `loader` 选项。因此，如果你将 JavaScript 文件命名为 `App.jsx`，那么你可以忽略 `loader` 选项。
+
+现在您有了 `AppBundle.js`，让我们打开 `index.html` 来检查您的绑定过程是否正常工作。
+
+这里我们需要通过 server 的方式打开 `index.html`，推荐 VS Code 插件 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)，也可以使用 [`http-server`](https://www.npmjs.com/package/http-server) 模块，我们也会在下面介绍到 esbuild 的 `serve` 模式，来开启一个 server。
+
+![Hello esbuild](https://upload-images.jianshu.io/upload_images/18281896-6929781c593a7f71.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 将 CSS 与 esbuild 捆绑
+
+假设我们的 `color.css` 文件有以下内容：
+
+```css
+.item {
+  color: plum;
+}
+```
+
+创建 `style.css` 导入 `color.css`：
+
+```css
+@import 'color.css';
+
+p {
+  font-weight: bold;
+}
+```
+
+要捆绑这两个 CSS 文件，可以运行如下 esbuild 命令：
+
+```bash
+$ esbuild style.css --outfile=out.css --bundle
+
+  out.css  85b
+
+Done in 5ms
+```
+
+查看 `out.css` 文件：
+
+```css
+/* color.css */
+.item {
+  color: plum;
+}
+
+/* style.css */
+p {
+  font-weight: bold;
+}
+```
+
+现在，您只需要在 HTML 文件中包含该文件即可。
+
+如果您想要压缩文件，可以使用 `--minify` 选项：
+
+```bash
+$ esbuild style.css --outfile=out.css --bundle --minify
+
+  out.css  36b
+
+Done in 7ms
+```
+
+压缩后的内容如下：
+
+```css
+.item {
+  color: plum;
+}
+p {
+  font-weight: 700;
+}
+```
+
+## 捆绑图像
+
+您还可以将图像与 esbuild 捆绑在一起。
+
+捆绑图像有两种选择：
+
+- 将图像作为外部文件加载到 JavaScript 文件中
+- 将图像作为 Base64 编码的 Data URL 嵌入到 JavaScript 文件中
+
+让我们看看两者的区别。
+
+创建一个 `index.html` 文件，并添加以下内容：
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Hello, esbuild!</title>
+  </head>
+
+  <body>
+    <div id="root">
+      <div>
+        <img id="image_png" />
+      </div>
+      <div>
+        <img id="image_jpg" />
+      </div>
+    </div>
+    <script src="out_main.js"></script>
+  </body>
+</html>
+```
+
+然后，创建一个 `main.js` 文件，并添加以下内容：
+
+```js
+import png_url from './example.png'
+const png_image = document.getElementById('image_png')
+png_image.src = png_url
+
+import jpg_url from './baidu.jpg'
+const jpg_image = document.getElementById('image_jpg')
+jpg_image.src = jpg_url
+```
+
+这里，我们使用 JavaScript 文件中的 `import` 语句加载图像。与绑定 CSS 文件不同，您不直接绑定图像，而是通过绑定引用图像的 JavaScript 文件来绑定图像。
+
+现在，打包 JavaScript 文件：
+
+```bash
+$ esbuild main.js --bundle --loader:.png=dataurl --loader:.jpg=file --outfile=out_main.js
+
+  out_main.js         102.7kb
+  baidu-YKEFL4XA.jpg   76.8kb
+
+Done in 15ms
+```
+
+这里使用了两个 `loader`。`.png` 扩展使用 `dataurl` 和 `.jpg` 扩展使用 `file` 。使用 `file` 加载器的将会生成一个 `baidu-YKEFL4XA.jpg` 的新文件。
+
+查看生成的 `out_main.js` 文件，内容如下：
+
+```js
+;(() => {
+  // example.png
+  var example_default = 'data:image/png;base64,iVBORw0K...'
+
+  // baidu.jpg
+  var baidu_default = './baidu-YKEFL4XA.jpg'
+
+  // main.js
+  var png_image = document.getElementById('image_png')
+  png_image.src = example_default
+  var jpg_image = document.getElementById('image_jpg')
+  jpg_image.src = baidu_default
+})()
+```
+
+正如您所看到的，第一张图片使用 Based64 编码的 Data URL 格式。第二个图像使用文件路径格式。对于第二张图片，还有一个名为 `baidu-YKEFL4XA.jpg` 的外部文件。
+
+最后，通过 server 的方式打开 `index.html`，查看效果。
+
+## 使用插件
+
+esbuild 并不是一个完整的捆绑解决方案。它默认支持 React、CSS 和图像，但不支持 SASS 预处理等器。如果你想捆绑 SASS 文件，则需要安装一个 esbuild 插件。
+
+> [esbuild 插件列表](https://github.com/esbuild/community-plugins)
+
+有几个插件可以捆绑 SASS 文件。这里使用我们 `esbuild-plugin-sass`。
+
+使用 npm 安装插件，如下所示：
+
+```bash
+npm install esbuild-plugin-sass -D
+```
+
+我们在 `style.scss` 文件内编写一些简单的样式：
+
+```scss
+// style.scss
+$font: Roboto;
+$color: plum;
+
+#root {
+  font: 1.2em $font;
+  color: $color;
+}
+```
+
+要使用 `esbuild-plugin-sass` 插件，需要使用 esbuild 的 `build` API。
+
+在 `main.js` 添加以下内容：
+
+```js
+const sassPlugin = require('esbuild-plugin-sass')
+
+require('esbuild')
+  .build({
+    entryPoints: ['style.scss'],
+    outfile: 'bundle.css',
+    bundle: true,
+    plugins: [sassPlugin()]
+  })
+  .then(() => console.log('Done'))
+  .catch(() => process.exit(1))
+```
+
+我们使用 `plugins` 来引用 SASS 插件，`entryPoints` 引用是我们编写的 scss 文件，其返回的是一个 Promise，成功后我们输出 `Done`。
+
+执行 `main.js` 文件：
+
+```bash
+$ node main.js
+Done
+```
+
+您可以打开 `bundle.css` 文件检查输出结果：
+
+```css
+/* ../../temp/tmp-10260-4kl4Lq4Efuiv/esbuild-test/style.css */
+#root {
+  font: 1.2em Roboto;
+  color: plum;
+}
+```
+
+## watch 模式
+
+esbuild 的 `watch` 模式会监听入口文件，并自动打包。
+
+我们监听 `main.ts` 文件，如果其中内容存在变动，将自动重新打包：
+
+```js
+// build.js
+require('esbuild')
+  .build({
+    entryPoints: ['main.ts'],
+    outfile: 'output.js',
+    bundle: true,
+    loader: { '.ts': 'ts' },
+    watch: true
+  })
+  .then(() => console.log('Done'))
+  .catch(() => process.exit(1))
+```
+
+`main.ts` 文件的内容如下：
+
+```ts
+let message: string = 'Hello esbuild!'
+console.log(message)
+```
+
+现在，我们执行 `build.js` 文件：
+
+```bash
+node build.js
+```
+
+你可能会注意，构建的过程并未中断，仍处于活动状态，esbuild 会持续监听 `mian.ts` 文件的变动。
+
+我们先查看 `output.js` 文件：
+
+```js
+;(() => {
+  // main.ts
+  var message = 'Hello esbuild!'
+  console.log(message)
+})()
+```
+
+回到 `main.ts` 文件，修改一些内容：
+
+```ts
+let message: string = 'Hello World!'
+console.log(message)
+```
+
+在查看 `output.js`：
+
+```js
+;(() => {
+  // main.ts
+  var message = 'Hello World!'
+  console.log(message)
+})()
+```
+
+可以看到输出的文件会自动更新。
+
+`watch` 可以监视文件系统，以便 esbuild 在检测到文件更改时可以捆绑输入文件。
+
+## serve 模式
+
+还有另一种自动绑定文件的方法，称为 `serve` 模式。这意味着您要启动一台服务器来为输出文件提供服务。如果有人从浏览器请求输出文件，如果文件已更改，服务器将自动绑定输入文件。
+
+以下是一个 `index.html` 内容：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hello esbuild!</title>
+  </head>
+  <body>
+    <script src="output.js"></script>
+  </body>
+</html>
+```
+
+其中引入了 `main.ts` 捆绑后输出的 `output.js`，`main.ts` 文件内容如下：
+
+```ts
+let message: string = 'Hello esbuild!'
+console.log(message)
+```
+
+我们使用 `serve` 模式捆绑文件：
+
+```bash
+$ esbuild main.ts --outfile=output.js --bundle --loader:.ts=ts --serve=localhost:8000 --servedir=.
+
+> Local: http://127.0.0.1:8000/
+```
+
+`serve` 选项用于定义服务器和端口。`servedir` 选项定义服务器服务的目录。
+
+访问 `http://127.0.0.1:8000`，打开控制台查看输入内容。然后尝试着修改 `main.ts` 的内容，刷新页面查看修改后的内容。
+
+## 最后
+
+本文简单介绍 esbuild 的一些基本用法，例如 sourcemap 等我们是没讲到的，详细内容可以查看[文档](https://esbuild.github.io/)，后面学习过程中也会进行总结。
diff --git "a/\345\211\215\347\253\257/\344\275\277\347\224\250 ESLint \347\232\204 --fix \346\240\207\345\277\227.md" "b/\345\211\215\347\253\257/\344\275\277\347\224\250 ESLint \347\232\204 --fix \346\240\207\345\277\227.md"
new file mode 100644
index 0000000..73831bd
--- /dev/null
+++ "b/\345\211\215\347\253\257/\344\275\277\347\224\250 ESLint \347\232\204 --fix \346\240\207\345\277\227.md"	
@@ -0,0 +1,69 @@
+# 使用 ESLint 的 --fix 标志
+
+[ESLint 的`--fix`选项](https://eslint.org/docs/user-guide/command-line-interface#options)告诉 ESLint 修复代码中任何它知道如何修复的错误。
+
+例如，ESLint 推荐的配置使用了 [`no-extra-boolean-cast` 规则](https://eslint.org/docs/rules/no-extra-boolean-cast)，这将在 `if` 语句中删除不必要 `!!`。例如，假设您有以下 `test.js` 文件。因为 JavaScript `if` 语句已经检查了 truthy 值，所以在 `if` 语句中没有必要使用 `!!`。
+
+```js
+if (!!(typeof window === 'undefined')) {
+  console.log('Hello from Node.js!')
+}
+```
+
+假设您有以下 `.eslintrc.json` 配置文件：
+
+```json
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {
+    "no-extra-boolean-cast": "error"
+  }
+}
+```
+
+ESLint 会报 **Redundant double negation** 错误：
+
+```bash
+$ ./node_modules/.bin/eslint ./test.js
+
+/scratch/test.js
+  1:5  error  Redundant double negation  no-extra-boolean-cast
+
+✖ 1 problem (1 error, 0 warnings)
+  1 error and 0 warnings potentially fixable with the `--fix` option.
+
+$ cat ./test.js
+```
+
+注意 **`1 error and 0 warnings potentially fixable with the --fix option`** 这一行。这说明 ESLint 知道如何修复这个错误。运行 `./node_modules/.bin/eslint --fix ./test.js`，这个错误就会消失。
+
+```bash
+$ ./node_modules/.bin/eslint --fix ./test.js
+$ cat ./test.js
+
+if (typeof window === 'undefined') {
+  console.log('Hello from Node.js!');
+}
+```
+
+请注意，ESLint 删除了不必要的 `!!`。
+
+ESLint 只能自动修复某些 ESLint 规则的违规行为。ESLint 有一个完整的内置 [ESLint 规则列表](https://eslint.org/docs/rules/)，并解释了它可以自动应用修复的规则。
+
+## 使用 npm 脚本
+
+我们添加一个 `npm scripts` 来运行 ESLint 规则。
+
+例如，假设您的 `package.json` 文件包含以下行：
+
+```json
+{
+  "scripts": {
+    "lint:fix": "eslint . --fix"
+  }
+}
+```
+
+现在，您只需要在命令行运行 `npm run lint:fix`，它将修复它可修复的内容。
diff --git "a/\345\211\215\347\253\257/\344\275\277\347\224\250 Prettier \346\240\274\345\274\217\345\214\226\344\273\243\347\240\201.md" "b/\345\211\215\347\253\257/\344\275\277\347\224\250 Prettier \346\240\274\345\274\217\345\214\226\344\273\243\347\240\201.md"
new file mode 100644
index 0000000..22c5203
--- /dev/null
+++ "b/\345\211\215\347\253\257/\344\275\277\347\224\250 Prettier \346\240\274\345\274\217\345\214\226\344\273\243\347\240\201.md"	
@@ -0,0 +1,77 @@
+# 使用 Prettier 格式化代码
+
+[Prettier](https://prettier.io/) 是一个固执己见的代码格式化程序。
+
+![Prettier 的标志](https://camo.githubusercontent.com/81ead5bb324aa1fda40ca50d59979442f87c1d559bfad2018ed02c8a0b9c1f40/68747470733a2f2f756e706b672e636f6d2f70726574746965722d6c6f676f40312e302e332f696d616765732f70726574746965722d62616e6e65722d6c696768742e737667)
+
+它支持许多开箱即用的不同语法，包括：
+
+- HTML
+- CSS、SCSS 和 Less
+- JavaScript
+- Flow 和 TypeScript
+- Vue
+- JSX
+- YAML
+- JSON
+- GraphQL
+- Markdown
+
+通过[插件](https://prettier.io/docs/en/plugins.html)，您可以将其用于 Python、PHP、Swift、Ruby 和 Java 等。
+
+它与最流行的代码编辑器集成，包括 VS Code、Sublime Text、Atom 等。
+
+## 更少的选项
+
+我最近在学习了 Go，Go 最棒的地方之一是 [`gofmt`](https://pkg.go.dev/cmd/gofmt)，这是一个官方工具，可以根据通用标准自动格式化您的代码。
+
+Go 代码的 95%（由统计数据组成）看起来完全一样，因为这个工具可以很容易地执行，而且由于风格是由 Go 维护人员为您定义的，您更有可能适应该标准，而不是坚持自己的风格。例如制表符与空格，或者在何处放置左括号。
+
+这听起来像是一个限制，但它实际上非常强大。所有 Go 代码看起来都一样。
+
+Prettier 与 `gofmt` 类似。
+
+它的选项很少，而且大部分决定已经为您做出，因此您可以停止争论关于风格的任何问题，并专注于您的代码。
+
+## 与 ESLint 的区别
+
+[ESLint](https://eslint.org/) 是一个 linter，它不只是格式化，而且由于对代码的静态分析，它还突出了一些错误提示。
+
+这是一个非常棒的工具，可以与 Prettier 一起使用。
+
+ESLint 还强调了格式化问题，但由于它的可配置性更高，每个人都可以有一套不同的格式化规则。而 Prettier 为所有人提供了一个共同点。
+
+现在，您可以自定义一些内容，例如：
+
+- tab 宽度
+- 单引号与双引号
+- 行列数
+- 尾随逗号
+
+还有其他一些[选项](https://prettier.io/docs/en/options.html)，但 Prettier 试图控制这些定制的数量，以避免变得过于可定制。
+
+## 安装
+
+Prettier 可以从命令行运行，您可以使用 npm、yarn 和 pnpm 安装它。
+
+Prettier 的另一个很好的用例是在您的 Git 存储库的 PR 上运行它，例如在 GitHub 上。
+
+如果您使用受支持的编辑器，最好是直接从编辑器中使用 Prettier，每次保存时都会运行 Prettier 格式。
+
+例如，VS Code 的 [Prettier 扩展](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)。
+
+## Prettier 更适合初学者
+
+如果您认为 Prettier 仅适用于团队或专业用户，那么您就错过了该工具的一个良好价值主张。
+
+良好的风格会强化良好的习惯。
+
+格式化是一个经常被初学者忽视的话题，但拥有清晰一致的格式化是您作为一名新开发人员成功的关键。
+
+此外，即使您刚开始学习 JavaScript，从代码风格上看，您的代码也会变得更漂亮，就像一位资深大佬编写代码一样。
+
+## 最后
+
+可以看看 Anthony Fu 月初发表的[为什么我不使用 Prettier](https://zhuanlan.zhihu.com/p/572527461)。他解释了自己为什么使用 ESLint 而不使用 Prettier。
+
+如果你确定在项目中同时使用 ESLint 和 Prettier，又很出现一些奇特的行为不知道怎么解决，可以看看[彻底搞懂 ESLint 与 Prettier 在 vscode 中的代码自动格式化](https://juejin.cn/post/7156893291726782500)。
diff --git "a/\345\211\215\347\253\257/\344\275\277\347\224\250 Webpack \347\274\226\350\257\221 TypeScript.md" "b/\345\211\215\347\253\257/\344\275\277\347\224\250 Webpack \347\274\226\350\257\221 TypeScript.md"
new file mode 100644
index 0000000..d1722f1
--- /dev/null
+++ "b/\345\211\215\347\253\257/\344\275\277\347\224\250 Webpack \347\274\226\350\257\221 TypeScript.md"	
@@ -0,0 +1,67 @@
+# 使用 Webpack 编译 TypeScript
+
+本文将介绍如何使用 Webpack 编译 `.ts` 文件。
+
+## Webpack 配置
+
+Webpack 中的所有内容都从 [Webpack 配置](https://masteringjs.io/tutorials/webpack/config) 开始。`webpack.config.js` 的关键部分是 `module.rules` 选项。这是您告诉 Webpack 在打包之前使用一个特殊的编译器来编译文件的地方。对于 TypeScript，除了 [typescript 模块](https://www.npmjs.com/package/typescript)之外，您还需要 [ts-loader 模块](https://www.npmjs.com/package/ts-loader)。
+
+```bash
+npm install typescript ts-loader
+```
+
+[`module.rules` 选项](https://webpack.js.org/configuration/module/)是一组规则数组。下面的 `webpack.config.js` 告诉 Webpack 使用该 `ts-loader` 模块编译任何以 `.ts` 结尾的文件。
+
+```js
+module.exports = {
+  entry: './index.ts',
+  output: {
+    filename: 'main.js',
+    path: `${process.cwd()}/dist`
+  },
+  module: {
+    // 对任何以 .ts 结尾的文件使用 ts-loader
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  // 捆绑 .ts 文件和 .js 文件。
+  resolve: {
+    extensions: ['.ts', '.js']
+  }
+}
+```
+
+## 编译 TypeScript 文件
+
+下面是 `index.ts` 文件：
+
+```js
+const str: string = 'Hello World'
+
+console.log(str)
+```
+
+您还需要添加一个 [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 文件，否则 TypeScript 会出错。其规则根据您的项目制定：
+
+```json
+{
+  "files": ["./index.ts"]
+}
+```
+
+现在，运行 `node ./dist/main.js`，您将看到 Node 打印出 `Hello World`。
+
+```bash
+$ node ./dist/main.js
+
+# Hello World
+```
+
+## 更多资料
+
+更加详细内容请查阅 [Webpack 编译 TypeScript 的官方指南](https://webpack.js.org/guides/typescript/)。
diff --git "a/\345\211\215\347\253\257/\344\275\277\347\224\250\345\210\253\345\220\215\347\274\251\347\237\255 Webpack \344\270\255\347\232\204\345\257\274\345\205\245\350\267\257\345\276\204.md" "b/\345\211\215\347\253\257/\344\275\277\347\224\250\345\210\253\345\220\215\347\274\251\347\237\255 Webpack \344\270\255\347\232\204\345\257\274\345\205\245\350\267\257\345\276\204.md"
new file mode 100644
index 0000000..f81be49
--- /dev/null
+++ "b/\345\211\215\347\253\257/\344\275\277\347\224\250\345\210\253\345\220\215\347\274\251\347\237\255 Webpack \344\270\255\347\232\204\345\257\274\345\205\245\350\267\257\345\276\204.md"	
@@ -0,0 +1,75 @@
+# 使用别名缩短 Webpack 中的导入路径
+
+假设您正在使用 [Webpack](https://webpack.js.org/) 捆绑您的应用程序。如果您认为在导入给定文件时使用相对路径很难看，并且在更改目录结构时很难维护：
+
+```js
+import { formatDate } from '../../../root/lib/formatDate'
+```
+
+那么使用别名就是解决方案之一。
+
+别名（`alias`）是 webpack 的一种方便的方式，可以减少导入常用模块的时间和按键次数。除此之外，通过别名的方式来映射一个路径，从而减少⽂件搜索范围可以优化 webpack 的打包速度。
+
+您将需要 node.js 中包含的 `path` 模块，因为这是告诉 webpack 在哪里查找这些特定文件的方式。
+
+使用 `resolve.alias` 属性，您可以为频繁导入的模块定义别名。下面是一个例子：
+
+```js
+const path = require('path')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+module.exports = {
+  resolve: {
+    alias: {
+      Library: resolve('root/lib/'),
+      Single: resolve('root/test.js')
+    }
+  }
+}
+```
+
+因此，现在当您想要从库模块导入文件时，可以使用 `import { file } from 'Library/fileLocation`，或者如果您将文件包含在别名中，则从 `import { test } from 'Single'`。
+
+## 使用别名作为布尔值
+
+如果您已经通过 CDN 为您的应用程序加载了一个库，并且将其作为依赖项，那么这将在您的应用程序中产生冲突。因此，您可以在 `resolve.alias` 属性中列出冲突模块的路径，并将其设置为 `false` 以解决冲突。
+
+```js
+module.exports = {
+  resolve: {
+    alias: {
+      'path/to/ignored/module': false
+    }
+  }
+}
+```
+
+## 使用 `$` 进行精确匹配
+
+您可以在别名定义中添加尾随 `$`，这样可以确保如果路径不完全匹配，则强制执行错误。
+
+```js
+const path = require('path')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+module.exports = {
+  resolve: {
+    alias: {
+      Single$: resolve('root/test.js')
+    }
+  }
+}
+```
+
+所以现在当你尝试导入 **test.js** 时：
+
+```js
+import Test from 'Single' // success
+import Test2 from 'Single/test.js' // error，root/test.js 无效
+```
diff --git "a/\345\211\215\347\253\257/\345\260\206 ES \346\250\241\345\235\227\344\270\216 rollup.js \346\215\206\347\273\221\345\271\266\347\224\237\346\210\220\345\244\232\347\247\215\346\226\207\344\273\266\346\240\274\345\274\217.md" "b/\345\211\215\347\253\257/\345\260\206 ES \346\250\241\345\235\227\344\270\216 rollup.js \346\215\206\347\273\221\345\271\266\347\224\237\346\210\220\345\244\232\347\247\215\346\226\207\344\273\266\346\240\274\345\274\217.md"
new file mode 100644
index 0000000..969ed66
--- /dev/null
+++ "b/\345\211\215\347\253\257/\345\260\206 ES \346\250\241\345\235\227\344\270\216 rollup.js \346\215\206\347\273\221\345\271\266\347\224\237\346\210\220\345\244\232\347\247\215\346\226\207\344\273\266\346\240\274\345\274\217.md"	
@@ -0,0 +1,182 @@
+# 将 ES 模块与 rollup.js 捆绑并生成多种文件格式
+
+## 模块打包器
+
+Rollup.js 是一个模块打包器。它接受输入文件，并将它们组合成一种或多种格式的单个输出文件。
+
+这里起一个简单的 rollup-demo 项目，其中一个 `helpers.js` 文件，如下所示。
+
+```js
+let answer = 42
+
+let getTheAnswer = function () {
+  return answer
+}
+
+export default getTheAnswer
+```
+
+另一个 `index.js` 从 `helper.js` 中导入内容，如下所示。
+
+```js
+import getTheAnswer from './modules/helpers.js'
+
+let name = 'O.O'
+
+alert('The answer is ' + getTheAnswer())
+```
+
+我们可以使用 rollup.js 来输出一个 `main.js` 文件，该文件导入所有必需的文件和函数，并将它们限定在 IIFE 中，如下所示。
+
+```js
+;(function () {
+  'use strict'
+
+  let answer = 42
+  let getTheAnswer = function () {
+    return answer
+  }
+
+  alert('The answer is ' + getTheAnswer())
+})()
+```
+
+这避免了使用原生 ES 模块时多个 HTTP 请求导致的性能问题，还允许您在不支持 ES 模块的旧浏览器中运行脚本。
+
+让我们看看它是如何工作的。
+
+## 如何使用 rollup.js
+
+我们先在项目上安装 rollup 为开发依赖：
+
+```bash
+npm i rollup -D
+```
+
+如果你愿意，你可以完全从命令行运行 rollup.js。但是，创建一个配置文件要容易得多。
+
+在项目根目录创建一个名为 `rollup.config.js`。这是我们将告诉 rollup.js 打包哪些文件以及如何输出它们的地方。
+
+在我们的例子中，我们将入口文件指定为 `index.js` 文件，并将其输出为一个名为 `main.js` 的文件。任何在 `index.js` 中的导入也会被自动拉进来。我们希望将文件作为 `iife` 输出。
+
+```js
+export default {
+  input: 'index.js',
+  output: [
+    {
+      file: 'dist/main.js',
+      format: 'iife'
+    }
+  ]
+}
+```
+
+要运行 rollup.js，我们可以在命令行中输入 `npx rollup --config`。
+
+- `npx` 它会直接去 `node_modules/.bin` 找到命令运行。如果您在本地安装了 rollup，那么您可以忽略它。
+- `rollup` 关键字运行 rollup.js
+- `--config` 告诉它对所有选项和设置使用我们的配置文件。
+
+在较大的开发项目中，创建 npm 命令来运行常见任务很有帮助。
+
+在 `package.json` 文件中，我们添加一个 `scripts` 对象。并添加一个 `"build": "rollup --config"`：
+
+```json
+{
+  "scripts": {
+    "build": "rollup --config"
+  }
+}
+```
+
+运行 `npm run build`，将生成一个 `main.js` 文件，内容如下：
+
+```js
+;(function () {
+  'use strict'
+
+  let answer = 42
+
+  let getTheAnswer = function () {
+    return answer
+  }
+
+  alert('The answer is ' + getTheAnswer())
+})()
+```
+
+## 使用输出文件
+
+当你要使用新的 `main.js` 文件时，你可以跳过 `script` 元素上的 `type="module"` 属性。
+
+打包的文件不是一个模块。它是一个普通的老式传统脚本，使用模块打包器从 ES 模块构建而来。
+
+## 生成多种格式
+
+如何从你的包中创建多种文件格式。
+
+例如，假设您有一个 JS 库，您想要以浏览器支持的格式（IIFE 或显示模块模式）分发，以及一个带有 ES 模块导出的文件，以及另一个用于 Node.js 的文件。
+
+Rollup.js 使您可以非常轻松地编写一次代码库，并以多种格式为各种用户提供它。
+
+### `rollup.config.js` 导出文件中的数组
+
+在 `rollup.config.js` 文件中，我们导出了一个设置对象，如下所示。
+
+```js
+export default {
+  input: 'index.js',
+  output: [
+    {
+      file: 'dist/main.js',
+      format: 'iife'
+    }
+  ]
+}
+```
+
+但是 rollup.js 还允许您导出一组选项，并将遍历每个选项，并基于它生成一个文件。
+
+在 `rollup.config.js` 文件中，让我们创建一个要导出为 `formats` 的数组。在本例中，让我们创建一个 IIFE （`iife`），一个 ES 模块（`es`），将所有组件打包到一个文件中，以及一个供 Node 用户使用的 Common JS 文件（`cjs`）。
+
+```js
+let formats = ['iife', 'es', 'cjs']
+```
+
+接下来，我们将使用 `Array.map()` 方法遍历每个 `format`，为其创建一个配置，并生成一个新的配置数组。
+
+```js
+let formats = ['iife', 'es', 'cjs']
+
+export default formats.map((format) => {
+  return {
+    input: 'index.js',
+    output: {
+      file: 'dist/main.js',
+      format: format
+    }
+  }
+})
+```
+
+通过此设置，我们将创建三个不同的导出，每种格式一个。但是，因为它们都导出到 `main.js`，所以每个都会覆盖它之前的那个。
+
+### 创建唯一的文件名
+
+我们可以使用 `format` 作为 `file` 名称的一部分。
+
+我喜欢做的一件事是使用三元运算符来检查 `format` 是否为 `iife`。如果是这样，我将其作为主文件，并将 `format` 名称添加到其余文件中。
+
+```js
+export default formats.map((format) => {
+  return {
+    input: 'index.js',
+    output: {
+      file: `dist/main${format === 'iife' ? '' : `.${format}`}.js`,
+      format: format
+    }
+  }
+})
+```
+
+现在，当您运行 `npm run build` 时，您将获得三个具有三种不同输出格式的文件：`main.js`、`main.es.js` 和 `main.cjs.js`。
diff --git "a/\345\211\215\347\253\257/\345\277\275\347\225\245 ESLint \344\270\255\347\232\204\350\241\214\345\222\214\346\226\207\344\273\266.md" "b/\345\211\215\347\253\257/\345\277\275\347\225\245 ESLint \344\270\255\347\232\204\350\241\214\345\222\214\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..7b6c2e2
--- /dev/null
+++ "b/\345\211\215\347\253\257/\345\277\275\347\225\245 ESLint \344\270\255\347\232\204\350\241\214\345\222\214\346\226\207\344\273\266.md"	
@@ -0,0 +1,108 @@
+# 忽略 ESLint 中的行和文件
+
+[ESLint](https://eslint.org/) 根据预定义的规则分析代码以发现问题。然而，有时你需要打破 ESLint 规则。ESLint 支持几种机制来[忽略代码中的规则冲突](https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#ignorepatterns-in-config-files)：
+
+- 使用注释，可以禁用行或代码块的某些规则。
+- 使用 [`.eslintignore` 文件](https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file)。
+- 另外，如果您想忽略所有文件的某些语法规则，可以使用 [ESLint 配置文件](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/ESLint%20%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6.md)禁用规则。
+
+## 使用注释禁用 ESLint
+
+ESLint 允许您使用 `/* eslint */` 注释禁用单个 lint 规则。例如，许多 ESLint 规则[不允许使用 JavaScript 的 `eval()` 函数](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20Eval.md)，因为 [`eval()` 有几个安全问题](https://alligator.io/js/eval/)。但是，如果您确实确定要允许 `eval()`，可以按如下方式禁用 lint 规则：
+
+```js
+const res = eval('42') // eslint-disable-line no-eval
+```
+
+`// eslint-disable-line` 注释仅对该行禁用 `no-eval` 规则。
+
+您还可以使用 [`/* eslint-disable */`](https://eslint.org/docs/2.13.1/user-guide/configuring#disabling-rules-with-inline-comments)，禁用整个功能块的 `no-eval` 规则。
+
+```js
+function usesEval() {
+  /* eslint-disable no-eval */
+  const res = eval('42')
+  const res2 = eval('test')
+
+  return res2 + res
+}
+```
+
+如果将 `/* eslint-disable no-eval */` 放在 `.js` 文件中的任何代码之前，这将禁用整个文件的 `no-eval` 规则。
+
+您还可以通过将 `/* eslint-disable */` 置于文件顶部来禁用所有 ESLint 规则。
+
+## 使用 `.eslintignore`
+
+您可以使用注释来禁用文件的所有 ESLint 规则，但[通常不鼓励这样做](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/master/docs/rules/no-abusive-eslint-disable.md)。如果您确定要让 ESLint 忽略一个文件，通常最好将其列在项目根目录中的 `.eslintignore` 文件中。
+
+`.eslintignore` 语法类似于 [`.gitignore`](https://git-scm.com/docs/gitignore)。要忽略文件 `myfile.js`，您只需将以下行添加到 `.eslintignore`：
+
+```txt
+myfile.js
+```
+
+ESLint 支持通配文件。要忽略所有以 `.test.js` 结尾的文件，您可以将这一行行添加到 `.eslintignore` 中：
+
+```txt
+*.test.js
+```
+
+ESLint 认为 `.eslintignore` 中的路径相对于 `.eslintignore` 文件的位置。以下是忽略项目 `data` 目录中所有文件的方法。
+
+```txt
+data/*
+```
+
+您也可以在 `package.json` 中通过 `eslintIgnore` 字段配置需要忽略的文件。
+
+```json
+{
+  "eslintIgnore": ["hello.js", "world.js"]
+}
+```
+
+这通常在 ESLint 找不到根目录的 `.eslintIgnore` 文件且未指定替代文件时，才会查找 `package.json` 的 `eslintIgnore` 字段检查要忽略的文件。
+
+## ESLint 配置文件
+
+## 配置文件中的 `ignorePatterns`
+
+您可以告诉 ESLint 在配置文件中使用 `ignorePatterns` 忽略特定的文件和目录。
+
+```json
+{
+  "ignorePatterns": ["temp.js", "**/vendor/*.js"],
+  "rules": {
+    // ...
+  }
+}
+```
+
+`ignorePatterns` 模式遵循与 `.eslintignore` 相同的规则，但优先级低于 `.eslintignore`。
+
+### 全局禁用规则
+
+可以在 `.eslintrc.js` 文件单独配置全局禁用规则。
+
+```json
+{
+  "rules": {
+    "no-eval": 0
+  }
+}
+```
+
+您也可以在 `package.json` 的 `eslintConfig` 字段配置禁用规则，如下所示：
+
+```json
+{
+  "eslintConfig": {
+    "rules": {
+      "no-eval": 0
+    }
+  }
+}
+```
+
+完整的内容请查阅 [Ignoring Code](https://eslint.org/docs/latest/user-guide/configuring/ignoring-code)。
diff --git "a/\345\211\215\347\253\257/\346\236\204\345\273\272\345\267\245\345\205\267.md" "b/\345\211\215\347\253\257/\346\236\204\345\273\272\345\267\245\345\205\267.md"
new file mode 100644
index 0000000..21f2ae4
--- /dev/null
+++ "b/\345\211\215\347\253\257/\346\236\204\345\273\272\345\267\245\345\205\267.md"
@@ -0,0 +1,31 @@
+# 构建工具
+
+JavaScript 构建工具改变并塑造了我们构建在 Web 上运行的项目的方式。构建工具是任何开发工作流的一个组成部分，它们包括（但不限于）Task Runner（任务运行器）、Transpiler、模块打包器、Linter、包管理器和开发服务器。
+
+这些工具帮助开发人员高效地构建，并使开发过程变得更加简单（尽管配置它们可能会变得复杂）。
+
+流行的构建工具很多，例如：
+
+- [Vite](https://vitejs.dev/) — 是一种新型前端构建工具，能够显著提升前端开发体验。
+- [Webpack](https://webpack.js.org/) — 现代 JavaScript 应用程序的静态模块打包器。它的主要目的是捆绑 JavaScript 文件以在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源。
+- [Parcel](https://parceljs.org/) — 一个 Web 应用程序捆绑器，以其开发人员体验而著称。它利用多核处理提供了极快的性能，并且需要零配置。
+- [Rollup](https://rollupjs.org/) — 用于 JavaScript 的模块打包器，它将小段代码编译成更大更复杂的东西，例如库或应用程序。
+- [Gulp](https://gulpjs.com/) — 自动化和增强工作流程的工具包
+- [Grunt](https://gruntjs.com/) — 基于任务的 JavaScript 工程命令行构建工具。
+
+前面我们已经写过一些关于这方面的内容：
+
+- [Parcel 入门](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Parcel%20%E5%85%A5%E9%97%A8.md)
+- [Vite 入门](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Vite%20%E5%85%A5%E9%97%A8.md)
+- [Webpack 减少构建时间](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20%E5%87%8F%E5%B0%91%E6%9E%84%E5%BB%BA%E6%97%B6%E9%97%B4.md)
+- [esbuild 入门](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/esbuild%20%E5%85%A5%E9%97%A8.md)
+- [将 ES 模块与 rollup.js 捆绑并生成多种文件格式](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E5%B0%86%20ES%20%E6%A8%A1%E5%9D%97%E4%B8%8E%20rollup.js%20%E6%8D%86%E7%BB%91%E5%B9%B6%E7%94%9F%E6%88%90%E5%A4%9A%E7%A7%8D%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F.md)
+- [Tree Shaking](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Tree%20Shaking.md)
+- [Webpack DefinePlugin](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20DefinePlugin.md)
+- [Webpack Watch](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20Watch.md)
+- [使用 Webpack 编译 TypeScript](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%20Webpack%20%E7%BC%96%E8%AF%91%20TypeScript.md)
+- [Webpack externals](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/Webpack%20externals.md)
+- [使用别名缩短 Webpack 中的导入路径](https://github.com/lio-zero/blog/blob/main/%E5%89%8D%E7%AB%AF/%E4%BD%BF%E7%94%A8%E5%88%AB%E5%90%8D%E7%BC%A9%E7%9F%AD%20Webpack%20%E4%B8%AD%E7%9A%84%E5%AF%BC%E5%85%A5%E8%B7%AF%E5%BE%84.md)
+- 持续更新...
+
+后面会继续深入学习，记录一些关于这方面的内容。
diff --git "a/\345\211\215\347\253\257/\346\267\273\345\212\240 .editorconfig \346\226\207\344\273\266.md" "b/\345\211\215\347\253\257/\346\267\273\345\212\240 .editorconfig \346\226\207\344\273\266.md"
new file mode 100644
index 0000000..7f99132
--- /dev/null
+++ "b/\345\211\215\347\253\257/\346\267\273\345\212\240 .editorconfig \346\226\207\344\273\266.md"	
@@ -0,0 +1,21 @@
+# 添加 .editorconfig 文件
+
+> [EditorConfig](https://editorconfig.org/) 有助于跨各种编辑器和 IDE 为在同一项目上工作的多个开发人员维护一致的编码样式。
+
+每个项目都应当包含 `.editorconfig` 文件，它用来统一配置编辑器的换行、缩进存储格式等。
+
+```bash
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space                    # 输入的 tab 都用空格代替
+indent_size = 2                         # 一个 tab 用 2 个空格代替
+end_of_line = lf                        # 换行符使用 unix 的换行符 \n
+charset = utf-8                         # 字符编码 utf-8
+trim_trailing_whitespace = true         # 去掉每行末尾的空格
+insert_final_newline = true             # 每个文件末尾都加一个空行
+
+[*.md]
+trim_trailing_whitespace = false        # .md 文件不去掉每行末尾的空格
+```
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\344\273\205\346\211\247\350\241\214\344\270\200\346\254\241\345\207\275\346\225\260.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\344\273\205\346\211\247\350\241\214\344\270\200\346\254\241\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..ad79c01
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\344\273\205\346\211\247\350\241\214\344\270\200\346\254\241\345\207\275\346\225\260.md"
@@ -0,0 +1,35 @@
+# 仅执行一次函数
+
+仅执行一次函数的话，使用类似 Lodash 库的 [`_.once(func)`](https://lodash.com/docs/4.17.15#once) 方法是最简单的。
+
+但如果你不想使用库，想要自己实现一个简单的话，可以利用闭包：
+
+```js
+const once = (fn) => {
+  let result
+
+  return function () {
+    if (fn) {
+      result = fn.apply(this, arguments)
+      fn = null
+    }
+
+    return result
+  }
+}
+
+let n = 0
+const initialize = once(() => ++n)
+
+initialize() // n = 1
+initialize() // n = 1
+initialize() // n = 1
+```
+
+当你将函数作为参数传递给此 `once` 方法（作为参数 `fn`）时，它将返回一个只能调用一次的函数。
+
+简而言之，它通过创建一个 `result` 变量并将调用函数的结果与其提供的参数赋值给该变量来完成这一功能，但这只是在函数第一次运行时。在后续调用函数时，它将永远不会执行 `if` 语句（因为 `fn` 变量在第一次调用时设置为 `null`），并且将返回 `result` 变量引用的值（在第一次调用期间设置并通过闭包访问）。
+
+## 更多资料
+
+[JavaScript 专题之惰性函数](https://github.com/mqyqingfeng/Blog/issues/44)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JS \345\216\237\347\224\237\346\225\260\347\273\204\346\226\271\346\263\225.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JS \345\216\237\347\224\237\346\225\260\347\273\204\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..3990825
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JS \345\216\237\347\224\237\346\225\260\347\273\204\346\226\271\346\263\225.md"	
@@ -0,0 +1,252 @@
+# 实现 JS 原生数组方法
+
+理解数组方法的内部实现，有助于帮助我们更好的使用它们。这些数组方法都可以使用 [core-js](https://github.com/zloirock/core-js#ecmascript-array) 标准库提供的 polyfill 解决。
+
+如果你还不熟悉数组方法的话，可以阅读我写的另一篇 [JavaScript 数组方法总结](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93.md)。
+
+以下只实现了一部分的数组方法，用最简单的方式实现它们。
+
+我们用一个数组的测试下面的方法：
+
+```js
+const arr = [1, 2, 3, 4, 5]
+```
+
+你可以选择以下方式将它们添加到原型：
+
+```js
+Array.prototype.methods = function (callback) {}
+
+// 使用 Object.defineProperty 在数组构造函数的原型 Array.prototype 内创建一个新属性
+Object.defineProperty(Array.prototype, 'methods', {
+  value: methods
+})
+```
+
+> **注意**：以下实现仅提供参考，不要在你的生产代码中遵循以下方法。这可能会损坏现有代码。
+
+## push
+
+```js
+Array.prototype.myPush = function (...args) {
+  const length = args.length
+  let len = this.length
+  for (var i = 0; i < length; i++) {
+    this[len] = args[i]
+    len++
+  }
+  return len
+}
+
+arr.myPush(1)
+arr.myPush(1, 2)
+```
+
+## join
+
+```js
+Array.prototype.myJoin = function (split = ',') {
+  let str = ''
+  for (let i = 0; i < this.length; i++) {
+    str = i === 0 ? `${str}${this[i]}` : `${str}${split}${this[i]}`
+  }
+  return str
+}
+
+arr.myJoin() // '1,2,3,4,5'
+arr.myJoin('-') // '1-2-3-4-5'
+```
+
+## fill
+
+```js
+Array.prototype.myFill = function (value, start = 0, end) {
+  end = end || this.length
+  for (let i = start; i < end; i++) {
+    this[i] = value
+  }
+  return this
+}
+
+arr.myFill('O.O', 0, 1) // ['O.O', 'O.O', 3, 4, 5]
+```
+
+## includes
+
+`includes` 可以查找到 `NaN`。
+
+```js
+Array.prototype.myIncludes = function (searchElement, fromIndex = 0) {
+  if (fromIndex < 0) fromIndex = this.length + fromIndex
+  for (let i = fromIndex; i < this.length; i++) {
+    if (Object.is(this[i], searchElement)) return true
+  }
+  return false
+}
+
+arr.myIncludes(2) // true
+arr.myIncludes(1, 1) // false
+;[1, 2, 3, 4, 5, NaN].myIncludes(NaN) // true
+```
+
+## find
+
+`find` 返回值。
+
+```js
+Array.prototype.myFindIndex = function (callback) {
+  for (let i = 0; i < this.length; i++) {
+    if (callback(this[i], i, this)) return this[i]
+  }
+
+  return undefined
+}
+
+arr.myFindIndex((item) => item === 2) // 2
+arr.myFindIndex((item) => item === 6) // undefined
+```
+
+## findIndex
+
+`findIndex` 返回索引。
+
+```js
+Array.prototype.myFindIndex = function (callback) {
+  for (let i = 0; i < this.length; i++) {
+    if (callback(this[i], i, this)) return i
+  }
+
+  return -1
+}
+
+arr.myFindIndex((item) => item === 2) // 3
+arr.myFindIndex((item) => item === 6) // -1
+```
+
+MDN 更为完整的 [`findIndex` Polyfill](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#polyfill)。
+
+## flat
+
+这里直接全部展平，没有做根据参数进行判断展平层数。
+
+```js
+Array.prototype.myFlat = function () {
+  let arr = this
+  while (arr.some((item) => Array.isArray(item))) {
+    arr = [].concat(...arr)
+  }
+  return arr
+}
+;[1, [2, [4, 5]], [6, 7]].myFlat() // [1, 2, 3, 4, 5, 8, 9]
+```
+
+## map
+
+```js
+Array.prototype.myMap = function (callback) {
+  const ret = []
+  for (let i = 0; i < this.length; i++) {
+    ret.push(callback(this[i], i, this))
+  }
+
+  return ret
+}
+
+arr.myMap((item) => item + 1) // [2, 3, 4, 5, 6]
+```
+
+## some
+
+```js
+Array.prototype.mySome = function (func) {
+  let ret = false
+  for (let i = 0; i < this.length; i++) {
+    if (func(this[i], i, this)) {
+      ret = true
+      break
+    }
+  }
+
+  return ret
+}
+
+arr.mySome((item) => item >= 2) // true
+arr.mySome((item) => item >= 6) // false
+```
+
+## every
+
+```js
+Array.prototype.myEvery = function (callback) {
+  let ret = true
+  for (let i = 0; i < this.length; i++) {
+    if (!callback(this[i], i, this)) {
+      ret = false
+      break
+    }
+  }
+
+  return ret
+}
+
+arr.mySome((item) => item >= 2) // true
+arr.mySome((item) => item >= 6) // false
+```
+
+## forEach
+
+```js
+Array.prototype.myForEach = function (callback) {
+  for (var i = 0; i < this.length; i++) {
+    callback(this[i], i, this)
+  }
+}
+
+arr.myForEach(console.log)
+// 1 0 [1, 2, 3, 4, 5]
+// 2 1 [1, 2, 3, 4, 5]
+// 3 2 [1, 2, 3, 4, 5]
+// 4 3 [1, 2, 3, 4, 5]
+// 5 4 [1, 2, 3, 4, 5]
+```
+
+## filter
+
+```js
+Array.prototype.myFilter = function (callback) {
+  const ret = []
+  for (let i = 0; i < this.length; i++) {
+    if (callback(this[i], i, this)) {
+      ret.push(this[i])
+    }
+  }
+
+  return ret
+}
+
+arr.myFilter((item) => item % 2 === 0) // [2, 4]
+```
+
+## reduce
+
+考虑是否有初始值。
+
+```js
+Array.prototype.myReduce = function (callback, initialValue) {
+  let total = initialValue || this[0]
+  let start = initialValue ? 0 : 1
+  for (let i = start; i < this.length; i++) {
+    total = callback(total, this[i], i, this)
+  }
+  return total
+}
+
+arr.myReduce((accumulator, elem) => (accumulator += elem)) // 15
+arr.myReduce((accumulator, elem) => (accumulator += elem), 100) // 115
+```
+
+## splice
+
+`splice` 实现是最复杂的，你可以查看[如何模拟实现 Array.prototype.splice](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/384) 或[字节：模拟实现 Array.prototype.splice](https://github.com/sisterAn/JavaScript-Algorithms/issues/138) 了解实现过程。
+
+其他数组方法实现较为简单，基本一眼就能看懂，也就没有进行过多解释。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JSON.parse.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JSON.parse.md"
new file mode 100644
index 0000000..1329454
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JSON.parse.md"	
@@ -0,0 +1,18 @@
+# 实现 JSON.parse
+
+之前在 [JavaScript Eval](https://github.com/lio-zero/blog/blob/main/JavaScript/JavaScript%20Eval.md) 中有提到过，在没有 `JSON.parse` 方法之前，我们使用 eval 来对 JSON 字符串进行反序列化。
+
+偶然间发现了一篇 [JSON.parse 三种实现方式](https://github.com/youngwind/blog/issues/115)，其中讨论了几种实现 `JSON.parse` 的方法。
+
+其中讨论区提到了一种使用 `new Function` 实现的方法，如下：
+
+```js
+const json = '{"name":"O.O", "age":18}'
+const obj = new Function('return ' + json)() // {name: 'O.O', age: 18}
+```
+
+这种实现方式很简便，但需要注意的是，如果网站开启了 CSP（内容安全策略），将会报错：
+
+> Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src github.githubassets.com".
+
+另外，你也可以阅读 [@ascoders](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/205.%E7%B2%BE%E8%AF%BB%E3%80%8AJS%20with%20%E8%AF%AD%E6%B3%95%E3%80%8B.md) 的 [精读《手写 JSON Parser》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/139.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20JSON%20Parser%E3%80%8B.md)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JSONP.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JSONP.md"
new file mode 100644
index 0000000..280a038
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 JSONP.md"	
@@ -0,0 +1,63 @@
+# 实现 JSONP
+
+现在，我们基本不会使用 JSONP 进行跨域了，因为有更好解决跨域的办法（如 CORS），但我们还是有必要了解 JSONP 的原理，以及它是如何实现的（毕竟面试很可能会问到）。
+
+JSONP 的原理是利用 `script` 标签不受[浏览器同源策略](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5.md)的约束，可以用来进行跨域请求。
+
+优点也显而易见，`script` 标签各个浏览器都兼容，但也有局限，只能用于 GET 请求。
+
+## 实现
+
+```js
+const jsonp = ({ url, params, callbackName }) => {
+  const generateUrl = () => {
+    let dataSrc = ''
+    for (let key in params) {
+      dataSrc += `${key}=${params[key]}&`
+    }
+    dataSrc += `callback=${callbackName}`
+    return `${url}?${dataSrc}`
+  }
+
+  const removeElement = (el) => el.parentNode.removeChild(el)
+
+  return new Promise((resolve, reject) => {
+    const scriptEle = document.createElement('script')
+    scriptEle.src = generateUrl()
+    document.body.appendChild(scriptEle)
+    window[callbackName] = (data) => {
+      resolve(data)
+      removeElement(scriptEle)
+    }
+  })
+}
+```
+
+JSONP 需要与后端配合，这里我们使用 Node 的 Express 框架起一个简单的服务器：
+
+```js
+const app = require('express')()
+
+app.get('/', (req, res) => {
+  const { callback } = req.query
+  const data = { name: 'lio' }
+  res.send(`${callback}(${JSON.stringify(data)})`)
+})
+
+app.listen(3309)
+```
+
+示例：
+
+```js
+const result = jsonp({
+  url: 'http://localhost:3309',
+  params: {
+    name: 'O.O',
+    age: 18
+  },
+  callbackName: '_JSONP_CB_'
+})
+
+result.then(console.log) // {name: 'lio'}
+```
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Object.assign.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Object.assign.md"
new file mode 100644
index 0000000..951e609
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Object.assign.md"	
@@ -0,0 +1,44 @@
+# 实现 Object.assign
+
+> **`Object.assign()`** 方法将所有可枚举（`Object.propertyIsEnumerable()` 返回 `true`）和自有（`Object.hasOwnProperty()` 返回 `true`）属性从一个或多个源对象复制到目标对象，返回修改后的对象。
+
+- 目标对象不能是 `null` 或 `undefined`，否则将抛出错误
+- 源对象可以有多个，使用剩余运算符收集，通过循环判断每个对象的是否为自身属性，添加到目标对象。如果有重名属性，靠前的属性将被覆盖
+- `Object.assign` 返回对象等于目标对象
+
+```js
+Object.myAssign = function (target, ...source) {
+  if (target === null || target === undefined) {
+    throw new TypeError('Cannot convert undefined or null to object')
+  }
+
+  target = Object(target)
+
+  for (let obj of source) {
+    if (obj != null) {
+      for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          target[key] = obj[key]
+        }
+      }
+    }
+  }
+
+  return target
+}
+```
+
+示例：
+
+```js
+const user = { name: 'O.O' }
+
+// 可枚举、自身数据
+user.propertyIsEnumerable('name') // true
+user.hasOwnProperty('name') // true
+
+const result = Object.assign(user, { age: 20, hobby: ['eat', 'sleep'] })
+
+console.log(result) // {name: 'O.O', age: 20, hobby: ['eat', 'sleep']}
+console.log(user === result) // true
+```
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Object.create.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Object.create.md"
new file mode 100644
index 0000000..2e8ee9f
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Object.create.md"	
@@ -0,0 +1,58 @@
+# 实现 Object.create
+
+> [`Object.create()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create) 方法创建一个新对象，使用现有的对象来提供新创建的对象的 `__proto__`。
+
+**用法**：
+
+```js
+const user = {
+  name: 'O.O',
+  sayHi() {
+    console.log(this.name, this.age)
+  }
+}
+
+const me = Object.create(user)
+
+me.name = 'D.O' // 继承的属性可以被覆盖
+me.age = 18 // age 是设置在 me 上的属性，而不是设置在 user 上的属性
+
+me.sayHi() // D.O 18
+```
+
+**实现思路**：定义一个空的构造函数，然后将传入的对象作为原型指向构造函数的原型对象，通过 `new` 运算符创建一个空对象。
+
+```js
+function create(obj) {
+  function F() {}
+  F.prototype = obj
+  return new F()
+}
+
+// 同样运行执行效果。
+const me = create(user)
+me.name = 'D.O'
+me.age = 18
+
+me.sayHi() // D.O 18
+```
+
+**注意**：`Object.create` 只能进行浅拷贝操作
+
+```js
+const user = {
+  name: 'IU',
+  age: 18,
+  friend: {
+    name: 'Lay',
+    age: 20
+  }
+}
+
+const me = Object.create(user)
+
+me.friend.name = 'D.O'
+
+console.log(me.friend.name) // "D.O"
+console.log(user.friend.name) // "D.O"
+```
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Promise A+.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Promise A+.md"
new file mode 100644
index 0000000..df71999
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 Promise A+.md"	
@@ -0,0 +1,659 @@
+# 实现 Promise/A+
+
+本文的目标是编写一个与 [`then/promise`](https://github.com/then/promise/blob/master/src/core.js) 类似的符合 Promise/A+ 的实现。
+
+以下前半部分译自 [Implementing promises from scratch](https://www.mauriciopoppe.com/notes/computer-science/computation/promises/)，也是本文的重点。你可以查看原文，它还使用 TDD 方式，编写一些测试用例，帮助你理解。下半部分是 Promise 各个方法的实现。
+
+## Promise 状态
+
+Promise 是必须处于以下状态之一的对象/函数：`PENDING`、`FULFILLED` 和 `REJECTED`，最初 promise 处于 `PENDING` 状态。
+
+Promise 可以从 `PENDING` 状态转换为带 `value` 值的 `FULFILLED` 状态或带 `reason` 的 `REJECTED` 状态。
+
+为了进行状态转换，promise 构造函数接收到一个名为 `executor` 的函数，`executor` 会立即被调用，调用时使用两个函数 `fulfill` 和 `reject` 来执行状态转换：
+
+- `fulfill(value)` — 从 `PENDING` 状态转化到 `FULFILLED` 带有 `value`，`value` 现在是 promise 的一个属性。
+- `reject(reason)` — 从 `PENDING` 状态转化到 `REJECTED` 带有 `reason`，`reason` 现在是 promise 的一个属性。
+
+最初的实现很简单：
+
+```js
+// 可能的状态
+const PENDING = 'PENDING'
+const FULFILLED = 'FULFILLED'
+const REJECTED = 'REJECTED'
+
+class APromise {
+  constructor(executor) {
+    // 初始化状态
+    this.state = PENDING
+    // 成功的 value 或拒绝的 reason 在内部映射为 value，最初 promise 没有 value
+
+    // 调用立即执行程序
+    doResolve(this, executor)
+  }
+}
+
+// 带 value 的 fulfill
+function fulfill(promise, value) {
+  promise.state = FULFILLED
+  promise.value = value
+}
+
+// 带 reason 的 reject
+function reject(promise, reason) {
+  promise.state = REJECTED
+  promise.value = reason
+}
+
+// 创建作为 executor 参数的 fulfill/reject  函数
+function doResolve(promise, executor) {
+  function wrapFulfill(value) {
+    fulfill(promise, value)
+  }
+
+  function wrapReject(reason) {
+    reject(promise, reason)
+  }
+
+  executor(wrapFulfill, wrapReject)
+}
+```
+
+## 观察状态变化
+
+为了观察 promise 状态的变化（以及成功的值或拒绝的原因），我们使用 `then` 方法，该方法接收两个参数，一个 `onFulfilled` 函数和一个 `onRejected` 函数，调用这些函数的规则如下:
+
+- 当 promise 处于 `FULFILLED` 状态时，`onFulfilled` 函数将被调用，并带有 promise 履行的 `value`，例如 `onFulfilled(value)`
+- 当 promise 处于 `REJECTED` 状态时，`onRejected` 函数将被调用，并带有 promise 被拒绝的 `reason`，例如 `onRejected(reason)`
+
+我们将这些函数称为 promise `handlers`（译为**处理程序**，以下关于 handler 将不翻译）。
+
+让我们将 `then` 函数添加到类原型中，注意它会根据 Promise 的状态调用 `onFulfilled` 或 `onRejected` 函数。
+
+```js
+class APromise {
+  // ...
+  then(onFulfilled, onRejected) {
+    handleResolved(this, onFulfilled, onRejected)
+  }
+  // ...
+}
+
+function handleResolved(promise, onFulfilled, onRejected) {
+  const cb = promise.state === FULFILLED ? onFulfilled : onRejected
+  cb(promise.value)
+}
+```
+
+## 单向转换
+
+一旦转换到其中一个 `FULFILLED` 或 `REJECTED` 状态，promise 不得转换到任何其他状态。
+
+在我们当前的实现中，调用 `executor` 的函数应该确保只调用一次 `fulfill` 或 `reject`，后续调用应该被忽略
+
+```js
+function doResolve(promise, executor) {
+  let called = false
+
+  function wrapFulfill(value) {
+    if (called) return
+    called = true
+    fulfill(promise, value)
+  }
+
+  function wrapReject(reason) {
+    if (called) return
+    called = true
+    reject(promise, reason)
+  }
+
+  executor(wrapFulfill, wrapReject)
+}
+```
+
+## 处理 executor 错误
+
+如果执行 `executor` 失败，promise 应转换到 `REJECTED` 状态，并说明失败原因
+
+```js
+function doResolve(promise, executor) {
+  // ...
+  try {
+    executor(wrapFulfill, wrapReject)
+  } catch (err) {
+    wrapReject(err)
+  }
+}
+```
+
+## 异步 executor
+
+如果解析器的 `fulfill/reject` 是异步执行，则我们的 `.then` 方法将失败，因为它的 handlers 将立即执行。
+
+让我们向 Promise 添加一个队列，它的目的是存储一旦 Promise 状态从 `PENDING` 更改为其他状态时将调用的 handlers，同时我们的 `.then` 方法应该检查 Promise 状态，以决定是立即调用 handler 还是存储 handler，让我们将此逻辑移动到新的辅助函数 `handle`。
+
+```js
+class APromise {
+  constructor(executor) {
+    this.state = PENDING
+    // 存储 .then handler 队列
+    this.queue = []
+    doResolve(this, executor)
+  }
+
+  then(onFulfilled, onRejected) {
+    handle(this, { onFulfilled, onRejected })
+  }
+}
+
+// 检查 promise 的状态：
+// - 如果 promise 为 PENDING，将其推入 queue 以供以后使用
+// - 如果 promise 还不是 PENDING，则调用 handler
+function handle(promise, handler) {
+  if (promise.state === PENDING) {
+    // 如果为 PENDING，推入 queue
+    promise.queue.push(handler)
+  } else {
+    // 立即执行
+    handleResolved(promise, handler)
+  }
+}
+
+function handleResolved(promise, handler) {
+  const cb =
+    promise.state === FULFILLED ? handler.onFulfilled : handler.onRejected
+  cb(promise.value)
+}
+```
+
+此外，应该更新 `fulfill` 和 `reject` 方法，以便在调用时调用 Promise 中存储的所有 handlers，这将在更新状态和值后调用的新函数 `finale` 中实现。
+
+```js
+function fulfill(promise, value)
+  // ...
+  finale(promise)
+}
+
+function reject(promise, reason) {
+  // ...
+  finale(promise)
+}
+
+// 调用 promise 中存储的所有 handlers
+function finale(promise) {
+  const length = promise.queue.length
+  for (let i = 0; i < length; i += 1) {
+    handle(promise, promise.queue[i])
+  }
+}
+```
+
+## 链式的 Promise
+
+我们的 `.then` 方法应该返回一个新的 Promise。
+
+实现也很简单，但是我们将看到新的 Promise 以不同于使用 `executor` 的方式转换到不同的状态，新的 Promise 使用 handlers 进行转换，如下所示：
+
+- 如果 `onFulfilled` 或 `onRejected` 函数被调用
+  - 如果执行时没有错误，Promise 将转换为 `FULFILLED` 状态，返回值作为 `value`
+  - 如果执行时出现错误，Promise 将转换到 `REJECTED` 状态，并将错误作为 `reason`
+
+让我们做一个 `.then` 方法首先返回 Promise：
+
+```js
+class APromise {
+  // ...
+  then(onFulfilled, onRejected) {
+    // 空的 executor
+    const promise = new APromise(() => {})
+    handle(this, { onFulfilled, onRejected })
+    return promise
+  }
+}
+```
+
+对于实现，我们首先必须将新的 Promise 也存储在 handler 队列中，这样，如果观察到的 Promise 被解析，那么队列中的元素就知道需要解析哪个 Promise。
+
+```js
+class APromise {
+  // ...
+  then(onFulfilled, onRejected) {
+    const promise = new APromise(() => {})
+    // 同时保存 promise
+    handle(this, { promise, onFulfilled, onRejected })
+    return promise
+  }
+}
+
+function handleResolved(promise, handler) {
+  const cb =
+    promise.state === FULFILLED ? handler.onFulfilled : handler.onRejected
+  // 执行 handler 并根据规则进行转换
+  try {
+    const value = cb(promise.value)
+    fulfill(handler.promise, value)
+  } catch (err) {
+    reject(handler.promise, err)
+  }
+}
+```
+
+## 异步 handlers
+
+接下来，让我们考虑 handler 返回 Promise 的情况，在这种情况下，作为 handler 一部分的 Promise（不是返回的 Promise）应该采用返回 Promise 的状态履行值或拒绝原因。
+
+让我们设想以下场景：
+
+```js
+const executor = fulfill => setTimeout(fulfill, 0, 'p')
+const p = new APromise(executor)
+
+const qOnFulfilled = value =>
+  new APromise(fulfill => fulfill(value + 'q'))
+const q = p.then(qOnFulfilled)
+
+const rOnFulfilled = value => (
+  // 值应为 pq
+)
+const r = q.then(rOnFulfilled)
+```
+
+在我们当前的实现中，元组 `{ q, qOnFulfilled }` 存储在 `p` 的 handlers 中，并且我们确信在 `q` 存储元组 `{ r, rOnFulfilled }` 之前，`qOnFulfilled` 被调用，我们可以利用这一事实，并检测 handler 何时返回一个 Promise，在返回的 Promise 中存储观察者，例如在 `qOnFulfilled` 返回的 Promise 上存储 `{ r, onFulfilled }`。
+
+请注意，我们使用的是 `while`，因为嵌套的 Promise 本身可能有另一个 Promise 作为解析值。
+
+```js
+function handle(promise, handler) {
+  // 取最深处的 promise 的状态
+  while (promise.value instanceof APromise) {
+    promise = promise.value
+  }
+
+  // ...
+}
+```
+
+## 其他情况
+
+### 无效的 handlers
+
+如果原本应该是函数的 handler 不是函数，那么我们的实现就会失败：
+
+```js
+const p = new APromise((fulfill) => fulfill('p'))
+const qOnFulfilled = null
+const q = p.then(qOnFulfilled)
+```
+
+在这种情况下，`q` 应该立即用 `p` 的值进行解析
+
+```js
+function handleResolved(promise, handler) {
+  const cb =
+    promise.state === FULFILLED ? handler.onFulfilled : handler.onRejected
+  // 如果 handler 不是函数，则立即解析
+  if (typeof cb !== 'function') {
+    if (promise.state === FULFILLED) {
+      fulfill(handler.promise, promise.value)
+    } else {
+      reject(handler.promise, promise.value)
+    }
+    return
+  }
+  // ...
+}
+```
+
+### 在事件循环之后执行 handlers
+
+要求 [2.2.4](https://promisesaplus.com/#point-34)，正如 [3.1](https://promisesaplus.com/#point-67) 中指出的，handlers 被一个新的堆栈调用，此外，即使 `executor/handlers` 是同步的，也可以确保将来调用观察者，从而使 Promise 解析保持一致。
+
+我们可以使用任何允许我们在事件循环之后调用函数的函数，这包括 `setTimeout`、`setImmediate` 和 `requestAnimationFrame`
+
+```js
+function handleResolved(promise, handler) {
+  setImmediate(() => {
+    // ...
+  })
+}
+```
+
+### 以已解决的 Promise 为理由拒绝
+
+要求 [2.2.7.2](https://promisesaplus.com/#point-42)，只有当 promise 不处于 `REJECTED` 状态时才采用嵌套 promise 的状态。
+
+```js
+function handle(promise, handler) {
+  // 以返回的 promise 的状态为例
+  while (promise.state !== REJECTED && promise.value instanceof APromise) {}
+  // ...
+}
+```
+
+### Promise 本身无法解决
+
+要求 [2.3.1](https://promisesaplus.com/#point-48)，在 `fulfill` 方法上，让我们检查履行值是否等于 Promise 本身，如果是这样，则抛出一个 `TypeError`：
+
+```js
+function fulfill(promise, value) {
+  if (value === promise) {
+    return reject(
+      promise,
+      new TypeError('A promise cannot be resolved with itself.')
+    )
+  }
+
+  // ...
+}
+```
+
+### Thenable
+
+根据 [2.3.3.3](https://promisesaplus.com/#point-56) 相关要求，handler 的返回值可能是一个 `thenable`，一个 object/function，它具有一个可访问的 `then` 属性，这是一个函数，`then` 函数就像一个 executor，它接收一个 `fulfill` 和 `reject` 回调，应该用来转换 thenable 的状态。
+
+让我们修改 `fulfill` 方法并添加对 thenable 的检查，注意访问属性并不总是安全的操作（例如，属性可能使用 [`getter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)），这就是为什么我们应该将它包装在 `try/catch` 中。
+
+另外，thenable 的 `then` 应该被调用为 `this`
+
+```js
+function fulfill(promise, value) {
+  if (value === promise) {
+    return reject(
+      promise,
+      new TypeError('A promise cannot be resolved with itself.')
+    )
+  }
+
+  if (value && (typeof value === 'object' || typeof value === 'function')) {
+    let then
+    try {
+      then = value.then
+    } catch (err) {
+      return reject(promise, err)
+    }
+
+    // promise
+    if (then === promise.then && promise instanceof APromise) {
+      promise.state = FULFILLED
+      promise.value = value
+      return finale(promise)
+    }
+
+    // thenable
+    if (typeof then === 'function') {
+      return doResolve(promise, then.bind(value))
+    }
+  }
+
+  // primitive
+  promise.state = FULFILLED
+  promise.value = value
+  finale(promise)
+}
+```
+
+## 实现 Promise.prototype.catch()
+
+[`Promise.prototype.catch`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 用于处理拒绝的情况，是特殊的 `.then` 方法，调用 `catch` 之后，可以继续使用 `.then`。
+
+```js
+class APromise {
+  // ...
+  catch(onRejected) {
+    return this.then(null, onRejected)
+  }
+}
+```
+
+## 实现 Promise.prototype.finally()
+
+> [`Promise.prototype.finally()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) 返回一个 `Promise`。在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。
+
+将返回 promise 的结果在 `then` 一次，无论返回的是 fulfilled 还是 rejected，都执行给定的回调函数。
+
+```js
+class APromise {
+  finally(onFinally) {
+    return this.then(
+      /* onFulfilled */
+      (res) => Promise.resolve(onFinally().call(this)).then(() => res),
+      /* onRejected */
+      (err) =>
+        Promise.resolve(onFinally().call(this)).then(() => {
+          throw err
+        })
+    )
+  }
+}
+```
+
+示例：
+
+```js
+new APromise((resolve, reject) => {
+  resolve('ok')
+})
+  .then((res) => {
+    console.log(res) // ok
+  })
+  .finally(() => {
+    console.log('finally') // finally
+  })
+```
+
+## 实现 Promise.resolve()
+
+内部返回一个 promise，调用 `resolve` 方法，将 `value` 参数传入
+
+```js
+class APromise {
+  // ...
+  static resolve(value) {
+    return new APromise((resolve) => resolve(value))
+  }
+}
+```
+
+## 实现 Promise.reject()
+
+内部返回了一个 promise，调用 `reject` 方法，将 `reason` 参数传入
+
+```js
+class APromise {
+  // ...
+  static reject(reason) {
+    return A((resolve, reject) => reject(reason))
+  }
+}
+```
+
+## 实现 Promise.race()
+
+`Promise.race` 与 `Promise.all` 类似，但只等待第一个 settled 的 promise 并取得其 `value/reason`，第一个 settled promise 之后，所有其他的 `value/reason` 都会被忽略。
+
+如果传的参数数组是空，则返回的 promise 将永远等待。
+
+```js
+class APromise {
+  // ...
+  static race(promises) {
+    const _Promise = this
+    if (!Array.isArray(promises)) {
+      return _Promise.reject(new TypeError('race() only accepts an array'))
+    }
+    return new _Promise((resolve, reject) => {
+      promises.forEach((p) => {
+        _Promise.resolve(p).then(resolve, reject)
+      })
+    })
+  }
+}
+```
+
+示例：
+
+```js
+const sleep = (sm) =>
+  new APromise((resolve) => setTimeout(() => resolve(sm), sm))
+const err = (ms) => sleep(ms).then(() => APromise.reject(ms))
+
+APromise.race([1, 2, 3]).then(console.log) // 1
+APromise.race([sleep(300), sleep(100), sleep(200)]).then(console.log) // 100
+APromise.race([sleep(3000), err(100), sleep(2000)]).catch(console.error) // Error: 100
+APromise.race([err(50), err(60)]).catch(console.error) // 50
+```
+
+## 实现 Promise.all()
+
+- 如果传入的可迭代对象为空，那么此 promise 对象回调完成，直接 `resolve`
+- 如果传入的可迭代对象内的 promise 全部成功，那么就返回 `resolve` 成功的数组
+- 一旦有一个 promise 执行失败，`Promise.all` 直接返回错误的那个 `reject`
+
+```js
+class APromise {
+  // ...
+  static all(promises) {
+    let remaining = promises.length
+    // 判断是否为空
+    if (remaining === 0) return APromise.resolve([])
+
+    return new APromise((resolve, reject) => {
+      promises.reduce((acc, promise, i) => {
+        APromise.resolve(promise).then(
+          (res) => {
+            acc[i] = res
+            --remaining || resolve(acc)
+          },
+          (err) => {
+            reject(err)
+          }
+        )
+        return acc
+      }, [])
+    })
+  }
+}
+```
+
+测试：
+
+```js
+const sleep = (sm) =>
+  new APromise((resolve) => setTimeout(() => resolve(sm), sm))
+const err = (ms) => sleep(ms).then(() => APromise.reject(ms))
+
+APromise.all([1, 2, 3]).then(console.log) // [1, 2, 3]
+APromise.all([sleep(300), sleep(100), sleep(200)]).then(console.log)
+APromise.all([sleep(3000), err(100), sleep(2000)]).catch(console.error) // 100
+APromise.all([err(50), err(60)]).catch(console.error) // 50
+```
+
+## 实现 promise.any()
+
+> [`Promise.any()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/any) 接收一个 `Promise` 可迭代对象，只要其中的一个 `promise` 成功，就返回那个已经成功的 `promise`。如果可迭代对象中没有一个 `promise` 成功（即所有的 `promises` 都失败/拒绝），就返回一个失败的 `promise` 和 `AggregateError` 类型的实例。
+
+`Promise.any` 的行为跟 `Promise.all` 刚好相反：
+
+- 只要有一个成功，那么就立即 `resolve` 出去
+- 如果全部失败，那么就将所有 `reject` 结果收集起来并返回 `AggregateError`
+
+```js
+class APromise {
+  // ...
+  static any(promises) {
+    return A((resolve, reject) => {
+      if (promises.length === 0)
+        return reject(new AggregateError('All promises were rejected'))
+      promises.reduce((acc, cur) => {
+        Promise.resolve(cur).then(
+          (data) => {
+            resolve(data)
+          },
+          (err) => {
+            acc.push(err)
+            if (acc.length === promises.length)
+              reject(new AggregateError('All promises were rejected'))
+          }
+        )
+        return acc
+      }, [])
+    })
+  }
+}
+```
+
+示例：
+
+```js
+const sleep = (sm) =>
+  new APromise((resolve) => setTimeout(() => resolve(sm), sm))
+const err = (ms) => sleep(ms).then(() => APromise.reject(ms))
+
+APromise.any([1, 2, 3]).then((o) => console.log(o)) // 1
+APromise.any([sleep(3000), err(100), sleep(2000)]).then(console.info) // 2000
+APromise.any([err(50), err(60)]).catch(console.log) // AggregateError
+```
+
+## 实现 Promise.allSettled()
+
+> [`Promise.allSettled()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。
+
+```js
+class APromise {
+  // ...
+  static allSettled(values) {
+    let promises = [].slice.call(values)
+
+    return new APromise((resolve, reject) => {
+      let result = [],
+        count = 0
+
+      promises.forEach((promise) => {
+        APromise.resolve(promise)
+          .then((value) => {
+            result.push({ status: 'fulfilled', value })
+          })
+          .catch((err) => {
+            result.push({ status: 'rejected', value: err })
+          })
+          .finally(() => {
+            if (++count === promises.length) {
+              resolve(result)
+            }
+          })
+      })
+    })
+  }
+}
+```
+
+示例：
+
+```js
+const sleep = (sm) =>
+  new APromise((resolve) => setTimeout(() => resolve(sm), sm))
+const err = (ms) => sleep(ms).then(() => APromise.reject(ms))
+
+APromise.allSettled([1, 2, 3]).then(console.log)
+APromise.allSettled([sleep(300), sleep(100), sleep(200)]).then(console.log)
+APromise.allSettled([sleep(3000), err(100), sleep(2000)]).catch(console.error)
+APromise.allSettled([err(50), err(60)]).then(console.log)
+```
+
+## 更多资料
+
+以上 Promise/A+ [完整示例](https://github.com/lio-zero/web-demos/blob/main/promise/es6-promise.js)。
+
+- [JavaScript Promise 迷你书（中文版）](http://liubin.org/promises-book/)
+- [Promises/A+](https://promisesaplus.com/)
+- [Promises/A 与 Promises/A+ 的区别](https://promisesaplus.com/differences-from-promises-a)
+- [Conformant Implementations](https://promisesaplus.com/implementations)
+- [通过从头开始构建 Promise 来学习 JavaScript Promise](https://levelup.gitconnected.com/understand-javascript-promises-by-building-a-promise-from-scratch-84c0fd855720)
+- [implementing](https://www.promisejs.org/implementing/)
+- [Optimization killers](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers)
+- [es6-promise](https://github.com/stefanpenner/es6-promise)
+- [性能提升优化技巧](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers)
+- [关于异步堆栈跟踪](https://github.com/kriskowal/q#long-stack-traces)
+
+<!-- https://zhuanlan.zhihu.com/p/183801144 -->
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 async\343\200\201await.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 async\343\200\201await.md"
new file mode 100644
index 0000000..ba9a903
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 async\343\200\201await.md"	
@@ -0,0 +1,110 @@
+# 实现 async/await
+
+我们知道 `async/await` 是 `generator` 函数的语法糖，它的作用是用同步的方式，执行异步操作。
+
+本文将看看如何实现一个 `async/await`。假定你已经熟悉 `async/await` 和 `generator` 函数。
+
+首先，我们通过封装一个[高阶函数](https://github.com/lio-zero/blog/blob/master/JavaScript/JavaScript%20%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0.md) `asyncToGenerator`，该函数接收一个 generator 函数作为参数 `generatorFn`，并经过一系列处理，最终返回一个具有与 `async` 相同功能的新函数。
+
+我们知道，`async` 最终返回的是一个 Promise 对象，**那我们该如何返回一个 Promise 对象呢？**
+
+```js
+async function foo() {
+  return 1
+}
+
+foo()
+// Promise {<fulfilled>: 1}
+```
+
+熟悉 ES6 的你肯定立马想到答案，使用 Promise 构造函数包装一下：
+
+```js
+function asyncToGenerator(generatorFn) {
+  return function () {
+    return new Promise((resolve, reject) => {})
+  }
+}
+```
+
+在返回的函数中，调用了 generator 函数 `generatorFn`，并将返回值赋给变量 `gen`。然后返回一个 `Promise` 对象，并在其中定义了一个内部函数 `step`。
+
+```js
+function asyncToGenerator(generatorFn) {
+  return function () {
+    const gen = generatorFn.apply(this, arguments) // gen 有可能传参
+
+    return new Promise((resolve, reject) => {
+      function step(key, arg) {}
+    })
+  }
+}
+```
+
+当调用 `step` 函数时，会执行 generator 函数的下一步。如果 generator 函数的执行已经完成，则会触发 `Promise` 对象的 `resolve` 方法，并将 generator 函数的返回值作为参数传入。如果 generator 函数的执行尚未完成，则会返回一个新的 `Promise` 对象，并继续调用 `step` 函数执行 generator 函数的下一步。
+
+```js
+function asyncToGenerator(generatorFn) {
+  return function () {
+    const gen = generatorFn.apply(this, arguments) // gen 有可能传参
+
+    return new Promise((resolve, reject) => {
+      function step(key, arg) {
+        let ret
+
+        // 可能存在返回 reject 状态的 Promise，使用 try...catch 捕获，并直接 reject
+        try {
+          ret = gen[key](arg)
+        } catch (error) {
+          return reject(error)
+        }
+
+        const { value, done } = ret
+
+        // 如果 done 为 true，则表示 generator 函数的执行已经完成，返回 resolve(value)
+        // value 是 generator 函数的返回值
+        if (done) {
+          return resolve(value)
+        } else {
+          // 如果 done 为 false，表示 generator 函数的执行尚未完成，
+          // 返回一个新的 Promise 对象，并继续调用 step 函数执行 generator 函数的下一步。
+          // 注意：value 有可能是成功或失败的，所以需要使用 Promise.resolve() 包装一下。
+          return Promise.resolve(value).then(
+            (val) => {
+              step('next', val)
+            },
+            (err) => {
+              step('throw', err)
+            }
+          )
+        }
+      }
+
+      // 初次执行
+      step('next')
+    })
+  }
+}
+```
+
+这就是实现 `async/await` 的全部。
+
+如果你使用 Babel 去转换一段 `async/await` 代码，得到的也是类似的实现。
+
+在 generator 函数执行过程中，如果 generator 函数中有异步操作，可以返回一个 `Promise` 对象，然后在 generator 函数的下一步中使用 `yield` 关键字获取异步操作的结果。例如：
+
+```js
+function* generatorFn() {
+  const data = yield Promise.resolve(123)
+  return data
+}
+```
+
+当调用返回的函数时，会执行 generator 函数的第一步，然后返回一个 `Promise` 对象。你可以通过调用 `then` 方法或使用 `await` 关键字来处理 generator 函数的返回值。
+
+```js
+asyncToGenerator(generatorFn)().then(console.log) // 123
+await asyncToGenerator(generatorFn)()
+```
+
+需要注意，如果 generator 函数中的异步操作返回了一个失败的 `Promise` 对象，则会触发 `Promise` 对象的 `reject` 方法，并将错误信息传入。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 call\343\200\201apply\343\200\201bind.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 call\343\200\201apply\343\200\201bind.md"
new file mode 100644
index 0000000..1a5eaaf
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 call\343\200\201apply\343\200\201bind.md"	
@@ -0,0 +1,123 @@
+# 实现 call、apply、bind
+
+## Call
+
+> [`call()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call) 方法使用一个指定的 `this` 值和单独指定的一个或多个参数来调用一个函数。
+
+**实现思路**：将要改变 `this` 指向的函数挂到目标 `this` 上执行并返回。
+
+```js
+Function.prototype.myCall = function (ctx, ...args) {
+  ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
+  // Symbol 是唯一的，防止 ctx 内存在重名 key
+  const key = Symbol()
+  // 之前，我们使用 ctx[key] = this，但这样在 ctx 中将存在调用 call 的函数
+  // 我们可以使用 ES5 的 Object.defineProperty 添加 key
+  // 并使用属性描述符 enumerable: false，表示 key 为不可枚举属性，也就不会显示在 ctx 中
+  Object.defineProperty(ctx, key, {
+    enumerable: false,
+    value: this
+  })
+
+  const result = ctx[key](...args)
+  delete ctx[key]
+  return result
+}
+```
+
+示例：
+
+```js
+function getUserInfo(data) {
+  console.log(this.name, data)
+}
+
+const user = {
+  name: 'IU',
+  age: 18,
+  love: 'me'
+}
+
+const data = [0, 1, 2]
+getUserInfo.myCall(user, data) // IU [0, 1, 2]
+```
+
+## Apply
+
+> [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 方法调用一个具有给定 `this` 值的函数，以及以一个副本（或类数组对象）的形式提供的参数。
+
+**实现思路**：与 `call` 类似，但传递参数是一个数组。
+
+```js
+Function.prototype.myApply = function (ctx, args) {
+  // apply 需要传递的是一个数组，如果传递的不是一个数组或使用了扩展运算符，将抛出报错。
+  if (!Array.isArray(args))
+    throw new TypeError('CreateListFromArrayLike called on non-object')
+
+  ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
+  const key = Symbol()
+  Object.defineProperty(ctx, key, {
+    enumerable: false,
+    value: this
+  })
+  let result
+  // 是否有传递第二个参数
+  if (args) {
+    result = ctx[key](args)
+  } else {
+    result = ctx[key]()
+  }
+  delete ctx[key]
+  return result
+}
+```
+
+示例：
+
+```js
+getUserInfo.myApply(user, data) // IU 0 1 2
+```
+
+## Bind
+
+> [`bind()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) 方法创建一个新的函数，当被调用时，将其 `this` 关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
+
+**实现思路**：类似 `call`，但返回的是函数。
+
+```js
+Function.prototype.myBind = function (ctx, ...outArgs) {
+  ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
+
+  const key = Symbol()
+  ctx[key] = this
+  const _this = this
+
+  return function F(...innerArgs) {
+    // 处理函数使用 new 的情况
+    if (this instanceof F) return new _this(...outArgs, ...innerArgs)
+
+    return _this.apply(ctx, outArgs.concat(innerArgs))
+  }
+}
+```
+
+示例：
+
+```js
+function getUserInfo(args1, args2) {
+  console.log(this.name, args1, args2)
+}
+
+const boundGetUserInfo = getUserInfo.bind(user)
+boundGetUserInfo(data) // IU [ 0, 1, 2 ] undefined
+
+const boundGetUserInfo2 = getUserInfo.myBind(user, 12)
+boundGetUserInfo2(data) // IU 12 [ 0, 1, 2 ]
+```
+
+## 更多资料
+
+- [JavaScript 深入之 call 和 apply 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/11)
+- [JavaScript 深入之 bind 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/12)
+- [JS 中的 call、apply、bind 方法详解](https://segmentfault.com/a/1190000018270750)
+- [Implement your own — call(), apply() and bind() method in JavaScript](https://medium.com/@ankur_anand/implement-your-own-call-apply-and-bind-method-in-javascript-42cc85dba1b)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 indexOf \346\226\271\346\263\225.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 indexOf \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..30666af
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 indexOf \346\226\271\346\263\225.md"	
@@ -0,0 +1,58 @@
+# 实现 indexOf 方法
+
+JS 为字符串和数组提供了原生 `indexOf` 方法：
+
+`String.prototype.indexOf(searchElement [, fromIndex])` 方法用于返回在字符串中第一次出现的指定的子字符串的索引，或者在没有找到子字符串时返回 -1。
+
+这个方法接受两个参数：
+
+- `searchValue` — 要在字符串中查找的子字符串。
+- `fromIndex`（可选）— 指定开始搜索的索引位置。如果未指定，则默认为 0。如果传递了负数，则会将其转换为字符串长度加上该值。
+
+> **注意**：`indexOf()` 方法是区分大小写的。
+
+`Array.prototype.indexOf(searchElement [, fromIndex])` 方法用于返回数组中第一个找到的指定元素的索引，如果没有找到该元素，则返回 -1。
+
+这个方法接受两个参数：
+
+- `searchElement` — 要在数组中查找的元素。
+- `fromIndex`（可选）— 指定开始搜索的索引位置。如果未指定，则默认为 0。如果传递了负数，则会将其转换为数组的长度加上该值，以确保开始搜索的索引位置始终在数组的范围内。
+
+`Array.prototype.indexOf()` 方法实现如下：
+
+```js
+function arrayIndexOf(arr, searchElement, fromIndex = 0) {
+  if (fromIndex < 0) fromIndex += arr.length
+  for (let i = fromIndex; i < arr.length; i++) {
+    if (arr[i] === searchElement) return i
+  }
+  return -1
+}
+
+arrayIndexOf([1, 2, 3, 4], 3) // 2
+arrayIndexOf([1, 2, 3, 4], 5) // -1
+arrayIndexOf([1, 2, 3, 4], 2, 2) // -1
+```
+
+`String.prototype.indexOf()` 方法实现如下：
+
+```js
+function stringIndexOf(str, searchValue, fromIndex = 0) {
+  if (fromIndex < 0) fromIndex += str.length
+  for (let i = fromIndex; i < str.length; i++) {
+    if (str.substring(i, i + searchValue.length) === searchValue) return i
+  }
+  return -1
+}
+
+stringIndexOf('hello world', '') // 0
+stringIndexOf('hello world', '', 0) // 0
+stringIndexOf('hello world', '', 3) // 3
+stringIndexOf('hello world', '', 8) // 8
+stringIndexOf('hello world', 'o') // 4
+stringIndexOf('hello world', 'o', 5) // 7
+```
+
+需要注意，如果传递了负数作为 `fromIndex` 参数，则这两个函数会将其转换为数组或字符串的长度加上该值，以确保开始搜索的索引位置始终在数组或字符串的范围内。
+
+它们各自还有一个 `lastIndexOf` 方法，详细内容可以自行查阅了解。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 instanceof \350\277\220\347\256\227\347\254\246.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 instanceof \350\277\220\347\256\227\347\254\246.md"
new file mode 100644
index 0000000..561307e
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 instanceof \350\277\220\347\256\227\347\254\246.md"	
@@ -0,0 +1,72 @@
+# 实现 instanceof 运算符
+
+> MDN：[`instanceof`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof) 运算符用于检测构造函数的 `prototype` 属性是否出现在某个实例对象的原型链上。
+
+**实现思路**：
+
+- 判断左边变量的原型是否存在于右边构造函数的原型链上。
+- 通过实例对象属性的 `__proto__` 去一层层查找，如果和构造函数的 `prototype` 相等则返回 `true`，如果一直没有查找成功则返回 `false`。
+
+```js
+function myInstanceOf(left, right) {
+  // 必须是对象或函数
+  if (
+    !(left && typeof left === 'object') ||
+    !(right && typeof right === 'function')
+  ) {
+    return false
+  }
+
+  // 获取 left 对象的原型
+  let leftValue = left.__proto__ // or => Object.getPrototypeOf(left)
+  // 构造函数原型
+  let rightValue = right.prototype
+  while (true) {
+    // 如果为 null，说明原型链已经查找到最顶层了，返回 false
+    if (leftValue === null) return false
+    // 查找到原型
+    if (leftValue === rightValue) return true
+    // 继续向上查找 leftValue 的原型
+    leftValue = leftValue.__proto__
+  }
+}
+```
+
+我们可以改进该函数：
+
+- 在检查对象的原型时，可以使用 `Object.prototype.isPrototypeOf()` 方法，它接受一个对象作为参数，并返回一个布尔值，表示该对象是否是另一个对象的原型。
+- 可以将函数改为递归函数的形式，这样可以省去死循环和条件判断。
+
+```js
+function myInstanceOf(left, right) {
+  if (
+    !(left && typeof left === 'object') ||
+    !(right && typeof right === 'function')
+  ) {
+    return false
+  }
+  if (Object.prototype.isPrototypeOf.call(right.prototype, left)) {
+    return true
+  }
+  return myInstanceOf(Object.getPrototypeOf(left), right)
+}
+```
+
+示例：
+
+```js
+function Fn() {}
+let foo = new Fn()
+
+myInstanceOf('helloworld', String) // false
+myInstanceOf(new String('helloworld'), String) // true
+myInstanceOf({}, Object) // true
+myInstanceOf(null, Fn) // false
+myInstanceOf(foo, Fn) // true
+```
+
+理解原型和原型链可以帮助你理解这层关系。
+
+## 更多资料
+
+[JavaScript 深入之从原型到原型链](https://github.com/mqyqingfeng/Blog/issues/2)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 new \350\277\220\347\256\227\347\254\246.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 new \350\277\220\347\256\227\347\254\246.md"
new file mode 100644
index 0000000..bb707d6
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 new \350\277\220\347\256\227\347\254\246.md"	
@@ -0,0 +1,63 @@
+# 实现 new 运算符
+
+[`new`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) 运算符可以帮助我们创建一个由构造函数定义的对象的实例，并且绑定上 `this`。
+
+## 原理
+
+MDN 介绍了 `new` 运算符执行的操作步骤如下：
+
+1. 创建一个空的 JavaScript 对象（即 `{}`）；
+2. 为步骤 1 新创建的对象添加属性 `__proto__`，将该属性链接至构造函数的原型对象（ `constructor.prototype`）；
+3. 将步骤 1 新创建的对象作为 `this` 的上下文 ；
+4. 如果该函数没有返回对象，则返回 `this`。
+
+> [地址](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)。
+
+## 实现
+
+根据上述所描述的，我们可以模拟出一个 `new` 运算符。
+
+```js
+function myNew() {
+  // 步骤一：创建一个新对象。
+  let obj = {}
+
+  // 步骤二：将新对象原型（__proto__）设置为构造函数的原型对象。
+  let Constructor = [].shift.call(arguments) // 使用 shift 方法从参数数组中删除并返回第一个元素，即构造函数。
+  obj.__proto__ = Constructor.prototype
+
+  // 步骤三：使用 apply 方法将 this 指向从 Constructor 转为新对象 obj，并执行构造函数。
+  let ret = Constructor.apply(obj, arguments)
+
+  // 步骤四：如果构造函数返回一个对象，则返回该对象，否则返回新对象。
+  return {}.toString.call(ret) === '[object Object]' ? ret : obj
+}
+```
+
+示例：
+
+```js
+function Person(name, age) {
+  this.name = name
+  this.age = age
+}
+
+let p = myNew(Person, 'O.O', 20)
+console.log(p) // { name: 'O.O', age: 20 }
+```
+
+> **扩展**：[`new.target`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 属性可以检测函数或构造方法是否是通过 `new` 运算符被调用的。
+
+你还可以使用 `Object.create()` 方法简化步骤一和步骤二的实现过程。
+
+## 扩展：可以使用 `new` 一个箭头函数吗？
+
+箭头函数是没有自己的 `this` 绑定的，它的 `this` 绑定是继承自其所在的作用域的，而 `new` 运算符会为构造函数创建一个新的 `this` 绑定。因此，尝试使用 `new` 运算符调用箭头函数会导致错误。
+
+> 箭头函数也没有 `prototype` 和 `arguments`。
+
+## 更多资料
+
+- [第 14 题：情人节福利题，如何实现一个 new](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/12)
+- [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13)
+- [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 sleep \345\207\275\346\225\260.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 sleep \345\207\275\346\225\260.md"
new file mode 100644
index 0000000..17aa183
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260 sleep \345\207\275\346\225\260.md"	
@@ -0,0 +1,71 @@
+# 实现 sleep 函数
+
+`sleep()` 函数的作用是让一段程序进入不活跃状态并持续一段时间，很多编程语言都有自己的 `sleep` 方法，但 JavaScript 没有。
+
+最接近的是 `setTimeout`，它在指定的一段时间后执行回调内的某些操作：
+
+```js
+const printNums = () => {
+  console.log(1)
+  setTimeout(() => console.log(2), 500)
+  console.log(3)
+}
+
+printNums()
+// 1
+// 3
+// 2
+```
+
+但你也可能也注意到了，它执行的顺序跟实际 `sleep` 不符合。
+
+## 同步版本
+
+使用 `new Date().getTime()` 可以在 `while` 循环中用于暂停执行一段时间。
+
+```js
+const sleepSync = (ms) => {
+  const end = new Date().getTime() + ms
+  while (new Date().getTime() < end) {
+    // do something
+    console.log('Are you sure?')
+    break
+  }
+}
+
+const print = () => {
+  console.log('All work and no play makes Jack a dull boy!')
+  sleepSync(1000)
+  console.log('Yes')
+}
+
+print()
+```
+
+## 异步版本
+
+ES6 新增的 Promise、Generator 和 ES8 的 `async/await` 可以方便我们实现异步版本的 `sleep` 方法：
+
+```js
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
+
+async function print() {
+  console.log('All work and no play makes Jack a dull boy!')
+  await sleep(1000).then(() => {
+    // do something
+    console.log('Are you sure?')
+  })
+  console.log('Yes')
+}
+
+print()
+```
+
+需要注意的是：
+
+- `sleep` 返回的函数必须在异步函数中执行，并且必须使用 `await` 调用。
+- `await` 仅暂停当前异步函数。这意味着它不会阻止脚本其余部分的执行，这在绝大多数情况下都是你想要的。
+
+## 更多资料
+
+[What is the JavaScript version of sleep()?](https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 Ajax HTTP \350\257\267\346\261\202\345\272\223.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 Ajax HTTP \350\257\267\346\261\202\345\272\223.md"
new file mode 100644
index 0000000..4ee1076
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 Ajax HTTP \350\257\267\346\261\202\345\272\223.md"	
@@ -0,0 +1,454 @@
+# 实现一个 AJAX HTTP 请求库
+
+使用 [UMD](https://github.com/lio-zero/blog/blob/main/JavaScript/UMD.md) 作为通用的模块系统：
+
+```js
+;(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // 检查 AMD
+    define([], function () {
+      return factory(root)
+    })
+  } else if (typeof exports === 'object') {
+    // 检查 CommonJS
+    module.exports = factory(root)
+  } else {
+    window.atomic = factory(root)
+  }
+})(
+  typeof global !== 'undefined'
+    ? global
+    : typeof window !== 'undefined'
+    ? window
+    : this,
+  function (window) {
+    'use strict'
+  }
+)
+```
+
+提供一个默认设置选项：
+
+```js
+let settings
+
+const defaults = {
+  method: 'GET',
+  data: {},
+  headers: {
+    'Content-type': 'application/x-www-form-urlencoded'
+  },
+  responseType: 'text',
+  timeout: null,
+  withCredentials: false
+}
+```
+
+检查当前环境是否支持所需方法和 API：
+
+```js
+const supports = function () {
+  return 'XMLHttpRequest' in window && 'JSON' in window && 'Promise' in window
+}
+```
+
+将两个或多个对象合并在一起：
+
+```js
+const extend = function () {
+  const extended = {}
+
+  // 将对象合并到扩展对象中
+  const merge = function (obj) {
+    for (const prop in obj) {
+      if (obj.hasOwnProperty(prop)) {
+        if (Object.prototype.toString.call(obj[prop]) === '[object Object]') {
+          extended[prop] = extend(extended[prop], obj[prop])
+        } else {
+          extended[prop] = obj[prop]
+        }
+      }
+    }
+  }
+
+  // 循环遍历每个对象并进行合并
+  for (let i = 0; i < arguments.length; i++) {
+    const obj = arguments[i]
+    merge(obj)
+  }
+
+  return extended
+}
+```
+
+将文本响应解析为 JSON：
+
+```js
+const parse = function (req) {
+  let result
+  if (settings.responseType !== 'text' && settings.responseType !== '') {
+    return { data: req.response, xhr: req }
+  }
+  try {
+    result = JSON.parse(req.responseText)
+  } catch (e) {
+    result = req.responseText
+  }
+  return { data: result, xhr: req }
+}
+```
+
+将对象转换为查询字符串：
+
+```js
+const param = function (obj) {
+  // 如果已经是字符串或 FormData 对象，则按原样返回
+  if (
+    typeof obj === 'string' ||
+    Object.prototype.toString.call(obj) === '[object FormData]'
+  )
+    return obj
+
+  // 如果 content-type 设置为 JSON，则字符串化 JSON 对象
+  if (
+    /application\/json/i.test(settings.headers['Content-type']) ||
+    Object.prototype.toString.call(obj) === '[object Array]'
+  )
+    return JSON.stringify(obj)
+
+  // 否则，将对象转换为序列化字符串
+  const encoded = []
+  for (let prop in obj) {
+    if (obj.hasOwnProperty(prop)) {
+      encoded.push(
+        encodeURIComponent(prop) + '=' + encodeURIComponent(obj[prop])
+      )
+    }
+  }
+  return encoded.join('&')
+}
+```
+
+发送 XHR 请求，作为 promise 返回：
+
+```js
+const makeRequest = function (url) {
+  // 创建 XHR 请求
+  const request = new XMLHttpRequest()
+
+  // 设置 promise
+  const xhrPromise = new Promise((resolve, reject) => {
+    // 设置监听器以处理已完成的请求
+    request.onreadystatechange = () => {
+      // 仅在请求完成时运行
+      if (request.readyState !== 4) return
+
+      // 防止超时错误被处理
+      if (!request.status) return
+
+      // 处理响应
+      if (request.status >= 200 && request.status < 300) {
+        // 如果成功
+        resolve(parse(request))
+      } else {
+        // 如果失败
+        reject({
+          status: request.status,
+          statusText: request.statusText,
+          responseText: request.responseText
+        })
+      }
+    }
+
+    // 设置我们的 HTTP 请求
+    request.open(settings.method, url, true)
+    request.responseType = settings.responseType
+
+    // 添加 headers
+    for (let header in settings.headers) {
+      if (settings.headers.hasOwnProperty(header)) {
+        request.setRequestHeader(header, settings.headers[header])
+      }
+    }
+
+    // 设置超时
+    if (settings.timeout) {
+      request.timeout = settings.timeout
+      request.ontimeout = (e) => {
+        reject({
+          status: 408,
+          statusText: 'Request timeout'
+        })
+      }
+    }
+
+    // 添加凭证
+    if (settings.withCredentials) {
+      request.withCredentials = true
+    }
+
+    // 发送请求
+    request.send(param(settings.data))
+  })
+
+  // 取消 XHR 请求
+  xhrPromise.cancel = () => {
+    request.abort()
+  }
+
+  // 将请求作为 Promise 返回
+  return xhrPromise
+}
+```
+
+最终，安装 Atomic 并返回：
+
+```js
+const Atomic = (url, options) => {
+  // 检查浏览器支持
+  if (!supports()) throw 'Atomic: 此浏览器不支持此插件中使用的方法。'
+
+  // 将选项合并为默认值
+  settings = extend(defaults, options || {})
+
+  // 提出请求
+  return makeRequest(url)
+}
+
+return Atomic
+```
+
+当然，你还可以添加一些 loading、文件上传类型判断，以及身份凭证等，来补充你所需要的功能。
+
+## 最终代码
+
+```js
+;(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], function () {
+      return factory(root)
+    })
+  } else if (typeof exports === 'object') {
+    module.exports = factory(root)
+  } else {
+    window.atomic = factory(root)
+  }
+})(
+  typeof global !== 'undefined'
+    ? global
+    : typeof window !== 'undefined'
+    ? window
+    : this,
+  function (window) {
+    'use strict'
+    let settings
+
+    // 默认设置
+    const defaults = {
+      method: 'GET',
+      data: {},
+      headers: {
+        'Content-type': 'application/x-www-form-urlencoded'
+      },
+      responseType: 'text',
+      timeout: null,
+      withCredentials: false
+    }
+
+    /**
+     * 特性测试
+     * @return {Boolean} 如果为 true，则支持所需的方法和 API
+     */
+    const supports = function () {
+      return (
+        'XMLHttpRequest' in window && 'JSON' in window && 'Promise' in window
+      )
+    }
+
+    /**
+     * 将两个或多个对象合并在一起。
+     * @param   {Object}   objects  要合并在一起的对象
+     * @returns {Object}            默认值和选项的合并值
+     */
+    const extend = function () {
+      const extended = {}
+
+      // 将对象合并到扩展对象中
+      const merge = function (obj) {
+        for (let prop in obj) {
+          if (obj.hasOwnProperty(prop)) {
+            if (
+              Object.prototype.toString.call(obj[prop]) === '[object Object]'
+            ) {
+              extended[prop] = extend(extended[prop], obj[prop])
+            } else {
+              extended[prop] = obj[prop]
+            }
+          }
+        }
+      }
+
+      // 循环遍历每个对象并进行合并
+      for (let i = 0; i < arguments.length; i++) {
+        const obj = arguments[i]
+        merge(obj)
+      }
+
+      return extended
+    }
+
+    /**
+     * 将文本响应解析为 JSON
+     * @private
+     * @param  {String} req 响应
+     * @return {Array}      responseText 的 JSON 对象，加上原始响应
+     */
+    const parse = function (req) {
+      let result
+      if (settings.responseType !== 'text' && settings.responseType !== '') {
+        return { data: req.response, xhr: req }
+      }
+      try {
+        result = JSON.parse(req.responseText)
+      } catch (e) {
+        result = req.responseText
+      }
+      return { data: result, xhr: req }
+    }
+
+    /**
+     * 将对象转换为查询字符串
+     * @link   https://blog.garstasio.com/you-dont-need-jquery/ajax/
+     * @param  {Object|Array|String} obj 对象
+     * @return {String}                  查询字符串
+     */
+    const param = function (obj) {
+      // 如果已经是字符串或 FormData 对象，则按原样返回
+      if (
+        typeof obj === 'string' ||
+        Object.prototype.toString.call(obj) === '[object FormData]'
+      )
+        return obj
+
+      // 如果 content-type 设置为 JSON，则字符串化 JSON 对象
+      if (
+        /application\/json/i.test(settings.headers['Content-type']) ||
+        Object.prototype.toString.call(obj) === '[object Array]'
+      )
+        return JSON.stringify(obj)
+
+      // 否则，将对象转换为序列化字符串
+      const encoded = []
+      for (let prop in obj) {
+        if (obj.hasOwnProperty(prop)) {
+          encoded.push(
+            encodeURIComponent(prop) + '=' + encodeURIComponent(obj[prop])
+          )
+        }
+      }
+      return encoded.join('&')
+    }
+
+    /**
+     * 发送 XHR 请求，作为 promise 返回
+     * @param  {String} url 请求 URL
+     * @return {Promise}    XHR 请求 promise
+     */
+    const makeRequest = function (url) {
+      // 创建 XHR 请求
+      const request = new XMLHttpRequest()
+
+      // 设置 promise
+      const xhrPromise = new Promise(function (resolve, reject) {
+        // 设置监听器以处理已完成的请求
+        request.onreadystatechange = function () {
+          // 仅在请求完成时运行
+          if (request.readyState !== 4) return
+
+          // 防止超时错误被处理
+          if (!request.status) return
+
+          // 处理响应
+          if (request.status >= 200 && request.status < 300) {
+            // 如果成功
+            resolve(parse(request))
+          } else {
+            // 如果失败
+            reject({
+              status: request.status,
+              statusText: request.statusText,
+              responseText: request.responseText
+            })
+          }
+        }
+
+        // 设置我们的 HTTP 请求
+        request.open(settings.method, url, true)
+        request.responseType = settings.responseType
+
+        // 添加 headers
+        for (let header in settings.headers) {
+          if (settings.headers.hasOwnProperty(header)) {
+            request.setRequestHeader(header, settings.headers[header])
+          }
+        }
+
+        // 设置超时
+        if (settings.timeout) {
+          request.timeout = settings.timeout
+          request.ontimeout = function (e) {
+            reject({
+              status: 408,
+              statusText: 'Request timeout'
+            })
+          }
+        }
+
+        // 添加凭证
+        if (settings.withCredentials) {
+          request.withCredentials = true
+        }
+
+        // 发送请求
+        request.send(param(settings.data))
+      })
+
+      // 取消 XHR 请求
+      xhrPromise.cancel = function () {
+        request.abort()
+      }
+
+      // 将请求作为 Promise 返回
+      return xhrPromise
+    }
+
+    /**
+     * 安装 Atomic
+     * @param {String} url      请求 URL
+     * @param {Object} options 请求的一组选项 [可选]
+     */
+    const Atomic = function (url, options) {
+      // 检查浏览器支持
+      if (!supports()) throw 'Atomic: 此浏览器不支持此插件中使用的方法。'
+
+      // 将选项合并为默认值
+      settings = extend(defaults, options || {})
+
+      // 提出请求
+      return makeRequest(url)
+    }
+
+    // 返回公共方法
+    return Atomic
+  }
+)
+```
+
+示例：
+
+```js
+;(async () => {
+  const { data } = await atomic('https://jsonplaceholder.typicode.com/todos/1')
+  console.log(data)
+})()
+```
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 Event Bus.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 Event Bus.md"
new file mode 100644
index 0000000..0a8ce36
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 Event Bus.md"	
@@ -0,0 +1,107 @@
+# 实现一个 Event Bus
+
+截取 [EventBus](https://github.com/greenrobot/EventBus) 的定义：
+
+> EventBus 能够简化各组件间的通信，能有效的分离事件发送方和接收方，能够避免复杂且容易出错的依赖关系和生命周期问题。
+
+简单的讲，组件间的通信，是一个触发与监听的过程。
+
+以下是一个简单的实现：
+
+```js
+class EventEmitter {
+  constructor() {
+    // 存储事件
+    this.events = this.events || new Map()
+  }
+  // 注册监听事件
+  on(type, handler) {
+    if (!this.events.get(type)) {
+      this.events.set(type, handler)
+    }
+  }
+  // 取消事件监听
+  off(type) {
+    if (this.events.get(type)) {
+      this.events.delete(type)
+    }
+  }
+  // 触发事件
+  emit(type) {
+    let handle = this.events.get(type)
+    handle && handle.apply(this, [...arguments].slice(1))
+  }
+}
+```
+
+示例：
+
+```js
+let emitter = new EventEmitter()
+const foo = (name) => {
+  console.log(name)
+}
+
+emitter.on('name', foo)
+
+// 取消监听
+// emitter.off('name', foo)
+// 清空所有事件
+// emitter.events.clear()
+
+emitter.emit('name', { name: 'O.O' })
+```
+
+你可以根据 [mitt](https://github.com/developit/mitt/blob/main/src/index.ts)，实现一个更加完美的 Event Bus。核心代码如下：
+
+```js
+function mitt(all) {
+  all = all || new Map()
+
+  return {
+    all,
+
+    on(type, handler) {
+      const handlers = all.get(type)
+      if (handlers) {
+        handlers.push(handler)
+      } else {
+        all.set(type, [handler])
+      }
+    },
+
+    off(type, handler) {
+      const handlers = all.get(type)
+      if (handlers) {
+        if (handler) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1)
+        } else {
+          all.set(type, [])
+        }
+      }
+    },
+
+    emit(type, evt) {
+      let handlers = all.get(type)
+      if (handlers) {
+        handlers.slice().map((handler) => {
+          handler(evt)
+        })
+      }
+
+      handlers = all.get('*')
+      if (handlers) {
+        handlers.slice().map((handler) => {
+          handler(type, evt)
+        })
+      }
+    }
+  }
+}
+```
+
+我们所实现的 Event Bus 对同一事件进行过滤，而 mitt 将同一事件回调进行收集，且可以通过通配符 `*` 事件类型监听所有事件。
+
+## 更多资料
+
+[Node 的 EventEmitter 源码](https://github.com/nodejs/node/blob/main/lib/events.js#L218)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 EventEmitter.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 EventEmitter.md"
new file mode 100644
index 0000000..d5fb589
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 EventEmitter.md"	
@@ -0,0 +1,133 @@
+# 实现一个 EventEmitter
+
+EventEmitter 是一种用于分发事件的机制，它允许你在应用程序中的不同部分之间分发事件，并为每个事件定义回调函数。
+
+在 Node.js 中，`EventEmitter` 是 Node `events` 模块提供了一个类，它是实现 Node.js 事件驱动的基础。
+
+实现 `EventEmitter` 类，我们需要知道其内部提供的一些方法，我在 [Node Events 模块](https://github.com/lio-zero/blog/blob/main/Node/Node.js%20Events%20%E6%A8%A1%E5%9D%97.md)有介绍到，本文不过多解释。
+
+以下是它的一个简单实现。
+
+首先，我们需要定义一个类来表示 EventEmitter：
+
+```js
+class EventEmitter {
+  constructor() {
+    this.events = {}
+  }
+}
+```
+
+接下来，我们需要为 `EventEmitter` 类添加一些方法来实现事件的分发。
+
+```js
+class EventEmitter {
+  // ...
+
+  on(event, callback) {
+    if (!this.events[event]) {
+      this.events[event] = []
+    }
+    this.events[event].push(callback)
+  }
+
+  addListener(event, callback) {
+    this.on(type, handler)
+  }
+
+  prependListener(type, handler) {
+    if (!this.events[type]) {
+      this.events[type] = []
+    }
+    this.events[type].unshift(handler)
+  }
+}
+```
+
+`addListener` 是 `on` 的别名，做着同样的工作。`prependListener` 类似，只不过它可以在其他监听器之前添加和调用。
+
+然后是 `emit` 方法，它用于分发事件，并调用所有已注册的回调函数：
+
+```js
+class EventEmitter {
+  // ...
+
+  emit(event, data) {
+    if (this.events[event]) {
+      this.events[event].forEach((callback) => {
+        callback(data)
+      })
+    }
+  }
+}
+```
+
+我们可以添加 `off` 方法来取消事件的监听：
+
+```js
+class EventEmitter {
+  // ...
+
+  removeListener(type, handler) {
+    if (!this.events[type]) {
+      return
+    }
+    this.events[type] = this.events[type].filter((item) => item !== handler)
+  }
+
+  off(type, handler) {
+    this.removeListener(type, handler)
+  }
+}
+```
+
+`off` 是 `removeListener` 的别名。
+
+添加 `once` 方法，该方法在分发事件后立即取消注册：
+
+```js
+class EventEmitter {
+  // ...
+
+  once(event, callback) {
+    const cb = (...args) => {
+      callback(...args)
+      this.off(event, cb)
+    }
+    this.on(event, cb)
+  }
+}
+```
+
+我们实现到这里，一个基本的 `EventEmitter` 类就已经实现了。
+
+使用示例：
+
+```js
+const emitter = new EventEmitter()
+
+// 在组件 A 中注册事件监听
+emitter.on('someEvent', (data) => {
+  console.log(data) // 'Hello, World!'
+})
+
+// 在组件 B 中分发事件
+emitter.emit('someEvent', 'Hello, World!')
+
+// 使用 off 方法来取消事件监听
+// emitter.off('someEvent', callback)
+```
+
+当然，这并不是 Node `EventEmitter` 类的全部实现，它还有更多功能、逻辑需要处理。详细可以查看源码 [lib/events.js EventEmitter 的实现](https://github.com/nodejs/node/blob/main/lib/events.js#L218)。
+
+## EventBus 和 EventEmitter 的区别
+
+如果你看过[实现一个 Event Bus](https://github.com/lio-zero/blog/blob/main/%E6%89%8B%E5%86%99%E7%B3%BB%E5%88%97/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%20Event%20Bus.md) 这篇文章，你会发现它们实现上如此类似，它们都是用于分发事件的机制，但它们并不完全相同。
+
+EventBus 是一种轻量级的事件分发机制，通常用于在单个应用程序中的不同部分之间传递消息。EventBus 通常实现为单例，并提供一些方法来注册和分发事件，例如 `on`、`emit` 和 `off`。
+
+EventEmitter 是一种用于分发事件的机制，常用于 Node.js 中的模块间通信。EventEmitter 通常实现为一个类，提供类似于 EventBus 的方法来注册和分发事件，同样也有 `on`、`emit` 和 `off`。
+
+EventBus 和 EventEmitter 都是发布订阅者模式（也称为观察者模式）的实现，都提供了 `on` 和 `emit` 等方法，用于注册和分发事件。
+
+总的来说，EventBus 和 EventEmitter 都是用于在单个应用程序中的不同部分之间分发事件的机制。但它们的实现方式不同，EventBus 通常是单例，而 EventEmitter 通常是类。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 JavaScript \346\250\241\346\235\277\345\274\225\346\223\216.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 JavaScript \346\250\241\346\235\277\345\274\225\346\223\216.md"
new file mode 100644
index 0000000..b4be94c
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 JavaScript \346\250\241\346\235\277\345\274\225\346\223\216.md"	
@@ -0,0 +1,105 @@
+# 实现一个 JavaScript 模板引擎
+
+> 模板引擎（这里特指用于 Web 开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的 HTML 文档。
+
+模板引擎以一种相当简单的方式工作：你创建一个模板，并使用适当的语法将变量传递给它。
+
+例如：ES6 的模板字符串或 Underscore `_.template` 方法，它们都是类似的方式工作。有一些开发者将它们封装成更加健壮、优雅、功能更丰富的模板引擎。
+
+常用的模板引擎有：
+
+- [Pug](https://pugjs.org/)（以前叫 Jade）
+- [EJS](https://github.com/mde/ejs)
+- [HAML](http://haml.info/docs.html)
+- [Htm](https://github.com/developit/htm)
+- [Handlebars](https://github.com/handlebars-lang/handlebars.js)
+- etc
+
+这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能，且大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
+
+下面我们来研究一个相对简单的模板引擎示例。
+
+## JavaScript 实现
+
+以下源码来自 [absurd/lib/processors/html/helpers/TemplateEngine.js](https://github.com/krasimir/absurd/blob/master/lib/processors/html/helpers/TemplateEngine.js)，其实现了基本的模板引擎所提供的功能。
+
+下面我们试着分析它。
+
+```js
+const TemplateEngine = function (html, options) {
+  // re 用于捕获所有以 <% 开头并以 %> 结尾的部分
+  let re = /<%(.+?)%>/g,
+    // reExp 用于捕获模板语法内的以 if、for... 开头的 JS 代码
+    reExp = /(^( )?(var|if|for|else|switch|case|break|{|}|;))(.*)?/g,
+    // 最终函数体为拼接完的 code，代码在 with 内运行。需要注意，严格模式下无法使用 with。
+    code = 'with(obj) { var r=[];\n',
+    cursor = 0,
+    result,
+    match
+  // add 函数的作用是，将所有没有被模板语法包裹的内容推入 r 数组中，而 JS 语法则不需要。
+  const add = function (line, js) {
+    js
+      ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n')
+      : (code +=
+          line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '')
+    return add
+  }
+  // 使用 exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。
+  // 循环调用 add 函数分离文本内容和模板语法
+  while ((match = re.exec(html))) {
+    // html.slice(cursor, match.index) 用于截取没有被 <% %> 包裹的元素
+    // match[1] 获取被 <% %> 包裹内的 JS 代码
+    add(html.slice(cursor, match.index))(match[1], true)
+    cursor = match.index + match[0].length
+  }
+  // 最后在检查一遍是否完全转换完模板，一般情况都执行完了
+  add(html.substr(cursor, html.length - cursor))
+  // 在说一遍，code 保存函数的主体部分
+  // return r.join(""); 将最终的内容转为字符串并返回
+  // 使用 replace 将拼接的代码中包含的回车、制表符、换行符替换为空
+  // 转义字符 — \r 回车、\t tab 制表符、\n 换行符，g 标志全局匹配，replace 替换匹配的元素
+  code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, '')
+  console.log(code) // <- 这里打印一下，一目了然
+  try {
+    // 使用 new Function() 创建一个新函数并将 code 变量作为函数体，然后将 options 对象作为参数调用该函数。
+    result = new Function('obj', code).apply(options, [options])
+  } catch (err) {
+    console.error(`'${err.message}'`, ' in \n\nCode:\n', code, '\n')
+  }
+  // 返回函数执行的结果。
+  return result
+}
+```
+
+我们在代码中，给出了一些具体的分析，帮助你理解它。从整体函数看，它接收两个参数：`html` 和 `options`。该函数负责的工作是将 `html` 字符串中的 `<% ... %>` 标记替换为 `options` 对象中相应属性的值，然后返回替换后的字符串。
+
+示例：
+
+```js
+const template =
+  'My skills:' +
+  '<% if(this.showSkills) { %>' +
+  '<% for(let value of this.skills) { %>' +
+  '<a href="#"><% value %></a>' +
+  '<% } %>' +
+  '<% } else { %>' +
+  '<p>none</p>' +
+  '<% } %>'
+
+TemplateEngine(template, {
+  skills: ['js', 'html', 'css'],
+  showSkills: true
+}) // My skills:<a href="#">js</a><a href="#">html</a><a href="#">css</a>
+```
+
+它还配有一篇文章，详细解读了如何使用 20 行代码实现 JavaScript 模板引擎：[JavaScript template engine in just 20 lines](https://krasimirtsonev.com/blog/article/JavaScript-template-engine-in-just-20-line)。
+
+你可以在此基础上添加其他的逻辑，以丰富它的功能。
+
+## 更多资料
+
+- [underscore 系列之实现一个模板引擎(上)](https://github.com/mqyqingfeng/Blog/issues/63)
+- [underscore 系列之实现一个模板引擎(下)](https://github.com/mqyqingfeng/Blog/issues/70)
+- [Underscore.js `_.template`](http://underscorejs.org/#template)
+- [JavaScript 模板字符串](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals)
+- [精读《JS with 语法》.md](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/205.%E7%B2%BE%E8%AF%BB%E3%80%8AJS%20with%20%E8%AF%AD%E6%B3%95%E3%80%8B.md) — 如果你不了解 `with`，可以阅读这篇文章
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 add \346\226\271\346\263\225.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 add \346\226\271\346\263\225.md"
new file mode 100644
index 0000000..9a5c63a
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252 add \346\226\271\346\263\225.md"	
@@ -0,0 +1,31 @@
+# 实现一个 add 方法
+
+实现一个 `add` 方法，预期效果如下：
+
+```js
+add(1)(2, 3)(4).value() // 10
+```
+
+实现如下：
+
+```js
+function add(...args) {
+  const result = add.bind(null, ...args)
+  // const result = (...args1) => add(...args, ...args1)
+  result.value = () => args.reduce((acc, cur) => acc + cur)
+  return result
+}
+
+add(1)(2, 3)(4).value() // 10
+add(1)(2)(3)(4).value() // 10
+add(1, 2, 3)(4).value() // 10
+```
+
+我们使用了 Rest 运算符将传递给 `add` 函数的多个参数绑定到一个数组中。接着，我们使用函数的 `bind` 方法来创建一个新的函数，并通过 Spread 运算符将参数传递给新函数。
+
+为新创建的函数添加一个 `value` 属性，该属性是一个函数，可以返回所有参数的总和。我们可以使用 `reduce` 方法来计算参数的总和。
+
+## 更多资料
+
+- [请实现一个 add 函数，满足以下功能](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/134)
+- [柯里化](https://github.com/lio-zero/blog/blob/master/JavaScript/%E6%9F%AF%E9%87%8C%E5%8C%96.md)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\345\271\266\345\217\221\350\257\267\346\261\202.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\345\271\266\345\217\221\350\257\267\346\261\202.md"
new file mode 100644
index 0000000..82c61c4
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\345\271\266\345\217\221\350\257\267\346\261\202.md"
@@ -0,0 +1,120 @@
+# 实现一个并发请求
+
+JavaScript 是一种单线程的语言，所以在 JavaScript 中没有真正的并发。但是，可以使用异步编程的概念来实现请求的并发执行。
+
+## 串行请求和并行请求
+
+我们先简单介绍一下串行请求和并行请求。
+
+串行请求指的是按照一定顺序发送请求，即依次发送一个请求，等待回复，再发送下一个请求。串行请求通常用于处理依赖关系，即请求 A 必须在请求 B 之前执行。
+
+并行请求指的是同时发送多个请求，并同时处理它们的回复。并行请求通常用于提高系统的效率，因为它允许多个任务同时执行。
+
+两者的区别在于，串行请求按顺序执行，而并行请求可以同时执行。因此，并行请求可以更快完成，但需要更多的资源，可能会导致服务器负载过重，影响服务器性能。串行请求可能会更稳定，但是执行效率会更低。
+
+## 使用 JavaScript 实现并发请求
+
+通常，我们发起的请求都是串行请求：
+
+```js
+function todoRequest(url) {
+  return fetch(url).then((response) => response.json())
+}
+
+await todoRequest('https://jsonplaceholder.typicode.com/todos/1')
+await todoRequest('https://jsonplaceholder.typicode.com/todos/2')
+await todoRequest('https://jsonplaceholder.typicode.com/todos/3')
+await todoRequest('https://jsonplaceholder.typicode.com/todos/4')
+```
+
+但就将像一开始介绍的，一个接口请求完回来后才会进行下一个请求，如果是这个接口响应比较慢，处理了复杂逻辑。那么整个程序会受到影响。
+
+我们可以使用 JavaScript 的 Promise 对象来实现并行请求。
+
+通过使用 [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) 方法，对所有请求进行并行处理，并在所有请求完成后进行处理。
+
+```js
+// 模拟并行请求函数
+function todoRequest(url) {
+  return fetch(url).then((response) => response.json())
+}
+
+// 示例 URL 列表
+const urls = [
+  'https://jsonplaceholder.typicode.com/todos/1',
+  'https://jsonplaceholder.typicode.com/todos/2',
+  'https://jsonplaceholder.typicode.com/todos/3',
+  'https://jsonplaceholder.typicode.com/todos/4'
+]
+
+// 并行请求所有 URL
+const results = await Promise.all(urls.map((url) => todoRequest(url)))
+// 所有请求完成后，打印结果
+results.forEach(console.log)
+```
+
+## JavaScript 中如何实现并发控制？
+
+阿宝哥在 [JavaScript 中如何实现并发控制？](https://juejin.cn/post/6976028030770610213) 介绍了 [async-pool](https://github.com/rxaviers/async-pool) 库是如何实现并发控制的。
+
+以下是该库实现并发控制请求的几个 ES 版本所更新的源码：
+
+```js
+// ES6
+function asyncPoolES6(poolLimit, iterable, iteratorFn) {
+  let i = 0
+  const ret = []
+  const executing = new Set()
+  const enqueue = function () {
+    if (i === iterable.length) return Promise.resolve()
+
+    const item = iterable[i++]
+    const p = Promise.resolve().then(() => iteratorFn(item, iterable))
+    ret.push(p)
+    executing.add(p)
+    const clean = () => executing.delete(p)
+    p.then(clean).catch(clean)
+    let r = Promise.resolve()
+    if (executing.size >= poolLimit) r = Promise.race(executing)
+
+    return r.then(() => enqueue())
+  }
+  return enqueue().then(() => Promise.all(ret))
+}
+
+// ES7
+async function asyncPoolES7(poolLimit, iterable, iteratorFn) {
+  const ret = []
+  const executing = new Set()
+  for (const item of iterable) {
+    const p = Promise.resolve().then(() => iteratorFn(item, iterable))
+    ret.push(p)
+    executing.add(p)
+    const clean = () => executing.delete(p)
+    p.then(clean).catch(clean)
+    if (executing.size >= poolLimit) await Promise.race(executing)
+  }
+  return Promise.all(ret)
+}
+
+// ES9
+async function* asyncPoolES9(concurrency, iterable, iteratorFn) {
+  const executing = new Set()
+  async function consume() {
+    const [promise, value] = await Promise.race(executing)
+    executing.delete(promise)
+    return value
+  }
+  for (const item of iterable) {
+    // Wrap iteratorFn() in an async fn to ensure we get a promise.
+    // Then expose such promise, so it's possible to later reference and
+    // remove it from the executing pool.
+    const promise = (async () => await iteratorFn(item, iterable))().then(
+      (value) => [promise, value]
+    )
+    executing.add(promise)
+    if (executing.size >= concurrency) yield await consume()
+  }
+  while (executing.size) yield await consume()
+}
+```
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\346\234\211\346\225\210\346\234\237\347\232\204 localStorage API.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\346\234\211\346\225\210\346\234\237\347\232\204 localStorage API.md"
new file mode 100644
index 0000000..b1bf682
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\346\234\211\346\225\210\346\234\237\347\232\204 localStorage API.md"	
@@ -0,0 +1,41 @@
+# 实现一个有效期的 localStorage API
+
+其实就是对原生 API 进行一层封装。
+
+大概思路：使用 `setItem` 时，存储用户设置的过期时间，当使用 `getItem` 时，将存储的过期时间与当前时间进行对比。如果大于当前时间，返回对应的值，否则使用 `removeItem` 将值移除，并返回 `null`
+
+```js
+function initLocalStorage() {
+  // 默认过期时间为 1h
+  localStorage.setItem = (key, value, time = 3600) => {
+    const expiresTime = Date.now() + time * 1000
+    const payload = {
+      __data: value,
+      __expiresTime: expiresTime
+    }
+    Storage.prototype.setItem.call(localStorage, key, JSON.stringify(payload))
+  }
+
+  localStorage.getItem = (key) => {
+    const value = Storage.prototype.getItem.call(localStorage, key)
+    if (typeof value === 'string') {
+      const jsonVal = JSON.parse(value)
+      if (jsonVal.__expiresTime) {
+        if (jsonVal.__expiresTime > Date.now()) {
+          return JSON.stringify(jsonVal.__data)
+        } else {
+          localStorage.removeItem(key)
+          return null
+        }
+      }
+    }
+    return value
+  }
+}
+
+initLocalStorage()
+```
+
+以上是一个大概的实现，您还可以对其进行进一步处理，例如：对传入的键值对进行加密处理等。
+
+如果您还想深入了解，可以阅读：[你还在直接用 localStorage 么？该提升下逼格了](https://juejin.cn/post/7104301566857445412)。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204\345\215\225\351\241\265\345\272\224\347\224\250.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204\345\215\225\351\241\265\345\272\224\347\224\250.md"
new file mode 100644
index 0000000..10010b3
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204\345\215\225\351\241\265\345\272\224\347\224\250.md"
@@ -0,0 +1,70 @@
+# 实现一个简单的单页应用
+
+本文实现的单页应用很简单。
+
+一段简单 HTML 结构：
+
+```html
+<main>这是一个简单的单页应用示例</main>
+<ul>
+  <li><a href="/">Home</a></li>
+  <li><a href="/about">About</a></li>
+  <li><a href="/contact">Contact</a></li>
+</ul>
+```
+
+首先，我们将每个不同路线的网站标题和内容存储在一个名为 `pages` 的对象中：
+
+```js
+const pages = {
+  '/': {
+    title: 'Home',
+    content: `<h1>欢迎来到我的网站！</h1>
+      <p>这是我的网站主页</p>
+      <h2>相关链接</h2>`
+  },
+  '/about': {
+    title: 'About',
+    content: `<h1>关于我</h1>
+      <p>我喜欢吃吃喝喝！</p>
+      <h2>相关链接</h2>`
+  },
+  '/contact': {
+    title: 'Contact',
+    content: `<h1>联系我</h1>
+      <p>我可以通过 email 联系到我</p>
+      <h2>相关链接</h2>`
+  }
+}
+```
+
+然后，在页面加载时执行以下操作：
+
+- 获取当前路径名（例如 `/`、`/about`、`/contact`）
+- 根据路径名将 `main` 元素的 `innerHTML` 设置为正确的内容
+- 根据路径名设置文档标题
+
+我们使用 `window.location.pathname` 访问当前路径。接着，我们根据 `pages` 对象设置 `main` 元素的 `innerHTML` 属性和 `document.title` 属性。
+
+```js
+const path = window.location.pathname
+document.querySelector('main').innerHTML = pages[path].content
+document.title = pages[path].title
+```
+
+每次我们点击一个链接，我们都会向服务器发送一个请求，并得到相同的响应。我们需要防止链接执行 GET 请求，而是直接在视图中操作 HTML：
+
+```js
+const links = document.querySelectorAll('a')
+links.forEach((link) => {
+  link.addEventListener('click', (e) => {
+    e.preventDefault()
+    const path = e.target.pathname
+    window.history.pushState({}, pages[path].title, path)
+    document.querySelector('main').innerHTML = pages[path].content
+    document.title = pages[path].title
+  })
+})
+```
+
+以上代码中，我们为文档中的每个链接添加了一个事件监听器。使用 `preventDefault` 阻止链接的默认操作。相反，它从目标锚点元素获取路径名，使用 [`window.history.pushState`](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) 来更改 URL，然后执行与加载时执行的代码相同的 `innerHTML` 和 `title` 更改内容。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md"
new file mode 100644
index 0000000..3062ecd
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204\345\217\214\345\220\221\346\225\260\346\215\256\347\273\221\345\256\232.md"
@@ -0,0 +1,180 @@
+# 实现一个简单的双向数据绑定
+
+双向数据绑定是使用 Vue 构建 JavaScript 表单的强大模式。
+
+例如，假设您有一个 `input` 元素和一个 JavaScript 变量 `value`。双向数据绑定意味着：
+
+- 当用户键入 `input` 时，`value` 将被更新以匹配 `input` 中的值。
+- 更新 `value` 时，`input` 元素的内容将更新以匹配 `value`。
+
+Vue 通过 `v-model` 属性支持双向数据绑定。例如：
+
+```html
+<template>
+  <input v-model="value" />
+  <button @click="value = 'Hello Vue'">Reset</button>
+</template>
+
+<script>
+  export default {
+    data() {
+      return { value: 'Hello Vue' }
+    }
+  }
+</script>
+```
+
+## 原理
+
+要实现一个双向绑定，我们需要了解以下几点。
+
+### MVVM
+
+Vue 的双向数据绑定（MVVM）由三个重要部分构成：
+
+- Model 代表数据层，可定义修改数据和编写业务逻辑。
+- View 代表视图层（UI 组件），负责将数据渲染成页面。
+- ViewModel 负责监听数据层数据变化，控制视图层行为交互。简单讲，就是同步数据层和视图层的对象。ViewModel 通过双向绑定把 View 和 Model 层连接起来，且同步工作无需人为干涉，使开发人员只关注业务逻辑，无需频繁操作 DOM，不需关注数据状态的同步问题。
+
+> 很像面试总结说法，大概了解即可。
+
+重点理解 ViewModel，它的主要职责是：
+
+- 数据变化更新视图
+- 视图变化更新数据
+
+以下是 Vue 官网提供的 MVVM 示例图：
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-f0c1e01261ae2f2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+通过 MVVM 示例图，我们可以清晰的看到，Vue ViewModel 通过 DOM 监听和指令来实现。
+
+具体的说，Vue 内部在实现 ViewModel 层上，分为两部分：
+
+- 监听器（Observer）— 对所有数据的属性进行监听
+- 解析器（Compiler）— 对每个元素节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数
+
+### 指令
+
+Vue 指令数据绑定有两种：
+
+- 双向绑定的 `v-model`
+- 单向绑定的 `:value`
+
+而 Vue `v-model` 指令其实是**属性 + 事件**的语法糖。
+
+简单的说，双向绑定由两个单向绑定组成：
+
+- 模型 —> 视图数据绑定
+- 视图 —> 模型事件绑定
+
+![图片](https://upload-images.jianshu.io/upload_images/18281896-36fff6708a64ec88.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+通过 `:value` 实现了**模型到视图**的数据绑定，`@event` 实现了**视图到模型**的事件绑定：
+
+```html
+<input :value="searchText" @input="searchText = $event.target.value" />
+<!-- 等同于 -->
+<input v-model="searchText" />
+```
+
+其他的表单元素绑定如下：
+
+- `input` 元素若是 `text / textarea` 类型，使用 `value` 属性和 `input` 事件。
+- `input` 元素若是 `radio / checkbox` 类型，使用 `checked` 属性和 `change` 事件。
+- `select` 元素使用 `value` 属性和 `change` 事件。
+
+### Object.defineProperty 和 Proxy
+
+最后一点，就是实现响应式数据基础了。
+
+Vue 2.x 基于 `Object.defineProperty` 实现响应式系统，而 Vue 3 使用 Proxy。
+
+这里就有个问题，Vue 为什么从 `Object.defineProperty` 替换为 Proxy？
+
+可以从优缺点入手。
+
+替换掉 `Object.defineProperty` 肯定是它有一些缺点：
+
+- 无法监听数组下标的变化，导致通过数组下标添加元素，无法实时响应
+- 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历，显然能劫持一个完整的对象是更好的选择
+
+Proxy 的优势就是为了解决 `Object.defineProperty` 的一些劣势，除此之外：
+
+- Proxy 可以直接监听数组的变化。
+- Proxy 有多达 13 种拦截方法，不限于 `apply`、`ownKeys`、`deleteProperty`、`has` 等，这些是 `Object.defineProperty` 不具备的。
+- Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的。而 `Object.defineProperty` 只能遍历对象属性直接修改。
+- Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是新标准的性能红利。
+- 当然，Proxy 的劣势就是兼容性问题，而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本（3.0）才能用 Proxy 重写。
+
+关于 Proxy 和 Reflect 还有不认识的可以看看阮一峰老师的 [Proxy](https://es6.ruanyifeng.com/#docs/proxy) 和 [Reflect](https://es6.ruanyifeng.com/#docs/reflect)，也可以看看现代 JavaScript 教程的 [Proxy 和 Reflect](https://zh.javascript.info/proxy)。
+
+## 实现
+
+一个需要绑定的 `input` 标签和用于显示数据的 `span` 标签：
+
+```html
+<input id="input" /> <span id="span"></span>
+```
+
+Vue 2.x 使用 ES5 `Object.defineProperty`：
+
+```js
+const input = document.getElementById('input')
+const span = document.getElementById('span')
+const obj = {}
+
+// 数据劫持
+Object.defineProperty(obj, 'text', {
+  get() {
+    console.log('获取数据')
+  },
+  set(value) {
+    console.log('数据更新')
+    span.textContent = value
+    this.value = value
+  }
+})
+
+// 监听
+input.addEventListener('input', (e) => {
+  obj.text = e.target.value
+})
+```
+
+Vue 3 使用 ES6 Proxy，它可以直接劫持整个对象，并返回一个新对象，不管是操作便利程度还是底层功能上都比 `Object.defineProperty` 强。
+
+```js
+const input = document.getElementById('input')
+const span = document.getElementById('span')
+const obj = {}
+
+// 数据劫持
+const ret = new Proxy(obj, {
+  get(target, key, receiver) {
+    console.log(target, key, receiver)
+    return Reflect.get(target, key, receiver)
+  },
+  set(target, key, value, receiver) {
+    console.log(target, key, value, receiver)
+    if (key === 'text') {
+      input.value = value
+      span.textContent = value
+    }
+    return Reflect.set(target, key, value, receiver)
+  }
+})
+
+// 监听
+input.addEventListener('input', (e) => {
+  ret.text = e.target.value
+})
+```
+
+以上是极简的双向数据绑定的示例。
+
+更具体的实现，后面有空在写一写。
+
+## 更多资料
+
+[Vue 3.0 进阶之双向绑定探秘](https://mp.weixin.qq.com/s?__biz=MzI2MjcxNTQ0Nw==&mid=2247489877&idx=1&sn=44628bcb710cf1a3b34f83ad3b36f557&chksm=ea47b80ddd30311bae0fa0ade7df1fd8bafe2605c85579590fb53e546484e0de2ef2b1e9c64c&scene=178&cur_album_id=1742489947426652164#rd)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\262\276\347\256\200\347\211\210\347\232\204 Redux.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\262\276\347\256\200\347\211\210\347\232\204 Redux.md"
new file mode 100644
index 0000000..3f48a86
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\344\270\200\344\270\252\347\262\276\347\256\200\347\211\210\347\232\204 Redux.md"	
@@ -0,0 +1,173 @@
+# 实现一个精简版的 Redux
+
+## Redux 的作用？
+
+在开始之前，有必要了解一下 Redux 的作用。
+
+[Redux](https://redux.js.org/) 是一个状态管理库（与 [Vuex](https://vuex.vuejs.org/index.html) 和 [Pinia](https://pinia.vuejs.org/) 类似）。它可以帮助您管理应用程序中的有状态信息。“有状态信息”只是一种花哨的说法，表示在应用程序使用期间需要持久保存并可用的信息。例如：用户名或应用程序是处于 `light` 模式还是 `dark` 模式等。（下面我们也会用到这个示例）
+
+当您需要管理大型项目时，像 Redux 这样的状态管理库变得特别有用。许多人认为 Redux 是 React 的一部分或与 React 明确关联，但实际上它是自己的独立库，可以与 React 一起使用，也可以不使用 React。
+
+## Redux 的基本原理
+
+Redux 背后的基本思想是，您对状态信息有一个集中管理的位置，并且可以预测地更新状态。为此，Redux 具有以下基本结构：
+
+- **state 对象** - `state` 对象包含应用程序的有状态信息。
+- **action** - `action` 是为 Redux 提供更新状态所需信息的对象。按照约定，一个 `action` 对象可以具有 `type` 和 `payload` 属性。例如：如果您想将用户名设置为 `O.O`，则操作可能是 `{ action: 'SET_USER_NAME', payload: 'O.O' }`。
+- **reducer** - `reducer` 是一个函数。它可以传入两个参数：**当前状态 `state` 对象和 `action` 对象**（如上所述）。reducer 使用 `action` 对象中提供的信息以及状态的当前版本，并返回状态的新版本。
+- **store** - `store` 是一个对象，具有两个属性，且两者都是函数：`getState` 和 `dispatch`。`getState` 允许您访问最新的状态，`dispatch` 允许您调度 `action` 以更新该状态。
+
+记住它们，下面我们会用到！
+
+## React 最大的问题
+
+Redux 最大的批评之一是它的学习曲线陡峭。但也不必过于担心，相信通过本文实现自己精简版的 Redux 后，您对上面提到的这几个概念和 Redux 的工作方式都会有一定程度的了解。
+
+## 实现自己的 Redux
+
+如果您使用过 Redux，那么您会知道通常使用库提供的 `createStore` 函数来创建 `store`。我们需要自己写一个！
+
+如上所述，我们的 `store` 允许我们使用 `getState` 函数访问 `state` 对象。它还允许我们调度 `action` 更新状态。让我们基于这些知识创建一个 `createStore` 函数。
+
+```js
+function createStore() {
+  let state = {}
+  function getState() {
+    return state
+  }
+
+  function dispatch(action) {
+    // 基于 action 设置状态
+  }
+
+  return { getState, dispatch }
+}
+```
+
+这是一个很好的开始！让我们做一些改进。首先，我们并不总是希望初始 `state` 为空对象 `{}`。相反，我们将让 `createStore` 接受一个名为 `initialState`（初始状态）的参数。
+
+接下来，我们的 `dispatch` 函数必须对与我们传递给它的 `action` 关联，以便更新我们的状态。如上所述，`reducer` 满足此需求：
+
+> `reducer` 是一个函数。它可以传入两个参数：**当前状态 `state` 对象和 `action` 对象**。reducer 使用 `action` 对象中提供的信息以及状态的当前版本，并返回状态的新版本。
+
+因此，让我们将当前 `state` 对象与 `action` 一起传递给 `reducer`，并赋值给 `state` 变量。
+
+以下是我们实现的两项改进：
+
+```js
+function createStore(reducer, initialState) {
+  let state = initialState
+  function getState() {
+    return state
+  }
+
+  function dispatch(action) {
+    state = reducer(state, action)
+  }
+
+  return { getState, dispatch }
+}
+```
+
+这就是我们简化的 `createStore` 函数！更有经验的 Redux 用户可能会注意到，我们从 `createStore` 中省略了第三个参数。当您进入更高级的 Redux 时，这个参数变得很重要，但对于核心原则，我们仅使用前两个参数！
+
+在使用 `createStore` 函数之前，我们需要一个 `reducer`。
+
+这里我们创建一个 `reducer`，它可以设置用户名或亮/暗模式。
+
+正如我们所讨论的，我们的 `reducer` 函数将当前 `state` 和 `action` 作为参数，并返回最新的 `state`。
+
+```js
+function reducer(state, action) {
+  switch (action.type) {
+    case 'SET_USER_NAME':
+      return {
+        ...state,
+        name: action.payload
+      }
+    case 'SET_DISPLAY_MODE':
+      return {
+        ...state,
+        displayMode: action.payload
+      }
+    default:
+      return state
+  }
+}
+```
+
+让我们剖析一下我们在这里所做的事情。
+
+我们的 `reducer` 接受 `state` 和 `action` 参数。我们有一个 `switch` 语句，它将根据 `action.type` 的值返回不同的内容（请记住，按照我们之前的讨论，我们的 `action` 对象具有 `type` 和 `payload`）。
+
+如果 `action.type` 是 `'SET_USER_NAME'`，则返回状态的副本，并用提供的 `action.payload` 覆盖状态的 `name` 键。相反，如果 `action.type` 为 `'SET_DISPLAY_MODE'`，则返回状态的副本，但覆盖 `displayMode` 键。如果 `action.type` 不是这两个字符串之一，我们将返回未修改的状态。
+
+> 可以将 reducer 看做一个状态机，**其中当前状态和分派操作的组合决定了是否实际计算了一个新的状态值**，而不是无条件地只计算了操作本身。这里涉及到了[有限状态机](https://en.wikipedia.org/wiki/Finite-state_machine)（Finite-state_machine），这里不详细介绍。如果您感兴趣，推荐阅读阮一峰老师的 [JavaScript 与有限状态机](https://www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html)。
+
+这几乎就是我们所需要的，当然，这不是 redux 的全部，它还有 `Provider`、`connect` 等。
+
+我们现在可以使用我们实现的 Redux 进行测试！
+
+```js
+function createStore(reducer, initialState) {
+  let state = initialState
+  function getState() {
+    return state
+  }
+
+  function dispatch(action) {
+    state = reducer(state, action)
+  }
+
+  return { getState, dispatch }
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'SET_USER_NAME':
+      return {
+        ...state,
+        name: action.payload
+      }
+    case 'SET_DISPLAY_MODE':
+      return {
+        ...state,
+        displayMode: action.payload
+      }
+    default:
+      return state
+  }
+}
+
+const initialState = { name: 'Test', displayMode: 'light' }
+const store = createStore(reducer, initialState)
+
+console.log(store.getState()) // { name: 'Test', displayMode: 'light' }
+
+store.dispatch({
+  type: 'SET_USER_NAME',
+  payload: 'O.O'
+})
+
+console.log(store.getState()) // { name: 'O.O', displayMode: 'light' }
+
+store.dispatch({
+  type: 'SET_DISPLAY_MODE',
+  payload: 'dark'
+})
+
+console.log(store.getState()) // { name: 'O.O', displayMode: 'dark' }
+```
+
+## 最后
+
+现在，我们有了这个 `store` 对象，它可以实现我们想要的一切：
+
+- 我们有一种集中式的方式来访问有状态信息（通过调用 `store.getState()`）
+- 通过调度操作（通过调用 `store.dispatch(action)`），我们有了一种可重复、可预测的方式来更新有状态信息。
+
+## 更多资料
+
+- [Build Yourself a Redux](https://zapier.com/engineering/how-to-build-redux/)
+- [Let’s Write Redux!](https://www.jamasoftware.com/blog/lets-write-redux/)
+- [Redux: Implementing Store from Scratch](https://egghead.io/lessons/react-redux-implementing-store-from-scratch)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\346\225\260\347\273\204\346\264\227\347\211\214\345\207\275\346\225\260.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\346\225\260\347\273\204\346\264\227\347\211\214\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..999ca67
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\345\256\236\347\216\260\346\225\260\347\273\204\346\264\227\347\211\214\345\207\275\346\225\260.md"
@@ -0,0 +1,35 @@
+# 实现数组洗牌函数
+
+我们可能最常使用打乱数组顺序的方法是 `Array.prototype.sort`：
+
+```js
+const shuffle = (list) => list.sort(() => Math.random() - 0.5)
+```
+
+你可能会想，通过多次调用以上方法应该可以使数组变得更乱，但很遗憾，这种方法不是完全随机的。详情请看：[关于 JavaScript 的数组随机排序](https://oldj.net/article/2017/01/23/shuffle-an-array-in-javascript/)。
+
+一种经典的 [Fisher-Yates Shuffling](https://www.wikiwand.com/en/Fisher%E2%80%93Yates_shuffle) 算法可以对数组进行随机排序。
+
+**原理**：通过循环（循环次数由数组长度决定），将当前元素与之后随机位置的元素进行交换。
+
+```js
+function shuffle(arr) {
+  let currentIndex = arr.length,
+    randomIndex
+  while (currentIndex) {
+    randomIndex = Math.floor(Math.random() * currentIndex--)
+    ;[arr[randomIndex], arr[currentIndex]] = [arr[currentIndex], arr[randomIndex]]
+  }
+  return arr
+}
+
+const list = [1, 2, 3, 4, 5, 6, 7, 8]
+shuffle(list)
+```
+
+JS 有很多工具库使用到了这种算法，例如 Lodash 和 Underscore 的 `_.shuffle(collection)` 方法。
+
+## 更多资料
+
+- [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)
+- [JavaScript 专题之乱序](https://github.com/mqyqingfeng/Blog/issues/51)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\346\236\204\345\273\272\344\270\200\344\270\252\350\231\232\346\213\237 DOM.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\346\236\204\345\273\272\344\270\200\344\270\252\350\231\232\346\213\237 DOM.md"
new file mode 100644
index 0000000..b10d831
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\346\236\204\345\273\272\344\270\200\344\270\252\350\231\232\346\213\237 DOM.md"	
@@ -0,0 +1,304 @@
+# 构建一个虚拟 DOM
+
+> 本文译自 [How to write your own Virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060)，为了更好的理解 Virtual DOM 的基本概念，不增加其复杂性，它并没有设置 `props`、处理事件等，如果想要了解这些内容，可以查看第二部分 [Write your Virtual DOM 2: Props & Events](https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76)。
+
+构建自己的虚拟 DOM 需要了解两件事。
+
+- 虚拟 DOM 是真实 DOM 的任何一种表示形式
+- 当我们在虚拟 DOM 树中更改某些内容时，我们会得到一个新的虚拟树。diff 算法比较这两种树（旧树和新树），找出差异，并且只对真实 DOM 进行必要的小改动，以反映虚拟 DOM。
+
+## DOM 树
+
+首先，我们需要以某种方式将 DOM 树存储在内存中。我们可以用普通的 JS 对象来实现这一点。假设我们有这样一棵树：
+
+```html
+<ul class="list">
+  <li>item 1</li>
+  <li>item 2</li>
+</ul>
+```
+
+用 JS 来表示如下：
+
+```js
+{
+  type: 'ul',
+  props: { class: 'list' },
+  children: [
+    { type: 'li', props: {}, children: ['item 1'] },
+    { type: 'li', props: {}, children: ['item 2'] }
+  ]
+}
+```
+
+在这里你可以注意到两件事：
+
+- 我们用如下对象表示 DOM 元素（这不是固定的，但通常如此）
+
+```js
+{ type: '...', props: { ... }, children: [ ... ] }
+```
+
+- 我们用纯 JS 字符串表示 DOM 文本节点
+
+但以这种方式书写大树是相当困难的。所以我们需要编写一个辅助函数，这样我们就可以更容易理解它的结构：
+
+```js
+function h(type, props, ...children) {
+  return { type, props, children }
+}
+```
+
+现在我们可以这样编写 DOM 树：
+
+```js
+h('ul', { class: 'list' }, h('li', {}, 'item 1'), h('li', {}, 'item 2'))
+```
+
+这样看起来就干净很多了。但我们还可以走的更远，**你听说过 JSX 吗？**
+
+如果你[在这里](https://babeljs.io/docs/plugins/transform-react-jsx/)阅读官方 Babel JSX 文档，你就会知道，Babel 会转译这段代码：
+
+```html
+<ul className="list">
+  <li>item 1</li>
+  <li>item 2</li>
+</ul>
+```
+
+变成这样：
+
+```jsx
+React.createElement(
+  'ul',
+  { className: 'list' },
+  React.createElement('li', {}, 'item 1'),
+  React.createElement('li', {}, 'item 2')
+)
+```
+
+**注意到任何相似之处吗？**如果我们可以用我们的 `h(...)` 调用替换那些 `React.createElement(...)`，事实证明我们可以 — 通过使用 **jsx pragma**。我们只需要在源文件的顶部包含类似注释行：
+
+```jsx
+/** @jsx h */
+
+<ul className=”list”>
+  <li>item 1</li>
+  <li>item 2</li>
+</ul>
+```
+
+它实际上告诉 Babel，转译 jsx 而不是 `React.createElement`，为每个节点调用 `h` 函数。你可以用任何东西来代替 `h`，这将被转译。
+
+因此，总结我之前所说的，我们将这样编写我们的 DOM：
+
+```jsx
+/** @jsx h */
+
+const a = (
+  <ul className='list'>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ul>
+)
+```
+
+这将由 Babel 转换为以下代码：
+
+```jsx
+const a = h(
+  'ul',
+  { className: 'list' },
+  h('li', {}, 'item 1'),
+  h('li', {}, 'item 2')
+)
+```
+
+当函数 `h` 执行时，它将返回纯 JS 对象，我们的虚拟 DOM 表示如下：
+
+```js
+const a = {
+  type: 'ul',
+  props: { className: 'list' },
+  children: [
+    { type: 'li', props: {}, children: ['item 1'] },
+    { type: ' li', props: {}, children: ['item 2'] }
+  ]
+}
+```
+
+> Chris Coyier 在 [Messing with JSX](https://css-tricks.com/video-screencasts/199-messing-with-jsx/) 也介绍了这种用法。
+
+## 应用 DOM 表示
+
+我们已经将 DOM 树表示为普通的 JS 对象，并具有了一个清晰的结构。
+
+接下来，我们需要以某种方式从中创建一个真实的 DOM。因为我们不能只是将我们的虚拟 DOM 表示附加到 DOM 中。
+
+在开始之前，我们需要先说明一些事情：
+
+- 我将使用以 `$` 开头的真实 DOM 节点（元素，文本节点）编写所有变量，所以 `$parent` 将是真实的 DOM 元素
+- 虚拟 DOM 表示将在名为 `node` 的变量中
+- 和 React 一样，你只能有一个根节点，所有其他节点都在里面
+
+这里，我们编写一个函数 `createElement(...)`，它将获取一个虚拟 DOM 节点并返回一个真实的 DOM 节点：
+
+```js
+function createElement(node) {
+  if (typeof node === 'string') {
+    return document.createTextNode(node)
+  }
+  return document.createElement(node.type)
+}
+```
+
+因为我们可以有两个文本节点，即纯 JS 字符串和元素，它们都是 JS 对象类型，比如：
+
+```js
+{ type: '...', props: { ... }, children: [ ... ] }
+```
+
+因此，我们可以在这里传递虚拟文本节点和虚拟元素节点，这将起作用。
+
+现在让我们考虑子节点，它们中的每一个也是文本节点或元素。所以也可以用 `createElement(...)` 函数来创建。
+
+所以，我们可以为每个元素的子元素递归调用 `createElement(...)`，然后将它们 `appendChild()` 到我们的元素中，如下所示：
+
+```js
+function createElement(node) {
+  if (typeof node === 'string') {
+    return document.createTextNode(node)
+  }
+  const $el = document.createElement(node.type)
+  node.children.map(createElement).forEach($el.appendChild.bind($el))
+  return $el
+}
+```
+
+效果如下：
+
+![转为真实 DOM](https://upload-images.jianshu.io/upload_images/18281896-e2d321255bdc5f5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 处理变化
+
+现在我们可以把虚拟 DOM 变成真正的 DOM，是时候考虑区分我们的虚拟树了。我们需要编写一个算法，它将比较两个虚拟树（新旧树），并只对真实 DOM 进行必要的更改。
+
+**如何区分树？**往下看一些示例：
+
+- 没有旧节点，添加了新节点，我们需要 `appendChild(...)`
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-b008ea0d2a03d845.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+- 没有新节点，因此旧节点需要被删除，我们需要 `removeChild(...)`
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-589b268386db6996.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+- 有一个不同的节点，因此节点发生了变化，我们需要 `replaceChild(...)`
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-2f7513ec4cad719a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+- 节点是相同的，所以我们需要更深入地区分子节点
+
+![image.png](https://upload-images.jianshu.io/upload_images/18281896-40cb86119e36240e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+让我们编写一个名为 `updateElement(...)` 的函数，它接受三个参数：`$parent`、`newNode` 和 `oldNode`，其中 `$parent` 是一个真实的 DOM 元素，是虚拟节点的父元素。现在我们将了解如何处理上述所有情况。
+
+### 没有旧节点
+
+没有旧节点时，添加新节点：
+
+```js
+function updateElement($parent, newNode, oldNode) {
+  if (!oldNode) {
+    $parent.appendChild(createElement(newNode))
+  }
+}
+```
+
+这个很简单，不需要过多的解释。
+
+### 没有新节点
+
+这里我们有一个问题，如果在新的虚拟树的当前位置没有节点，我们应该从真实的 DOM 中删除它，但我们应该怎么做?
+
+是的，我们知道父元素，因此我们应该调用 `$parent.removechild(...)`，并在那里传递真正的 DOM 元素引用。
+
+但我们没有。如果我们知道我们的节点在 `parent` 中的位置，我们就可以通过 `$parent.childNodes[index]` 获取它的引用。其中 `index` 是节点在父元素中的位置。
+
+```js
+function updateElement($parent, newNode, oldNode, index = 0) {
+  if (!oldNode) {
+    $parent.appendChild(createElement(newNode))
+  } else if (!newNode) {
+    $parent.removeChild($parent.childNodes[index])
+  }
+}
+```
+
+### 节点已更改
+
+首先，我们需要编写一个函数来比较两个节点（旧节点和新节点），并告诉我们节点是否真的发生了变化。我们应该考虑它既可以是元素也可以是文本节点：
+
+```js
+function changed(node1, node2) {
+  return (
+    typeof node1 !== typeof node2 ||
+    (typeof node1 === 'string' && node1 !== node2) ||
+    node1.type !== node2.type
+  )
+}
+```
+
+现在，有了当前节点在父节点中的索引，我们可以很容易地用新创建的节点替换它：
+
+```js
+function updateElement($parent, newNode, oldNode, index = 0) {
+  if (!oldNode) {
+    $parent.appendChild(createElement(newNode))
+  } else if (!newNode) {
+    $parent.removeChild($parent.childNodes[index])
+  } else if (changed(newNode, oldNode)) {
+    $parent.replaceChild(createElement(newNode), $parent.childNodes[index])
+  }
+}
+```
+
+### 不同的 children
+
+最后，但并非最不重要的是，我们应该遍历这两个节点的每一个子节点并对它们进行比较，实际上为它们分别调用 `updateElement(...)`。是的，再次递归。
+
+但是在编写代码之前，有一些事情需要考虑：
+
+- 只有当节点是元素时才应该比较子节点（文本节点不能有子节点）
+- 现在我们将当前节点的引用作为父节点传递
+- 我们应该逐个比较所有的子项，即使在某些时候我们会有 `undefined`，这没关系，我们的函数可以处理这一点
+- 最后 `index` 是 `children` 数组中子节点的索引
+
+```js
+function updateElement($parent, newNode, oldNode, index = 0) {
+  if (!oldNode) {
+    $parent.appendChild(createElement(newNode))
+  } else if (!newNode) {
+    $parent.removeChild($parent.childNodes[index])
+  } else if (changed(newNode, oldNode)) {
+    $parent.replaceChild(createElement(newNode), $parent.childNodes[index])
+  } else if (newNode.type) {
+    const newLength = newNode.children.length
+    const oldLength = oldNode.children.length
+    for (let i = 0; i < newLength || i < oldLength; i++) {
+      updateElement(
+        $parent.childNodes[index],
+        newNode.children[i],
+        oldNode.children[i],
+        i
+      )
+    }
+  }
+}
+```
+
+以上就是虚拟 DOM 的实现。
+
+当然以上内容没有考虑很多情况，如果需要了解它们，可以阅读 [vue-design](https://github.com/HcySunYang/vue-design) 的 Vue 的渲染器部分。
+
+> 点击此处[查看示例](https://jsfiddle.net/deathmood/0htedLra/)
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\346\236\204\345\273\272\346\250\241\345\235\227\346\211\223\345\214\205\345\231\250.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\346\236\204\345\273\272\346\250\241\345\235\227\346\211\223\345\214\205\345\231\250.md"
new file mode 100644
index 0000000..8038e96
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\346\236\204\345\273\272\346\250\241\345\235\227\346\211\223\345\214\205\345\231\250.md"
@@ -0,0 +1,242 @@
+# 构建模块打包器
+
+本文的模块打包器来自示例 [Minipack](https://github.com/ronami/minipack)，我们将来了解它是如何一步步实现的。
+
+首先，我们先来了解实现一个模块打包器所需要依赖的 babel 插件：
+
+- [`@babel/traverse`](https://www.npmjs.com/package/@babel/traverse) — 维护整个树的状态，负责替换、删除和添加节点。
+- [`@babel/core`](https://www.npmjs.com/package/@babel/core) — Babel 编译器核心。
+- [`@babel/parser`](https://www.npmjs.com/package/@babel/parser) — Babel 中使用的 JavaScript 解析器。
+- [`@babel/preset-env`](https://www.npmjs.com/package/@babel/preset-env) — 每个环境的 Babel 预设。可根据目标浏览器或运行时环境自动确定所需的 Babel 插件和 polyfills，从而将 ES6+ 编译至 ES5。
+
+> 我们替换了该示例的旧的，已经被并入 babel 内的插件。
+
+构建一个简单的模块打包器只需要三个步骤：
+
+- 利用 babel 完成代码转换，并生成单个文件的依赖
+- 生成依赖图谱
+- 生成最后打包代码
+
+## 转换代码、生成依赖
+
+首先，我们创建一个 `createAsset()` 函数，该函数将接受 `filename` 参数（文件路径），读取内容并提取它的依赖关系。
+
+```js
+const fs = require('fs')
+
+function createAsset(filename) {
+  const content = fs.readFileSync(filename, 'utf-8')
+}
+```
+
+我们使用 `fs.readFileSync` 读取文件，并返回文件内容。
+
+根据其内容，我们可以获取到 `import` 字符串（依赖的文件）。
+
+下面，我们将用到 JavaScript 解析器 — `@babel/parser`，它是读取和理解 JavaScript 代码的工具。它生成一个更抽象的模型，称为 AST（抽象语法树）。
+
+AST 包含很多关于我们代码的信息。我们可以打印它了解我们的代码正在尝试做什么。
+
+```js
+const parser = require('@babel/parser')
+
+function createAsset(filename) {
+  // ...
+  const ast = parser.parse(content, {
+    sourceType: 'module' // 识别 ES 模块
+  })
+
+  console.log(ast)
+}
+```
+
+接下来，我们遍历 AST 来试着理解这个模块依赖哪些模块。
+
+```js
+const traverse = require('@babel/traverse').default
+
+function createAsset(filename) {
+  // ...
+  // 存放模块的相对路径
+  const dependencies = []
+
+  traverse(ast, {
+    // 获取通过 import 引入的模块
+    ImportDeclaration({ node }) {
+      // 保存所依赖的模块
+      dependencies.push(node.source.value)
+    }
+  })
+}
+```
+
+我们知道 ES 模块是静态的，这意味着你不能 `import` 一个变量，或者有条件地 `import` 另一个模块。每当我们看到 `import` 语句时，我们就可以把它的值算作一个依赖。
+
+我们还通过增加一个简单的计数器为这个模块分配一个唯一的标识符：
+
+```js
+let ID = 0
+
+function createAsset(filename) {
+  // ...
+  const id = ID++
+}
+```
+
+我们使用 ES 模块和其他 JavaScript 功能，可能不支持所有浏览器。
+
+为了确保我们的 `bundle` 在所有浏览器中运行，我们将使用 [babel](https://babeljs.io) 核心库 `@babel/core` 来编译它。
+
+```js
+const { transformFromAst } = require('@babel/core')
+
+function createAsset(filename) {
+  // ...
+  const { code } = transformFromAst(ast, null, {
+    presets: ['@babel/preset-env']
+  })
+
+  return {
+    id,
+    filename,
+    dependencies,
+    code
+  }
+}
+```
+
+`presets` 选项是一组规则，告诉 `babel` 如何传输我们的代码。
+
+它内部使用 `babel-preset-env` 包将我们的代码转换为浏览器可以运行的东西。
+
+最后，我们返回有关此模块的所有信息。
+
+- `id` — 模块的唯一 ID
+- `filename` — 模块的相对文件路径
+- `dependencies` — 当前模块的依赖模块，如果没有，返回空数组 `[]`
+- `code` — 模块编译后的代码
+
+## 生成依赖图谱
+
+现在我们可以提取单个模块的依赖关系，我们将从 `entry` 入口文件的依赖关系开始。
+
+我们将提取它的每一个依赖关系的依赖关系，依次循环，直到我们了解应用程序中的每个模块以及它们如何相互依赖。这个项目的理解被称为依赖图谱。
+
+首先，我们编写一个 `createGraph()` 函数，传入入口文件，并解析整个文件。
+
+```js
+function createGraph(entry) {
+  const mainAsset = createAsset(entry)
+
+  const queue = [mainAsset]
+}
+```
+
+上面代码中，我们还定义一个只有入口资源的 `queue` 数组，它用来解析每个资源的依赖关系。
+
+使用一个 `for ... of` 循环遍历 `queue`。
+
+最初 `queue` 只有一个资源，但是当我们迭代它时，我们会将额外的新资源，推入 `queue` 中。
+
+```js
+const path = require('path')
+function createGraph(entry) {
+  // ...
+
+  for (const asset of queue) {
+    // 存放依赖模块和对应的唯一 ID
+    asset.mapping = {}
+    // 模块所在的目录
+    const dirname = path.dirname(asset.filename)
+    // 遍历其相关路径的列表，获取它们的依赖关系
+    asset.dependencies.forEach((relativePath) => {
+      // createAsset 需要一个绝对路径，但该依赖关系保存了一个相对路径的数组，这些路径相对于它们的文件
+      // 我们可以通过将相对路径与父资源目录的路径连接，将相对路径转变为绝对路径
+      const absolutePath = path.join(dirname, relativePath)
+      // 解析资源，读取其内容并提取其依赖关系
+      const child = createAsset(absolutePath)
+      // 了解 asset 依赖取决于 child 这一点对我们来说很重要
+      // 通过给 asset.mapping 对象增加一个新的属性 child.id 来表达这种一一对应的关系
+      asset.mapping[relativePath] = child.id
+      // 最后，我们将 child 这个资源推入 queue，这样它的依赖关系也将被迭代和解析
+      queue.push(child)
+    })
+  }
+
+  return queue
+}
+```
+
+到这一步，`queue` 就是一个包含目标应用中每个模块的数组，这就是我们的依赖关系图谱。
+
+## 生成 bundle
+
+最后一步，我们定义一个 `bundle` 函数，它将使用我们的 `graph`，并返回一个可以在浏览器中运行的包。
+
+```js
+function bundle(graph) {
+  let modules = ''
+
+  graph.forEach((mod) => {
+    modules += `${mod.id}: [
+      function (require, module, exports) { ${mod.code} },
+      ${JSON.stringify(mod.mapping)},
+    ],`
+  })
+}
+```
+
+`graph` 中的每个模块在这个对象中都有一个`entry`（也就是 `filename`）。我们使用模块的 `id` 作为 `key` 和一个数组作为 `value`（用数组因为我们在每个模块中有 2 个值）。
+
+- 第一个值是用函数包装的每个模块的代码。这是因为模块应该被限定范围：在一个模块中定义变量不会影响其他模块或全局范围。我们的模块在我们将它们被 babel 转译后，使用 CommonJS 模块系统：它们期望 `require`、`module` 和 `exports` 对象可用。而这些方法在浏览器中通常不可用，所以我们将它们实现并将它们注入到函数包装中。
+- 对于第二个值，我们用 `stringify` 解析模块及其依赖之间的关系（也就是上文的 `asset.mapping`）。解析后的对象看起来像这样：`{'./relative/path': 1}`。这是因为我们的模块被转换后会通过相对路径来调用 `require()`。当调用这个函数时，我们应该能够知道依赖图谱中的哪个模块对应于该模块的相对路径。
+
+> 推荐：阮一峰老师的[浏览器加载 CommonJS 模块的原理与实现](https://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html)。
+
+接着，创建一个 IIFE 自执行函数。其中，创建一个 `require()` 函数：它接受一个模块 `ID`，并在我们之前构建的 `modules` 对象查找它。
+
+```js
+function bundle(graph) {
+  // ...
+  const result = `
+    (function(modules) {
+      function require(id) {
+        const [fn, mapping] = modules[id];
+        function localRequire(name) {
+          return require(mapping[name]);
+        }
+        const module = { exports : {} };
+        fn(localRequire, module, module.exports);
+        return module.exports;
+      }
+      require(0);
+    })({${modules}})
+    `
+  // 返回最终结果
+  return result
+}
+```
+
+通过解构 `const [fn, mapping] = modules[id]` 来获得我们的包装函数和 `mappings` 对象。
+
+我们模块的代码使用相对文件路径而不是模块 ID 调用 `require()`。但我们的 `require` 函数接收模块 ID。此外，两个模块可能 `require()` 具有相同的相对路径，但表示两个不同的模块。
+
+为了解决这个问题，当需要一个模块时，我们会创建一个新的专用 `require` 函数供其使用。它将特定于该模块，并且将知道通过使用模块的 `mapping` 对象将其相对路径转换为 ID。`mapping` 对象正是这样的，即特定模块的相对路径和模块 ID 之间的映射。
+
+最后，使用 CommonJS，当模块需要被导出时，它可以通过改变 `exports` 对象来暴露模块的值。
+
+`require` 函数最后会返回 `exports` 对象。
+
+你可以创建一个文件保存打包后的内容，在页面中引入这个包即可。
+
+```js
+const graph = createGraph('./example/entry.js')
+const result = bundle(graph)
+
+fs.writeFile('./dist/main.js', result, (err) => {
+  if (err) throw err
+  process.stdout.write('创建成功！')
+})
+```
+
+> 本文的示例 👉 [地址](https://github.com/lio-zero/web-demos/blob/main/module-bundler/bundler.js)。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\346\250\241\346\213\237 setInterval.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\346\250\241\346\213\237 setInterval.md"
new file mode 100644
index 0000000..7cec445
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\346\250\241\346\213\237 setInterval.md"	
@@ -0,0 +1,62 @@
+# 模拟 setInterval
+
+`setInterval` 函数执行任务的间隔时间是不精确的。这意味着，即使你设置了每隔 1 秒钟执行一次任务，实际上任务的执行间隔可能会有所偏差。
+
+这种偏差的原因是浏览器的 JavaScript 引擎可能会被其他进程或任务占用，导致定时器的执行被推迟。
+
+而模拟 `setInterval` 的目的就是为了解决这个问题。
+
+## 使用 `arguments.callee`
+
+可以使用 [`arguments.callee`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments) 属性来引用当前正在执行的函数。
+
+```js
+// 这里不能使用箭头函数，因为箭头函数没有 `argument` 对象
+setTimeout(function () {
+  console.log(new Date())
+  setTimeout(arguments.callee, 1000)
+}, 0)
+```
+
+但是，这种方式不推荐使用。
+
+这是因为 `argument` 属性在 ECMAScript 5 中已被废弃，并且在严格模式下会抛出错误。
+
+## 递归 + `setTimeout()`
+
+如果你需要更精确的定时执行任务，可以使用 `setTimeout` 函数递归调用的方式来模拟周期性执行任务。这样，每次任务执行完后都会重新设置一个新的定时器，以保证下一次任务的执行间隔是 1 秒钟。
+
+```js
+function sayHello() {
+  console.log('Hello')
+  setTimeout(sayHello, 1000)
+}
+
+sayHello()
+```
+
+## 使用 `performance.now()` 或 `Date.now()`
+
+使用 `performance.now()` 或 `Date.now()` 方法来计算时间间隔，并在适当的时候执行任务。
+
+```js
+let startTime = performance.now()
+
+function sayHello() {
+  console.log('Hello')
+  startTime = performance.now()
+}
+
+function scheduleHello() {
+  let currentTime = performance.now()
+  let elapsedTime = currentTime - startTime
+  if (elapsedTime >= 1000) {
+    sayHello()
+  }
+  requestAnimationFrame(scheduleHello)
+}
+
+scheduleHello()
+```
+
+这种方法的优点是可以保证在浏览器中执行任务的间隔更加精确，但是会消耗更多的 CPU 资源。
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\347\273\237\350\256\241\345\255\227\347\254\246\344\270\262\344\270\255\345\207\272\347\216\260\346\234\200\345\244\232\347\232\204\345\255\227\346\257\215\345\222\214\344\270\252\346\225\260.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\347\273\237\350\256\241\345\255\227\347\254\246\344\270\262\344\270\255\345\207\272\347\216\260\346\234\200\345\244\232\347\232\204\345\255\227\346\257\215\345\222\214\344\270\252\346\225\260.md"
new file mode 100644
index 0000000..8cf6938
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\347\273\237\350\256\241\345\255\227\347\254\246\344\270\262\344\270\255\345\207\272\347\216\260\346\234\200\345\244\232\347\232\204\345\255\227\346\257\215\345\222\214\344\270\252\346\225\260.md"
@@ -0,0 +1,51 @@
+# 统计字符串中出现最多的字母和个数
+
+这估计是很多小公司会考的一道题吧。下面提供两种解决方法。
+
+- 循环（任何一种循环方式）
+- 正则
+
+通常，最快想到的就是遍历进行判断：
+
+```js
+let str = '111234441asdsadawerzxxss'
+let char = ''
+let count = 0
+
+const num = str.split('').reduce((acc, cur) => {
+  if (acc[cur]) acc[cur]++
+  else acc[cur] = 1
+  return acc
+}, {})
+
+for (let [key, value] of Object.entries(num)) {
+  if (value > count) {
+    count = value
+    char = key
+  }
+}
+
+console.log(`字符最多的是 ${char}，出现了 ${count} 次`)
+```
+
+然而，通过正则可以用更少的代码实现：
+
+```js
+// 先排序
+str = str.split('').sort().join('') // "aaabbbbbcccccccc"
+
+let re = /(\w)\1+/g
+str.replace(re, ($0, $1) => {
+  if (count < $0.length) {
+    count = $0.length
+    char = $1
+  }
+})
+
+console.log(`字符最多的是 ${char}，出现了 ${count} 次`)
+```
+
+这里主要理解正则的意思：
+
+- `(\w)` — `\w` 表示匹配字母（大小写）、数字、下划线，放在小括号 `()` 中表示一个 group，后面可以用 `\n(n=1-9)` 引用
+- `\1` 表示第一个 group，即 `(\w)`，`\1+` 表示前面的 group 重复 1 到多次
diff --git "a/\346\211\213\345\206\231\347\263\273\345\210\227/\350\212\202\346\265\201\345\222\214\351\230\262\346\212\226.md" "b/\346\211\213\345\206\231\347\263\273\345\210\227/\350\212\202\346\265\201\345\222\214\351\230\262\346\212\226.md"
new file mode 100644
index 0000000..61760b2
--- /dev/null
+++ "b/\346\211\213\345\206\231\347\263\273\345\210\227/\350\212\202\346\265\201\345\222\214\351\230\262\346\212\226.md"
@@ -0,0 +1,128 @@
+# 节流和防抖
+
+使用 JavaScript 进行开发时，都会使用到事件，有一些事件我们只想触发一次，但却频繁触发多次，例如：
+
+- `window` 的 `resize`、`scroll`
+- `mousedown`、`mousemove`
+- `keyup`、`keydown`
+- ...
+
+我们可能会在其中执行请求，或处理一些复杂的逻辑，这样一次性触发多次可能会造成资源浪费。
+
+有两种方法可以控制事件触发后，回调函数的调用频率，即**节流和防抖**。
+
+## 防抖
+
+防抖（debounce）是指在一段时间内最多调用一次，即如果在规定时间内再次调用该函数，则会将原定时器清除并重新计时。
+
+常规防抖实现如下：
+
+```js
+function debounce(fn, wait) {
+  let timer = null
+  return function () {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      fn.apply(this, arguments)
+    }, wait)
+    // 方便在外部能够清除计时器
+    return timer
+  }
+}
+```
+
+这个函数接受两个参数：
+
+- `fn` — 需要进行防抖的函数。
+- `wait` — 在调用 `fn` 函数之前需要等待的时间（以毫秒为单位）。
+
+然后它返回一个包装函数，该函数会将原定时器清除并重新计时。在规定时间内，如果再次调用包装函数，则会将原定时器清除并重新计时。
+
+另外，你可以进一步改进该防抖函数，例如添加一个可选参数，使包装函数能够立即调用 `fn` 函数。这里我们不在介绍，详细内容可以在最后提供的资料中找到答案。
+
+### 示例：检测是否触底
+
+查看是否触底，常用于触底加载更多数据：
+
+```js
+const isAtBottom = function () {
+  console.log(
+    document.documentElement.clientHeight + window.scrollY >=
+      document.documentElement.scrollHeight
+  )
+}
+
+document.addEventListener('scroll', debounce(isAtBottom, 1000))
+```
+
+> [查看效果](https://codepen.io/lio-zero/pen/wvqQxbb)
+
+## 节流
+
+节流（throttle）是指在一段时间内，只允许函数被调用一次。
+
+与防抖不同，节流函数在等待期间不会重置计时器。如果在等待期间多次调用函数，只有第一次会被执行，其他调用会被忽略。
+
+有两种实现方式：**时间戳和定时器**。
+
+### 时间戳
+
+```js
+function throttle(fn, wait) {
+  let previous = 0
+
+  return function () {
+    const now = Date.now()
+    if (now - previous > wait) {
+      fn.apply(this, arguments)
+      previous = now
+    }
+    return fn
+  }
+}
+```
+
+它返回一个包装函数，该函数会检查与上一次调用之间是否已经过了规定的时间。如果是，则调用 `fn` 函数并更新上一次调用的时间。否则，不会调用 `fn` 函数。
+
+### 定时器
+
+```js
+function throttle(fn, wait) {
+  let timer = null
+
+  return function () {
+    if (timer) return
+    timer = setTimeout(() => {
+      fn.apply(this, arguments)
+      timer = null
+    }, wait)
+    return timer
+  }
+}
+```
+
+它返回一个包装函数，该函数会在第一次调用时设置一个定时器。在等待期间，如果再次调用该函数，则不会执行任何操作。在定时器到期后，会调用 `fn` 函数并清除定时器。
+
+## 区别
+
+两者的区别在于，函数节流是在一段时间内最多调用一次，而函数防抖是在一段时间内只调用一次。
+
+一段时间内最多调用一次意味着，如果你在这段时间内多次调用函数，那么只有第一次调用会生效，之后的调用都会被忽略。
+
+一段时间内只调用一次意味着，如果你在这段时间内多次调用函数，那么只有最后一次调用会在这段时间结束后生效，之前的调用都会被忽略。
+
+## 使用场景
+
+函数节流适用于需要限制调用频率的场景，而函数防抖适用于需要等待用户输入完成后才进行响应的场景。
+
+## 最后
+
+本文我们实现了基本够用的节流和防抖，你还可以添加 lodash 这类工具库提供对节流和防抖的各种功能处理，以适用各种项目。
+
+更多详细内容可以阅读以下文章：
+
+- [JavaScript 专题之跟着 underscore 学防抖](https://github.com/mqyqingfeng/Blog/issues/22)
+- [JavaScript 专题之跟着 underscore 学节流](https://github.com/mqyqingfeng/Blog/issues/26)
+- [介绍防抖节流原理、区别以及应用，并用 JavaScript 进行实现](https://github.com/lgwebdream/FE-Interview/issues/15)
+- [浅谈 JS 防抖和节流](https://segmentfault.com/a/1190000018428170)
+- [函数防抖与函数节流](https://zhuanlan.zhihu.com/p/38313717)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\345\244\247 O \347\254\246\345\217\267.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\345\244\247 O \347\254\246\345\217\267.md"
new file mode 100644
index 0000000..2be7994
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\345\244\247 O \347\254\246\345\217\267.md"	
@@ -0,0 +1,95 @@
+# 大 O 符号
+
+[大 O 符号](https://zh.wikipedia.org/wiki/%E5%A4%A7O%E7%AC%A6%E5%8F%B7)（Big O Notation），又称为渐进符号，用于描述算法的时间复杂度。最好的算法将执行得最快并且具有最简单的复杂性。
+
+算法并不总是执行相同的操作，并且可能会根据提供的数据而有所不同。虽然在某些情况下它们会执行非常快，但在其他情况下它们会执行缓慢，即使要处理相同数量的元素。
+
+在以下示例中，基准时间为 1 个元素 = `1ms`。
+
+## O(1) — 恒定时间复杂性
+
+```js
+arr[arr.length - 1]
+```
+
+1000 个元素 = `1ms`
+
+无论数组有多少个元素，理论上执行所需的时间（不包括实际的变化）都是相同的。
+
+## O(N) — 线性时间复杂度
+
+```js
+arr.filter(fn)
+```
+
+1000 个元素 = `1000ms`
+
+执行时间将随着数组元素的数量线性增加。如果数组有 1000 个元素，并且函数需要 1ms 才能执行，那么 7000 个元素将需要 7ms 执行。这是因为函数必须在返回结果之前遍历数组的所有元素。
+
+## O([1, N]) — 恒定/线性时间复杂度
+
+```js
+arr.some(fn)
+```
+
+1000 个元素 =`1ms <= x <= 1000ms`
+
+执行时间取决于提供给函数的数据，它可能会很早或很晚返回。这里最好的情况是 `O(1)`，最坏的情况是 `O(N)`。
+
+## O(NlogN) — 线性时间复杂度
+
+```js
+arr.sort(fn)
+```
+
+1000 个元素 ~= `10000ms`
+
+浏览器通常为 `sort()` 方法实现快速排序算法，快速排序的平均时间复杂度为 `O(NlogN)`。这对于大型集合非常有效。
+
+## O(N^2) — 二次方时间复杂度
+
+```js
+for (let i = 0; i < arr.length; i++) {
+  for (let j = 0; j < arr.length; j++) {
+    // ...
+  }
+}
+```
+
+1000 个元素 = `1000000ms`
+
+执行时间随着元素的数量呈二次曲线增长。通常是嵌套循环的结果。
+
+## O(N!) — 阶乘时间复杂度
+
+```js
+const permutations = (arr) => {
+  if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr
+  return arr.reduce(
+    (acc, item, i) =>
+      acc.concat(
+        permutations([...arr.slice(0, i), ...arr.slice(i + 1)]).map((val) => [
+          item,
+          ...val
+        ])
+      ),
+    []
+  )
+}
+```
+
+1000 个元素 = `Infinity`（实际上）
+
+即使只在数组中添加一个，执行时间也会增长得非常快。
+
+> **Tips**：随着执行时间呈指数增长，需要注意嵌套循环。
+
+## 更多资料
+
+- [Big O Notation: A primer for beginning devs](https://blog.educative.io/a-big-o-primer-for-beginning-devs/)
+- [A beginner's guide to Big O Notation](https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/)
+- [A Simplified Explanation of the Big O Notation](https://medium.com/karuna-sehgal/a-simplified-explanation-of-the-big-o-notation-82523585e835)
+- [All you need to know about “Big O Notation” to crack your next coding interview](https://www.freecodecamp.org/news/all-you-need-to-know-about-big-o-notation-to-crack-your-next-coding-interview-9d575e7eec4/)
+- [A story of Big O](https://medium.com/@deadcookies/a-story-of-big-o-453471a35e62)
+- [Big-O Cheat Sheet](https://www.bigocheatsheet.com/)
+- [The Big 'O' Notation - An Introduction Sarah Chima - Front-End Developer](https://sarahchima.com/blog/big-o-notation/)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \344\272\214\345\217\211\346\220\234\347\264\242\346\240\221.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \344\272\214\345\217\211\346\220\234\347\264\242\346\240\221.md"
new file mode 100644
index 0000000..4c74d29
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \344\272\214\345\217\211\346\220\234\347\264\242\346\240\221.md"	
@@ -0,0 +1,201 @@
+# 数据结构 — 二叉搜索树
+
+[二叉搜索树](https://zh.wikipedia.org/wiki/%E4%BA%8C%E5%85%83%E6%90%9C%E5%B0%8B%E6%A8%B9)（BST，Binary Search Tree）是由一组表示层次树结构的有序链接节点组成的数据结构。每个节点都通过父子关系链接到其他节点。任何给定节点最多可以有两个子节点（左和右）。二叉搜索树中的第一个节点是根，而没有任何子节点的节点是叶。二叉搜索树的组织方式是，对于任何给定的节点，其左子树中的所有节点都有一个小于自身的键，而其右子树中的所有节点都有一个大于自身的键。
+
+![JavaScript 二叉搜索树可视化](https://upload-images.jianshu.io/upload_images/18281896-a642170daf702289.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+二叉搜索树数据结构中的每个节点都必须具有以下属性：
+
+- `key`：节点的键
+- `value`：节点的值
+- `parent`：节点的父节点（如果没有，则为 `null`）
+- `left`：指向节点左子级的指针（如果没有，则为 `null`）
+- `right`：指向节点右子级的指针（如果没有，则为 `null`）
+
+二叉搜索树数据结构的主要操作有：
+
+- `insert`：将节点作为给定父节点的子节点插入
+- `remove`：从二叉搜索树中删除节点及其子节点
+- `has`：检查给定节点是否存在
+- `find`：检索给定节点
+- `preOrderTraversal`：通过递归遍历每个节点及其子节点来遍历二叉搜索树
+- `postOrderTraversal`：通过递归遍历每个节点的子节点，然后遍历该节点，从而遍历二叉搜索树
+- `inOrderTraversal`：通过递归遍历每个节点的左子节点，然后遍历节点，然后是其右子节点来遍历二叉搜索树
+
+## JavaScript 实现
+
+```js
+class BinarySearchTreeNode {
+  constructor(key, value = key, parent = null) {
+    this.key = key
+    this.value = value
+    this.parent = parent
+    this.left = null
+    this.right = null
+  }
+
+  get isLeaf() {
+    return this.left === null && this.right === null
+  }
+
+  get hasChildren() {
+    return !this.isLeaf
+  }
+}
+
+class BinarySearchTree {
+  constructor(key, value = key) {
+    this.root = new BinarySearchTreeNode(key, value)
+  }
+
+  *inOrderTraversal(node = this.root) {
+    if (node.left) yield* this.inOrderTraversal(node.left)
+    yield node
+    if (node.right) yield* this.inOrderTraversal(node.right)
+  }
+
+  *postOrderTraversal(node = this.root) {
+    if (node.left) yield* this.postOrderTraversal(node.left)
+    if (node.right) yield* this.postOrderTraversal(node.right)
+    yield node
+  }
+
+  *preOrderTraversal(node = this.root) {
+    yield node
+    if (node.left) yield* this.preOrderTraversal(node.left)
+    if (node.right) yield* this.preOrderTraversal(node.right)
+  }
+
+  insert(key, value = key) {
+    let node = this.root
+    while (true) {
+      if (node.key === key) return false
+      if (node.key > key) {
+        if (node.left !== null) node = node.left
+        else {
+          node.left = new BinarySearchTreeNode(key, value, node)
+          return true
+        }
+      } else if (node.key < key) {
+        if (node.right !== null) node = node.right
+        else {
+          node.right = new BinarySearchTreeNode(key, value, node)
+          return true
+        }
+      }
+    }
+  }
+
+  has(key) {
+    for (const node of this.postOrderTraversal()) {
+      if (node.key === key) return true
+    }
+    return false
+  }
+
+  find(key) {
+    for (const node of this.postOrderTraversal()) {
+      if (node.key === key) return node
+    }
+    return undefined
+  }
+
+  remove(key) {
+    const node = this.find(key)
+    if (!node) return false
+    const isRoot = node.parent === null
+    const isLeftChild = !isRoot ? node.parent.left === node : false
+    const hasBothChildren = node.left !== null && node.right !== null
+
+    if (node.isLeaf) {
+      if (!isRoot) {
+        if (isLeftChild) node.parent.left = null
+        else node.parent.right = null
+      } else {
+        this.root = null
+      }
+      return true
+    } else if (!hasBothChildren) {
+      const child = node.left !== null ? node.left : node.right
+      if (!isRoot) {
+        if (isLeftChild) node.parent.left = child
+        else node.parent.right = child
+      } else {
+        this.root = child
+      }
+      child.parent = node.parent
+      return true
+    } else {
+      const rightmostLeft = [...this.inOrderTraversal(node.left)].slice(-1)[0]
+      rightmostLeft.parent = node.parent
+      if (!isRoot) {
+        if (isLeftChild) node.parent.left = rightmostLeft
+        else node.parent.right = rightmostLeft
+      } else {
+        this.root = rightmostLeft
+      }
+      rightmostLeft.right = node.right
+      node.right.parent = rightmostLeft
+      return true
+    }
+  }
+}
+```
+
+- 创建一个具有 `constructor` 的 `BinarySearchTreeNode` 类（`class`），使用 为每个实例初始化 `key`、`value`、`parent`、`left` 和 `right` 属性。
+- 定义一个 `isLeaf` getter，使用 `Array.prototype.length` 检查 `left` 和 `right` 是否为空。
+- 定义一个 `hasChildren` getter，它与 `isLeaf` getter 相反。
+- 创建一个具有 `constructor` 的 `BinarySearchTree` 类（`class`），用于初始化二叉搜索树的 `root`。
+- 定义一个 `preOrderTraversal()` 按预先顺序遍历二叉搜索树生成器方法，使用 `yield*` 语法递归地将遍历委托给自身。
+- 定义一个 `postOrderTraversal()` 以后序遍历二叉搜索树的生成器方法，使用 `yield*` 语法递归地将遍历委托给自身。
+- 定义一个 `inOrderTraversal()` 按顺序遍历二叉搜索树的生成器方法，使用 `yield*` 语法递归地将遍历委托给自身。
+- 定义一个 `insert()` 方法，它使用 `while` 循环来搜索二叉搜索树，遍历每个节点的子节点，直到找到合适的位置以插入新的子节点 `BinarySearchTreeNode` 作为 `left` 或 `right` 子节点，具体取决于给定的 `key`。
+- 定义一个 `insert()` 方法，使用 `preOrderTraversal()` 方法查找给定的父节点，并根据传递的选项对象插入一个新的子 `BinaryTreeNode` 作为 `left` 或 `right` 子节点。
+- 定义一个 `has()` 方法，它使用 `preOrderTraversal()` 方法濑检查给定的节点是否存在于二叉搜索树中。
+- 定义一个 `find()` 方法，使用 `preOrderTraversal()` 方法在二叉搜索树中检索给定节点。
+- 定义一个 `remove()` 方法，从二叉搜索树中删除给定的 `BinarySearchTreeNode`，删除指向它的任何链接，并更新二叉搜索树以保持其顺序。
+
+```js
+const tree = new BinarySearchTree(30)
+
+tree.insert(10)
+tree.insert(15)
+tree.insert(12)
+tree.insert(40)
+tree.insert(35)
+tree.insert(50)
+;[...tree.preOrderTraversal()].map((x) => x.value) // [30, 10, 15, 12, 40, 35, 50]
+;[...tree.inOrderTraversal()].map((x) => x.value) // [10, 12, 15, 30, 35, 40, 50]
+;[...tree.postOrderTraversal()].map((x) => x.value) // [12, 15, 10, 35, 50, 40, 30]
+
+tree.root.value // 30
+tree.root.hasChildren // true
+
+tree.find(12).isLeaf // true
+tree.find(40).isLeaf // false
+tree.find(50).parent.value // 40
+tree.find(15).left.value // 12
+tree.find(12).right // null
+
+tree.remove(12)
+;[...tree.preOrderTraversal()].map((x) => x.value) // [30, 10, 15, 40, 35, 50]
+
+tree.remove(10)
+;[...tree.preOrderTraversal()].map((v) => ({
+  key: v.key,
+  parent: v.parent ? v.parent.key : null
+})) // [30, 15, 40, 35, 50]
+
+tree.remove(40)
+;[...tree.preOrderTraversal()].map((x) => x.value) // [30, 15, 40, 35, 50]
+
+tree.remove(30)
+;[...tree.preOrderTraversal()].map((x) => x.value) // [15, 35, 50]
+```
+
+以上内容译自 30 seconds of code 的 [JavaScript Data Structures - Binary Search Tree](https://www.30secondsofcode.org/articles/s/js-data-structures-binary-search-tree)
+
+## 更多资料
+
+- [Binary Search Tree](https://github.com/trekhleb/javascript-algorithms/blob/master/src/data-structures/tree/binary-search-tree)
+- [Binary Search Tree](https://algorithm-visualizer.org/branch-and-bound/binary-search-tree) 可视化二叉搜索树
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \344\272\214\345\217\211\346\240\221.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \344\272\214\345\217\211\346\240\221.md"
new file mode 100644
index 0000000..2a63931
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \344\272\214\345\217\211\346\240\221.md"	
@@ -0,0 +1,166 @@
+# 数据结构 — 二叉树
+
+[二叉树](https://zh.wikipedia.org/wiki/%E4%BA%8C%E5%8F%89%E6%A0%91)（Binary tree）是由一组表示层次树结构的链接节点组成的数据结构。每个节点通过父子关系链接到其他节点。任何给定节点最多可以有两个子节点（左和右）。二叉树中的第一个节点是根，而没有任何子节点的节点是叶。
+
+![JavaScript 二叉树可视化](https://upload-images.jianshu.io/upload_images/18281896-d1dd732ea28fe70e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+二叉树数据结构中的每个节点都必须具有以下属性：
+
+- `key`：节点的键
+- `value`：节点的值
+- `parent`：节点的父节点（如果没有，则为 `null`）
+- `left`：指向节点左子级的指针（如果没有，则为 `null`）
+- `right`：指向节点右子级的指针（如果没有，则为 `null`）
+
+二叉树数据结构的主要操作有：
+
+- `insert`：将节点作为给定父节点的子节点插入
+- `remove`：从二叉树中删除节点及其子节点
+- `find`: 检索给定节点
+- `preOrderTraversal`：通过递归遍历每个节点及其子节点来遍历二叉树
+- `postOrderTraversal`：通过递归遍历每个节点的子节点，然后遍历该节点，从而遍历二叉树
+- `inOrderTraversal`：通过递归遍历每个节点的左子级，然后是该节点，然后是其右子级来遍历二叉树
+
+## JavaScript 实现
+
+```js
+class BinaryTreeNode {
+  constructor(key, value = key, parent = null) {
+    this.key = key
+    this.value = value
+    this.parent = parent
+    this.left = null
+    this.right = null
+  }
+
+  get isLeaf() {
+    return this.left === null && this.right === null
+  }
+
+  get hasChildren() {
+    return !this.isLeaf
+  }
+}
+
+class BinaryTree {
+  constructor(key, value = key) {
+    this.root = new BinaryTreeNode(key, value)
+  }
+
+  *inOrderTraversal(node = this.root) {
+    if (node.left) yield* this.inOrderTraversal(node.left)
+    yield node
+    if (node.right) yield* this.inOrderTraversal(node.right)
+  }
+
+  *postOrderTraversal(node = this.root) {
+    if (node.left) yield* this.postOrderTraversal(node.left)
+    if (node.right) yield* this.postOrderTraversal(node.right)
+    yield node
+  }
+
+  *preOrderTraversal(node = this.root) {
+    yield node
+    if (node.left) yield* this.preOrderTraversal(node.left)
+    if (node.right) yield* this.preOrderTraversal(node.right)
+  }
+
+  insert(
+    parentNodeKey,
+    key,
+    value = key,
+    { left, right } = { left: true, right: true }
+  ) {
+    for (const node of this.preOrderTraversal()) {
+      if (node.key === parentNodeKey) {
+        const canInsertLeft = left && node.left === null
+        const canInsertRight = right && node.right === null
+        if (!canInsertLeft && !canInsertRight) return false
+        if (canInsertLeft) {
+          node.left = new BinaryTreeNode(key, value, node)
+          return true
+        }
+        if (canInsertRight) {
+          node.right = new BinaryTreeNode(key, value, node)
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  remove(key) {
+    for (const node of this.preOrderTraversal()) {
+      if (node.left.key === key) {
+        node.left = null
+        return true
+      }
+      if (node.right.key === key) {
+        node.right = null
+        return true
+      }
+    }
+    return false
+  }
+
+  find(key) {
+    for (const node of this.preOrderTraversal()) {
+      if (node.key === key) return node
+    }
+    return undefined
+  }
+}
+```
+
+- 创建一个具有 `constructor` 的 `BinaryTreeNode` 类（`class`），为每个实例初始化 `key`、`value`、`parent`、`left` 和 `right` 属性。
+- 定义一个 `isLeaf` getter，使用 `Array.prototype.length` 检查 `left` 和 `right` 是否为空。
+- 定义一个 `hasChildren` getter，它与 `isLeaf` getter 相反。
+- 创建一个具有 `constructor` 的 `BinaryTree` 类（`class`），初始化二叉树的 `root`。
+- 定义一个 `preOrderTraversal()` 按预先顺序遍历二叉树生成器方法，使用 `yield*` 语法递归地将遍历委托给自身。
+- 定义一个 `postOrderTraversal()` 以后序遍历二叉树的生成器方法，使用 `yield*` 语法递归地将遍历委托给自身。
+- 定义一个 `inOrderTraversal()` 按顺序遍历二叉树的生成器方法，使用 `yield*` 语法递归地将遍历委托给自身。
+- 定义一个 `insert()` 方法，使用 `preOrderTraversal()` 方法查找给定的父节点，并根据传递的选项对象插入一个新的子 `BinaryTreeNode` 作为 `left` 或 `right` 子节点。
+- 定义一个 `remove()` 方法，使用 `preOrderTraversal()` 方法和 `Array.prototype.filter()` 从二叉树中删除二进制树节点。
+- 定义一个 `find()` 方法，使用 `preOrderTraversal()` 方法检索二叉树中的给定节点。
+
+```js
+const tree = new BinaryTree(1, 'AB')
+
+tree.insert(1, 11, 'AC')
+tree.insert(1, 12, 'BC')
+tree.insert(12, 121, 'BG', { right: true })
+;[...tree.preOrderTraversal()].map((x) => x.value) // ['AB', 'AC', 'BC', 'BCG']
+;[...tree.inOrderTraversal()].map((x) => x.value) // ['AC', 'AB', 'BC', 'BG']
+
+tree.root.value // 'AB'
+tree.root.hasChildren // true
+
+tree.find(12).isLeaf // false
+tree.find(121).isLeaf // true
+tree.find(121).parent.value // 'BC'
+tree.find(12).left // null
+tree.find(12).right.value // 'BG'
+
+tree.remove(12)
+;[...tree.postOrderTraversal()].map((x) => x.value) // ['AC', 'AB']
+```
+
+以上内容译自 30 seconds of code 的 [JavaScript Data Structures - Binary Tree](https://www.30secondsofcode.org/articles/s/js-data-structures-binary-tree)
+
+## LeetCode 相关的链表题目
+
+- [二叉树的中序遍历](https://leetcode.cn/problems/binary-tree-inorder-traversal/)
+- [对称二叉树](https://leetcode.cn/problems/symmetric-tree/)
+- [二叉树的层序遍历](https://leetcode.cn/problems/binary-tree-level-order-traversal/)
+- [二叉树的最大深度](https://leetcode.cn/problems/maximum-depth-of-binary-tree/)
+- [二叉树展开为链表](https://leetcode.cn/problems/flatten-binary-tree-to-linked-list/)
+- [二叉树中的最大路径和](https://leetcode.cn/problems/binary-tree-maximum-path-sum/)
+- [翻转二叉树](https://leetcode.cn/problems/invert-binary-tree/)
+- [二叉树的最近公共祖先](https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-tree/)
+- [二叉树的序列化与反序列化](https://leetcode.cn/problems/serialize-and-deserialize-binary-tree/)
+- [合并二叉树](https://leetcode.cn/problems/merge-two-binary-trees/)
+- [二叉树的直径](https://leetcode.cn/problems/diameter-of-binary-tree/)
+
+## 更多资料
+
+[Binary Tree Traversal](https://algorithm-visualizer.org/brute-force/binary-tree-traversal) 可视化二叉树遍历
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\217\214\345\220\221\351\223\276\350\241\250.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\217\214\345\220\221\351\223\276\350\241\250.md"
new file mode 100644
index 0000000..eea1dc7
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\217\214\345\220\221\351\223\276\350\241\250.md"	
@@ -0,0 +1,147 @@
+# 数据结构 — 双向链表
+
+[双向链表](https://zh.wikipedia.org/wiki/%E5%8F%8C%E5%90%91%E9%93%BE%E8%A1%A8)，又称为**双链表**，是一种表示元素集合的线性数据结构，其中每个元素都指向下一个和上一个元素。双向链表中的第一个元素是 head，最后一个元素是 tail。
+
+![JavaScript 双向链表可视化](https://upload-images.jianshu.io/upload_images/18281896-4cc14539746c776a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+双向链表数据结构的每个元素必须具有以下属性：
+
+- `value`：元素的值
+- `next`：指向双向链表中下一个元素的指针（如果没有，则为 `null`）
+- `previous`：指向双向链表中上一个元素的指针（如果没有，则为 `null`）
+
+双向链表数据结构的主要属性有：
+
+- `size`：双向链表中的元素个数
+- `head`：双向链表中的第一个元素
+- `tail`：双向链表中的最后一个元素
+
+双向链表数据结构的主要操作有：
+
+- `insertAt`：在特定索引处插入元素
+- `removeAt`：删除特定索引处的元素
+- `getAt`：检索特定索引处的元素
+- `clear`：清空双向链表
+- `reverse`：反转双向链表中元素的顺序
+
+## JavaScript 实现
+
+```js
+class DoublyLinkedList {
+  constructor() {
+    this.nodes = []
+  }
+
+  get size() {
+    return this.nodes.length
+  }
+
+  get head() {
+    return this.size ? this.nodes[0] : null
+  }
+
+  get tail() {
+    return this.size ? this.nodes[this.size - 1] : null
+  }
+
+  insertAt(index, value) {
+    const previousNode = this.nodes[index - 1] || null
+    const nextNode = this.nodes[index] || null
+    const node = { value, next: nextNode, previous: previousNode }
+
+    if (previousNode) previousNode.next = node
+    if (nextNode) nextNode.previous = node
+    this.nodes.splice(index, 0, node)
+  }
+
+  insertFirst(value) {
+    this.insertAt(0, value)
+  }
+
+  insertLast(value) {
+    this.insertAt(this.size, value)
+  }
+
+  getAt(index) {
+    return this.nodes[index]
+  }
+
+  removeAt(index) {
+    const previousNode = this.nodes[index - 1] || null
+    const nextNode = this.nodes[index + 1] || null
+
+    if (previousNode) previousNode.next = nextNode
+    if (nextNode) nextNode.previous = previousNode
+
+    return this.nodes.splice(index, 1)
+  }
+
+  clear() {
+    this.nodes = []
+  }
+
+  reverse() {
+    this.nodes = this.nodes.reduce((acc, { value }) => {
+      const nextNode = acc[0] || null
+      const node = { value, next: nextNode, previous: null }
+      if (nextNode) nextNode.previous = node
+      return [node, ...acc]
+    }, [])
+  }
+
+  *[Symbol.iterator]() {
+    yield* this.nodes
+  }
+}
+```
+
+- 创建一个具有 `constructor` 的类（`class`），为每个实例初始化一个空数组 `nodes`。
+- 定义一个 `size` getter，它使用 `Array.prototype.length` 返回 `nodes` 数组中元素的数量。
+- 定义一个 `head` getter，它返回 `nodes` 数组的第一个元素，如果为空，则返回 `null`。
+- 定义一个 `tail` getter，它返回 `nodes` 数组的最后一个元素，如果为空，则返回 `null`。
+- 定义一个 `insertAt()` 方法，使用 `Array.prototype.splice()` 在 `nodes` 数组中添加新对象，分别更新上一个元素的 `next` 键和下一个元素的 `previous` 键。
+- 定义两个便捷的方法 `insertFirst()` 和 `insertLast()`，它们分别使用 `insertAt()` 方法在 `nodes` 数组的开头或结尾插入新元素。
+- 定义一个 `getAt()` 方法，用于检索给定 `index` 的元素。
+- 定义一个 `removeAt()` 方法，使用 `Array.prototype.splice()` 删除 `nodes` 数组中的对象，分别更新上一个元素的 `next` 键和下一个元素的 `previous` 键。
+- 定义一个 `clear()` 方法，清空 `nodes` 数组。
+- 定义一个 `reverse()` 方法，使用 `Array.prototype.reduce()` 和扩展运算符（`...`）来反转 `nodes` 数组的顺序，适当地更新每个元素的 `next` 和 `previous` 键。
+- 为 `Symbol.iterator` 定义一个生成器方法，使用 `yield*` 语法委托给 `nodes` 数组的迭代器。
+
+```js
+const list = new DoublyLinkedList()
+
+list.insertFirst(1)
+list.insertFirst(2)
+list.insertFirst(3)
+list.insertLast(4)
+list.insertAt(3, 5)
+
+list.size // 5
+list.head.value // 3
+list.head.next.value // 2
+list.tail.value // 4
+list.tail.previous.value // 5
+;[...list].map((e) => e.value) // [3, 2, 1, 5, 4]
+
+list.removeAt(1) // 2
+list.getAt(1).value // 1
+list.head.next.value // 1
+;[...list].map((e) => e.value) // [3, 1, 5, 4]
+
+list.reverse()
+;[...list].map((e) => e.value) // [4, 5, 1, 3]
+
+list.clear()
+list.size // 0
+```
+
+以上内容译自 30 seconds of code 的 [JavaScript Data Structures - Doubly Linked List](https://www.30secondsofcode.org/articles/s/js-data-structures-doubly-linked-list)。
+
+## LeetCode 相关的双向链表题目
+
+- [剑指 Offer 36. 二叉搜索树与双向链表](https://leetcode.cn/problems/er-cha-sou-suo-shu-yu-shuang-xiang-lian-biao-lcof/)
+- [扁平化多级双向链表](https://leetcode.cn/problems/flatten-a-multilevel-doubly-linked-list/)
+
+## 更多资料
+
+[Doubly Linked List](https://github.com/trekhleb/javascript-algorithms/blob/master/src/data-structures/doubly-linked-list)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\233\276.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\233\276.md"
new file mode 100644
index 0000000..72d27ca
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\233\276.md"	
@@ -0,0 +1,161 @@
+# 数据结构 — 图
+
+[图](<https://zh.wikipedia.org/wiki/%E5%9B%BE_(%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84)>)（graph）是一种数据结构，由一组节点或顶点以及一组表示这些节点之间连接的边组成。图可以是有向的或无向的，而它们的边可以分配数字权重。
+
+![JavaScript 图可视化](https://upload-images.jianshu.io/upload_images/18281896-a5c1ea8833a8986c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+图数据结构中的每个节点都必须具有以下属性：
+
+- `key`：节点的键
+- `value`：节点的值
+
+图数据结构中的每条边都必须具有以下属性：
+
+- `a`：边的起始节点
+- `b`：边的目标节点
+- `weight`：边缘的可选数字权重值
+
+图数据结构的主要操作有：
+
+- `addNode`：插入具有特定键和值的新节点
+- `addEdge`：在两个给定节点之间插入一条新边，可选择设置其权重
+- `removeNode`：删除具有指定键的节点
+- `removeEdge`：删除两个给定节点之间的边
+- `findNode`：检索具有给定键的节点
+- `hasEdge`：检查图在两个给定节点之间是否有边
+- `setEdgeWeight`：设置给定边的权重
+- `getEdgeWeight`：获取给定边的权重
+- `adjacent`：从给定节点查找存在边的所有节点
+- `indegree`：计算给定节点的总边数
+- `outdegree`：计算给定节点的总边数
+
+## JavaScript 实现
+
+```js
+class Graph {
+  constructor(directed = true) {
+    this.directed = directed
+    this.nodes = []
+    this.edges = new Map()
+  }
+
+  addNode(key, value = key) {
+    this.nodes.push({ key, value })
+  }
+
+  addEdge(a, b, weight) {
+    this.edges.set(JSON.stringify([a, b]), { a, b, weight })
+    if (!this.directed)
+      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight })
+  }
+
+  removeNode(key) {
+    this.nodes = this.nodes.filter((n) => n.key !== key)
+    ;[...this.edges.values()].forEach(({ a, b }) => {
+      if (a === key || b === key) this.edges.delete(JSON.stringify([a, b]))
+    })
+  }
+
+  removeEdge(a, b) {
+    this.edges.delete(JSON.stringify([a, b]))
+    if (!this.directed) this.edges.delete(JSON.stringify([b, a]))
+  }
+
+  findNode(key) {
+    return this.nodes.find((x) => x.key === key)
+  }
+
+  hasEdge(a, b) {
+    return this.edges.has(JSON.stringify([a, b]))
+  }
+
+  setEdgeWeight(a, b, weight) {
+    this.edges.set(JSON.stringify([a, b]), { a, b, weight })
+    if (!this.directed)
+      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight })
+  }
+
+  getEdgeWeight(a, b) {
+    return this.edges.get(JSON.stringify([a, b])).weight
+  }
+
+  adjacent(key) {
+    return [...this.edges.values()].reduce((acc, { a, b }) => {
+      if (a === key) acc.push(b)
+      return acc
+    }, [])
+  }
+
+  indegree(key) {
+    return [...this.edges.values()].reduce((acc, { a, b }) => {
+      if (b === key) acc++
+      return acc
+    }, 0)
+  }
+
+  outdegree(key) {
+    return [...this.edges.values()].reduce((acc, { a, b }) => {
+      if (a === key) acc++
+      return acc
+    }, 0)
+  }
+}
+```
+
+- 创建一个具有 `constructor` 的类（`class`），为每个实例初始化空数组、`nodes`、`Map` 和 `edges`。可选参数 `directed` 指定图形是否有方向。
+- 定义一个 `addNode()` 方法，使用 `Array.prototype.push()` 在 `nodes` 数组中添加新节点。
+- 定义一个 `addEdge()` 方法，使用 `Map.prototype.set()` 向 `edgesMap` 添加新边，`JSON.stringify()` 用于生成唯一键。
+- 定义一个 `removeNode()` 方法，使用 `Array.prototype.filter()` 和 `Map.prototype.delete()` 删除给定的节点及其连接的所有边。
+- 定义一个 `removeEdge()` 方法，使用 `Map.prototype.delete()` 删除给定的边。
+- 定义一个 `findNode()` 方法，使用 `Array.prototype.find()` 返回给定节点（如果有）。
+- 定义一个 `hasEdge()` 方法，使用 `Map.prototype.has()` 和 `JSON.stringify()` 检查给定的边是否存在于 `edges` Map 中。
+- 定义一个 `setEdgeWeight()` 方法，使用 `Map.prototype.set()` 设置相应边的权重，该边的键由 `JSON.stringify()` 生成。
+- 定义一个 `getEdgeWeight()` 方法，使用 `Map.prototype.get()` 获取相应边的 8 个，该边的键由 `JSON.stringify()` 生成。
+- 定义一个 `adjacent()` 方法，使用 `Map.prototype.values()`、`Array.prototype.reduce()` 和 `Array.prototype.push()` 查找连接到给定节点的所有节点。
+- 定义一个 `indegree()` 方法，使用 `Map.prototype.values()` 和 `Array.prototype.reduce()` 计算给定节点的边数。
+- 定义一个 `outdegree()` 方法，使用 `Map.prototype.values()` 和 `Array.prototype.reduce()` 计算给定节点的边数。
+
+```js
+const g = new Graph()
+
+g.addNode('a')
+g.addNode('b')
+g.addNode('c')
+g.addNode('d')
+
+g.addEdge('a', 'c')
+g.addEdge('b', 'c')
+g.addEdge('c', 'b')
+g.addEdge('d', 'a')
+
+g.nodes.map((x) => x.value) // ['a', 'b', 'c', 'd']
+;[...g.edges.values()].map(({ a, b }) => `${a} => ${b}`)
+// ['a => c', 'b => c', 'c => b', 'd => a']
+
+g.adjacent('c') // ['b']
+
+g.indegree('c') // 2
+g.outdegree('c') // 1
+
+g.hasEdge('d', 'a') // true
+g.hasEdge('a', 'd') // false
+
+g.removeEdge('c', 'b')
+;[...g.edges.values()].map(({ a, b }) => `${a} => ${b}`)
+// ['a => c', 'b => c', 'd => a']
+
+g.removeNode('c')
+
+g.nodes.map((x) => x.value) // ['a', 'b', 'd']
+;[...g.edges.values()].map(({ a, b }) => `${a} => ${b}`)
+// ['d => a']
+
+g.setEdgeWeight('d', 'a', 5)
+g.getEdgeWeight('d', 'a') // 5
+```
+
+以上内容译自 30 seconds of code 的 [JavaScript Data Structures - Graph](https://www.30secondsofcode.org/articles/s/js-data-structures-graph)
+
+## 更多资料
+
+[Graph](https://github.com/trekhleb/javascript-algorithms/blob/master/src/data-structures/graph) (both directed and undirected)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\240\206\346\240\210.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\240\206\346\240\210.md"
new file mode 100644
index 0000000..274a6cd
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \345\240\206\346\240\210.md"	
@@ -0,0 +1,72 @@
+# 数据结构 — 堆栈
+
+[堆栈](https://zh.wikipedia.org/wiki/%E5%A0%86%E6%A0%88)（Stack）是一种线性数据结构，其行为类似于现实世界中的项目堆栈。它遵循后进先出（LIFO）的操作顺序，类似于现实世界中的对应物。这意味着新项目将添加到堆栈顶部，项目也将从堆栈顶部移除。
+
+![JavaScript 堆栈可视化](https://upload-images.jianshu.io/upload_images/18281896-034bba3e1989f2be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+栈数据结构的主要操作有：
+
+- `push`：将元素添加到堆栈顶部
+- `pop`：从堆栈顶部移除元素
+- `peek`：检索堆栈顶部的元素，而不删除它
+- `isEmpty`：检查堆栈是否为空
+
+## JavaScript 实现
+
+```js
+class Stack {
+  constructor() {
+    this.items = []
+  }
+
+  push(item) {
+    this.items.unshift(item)
+  }
+
+  pop(item) {
+    return this.items.shift()
+  }
+
+  peek(item) {
+    return this.items[0]
+  }
+
+  isEmpty() {
+    return this.items.length === 0
+  }
+}
+```
+
+- 使用 `constructor` 创建一个类（`class`），为每个实例初始化空数组 `items`。
+- 定义一个 `push()` 方法，使用 `Array.prototype.unshift()` 将元素添加到 `items` 数组的末尾。
+- 定义一个 `pop()` 方法，使用 `Array.prototype.shift()` 从 `items` 数组的开头删除元素。
+- 定义一个 `peek()` 方法，检索 `items` 数组中第一个元素的值，而不删除它。
+- 定义一个 `isEmpty()` 方法，使用 `Array.prototype.length` 判断 `items` 数组是否为空。
+
+```js
+const stack = new Stack()
+
+stack.push('apples')
+stack.push('oranges')
+stack.push('pears')
+
+stack.isEmpty() // false
+
+stack.peek() // 'pears'
+
+stack.pop() // 'pears'
+stack.pop() // 'oranges'
+stack.pop() // 'apples'
+
+stack.isEmpty() // true
+```
+
+以上内容来自 30 seconds of code 的 [JavaScript Data Structures - Stack](https://www.30secondsofcode.org/articles/s/js-data-structures-stack)
+
+## LeetCode 相关的堆栈题目
+
+[最小栈](https://leetcode.cn/problems/min-stack/)
+
+## 更多资料
+
+[Stack](https://github.com/trekhleb/javascript-algorithms/blob/master/src/data-structures/stack)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \351\223\276\350\241\250.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \351\223\276\350\241\250.md"
new file mode 100644
index 0000000..3cac821
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \351\223\276\350\241\250.md"	
@@ -0,0 +1,153 @@
+# 数据结构 — 链表
+
+[链表](https://zh.wikipedia.org/wiki/%E9%93%BE%E8%A1%A8)（Linked list）是一种表示元素集合的线性数据结构，其中每个元素指向下一个元素。链表中的第一个元素是 head，最后一个元素是 tail。
+
+![JavaScript 链表可视化](https://upload-images.jianshu.io/upload_images/18281896-11b2a41c0af5cadb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+链表数据结构的每个元素必须具有以下属性：
+
+- `value`：元素的值
+- `next`：指向链表中下一个元素的指针（如果没有，则为 `null`）
+
+链表数据结构的主要属性有：
+
+- `size`：链表中的元素个数
+- `head`：链表中的第一个元素
+- `tail`：链表中的最后一个元素
+
+链表数据结构的主要操作有：
+
+- `insertAt`：在特定索引处插入元素
+- `removeAt`：删除特定索引处的元素
+- `getAt`：检索特定索引处的元素
+- `clear`：清空链表
+- `reverse`：反转链表中元素的顺序
+
+## JavaScript 实现
+
+```js
+class LinkedList {
+  constructor() {
+    this.nodes = []
+  }
+
+  get size() {
+    return this.nodes.length
+  }
+
+  get head() {
+    return this.size ? this.nodes[0] : null
+  }
+
+  get tail() {
+    return this.size ? this.nodes[this.size - 1] : null
+  }
+
+  insertAt(index, value) {
+    const previousNode = this.nodes[index - 1] || null
+    const nextNode = this.nodes[index] || null
+    const node = { value, next: nextNode }
+
+    if (previousNode) previousNode.next = node
+    this.nodes.splice(index, 0, node)
+  }
+
+  insertFirst(value) {
+    this.insertAt(0, value)
+  }
+
+  insertLast(value) {
+    this.insertAt(this.size, value)
+  }
+
+  getAt(index) {
+    return this.nodes[index]
+  }
+
+  removeAt(index) {
+    const previousNode = this.nodes[index - 1]
+    const nextNode = this.nodes[index + 1] || null
+
+    if (previousNode) previousNode.next = nextNode
+
+    return this.nodes.splice(index, 1)
+  }
+
+  clear() {
+    this.nodes = []
+  }
+
+  reverse() {
+    this.nodes = this.nodes.reduce(
+      (acc, { value }) => [{ value, next: acc[0] || null }, ...acc],
+      []
+    )
+  }
+
+  *[Symbol.iterator]() {
+    yield* this.nodes
+  }
+}
+```
+
+- 创建一个具有 `constructor` 的类（`class`），为每个实例初始化一个空数组 `nodes`。
+- 定义一个 `size` getter，它使用 `Array.prototype.length` 返回 `nodes` 数组中元素的数量。
+- 定义一个 `head` getter，它返回 `nodes` 数组的第一个元素，如果为空，则返回 `null`。
+- 定义一个 `tail` getter，它返回 `nodes` 数组的最后一个元素，如果为空，则返回 `null`。
+- 定义一个 `insertAt()` 方法，使用 `Array.prototype.splice()` 在 `nodes` 数组中添加一个新对象，更新上一个元素的 `next` 键。
+- 定义两个便捷的方法 `insertFirst()` 和 `insertLast()`，它们分别使用 `insertAt()` 方法在 `nodes` 数组的开头或结尾插入新元素。
+- 定义一个 `getAt()` 方法，用于检索给定 `index` 的元素。
+- 定义一个 `removeAt()` 方法，使用 `Array.prototype.splice()` 删除 `nodes` 数组中的一个对象，更新上一个元素的 `next` 键。
+- 定义一个 `clear()` 方法，清空 `nodes` 数组。
+- 定义一个 `reverse()` 方法，使用 `Array.prototype.reduce()` 和扩展运算符（`...`）来反转 `nodes` 数组的顺序，适当地更新每个元素的 `next` 键。
+- 为 `Symbol.iterator` 定义一个生成器方法，使用 `yield*` 语法委托给 `nodes` 数组的迭代器。
+
+```js
+const list = new LinkedList()
+
+list.insertFirst(1)
+list.insertFirst(2)
+list.insertFirst(3)
+list.insertLast(4)
+list.insertAt(3, 5)
+
+list.size // 5
+list.head.value // 3
+list.head.next.value // 2
+list.tail.value // 4
+;[...list.map((e) => e.value)] // [3, 2, 1, 5, 4]
+
+list.removeAt(1) // 2
+list.getAt(1).value // 1
+list.head.next.value // 1
+;[...list].map((e) => e.value) // [3, 1, 5, 4]
+
+list.reverse()
+;[...list].map((e) => e.value) // [4, 5, 1, 3]
+
+list.clear()
+list.size // 0
+```
+
+以上内容译自 30 seconds of code 的 [JavaScript Data Structures - Linked List](https://www.30secondsofcode.org/articles/s/js-data-structures-linked-list)。
+
+## LeetCode 相关的链表题目
+
+- [删除链表的倒数第 N 个结点](https://leetcode.cn/problems/remove-nth-node-from-end-of-list/)
+- [合并两个有序链表](https://leetcode.cn/problems/merge-two-sorted-lists/)
+- [合并 K 个升序链表](https://leetcode.cn/problems/merge-k-sorted-lists/)
+- [环形链表](https://leetcode.cn/problems/linked-list-cycle/)
+- [环形链表 II](https://leetcode.cn/problems/linked-list-cycle-ii/)
+- [排序链表](https://leetcode.cn/problems/sort-list/)
+- [相交链表](https://leetcode.cn/problems/intersection-of-two-linked-lists/)
+- [反转链表](https://leetcode.cn/problems/reverse-linked-list/)
+- [反转链表 II](https://leetcode.cn/problems/reverse-linked-list-ii/)
+- [回文链表](https://leetcode.cn/problems/palindrome-linked-list/)
+- [重排链表](https://leetcode.cn/problems/LGjMqU/)
+- [二叉树展开为链表](https://leetcode.cn/problems/flatten-binary-tree-to-linked-list/)
+- [更多](https://leetcode.cn/search/?q=%E9%93%BE%E8%A1%A8)
+
+## 更多资料
+
+- [Linked List](https://github.com/trekhleb/javascript-algorithms/tree/master/src/data-structures/linked-list)
+- [递归魔法：反转单链表](https://labuladong.github.io/algo/2/18/18/)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \351\230\237\345\210\227.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \351\230\237\345\210\227.md"
new file mode 100644
index 0000000..f0b0e9a
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\225\260\346\215\256\347\273\223\346\236\204 \342\200\224 \351\230\237\345\210\227.md"	
@@ -0,0 +1,70 @@
+# 数据结构 — 队列
+
+[队列](https://zh.wikipedia.org/wiki/%E9%98%9F%E5%88%97)（Queue）是一种线性数据结构，其行为类似于现实世界的队列。它遵循先进先出（FIFO）的操作顺序，类似于现实世界的对应物。这意味着将新项目添加到队列的末尾，而从队列的开头删除项目。
+
+![JavaScript 队列可视化](https://upload-images.jianshu.io/upload_images/18281896-5b646a45bbdec542.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+队列数据结构的主要操作有：
+
+- `enqueue`：将元素添加到队列末尾
+- `dequeue`：从队列的开头移除元素
+- `peek`：检索队列开头的元素，而不删除它
+- `isEmpty`：检查队列是否为空
+
+## JavaScript 实现
+
+```js
+class Queue {
+  constructor() {
+    this.items = []
+  }
+
+  enqueue(item) {
+    this.items.push(item)
+  }
+
+  dequeue(item) {
+    return this.items.shift()
+  }
+
+  peek(item) {
+    return this.items[0]
+  }
+
+  isEmpty() {
+    return this.items.length === 0
+  }
+}
+```
+
+- 使用 `constructor` 创建一个类（`class`），为每个实例初始化空数组 `items`。
+- 定义一个 `enqueue()` 方法，使用 `Array.prototype.push()` 将元素添加到 `items` 数组的末尾。
+- 定义一个 `dequeue()` 方法，使用 `Array.prototype.shift()` 从 `items` 数组的开头删除元素。
+- 定义一个 `peek()` 方法，检索 `items` 数组中第一个元素的值，而不删除它。
+- 定义一个 `isEmpty()` 方法，使用 `Array.prototype.length` 判断 `items` 数组是否为空。
+
+```js
+const queue = new Queue()
+
+queue.isEmpty() // true
+
+queue.enqueue('A')
+queue.enqueue('B')
+queue.enqueue('C')
+queue.enqueue('D')
+queue.enqueue('E')
+
+queue.isEmpty() // false
+
+queue.peek() // 'A'
+
+queue.dequeue() // 'A'
+queue.dequeue() // 'B'
+queue.dequeue() // 'C'
+```
+
+以上内容来自 30 seconds of code 的 [JavaScript Data Structures - Queue](https://www.30secondsofcode.org/articles/s/js-data-structures-queue)
+
+## 更多资料
+
+[Queue](https://github.com/trekhleb/javascript-algorithms/blob/master/src/data-structures/queue)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232LRU \347\274\223\345\255\230.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232LRU \347\274\223\345\255\230.md"
new file mode 100644
index 0000000..bc4c984
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232LRU \347\274\223\345\255\230.md"	
@@ -0,0 +1,88 @@
+# 每日一算法：LRU 缓存
+
+[LRU](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>)（Least Recently Used，最近最少使用）缓存是一种数据缓存策略，其核心思想是**删除最近最少使用的数据来释放空间**。
+
+实现 LRU 缓存的方法有很多，常见的有两种：
+
+- 使用双向链表 — 每次访问缓存数据时将其移到链表头部，当缓存满时将链表尾部的数据删除
+- 使用哈希表加队列 — 每次访问缓存数据时将其移到队列头部，当缓存满时将队列尾部的数据删除，同时在哈希表中删除对应的键值对。
+
+还有一点需要注意，**新数据将插入到链表/队列头部**。
+
+## JavaScript 实现
+
+我们可以使用 JavaScript 的 Map 来实现的一个简单的 LRU 缓存。其中 `get` 方法根据给定的键获取值，并将其放到缓存的最前面。`put` 方法则用来向缓存中添加数据，如果缓存已满，则会删除最近最少使用的数据。
+
+```js
+class LRUCache {
+  constructor(capacity) {
+    // 初始化 LRU 最大容量
+    this.capacity = capacity
+    this.cache = new Map()
+  }
+
+  get(key) {
+    if (!this.cache.has(key)) return -1
+    const value = this.cache.get(key)
+    if (typeof value === 'number') {
+      this.cache.delete(key)
+      this.cache.set(key, value)
+      return value
+    }
+  }
+
+  put(key, value) {
+    if (this.cache.has(key)) this.cache.delete(key)
+    this.cache.set(key, value)
+    if (this.cache.size > this.capacity) {
+      this.cache.delete(this.cache.keys().next().value)
+    }
+  }
+}
+```
+
+在这个算法中，获取数据和添加数据的时间复杂度都为 `O(1)`，因为我们使用了 JavaScript 的 Map 实现。
+
+它是基于哈希表实现的，具有高效的键值对存储和查询。而限制容量大小也是 `O(1)` 的，因为我们使用了 `Map.size` 来进行容量限制，每次添加时都会检查是否超过容量。
+
+综上所述，这个简单的 LRU 缓存的时间复杂度是 `O(1)`。
+
+当然实际的实现可能有更优秀的算法和数据结构，更多的调优可能使它更加高效稳定，这里只是一个简单的实现例子。
+
+使用示例：
+
+```js
+const cache = new LRUCache(2)
+
+cache.put(1, 1)
+cache.put(2, 2)
+cache.get(1) // 1
+cache.put(3, 3) // 该操作会使得 key 2 被移除
+cache.get(2) // -1 => 未找到
+cache.put(4, 4) // 该操作会使得 key 1 被移除
+cache.get(1) // -1 => 未找到
+cache.get(3) // 3
+cache.get(4) // 4
+```
+
+## `get` 和 `put` 哪个操作使用频率更高？
+
+对于 LRU 算法来说，`get` 操作的使用频率通常比 `put` 操作的使用频率高，因为缓存的主要目的是为了提高获取数据的速度，而 `put` 操作的主要目的是为了更新缓存。
+
+## LRU 的使用场景
+
+LRU 算法通常用于缓存数据，最常见的应用场景包括：
+
+- 分布式缓存系统，如 Memcached 和 Redis
+- 浏览器缓存，如 HTTP 缓存和浏览器缓存
+- 操作系统缓存，如文件系统缓存和网络缓存
+- 运算中使用缓存，如矩阵乘法，这样可以提高运算的效率
+
+很多前端框架、库都使用到了 LRU 缓存，例如 Vue 的 `keep-alive` 的 `max` 属性便使用了 LRU 缓存策略来支持可以缓存多少组件实例。
+
+总之，LRU 缓存算法在那些需要快速访问最近使用的数据，同时需要限制缓存大小的场景中是非常有用的。
+
+## 更多资料
+
+- [LeetCode 上有多道 LRU 缓存相关的算法题](https://leetcode.cn/search/?q=LRU)。
+- [node-lru-cache](https://github.com/isaacs/node-lru-cache) — 一个用于 Node.js 的 LRU 缓存库，基于 JavaScript 的对象和链表。你可以尝试解读该库[源码](https://github.com/isaacs/node-lru-cache/blob/main/index.js)。
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232Levenshtein \350\267\235\347\246\273.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232Levenshtein \350\267\235\347\246\273.md"
new file mode 100644
index 0000000..df3dd80
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232Levenshtein \350\267\235\347\246\273.md"	
@@ -0,0 +1,54 @@
+# 每日一算法：Levenshtein 距离
+
+> [**莱文斯坦距离**](https://zh.wikipedia.org/wiki/%E8%90%8A%E6%96%87%E6%96%AF%E5%9D%A6%E8%B7%9D%E9%9B%A2)，又称**Levenshtein 距离**，是编辑距离的一种。指两个字串之间，由一个转成另一个所需的最少编辑操作次数。
+
+允许的编辑操作包括：
+
+- 将一个字符替换成另一个字符
+- 插入一个字符
+- 删除一个字符
+
+## JavaScript 实现
+
+使用 Levenshtein 距离算法计算两个字符串之间的差。
+
+- 如果两个字符串中的任何一个 `length` 为零，则返回另一个字符串的 `length`。
+- 使用 `for` 循环迭代目标字符串的字母，使用嵌套 `for` 循环迭代源字符串的字母。
+- 计算替换目标和源中 `i-1` 和 `j-1` 对应的字母的成本（如果相同，则为 `0`，否则为 `1`）。
+- 使用 `Math.min()` 用上面的单元格的最小值加 1、左边的单元格的最小值加 1 或左上角的单元格的最小值加上先前计算的成本填充二维数组中的每个元素。
+- 返回所生成数组最后一行的最后一个元素。
+
+```js
+const levenshteinDistance = (s, t) => {
+  if (!s.length) return t.length
+  if (!t.length) return s.length
+  const arr = []
+  for (let i = 0; i <= t.length; i++) {
+    arr[i] = [i]
+    for (let j = 1; j <= s.length; j++) {
+      arr[i][j] =
+        i === 0
+          ? j
+          : Math.min(
+              arr[i - 1][j] + 1,
+              arr[i][j - 1] + 1,
+              arr[i - 1][j - 1] + (s[j - 1] === t[i - 1] ? 0 : 1)
+            )
+    }
+  }
+  return arr[t.length][s.length]
+}
+
+levenshteinDistance('duck', 'dark') // 2
+```
+
+此示例来自 30 seconds of code 的 [levenshteinDistance](https://www.30secondsofcode.org/js/s/levenshtein-distance)
+
+## LeetCode 关于 Levenshtein 距离的题目
+
+[编辑距离](https://leetcode-cn.com/problems/edit-distance/)
+
+## 更多资料
+
+- [Levenshtein Distance](https://github.com/trekhleb/javascript-algorithms/blob/master/src/algorithms/string/levenshtein-distance) - minimum edit distance between two sequences
+- [Levenshteins Edit Distance](https://algorithm-visualizer.org/dynamic-programming/levenshteins-edit-distance) 可视化 Levenshtein 距离
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232k \345\235\207\345\200\274.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232k \345\235\207\345\200\274.md"
new file mode 100644
index 0000000..f940951
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232k \345\235\207\345\200\274.md"	
@@ -0,0 +1,71 @@
+# 每日一算法：k 均值
+
+> [**k-均值算法**](https://zh.wikipedia.org/wiki/K-%E5%B9%B3%E5%9D%87%E7%AE%97%E6%B3%95)（k-means clustering）源于信号处理中的一种向量量化方法，现在则更多地作为一种聚类分析方法流行于数据挖掘和机器学习领域。
+
+## 示例
+
+使用 k-means clustering 算法将给定的数据分组成 k 个聚类。
+
+- 使用 `Array.from()` 和 `Array.prototype.slice()` 为簇的质心、距离和类初始化适当的变量。
+- 使用 `while` 循环重复赋值和更新步骤，只要上一次迭代中有更改，如 `itr` 所示。
+- 使用 `Math.hypot()`，`Object.keys()` 和 `Array.prototype.map()` 计算每个数据点和质心之间的欧氏距离 。
+- 使用 `Array.prototype.indexOf()` 和 `Math.min()` 找到最近的质心。
+- 使用 `Array.from()` 和 `Array.prototype.reduce()`，以及 `parseFloat()` 和 `Number.prototype.toFixed()` 计算新的质心。
+
+```js
+const kMeans = (data, k = 1) => {
+  const centroids = data.slice(0, k)
+  const distances = Array.from({ length: data.length }, () =>
+    Array.from({ length: k }, () => 0)
+  )
+  const classes = Array.from({ length: data.length }, () => -1)
+  let itr = true
+
+  while (itr) {
+    itr = false
+
+    for (let d in data) {
+      for (let c = 0; c < k; c++) {
+        distances[d][c] = Math.hypot(
+          ...Object.keys(data[0]).map((key) => data[d][key] - centroids[c][key])
+        )
+      }
+      const m = distances[d].indexOf(Math.min(...distances[d]))
+      if (classes[d] !== m) itr = true
+      classes[d] = m
+    }
+
+    for (let c = 0; c < k; c++) {
+      centroids[c] = Array.from({ length: data[0].length }, () => 0)
+      const size = data.reduce((acc, _, d) => {
+        if (classes[d] === c) {
+          acc++
+          for (let i in data[0]) centroids[c][i] += data[d][i]
+        }
+        return acc
+      }, 0)
+      for (let i in data[0]) {
+        centroids[c][i] = parseFloat(Number(centroids[c][i] / size).toFixed(2))
+      }
+    }
+  }
+
+  return classes
+}
+
+kMeans(
+  [
+    [0, 0],
+    [0, 1],
+    [1, 3],
+    [2, 0]
+  ],
+  2
+) // [0, 1, 1, 0]
+```
+
+此示例来自 30 seconds of code 的 [K-means clustering](https://www.30secondsofcode.org/js/s/k-means)
+
+## 更多资料
+
+[k-Means](https://github.com/trekhleb/javascript-algorithms/blob/master/src/algorithms/ml/k-means) - k-Means clustering algorithm
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\344\272\214\345\210\206\346\237\245\346\211\276.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\344\272\214\345\210\206\346\237\245\346\211\276.md"
new file mode 100644
index 0000000..b364526
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\344\272\214\345\210\206\346\237\245\346\211\276.md"
@@ -0,0 +1,116 @@
+# 每日一算法：二分查找
+
+二分查找 (Binary Search) 是一种经典算法，它允许我们在时间复杂度为 `O(log n)` 的有序数组中查找给定元素的索引。
+
+在本文中，我们将回顾该算法的工作原理，并学习如何在 JavaScript 中实现它。
+
+## 一个概念性的例子
+
+二分查找的工作原理是连续将数组一分为二，并查看中间的数字，直到找到匹配项（或未找到匹配项）。假设我们有一个数组 `[2, 3, 4, 6, 7, 9, 10]`，我们需要找到数字 `7` 的索引。
+
+![初始数组](https://upload-images.jianshu.io/upload_images/18281896-5e18860daa72c0ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+在二分查找中，我们首先确定数组中的中间项，并将其与我们要查找的数字进行比较。我们可以通过将数组开头的索引（0）与数组结尾的索引（6）相加并除以 2 来找到中间索引。换句话说，`middle = (start + end) / 2 = (6 + 0) / 2 = 3`。
+
+![第一遍](https://upload-images.jianshu.io/upload_images/18281896-618adf3357045c49.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+索引 3 处的数字是 6。我们将其与我们要查找的数字 7 进行比较。由于 6 小于 7，我们现在知道 6 左侧（包括）的所有项都小于我们要查找到的数字（这就是为什么对数组进行排序至关重要）。
+
+![数字太低了](https://upload-images.jianshu.io/upload_images/18281896-9bbd714b01499799.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+由于排除了所有这些数字，我们现在可以将其视为一个新数组，将开始位置移动到前一个中间位置的右侧，而结束位置仍然在数组的末尾。
+
+![第二遍](https://upload-images.jianshu.io/upload_images/18281896-21110fb125096553.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+我们以相同的方式计算中间索引：`middle = (start + end) / 2 = (4 + 6) / 2 = 5`。新中间索引处的数字是 9，现在大于 7。因此，我们知道 9 右侧（包括）的所有项都大于我们要查找的数字。
+
+我们重复这个过程并创建一个新的子数组，但这次我们的末端移动到第 5 个索引的左侧。此时，我们的起点和终点索引均为 4，这意味着我们的中间索引计算为：`middle = (4 + 4) / 2 = 4`。
+
+![第三遍](https://upload-images.jianshu.io/upload_images/18281896-2a4d4d18f2e6e68b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+我们现在发现这个数字就是我们要找的！因此，我们从算法返回索引 `4`。
+
+## 在 JavaScript 中实现这个算法
+
+通常，二分查找函数将接收两个输入：排序后的数组和目标数。通常，函数的目标是输出目标值的索引，如果找不到目标值，则输出数字 `-1`。
+
+```js
+function binarySearch(array, target) {
+  // TBD
+}
+```
+
+通过以上的概念回顾，我们可以看到，在整个算法中都有一个起点和终点。因此，我们可以使用 `let` 初始化这些值，假设它们将发生变化：
+
+```js
+function binarySearch(array, target) {
+  let start = 0
+  let end = array.length - 1
+}
+```
+
+接下来，我们将实现一个循环，该循环将继续将数组切成两半，直到找到正确的索引。循环不可能是无限的，所以我们需要考虑它应该何时终止。
+
+我们在概念示例中看到，我们不能有一个大于结束索引的开始索引：
+
+```js
+function binarySearch(array, target) {
+  let start = 0
+  let end = array.length - 1
+  while (start <= end) {
+    // TBD
+  }
+  // 如果我们走到这一步，则表明找不到目标元素，返回 -1
+  return -1
+}
+```
+
+请注意，如果开始索引大于结束索引，则数组中的所有项都已排除完，并且目标根本不存在，因此返回 `-1`。
+
+最后，我们可以实现算法的核心逻辑：
+
+- 寻找中间项
+- 如果中间项等于目标，则返回索引（我们找到了！）
+- 如果中间项大于目标，则将结束索引移动到中间项的左侧
+- 如果中间项小于目标，则将开始索引移动到中间项的右侧
+
+```js
+const binarySearch = (arr, target) => {
+  let start = 0,
+    end = arr.length - 1
+  while (start <= end) {
+    // 找到中间索引
+    const middle = Math.floor((start + end) / 2)
+    const guess = arr[middle]
+    if (guess === target) return middle
+    if (guess > target) end = middle - 1
+    else start = middle + 1
+  }
+
+  return -1
+}
+
+binarySearch([1, 2, 3, 4, 5], 1) // 0
+binarySearch([1, 2, 3, 4, 5], 5) // 4
+binarySearch([1, 2, 3, 4, 5], 6) // -1
+```
+
+你可能已经注意到我使用 `Math.floor` 来计算中间索引。这是因为具有偶数项的数组没有真正的中间项，所以我们要确保有一个整数索引，而不是像 2.5 之类的索引。
+
+## 计算时间复杂度
+
+我在上面提到过，这个算法的时间复杂度是 `O(log n)`。这可以通过考虑你可能需要将任意列表长度 (n) 除以 2 多少次数来计算，直到只剩下一项。所以我们的方程是这样的，我们要求解 `x`。
+
+```txt
+1 = n / (2^x)
+2^x = n
+log(2^x) = log(n)
+x * log(2) = log(n)
+x = log(n)
+```
+
+## 更多资料
+
+- [Binary Search](https://github.com/trekhleb/javascript-algorithms/blob/master/src/algorithms/search/binary-search)
+- [Binary Search](https://algorithm-visualizer.org/branch-and-bound/binary-search) 可视化二分查找
+- [二分查找如何定位左边界和右边界](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/320)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\344\272\214\351\241\271\345\274\217\347\263\273\346\225\260.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\344\272\214\351\241\271\345\274\217\347\263\273\346\225\260.md"
new file mode 100644
index 0000000..4557345
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\344\272\214\351\241\271\345\274\217\347\263\273\346\225\260.md"
@@ -0,0 +1,30 @@
+# 每日一算法：二项式系数
+
+> 在数学上，[二项式系数](https://zh.wikipedia.org/wiki/%E4%BA%8C%E9%A0%85%E5%BC%8F%E4%BF%82%E6%95%B8)，或组合数，是定义为形如 (1 + x)ⁿ 展开后 x 的系数（其中 n 为自然数，k 为整数）。从定义可看出二项式系数的值为整数。
+
+## JavaScript 示例
+
+计算从 `n` 个元素中选择 `k` 个元素的方法的个数（不重复且不按顺序）。
+
+- 使用 `Number.isNaN()` 检查任何两个值是否为 `NaN`。
+- 检查 `k` 是否小于 `0`、大于或等于 `n`，等于 `1` 或 `n - 1`，并返回适当的结果。
+- 检查 `n - k` 是否小于 `k`，并相应地切换其值。
+- 从 `2` 到 `k` 循环并计算二项式系数。
+- 使用 `Math.round()` 解决计算中的舍入误差。
+
+```js
+const binomialCoefficient = (n, k) => {
+  if (Number.isNaN(n) || Number.isNaN(k)) return NaN
+  if (k < 0 || k > n) return 0
+  if (k === 0 || k === n) return 1
+  if (k === 1 || k === n - 1) return n
+  if (n - k < k) k = n - k
+  let res = n
+  for (let j = 2; j <= k; j++) res *= (n - j + 1) / j
+  return Math.round(res)
+}
+
+binomialCoefficient(8, 2) // 28
+```
+
+此示例来自 30 seconds of code 的 [binomialCoefficient](https://www.30secondsofcode.org/js/s/binomial-coefficient)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\206\222\346\263\241\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\206\222\346\263\241\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..4ffda43
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\206\222\346\263\241\346\216\222\345\272\217.md"
@@ -0,0 +1,53 @@
+# 每日一算法：冒泡排序
+
+冒泡排序是最糟糕的排序之一，但了解冒泡排序的工作原理对你来说很重要。主要原因是要理解它的功能，避免在代码中做任何与它有点相似的事情。
+
+## 原理
+
+比较相邻的元素。如果第一个比第二个大，就交换他们两个。
+
+对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
+
+针对所有的元素重复以上的步骤，除了最后一个。
+
+持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
+
+![numbers swapped](https://upload-images.jianshu.io/upload_images/18281896-254d16f74ebf00b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## JavaScript 实现
+
+使用冒泡排序算法对数字数组进行排序。
+
+- 声明一个变量 `swapped`，该变量指示在当前迭代期间是否交换了任何值。
+- 使用扩展运算符（`...`）克隆原始数组 `arr`。
+- 使用 `for` 循环遍历克隆数组的元素，在最后一个元素之前终止。
+- 使用嵌套 `for` 循环在 `0` 和 `i` 之间的数组段上进行迭代，交换任何相邻的乱序元素，并将 `swapped` 设置为 `true`。
+- 如果 `swapped` 在一次迭代后为 `false`，则不需要进行更多更改，因此将返回克隆的数组。
+
+```js
+const bubbleSort = (arr) => {
+  let swapped = false
+  const a = [...arr]
+  for (let i = 1; i < a.length - 1; i++) {
+    swapped = false
+    for (let j = 0; j < a.length - i; j++) {
+      if (a[j + 1] < a[j]) {
+        ;[a[j], a[j + 1]] = [a[j + 1], a[j]]
+        swapped = true
+      }
+    }
+    // swapped 表示如果某次循环中没有交换过元素，那么意味着排序已经完成
+    if (!swapped) return a
+  }
+  return a
+}
+
+bubbleSort([2, 1, 4, 3]) // [1, 2, 3, 4]
+```
+
+此示例来自 30 seconds of code 的 [bubbleSort](https://www.30secondsofcode.org/js/s/bubble-sort)
+
+## 更多资料
+
+- [Bubble Sort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/bubble-sort)
+- [Bubble Sort](https://algorithm-visualizer.org/brute-force/bubble-sort) 可视化冒泡排序
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\207\257\346\222\222\345\257\206\347\240\201.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\207\257\346\222\222\345\257\206\347\240\201.md"
new file mode 100644
index 0000000..6f0e859
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\207\257\346\222\222\345\257\206\347\240\201.md"
@@ -0,0 +1,51 @@
+# 凯撒密码
+
+> [**凯撒密码**](https://zh.wikipedia.org/zh-cn/%E5%87%B1%E6%92%92%E5%AF%86%E7%A2%BC)（Caesar cipher）是一种最简单且最广为人知的加密技术。凯撒密码是一种替换加密技术，明文中的所有字母都在字母表上向后（或向前）按照一个固定数目进行偏移后被替换成密文。
+
+例如，当偏移量是 3 的时候，所有的字母 A 将被替换成 D，B 变成 E，以此类推。
+
+![凯撒密码](https://upload-images.jianshu.io/upload_images/18281896-a10b4c90c6435259.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## JavaScript 实现
+
+使用凯撒密码对给定的字符串进行加密或解密。
+
+- 使用模（`%`）运算符和三元运算符（`?`）计算正确的加密/解密密钥。
+- 使用扩展运算符（`...`）和 `Array.prototype.map()` 遍历给定字符串的字母。
+- 使用 `String.prototype.charCodeAt()` 和 `String.fromCharCode()` 适当地转换每个字母，而忽略特殊字符、空格等。
+- 使用 `Array.prototype.join()` 将所有的字母组合成一个字符串。
+- 将 `true` 传递给最后一个参数 `decrypt`，以解密加密字符串。
+
+```js
+const caesarCipher = (str, shift, decrypt = false) => {
+  const s = decrypt ? (26 - shift) % 26 : shift
+  const n = s > 0 ? s : 26 + (s % 26)
+  return [...str]
+    .map((l, i) => {
+      const c = str.charCodeAt(i)
+      if (c >= 65 && c <= 90)
+        return String.fromCharCode(((c - 65 + n) % 26) + 65)
+      if (c >= 97 && c <= 122)
+        return String.fromCharCode(((c - 97 + n) % 26) + 97)
+      return l
+    })
+    .join('')
+}
+
+caesarCipher('Hello World!', -3) // 'Ebiil Tloia!'
+caesarCipher('Ebiil Tloia!', 23, true) // 'Hello World!'
+```
+
+此示例来自 30 seconds of code 的 [euclideanDistance](https://www.30secondsofcode.org/js/s/caesar-cipher)
+
+## LeetCode 关于加密解密的题目
+
+- [TinyURL 的加密与解密](https://leetcode-cn.com/problems/encode-and-decode-tinyurl/)
+- [解码方法 II](https://leetcode-cn.com/problems/decode-ways-ii/)
+- [解码方法](https://leetcode-cn.com/problems/decode-ways/)
+
+## 更多资料
+
+- [Caesar Cipher](https://github.com/trekhleb/javascript-algorithms/blob/master/src/algorithms/cryptography/caesar-cipher)
+- [Caesar Cipher](https://algorithm-visualizer.org/uncategorized/caesar-cipher) — 可视化凯撒密码演示
+- [How to code the Caesar Cipher: an introduction to basic encryption](https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\210\206\346\262\273\346\263\225.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\210\206\346\262\273\346\263\225.md"
new file mode 100644
index 0000000..c9f0131
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\210\206\346\262\273\346\263\225.md"
@@ -0,0 +1,24 @@
+# 每日一算法：分治法
+
+> 在计算机科学中，[**分治法**](https://zh.wikipedia.org/wiki/%E5%88%86%E6%B2%BB%E6%B3%95)（Divide and Conquer，DAC）是建基于多项分支递归的一种很重要的算法范型。字面上的解释是“分而治之”，就是把一个复杂的问题分成两个或更多的相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并。
+
+它分为三个阶段：
+
+- 分解 —— 将问题分解为子问题；
+- 解决 —— 使用递归解决子问题；
+- 合并 —— 将子问题的结果合并到最终解决方案中。
+
+## 它能用来干什么？
+
+DAC 的一种实际应用是使用多个处理器的并行编程，因此子问题在不同的机器上执行。
+
+DAC 是许多高效算法的基础，例如：如排序算法（归并排序、快速排序）、傅立叶变换（快速傅立叶变换）、二进制搜索等。
+
+## 特性
+
+- 每个 DAC 问题都可以写成递归关系；因此，找到停止递归的基本情况至关重要。
+- 它的复杂度为 **T(n)= D(n) + C(n) + M(n)**，这意味着每个阶段的复杂度取决于问题。
+
+## LeetCode 关于分治算法的题目
+
+[分治算法](https://leetcode-cn.com/tag/divide-and-conquer/problemset/)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\237\272\346\225\260\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\237\272\346\225\260\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..571b397
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\237\272\346\225\260\346\216\222\345\272\217.md"
@@ -0,0 +1,43 @@
+# 每日一算法：基数排序
+
+基数排序是一种非比较排序算法，它通过将数值的各个位上的数字分配到不同的桶中，然后对每个桶中的数字进行排序来实现排序。
+
+基数排序一般有两种实现方式：从低位到高位（Least Significant Digit，LSD）和从高位到低位（Most Significant Digit，MSD）。这里我们先介绍 LSD 方式的基数排序。
+
+LSD 基数排序的步骤如下：
+
+- 从低位到高位，对于每一位上的数字进行分配，将数字分配到对应的桶中
+- 将每个桶中的数字依次取出，还原成有序数组
+- 重复 1~2 的步骤，直到对最高位进行分配排序
+
+基数排序的时间复杂度是 `O(d(n + k))`，d 是位数，n 是数组长度，k 是桶的大小。空间复杂度为 `O(n + k)`。
+
+## JavaScript 实现
+
+```js
+const radixSort = (arr) => {
+  let max = Math.max(...arr)
+  let digits = (max + '').length
+  for (let i = 0; i < digits; i++) {
+    let buckets = Array.from({ length: 10 }, () => [])
+    for (let j = 0; j < arr.length; j++) {
+      let digit = getDigit(arr[j], i)
+      buckets[digit].push(arr[j])
+    }
+    arr = [].concat(...buckets)
+  }
+  return arr
+}
+
+const getDigit = (num, i) => {
+  return Math.floor(Math.abs(num) / Math.pow(10, i)) % 10
+}
+
+radixSort([1, 6, 1, 5, 3, 2, 1, 4]) // [1, 1, 1, 2, 3, 4, 5, 6]
+```
+
+## 更多资料
+
+- [Radix Sort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/radix-sort)
+- [Radix Sort](https://algorithm-visualizer.org/divide-and-conquer/radix-sort)
+
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\240\206\346\216\222\345\272\217 .md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\240\206\346\216\222\345\272\217 .md"
new file mode 100644
index 0000000..608ddcc
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\240\206\346\216\222\345\272\217 .md"	
@@ -0,0 +1,74 @@
+# 每日一算法：堆排序
+
+堆排序是一种利用堆数据结构来排序的算法。堆是一种特殊的树形结构，每个节点都大于等于或小于等于其子节点。
+
+堆排序使用两种堆：**最大堆和最小堆**。最大堆要求父节点的值大于等于子节点的值，最小堆要求父节点的值小于等于子节点的值。
+
+堆排序算法的步骤：
+
+- 构建堆，通常使用最大堆或最小堆。
+- 把堆顶元素移到末尾，调整剩余的元素为堆。
+- 重复以上步骤直到排序完成。
+
+堆排序的时间复杂度是 `O(n * log(n))`，空间复杂度 `O(1)`。
+
+## JavaScript 实现
+
+- `buildHeap` 函数用于构建堆。它首先遍历数组的一半，然后调用 `heapify` 函数将每一项变为一个大根堆。
+- `heapify` 函数用于调整堆。它会比较当前项与左右子节点的大小，如果有更大的值就将其与当前项交换位置。
+- `heapSort` 函数用于排序。它首先调用 `buildHeap` 函数构建堆，然后通过循环不断将堆顶元素与堆底元素交换位置，再调用 `heapify` 函数调整堆，直到堆中只剩下一个元素。
+
+代码如下：
+
+```js
+// 构建堆
+const buildHeap = (arr) => {
+  for (let i = Math.floor(arr.length / 2); i >= 0; i--) {
+    heapify(arr, i, arr.length)
+  }
+}
+
+// 调整堆
+const heapify = (arr, i, max) => {
+  let index, leftChild, rightChild
+  while (i < max) {
+    index = i
+    leftChild = 2 * i + 1
+    rightChild = 2 * i + 2
+    if (leftChild < max && arr[leftChild] > arr[index]) {
+      index = leftChild
+    }
+    if (rightChild < max && arr[rightChild] > arr[index]) {
+      index = rightChild
+    }
+    if (index === i) return
+    ;[arr[i], arr[index]] = [arr[index], arr[i]]
+    i = index
+  }
+}
+
+// 排序
+const heapSort = (arr) => {
+  buildHeap(arr)
+  let end = arr.length - 1
+  while (end > 0) {
+    ;[arr[end], arr[0]] = [arr[0], arr[end]]
+    heapify(arr, 0, end)
+    end--
+  }
+  return arr
+}
+
+heapSort([6, 3, 4, 1]) // [1, 3, 4, 6]
+```
+
+需要注意，堆排序是一种不稳定排序算法，在某些情况下会导致相同元素的相对顺序发生改变。
+
+堆排序是一种高效的排序算法，它的时间复杂度是 `O(n * log(n))`，因此它通常被用于**排序大数据集**。它还有一些其他的优点，例如它可以在线性时间内找到最大/最小元素，这对于某些应用来说非常重要。
+
+不过，堆排序同时也有缺点，因为它需要额外的空间来存储堆，并且它不适用于所有类型的数据。对于某些数据集，堆排序的性能可能不如其他算法。
+
+## 更多资料
+
+- [Heap Sort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/heap-sort)
+- [Heapsort](https://algorithm-visualizer.org/brute-force/heapsort)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\275\222\345\271\266\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\275\222\345\271\266\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..9d60a53
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\275\222\345\271\266\346\216\222\345\272\217.md"
@@ -0,0 +1,86 @@
+# 每日一算法：归并排序
+
+归并排序（Merge sort）是一种使用“分而治之”概念的排序算法。
+
+作为一种典型的分而治之思想的算法应用，归并排序的实现有两种方法：
+
+- 自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第 2 种方法）
+- 自下而上的迭代
+
+**归并只做两件事**：
+
+- 把它的输入分成几个小节，直到每个小节只剩下一个元素。
+- 将其所有子部分合并（并排序）为一个现在已排序的大部分。
+
+假设我们的数组是这样的：
+
+```txt
+[4, 3, 1, 2]
+```
+
+我们首先将数组分成 2 个数组：
+
+```txt
+[4, 3]
+[1, 2]
+```
+
+然后我们递归地划分这些数组：
+
+```txt
+[4]
+[3]
+```
+
+和
+
+```txt
+[1]
+[2]
+```
+
+然后，通过对这些元素进行排序来构造结果：
+
+```txt
+[3, 4]
+[1, 2]
+```
+
+然后我们合并这两个数组：
+
+```txt
+[1, 2, 3, 4]
+```
+
+## JavaScript 实现
+
+使用归并排序算法对数字数组进行排序。
+
+- 使用递归。
+- 如果 `length` 数组的小于 `2`，则返回数组。
+- 使用 `Math.floor()` 计算数组的中间点。
+- 使用 `Array.prototype.slice()` 将数组一分为二，并在创建的子数组上递归调用 `mergeSort()`。
+- 最后，使用 `Array.from()` 和 `Array.prototype.shift()` 将两个排序后的子数组合并为一个。
+
+```js
+const mergeSort = (arr) => {
+  if (arr.length < 2) return arr
+  const mid = Math.floor(arr.length / 2)
+  const l = mergeSort(arr.slice(0, mid))
+  const r = mergeSort(arr.slice(mid, arr.length))
+  return Array.from({ length: l.length + r.length }, () => {
+    if (!l.length) return r.shift()
+    else if (!r.length) return l.shift()
+    else return l[0] > r[0] ? r.shift() : l.shift()
+  })
+}
+
+mergeSort([5, 1, 4, 2, 3]) // [1, 2, 3, 4, 5]
+```
+
+此示例来自 30 seconds of code 的 [mergeSort](https://www.30secondsofcode.org/js/s/merge-sort)
+
+## 更多资料
+
+- [Merge Sort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/merge-sort)
+- [Merge Sort](https://algorithm-visualizer.org/divide-and-conquer/merge-sort) 可视化归并排序
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\277\253\351\200\237\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\277\253\351\200\237\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..e1bd4f5
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\345\277\253\351\200\237\346\216\222\345\272\217.md"
@@ -0,0 +1,54 @@
+# 每日一算法：快速排序
+
+快速排序是一种最流行的排序算法之一，它的关键在于，快速排序是一种**分而治之的算法**。如果你不了解，可以查看我之前写的一篇：[每日一算法：分治法](https://www.jianshu.com/p/b93e287a0957)。
+
+## 原理
+
+- 从数列中挑出一个元素，称为 "基准"（pivot）
+- 重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。在这个分区退出之后，该基准就处于数列的中间位置。这个称为分区（partition）操作
+- 递归地（recursive）把小于基准值元素的子数列和大于基准值元素的子数列排序
+
+它与归并排序思路类似，都是用到了分治法，区别在于快排边分区边排序，而归并在分区完成后才会排序。
+
+## JavaScript 实现
+
+使用 quicksort 算法对数字数组进行排序。
+
+- 使用递归。
+- 使用扩展运算符（`...`）克隆原始数组 `arr`。
+- 如果数组的 `length` 小于 `2`，则返回克隆的数组。
+- 使用 `Math.floor()` 计算轴心元素的索引。
+- 使用 `Array.prototype.reduce()` 和 `Array.prototype.push()` 将数组拆分为两个子数组（元素小于或等于 `pivot` 和大于元素，并将其分解为两个数组）。
+- 递归调用 `quickSort()` 创建的子数组。
+
+```js
+const quickSort = (arr) => {
+  const a = [...arr]
+  if (a.length < 2) return a
+  const pivotIndex = Math.floor(arr.length / 2)
+  const pivot = a[pivotIndex]
+  const [lo, hi] = a.reduce(
+    (acc, val, i) => {
+      if (val < pivot || (val === pivot && i != pivotIndex)) {
+        acc[0].push(val)
+      } else if (val > pivot) {
+        acc[1].push(val)
+      }
+      return acc
+    },
+    [[], []]
+  )
+  return [...quickSort(lo), pivot, ...quickSort(hi)]
+}
+
+quickSort([1, 6, 1, 5, 3, 2, 1, 4]) // [1, 1, 1, 2, 3, 4, 5, 6]
+```
+
+此示例来自 30 seconds of code 的 [quickSort](https://www.30secondsofcode.org/js/s/quick-sort)
+
+## 更多资料
+
+- [Quicksort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/quick-sort)
+- [Quicksort](https://algorithm-visualizer.org/divide-and-conquer/quicksort) 可视化快速排序
+- [快速排序 PDF 文档](https://home.cse.ust.hk/~dekai/271/notes/L01a/quickSort.pdf)
+- [QuickSort Tail Call Optimization (Reducing worst case space to Log n )](https://www.geeksforgeeks.org/quicksort-tail-call-optimization-reducing-worst-case-space-log-n/)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\216\222\345\210\227.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\216\222\345\210\227.md"
new file mode 100644
index 0000000..67239d1
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\216\222\345\210\227.md"
@@ -0,0 +1,36 @@
+# 每日一算法：排列
+
+> [**排列**](https://zh.wikipedia.org/wiki/%E7%BD%AE%E6%8F%9B)（Permutation）是将相异对象或符号根据确定的顺序重排。每个顺序都称作一个**排列**。
+>
+> 例如，从一到六的数字有 720 种排列，对应于由这些数字组成的所有不重复亦不阙漏的序列，例如 "4, 5, 6, 1, 2, 3" 与 "1, 3, 5, 2, 4, 6"。
+
+## JavaScript 实现
+
+生成数组元素的所有排列（包含重复项）。
+
+- 使用递归。
+- 对于给定数组中的每个元素，为其其余元素创建所有部分置换。
+- 使用 `Array.prototype.map()` 将元素与每个部分排列组合，然后使用 `Array.prototype.reduce()` 将所有排列组合在一个数组中。
+- 基本情况是 `Array.prototype.length` 等于 `2` 或 `1`。
+- ⚠️ **警告**：此函数的执行时间随每个数组元素呈指数增长。任何超过 8 到 10 个条目都可能导致浏览器挂起，因为它试图解决所有不同的组合。
+
+```js
+const permutations = (arr) => {
+  if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr
+  return arr.reduce(
+    (acc, item, i) =>
+      acc.concat(
+        permutations([...arr.slice(0, i), ...arr.slice(i + 1)]).map((val) => [
+          item,
+          ...val
+        ])
+      ),
+    []
+  )
+}
+
+permutations([1, 33, 5])
+// [ [1, 33, 5], [1, 5, 33], [33, 1, 5], [33, 5, 1], [5, 1, 33], [5, 33, 1] ]
+```
+
+此示例来自 30 seconds of code 的 [permutations](https://www.30secondsofcode.org/js/s/permutations)，其还提供了一道字符串的排列 [String permutations](https://www.30secondsofcode.org/js/s/string-permutations)，实现方式相同，感兴趣的可以了解一下。
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\217\222\345\205\245\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\217\222\345\205\245\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..f74df80
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\217\222\345\205\245\346\216\222\345\272\217.md"
@@ -0,0 +1,49 @@
+# 每日一算法：插入排序
+
+插入排序就像平时你打牌，将扑克牌从你手的一个部位分类并移动到另一个部位的方法与插入排序的工作原理几乎相同。
+
+## 原理
+
+1. 假设将数组的第一个数字当做有序序列（已排序），把第二个到最后一个数字当做未排序序列。
+2. 从头到尾依次扫描未排序序列，查看其是否小于或大于之前的数字：
+   2.1 如果活动号码（未排序的数字）大于其左边的数字，则不执行任何操作。现在的顺序是正确的。跳到第 3 步。
+   2.2 如果活动号码小于其左边的数字，请继续向左移动。继续移动，直到您的活动号码命中另一个值小于它的号码。当遇到这种情况时，把活跃的数字插入到该数字旁边。
+3. 用一个新的活动号码重复整个过程。选择下一个未排序的数字，从第 2 步开始重新开始。
+
+如果待插入的数字与有序序列中的某个元素相等，则将待插入数字插入到相等元素的后面。
+
+## JavaScript 实现
+
+使用插入排序算法对数字数组进行排序。
+
+- 使用 `Array.prototype.reduce()` 遍历给定数组中的所有元素。
+- 如果 `length` 累加器的为 `0`，则向其中添加当前元素。
+- 使用 `Array.prototype.some()` 遍历累加器中的结果，直到找到正确的位置。
+- 使用 `Array.prototype.splice()` 将当前元素插入累加器。
+
+```js
+const insertionSort = (arr) =>
+  arr.reduce((acc, x) => {
+    if (!acc.length) return [x]
+    acc.some((y, j) => {
+      if (x <= y) {
+        acc.splice(j, 0, x)
+        return true
+      }
+      if (x > y && j === acc.length - 1) {
+        acc.splice(j + 1, 0, x)
+        return true
+      }
+      return false
+    })
+    return acc
+  }, [])
+
+insertionSort([6, 3, 4, 1]) // [1, 3, 4, 6]
+```
+
+此示例来自 30 seconds of code 的 [insertionSort](https://www.30secondsofcode.org/js/s/insertion-sort)
+
+## 更多资料
+
+[Insertion Sort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/insertion-sort)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\226\220\346\263\242\351\202\243\345\245\221\346\225\260\345\210\227.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\226\220\346\263\242\351\202\243\345\245\221\346\225\260\345\210\227.md"
new file mode 100644
index 0000000..7eb3b29
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\226\220\346\263\242\351\202\243\345\245\221\346\225\260\345\210\227.md"
@@ -0,0 +1,40 @@
+# 每日一算法：斐波那契数列
+
+> [**斐波那契数列**](https://zh.wikipedia.org/wiki/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)（Fibonacci sequence），又译为**菲波拿契数列**、**菲波那西数列**、**斐氏数列**、**黄金分割数列**。
+>
+> 用文字来说，就是斐波那契数列由 0 和 1 开始，之后的斐波那契数就是由之前的两数相加而得出。首几个斐波那契数是：0、1、1、2、3、5、8、13、21、34...
+>
+> **注意**：0 不是第一项，而是第零项。
+
+## JavaScript 实现
+
+生成一个包含斐波那契序列的数组，直到第 n 项。
+
+- 使用 `Array.from()` 以创建特定长度的空数组，初始化前两个值（`0` 和 `1`）。
+- 使用 `Array.prototype.reduce()` 和 `Array.prototype.concat()` 将值添加到数组中，使用除前两个值之外的最后两个值的总和。
+
+```js
+// 以数组形式返回斐波那契序列。
+const fibonacci = (n) =>
+  Array.from({ length: n }).reduce(
+    (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),
+    []
+  )
+
+fibonacci(6) // [0, 1, 1, 2, 3, 5]
+```
+
+此示例的实现来自 30 seconds of code 的 [fibonacci](https://www.30secondsofcode.org/js/s/fibonacci)。
+
+## LeetCode 相关的斐波那契题目
+
+- [剑指 Offer 10- I. 斐波那契数列](https://leetcode-cn.com/problems/fei-bo-na-qi-shu-lie-lcof/)
+- [斐波那契数](https://leetcode-cn.com/problems/fibonacci-number/)
+- [将数组拆分成斐波那契序列](https://leetcode-cn.com/problems/split-array-into-fibonacci-sequence/)
+- [最长的斐波那契子序列的长度](https://leetcode-cn.com/problems/length-of-longest-fibonacci-subsequence/)
+- [和为 K 的最少斐波那契数字数目](https://leetcode-cn.com/problems/find-the-minimum-number-of-fibonacci-numbers-whose-sum-is-k/)
+
+## 更多资料
+
+- [Fibonacci Number](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/math/fibonacci#fibonacci-number)
+- [Fibonacci Sequence](https://algorithm-visualizer.org/dynamic-programming/fibonacci-sequence) 可视化斐波那契数列
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\235\250\350\276\211\344\270\211\350\247\222\345\275\242.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\235\250\350\276\211\344\270\211\350\247\222\345\275\242.md"
new file mode 100644
index 0000000..354f850
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\235\250\350\276\211\344\270\211\350\247\222\345\275\242.md"
@@ -0,0 +1,46 @@
+# 每日一算法：杨辉三角形
+
+> [杨辉三角形](https://zh.wikipedia.org/wiki/%E6%9D%A8%E8%BE%89%E4%B8%89%E8%A7%92%E5%BD%A2)（pascal triangle），又称帕斯卡三角形，是[二项式系数](https://zh.wikipedia.org/wiki/%E4%BA%8C%E9%A1%B9%E5%BC%8F%E7%B3%BB%E6%95%B0 '二项式系数')的三角形数组。
+
+![杨辉三角形](https://upload-images.jianshu.io/upload_images/18281896-2b9f09b0a0a087ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+根据推断的可用表示式为：
+
+```
+C(lineNumber, i) = C(lineNumber, i - 1) * (lineNumber - i + 1) / i
+```
+
+## JavaScript 实现
+
+- 第一行默认为 1，第 n 行的个数需要在 n 的基础上加 1
+- 进行循环，每一行的每个条目都是通过将左上方的数字与右上方的数字相加来构建的，如果没有将视为为 0。
+
+```js
+const pascalTriangle = (lineNumber) => {
+  const currentLine = [1]
+
+  const currentLineSize = lineNumber + 1
+
+  for (let i = 1; i < currentLineSize; i++) {
+    currentLine[i] = (currentLine[i - 1] * (lineNumber - i + 1)) / i
+  }
+
+  return currentLine
+}
+
+pascalTriangle(0) // [1]
+pascalTriangle(1) // [1, 1]
+pascalTriangle(2) // [1, 2, 1]
+pascalTriangle(3) // [1, 3, 3, 1]
+pascalTriangle(4) // [1, 4, 6, 4, 1]
+```
+
+## LeetCode 相关的链表题目
+
+- [杨辉三角](https://leetcode.cn/problems/pascals-triangle/)
+- [杨辉三角 II](https://leetcode.cn/problems/pascals-triangle-ii/)
+
+## 更多资料
+
+- [pascal-triangle](https://github.com/trekhleb/javascript-algorithms/blob/master/src/algorithms/math/pascal-triangle)
+- [pascals-triangle](https://algorithm-visualizer.org/dynamic-programming/pascals-triangle) 可视化杨辉三角形演示
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\241\266\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\241\266\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..994b0e9
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\241\266\346\216\222\345\272\217.md"
@@ -0,0 +1,31 @@
+# 每日一算法：桶排序
+
+[桶排序](https://zh.wikipedia.org/wiki/%E6%A1%B6%E6%8E%92%E5%BA%8F)将数据数组排序为桶（bucket）。每个 bucket 包含数组的一个子集，通过将 bucket 中的元素与下一个 bucket 的元素进行比较，对各个 bucket 进行排序。然后返回排序的数组。
+
+## JavaScript 实现
+
+使用桶排序算法对数字数组进行排序。
+
+- 使用 `Math.min()`、`Math.max()` 和扩展运算符（`...`）来查找给定数组的最小值和最大值。
+- 使用 `Array.from()` 和 `Math.floor()` 创建适当数量的 `buckets`（空数组）。
+- 使用 `Array.prototype.forEach()` 用数组中的适当元素填充每个桶。
+- 使用`Array.prototype.reduce()`、扩展运算符（`...`）和 `Array.prototype.sort()` 对每个桶进行排序并将其附加到结果中。
+
+```js
+const bucketSort = (arr, size = 5) => {
+  const min = Math.min(...arr)
+  const max = Math.max(...arr)
+  const buckets = Array.from(
+    { length: Math.floor((max - min) / size) + 1 },
+    () => []
+  )
+  arr.forEach((val) => {
+    buckets[Math.floor((val - min) / size)].push(val)
+  })
+  return buckets.reduce((acc, b) => [...acc, ...b.sort((a, b) => a - b)], [])
+}
+
+bucketSort([6, 3, 4, 1]) // [1, 3, 4, 6]
+```
+
+此示例来自 30 seconds of code 的 [bucketSort](https://www.30secondsofcode.org/js/s/bucket-sort)。
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\254\247\346\260\217\350\267\235\347\246\273.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\254\247\346\260\217\350\267\235\347\246\273.md"
new file mode 100644
index 0000000..148d1d3
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\254\247\346\260\217\350\267\235\347\246\273.md"
@@ -0,0 +1,26 @@
+# 每日一算法：欧氏距离
+
+> 在数学中，**[欧几里得距离](https://zh.wikipedia.org/wiki/%E6%AC%A7%E5%87%A0%E9%87%8C%E5%BE%97%E8%B7%9D%E7%A6%BB)**（别称：欧氏距离）或**欧几里得度量**是欧几里得空间中两点间“普通”（即直线）距离。使用这个距离，欧氏空间成为度量空间。相关联的范数称为欧几里得范数。较早的文献称之为**毕达哥拉斯度量**。
+
+计算任意数量维度中两点之间的距离。
+
+- 使用 `Object.keys()` 和 `Array.prototype.map()` 将每个坐标映射到两点之间的差。
+- 使用 `Math.hypot()` 计算出两点之间的欧氏距离。
+
+```js
+const euclideanDistance = (a, b) =>
+  Math.hypot(...Object.keys(a).map((k) => b[k] - a[k]))
+
+euclideanDistance([1, 1], [2, 3]) // ~2.2361
+euclideanDistance([1, 1, 1], [2, 3, 2]) // ~2.4495
+
+const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0)
+distance(1, 1, 2, 3) // ~2.2361
+```
+
+此示例来自 30 seconds of code 的 [euclideanDistance](https://www.30secondsofcode.org/js/s/euclidean-distance)
+
+## 更多资料
+
+- [Euclidean Distance](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/math/euclidean-distance) - distance between two points/vectors/matrices
+- [Euclidean Greatest Common Divisor](https://algorithm-visualizer.org/simple-recursive/euclidean-greatest-common-divisor)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\261\211\346\230\216\350\267\235\347\246\273.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\261\211\346\230\216\350\267\235\347\246\273.md"
new file mode 100644
index 0000000..e608c2d
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\261\211\346\230\216\350\267\235\347\246\273.md"
@@ -0,0 +1,36 @@
+# 每日一算法：汉明距离
+
+> 两个等长字符串之间的[**汉明距离**](https://zh.wikipedia.org/wiki/%E6%B1%89%E6%98%8E%E8%B7%9D%E7%A6%BB)（Hamming distance）是两个字符串对应位置的不同字符的个数。换句话说，它就是将一个字符串变换成另外一个字符串所需要替换的字符个数。
+
+例如：
+
+- **1011101**与**1001001**之间的汉明距离是 2。
+- **2143896**与**2233796**之间的汉明距离是 3。
+- "**toned**"与"**roses**"之间的汉明距离是 3。
+
+## JavaScript 实现
+
+计算两个值之间的汉明距离。
+
+- 使用 XOR 运算符（`^`）查找两个数字之间的位差。
+- 使用转换为二进制字符串 `Number.prototype.toString(2)`。
+- 使用计数并返回 `1` 字符串中的 s 数 `String.prototype.match(/1/g)`。
+
+```js
+const hammingDistance = (num1, num2) =>
+  ((num1 ^ num2).toString(2).match(/1/g) || '').length
+
+hammingDistance(2, 3) // 1
+```
+
+此示例来自 30 seconds of code 的 [hammingDistance](https://www.30secondsofcode.org/js/s/hamming-distance)
+
+## LeetCode 关于汉明距离的题目
+
+- [汉明距离](https://leetcode-cn.com/problems/hamming-distance/)
+- [汉明距离总和](https://leetcode-cn.com/problems/total-hamming-distance/)
+- [执行交换操作后的最小汉明距离](https://leetcode-cn.com/problems/minimize-hamming-distance-after-swap-operations/)
+
+## 更多资料
+
+[Hamming Distance](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/string/hamming-distance)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\261\211\350\257\272\345\241\224.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\261\211\350\257\272\345\241\224.md"
new file mode 100644
index 0000000..f47e0cc
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\346\261\211\350\257\272\345\241\224.md"
@@ -0,0 +1,37 @@
+# 每日一算法：汉诺塔
+
+> [汉诺塔](https://zh.wikipedia.org/wiki/%E6%B1%89%E8%AF%BA%E5%A1%94)（Tower of Hanoi）是一个数学游戏或谜题。它由三根杆和许多不同尺寸的圆盘组成，可以滑动到任何杆上。拼图从一根杆上按大小升序整齐排列的圆盘开始，最小的在顶部，从而形成锥形。
+
+## 分析
+
+汉诺塔规则如下：
+
+- 一次只能移动一个圆盘。
+- 每走一步，你都要从任何一堆的顶部取出圆盘，把它放到另一个柱子上。
+- 您只能将较小的圆盘放在较大的圆盘上。
+- 当所有的启动盘在目标柱子上以相同的启动顺序排列时，我们便能够获得胜利。你可以使用除一开始的柱子以外的任何柱子作为目的地。
+
+## JavaScript 实现
+
+- 使用递归。
+- 判断 `N - 1` 个球从一个位置移动到另一个位置。不断递归调用，直到最后一个球。
+
+```js
+const ballNum = 3
+let d = 0
+const hanoi = (n, a, b, c) => {
+  d++
+  if (n > 0) {
+    hanoi(n - 1, a, c, b)
+    console.log(`球 ${n} 从 ${a} 到 ${c}!`)
+    hanoi(n - 1, b, a, c)
+  }
+  return d
+}
+
+hanoi(ballNum, '起始点', '中途', '目的地')
+```
+
+## 更多资料
+
+[Tower of Hanoi](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/uncategorized/hanoi-tower)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\347\264\240\346\225\260.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\347\264\240\346\225\260.md"
new file mode 100644
index 0000000..19402b5
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\347\264\240\346\225\260.md"
@@ -0,0 +1,33 @@
+# 每日一算法：素数
+
+> [**质数**](https://zh.wikipedia.org/wiki/%E8%B4%A8%E6%95%B0)（Prime number），又称**素数**，指在大于 1 的自然数中，除了 1 和该数自身外，无法被其他自然数整除的数（也可定义为只有 1 与该数本身两个正因数的数）。
+
+> [**埃拉托斯特尼筛法**](https://zh.wikipedia.org/wiki/%E5%9F%83%E6%8B%89%E6%89%98%E6%96%AF%E7%89%B9%E5%B0%BC%E7%AD%9B%E6%B3%95)，简称**埃氏筛**，也称**素数筛**。是一种由希腊数学家埃拉托斯特尼所提出的一种简单检定素数的算法。要得到自然数 n 以内的全部素数，必须把不大于根号 n 的所有素数的倍数剔除，剩下的就是素数。
+
+## JavaScript 实现
+
+使用[埃拉托斯特尼筛法](https://zh.wikipedia.org/wiki/%E5%9F%83%E6%8B%89%E6%89%98%E6%96%AF%E7%89%B9%E5%B0%BC%E7%AD%9B%E6%B3%95)（Eratosthenes）产生最多给定数的质数。
+
+- 从 `2` 到给定数字生成一个数组。
+- 使用 `Array.prototype.filter()` 筛选出可被从 `2` 到所提供数字的平方根的任何数字整除的值。
+
+```js
+const primes = (num) => {
+  let arr = Array.from({ length: num - 1 }).map((x, i) => i + 2)
+  let sqroot = Math.floor(Math.sqrt(num))
+  let numsTillSqroot = Array.from({ length: sqroot - 1 }).map((x, i) => i + 2)
+  numsTillSqroot.forEach(
+    (x) => (arr = arr.filter((y) => y % x !== 0 || y === x))
+  )
+  return arr
+}
+
+primes(10) // [2, 3, 5, 7]
+```
+
+此示例来自 30 seconds of code 的 [primes](https://www.30secondsofcode.org/js/s/primes)
+
+## LeetCode 相关的素数题目
+
+- [回文素数](https://leetcode-cn.com/problems/prime-palindrome/)
+- [第 K 个最小的素数分数](https://leetcode-cn.com/problems/k-th-smallest-prime-fraction/)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\351\200\211\346\213\251\346\216\222\345\272\217.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\351\200\211\346\213\251\346\216\222\345\272\217.md"
new file mode 100644
index 0000000..ee31b99
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\351\200\211\346\213\251\346\216\222\345\272\217.md"
@@ -0,0 +1,38 @@
+# 每日一算法：选择排序
+
+选择排序是一个很容易理解排序算法。
+
+**思路**：
+
+- 我们选择第一项。然后我们将其与第二项进行比较。如果第二项较小，我们将其与第一项交换。以此类推，我们将第一项与数组中的每一项进行比较。
+- 一旦我们知道我们有最小的项，我们就切换到第二个元素，并将它与数组中的每一项进行比较，忽略索引 0，因为我们已经知道这是最小值。以此类推，直到数组结束。
+- 如您所见，该算法非常昂贵。它不仅迭代数组的每一项：对于每一项，它都会再次迭代数组。
+
+## JavaScript 实现
+
+使用选择排序算法对数字数组进行排序。
+
+- 使用扩展运算符（`...`）克隆原始数组 `arr`。
+- 使用 `for` 循环遍历数组中的元素。
+- 使用 `Array.prototype.slice()` 和 `Array.prototype.reduce()` 查找当前索引右侧子数组中最小元素的索引，并在必要时执行交换。
+
+```js
+const selectionSort = (arr) => {
+  const list = [...arr]
+  for (let i = 0; i < list.length; i++) {
+    const min = list
+      .slice(i + 1)
+      .reduce((acc, val, j) => (val < list[acc] ? j + i + 1 : acc), i)
+    if (min !== i) [list[i], list[min]] = [list[min], list[i]]
+  }
+  return list
+}
+
+selectionSort([5, 1, 4, 2, 3]) // [1, 2, 3, 4, 5]
+```
+
+此示例来自 30 seconds of code 的 [selectionSort](https://www.30secondsofcode.org/js/s/selection-sort)
+
+## 更多资料
+
+[Selection Sort](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/sorting/selection-sort)
diff --git "a/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\351\230\266\344\271\230.md" "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\351\230\266\344\271\230.md"
new file mode 100644
index 0000000..23d3fc9
--- /dev/null
+++ "b/\346\225\260\346\215\256\347\273\223\346\236\204\345\222\214\347\256\227\346\263\225/\346\257\217\346\227\245\344\270\200\347\256\227\346\263\225\357\274\232\351\230\266\344\271\230.md"
@@ -0,0 +1,40 @@
+# 每日一算法：阶乘
+
+> 在数学中，正整数的[**阶乘**](https://zh.wikipedia.org/wiki/%E9%98%B6%E4%B9%98)（factorial）是所有小于及等于该数的正整数的积，计为 n!。
+> 例如 5 的阶乘计为 5!，其值为 120：5!= 5 × 4 × 3 × 2 × 1 = 120 。
+> 并定义，1 的阶乘 1!为 1、0 的阶乘 0!亦为 1，其中，0 的阶乘表示一个空积。
+
+## JavaScript 实现
+
+计算数字的阶乘。
+
+- 使用递归。
+- 如果 `n` 小于或等于 `1`，则返回 `1`。
+- 否则，返回 `n` 的乘积和 `n - 1` 的阶乘。
+- 如果 `n` 是负数，抛出 `TypeError`。
+
+```js
+const factorial = (n) =>
+  n < 0
+    ? (() => {
+        throw new TypeError('Negative numbers are not allowed!')
+      })()
+    : n <= 1
+    ? 1
+    : n * factorial(n - 1)
+
+factorial(6) // 720
+```
+
+此示例来自 30 seconds of code 的 [factorial](https://www.30secondsofcode.org/js/s/factorial)
+
+## LeetCode 关于阶乘的题目
+
+- [笨阶乘](https://leetcode-cn.com/problems/clumsy-factorial/)
+- [阶乘尾数](https://leetcode-cn.com/problems/factorial-zeros-lcci/)
+- [阶乘后的零](https://leetcode-cn.com/problems/factorial-trailing-zeroes/)
+- [阶乘函数后 K 个零](https://leetcode-cn.com/problems/preimage-size-of-factorial-zeroes-function/)
+
+## 更多资料
+
+[Factorial](https://github.com/trekhleb/javascript-algorithms/tree/master/src/algorithms/math/factorial)
diff --git "a/\346\265\217\350\247\210\345\231\250/Data URL.md" "b/\346\265\217\350\247\210\345\231\250/Data URL.md"
new file mode 100644
index 0000000..4f8dd58
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/Data URL.md"	
@@ -0,0 +1,91 @@
+# Data URL
+
+[Data URL](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 是一种 URI 方案，它提供了一种在 HTML 文档中内联数据的方法。
+
+假设你想嵌入一个小图像。你可以按照通常的方式，将其上传到文件夹，并使用 `img` 标签使浏览器从网络中引用它：
+
+```html
+<img src="image.png" />
+```
+
+或者，你可以将其编码为一种特殊的格式，称为 Data URL，这样就可以将图像直接嵌入 HTML 文档中，因此浏览器不必单独请求即可获取图像。
+
+Data URL 可能会为小文件节省一些时间，但对于较大的文件，HTML 文件大小的增加会带来不利影响，如果图像重新加载到所有页面上，这尤其是一个问题，因为你无法利用浏览器的缓存功能。
+
+此外，编码为 Data URL 的图像通常比二进制格式的相同图像大一点。
+
+如果你的图像经常被编辑，它们就不太实用，因为每次更改图像时，都必须再次对其进行编码。
+
+## Data URL 看起来如何？
+
+Data URL 是一个以 `data:MIME` 类型格式开头的字符串。例如，PNG 图像具有 [MIME](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_Types) 类型 `image/png`。
+
+> [常见的 MIME 类型列表](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
+
+后面是逗号，然后是实际数据。
+
+文本通常以纯文本传输，而二进制数据通常采用 base64 编码。
+
+以下是此类 Data URL 的示例：
+
+```html
+<img src="data:image/png,%89PNG%0D%0A..." />
+```
+
+下面是 base64 编码的 Data URL 的样子。请注意，它以 `data:image/png;base64` 开始：
+
+```html
+<img src="data:image/png;base64,iVBORw0KGgoAA..." />
+```
+
+一个不错的 [Data URL 生成器](https://dopiaza.org/tools/datauri/index.php)，你可以使用它将任何图像转换为 Data URL。
+
+Data URL 可以在任何可以使用 URL 的地方使用，如你所见，你可以将其用于链接，但在 CSS 中使用它们也很常见：
+
+```css
+.main {
+  background-image url('data:image/png;base64,iVBORw0KGgoAA...');
+}
+```
+
+## 浏览器支持
+
+所有现代浏览器都支持它们。
+
+![Data URL 支持情况](https://upload-images.jianshu.io/upload_images/18281896-c12164199f5682ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+## 安全
+
+Data URL 可以对任何类型的信息进行编码，而不仅仅是图像，因此它们具有一组安全隐患。
+
+来自维基百科：
+
+> Data URI 可用于构建攻击页面，试图从毫无戒心的 Web 用户那里获取用户名和密码。它还可以用于绕过[跨站点脚本（XSS）](https://github.com/lio-zero/blog/blob/main/WTF/%E4%BB%80%E4%B9%88%E6%98%AF%20XSS%20%E6%94%BB%E5%87%BB%EF%BC%9F.md)限制，将攻击负载完全嵌入地址栏中，并通过 URL 缩短服务托管，而不需要由第三方控制的完整网站。
+
+查看 [Blocking Top-Level Navigations to data URLs for Firefox 59](https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/) 以了解如何降低被攻击风险。
+
+最后，Data URL 在 [RFC 2397](https://datatracker.ietf.org/doc/html/rfc2397) 中定义。
+
+## 总结
+
+Data URL 的语法：
+
+```txt
+data:[<media type>][;charset=<character set>][;base64],<data>
+```
+
+Data URL 由四部分组成：
+
+- 前缀 `data:`
+- 指示数据类型的 MIME 类型。例如 `image/jpeg` 表示 JPEG 图像文件；如果此部分被省略，则默认值为 `text/plain;charset=US-ASCII`
+- 如果为非文本数据，则可选 base64 做标记
+- 数据
+
+- **优点** — 通过将数据直接包含在 HTML 中，可以减少浏览器发出的 HTTP 请求数量
+- **缺点**：
+  - HTML 大小增加 — 将数据直接包含在 HTML 文档中会增加 HTML 文件的大小，这会使页面下载和解析速度变慢。
+  - base64 编码后的图片会比原来的体积大三分之一左右。
+  - Data URL 形式的图片不会缓存下来，每次访问页面都要被下载一次。但这通常不是问题，我们可以将 Data URL 写入到 CSS 文件中随着 CSS 被缓存下来。
+  - 如果你需要完全支持低版本的 IE 浏览器，那么它没有任何回退选项可供选择。
+
+总的来说，Data URL 在某些情况下可能是有用的工具，但是重要的是要权衡利弊，并选择最适合你具体需要的选项。
diff --git "a/\346\265\217\350\247\210\345\231\250/\344\273\216\345\234\260\345\235\200\346\240\217\344\270\255\350\276\223\345\205\245 URL \345\210\260\351\241\265\351\235\242\346\270\262\346\237\223\345\207\272\346\235\245\357\274\214\344\270\255\351\227\264\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210\357\274\237.md" "b/\346\265\217\350\247\210\345\231\250/\344\273\216\345\234\260\345\235\200\346\240\217\344\270\255\350\276\223\345\205\245 URL \345\210\260\351\241\265\351\235\242\346\270\262\346\237\223\345\207\272\346\235\245\357\274\214\344\270\255\351\227\264\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210\357\274\237.md"
new file mode 100644
index 0000000..8cd027b
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\344\273\216\345\234\260\345\235\200\346\240\217\344\270\255\350\276\223\345\205\245 URL \345\210\260\351\241\265\351\235\242\346\270\262\346\237\223\345\207\272\346\235\245\357\274\214\344\270\255\351\227\264\344\274\232\345\217\221\347\224\237\344\273\200\344\271\210\357\274\237.md"	
@@ -0,0 +1,37 @@
+# 从地址栏中输入 URL 到页面渲染出来，中间会发生什么？
+
+GitHub 上有一个仓库 [what-happens-when](https://github.com/alex/what-happens-when)，它尝试回答一个古老的面试问题：**当你在浏览器中输入 google.com 并按下 Enter 键后会发生什么？**
+
+它不再局限于平常的回答，而是更具体详细的解读，不遗漏任何细节。
+
+一个典型的现代浏览器需要经历一系列步骤，从你在地址栏中输入的 URL 到最终在屏幕上看到的页面。它必须经过：
+
+1. 解析 DNS
+2. 建立与服务器的 TCP 连接
+3. 请求页面上的所有资源（也就是发送 HTTP 请求，服务器处理 HTTP 请求并返回报文）
+4. 构建 DOM 和 CSSOM
+5. 构建渲染树
+6. 执行布局
+7. 解码图像
+8. 在屏幕上绘制
+
+我们可以将以上步骤分为两个常规阶段：
+
+- 步骤 1 - 3 **受网络限制**。它们发生的速度和成本主要取决于网络的特性：带宽、延迟、数据成本等。
+- 步骤 4 - 8 **受设备约束**。这些步骤发生的速度主要取决于设备和浏览器的特性：处理器，内存等。
+
+另外，步骤 4 - 8 是浏览器解析渲染页面的过程。
+
+我不会再这介绍它们每一个步骤都具体做了什么，因为有人 👇 已经做出了总结。
+
+> 这也是一道经典的面试题。回答时，按上面这些步骤，由浅入深，逐步深入分析。
+
+## 更多资料
+
+我整理了一些资源，供大家参考：
+
+- [what-happens-when](https://github.com/alex/what-happens-when)
+- [how-web-works](https://github.com/vasanthk/how-web-works)
+- [细说浏览器输入 URL 后发生了什么](https://juejin.cn/post/6844904054074654728)
+- [说一说从输入 URL 到页面呈现发生了什么？](https://juejin.cn/post/6844904021308735502#heading-24)
+- [图解浏览器渲染原理及流程](https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA==&mid=2247507400&idx=1&sn=5b02305919bb564fef121551d41e59f8&chksm=fc7e9393cb091a85f65b05fd710bac00b221b7e9fac31e836b8334a008bafe9da0e65b61cb9d&scene=178&cur_album_id=2120079708137586688#rd)
diff --git "a/\346\265\217\350\247\210\345\231\250/\345\205\263\351\224\256\346\270\262\346\237\223\350\267\257\345\276\204.md" "b/\346\265\217\350\247\210\345\231\250/\345\205\263\351\224\256\346\270\262\346\237\223\350\267\257\345\276\204.md"
new file mode 100644
index 0000000..21c7659
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\345\205\263\351\224\256\346\270\262\346\237\223\350\267\257\345\276\204.md"
@@ -0,0 +1,39 @@
+# 关键渲染路径（浏览器渲染机制）
+
+[**关键渲染路径**](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)（Critial Rendering Path，CRP）是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。
+
+**优化关键渲染路径可提高渲染性能**。
+
+关键渲染路径包含了文档对象模型（DOM）、CSS 对象模型（CSSOM）、渲染树和布局。
+
+**关键渲染路径可以分为以下五步**：
+
+- 构建 DOM 树
+- 构建 CSSOM 树
+- 创建渲染树
+- 生成布局
+- 绘制
+
+在解析 HTML 时会创建 DOM。HTML 可以请求 JavaScript，而 JavaScript 反过来，又可以更改 DOM。HTML 包含或请求样式，依次来构建 CSSOM。浏览器引擎将两者结合起来以创建渲染树。布局确定页面上所有内容的大小和位置。确定布局后，将像素绘制到屏幕上。
+
+这些只是简短的概况了这部分流程，详细内容查看最后。
+
+## 优化 CRP
+
+提升页面加载速度需要通过被加载资源的优先级、控制它们加载的顺序和减小这些资源的体积。
+
+性能提示包含：
+
+1. 通过异步重要资源的下载来减小请求数量
+2. 优化必须的请求数量和每个请求的文件体积
+3. 通过区分关键资源的优先级来优化被加载关键资源的顺序，来缩短关键路径长度。
+
+另外，可以阅读一下[网站性能优化 — CRP](https://segmentfault.com/a/1190000008550336)这篇文章。
+
+以上关于 CRP 的详细步骤内容可查阅 [MDN Docs：Critical rendering path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path) 和 [Google 的 Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
+
+## 更多资料
+
+- [script 标签上的 defer 和 async 属性是什么？](https://github.com/lio-zero/blog/blob/main/HTML/script%20%E6%A0%87%E7%AD%BE%E4%B8%8A%E7%9A%84%20defer%20%E5%92%8C%20async%20%E5%B1%9E%E6%80%A7%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F.md)
+- [浏览器如何解析 CSS？](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%20CSS%EF%BC%9F.md)
+- [浏览器如何解析 HTML？](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90%20HTML%EF%BC%9F.md)
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250 Hack.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250 Hack.md"
new file mode 100644
index 0000000..43b0f00
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250 Hack.md"	
@@ -0,0 +1,96 @@
+# 浏览器 Hack
+
+浏览器 Hack 表示各个浏览器下的兼容性问题。
+
+由于不同的浏览器和浏览器各版本对 CSS 的支持及解析结果不一样，以及 CSS 优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的 CSS。同样，包括 JavaScript，不同的浏览器也有一些 Hack，这里我们举例一些 CSS 示例。
+
+## 仅限 Mozilla
+
+```css
+@-moz-document url-prefix() {
+  .box {
+    color: blue;
+  }
+}
+```
+
+## 仅限 WebKit
+
+```css
+@media all and (-webkit-min-device-pixel-ratio: 1) {}
+```
+
+## 仅限 IE
+
+IE6 能识别下划线 `_` 和星号 `*`。
+
+```css
+.box {
+  *background: plum; /* IE6 */
+}
+```
+
+IE7 能识别星号 `*`，但不能识别下划线 `_`。
+
+```css
+.box {
+  _background: plum; /* IE6 */
+}
+```
+
+条件注释，只在 IE 上有效
+
+```html
+<!--[if IE 6]> Internet Explorer 6 <![endif]-->
+<!--[if IE 7]> Internet Explorer 7 <![endif]-->
+<!--[if IE 8]> Internet Explorer 8 <![endif]-->
+<!--[if IE 9]> Internet Explorer 9 <![endif]-->
+
+<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]-->
+<!--[if lte IE 7]> Internet Explorer 7 or less <![endif]-->
+<!--[if lte IE 8]> Internet Explorer 8 or less <![endif]-->
+<!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
+
+<!--[if gte IE 6]> Internet Explorer 6 or greater <![endif]-->
+<!--[if gte IE 7]> Internet Explorer 7 or greater <![endif]-->
+<!--[if gte IE 8]> Internet Explorer 8 or greater <![endif]-->
+<!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->
+```
+
+## 清除浮动 hack
+
+```css
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.cf:before,
+.cf:after {
+  content: ' '; /* 1 */
+  display: table; /* 2 */
+}
+
+.cf:after {
+  clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+  *zoom: 1;
+}
+```
+
+以上代码来自 [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)，其对清除浮动做出了简单的解释。
+
+## 更多
+
+- [BROWSERHACKS](http://browserhacks.com/) 网站列出了来自整个互联网特定于**浏览器的 CSS 和 JavaScript hack**。
+- [Can I Use](https://www.caniuse.com/) 可以查看属性的兼容情况
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\206\205\346\240\270.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\206\205\346\240\270.md"
new file mode 100644
index 0000000..bd867ca
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\206\205\346\240\270.md"
@@ -0,0 +1,26 @@
+# 浏览器内核
+
+[浏览器内核](https://zh.wikipedia.org/wiki/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%95%E6%93%8E)主要分为两部分：**页面渲染引擎**（Rendering Engine，也称为 Browser Engine、Layout Engine）和 **JavaScript 引擎**，内核更加倾向于渲染引擎。
+
+- **渲染引擎** — 负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
+- **JavaScript 引擎** — 负责解析和执行 JavaScript 来实现网页的动态效果。
+
+最开始渲染引擎和 JavaScript 引擎并没有区分的很明确，后来 JavaScript 引擎越来越独立，内核就倾向于只指渲染引擎。
+
+不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。
+
+## 常见的五种内核
+
+| 浏览器                    | 页面渲染引擎（内核） | JavaScript 引擎                              | CSS 前缀  |
+| ------------------------- | -------------------- | -------------------------------------------- | --------- |
+| Chrome                    | WebKit -> Blink      | V8                                           | `-webkit` |
+| Firefox                   | Gecko                | SpiderMonkey（世界上第一款 JavaScript 引擎） | `-moz`    |
+| Safari                    | WebKit               | JavaScriptCore（即 Nitro）                 | `-webkit` |
+| Internet Explorer（IE）   | Trident              | Chakra                                       | `-ms`     |
+| Opera                     | Presto -> Blink      | Carakan                                      | `-o`      |
+| Microsoft Edge（代替 IE） | EdgeHTML -> Blink    | Carakan                                      | `-webkit` |
+
+上面表格中，旧 Chrome 和旧 Opera 的内核为 Webkit，新版的为 Blink。所有以 [Chromium](https://zh.wikipedia.org/wiki/Chromium) 为基础的浏览器都使用 Blink。
+
+- EdgeHTML 引擎是 Trident 的一个分支
+- [Blink](https://zh.wikipedia.org/wiki/Blink) 引擎是 WebKit 中 WebCore 组件的一个分支
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\220\214\346\272\220\347\255\226\347\225\245.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\220\214\346\272\220\347\255\226\347\225\245.md"
new file mode 100644
index 0000000..7c2404a
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\220\214\346\272\220\347\255\226\347\225\245.md"
@@ -0,0 +1,40 @@
+# 浏览器同源策略
+
+> [**同源策略**](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)是一个重要的安全策略，它用于限制一个 [origin](https://developer.mozilla.org/zh-CN/docs/Glossary/Origin) 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
+
+跨域其实就是同源策略这种限制引起的。
+
+**那么怎么样才算是同源呢？**
+
+同源是指**协议 + 域名（主域名、子域名）+ 端口**三者相同，即便两个不同的域名指向同一个 IP 地址，也非同源。
+
+下表给出了相对 `http://store.company.com/dir/page.html` 同源检测的示例:
+
+![同源策略](https://upload-images.jianshu.io/upload_images/18281896-9a5923912b7532fc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+浏览器中的大部分内容都是受同源策略限制的，但是以下三个标签可以不受限制：
+
+- 加载图片的 `<img src=xxx>`
+- 引用 CSS 样式的 `<link href=xxx>`
+- 引用 JS 脚本的 `<script src=xxx>`
+
+这就有了第一种解决跨域限制的方法：**JSONP**。它便是利用了不受同源策略限制的机制，可以在不同源的情况下请求资源。（这里不过多介绍，后面有资源链接自己看）
+
+**但要注意**，普通的脚本和加上 `type="module"` 的脚本对 CORS（跨源资源共享）的处理方式不同。
+
+```html
+<!-- 不是 CORS 的请求 -->
+<script src="https://example.com/script.js"></script>
+
+<!-- CORS 请求 -->
+<script type="module" src="https://example.com/script.js"></script>
+```
+
+如果你在模块上下文中请求 JavaScript 文件，则响应需要定义一个 `Access-Control-Allow-Origin` 头，否则它将受到浏览器同源策略的影响。
+
+解决跨域的方案有很多种，详细内容可以阅读阮一峰老师的[浏览器同源政策及其规避方法](https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)。
+
+## 更多资料
+
+- [跨域资源共享 CORS 详解](https://www.ruanyifeng.com/blog/2016/04/cors.html)
+- [10 种跨域解决方案（附终极大招）](https://juejin.cn/post/6844904126246027278)
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 CSS \351\200\211\346\213\251\345\231\250\357\274\237.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 CSS \351\200\211\346\213\251\345\231\250\357\274\237.md"
new file mode 100644
index 0000000..d21f698
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 CSS \351\200\211\346\213\251\345\231\250\357\274\237.md"	
@@ -0,0 +1,23 @@
+# 浏览器如何解析 CSS 选择器？
+
+浏览器**从右往左**（也称为自底向上）解析 CSS 选择器，这样的匹配节点的方式可以快速、准确的与 render 树上的节点进行匹配，避免了许多无效匹配。浏览器需要评估的规则越少，样式引擎执行的速度就越快。
+
+例如：
+
+```css
+.menu ul li a {
+  color: plum;
+}
+```
+
+浏览器会先检查 `a`、`li`、`ul`，然后是 `.menu`。
+
+这是因为当浏览器扫描页面时，它只需要查看当前的节点和之前扫描过的所有节点。
+
+需要注意的是，浏览器在获得完整的节点时就开始处理，无需等待整个页面，除非它找到一个脚本，在这种情况下，它会暂时暂停并完成脚本的执行，然后继续执行。
+
+如果是相反的方式，则效率会很低，因为浏览器在第一次检查时找到了它正在扫描的元素，但随后被迫继续在文档中查找所有其他选择器。为此，浏览器需要有整个 html，并可能需要扫描整个网页之前，它才开始 css 绘制。
+
+这与大多数 lib 解析 DOM 的方式相反。DOM 就是在这里构建的，它不需要扫描整个页面，只需找到第一个元素，然后继续匹配其中的其他元素。
+
+详细内容你可以在 [Why do browsers match CSS selectors from right to left?](https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left) 查看，进行讨论。
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 CSS\357\274\237.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 CSS\357\274\237.md"
new file mode 100644
index 0000000..2ec9f2c
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 CSS\357\274\237.md"	
@@ -0,0 +1,6 @@
+# 浏览器如何解析 CSS？
+
+- 一旦 CSS 被浏览器下载，CSS 解析器就会被打开来处理它遇到的任何 CSS。
+- 根据 CSS 词法和句法分析 CSS 文件、`<style>` 标签包含的内容以及 DOM 元素的 `style` 属性内嵌的 CSS。这其实也就是内联、行内和外部引入样式的三种方式。
+- 每个 CSS 文件都被解析成一个样式表对象（`StyleSheet object`），可以通过 `document.styleSheets` 获取。这个对象包含了带有选择器的 CSS 规则，和对应 CSS 语法的对象（选择器、属性和属性各自值的数据结构）
+- 当使用特定的解析器生成器时，CSS 解析器可以是自顶向下或自下而上的。
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 HTML\357\274\237.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 HTML\357\274\237.md"
new file mode 100644
index 0000000..9ae64e7
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\345\246\202\344\275\225\350\247\243\346\236\220 HTML\357\274\237.md"	
@@ -0,0 +1,27 @@
+# 浏览器如何解析 HTML？
+
+> 译自 [HTML parsing](https://github.com/alex/what-happens-when#html-parsing)。
+
+浏览器渲染引擎从网络层取得请求的文档，一般情况下文档会分成 8KB 大小的分块传输。
+
+HTML 解析器的主要工作是对 HTML 文档进行解析，生成解析树。
+
+解析树是以 DOM 元素以及属性为节点的树。DOM 是**文档对象模型（Document Object Model）**的缩写，它是 HTML 文档的对象表示，同时也是 HTML 元素面向外部（如 JavaScript）的接口。树的根部是 **Document** 对象。整个 DOM 和 HTML 文档几乎是一对一的关系。
+
+**解析算法**：
+
+HTML 不能使用常见的自顶向下或自底向上方法来进行分析。主要原因有以下几点:
+
+- 语言本身的“宽容”特性
+- HTML 本身可能是残缺的，对于常见的残缺，浏览器需要有传统的容错机制来支持它们
+- 解析过程需要反复。对于其他语言来说，源码不会在解析过程中发生变化，但是对于 HTML 来说，动态代码，例如脚本元素中包含的 `document.write()` 方法会在源码中添加内容，也就是说，解析过程实际上会改变输入的内容
+
+由于不能使用常用的解析技术，浏览器创造了专门用于解析 HTML 的解析器。解析算法在 HTML5 标准规范中有详细介绍，算法主要包含了两个阶段：**标记化（tokenization）和树的构建**。
+
+**解析结束之后**：
+
+浏览器开始加载网页的外部资源（CSS，图像，JavaScript 文件等）。
+
+此时浏览器把文档标记为**可交互的（interactive）**，浏览器开始解析处于**推迟（deferred）**模式的脚本，也就是那些需要在文档解析完毕之后再执行的脚本。之后文档的状态会变为**完成（complete）**，浏览器会触发**加载（load）**事件。
+
+注意解析 HTML 网页时永远不会出现**无效语法（Invalid Syntax）**错误，浏览器会修复所有错误内容，然后继续解析。
diff --git "a/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\351\207\215\347\273\230\343\200\201\345\233\236\346\265\201\345\222\214\345\220\210\346\210\220.md" "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\351\207\215\347\273\230\343\200\201\345\233\236\346\265\201\345\222\214\345\220\210\346\210\220.md"
new file mode 100644
index 0000000..fb84209
--- /dev/null
+++ "b/\346\265\217\350\247\210\345\231\250/\346\265\217\350\247\210\345\231\250\351\207\215\347\273\230\343\200\201\345\233\236\346\265\201\345\222\214\345\220\210\346\210\220.md"
@@ -0,0 +1,100 @@
+# 浏览器重绘、回流和合成
+
+重排和重绘是[关键渲染路径](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path)中的两步，本文将介绍它们两个的影响。
+
+## 重绘
+
+重绘（Repaint）是指浏览器重新绘制网页的过程。在重绘中，浏览器会根据渲染树重新绘制每个节点。
+
+当对元素所做的更改明显改变其外观但不影响其布局时，会触发重绘。
+
+常见的情况包括：更改元素的颜色或背景色、边框样式、不透明度、阴影、可见性等。
+
+[根据 Opera 的说法](https://dev.opera.com/articles/efficient-javascript/?page=3#reflow)，重绘是昂贵的，因为浏览器必须验证 DOM 树中所有其他节点的可见性。
+
+> 重绘是在[关键渲染路径](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%85%B3%E9%94%AE%E6%B8%B2%E6%9F%93%E8%B7%AF%E5%BE%84.md)中的 Paint 阶段，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化。
+
+## 回流（Reflow）
+
+回流/重排是指浏览器重新计算网页布局的过程。在回流中，浏览器会根据渲染树重新计算每个节点的位置和大小。
+
+当网页中的内容、样式或者结构发生变化时，会触发回流。常见的情况如下：
+
+- 改变页面元素的尺寸，如宽度、高度、字体等。
+- 添加或删除页面元素。
+- 更改页面元素的类名或者样式。
+- 更改页面元素的内容。
+- 改变浏览器窗口大小。
+- 滚动页面。
+
+回流对性能更为关键，因为它涉及到影响部分页面（或整个页面）布局的更改。
+
+> 回流是在[关键渲染路径](https://github.com/lio-zero/blog/blob/main/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%85%B3%E9%94%AE%E6%B8%B2%E6%9F%93%E8%B7%AF%E5%BE%84.md)中的 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时，其父元素及其后面的元素位置都可能发生变化，代价极高。
+
+关于回流和重绘需要注意一点的是，**回流必定会发生重绘，但重绘不一定会引起回流**。
+
+## 合成（Composite）
+
+合成是指浏览器将多个图层合并成一个最终的屏幕显示的过程。
+
+在浏览器中，每个元素会被渲染成一个图层。当有多个图层重叠时，浏览器会根据这些图层的层级关系，将它们合并成一个最终的显示。
+
+合成过程是按照层级顺序进行的，先合成的图层在底层，后合成的图层在上层。在这个过程中，浏览器会根据各个图层的样式和透明度进行相应的处理，最终得到最终的显示。
+
+但合成是一个很耗时的过程，因此，通过减少不必要的图层数量来减少合成次数可以提高性能。除了减少合成次数外，还有一种方法可以提高合成的性能：**GPU 加速**。
+
+### GPU 加速
+
+合成和 GPU 加速有着密切的关系。
+
+在浏览器中，合成过程是由 CPU 进行的，因此当图层数量增加或者图层样式变得复杂时，合成的性能会受到影响。
+
+而 GPU 加速则是指利用 GPU 的高性能进行合成，这样可以大大提高合成的性能。
+
+通过 GPU 加速，浏览器可以将合成过程中的大量运算转移到 GPU 上进行，这样可以减少 CPU 的工作量，提高网页渲染性能。
+
+可以使用以下几种方式来开启 GPU 加速：
+
+- CSS 3D 变换 — 使用 CSS 3D 变换属性，如 `transform: translateZ()` 或 `transform: rotateX()` 等，可以让浏览器使用 GPU 来进行图形渲染。
+- CSS 硬件加速 — 使用 CSS 属性如 `transform`、`opacity`、`filter` 等可以让浏览器使用 GPU 来进行图形渲染。
+- WebGL — 使用 WebGL 可以在浏览器中使用 GPU 来进行 3D 图形渲染。
+- requestAnimationFrame — 使用 `requestAnimationFrame` 来控制动画，可以让浏览器优化动画性能并使用 GPU 来渲染。
+- canvas — 使用 `canvas` 可以让浏览器使用 GPU 来进行图像处理和渲染。
+
+需要注意的是，GPU 加速并不能给所有类型的操作都带来性能提升，对于一些特殊的操作，甚至会降低性能，需要根据实际情况进行权衡。例如，使用多个层级的 3D 变换可能会导致性能问题，过多的硬件加速可能会增加带宽和内存的使用。因此，在使用 GPU 加速时，需要根据网页的具体需求和目标设备的性能来选择使用哪些方式。
+
+### 提升为合成层好处
+
+在提升为合成层的情况下，会直接跳过 layout 和 paint 阶段，直接进入非主线程处理的部分，即直接交给合成线程处理。
+
+将元素提升为合成层可以带来以下优势：
+
+- 合成层的位图，会交由 GPU 合成，它会比 CPU 处理要快
+- 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
+- 元素提升为合成层后，将不会触发 layout 和 paint 阶段。
+
+## 如何减少回流和重绘？
+
+频繁的触发回流和重绘会影响网站的性能，应该尽量避免这种情况的发生。
+
+如何减少回流和重绘，其实对应的就是减少它会触发的情况，这在上文已经有所介绍，更为详细的内容可以查阅[介绍下重绘和回流（Repaint & Reflow），以及如何进行优化](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24)。
+
+你可以在 [CSS Triggers](http://csstriggers.com/) 上了解哪些 CSS 属性会引起回流、重绘和合成。
+
+![CSS Triggers](https://upload-images.jianshu.io/upload_images/18281896-6cf44c322592a46a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+> **Tips**：CSS Triggers 已不在维护。
+
+需要知道一点，**重绘由于 DOM 位置信息不需要更新，省去了布局过程，因此性能上优于回流**。
+
+## 更多资料
+
+上面介绍的比较浅，感兴趣的继续往下阅读：
+
+- [你真的了解回流和重绘吗](https://zhuanlan.zhihu.com/p/52076790)
+- [前端性能优化：细说浏览器渲染的重排与重绘](http://www.imooc.com/article/45936)
+- [ON LAYOUT & WEB PERFORMANCE](https://kellegous.com/j/2013/01/26/layout-performance/)
+- [REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)
+- [详谈层合成（composite）](https://juejin.cn/post/6844903502678867981)
+- [CSS GPU Animation: Doing It Right](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/)
+- [Accelerated Rendering in Chrome](https://web.dev/speed-layers/)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/DNS \342\200\224 \345\237\237\345\220\215\347\263\273\347\273\237.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/DNS \342\200\224 \345\237\237\345\220\215\347\263\273\347\273\237.md"
new file mode 100644
index 0000000..e0eea26
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/DNS \342\200\224 \345\237\237\345\220\215\347\263\273\347\273\237.md"	
@@ -0,0 +1,50 @@
+# DNS — 域名系统
+
+你通常不会尝试使用 IP 地址访问网站。可以这么做，但这很罕见。
+
+你通常使用域名。比如 baidu.com 或 lio-zero.com。
+
+这非常方便，因为例如，我可以更改用于托管网站的服务器和公司，同时保持相同的域名。
+
+将人类可读的域名映射为机器可读的 IP 地址的系统称为 DNS（域名系统）。
+
+DNS 是一个服务器网络。您的提供商将拥有自己的 DNS，您的路由器已经预先配置好使用它。
+
+您也可以选择使用阿里的 DNS 服务器，其 IP 地址为 223.5.5.5。
+
+这些 DNS 服务器将接收来自您计算机的请求，然后会询问它们自己的参考 DNS 服务器。
+
+系统组织起来像一棵树。顶部有一个 DNS 服务器，称为根 DNS 服务器。
+
+为了简化，它知道管理每个域扩展（如 `com`、`cn`、`net` 和 `org` 等）的 DNS 服务器的 IP 地址，包括特定于国家的域扩展和新的域扩展（如 `blog`、`dev` 或 `tech`）。
+
+这些 DNS 服务器知道其扩展名下所有域的 IP 地址映射。
+
+当然，系统的设置是为了确保缓存、冗余和承受高并发请求的能力，但这是总体思路。
+
+## DNS 解析
+
+由于我们输入的是域名，而数据包是通过 IP 地址传给对方的。因此我们需要得到域名对应的 IP 地址。这个过程需要依赖一个服务系统，这个系统将域名和 IP 一一映射，我们将这个系统就叫做 DNS（域名系统）。得到具体 IP 的过程就是 DNS 解析。
+
+当然，值得注意的是，浏览器提供了 DNS 数据缓存功能。即如果一个域名已经解析过，那会把解析的结果缓存下来，下次处理直接走缓存，不需要经过 DNS 解析。
+
+另外，如果不指定端口的话，默认采用对应的 IP 的 80 端口。
+
+## DNS 记录
+
+DNS 由多条不同类型的记录组成，每条记录都有自己的用途。以下是最常用的分类：
+
+- A 记录 — 地址记录。用于将域名映射到 IPv4 地址。同样，AAAA 记录用于将域名映射到 IPv6 地址。
+- CNAME 记录 — 规范的名称记录。创建指向另一个域或子域的别名，但绝不是 IP 地址。
+- ANAME 记录 — 允许您将域的根指向主机名或域名。
+- TXT 记录 — 允许添加有限的文本注释，通常用于所有权验证、验证或安全目的。
+- MX 记录 — 指定负责接受域的传入和传出电子邮件的邮件服务器。应该指向邮件服务器名称，而不是 IP 地址。
+
+## 更多资料
+
+[Cloudflare 平台有提供了许多资料，包括 DNS](https://www.cloudflare.com/zh-cn/learning/)：
+
+- [什么是 DNS？ | DNS 的工作方式](https://www.cloudflare.com/zh-cn/learning/dns/what-is-dns/)
+- [什么是 DNS 服务器？](https://www.cloudflare.com/zh-cn/learning/dns/what-is-a-dns-server/)
+- [DNS 记录](https://www.cloudflare.com/zh-cn/learning/dns/dns-records/)
+- etc
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP 2.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP 2.md"
new file mode 100644
index 0000000..4a2567e
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP 2.md"	
@@ -0,0 +1,60 @@
+# HTTP/2
+
+HTTP/2 在 2015 年由 IETF（互联网工程任务组）委员会作为 RFC 7540 发布。它旨在通过提供更有效的互联网传输数据方式来提高原始 HTTP 协议的性能。
+
+**HTTP/2 的性能远远高于 HTTP/1.1。**
+
+HTTP/2 提供的速度缓冲非常吸引人，因此很快就被采用了，只需对 web 服务器进行一个简单的更改（因为 HTTP/2 与 HTTP/1.1 完全向后兼容），您的网站和 web 应用将运行得更快，这反过来对您的用户和 SEO 都是有益的（因为速度是排名的关键因素）。
+
+## HTTP/2 如何比 HTTP/1.1 快得多？
+
+原因有很多，都是为了降低以前版本的低效率，并引入可以让浏览器更快地提供资源的功能。
+
+新版协议的主要特点：
+
+- 请求和响应的多路复用 — 通过单个连接的多个异步 HTTP 请求
+- header 压缩 — 新的压缩算法 HPACK 压缩 header
+- 服务器推送 — 单个请求的多个响应
+- 二进制通信 — 文本通信替换为二进制通信
+- 请求优先级 — 先获取重要的数据
+- 提高安全性
+
+## 多路复用
+
+在 HTTP/2 之前，每个 TCP 连接一次只能提供一个响应。
+
+TCP 是构建 HTTP 的底层协议。TCP 位于传输层，而 HTTP 位于应用层。
+
+HTTP/2 在单个 TCP 连接上启用了请求/响应多路复用，允许服务器使用同一连接服务多个请求，从而实现更快的通信。
+
+这是对应用有很大好处的变化，并且使一些优化技术过时，包括[精灵图](https://github.com/lio-zero/blog/blob/main/CSS/CSS%20Reset%20%E4%B8%8E%20Sprites.md#%E4%BB%80%E4%B9%88%E6%98%AF%E7%B2%BE%E7%81%B5%E5%9B%BEcss-sprites%E5%85%B6%E4%BC%98%E7%BC%BA%E7%82%B9%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0)（用于在单个图像中组合多个图像，然后使用特殊的 CSS 技术“解复用”）和域切分，这是另一种用于防止浏览器限制同时连接到同一域的数量的 Hack。
+
+## header 压缩
+
+考虑到 Cookie 和其他 header 值的正常使用，页面和资源上的 HTTP headers 可能会变得非常大。新的 header 压缩算法减小了 headers 大小以提高效率，从而减少了客户端和服务器之间交换的数据量。
+
+## 服务器推送
+
+服务器推送是一项允许对单个请求发送多个响应的功能。由于服务器知道，当请求资源时，客户端将请求其他补充资源（比如 CSS、JS、链接到页面的图像），因此服务器可以决定立即发送它们。
+
+服务器可以完全推送它们，而不是发送 HTML，等待浏览器解析它并触发其他请求来获取资源。
+
+服务器还可以决定发送未来请求中可能需要的资源，预先优化下一页负载并将其放入客户端缓存中。
+
+但需要注意，服务器推送也有其自身的缺点。例如，您可能会向客户端发送太多可能不需要的数据（可能在客户端上已缓存），因此请谨慎使用。
+
+## 二进制通信
+
+HTTP/1.1 使用基于文本的通信。HTTP/2 使用二进制通信，它有一些优点，包括更高效的解析、更少的错误倾向和更紧凑的结构。
+
+## 更多资料
+
+- [Journey to HTTP/2](https://kamranahmed.info/blog/2016/08/13/http-in-depth)
+- [解密 HTTP/2 与 HTTP/3 的新特性](https://juejin.cn/post/6844903968380813325)
+- [Getting Ready For HTTP2: A Guide For Web Designers And Developers](https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/)
+- [A Comprehensive Guide To HTTP/2 Server Push](https://www.smashingmagazine.com/2017/04/guide-http2-server-push/)
+- [Will WebSocket survive HTTP/2?](https://www.infoq.com/articles/websocket-and-http2-coexist/)
+- [Using SSE Instead Of WebSockets For Unidirectional Data Flow Over HTTP/2](https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2/)
+- [简单讲解一下 http2 的多路复用](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/14)
+- [What is HTTP/2 – The Ultimate Guide](https://kinsta.com/learn/what-is-http2/)
+- [http2-explained](https://http2-explained.haxx.se/zh)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP Cookie.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP Cookie.md"
new file mode 100644
index 0000000..f0885a4
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP Cookie.md"	
@@ -0,0 +1,272 @@
+# HTTP Cookie
+
+通过使用 Cookie，我们可以在服务器和浏览器之间交换信息，以提供一种自定义用户会话的方式，并让服务器在请求之间识别用户。
+
+HTTP 是无状态的，这意味着所有发送到服务器的请求源都是完全相同的，服务器无法确定请求是来自之前已经发送过请求的客户端，还是一个新的请求。
+
+当 HTTP 请求发送时，浏览器会将 Cookie 随请求发送到服务器，然后从服务器返回，服务器可以编辑 Cookie 的内容。
+
+**Cookie 本质上用于存储会话 id。**
+
+过去，Cookie 用于存储各种类型的数据，因为没有其他选择。但现在有了 [Web Storage API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API)（本地存储和会话存储）和 [IndexedDB](https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API)，我们有了更好的选择。
+
+尤其是因为 Cookie 所能保存的数据量非常有限，因为它会在每次 HTTP 请求到我们的服务器时来回发送，包括对图像或 CSS 或 JavaScript 文件等资源的请求。
+
+Cookie 有着悠久的历史，它在 1994 年推出了第一个版本，随着时间的推移，它们在多个 RFC 修订版中被标准化。
+
+> RFC（Request for Comments），是互联网工程任务组（IETF）定义标准的方式，IETF 是负责制定互联网标准的实体。
+
+最新的 Cookie 规范在 2011 年的 [RFC 6265](https://tools.ietf.org/html/rfc6265) 中定义。
+
+## Cookie 的限制
+
+- Cookie 只能存储 4KB 的数据
+- Cookie 是域私有的。网站只能读取其设置的 Cookie，不能读取其他域的 Cookie
+- 每个域最多可以有 20 个 Cookie 限制（但具体数量取决于具体的浏览器实现）
+- Cookie 的总数是有限的（但具体的数量取决于具体的浏览器实现）。如果超过这个数量，新的 Cookie 将替换旧的 Cookie。
+
+可以在服务器端或客户端设置或读取 Cookie。
+
+在客户端，Cookie 由文档对象公开为 `document.cookie`。
+
+## 设置 Cookie
+
+设置 Cookie 的最简单示例：
+
+```js
+document.cookie = 'name=O.O'
+```
+
+这将向现有 Cookie 添加一个新 Cookie（它不会覆盖现有的 Cookie）
+
+Cookie 值应使用 `encodeURIComponent()` 进行 URL 编码，以确保其不包含任何在 Cookie 值中无效的空格、逗号或分号。
+
+## 设置 Cookie 过期日期
+
+如果您没有设置任何其他内容，Cookie 将在浏览器关闭时过期。为了防止出现这种情况，请添加一个到期日期，以 UTC 格式表示（例如 Mon, 12 Mar 2022 17:04:05 UTC）
+
+```js
+document.cookie = 'name=0.0; expires=Mon, 12 Mar 2022 17:04:05 UTC'
+```
+
+设置 24 小时后过期的 Cookie 的简单 JavaScript 片段：
+
+```js
+const date = new Date()
+
+date.setHours(date.getHours() + 24)
+document.cookie = 'name=O.O; expires=' + date.toUTCString()
+```
+
+或者，您可以使用 `max-age` 参数设置以秒数表示的过期时间：
+
+```js
+document.cookie = 'name=O.O; max-age=3600' // 60 分钟后过期
+document.cookie = 'name=O.O; max-age=31536000' // 1年后过期
+```
+
+## 设置 Cookie Path
+
+`path` 参数指定 Cookie 的文档位置，因此它被分配给特定路径，并且仅当路径与当前文档位置或父级匹配时才发送到服务器：
+
+```js
+document.cookie = 'name=O.O; path=/dashboard'
+```
+
+此 Cookie 发送到 `/dashboard`、`/dashboards/today` 和 `/dashboard/` 的其他子 URL 上发送，但不会发送到 `/posts` 上。
+
+如果未设置路径，则默认为当前文档位置。这意味着要从内部页面应用全局 Cookie，需要指定 `path=/`。
+
+## 设置 Cookie Domain
+
+`domain` 参数可用于为 Cookie 指定子域。
+
+```js
+document.cookie = 'name=O.O; domain=mysite.com;'
+```
+
+如果未设置，它默认为 `host` 部分，即使使用子域（如果在 `subdomain.mydomain.com` 上，默认情况下它被设置为 `mydomain.com`）。域 Cookie 包含在子域中。
+
+## Cookie 安全性
+
+### Secure
+
+添加 `Secure` 参数可以确保 Cookie 只能通过 HTTPS 安全传输，并且不会通过未加密的 HTTP 连接发送：
+
+```js
+document.cookie = 'name=O.O; Secure;'
+```
+
+请注意，这不会以任何方式使 Cookie 变得安全，始终避免向 Cookie 添加敏感信息
+
+### HttpOnly
+
+一个有用的参数是 `HttpOnly`，它使 Cookie 无法通过 `document.cookie` 访问，因此它们只能由服务器编辑：
+
+```js
+document.cookie = 'name=O.O; Secure; HttpOnly'
+```
+
+### SameSite
+
+[`SameSite`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite) 参数允许服务器要求 Cookie 不在跨站点请求上发送，而只在以 Cookie 域为源的资源上发送，这对降低 CSRF（跨站点请求伪造）攻击的风险有很大帮助。
+
+```js
+document.cookie = 'name=O.O; SameSite=None; Secure;'
+```
+
+它有三个值：
+
+- `None` — 任何情况下都会向第三方网站请求发送 Cookie
+- `Lax` — 只有导航到第三方网站的 GET 链接会发送 Cookie，跨域的图片、`iframe` 和 `form` 表单都不会发送 Cookie
+- `Strict` — 任何情况下都不会向第三方网站请求发送 Cookie
+
+目前，主流浏览器 `SameSite` 的默认值为 `Lax`，而在以前是 `None`，这将会预防大部分 CSRF 攻击，如果需要手动指定 `SameSite` 为 `None`，需要指定 Cookie `Secure` 属性，即在 HTTPS 下发送。
+
+> 推荐：阮一峰老师的 [Cookie 的 SameSite 属性](http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html)或冴羽的[预测最近面试会考 Cookie 的 SameSite 属性](https://juejin.cn/post/6844904095711494151)。
+
+## 更新 Cookie 值或参数
+
+要更新 Cookie 的值，只需为 Cookie 名称分配一个新值：
+
+```js
+document.cookie = 'name=K.O'
+```
+
+与更新值类似，要更新过期日期，请使用新的 `expires` 或 `max age` 属性重新分配值：
+
+```js
+document.cookie = 'name=O.O; max-age=31536000' // 1 年后过期
+```
+
+只需记住，还要添加您最初添加的任何其他参数，如 `path` 或 `domain`。
+
+## 删除 Cookie
+
+要删除 Cookie，请取消设置其值并传递过去的日期：
+
+```js
+document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC;'
+```
+
+同样，还有您用来设置它的其他所有参数
+
+## 访问 Cookie 值
+
+要访问 Cookie，请使用 `document.cookie`：
+
+```js
+const cookies = document.cookie
+```
+
+这将返回一个字符串，其中包含为页面设置的所有 Cookie，以分号分隔：
+
+```js
+'name1=O.O; name2=K.O; name3=D.O'
+```
+
+## 检查 Cookie 是否存在
+
+```js
+// ES5
+const hasName = document.cookie
+  .split(';')
+  .filter((item) => item.includes('name=')).length
+
+if (hasName) {
+  // name 存在
+}
+```
+
+## 库
+
+有许多不同的库将提供更友好的 API 来管理 Cookie。其中之一是 [js-cookie](https://github.com/js-cookie/js-cookie)，它最高支持 IE7，并且在 GitHub 上有很多 `star`（这总是很好）。
+
+它的一些用法示例：
+
+```js
+Cookies.set('name', 'value')
+Cookies.set('name', 'value', {
+  expires: 7,
+  path: '',
+  domain: 'subdomain.site.com',
+  secure: true
+})
+
+Cookies.get('name') // => 'value'
+Cookies.remove('name')
+
+// JSON
+Cookies.set('name', { name: 'O.O' })
+Cookies.getJSON('name') // => { name: 'O.O' }
+```
+
+**使用该 API 还是原生 Cookie API？**
+
+这取决于您的选择，`js-cookie` 提供的 API 看起来更好，但它需要额外添加一定大小的包到项目中。
+
+## 在服务器端使用 Cookie
+
+用于构建 HTTP 服务器的每个环境都允许您与 cookie 进行交互，因为 Cookie 是现代 Web 的支柱，没有它们就无法构建很多内容。
+
+这里有一个 Node.js 示例。
+
+使用 Express.js 时，您可以使用 [`res.cookie`](http://expressjs.com/en/api.html#res.cookie) 创建 Cookie：
+
+```js
+res.cookie('name1', 'O.O', {
+  domain: '.example.com',
+  path: '/admin',
+  secure: true
+})
+
+res.cookie('name2', 'K.O', {
+  expires: new Date(Date.now() + 900000),
+  httpOnly: true
+})
+
+res.cookie('name3', 'D.O', { maxAge: 900000, httpOnly: true })
+
+// 负责序列化 JSON
+res.cookie('name4', { items: [1, 2, 3] }, { maxAge: 900000 })
+```
+
+要解析 Cookie，一个好的选择是使用 [cookie-parser](https://github.com/expressjs/cookie-parser) 中间件。每个请求对象在 `req.cookie` 属性中都会有 Cookie 信息：
+
+```js
+req.cookies.name // O.O
+req.cookies.age // 20
+```
+
+如果您使用 `signed: true` 创建 Cookie：
+
+```js
+res.cookie('name', 'O.O', { signed: true })
+```
+
+它将在 `req.signedCookies` 对象中可用。签名的 Cookie 受到保护，不会在客户端上进行修改。用于对 Cookie 值进行签名的签名确保您可以在服务器端知道客户端是否已对其进行了修改。
+
+[session](https://github.com/expressjs/session) 和 [cookie-session](https://github.com/expressjs/cookie-session) 有两种不同的中间件选项用于构建基于 Cookie 的身份验证，使用哪种取决于您的需求。
+
+## 使用浏览器开发工具检查 Cookie
+
+DevTools 中的所有浏览器都提供了一个用于检查和编辑 Cookie 的界面。
+
+Chrome：
+
+![Chrome 开发工具 cookie](https://upload-images.jianshu.io/upload_images/18281896-e1f9f6c009ba1573.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+Firefox：
+
+![Firefox 开发工具 cookie](https://upload-images.jianshu.io/upload_images/18281896-1640beb9d2c6cbe6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+另外，Google 浏览器的有一个 EditThisCookie 扩展用于管理 Cookie。您可以添加，删除，编辑，搜索，锁定和屏蔽 Cookie！
+
+## Cookie 的替代品
+
+有一种流行的技术，称为 JSON Web Tokens（JWT），它是一种基于 Token 的身份验证。
+
+## 更多资料
+
+- [Cookie，document.cookie](https://zh.javascript.info/cookie)
+- [当浏览器全面禁用三方 Cookie](https://juejin.cn/post/6844904128557105166)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \344\270\216 HTTPS \347\232\204\345\214\272\345\210\253.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \344\270\216 HTTPS \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..2483093
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \344\270\216 HTTPS \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,63 @@
+# HTTP 与 HTTPS 的区别
+
+HTTP（超文本传输协议）是为我们所知的网络提供支持的协议。
+
+它位于 TCP 之上，TCP 位于 IP 之上。
+
+网页可以使用 HTTP 或 HTTPS（安全超文本传输协议）。
+
+**它们有何不同？**而且，为什么现在 HTTP 被 Chrome 标记为不安全？
+
+## 安全
+
+当您从服务器请求 HTTP 页面时，数据会通过许多不同的网络，每个网络由单独的公司或实体控制。
+
+从可能属于咖啡店或城市公共网络基础设施的 Wi-Fi 路由器开始，网络中的每个节点都可以看到请求和响应，并以任何方式对其进行修改。
+
+他们可能会注入广告、恶意软件，并记录您输入的任何凭据。中间的服务器可以充当中间人，发送受损信息。
+
+这也适用于任何不安全的互联网协议。
+
+HTTPS 流量是端到端加密的，这意味着两者之间没有任何东西可以读取您与网络另一端服务器之间交换的信息。
+
+现代的浏览器会将 HTTP 站点标记为不安全。
+
+## 端口
+
+默认情况下，HTTP 在端口 80 上提供服务，而 HTTPS 在端口 443 上提供服务。这些是默认端口，但 Web 服务器可以选择在不同的随机端口上提供内容，在这种情况下，您需要在地址栏：
+
+```bash
+http://github.com/lio-zero
+http://github.com:80/lio-zero
+https://github.com:443/lio-zero
+https://github.com:8081/lio-zero # ❌ 可以在不同的端口运行，但这里提供地址行不通
+```
+
+## HTTPS 会影响速度？
+
+很多人人认为 HTTPS 所需的 TLS 握手使页面速度变慢，但实际上，HTTPS 页面的加载方式，比 HTTP 快得多。
+
+**为什么？**因为 HTTP/2。HTTP/2 可以并行处理请求，并且需要安全连接，因此，如果您的服务器使用支持 HTTP/2 的现代 Web 服务器，那么在使用 HTTPS 时，您的网页将会有明显的速度提升。
+
+HTTP/2 引入了更好的并行性、二进制传输、多路复用和 header 压缩等，这是对 HTTP 的一次了不起的更新。
+
+> HTTP/3 已在六月份已被采纳为 IETF 标准。但应用范围还不足。后面我们会单独说一说。
+
+您可以查看 [HTTP vs HTTPS Test](https://www.httpvshttps.com/) 和 [I wanna go fast: HTTPS' massive speed advantage](https://www.troyhunt.com/i-wanna-go-fast-https-massive-speed-advantage/)，以了解它们在速度上的对比。
+
+## HTTPS 很难实现吗？
+
+并不。开启 HTTPS 需要提供 SSL 证书，它用于网站的身份认证，可以确定网站真实性，并保证网站用户信息传输的机密性。
+
+很多厂商都提供了免费的共享 SSL 证书，如果需要单独注册网络资源，也可以购买收费的。
+
+您可以阅读 [The Complete Guide To Switching From HTTP To HTTPS](https://www.smashingmagazine.com/2017/06/guide-switching-http-https/) 了解如何从 HTTP 切换到 HTTPS 的具体过程。
+
+至于免费证书，您可以购买国内的，例如阿里云提供的免费证书。冴羽有一篇 VuePress 搭建博客系列有一篇：[VuePress 博客优化之开启 HTTPS](https://github.com/mqyqingfeng/Blog/issues/246)，可以看看。
+
+## 更多资料
+
+- [HTTP vs HTTPS — What's the Difference?](https://www.freecodecamp.org/news/http-vs-https/)
+- [HTTP 和 HTTPS 详解](https://juejin.cn/post/6844903604868874247)
+- [20 分钟助你拿下 HTTP 和 HTTPS，巩固你的 HTTP 知识体系](https://juejin.cn/post/6994629873985650696)
+- [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \344\270\255 GET \345\222\214 POST \347\232\204\345\214\272\345\210\253\357\274\237.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \344\270\255 GET \345\222\214 POST \347\232\204\345\214\272\345\210\253\357\274\237.md"
new file mode 100644
index 0000000..0655000
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \344\270\255 GET \345\222\214 POST \347\232\204\345\214\272\345\210\253\357\274\237.md"	
@@ -0,0 +1,42 @@
+# HTTP 中 GET 和 POST 的区别？
+
+从原理性看：
+
+- 根据 HTTP 规范，GET 请求用于获取信息，而且应该是安全和幂等的，而 POST 请求表示可能修改服务器上资源
+
+从表面上看：
+
+- GET 请求的数据会附在 URL 后面（浏览器地址栏、Req Header 上），POST 的数据放在 HTTP 包体（Req Body 上）
+- POST 安全性比 GET 安全性高，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息。
+
+> 这里的安全性是有待思考的，可以在 [Is either GET or POST more secure than the other?](https://stackoverflow.com/questions/198462/is-either-get-or-post-more-secure-than-the-other) 查看讨论结果。
+
+下面是一些具体的区别。
+
+GET 请求：
+
+- GET 请求可以被缓存
+- GET 请求保留在浏览器历史记录中
+- GET 请求可以添加书签
+- 处理敏感数据时，绝不应使用 GET 请求
+- GET 请求有长度限制
+- GET 请求应仅用于检索数据
+- GET 产生一个 TCP 数据包
+- GET 请求仅支持进行 URL 编码
+- GET 参数通过 URL 传递
+
+POST 请求：
+
+- POST 请求永远不会被缓存
+- POST 请求不会保留在浏览器历史记录中
+- 不能为 POST 请求添加书签
+- POST 请求对数据长度没有限制
+- POST 产生两个 TCP 数据包
+- POST 支持多种编码方式
+- POST 放在请求体（Request body）中
+
+需要注意的是，GET 请求提交的数据大小长度并没有限制，HTTP 协议规范没有对 URL 长度进行限制。这里的 GET 长度有限制，是指特定的浏览器及服务器对它的限制。
+
+不同的浏览器长度限制可以查阅 [What is the maximum length of a URL in different browsers?](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers?rq=1)。服务器的话可以查阅 [Is there a practical HTTP Header length limit?](https://stackoverflow.com/questions/1097651/is-there-a-practical-http-header-length-limit)。
+
+也可以看看 [99% 的人都理解错了 HTTP 中 GET 与 POST 的区别](https://mp.weixin.qq.com/s?__biz=MzI3NzIzMzg3Mw==&mid=100000054&idx=1&sn=71f6c214f3833d9ca20b9f7dcd9d33e4#rd)。
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \347\274\223\345\255\230.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \347\274\223\345\255\230.md"
new file mode 100644
index 0000000..3729147
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTP \347\274\223\345\255\230.md"	
@@ -0,0 +1,128 @@
+# HTTP 缓存
+
+缓存是一种可以帮助网络连接更快的技术，因为需要传输的东西越少越好。
+
+许多资源可能非常大，检索的时间和实际成本（例如，在移动设备上）都非常昂贵。
+
+HTTP 提供了不同的缓存策略供浏览器使用。
+
+## 无缓存
+
+首先，`Cache-Control` header 可以通过使用 `no-cache` 值，告诉浏览器在不首先检查 `ETag` 值（稍后将对此进行详细介绍）的情况下永远不要使用资源的缓存版本：
+
+```http
+Cache-Control: no-cache
+```
+
+更严格的 `no-store` 选项告诉浏览器（以及所有中间网络设备）不将资源存储在其缓存中：
+
+```http
+Cache-Control: no-store
+```
+
+如果 `Cache-Control` 有 `max-age` 值，则该值用于确定此资源作为缓存有效的秒数：
+
+```http
+Cache-Control: max-age=7200
+```
+
+## `Expires` header
+
+当发送 HTTP 请求时，浏览器根据所需的 URL 检查缓存中是否有该页面的副本。
+
+如果有，它会检查页面的新鲜度。
+
+如果 HTTP 响应 `Expires` header 值小于当前日期时间，则页面是最新的。
+
+`Expires` header 采用以下形式：
+
+```http
+Expires: Tue, 04 Oct 2022 19:00:00 GMT
+```
+
+## 强缓存
+
+HTTP/1.0 使用的是 `Expires` header，HTTP/1.1 使用的是 `Cache-Control` header。
+
+- `Expires` 即过期时间，时间是相对于服务器的时间而言的，存在于服务端返回的响应头中，在这个过期时间之前可以直接从缓存中获取数据，无需再次请求。但这种方式存在一个问题：**无需再次请求服务器的时间和浏览器的时间可能并不一致**。
+- 在 HTTP/1.1 中，使用的是 `Cache-Control` header，这个 header 采用的时间是过期时长，对应的值是 `max-age=*`。
+
+当 `Expires` 和 `Cache-Control` 同时存在时，优先考虑 `Cache-Control` header。当缓存资源失效了，也就是没有命中强缓存，接下来就进入协商缓存。
+
+## 协商缓存
+
+如果缓存过期了，我们就可以使用协商缓存来解决问题。协商缓存需要请求，如果缓存有效会返回 `304 Not Modified`。
+
+协商缓存需要客户端和服务端共同实现，和强缓存⼀样，也有两种实现方式：
+
+- 使用 `If-Modified-Since` 和 `Last-Modified`
+- 使用 `If-None-Match` 和 `ETag`
+
+所有这些都基于使用 `If-*` 请求头，并且 `ETag` 优先级⽐ `Last-Modified` 高。
+
+### `If-Modified-Since` 和 `Last-Modified`
+
+它添加一个 `If-Modified-Since` header，基于从当前缓存页面获得的 `Last-Modified` header 值。
+
+`Last-Modified` 表示本地文件最后修改时间，`If-Modified-Since` 会将当前缓存页面获得的 `Last-Modified` 的 header 值发送给服务器，询问服务器在该时间后资源是否有更新，有更新的话就会将新的资源发送回来。
+
+否则，服务器将返回一个 `304 Not Modified` 响应。
+
+> 这包括了发送的请求和页面请求。
+
+但是如果在本地打开缓存文件，就会造成 `Last-Modified` 被修改，所以在 HTTP/1.1 出现了 `ETag`。
+
+### `If-None-Match` 和 `ETag`
+
+web 服务器（取决于设置、页面的服务方式等）可以发送 `ETag` header。
+
+这是**资源的标识符**，类似于文件指纹。每次资源改变时，`ETag` 也应该改变。
+
+它就像一个校验和（checksum）。
+
+浏览器发送一个 `If-None-Match` header，其中包含一个（或多个）`ETag` 值。发送到服务器后，询问该资源 `ETag` 是否变动，有变动的话就将新的资源发送回来。
+
+否则返回 `304 Not Modified` 响应。
+
+### `Last-Modified` 与 `ETag` 的对比
+
+- 性能上，`Last-Modified` 优于 `ETag`，`Last-Modified` 记录的是时间点，而 `ETag` 需要根据文件的 MD5 算法生成对应的 hash 值。
+- 精度上，`ETag` 优于 `Last-Modified`。`ETag` 按照内容给资源带上标识，能准确感知资源变化，`Last-Modified` 在某些场景并不能准确感知变化。
+
+如果两者都存在，优先判断 `If-None-Match` 进行 `ETag` 协商缓存。
+
+## 缓存位置
+
+当命中强缓存和协商缓存返回 304 时，浏览器会从缓存中获取资源。
+
+浏览器中的缓存位置一共有四种，按优先级从高到低排列分别是：
+
+- Service Worker — 其借鉴了 Web Worker 思路，主要功能有：离线缓存、消息推送和网络代理，其中离线缓存就是 `Service Worker Cache`。
+- Memory Cache — 内存缓存，从效率上讲它是最快的，从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。
+- Disk Cache — 存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，优势在于存储容量和存储时长。
+- Push Cache — 推送缓存，它浏览器缓存的最后一道防线，它是 HTTP/2 的内容，详细内容可以查看 [HTTP/2 push is tougher than I thought](https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/)
+
+浏览器在选择 Disk Cache 与 Memory Cache 的存储上：内容使用率高的，文件优先进入磁盘。比较大的 JS、CSS 文件会直接放入磁盘，反之放入内存。
+
+## 强缓存与协商缓存区别
+
+- **强缓存** — 浏览器不会与服务端协商，而是直接获取浏览器缓存。
+- **协商缓存** — 浏览器会先向服务器确认资源的有效性后，才决定是从缓存中获取资源还是重新获取资源。
+- **强缓存在浏览器进行判断，而协商缓存在服务端进行判断**
+
+## 最后
+
+最后，我们来看一下整体的 HTTP 缓存的过程：
+
+首先，检查 `Cache-Control` header，验证强缓存是否可用
+
+- 如果可用的话，直接使用
+- 否则进入协商缓存，发送 HTTP 请求，服务器通过请求头中的 `If-Modified-Since` 或 `If-None-Match` header 检查资源是否更新
+  - 资源更新，返回资源和 200 状态码。
+  - 否则，返回 304 状态码，并告诉浏览器直接从缓存中获取资源。
+
+另外，我使用了 Node.js 模拟 HTTP 缓存行为，具体可以看看 [http.js](https://gist.github.com/lio-zero/cae442ccb74de84354398858d3486987)。
+
+## 更多资料
+
+[深入理解浏览器的缓存机制](https://www.jianshu.com/p/54cc04190252)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTPS.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTPS.md"
new file mode 100644
index 0000000..d1ff8c7
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/HTTPS.md"
@@ -0,0 +1,55 @@
+# HTTPS
+
+HTTP（超文本传输协议）在设计上是不安全的。
+
+当您打开浏览器并要求 web 服务器向您发送网页时，您的数据会执行 2 次行程：1 次从浏览器到 web 服务器，1 次从 web 服务器到浏览器。
+
+然后，根据网页的内容，您可能需要更多的连接来获取 CSS 文件、JavaScript 文件、图像等。
+
+在任何这些连接过程中，都可以检查和操作您的数据将要通过的任何网络。
+
+这样做的后果可能很严重：您可能会让第三方监视和记录您的所有网络活动，您甚至不知道它的存在，某些网络可能会注入广告，您可能会受到中间人攻击，这是一种安全威胁，攻击者可以在网络上操纵您的数据，甚至模拟您的计算机。对于某些人来说，只需收听通过公共且未加密的 Wi-Fi 网络传输的 HTTP 数据包是非常容易的。
+
+HTTPS（安全超文本传输协议）旨在从根本上解决这个问题：浏览器和 web 服务器之间的整个通信都是加密的。
+
+隐私和安全是当今互联网的主要关注点。几年前，您只需在受登录保护的页面中使用加密连接。此外，由于 SSL 证书的定价和复杂性，大多数网站只使用 HTTP。
+
+如今，HTTPS 在任何网站上都是必需的。现代的主流浏览器都将 HTTP 站点标记为不安全，只是为了给你一个有效的理由，在你的所有网站上强制使用 HTTPS。
+
+使用 HTTP 时，默认服务器端口为 80，在 HTTPS 上为 443。当然，如果服务器使用默认端口，则无需显式添加。
+
+HTTPS 有时也称为 HTTP over SSL，或 HTTP over TLS。两者的区别很简单：TLS 是 SSL 的继承者。
+
+使用 HTTPS 时，唯一未加密的是 web 服务器域和服务器端口。
+
+其他所有信息，包括资源路径、header、cookie 和查询参数都已加密。
+
+这里不会详细分析 TLS 协议背后是如何工作的，但你可能会认为它增加了大量开销，你是对的。
+
+添加到网络资源处理中的任何计算都会导致客户端、服务器和传输数据包大小的开销。
+
+然而 HTTPS 支持使用 HTTP/2，它比 HTTP/1.1 有一个巨大的优势：它的速度更快。
+
+**为什么？**原因有很多，一个是 header 压缩，一个是资源多路复用。还有一个是服务器推送：当请求一个资源时，服务器可以推送更多资源。因此，如果浏览器请求一个页面，它也会收到所需的所有资源（图像、CSS、JS）。
+
+撇开细节不谈，HTTP/2 是对 HTTP/1.1 的巨大改进，它需要 HTTPS。这意味着，尽管 HTTPS 有加密开销，但如果使用现代设置正确配置，它的速度恰好要比 HTTP 快得多。
+
+> HTTP 3 已在六月份已被采纳为 IETF 标准。
+
+## 总结
+
+HTTPS 是一种在 web 服务器和浏览器之间发送数据的安全方式。
+
+- HTTPS（安全超文本传输协议）是 HTTP 的安全版本
+- HTTPS 的默认端口为 443
+- HTTPS 是基于 TLS/SSL 证书的传输，它只是在 HTTP 的基础上增加了加密
+- 可以使用免费的共享 SSL 证书，如果需要单独注册网络资源，可以购买收费的，然后使用如 nginx 服务器进行配置。
+
+## 更多资料
+
+- [完全吃透 TLS/SSL](https://juejin.cn/post/6844903624640823310)
+- [「知识拾遗」你应该知道的 https](https://mp.weixin.qq.com/s/aMYp6Y5n26r9vdQIom4g0w)
+- [HTTPS 为何重要](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)
+- [Enabling HTTPS on Your Servers](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https)
+- [The Complete Guide To Switching From HTTP To HTTPS](https://www.smashingmagazine.com/2017/06/guide-switching-http-https/)
+- [谈谈 HTTPS](https://juejin.cn/post/6844903504046211079)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \344\270\211\346\254\241\346\217\241\346\211\213\347\232\204\350\277\207\347\250\213.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \344\270\211\346\254\241\346\217\241\346\211\213\347\232\204\350\277\207\347\250\213.md"
new file mode 100644
index 0000000..98e0c80
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \344\270\211\346\254\241\346\217\241\346\211\213\347\232\204\350\277\207\347\250\213.md"	
@@ -0,0 +1,33 @@
+# TCP 三次握手的过程
+
+由于 TCP 是面向连接的协议，因此需要先建立连接，然后两个设备才能进行通信。TCP 使用称为三向握手的过程来协商序列和确认字段并启动会话。这是该过程的图形表示：
+
+![三次握手](https://upload-images.jianshu.io/upload_images/18281896-6dc07a0167af98f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+三次握手（Three-way Handshake）过程如下：
+
+- 客户端发送一个 SYN（Synchronize）报文给服务端，表示客户端准备建立连接。
+- 服务端收到 SYN 报文后，回应一个 SYN + ACK（Synchronize-Acknowledgment）报文给客户端，表示服务端同意建立连接。
+- 客户端收到 SYN + ACK 报文后，回应一个 ACK（Acknowledgment）报文给服务端，表示客户端已经收到了服务端的回应，连接建立成功。
+
+数据传输过程完成后，TCP 将终止两个端点之间的连接。这个四步过程如下图所示：
+
+![四次握手](https://upload-images.jianshu.io/upload_images/18281896-8e75dcd7f400cb27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+四次握手（Four-way Handshake）过程如下：
+
+- 客户端发送一个 FIN（Finish）报文给服务端，表示客户端准备关闭连接。
+- 服务端收到 FIN 报文后，回应一个 ACK 报文给客户端，表示服务端已经收到了客户端的请求。
+- 服务端在结束所有数据传输后，也发送一个 FIN 报文给客户端，表示服务端准备关闭连接。
+- 客户端收到服务端的 FIN 报文后，回应一个 ACK 报文给服务端，表示客户端已经收到了服务端的请求。
+
+这种三次握手和四次握手的过程确保了连接的可靠性，避免了数据丢失和错误。
+
+## 更多资料
+
+我们只不过是简单总结了这个过程，如果你想了解其中详细的内容，有任何疑惑可以查阅以下文章：
+
+- [TCP three-way handshake](https://study-ccna.com/tcp-three-way-handshake/)
+- [面试官问到三次握手，我甩出这张脑图，他服了！](https://juejin.cn/post/6844904132071948295)
+- [TCP 的三次握手和四次挥手，了解泛洪攻击么](https://github.com/sisterAn/blog/issues/105)
+- [TCP 协议灵魂之问，巩固你的网路底层基础](https://juejin.cn/post/6844904070889603085)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \345\215\217\350\256\256.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \345\215\217\350\256\256.md"
new file mode 100644
index 0000000..74dc9b5
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \345\215\217\350\256\256.md"	
@@ -0,0 +1,29 @@
+# TCP 协议
+
+TCP 表示传输控制协议，它是 Web 和其他应用程序（如电子邮件）的基础。
+
+TCP 在 1981 年的 [RFC 793](https://tools.ietf.org/html/rfc793) 中定义，是 Internet 最古老的支柱之一。
+
+TCP 位于 Internet 协议（IP）之上，并构建了一个基础系统，HTTP、FTP、IMAP 等应用程序级协议都基于该系统。
+
+与 IP 和 UDP 不同，TCP 是面向连接的。
+
+在通过 TCP 进行传输之前，必须建立连接。以小数据包的形式发送数据，当通信结束时，连接关闭。
+
+当数据通过 TCP 传输时，必须发生一个相对复杂的称为握手的工作流程。
+
+这里不会详细介绍，但这种握手允许端到端连接，这确保了 TCP 可以提供其特有的功能之一：可靠性。使用 TCP，我们总是可以知道发送方发送的数据包是否被接收方正确接收。
+
+如果数据包丢失，协议能够处理它并重新发送数据包。
+
+在 IP 协议上，连接发生在计算机之间。在 TCP 中，使用端口的概念，连接发生在进程之间。
+
+与 IP 地址关联的端口允许唯一标识计算机上的进程。例如：`localhost:8080` 或 `google.com:1234`
+
+每个应用程序协议都有一个默认端口。例如 HTTP 为 80，HTTPS 为 443，FTP 为 21。这就是为什么您通常不必在浏览器中指定端口的原因。
+
+> 推荐：[常见的网络端口及对应服务](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/%E5%B8%B8%E8%A7%81%E7%9A%84%E7%BD%91%E7%BB%9C%E7%AB%AF%E5%8F%A3%E5%8F%8A%E5%AF%B9%E5%BA%94%E6%9C%8D%E5%8A%A1.md)。
+
+程序不需要使用默认值，这就是为什么特别是在本地计算机上，启动新应用程序时可能会看到 3000 或 8080 之类的端口。
+
+端口号范围从 1 到 65535（端口号是 16 位无符号，对应 2^16 个可能值）。
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \345\222\214 UDP \347\232\204\345\214\272\345\210\253.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \345\222\214 UDP \347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..ea3f5d5
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/TCP \345\222\214 UDP \347\232\204\345\214\272\345\210\253.md"	
@@ -0,0 +1,15 @@
+# TCP 和 UDP 的区别
+
+TCP 指[传输控制协议](https://zh.wikipedia.org/wiki/%E4%BC%A0%E8%BE%93%E6%8E%A7%E5%88%B6%E5%8D%8F%E8%AE%AE)（Transmission Control Protocol），而 UDP 指[用户数据报协议](https://zh.wikipedia.org/wiki/%E7%94%A8%E6%88%B7%E6%95%B0%E6%8D%AE%E6%8A%A5%E5%8D%8F%E8%AE%AE)（User Datagram Protocol），它们都运行在 IP（互联网协议）之上。是 [OSI](https://zh.wikipedia.org/wiki/OSI%E6%A8%A1%E5%9E%8B)（开放式系统互联模型）中的第 4 层协议。
+
+- TCP 是一个面向连接的、可靠的、基于字节流的传输层协议，而 UDP 是一个面向无连接的（发送数据之前不需要先建立连接）、不可靠、基于报文的传输层协议。
+- TCP 需要在网络接口级别进行更多处理，而在 UDP 中则不需要。
+- TCP 使用 3 次握手、拥塞控制、流量控制等机制来保证可靠传输。
+- UDP 主要用于数据包延迟比数据包丢失更严重的情况。
+- TCP 比 UDP 慢。
+
+## 更多资料
+
+- [Difference between TCP and UDP?](https://stackoverflow.com/questions/5970383/difference-between-tcp-and-udp)
+- [When is it appropriate to use UDP instead of TCP?](https://stackoverflow.com/questions/1099672/when-is-it-appropriate-to-use-udp-instead-of-tcp)
+- [UDP vs TCP, how much faster is it? [closed]](https://stackoverflow.com/questions/47903/udp-vs-tcp-how-much-faster-is-it)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/UDP \345\215\217\350\256\256.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/UDP \345\215\217\350\256\256.md"
new file mode 100644
index 0000000..5dbc5eb
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/UDP \345\215\217\350\256\256.md"	
@@ -0,0 +1,23 @@
+# UDP 协议
+
+UDP，即用户数据报协议，是一种传输协议，是 TCP 的替代协议。
+
+它与 TCP 的主要区别在于它是无连接的。
+
+这意味着它更快，每个发送的数据包更轻量级，因为它不包含 TCP 所需的所有信息，并且它确实具有更轻的握手过程。
+
+缺点是 UDP 不如 TCP 可靠。
+
+在 TCP 中，如果数据包丢失，协议能够处理它并重新发送数据包。
+
+在 UDP 中，这不是内置在协议中的，必须在更高级别（构建在它之上）进行处理。没有内置检查来控制是否接收到数据包，以及是否正确接收到数据包。
+
+UDP 于 1980 年在 [RFC 768](https://tools.ietf.org/html/rfc768) 中定义。
+
+依赖 UDP 层的一些最著名的应用协议是 DNS 和 DHCP，更重要的是 HTTP/3 的底层。
+
+UDP 协议使用端口来允许进程之间的通信，就像 TCP 一样。
+
+## 更多资料
+
+[TCP 和 UDP 的区别](https://github.com/lio-zero/blog/blob/main/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/TCP%20%E5%92%8C%20UDP%20%E7%9A%84%E5%8C%BA%E5%88%AB.md)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/URL \351\207\215\345\256\232\345\220\221.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/URL \351\207\215\345\256\232\345\220\221.md"
new file mode 100644
index 0000000..9f938cf
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/URL \351\207\215\345\256\232\345\220\221.md"	
@@ -0,0 +1,26 @@
+# URL 重定向
+
+[URL 重定向](https://zh.wikipedia.org/wiki/%E7%B6%B2%E5%9F%9F%E5%90%8D%E7%A8%B1%E8%BD%89%E5%9D%80)（URL redirection）是一种将网站访问者从一个 URL 转移到另一个 URL 的 Web 服务器技术。当用户访问其浏览器中的某个 URL 时，服务器会发回一条消息，告诉浏览器改为访问其他 URL。第二个 URL 可以在同一个域上，也可以在不同的域上。
+
+有两种常见的 URL 重定向类型：
+
+- **301（Moved Permanently）** — 告诉浏览器和搜索引擎重定向是永久性的，并且他们将来应该使用更新的 URL。
+- **302（Moved Temporarily）** — 表示重定向是临时的，浏览器和搜索引擎应继续请求原始 URL。
+
+![URL 重定向](https://www.elated.com/wp-content/uploads/2016/10/url-redirection.png)
+
+## 小技巧
+
+如果有一个令人讨厌的 301 重定向无法清除，请打开浏览器的开发工具勾选 **disable cache** 选项：
+
+![disable cache](https://upload-images.jianshu.io/upload_images/18281896-507706cec008ae17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以帮助你避免浏览器缓存中的 301 重定向。但这也意味着，在你禁用缓存并刷新网页时，浏览器将直接向服务器发出请求，而不是从缓存中加载网页。
+
+但是，禁用缓存并不会实际清除 301 重定向。它只会暂时使重定向失效，直到你关闭开发者工具或浏览器为止。
+
+## 更多资料
+
+- [永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/241)
+- [HTTP 状态码 301 和 302 的应用场景分别是什么](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/249)
+- [The Ultimate Guide to 3xx HTTP Status Codes](https://www.sitepoint.com/3xx-http-status-codes-ultimate-guide/)
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/\345\270\270\350\247\201\347\232\204 HTTP \347\212\266\346\200\201\347\240\201.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/\345\270\270\350\247\201\347\232\204 HTTP \347\212\266\346\200\201\347\240\201.md"
new file mode 100644
index 0000000..0976172
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/\345\270\270\350\247\201\347\232\204 HTTP \347\212\266\346\200\201\347\240\201.md"	
@@ -0,0 +1,56 @@
+# 常见的 HTTP 状态码
+
+- 1xx - 信息响应 - 传达传输协议级别的信息
+- 2xx - 成功的响应 - 表示客户端的请求已成功接受
+- 3xx - 重定向 - 表示客户端必须采取一些额外的操作才能完成其请求
+- 4xx - 客户端错误 - 此类错误状态码指向客户端
+- 5xx - 服务端错误 - 服务器对这些错误状态代码负责
+
+## 信息响应
+
+- 100：继续（Continue） — 到目前为止一切正常
+- 101：交换协议（Switching Protocols） — 客户端要求服务器交换协议，服务器已同意这样做。
+- 102：正在处理（Processing） — 正在处理请求，尚无响应
+
+## 成功的响应
+
+- 200：成功（OK） — 请求成功
+- 201：正创建（Created） — 请求已完成，已创建新资源
+- 204：无内容（No Content）— 含义与 200 相同，但响应头后没有 body 数据。
+- 206：部分内容（Partial Content）— 当从客户端发送 `Range` 范围标头以只请求资源的一部分时，将使用此响应码。
+
+## 重定向
+
+- 301：永久移动（Moved Permanently） — 资源永久移动到新的 URL
+- 302：临时移动（Moved Temporarily） — 资源临时移动到新的 URL
+- 304：未修改（Not Modified）— 当协商缓存命中时会返回这个状态码。
+- 307：临时重定向（Temporary Redirect） — 与 302 请求类似，用于 post 请求，它不允许更改 HTTP 方法
+- 308：永久重定向（Permanent Redirect） — 与 301 请求类似，用于 post 请求，它不允许更改 HTTP 方法
+
+## 客户端错误
+
+此类错误状态代码指向客户端
+
+- 400：请求错误（Bad Request） — 服务器无法理解和处理请求
+- 401：未经授权（Unauthorized） — 需要验证，用户尚未验证
+- 403：禁止（Forbidden） — 对资源的访问权限不足
+- 404：未找到（Not Found） — 找不到请求的资源
+- 405：方法不允许（Method Not Allowed） — 服务器知道请求方法，但目标资源不支持该方法。例如，API 可能不允许调用 `DELETE` 来删除资源。
+- 409：冲突（Conflict） — 当客户端试图执行一个**会导致一个或多个资源处于不一致状态**的操作时。
+- 410：已移除（Gone） — 由于有意移除，因此请求不再可用
+- 416：请求范围不满足（Requested Range Not Satisfiable） — 客户端已使用 `Range` 标头请求文件的一部分，但服务器无法提供该部分。当响应中存在 `Accept-Ranges` 字段且不为 `none` 时，表示该服务器支持请求范围请求（最近在研究文件上传和下载，遇到 416 记录一下）
+
+## 服务端错误
+
+- 500：内部服务器错误（Internal Server Error）— 通用未处理的服务器错误
+- 502：网关错误（Bad Gateway） — 网关服务器收到无效响应
+- 503：服务不可用（Service Unavailable）— 服务器暂时无法处理请求
+- 504：网关超时 （Gateway Timeout） — 网关服务器未及时获得响应
+
+## 更多资源
+
+- [完整的 HTTP 状态代码列表](https://httpstatuses.com/)
+- [HTTP Status Codes](https://www.restapitutorial.com/httpstatuscodes.html)
+- [Mozilla HTTP 响应状态码](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
+
+如果你想了解这方面更加全面、详细的内容，可查阅 [《RESTful WebServices》](https://book.douban.com/subject/3094230/) 书籍，也可以在网上查阅一些电子文档，或者摘翻。
diff --git "a/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/\345\270\270\350\247\201\347\232\204\347\275\221\347\273\234\347\253\257\345\217\243\345\217\212\345\257\271\345\272\224\346\234\215\345\212\241.md" "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/\345\270\270\350\247\201\347\232\204\347\275\221\347\273\234\347\253\257\345\217\243\345\217\212\345\257\271\345\272\224\346\234\215\345\212\241.md"
new file mode 100644
index 0000000..4cd86a0
--- /dev/null
+++ "b/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/\345\270\270\350\247\201\347\232\204\347\275\221\347\273\234\347\253\257\345\217\243\345\217\212\345\257\271\345\272\224\346\234\215\345\212\241.md"
@@ -0,0 +1,17 @@
+# 常见的网络端口及对应服务
+
+|              服务               | 端口                                             |
+| :-----------------------------: | ------------------------------------------------ |
+|       FTP（文件传输协议）       | 20 用于数据传输，21 用于已建立的连接             |
+|      SSH （安全外壳协议）       | 22                                               |
+|       Telnet（远程登录）        | 23                                               |
+|    SMTP（简单邮箱传输协议）     | 25                                               |
+|           DNS（域名）           | 53                                               |
+|              DHCP               | 67/UDP 用于 DHCP 服务器，68/UDP 用于 DHCP 客户端 |
+|     HTTP（超文本传输协议）      | 80                                               |
+|       POP3（邮箱协议 3 ）       | 110                                              |
+|              HTTPS              | 443                                              |
+| socks（防火墙安全会话转换协议） | 1080                                             |
+|     MySQL（数据库默认端口）     | 3306                                             |
+
+> 您可以查看 [Red Hat Enterprise Linux 4: Security Guide](https://web.mit.edu/rhel-doc/4/RH-DOCS/rhel-sg-en-4/ch-ports.html) 了解更加详细全面的通用端口。