css - 权重


在`Next.js`中支持全局样式，并且仅可在`_app.js`中引入。

创建全局样式

```css
html,
body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-size: 18px;
  background-color: lime;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}
```

在`_app.js`中引入全局样式

```js
import '../styles/styles.css'

export default function App({Component, pageProps}) {
  return <Component {...pageProps} />
}
```

启动服务

```bash
npm run dev
```

检查结果

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


Next.js - Global CSS Support


本文将了解消息发送的工作原理，比如希望和后台进行交互。如下：

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

修改`src/App.jsx`

```jsx
import React, {useState} from 'react'

export default function Messaging() {
  const [message, setMessage] = useState(null)
  const backgroundRequest = () => {
    chrome.runtime.sendMessage({color}, (response) => {
      setMessage(response.msg)
    })
  }

  return (
    <>
      <button onClick={backgroundRequest}>Background request</button>
      {message && (
        <>
          <p className="text-white">{message}</p>
          <br />
        </>
      )}
    </>
  )
}
```

修改`background.js`

```js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (!request.color) {
    sendResponse({msg: `You didn't set any color`})
  }

  sendResponse({msg: `You must really like the color ${request.color}`})
})
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/messaging)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - Messaging


Docker 中的网络是像容器和镜像一样的另一个逻辑对象。就像其他两个一样，在 docker network 组下有大量的命令可以操纵网络。

要列出系统中的网络，请执行以下命令：

```bash
docker network ls

# NETWORK ID     NAME      DRIVER    SCOPE
# c2e59f2b96bd   bridge    bridge    local
# 124dccee067f   host      host      local
# 506e3822bf1f   none      null      local
```

在表格中查看 DRIVER 列。这些驱动程序可以被视为网络类型。

默认情况下，Docker 有五种网络驱动程序，如下：

- bridge：Docker 中的默认网络驱动程序。当多个容器以标准模式运行并需要相互通信时，可以使用此驱动程序。
- host：完全删除网络隔离。在主机网络下运行的任何容器本质上都附加到主机系统的网络。
- none：此驱动程序完全禁用容器的网络。我还没有发现任何使用场景。
- overlay：用于连接多个 Docker 守护进程的工具，超出了本书的范围。
- macvlan：允许分配 MAC 地址给容器，使它们在网络中像物理设备一样工作。

还有第三方插件，允许您将 Docker 与专用网络堆栈集成。在上面提到的五个中，只需使用桥接网络驱动程序。


Docker - Network Basics


`Streams` 允许从源读取数据或写入数据到目标对象。在`Node.js`中有四种 stream

- `Writeable`：可写
- `Readable`：可读
- `Duplex`：双向，即可用于读写
- `Transform`：根据输入计算输出

每种类型的`stream`都是`EventEmitter`实例，在不同的实例抛出多个事件。常用的事件：

- `data`：当数据可读抛出
- `end`：当数据读取结束
- `error`：当数据读取错误
- `finish`：在调用 `stream.end()` 方法之后，并且所有数据都已刷新到底层系统

## 读取数据

```js
var fs = require('fs')
var data = ''

// Create a readable stream
var readerStream = fs.createReadStream('input.txt')

// Set the encoding to be utf8.
readerStream.setEncoding('UTF8')

// Handle stream events --> data, end, and error
readerStream.on('data', function (chunk) {
  data += chunk
})

readerStream.on('end', function () {
  console.log(data)
})

readerStream.on('error', function (err) {
  console.log(err.stack)
})

console.log('Program Ended') // Program Ended Tutorials Point is giving self learning content to teach the world in simple and easy way!!!!!
```

## 写入数据

```js
var fs = require('fs')
var data = 'Simply Easy Learning'

// Create a writable stream
var writerStream = fs.createWriteStream('output.txt')

// Write the data to stream with encoding to be utf8
writerStream.write(data, 'UTF8')

// Mark the end of file
writerStream.end()

// Handle stream events --> finish, and error
writerStream.on('finish', function () {
  console.log('Write completed.')
})

writerStream.on('error', function (err) {
  console.log(err.stack)
})

console.log('Program Ended')
```

## Pipe-管道流

`pipe`是一种机制，我们将一个`stream`的输出作为另一个`stream`的输入。它通常用于从一个`stream`中获取数据，并将该`stream`的输出传递给另一个`stream`。`pipe`操作没有限制。

```js
var fs = require('fs')

var readerStream = fs.createReadStream('input.txt')
var writerStream = fs.createWriteStream('output.txt')

readerStream.pipe(writerStream)

console.log('Program Ended')
```

## 链式流

`chaining`是一种将一个`stream`的输出连接到另一个`stream`并创建多个`stream`操作链的机制，它通常用于管道操作。

```js
var fs = require('fs')
var zlib = require('zlib')

// Compress the file input.txt to input.txt.gz
fs.createReadStream('input.txt')
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('input.txt.gz'))

console.log('File Compressed.')
```


Streams允许从源读取数据或写入数据到目标对象。

Node.js - Streams


## typeof

> 用于判断操作数的数据类型，适用于除 null、object 的其他 5 种类型的判断。

1. 对于基本类型，除 null 以外，均可以返回正确的结果。
2. 对于引用类型，除 function 以外，一律返回 object 类型。
3. 对于 null ，返回 object 类型。
4. 对于 function 返回 function 类型。

```js
typeof undefined // "undefined";
typeof 1 // "number";
typeof '1' // "string";
typeof true // "boolean";
typeof Symbol() // "symbol";
typeof {a: 1} // "object";

typeof null === 'object' // true
typeof function () {} === 'function' // true
```

## instanceof

> 用于判断是对象的那个子类型

```js
;[1, 2] instanceof Array // true
;(function foo() {} instanceof Function) // true
new Date(2018) instanceof Date // true
new Number(1) instanceof Number // true
1 instanceof Number // false
```

a instanceof b，instanceof 会去查找 a 的原型链(这里不展开讨论)上是否有 b 的 prototype 属性；如果有，就返回 true，否则返回 false。即判断 a 的原型链上是否有 a.\_proto\_\_ === b.prototype 返回 true

## constructor

> 不仅可以用于对象子类型的判断，还可以用于基本类型的判断，返回创建实例对象的 Object 构造函数的引用，原始数据类型，constructor 只读，基本类型指向对应的内置对象的构造函数

```js
;({a: 1}.constructor === Object) // true
;[1, 2].constructor === Array // true
new Date(2018).constructor === Date // true
;(function foo() {}.constructor === Function) // true
'1'.constructor === String // true
;(1).constructor === Number // true
true.constructor === Boolean // true
```

## prototype

> Object.prototype.toString.call('...')，通用方法判断对象类型。 Object.prototype 表示 Object 的原型对象，toString 返回表示该对象的字符串，call 用于指定 this

```js
Object.prototype.toString.call('1') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call([1, 2, 3]) // "[object Array]"
Object.prototype.toString.call(function foo() {}) // "[object Function]"
Object.prototype.toString.call(null) //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
```


类型判断


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文件夹下即可