process对象是 Node 的一个全局对象，提供当前 Node 进程的信息。它可以在脚本的任意位置使用，不必通过require命令加载。该对象部署了EventEmitter接口

Node.js - Process


在 Next.js 中，页面是一个 React Component，从 pages 目录导出。每个页面都基于其文件名与一个路由关联。

比如：

- `pages/index.js` 与 / 映射
- `pages/about.js` 与 /about 映射
- `pages/blog/[slug].js` 与 /blog/[slug] 映射

创建 posts 目录和 first.js

```js first.js
import Link from 'next/link'
export default function First() {
  return (
    <>
      <h1>My First Post</h1>
      <h2>
        <Link href="/">
          <a>Home</a>
        </Link>
      </h2>
    </>
  )
}
```

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

function HomePage() {
  return (
    <>
      <div>Welcome to Next.js!</div>
      <Link href="/posts/first">
        <a>First Post</a>
      </Link>
    </>
  )
}

export default HomePage
```

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

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


在Next.js中，使用文件路由系统（pages）来管理页面。

Next.js - Pages


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

![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


## First Program

创建`hellowrold.js`，打开控制台执行`node helloworld.js`

```js
console.log('hello world')

// hello world
```

## 基于`http`创建一个简单 server

一个简单`nodejs server`程序包含三个必备条件

- 引入依赖包
- 创建 server
- 获取请求和返回

引入依赖包

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

创建 server

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

http
  .createServer(function (req, res) {
    response.writeHead(200, {'Content-Type': 'text/plain'})
    response.end('Hello World\n')
  })
  .listen(8888)

console.log('Server running at http://127.0.0.1:8888/')
```

启动 server

```bash
node server.js
#Server running at http://127.0.0.1:8888/
```

## 进入 REPL(交互解释器)模式

REPEL 即交互解释器，使用单个表达式作为用户输入，并在执行后将结果返回到控制台

```bash
node
```

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

使用<kbd>tab</kbd>显示当前输入对象的扩展，比如输入`Number.`后按下<kbd>tab</kbd>

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


Node.js - First Program & REPL


Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

- useState
- useEffect
- useRef
- useContext
- useCallback
- useMemo

## 使用 useState

`useState` 可以让你在不编写 class 的情况下使用 state。

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

function Counter() {
  const [count, setCount] = useState(0)

  function updateCount() {
    setCount(count + 1)
  }

  return <button onClick={updateCount}>Count is: {count}</button>
}
```

`useState`第一个参数是初始值，第二个参数是一个函数，这个函数可以更新初始值。

如果更新函数返回值与初始值相同，那么组件不会更新。否则将组件的重新渲染加入队列。

## 使用 useEffect

`useEffect(callback[, dependencies]);`

- `callback`是包含副作用逻辑的函数
- `dependencies`是一个数组，表示依赖的数据发生变化时，`callback`函数才会执行。

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

当`dependecies`未提供时，每次渲染都会执行`callback`函数。

当`dependencies`提供的是一个空数组时，`callback`函数只会执行一次。

当`dependencies`提供的是一个不为空的数组时，`callback`函数会在依赖的数据发生变化时执行。

```jsx
import {useEffect} from 'react'

function MyComponent() {
  useEffect(() => {
    // perform side effect here
  }, [])
}
```

[A Simple Explanation of React.useEffect()](https://dmitripavlutin.com/react-useeffect-explanation/)

## 使用 useRef

`useRef`允许直接访问 JSX 元素的 DOM 元素。

```jsx
import {useRef} from 'react'

function MyComponent() {
  const ref = useRef()

  return <div ref={ref} />
}
```

此时，可以使用`ref.current`访问到 DOM 元素。比如：

```jsx
import {useWindowEvent} from '@mantine/hooks'
import {useRef} from 'react'

function Header() {
  const inputRef = useRef()

  useWindowEvent('keydown', (event) => {
    if (event.code === 'KeyK' && event.ctrlKey) {
      event.preventDefault()
      inputRef.current.focus()
    }
  })

  return <input ref={inputRef} />
}
```

## 使用 useContext

`useContext`提供比`Context.Consumer`更简单的方式来访问 Context。比如：

```jsx
import { createContext, useContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    <NameContext.Provider>
  );
}

function Body() {
  return <Greeting />;
}

function Greeting() {
	const name = useContext(NameContext);

  return (
    <h1>Welcome, {name}</h1>
  );
}
```

## 使用 useCallback

`useCallback`返回一个 memoized 函数，这个函数会在组件的每次渲染时被调用。

`useCallback(fn,deps)`，类似于 vue 中的 computed

```jsx
function App() {
  const [player, setPlayer] = React.useState('')
  const [players, setPlayers] = React.useState(['Messi', 'Ronaldo', 'Laspada'])

  function handleChangeInput(event) {
    setPlayer(event.target.value)
  }
  function handleAddPlayer() {
    setPlayers(players.concat(player))
  }
  const handleRemovePlayer = useCallback(
    (player) => {
      setPlayers(players.filter((p) => p !== player))
    },
    [players]
  )

  return (
    <>
      <input onChange={handleChangeInput} />
      <button onClick={handleAddPlayer}>Add Player</button>
      <PlayerList players={players} handleRemovePlayer={handleRemovePlayer} />
    </>
  )
}

function PlayerList({players, handleRemovePlayer}) {
  return (
    <ul>
      {players.map((player) => (
        <li key={player} onClick={() => handleRemovePlayer(player)}>
          {player}
        </li>
      ))}
    </ul>
  )
}
```

## 使用 useMemo

`useMemo`返回一个 memoized 值，与`useEffect`、`useCallback`类似，接收函数和依赖项作为参数。

```jsx
import * as React from 'react'
import {getMDXComponent} from 'mdx-bundler/client'

function Post({code, frontmatter}) {
  const Component = React.useMemo(() => getMDXComponent(code), [code])

  return (
    <>
      <header>
        <h1>{frontmatter.title}</h1>
        <p>{frontmatter.description}</p>
      </header>
      <main>
        <Component />
      </main>
    </>
  )
}
```


Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

React Hooks


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


`pages/api` 目录下的任何文件都将作为 `API` 端点映射到 `/api/*`，而不是 `page`。这些文件只会增加服务端文件包的体积，而不会增加客户端文件包的大小。

`Next.js`中创建 rest api 的方式如下：

```jsx
export default (req, res) => {
  console.log(req, res)
  return {}
}
```

- req: 请求对象，http.IncomingMessage 实例
- res: 响应对象，http.ServerResponse 实例

## 响应

- `res.status(code)`：设置响应状态码
- `res.json(data)`：设置响应数据
- `res.send(data)`：设置响应数据
- `res.redirect(url)`：重定向

创建一个响应：

```jsx
export default function handler(req, res) {
  res.status(200).json({message: 'Hello from Next.js!'})
}
```

## 创建路由

创建一个简单的 rest api

```jsx
export default (req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.json({
    message: 'Hello World'
  })
}
```

创建动态 API 路由：`pages/api/post/[pid].js`

```jsx
export default function handler(req, res) {
  const {pid} = req.query
  res.end(`Post: ${pid}`)
}
```

创建匹配所有路由：`pages/api/post/[...slug].js`

```jsx
export default function handler(req, res) {
  const {slug} = req.query
  res.end(`Post: ${slug.join(', ')}`)
}
```

启动服务：

```bash
npm run dev
```

验证结果：

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