总结了一下 API 与 SDK 之间的区别和联系
APIAPI（英语：Application Programming Interface，应用程序接口）是对程序而言的，提供编程时的接口，即一系列模块化的类和函数，而无需访问源码，或理解内部工作机制的细节。
优点：开发成本低，对接比较简单，可以快速验证商业模式和用户体验。
缺点：会经过对接平台，厂商可以获取对接平台相关数据信息，不具保密性。
API 标准化存在一些如何定义 API 的行业标准，比如 SOAP、REST、GraphQL 等。
SDKSDK（英语：Software Development Kit, 软件开发工具包）是由第三方服务商提供的实现软件产品某项功能的工具包，包括功能（通过 API 访问）、相关库、文档、示例等。
优点：对接后的功能比较稳定，响应速度快，而且对接平台相关数据不会被获取。
缺点：需要开发的环节较多，开发工作量大，对接周期略长。
SDK 组成
接口文件和库文件接口文件和库文件即 API ，将底层的代码进行封装保护，提供给用户一个调用底层代码的接口。
帮助文档帮助文档用来解释接口文件和库文件的功能，以及介绍有关的开发工具、操作教程、常见问题等。
开发 ...
CSS 彩色字体的实现
介绍字体一般可以通过使用字体文件来实现彩色效果，但是通过 CSS 方式也是可以实现的，下面是两种实现方法。推荐第二种方法，效果更好，样式也不容易被一些页面插件影响。
mask-image给元素添加一个 ::after 伪元素，内容和元素一样，同时在这个伪元素上面设置一个遮罩层，而遮罩层的图像使用渐变色，然后使用绝对定位覆盖元素内容，这样可以达到改变字体颜色的效果。
12345678910111213141516<h1 class="text-gradient" data-text="渐变色字体">渐变色字体</h1><style>.text-gradient { position: relative;}.text-gradient[data-text]::after { content: attr(data-text); color: cyan; position: absolute; top: 0; left: 0; mask-image: linear-gradi ...
CSS 块级格式上下文（BFC）和 flow-root 布局
块级格式上下文（BFC）块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块级格式化上下文：
根元素（<html>，也称为初始块格式上下文）。
浮动元素（float 值不为 none）。
绝对定位元素（position 值为 absolute 或 fixed）。
行内块元素（display 值为 inline-block）。
表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
表格标题（display 值为 table-caption，HTML 表格标题默认值）。
匿名表格单元格元素（display 值为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML 元素 table、tr、tbody、thead、tfoot 的默认值）或 inline-table）。
overflow 值不为 ...
Canvas Confetti 五彩纸屑特效 JS 插件
介绍canvas-confetti 是一个使用 canvas 的五彩纸屑特效 JS 插件。先看下效果：
使用方式
NPM 安装：
1npm install --save canvas-confetti
12import confetti from 'canvas-confetti'confetti()
从 CDN 导入 HTML 页面中（也可以将 JS 文件下载到本地，体积只有 10 KB 左右大小）：
1<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js" defer></script>
然后在页面中任意地方调用 confetti() 方法即可显示特效。
控制发射原点
origin.x：Number（默认值：0.5）：发射的水平方向原点，0 表示左边缘，1 表示右边缘。
origin.y：Number (默认值: 0.5) :发射的垂直方向原点，0 表示上边缘，1 表示下边缘。1 ...
Reflect API 和 Object 静态方法的对比
介绍Reflect 内置对象提供了与 JavaScript 对象交互的方法，这些方法与 Proxy handler（捕获器）的方法相对应。
Reflect 不是一个函数对象，因此不能当构造函数。
Proxy 一般需要和 Reflect 联合使用，Proxy 对象拦截操作，Reflect 完成默认行为，然后就可以在 Proxy 对象中部署额外的功能。
Reflect 操作函数化
Reflect.has 判断一个对象是否存在某个属性，和 in 运算符的功能完全相同。如果 target 不是 Object，会抛出 TypeError。123Reflect.has(target, prop)// 相当于prop in target
Reflect.deleteProperty 删除一个对象的某个属性，和 delete 运算符的功能完全相同。如果 target 不是 Object，会抛出 TypeError。123Reflect.deleteProperty(target, prop)// 相当于delete target[prop]
Reflect.apply 更易读和理解
在 Refl ...
ES6 Proxy 中的 this 指向
介绍Proxy 和 Reflect 内置对象从 ECMAScript 2015 开始支持，允许拦截并定义自定义行为。
语法1const p = new Proxy(target, { ...traps })
traps
被代理对象上的自定义行为。包含捕获器（操作发生时所对应的处理函数）的方法列表。
target
被代理的目标对象。
12345678910111213141516171819202122232425const handler = { get(target, name, receiver) { // 如果对象中包含该属性，返回该属性，否则返回 not exists return name in target ? Reflect.get(...arguments) : 'not exists'; }, set(target, name, value, receiver) { // 如果属性为 age，判断值的类型是否为 number 和大于 0 if (n ...
Vue2 和 Vue3 的数据绑定原理和实现
介绍数据绑定是一种把用户界面元素（控件）的属性绑定到特定对象上面并使其同步的机制，使开发人员免于编写同步视图模型和视图的逻辑。
观察者模式又称为发布-订阅模式，定义对象间的一种一对多的依赖关系，当它本身的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。比如用户界面可以作为一个观察者，业务数据是被观察者，用户界面观察业务数据的变化，发现数据变化后，就同步显示在界面上。这样可以确保界面和数据之间划清界限，假定应用程序的需求发生变化，需要修改界面的表现，只需要重新构建一个用户界面，业务数据不需要发生变化。有以下几个角色：
抽象主题（Subject）：提供一个接口，把所有观察者对象的引用保存到一个集合里，可以增加和删除观察者对象。
具体主题（Concrete Subject）：将有关状态信息存入观察者对象，在本身的内部状态改变时，给所有登记过的观察者发出通知。
抽象观察者（Observer）：为所有的具体观察者定义一个接口，在得到主题通知时更新自己。
具体观察者（Concrete Observer）：实现更新接口。
Vue2 和 Vue3 的数据绑定都是观察者模式的实现，前者 ...
使用 grid-area 实现元素层叠效果和对比其他方法
介绍实现如下图所示的排版效果，一段关于图片的信息浮在图片上。
HTML 结构如下：
1234<figure> <img src="../img/1.jpg" width="100%"> <figcaption>自然风景</figcaption></figure>
translateY这种方式最简单，但是元素原本的位置会保留，即 figcaption 原来的宽高还会留在原位置。
123figcaption { transform: translateY(-3em);}
相对定位跟上一种方法一样，figcaption 原来的宽高还会留在原位置。
1234figcaption { position: relative; top: -3em;}
margin 负值定位这种方法元素原本的位置不会保留，也使用了相对定位，使 figcaption 的背景能覆盖图片之上。
1234figcaption { position: r ...
CSS contain 属性和新特性容器查询
介绍媒体查询可以根据视口的大小来更改文档布局，然而很多组件并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。
容器查询可以在不改变浏览器视口宽度的前提下，根据容器中的空间大小进行布局调整。
容器查询规范将成为 CSS Containment 的一部分，它为 Web 开发人员提供了一种隔离 DOM 部分并向浏览器声明它们独立于文档其余部分的方法以允许性能优化。
容器查询属性container-type将元素定义为查询容器。后代可以查询其大小、布局、样式和状态等方面。可以具有以下值：
size
为块和内联轴上的维度查询建立查询容器。将布局、样式和大小包含应用于元素。
inline-size
为容器的内联轴上的维度查询建立查询容器。将布局、样式和内联大小包含应用于元素。
block-size
在容器的块轴上建立维度查询的查询容器。将布局、样式和块大小包含应用于元素。
style
为样式查询建立查询容器。
state
为状态查询建立查询容器。
container-name指定 @container 规则的查询容器名称列表，用于过滤目标查询容器。同 grid-a ...
HTML 字符实体和 Emoji 的使用
HTML 实体HTML 实体是一段以连字号（& 或 &#）开头、以分号（;）结尾的文本（字符串）。例如 A、B、C 的实体编号分别为 A、B 和 C。
HTML 中的预留字符必须被替换为字符实体。例如，如需显示小于号和大于号，我们需要写实体名称：< 和 >，或实体编号：< 和 >。
HTML 对多个空格会折叠成一个空格，如果需要显示多个空格，需要写多个 实体名称（多个空格的实体编号   也会折叠成一个空格）。
使用实体名称而不是编号的好处是，名称易于记忆。不过坏处是，浏览器也许不支持所有实体名称（对实体编号的支持却很好）。
对于没有 HTML 实体名称的字符，可以使用十进制（dec）或十六进制（hex）引用。例如 ♥ 具有实体名称 ♥、十进制实体编号 ♥ 和十六进制实体编号 ♥，而 ♡ 没有实体名称，可以使用十进制实体编号 ♡ 和十六进制实体编 ...