JS概念扩展


在 Postgresql 中，FULL OUTER JOIN 是一种结合左外连接和右外连接结果的连接类型。它返回左表中的所有行和右表中的所有行，包括在 ON 子句中不匹配的行。FULL OUTER JOIN 在想要在最终结果集中包含两个表中不匹配的行时非常有用。

以下查询使用`INNER JOIN`表连接到自身的查询

```sql
SELECT select_list
FROM table_name t1
INNER JOIN table_name t2 ON join_predicate;
```

此外还可以使用`LEFT JOIN`或`RIGHT JOIN`将表连接到自身：

```sql
SELECT select_list
FROM table_name t1
LEFT JOIN table_name t2 ON join_predicate;
```

## 示例

### 查询分层数据

假设有以下组织结构

![x9yBXT](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/x9yBXT.jpg)

创建`employee`表并将一些数据插入表中

```sql
CREATE TABLE employee (
	employee_id INT PRIMARY KEY,
	first_name VARCHAR (255) NOT NULL,
	last_name VARCHAR (255) NOT NULL,
	manager_id INT,
	FOREIGN KEY (manager_id)
	REFERENCES employee (employee_id)
	ON DELETE CASCADE
);
INSERT INTO employee (
	employee_id,
	first_name,
	last_name,
	manager_id
)
VALUES
	(1, 'Windy', 'Hays', NULL),
	(2, 'Ava', 'Christensen', 1),
	(3, 'Hassan', 'Conner', 1),
	(4, 'Anna', 'Reeves', 2),
	(5, 'Sau', 'Norman', 2),
	(6, 'Kelsie', 'Hays', 3),
	(7, 'Tory', 'Goff', 3),
	(8, 'Salley', 'Lester', 3);
```

使用自连接查询谁向谁报告

```sql
SELECT
    e.first_name || ' ' || e.last_name employee,
    m .first_name || ' ' || m .last_name manager
FROM
    employee e
INNER JOIN employee m ON m .employee_id = e.manager_id
ORDER BY manager;
```

![1zBzNp](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/1zBzNp.jpg)

以上查询两次引用`employee`表，一次作为雇员，另一次作为经理，通过匹配`employee_id`和`manager_id`查找雇员/经理对

使用`LEFT JOIN`instead of`INNER JOIN`查询结果集中包含最高管理者

```sql
SELECT
    e.first_name || ' ' || e.last_name employee,
    m .first_name || ' ' || m .last_name manager
FROM
    employee e
LEFT JOIN employee m ON m .employee_id = e.manager_id
ORDER BY manager;
```

![7eG9pZ](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/7eG9pZ.jpg)

### 比较同表的行

![GRiyfG](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/GRiyfG.jpg)

查询所有长度相同的电影

```sql
SELECT
    f1.title,
    f2.title,
    f1.length
FROM
    film f1
INNER JOIN film f2
    ON f1.film_id <> f2.film_id AND
       f1.length = f2.length;
```

![AFkjme](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/AFkjme.jpg)


在 Postgresql 中，FULL OUTER JOIN 是一种结合左外连接和右外连接结果的连接类型

Postgresql - FULL OUTER JOIN


## 什么是容器

在容器化里，容器是最基本的概念。正如官方解释：

> A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.
> 容器是一个标准的软件单元，它将代码和所有依赖打包起来，使得应用程序可以快速可靠地从一个计算环境迁移到另一个计算环境。

![5zgpMt](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/5zgpMt.jpg)

每个虚拟机都有自己的客户操作系统，其重量与主机操作系统一样。

在虚拟机中运行的应用程序与客户操作系统进行通信，客户操作系统与虚拟机管理程序进行通信，虚拟机管理程序再与主机操作系统进行通信，从而将必要的资源从物理基础设施分配给正在运行的应用程序。

正如你所看到的，在虚拟机中运行的应用程序与物理基础设施之间存在一条长长的通。在虚拟机中运行的应用程序可能只占用很少的资源，但是来宾操作系统增加了明显的开销。与虚拟机不同，容器以更智能的方式完成虚拟化的工作。它没有在容器中拥有完整的客户操作系统，而是通过容器运行时利用主机操作系统，同时保持隔离——就像传统的虚拟机一样。

![fVYWrK](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/fVYWrK.jpg)

容器运行时是一个软件层，它位于主机操作系统和容器之间。容器运行时的主要任务是将容器中的应用程序与主机操作系统隔离开来。容器运行时还负责管理容器的生命周期，包括创建、启动、停止、删除和暂停容器。

```shell
uname -a
# Linux alpha-centauri 5.8.0-22-generic #23-Ubuntu SMP Fri Oct 9 00:34:40 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

docker run alpine uname -a
# Linux f08dbbe9199b 5.8.0-22-generic #23-Ubuntu SMP Fri Oct 9 00:34:40 UTC 2020 x86_64 Linux
```

在上面的代码块中，我已经在主机操作系统上执行了 uname-a 命令，以打印出内核的详细信息。

然后在下一行中，我在运行 Alpine Linux 的容器中执行了相同的命令。

正如您在输出中看到的，容器确实使用了来自我的主机操作系统的内核。这证明了容器虚拟化主机操作系统而不是拥有自己的操作系统的观点。

如果你在一台 Windows 机器上，你会发现所有的容器都使用 WSL2内核。之所以会发生这种情况，是因为 WSL2充当 Windows 上 Docker 的后端。在 macOS 上，默认的后端是运行在 HyperKit hypervisor 上的 VM。

## 容器操作

当你部署你的应用程序，然后你想修复一个 bug，或者只是发布一个更新，会发生什么？

运行容器后，可以使用 docker ps 获取其 ID，然后使用 docker commit 从中为图像创建新标记：

```bash
docker commit <id> <username>/<imagename>:<tagname>
```

您还可以添加一条 changelog 消息，列出新版本中更改的内容：

```bash
docker commit --change "description" <id> <username>/<imagename>:<tagname>
```

```bash
# 列出本机正在运行的容器
$ docker container ls
```

```bash
# 列出本机所有容器，包括终止运行的容器
$ docker container ls --all
```

上面命令的输出结果之中，包括容器的 ID。很多地方都需要提供这个 ID，比如上一节终止容器运行的 docker container kill 命令。

终止运行的容器文件，依然会占据硬盘空间，可以使用 docker container rm 命令删除。

```bash
$ docker container rm [containerID]
```

运行上面的命令之后，再使用 docker container ls --all 命令，就会发现被删除的容器文件已经消失了。


什么是容器


import CanIUse from 'components/CanIUse.tsx'

## Battery Api

> 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件，Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个 battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。

<CanIUse tag="will-change" />

## 方法

- chargingchange
- levelchange
- chargingtimechange
- dischargingtimechange

```js
navigator.getBattery().then(function (battery) {
  console.log('Battery charging? ' + (battery.charging ? 'Yes' : 'No'))
  console.log('Battery level: ' + battery.level * 100 + '%')
  console.log('Battery charging time: ' + battery.chargingTime + ' seconds')
  console.log(
    'Battery discharging time: ' + battery.dischargingTime + ' seconds'
  )

  battery.addEventListener('chargingchange', function () {
    console.log('Battery charging? ' + (battery.charging ? 'Yes' : 'No'))
  })

  battery.addEventListener('levelchange', function () {
    console.log('Battery level: ' + battery.level * 100 + '%')
  })

  battery.addEventListener('chargingtimechange', function () {
    console.log('Battery charging time: ' + battery.chargingTime + ' seconds')
  })

  battery.addEventListener('dischargingtimechange', function () {
    console.log(
      'Battery discharging time: ' + battery.dischargingTime + ' seconds'
    )
  })
})
```

![r63S43](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/r63S43.png)

[chrome-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/CDWccX.jpg
[firefox-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mqRvLw.jpg
[ie-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/uKn6gH.jpg
[opera-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mpzJp6.jpg
[safari-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/mIxpPG.jpg
[edge-image]: https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/aoF7l0.jpg


Battery Api提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件

Battery Api


## 文档(Documentation)

MDN (Mozilla) JavaScript 参考是带有示例和其他信息的主要文档。

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript.)

## 兼容性(Compatibility tables)

由于 `JavaScript` 是一门持续开发中的语言，所以会定期添加新的特性，其中一些特性可能不会被所有的浏览器或引擎所支持。下面的网站可以帮助你识别哪些功能是由哪些浏览器/引擎或浏览器版本等所支持的。

- [Can i Use](https://caniuse.com/#search=javascript)
- [Compat Table](https://kangax.github.io/compat-table)

## 编辑器(IDE's)

一些比较热门的编辑器

- [Sublime Text](https://www.sublimetext.com/)
- [Atom](https://atom.io/)
- [WebStorm](https://www.jetbrains.com/webstorm/)
- [Visual Studio Code](https://code.visualstudio.com/)

## 教程(Tutorials / Courses)

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
- [The Modern Javascript Tutorial](https://javascript.info/)
- [Getting Started with JavaScript for Web Development Courses](https://scotch.io/courses/getting-started-with-javascript-for-web-development)
- [ES6-features.org](http://es6-features.org/)
- [JavaScript Tutorial](https://www.javascripttutorial.net/)
- [ES6 Tutorial](https://www.javascripttutorial.net/es6/)
- [Intro to ES6](https://scrimba.com/learn/introtoes6)
- [Tutorials Point - ES6 for beginners](https://www.tutorialspoint.com/es6/index.htm)
- [JavaScript Free Resources](https://www.java5cript.com/)

## 视频(Videos/ Courses)

- [Learn JavaScript - Full Course for Beginners - Video By freecodecamp.org](https://www.youtube.com/watch?v=PkZNo7MFNFg&list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V&ab_channel=freeCodeCamp.orgfreeCodeCamp.orgVerified)
- [ES6 - JavaScript Improved](https://www.udacity.com/course/es6-javascript-improved--ud356)
- [Javascript Essentials](https://www.udemy.com/course/javascript-essentials/)
- [Learning ECMAScript The Next Generation of Javascript](https://www.udemy.com/course/ecmascript2015/)

## 书籍(Books)

- [Eloquent JavaScript](https://eloquentjavascript.net/)
- [Understanding ECMAScript 6](http://superherojs.com/)
- [JavaScript the Good Parts](https://andersonguelphjs.github.io/OReilly_JavaScript_The_Good_Parts_May_2008.pdf)
- [Speaking JavaScript](http://speakingjs.com/es5/index.html)

## 练习(Learn JavaScript by building small projects)

- [30 Day Vanilla JS Coding Challenge](https://javascript30.com/)
- [Learn Javascript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/)
- [24days of christmas](https://scrimba.com/learn/adventcalendar/welcome-to-24-days-of-javascriptmas-cg2QbehG)
- [Learn JavaScript](https://scrimba.com/learn/learnjavascript)
- [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
- [Freecodecamp.org](https://www.freecodecamp.org/)
- [Build a Quiz App with HTML, CSS, and JavaScript](https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/)
- [Smarter Way to learn JavaScript](http://www.asmarterwaytolearn.com/js/index-of-exercises.html)
- [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript)
- [Learn JavaScript Online](https://learnjavascript.online/)
- [learn-js.org interactive JavaScript tutorial.](https://www.learn-js.org/en/)

## GitHub

- [Javascript Algorithm and Data Structures](https://github.com/trekhleb/javascript-algorithms)
- [33 JS Concepts](https://github.com/leonardomso/33-js-concepts)
- [20+ Web Projects With Vanilla JavaScript](https://github.com/bradtraversy/vanillawebprojects)
- [50 Projects in 50 Days - HTML/CSS and JavaScript](https://github.com/bradtraversy/50projects50days)
- [JavaScript Style Guide](https://blog.kritikapattalam.com/[https://github.com/airbnb/javascript)
- [30 seconds of code](https://github.com/30-seconds/30-seconds-of-code)
- [30 Day Vanilla JS Coding Challenge](https://github.com/wesbos/JavaScript30)
- [Clean Code Javascript](https://github.com/ryanmcdermott/clean-code-javascript)
- [Javascript Questions](https://github.com/lydiahallie/javascript-questions)
- [The Algorithms - JavaScript](https://github.com/TheAlgorithms/Javascript)

## 编程挑战(Programming Challenges)

- [Hackerrank](https://www.hackerrank.com/)
- [Coding Game](https://www.codingame.com/)
- [Leet Code](https://www.hackerrank.com/)
- [Coder Byte](https://coderbyte.com/)
- [Exercism](https://exercism.io/my/tracks/javascript)
- [Elevator Saga](http://play.elevatorsaga.com/)
- [Code Wars](https://www.codewars.com/)

## 在线编辑器(Coding Ground)

- [Codepen](https://codepen.io/)
- [Js fiddle](https://jsfiddle.net/)
- [Tutorials Point Coding Ground.](https://www.tutorialspoint.com/codingground.htm)
- [CodeSandBox](https://codesandbox.io/)

## 博客(Blogs)

- [Dmitri Pavlutin](https://dmitripavlutin.com/)
- [David Walsh](https://davidwalsh.name/)
- [SuperHero.JS](https://superherojs.com/)
- [Medium](https://medium.com/)
- [dev.to](https://dev.to/)
- [Hashnode](https://hashnode.com/)


JavaScript - Ultimate Free Resources


在 Swift 中，访问控制是一种功能，它允许开发人员限制代码的某些部分从代码的其他部分或外部代码访问。这对于保持代码的完整性和安全性以及确保它以预期方式使用非常重要。

在 Swift 中，有五个访问控制级别：

- Public：这是最高级别的访问控制。标记为 public 的代码可以从程序的任何地方访问，包括其他模块和框架。
- Open：此级别类似于 public，但具有子类外部可覆盖方法和属性的功能。
- Internal：标记为 internal 的代码可以从同一模块内的任何位置访问，但无法从模块外访问。
- File-private：此级别仅限于当前源文件。标记为 file-private 的代码仅可从同一文件中访问。
- Private：这是最严格的访问控制级别。标记为 private 的代码只能从同一声明块中访问，例如类或结构体。

使用关键字（例如“public”，“private”，“fileprivate”，“internal”和“open”）指定访问控制。如果未指定访问级别，则默认为“internal”。访问控制可以应用于代码的各个部分，包括类、方法、属性和变量。

访问控制的目的是通过限制代码的访问和修改方式来帮助防止错误和安全漏洞。例如，通过将某些变量标记为 private，开发人员可以确保只能从同一类中修改它们，减少来自代码其他部分的意外修改的风险。同样，通过将某些方法标记为 public，开发人员可以确保它们可以从程序的任何地方调用，使它们更易于其他开发人员使用。


在 Swift 中，访问控制是一种功能，它允许开发人员限制代码的某些部分从代码的其他部分或外部代码访问。

Swift - 访问控制


![tc1TS8](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/tc1TS8.jpg)

## 异步处理历史

- 异步 callbacks：callbacks 即是将函数作为参数传递，当同步代码运行结束，就调用函数参数继续运行。
- Promise：
- Generator：
- async/await：

优缺点对比：

| 发展史        | 优点                                       | 缺点                                                                                                  |
| ------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
| Callback      | 解决了同步问题                             | 回调地狱、可读性差、无法 try / catch 、无法 return                                                    |
| Promise       | 一定程度上解决了回调地狱的可读性           | 无法取消、任务多时，同样存在语义不清晰                                                                |
| Generator     | 可以控制函数的执行，可以配合 co 函数库使用 | 流程管理却不方便（即何时执行第一阶段、何时执行第二阶段                                                |
| async / await | 语义更清晰、简洁，内置执行器               | 认知不清晰可能会造成大量 await 阻塞（程序并不会等在原地，而是继续事件循环，等到响应后继续往下走）情况 |

## Promise

```js
let promise = new Promise(function (resolve, reject) {
  // code
})
promise
  .then(() => {
    // then
  })
  .catch((error) => {
    // console.log(error)
  })
  .finally((_) => {
    // finally
  })
```

`code`处是用于执行的代码，当`new Promise`创建时，自动执行。

`then`是定义在`Promise.prototype`上的用来处理状态改变时的回调函数。

参数`resolve`和`reject`是 JavaScript 自身提供的回调函数。当`code`呗执行后应该调用`resolve`或`reject`

- `resolve` 任务成功返回 value
- `reject` 任务失败返回`error`

当`promise`被`reject`的时候或者运行代码抛出错误异常如：`throw new Error('Whoops!')`，`catch`负责处理错误

`finaylly`是`promise`结束时，无论结果是`fulfilled`还是`rejected`都会执行的回调函数

内部属性：

- `state` 初始值`pending`，`resolve`的时候为`fullfilled`，`reject`的时候为`rejected`
- `result` 初始值`undefined`，`resolve`的时候为`value`，`reject`的时候为`error`对象

![ZBHm59](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/ZBHm59.png)

### Promise.all

执行多个 promise，并等待所有 promise 准备就绪，任意一个 promise 被 reject，都会立即出发 Promise.all 的 reject 并且返回该 promise 的 error

```js
let promise = Promise.all([
  /*promises*/
])

// 例子
let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://api.github.com/users/jeresig'
]

// 将每个 url 映射（map）到 fetch 的 promise 中
let requests = urls.map((url) => fetch(url))

// Promise.all 等待所有任务都 resolved
Promise.all(requests).then((responses) =>
  responses.forEach((response) => alert(`${response.url}: ${response.status}`))
)
```

### Promise.allSettled

与 Promise.all 不同的是，Promise.allSettled 会等待所有 promise 完成，无论成功失败。

- `{status:"fulfilled", value:result}` 对于成功的响应
- `{status:"rejected", reason:error}` 对于 error。

### Promise.race

只要有一个准备就绪就返回其结果或者错误

```js
Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) =>
    setTimeout(() => reject(new Error('Whoops!')), 2000)
  ),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert) // 1
```

### Promise.any

与 Promise.race 类似，Promise.any 等待的是第一个`fulfilled`，如果都`rejected`，则返回一个 error 数组

## async/await

Async/await 是以更舒适的方式使用 promise 的一种特殊语法，同时它也非常易于理解和使用。

async 会将其后面的函数的返回值封装成一个`Promise`对象，而 await 会等待这个`Promise`完成，并将其结果返回。

```js
async function hello() {
  return (greeting = await Promise.resolve('Hello'))
}

hello().then(alert)
```

错误处理

1. 使用`try...catch`捕获 async/await 运行程序中抛出的错误
2. **[await-to-js](https://www.npmjs.com/package/await-to-js)**，使用类 go 语言的方式处理（属于 1 的封装）
