Operators and conditions - 操作符、条件判断


## TLS & SSL

TSL 是一种安全传输协议，它是一种基于 SSL 的加密协议。

TSL 使用公钥加密数据，使用私钥解密数据。

公开密钥加密（public-key cryptography）也称为非对称密钥加密（asymmetric cryptography），是一种密码学算法类型。该加密算法使用两个不同的密钥：加密密钥和解密密钥。

私钥创建：

```bash
openssl genrsa -out private.pem 2048
```

证书创建：

```bash
openssl req -new -key private.pem -out csr.pem
```

使用 CSR 证书创建证书：

```bash
openssl x509 -req -in csr.pem -signkey private.pem -out certificate.pem
```

TLS 客户端实例：

```js
const tls = require('tls')
function connected(stream) {
  if (stream) {
    stream.write('GET / HTTP/1.0\n\rHost: encrypted.google.com:443\n\r\n\r')
  } else {
    console.log('Connection failed')
  }
}
var dummy = this
dummy.socket = tls.connect(443, 'encrypted.google.com', function () {
  dummy.connected = true
  if (dummy.socket.authorized) {
    dummy.socket.setEncoding('utf-8')
    connected(dummy.socket)
  } else {
    console.log(dummy.socket.authorizationError)
    connected(null)
  }
})
dummy.socket.addListener('data', function (data) {
  console.log(data)
})
dummy.socket.addListener('error', function (error) {
  if (!dummy.connected) {
    connected(null)
  }
  console.log('FAIL')
  console.log(error)
})
dummy.socket.addListener('close', function () {
  // do something
})
```

## Debugger

`Node.js`提供一个简单的基于 TCP 的调试器，可以在控制台中调试脚本。

语法：`node --inspect [script] [arguments]`或`node debug [script] [arguments]`

```bash
node demo.js
```

除此之外还可以使用`console.log`输出调试信息，这些信息将被输出到控制台。


TLS负责安全传输，SSL负责安全签名，Debugger负责调试。

Node.js - TLS & SSL & Debugger


css 盒模型（Box Model）是指在网页中，每个 HTML 元素都可以看作是一个矩形的盒子，这个盒子有四个边界，分别是：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。这四个边界分别对应了 HTML 元素的不同属性，通过这些属性的设置，我们可以控制盒子的大小、边框、内外边距等特征，从而实现布局和样式的控制。

下面对盒模型的四个部分进行详细解释：

1. 内容区（content）
   内容区是指 HTML 元素的实际内容，即文本、图像、视频、音频等。我们可以通过设置 width 和 height 属性来控制内容区的尺寸。

2. 内边距（padding）
   内边距是指内容区和边框之间的距离，也就是内容区的内部空白区域。我们可以通过设置 padding 属性来控制内边距的大小。padding 属性可以设置为一个值，表示四个方向的内边距大小都相等，也可以分别设置为四个值，表示各个方向的内边距大小不同。

3. 边框（border）
   边框是包围内容区和内边距的线条，我们可以通过设置 border 属性来控制边框的样式、粗细和颜色等。border 属性可以分别设置为三个值或四个值，分别表示边框的样式、粗细和颜色，以及边框的位置（上、右、下、左）。

4. 外边距（margin）
   外边距是指边框和相邻元素之间的距离，也就是元素的外部空白区域。我们可以通过设置 margin 属性来控制外边距的大小。margin 属性可以设置为一个值，表示四个方向的外边距大小都相等，也可以分别设置为四个值，表示各个方向的外边距大小不同。

盒模型分为标准盒模型和 IE 盒模型。

## 标准盒模型

标准盒模型是有`width`、`height`、`margin`、`padding`、`border`计算的。

标准盒模型的内容高度为 content+padding+border。

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

## IE 盒模型

与标准盒模型不同的是，IE 盒模型的内容高度为 content+padding。不包含 border。

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

## box-sizing

`box-sizing`是一个属性，它指定了内容高度的计算方式。

- content-box: 内容高度为 content+padding+border。
- border-box: 内容高度为 content+padding。

总之，css 盒模型提供了一种灵活的方式来控制 HTML 元素的大小、位置和样式。通过设置内容区、内边距、边框和外边距的属性，我们可以实现各种布局效果，从而达到设计的要求。


css 显示的所有对象都是盒模型。因此，了解 css 方框模型的工作原理是 css 的核心基础。

css - 盒模型


Js 中的 `assert` 模块用于测试 `Node.js` 应用程序中的功能表达式。如果测试结果返回 `false`,`assert` 将抛出一个错误并停止程序。

可以将 `assert` 模块与 `unit Js`、 `Mocha` 和 `Chai` 等单元测试工具一起使用。

开发人员使用 `assert` 来测试应用程序中的不变量。

## assert

`assert`接收两个参数：

- `condition`: 测试的条件。
- `message`: 如果条件不成立，则抛出的错误消息。

```js
var assert = require('assert')
var a = 5
var b = 3

assert(a < b)
// 抛出错误: AssertionError: a < b
```

## assert.deepStrictEqual

`assert.deepStrictEqual` 方法用于检查两个值是否相等。

deepEqual 方法用来比较两个对象。只要它们的属性一一对应，且值都相等，就认为两个对象相等，否则抛出一个错误。

```js
const assert = require('assert')
assert.deepStrictEqual({a: 1}, {a: '1'})
// 抛出错误: AssertionError: { a: 1 } deepStrictEqual { a: '1' }
```

## assert.fail

`assert.fail`接收两个参数：

- `message`: 如果条件不成立，则抛出的错误消息。
- `actual`: 实际值。

该方法共有四个参数，但是不管参数是什么值，它总是抛出一个错误。如果 message 参数对应的布尔值不为 false，抛出的错误信息就是 message，否则错误信息就是“实际值 + 分隔符 + 预期值”。

```js
const assert = require('assert').strict

/** AssertionError [ERR_ASSERTION]: Failed. This just prints failed as error message. This is not a good practice**/
assert.fail()

// AssertionError [ERR_ASSERTION]: This is why I failed
assert.fail('This is why I failed')

// TypeError: This is why I failed
assert.fail(new TypeError('This is why I failed'))
```

## assert.deepEqual

`assert.deepEqual`接收两个参数：

- `actual`: 实际值。
- `expected`: 期望值。

deepEqual 方法用来比较两个对象。只要它们的属性一一对应，且值都相等，就认为两个对象相等，否则抛出一个错误。

```js
const assert = require('assert')

const val1 = {
  x: {
    y: 1
  }
}
const val2 = {
  x: {
    y: 2
  }
}
const val3 = {
  x: {
    y: 1
  }
}

assert.deepEqual(val1, val3)
// Returns OK since val1 is equal to val3

// Values of b are different (Child properties)
assert.deepEqual(val1, val2)
// AssertionError: { a: { b: 1 } } deepEqual { a: { b: 2 } }
```

## assert.equal

`equal`接收两个参数：

- `actual`: 实际值。
- `expected`: 期望值。

```js
const assert = require('assert')

assert.equal(1, 1)
// This throws no exception since 1 == 1

assert.equal(1, '1')
/** This throws no exception since with abstract equality comparison 1 == '1' **/

assert.equal(NaN, NaN)
// This throws no exception

assert.equal(1, 2)
// This throws an error, AssertionError: 1 == 2

assert.equal({a: {x: 1}}, {a: {x: 1}})
/**This throws an error AssertionError: { a: { x: 1 } } == { a: { x: 1 } } because it dosen't check child value**/
```

## assert.notEqual

`notEqual`和`notStrictEqual`效果相同

```js
const assert = require('assert')

assert.notEqual(1, 1)
// This throws an exception since 1 == 1

assert.notEqual(1, '1')
/** This throws an exception since with abstract equality comparison 1 == '1' **/

assert.notEqual(1, 2)
// This throws no error, since 1 !== 2
```

## assert.notDeepEqual

`notDeepEqual` 方法与 `deepEqual` 方法正好相反，用来断言两个对象是否不相等。

```js
const assert = require('assert')

const val1 = {
  x: {
    y: 1
  }
}
const val2 = {
  x: {
    y: 2
  }
}
const val3 = {
  x: {
    y: 1
  }
}

assert.notDeepEqual(val1, val3)
// Returns an error, since val1 is equal to val3

// Values of b are different (Child properties)
assert.deepEqual(val1, val2)
// Returns no error since the child properties are not equal
```

[Assert 参考](https://javascript.ruanyifeng.com/nodejs/assert.html#toc5)
[Using Assert Module](https://blog.logrocket.com/using-assert-modules-to-verify-invariants-in-nodejs/)


使用 Assert 模块验证 Node.js 中的不变量

Node.js - Assertion


协议（Protocol）是 Swift 中一种重要的类型，它描述了一种方法或者属性的集合。协议可以被任意类型实现，包括类、结构体、枚举和其他协议，从而让这些类型可以拥有相同的行为和接口。

协议定义了一些方法和属性，但不提供任何实现。实现协议的类型，必须遵循协议的要求并提供这些方法和属性的实际实现。

协议的语法如下：

```swift

protocol SomeProtocol {
// 协议定义
}
```

接下来，我们将了解协议的常见用法和特性。

## 协议的属性要求

协议可以要求实现者提供特定名字和类型的实例属性或类型属性。协议不指定属性是存储属性还是计算属性，只指定属性的名称和类型。此外，协议还要求属性是可读写的或只读的。

实现协议的类型，必须遵循协议的要求并提供这些属性的实际实现。如果协议要求实现的属性是可读写的，那么实现者必须提供一个可读写的属性实现；如果协议要求实现的属性是只读的，那么实现者可以提供一个可读的属性实现或一个只读的计算属性实现。

下面是一个协议属性要求的例子：

```swift

protocol Person {
var name: String { get set }
var age: Int { get }
}
```

这个协议定义了两个属性要求，name 和 age。name 是一个可读写的字符串类型的实例属性，age 是一个只读的整数类型的实例属性。

接下来，我们定义一个结构体 Student 来实现 Person 协议：

```swift

struct Student: Person {
var name: String
var age: Int
}
```

Student 结构体实现了 Person 协议，并提供了 name 和 age 属性的实现。由于 Person 协议要求 name 是可读写的，因此 Student 结构体提供了一个可读写的 name 属性实现。而 Person 协议要求 age 是只读的，因此 Student 结构体提供了一个只读的 age 属性实现。

## 协议的方法要求

协议可以要求实现者提供特定名字和类型的实例方法和类型方法。实现协议的类型，必须遵循协议的要求并提供这些方法的实际实现。

和属性要求一样，协议中的方法要求只定义方法名、参数以及返回类型，但不提供具体的实现。实现者必须自行实现这些方法。

下面是一个协议方法要求的例子：

当一个类型符合一个协议时，我们称这个类型为遵循该协议。协议定义了一组要求，遵循该协议的类型必须满足这些要求。

在 Swift 中，协议可以用来实现多态。这意味着，我们可以使用一个遵循该协议的实例来代替任何符合该协议的类型的实例，从而使代码更加通用。

下面是一些常见的协议和它们的使用方法：

## CustomStringConvertible

该协议可以让我们自定义类型的字符串描述。当我们打印一个遵循 CustomStringConvertible 协议的类型时，它将返回一个字符串描述。这在调试和日志记录时非常有用。

下面是一个实现 CustomStringConvertible 协议的例子：

```swift

struct Person: CustomStringConvertible {
let name: String
let age: Int

    var description: String {
        return "\(name), \(age) years old"
    }
}

let person = Person(name: "Alice", age: 28)
print(person) // Output: Alice, 28 years old
```

## Equatable

该协议可以让我们比较两个实例是否相等。当我们需要比较两个对象时，遵循 Equatable 协议的类型会自动获得 == 运算符的实现。

下面是一个实现 Equatable 协议的例子：

```swift

struct Point: Equatable {
let x: Int
let y: Int
}

let point1 = Point(x: 1, y: 2)
let point2 = Point(x: 1, y: 2)

if point1 == point2 {
print("The two points are equal.")
} else {
print("The two points are not equal.")
}
```

## Hashable

该协议可以让我们将一个类型实例转换为一个唯一的哈希值。遵循 Hashable 协议的类型可以用作字典的键或集合的元素。

下面是一个实现 Hashable 协议的例子：

```swift

struct User: Hashable {
let id: Int
let name: String
}

let user1 = User(id: 1, name: "Alice")
let user2 = User(id: 2, name: "Bob")

var userDict = [user1: "Alice", user2: "Bob"]
print(userDict[user1]) // Output: Optional("Alice")
```

## Codable

该协议可以让我们将一个类型编码为 JSON 或解码 JSON。遵循 Codable 协议的类型可以通过编码和解码操作在 Swift 和其他语言之间进行转换。

下面是一个实现 Codable 协议的例子：

```swift

struct Person: Codable {
let name: String
let age: Int
}

let person = Person(name: "Alice", age: 28)

let encoder = JSONEncoder()
let data = try encoder.encode(person)

let decoder = JSONDecoder()
let decodedPerson = try decoder.decode(Person.self, from: data)

print(decodedPerson) // Output: Person(name: "Alice", age: 28)
```


协议可以被任意类型实现，包括类、结构体、枚举和其他协议，从而让这些类型可以拥有相同的行为和接口。

Swift - 协议


> 作用域是管理变量可用性的一个重要概念。作用域在基本闭包处，定义了全局变量和局部变量的概念。

## 作用域 - The Scope

在深入理解作用域之前，先通过一个简单的例子看看是如何工作的。

```js
const message = 'hello'
console.log(message) // hello
```

你可以轻松访问`message`变量。

如果将`message`变量放在`if`语句内，比如：

```js
if (true) {
  const message = 'hello'
}
console.log(message) // ReferenceError: message is not defined
```

为什么？

`if` 代码块为消息变量创建一个作用域，而消息变量只能在这个作用域内访问。

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

在更高的级别上，变量的可访问性受到它们被创建的作用域的限制。您可以自由访问在其作用域内定义的变量。但是在它的作用域之外，变量是不可访问的。

## 块级作用域 - Block Scope

```js
if (true) {
  // if 块级作用域
  const message = 'hello'
  console.log(message) // hello
}
console.log(message) // ReferenceError: message is not defined
```

第一个`console.log`输出`hello`，因为`message`变量在`if`块级作用域内。

第二个`console.log`输出`ReferenceError: message is not defined`，因为`message`变量在`if`块级作用域之外。

`if`、`for`、`while`、`do`、`switch`、`with`、`function` 以及`catch`创建块级作用域。比如：

```js
for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError
```

### `var` 不是块级作用域

`var` 关键字不是块级作用域。比如：

```js
if (true) {
  // "if" block scope
  var count = 0
  console.log(count) // 0
}
console.log(count) // 0
```

使用`var`定义的变量，会产生变量提升，即变量会在它们被访问之前被创建。在除`function`外的所有块级作用域中，`var` 关键字都是不可访问的。

## 函数作用域 - Function Scope

```js
function run() {
  // "run" function scope
  var message = 'Run Forrest, run!'
  console.log(message) // Run Forrest, run!
}
run()
console.log(message) // ReferenceError: message is not defined
```

`run()`函数定义了一个块级作用域，它包含了`message`变量，`message`变量可以在`run()`函数内访问，但是不能在`run()`函数之外访问。

同样`let`和`const`也是块级作用域。可以在`run()`函数内访问， 但是不能在`run()`函数之外访问。

```js
function run() {
  // "run" function scope
  const two = 2
  let count = 0
  function run2() {}
  console.log(two) // 2
  console.log(count) // 0
  console.log(run2) // function
}
run()
console.log(two) // throws ReferenceError
console.log(count) // throws ReferenceError
console.log(run2) // throws ReferenceError
```

## 模块作用域 - Module Scope

ES2015 同样支持模块作用域。模块作用域是一个特殊的块级作用域，它可以在模块内部访问，但是不能在模块之外访问。

```js
// circle.js
const PI = 3.14
console.log(pi) // 3.14
```

`circle.js`模块定义了一个块级作用域，它包含了`PI`变量。但是未导出`PI`变量，因此不能在模块之外访问。

```js
import './circle'
consoel.log(pi) // throws ReferenceError
```

## 嵌套作用域 - Scopes can be nested

作用域可以嵌套。比如：

```js
function run() {
  // "run" function scope
  const message = 'Run, Forrest, Run!'
  if (true) {
    // "if" code block scope
    const friend = 'Bubba'
    console.log(message) // 'Run, Forrest, Run!'
  }
  console.log(friend) // throws ReferenceError
}
run()
```

`if`代码块作用域嵌套在`run()`函数作用域内。`if`代码块作用域内部可以访问`message`变量，但是不能`if`外部访问`friend`变量。

![Scopes can be nested](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/yE2fSE.jpg)

## 全局作用域 - Global Scope

全局作用域是一个特殊的作用域，它可以在整个程序的所有位置访问。`<script>`标签内的代码块是全局作用域。

```js
;<script src="myScript.js"></script>

// myScript.js
// 全局作用域
let counter = 1
```

在前面的代码片段中，`counter` 是一个全局变量。这个变量可以从网页的 JavaScript 的任何地方访问。

全局作用域是一种机制，它允许 JavaScript 的主机(浏览器、节点)为应用程序提供特定于主机的函数作为全局变量。

例如，`window` 和 `document` 是浏览器提供的全局变量。在 `Node` 环境中，可以将进程对象作为全局变量访问。

## 词法作用域 - Lexical Scope

定义两个函数，将函数`innerFunc`嵌套在函数`outerFunc`内部。

```js
function outerFunc() {
  // the outer scope
  let outerVar = 'I am from outside!'
  function innerFunc() {
    // the inner scope
    console.log(outerVar) // 'I am from outside!'
  }
  return innerFunc
}
const inner = outerFunc()
inner()
```

`inner()`函数执行时，`innerFunc()`函数定义了一个块级作用域，它包含了`outerVar`变量。

实际上是执行了`outerFunc`函数内的`innerFunc()`函数。`outerFunc`函数返回函数，形成了一个闭包。

所以`outerFunc`外部可以访问`innerFunc()`内部的`outerVar`变量。

## 变量隔离 - Variables isolation

您可以在不同的作用域中重用公共变量名(`count`、`index`、`current`、`value`、etc) ，而不会发生冲突。

`foo()`和`bar()`函数作用域有它们自己的。

```js
function foo() {
  // "foo" function scope
  let count = 0
  console.log(count) // 0
}
function bar() {
  // "bar" function scope
  let count = 1
  console.log(count) // 1
}
foo()
bar()
```


作用域


Next.js 的静态资源存储，将静态资源放到根目录的 public 文件夹下即可。

在 Next.js 里，页面即组件，每个页面通过文件系统路由关联起来。

创建 public 文件夹，将图片放到该文件夹，修改 first.js

```js
import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>My First Post</h1>
      <h2>
        <Link href="/">
          <a>Home</a>
        </Link>
      </h2>
      <br />
      <img src="/logo.png" alt="TS" />
    </>
  )
}
```

启动服务

```bash
npm run dev
```

查看效果

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


Next.js的静态资源存储，将静态资源放到根目录的public文件夹下即可