官网
中文文档

简介：

特点： 所谓特点就是 Node.js 是如何解决服务其高性能瓶颈的问题的

PM2 是线上环境下 node 进程管理工具，可以利用它来简化很多 node 应用管理的繁琐任务，如性能监控、自动重启、负载均衡等。

主要特性

• 进程守护，应用崩溃自动重启

  开发中出现问题导致服务挂了，需要解决问题后重新 node index.js 手动重启服务，PM2 遇到错误能够自动重启，保证其他服务能够访问

• 启动多进程，自动做负载均衡，充分利用 CPU 和 内存

在创建前端工程的时候，一个比较好的做法是制定你的工程上线之后主要支持的浏览器版本，在你支持的浏览器版本里面，你的项目运行没问题，不在范围的浏览器可能会出现一些高级 JS，css 特性不支持的 bug。哪些新的 ES6+的特性保留原样，哪些特性要转译成 es5，webpack，babel 本身是通过这个工具提供的浏览器支持范围来确定的

我们可以在 .babelrc 文件、package.json文件、browserslistrc中指定浏览器版本选项，优先级规则是 .babelrc文件定义了则会忽略 browserslistrc、.babelrc 没有定义则会搜索 browserslistrc 和 package.json 两者应该只定义一个，否则会报错。

一文带你了解babel-preset-env

闭包是由该函数和其执行上下文共同构成，能够读取其他函数那边变量的函数。
可以用来做数据缓存、对象的私用方法等

• React Hook 实战
• Nginx

bilibili 上有比较多的nginx的视频
react hook上面也有

JWT 兴起：RESTFUL 架构 + 前后端分离 + 微服务架构 （共享session问题、 session 复制问题）

Authorization：bearer

JWT 定义

JSON Web Token (JWT)是一个开放标准(RFC 7519)，它定义了一种紧凑的、自包含的方式，用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任，因为它是数字签名的。

interface

常用于对 「对象形状」进行描述

// 接口首字母一般大写 或者加上 I 前缀
interface Person {
  name: string;
  age?: number;
}

// 变量形状必须与接口形状一致，不多不少
let tom: Person = {
  name: "tom",
  age: 1
};

类型别名（type）

类型别名为类型创建新名称。
类型别名有时与接口相似，但是可以命名基元，并集，元组和其他必须手工编写的其他类型。

type Name = string;
type StringOrNumber = string | number;
type ActionResponse = Promise<{ error?; data? }>;

type childItem = {
    id?: number;
    label: string;
    key?: string;
    info?: {
        price: string | number;
        specialPrices?: string | number;
    };
};

type menuItem = {
    label: string;
    key: string;
    children: Array<childItem>;
};

interface 和 type 的区别

• 语法区别
• interface 支持同名合并、type 不支持

参考文档

枚举

将可枚举的值定义为枚举类型 通常为一些常量
枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射

• 普通枚举

  enum Days { Sun, Mon, Tue, Wed, Thu, Fri, Sat } console.log(Days[5]); // Fri console.log(Days["Sat"]); // 6 // 编译后结果 var Days; (function (Days) { Days[Days["Sun"] = 0] = "Sun"; Days[Days["Mon"] = 1] = "Mon"; Days[Days["Tue"] = 2] = "Tue"; Days[Days["Wed"] = 3] = "Wed"; Days[Days["Thu"] = 4] = "Thu"; Days[Days["Fri"] = 5] = "Fri"; Days[Days["Sat"] = 6] = "Sat"; })(Days || (Days = {}));

  — 常量枚举

常量枚举在编译阶段会被删除，并且不能包含计算成员

const enum Directions {
  UP, Down, Left, Right
}

interface 和 class 的区别

类可以被实例化、可以实现接口

接口可以被实现、扩展，但是不能被实例化

• 时间模型与事件循环

!!

const address = !!corpInfo || corpInfo.address;

如果要显式地将返回值（或者表达式）转换为布尔值，请使用双重非运算符（即!!）或者Boolean构造函数。

!! 相当于进行了两次取反, 使其他类型转换成 bool 类型。
!! 两个叹号使 !!corpInfo 的值为 bool 类型，如果没有明确变量 corpInfo （非null/undifined/0/“”等值），!!corpInfo 即为 true, 明确了变量的值的话 !!corpInfo 为 true。

!null // true
!undefined // true
!0 // true
!'' // true

!!null // false
!!undefined // false
!!0 // false
!!'' // false

通过 script 标签实现
能够绕过同源限制的标签

<Link href="跨域的CSS地址"/> // 一般使用 CDN 地址
<script src="跨域的js地址" />
<img src="跨域的图片地址" />

跨域问题处理

基于安全的需求要求，浏览器同源策略（服务端没有同源策略，一般是做转发）
同源:协议，域名，端口，三者必须一致。

//前端页面定义好函数
<script>
  window.callback = function(x) {
    console.log(x);
  }
  let script = document.createElement('script');
  script.src = "http://localhost/getData.js";
	btn.addEventListener('click', function() {
  	document.body.appendChild(script);
  });
</script>

所有的跨域，都必须经过server端的允许和配合
服务端根据 url 设置好返回

response.write(`callback({name:"Bob"})`);

jsonp 为什么不是真正的 ajax

并没有用到 XMLHttpRequest, 是一个 JS 加载的变种方案，实现跨域信息交换

相关属性

linear-gradient()

背景渐变样式、属于一种特殊的 数据类型，一般适用于 image 可以使用的地方，并不适用于background-color, 而是 background-image

用法：

/* 指定渐变轴的角度 */
linear-gradient(30deg, red, blue);

/* 直接指定渐变的方向 以及颜色范围 */
background-image: linear-gradient(to bottom, blue 60%, green);

linear-gradient 的渐变彩虹效果（更精细的控制）:

background-image: linear-gradient(to bottom, red 14.28%, orange 28.5%, yellow 42.8%, green 57.1%, blue 71.4%, indigo 85.7%, purple);

background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 40%, #fff 50%, rgba(0, 0, 0, 0.6) 60%);

background-blend-mode

定义元素的背景图片、以及背景色如何混合

background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

background-size

设置背景图片的大小 可拉伸可按比例缩放

background-image

背景图片的展示

background-image: url(png1.png), url(png2.png), rgba(255, 255, 0, 0.5));

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。

background-blend-mode

定义该元素的背景、以及背景元素该如何混合, 混合模式应该按background-image CSS属性同样的顺序定义, 如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

/* 单值 */
background-blend-mode: normal; // 最终颜色永远是顶层颜色、类似两张不透明的纸重叠在一起
background-blend-mode: hard-light; // 效果类似于在背景层上用前景层打出一片刺眼的聚光灯 滑动解锁文字效果
background-blend-mode: soft-light; // 效果类似于在背景层上用前景层打出一片发散的聚光灯 滑动解锁文字效果

/* 双值，每个背景一个值 */
background-blend-mode: darken, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

[blend-mode取值类型参考文档]（https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode）

参考文档 && 链接

linear-gradient
background-blend-mode