21个用于日常开发的有用JavaScript片段


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

## 向浏览器扩展添加可选项

打开`manifest.json`，添加 options 选项，注册选项页面。

```json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  }
}
```

创建`options.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT Pop-up</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <div id="options"></div>
    <script type="module" src="src/options/index.jsx"></script>
  </body>
</html>
```

修改`src/index.jsx`

```jsx
import ReactDOM from 'react-dom'
import {App} from './App'

const app = document.getElementById('options')
ReactDOM.render(<App />, app)
```

修改`src/App.jsx`

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

export function App() {
  const [color, setColor] = useState('indigo')

  chrome.storage.sync.get('color', (storedColor) => {
    setColor(storedColor.color)
  })

  const pickColor = (pickedValue) => {
    setColor(pickedValue)
    chrome.storage.sync.set({color: pickedValue})
    window.close()
  }

  return (
    <div className="m-4">
      <select
        onChange={(event) => pickColor(event.target.value)}
        value={color}
        className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"
      >
        <option>Pick a color</option>
        <option value="indigo">Indigo</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
        <option value="red">Red</option>
      </select>
    </div>
  )
}
```

修改`vite.config.js`，多页面打包配置

```js
import {defineConfig} from 'vite'
const {resolve} = require('path')
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        options: resolve(__dirname, 'options.html')
      }
    }
  }
})
```

最终效果如下：

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/options_zuppir.webm"
  autoPlay
></video>

## Source Code

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


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

Chrome插件开发 - Custom options page


在 Swift 中，高级运算符是那些执行特定任务或操作的运算符。Swift 支持大部分标准 C 语言中的运算符，并增加了一些新的运算符。高级运算符可以用于自定义类型和类库中，也可以用于 Swift 标准库中定义的类型。Swift 中支持的高级运算符包括：

- 位运算符：按位操作二进制数据，包括按位取反、按位与、按位或、按位异或等。
- 移位运算符：用来对二进制数据进行左移或右移操作。
- 溢出运算符：对于数值类型，当其存储的值超出其所能容纳的范围时，就会发生溢出。Swift 中提供了溢出加法运算符（&+）、溢出减法运算符（&-）和溢出乘法运算符（&\*）来处理这种情况。
- 比较运算符：用于比较两个值的大小关系，包括等于、不等于、大于、小于、大于等于和小于等于等。
- 逻辑运算符：用于组合和操作布尔值，包括逻辑非、逻辑与和逻辑或。
- 匹配模式运算符：用于判断一个值是否匹配某个模式，包括元组模式、可选模式、类型转换模式等。

Swift 还提供了一些自定义高级运算符的功能。开发者可以通过运算符函数来定义新的运算符，并对其进行重载。这使得 Swift 具有更高的可读性和可维护性，并能够实现更简洁和灵活的代码实现。


在 Swift 中，高级运算符是那些执行特定任务或操作的运算符。Swift 支持大部分标准 C 语言中的运算符，并增加了一些新的运算符。高级运算符可以用于自定义类型和类库中，也可以用于 Swift 标准库中定义的类型

Swift - 高级操作符


Next.js 是基于 React 的框架，它提供了一个简单的构建工具，可以让你快速构建一个网站。

## 安装

> 前置条件：安装 Node.js、npm

```bash
npm init -y
npm install next react react-dom

# + "next": "^12.1.6",
# + "react": "^18.1.0",
# + "react-dom": "^18.1.0"
```

```json
{
  "dependencies": {
    "next": "^12.1.6",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "pfan",
  "license": "ISC",
  "description": ""
}
```

添加`build`和`start`命令

```bash
{
  "dependencies": {
    "next": "^12.1.6",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "build": "next build",
    "start": "next start"
  },
  "author": "pfan",
  "license": "ISC",
  "description": ""
}
```

## 创建`pages`目录

```bash
mkdir pages && cd pages && touch index.js
```

```js
function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage
```

## 启动服务

```bash
npm run dev

#npm run dev --port=8888
#
#> demo@1.0.0 dev
#> next dev
#
#ready - started server on 0.0.0.0:3000, url: http://localhost:3000
```

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


Next.js是基于React的框架，它提供了一个简单的构建工具，可以让你快速构建一个网站。

Next.js - Environment Setup


`string_decoder`用于把 Buffer 转换为字符串

## 基本用法

```js
const {StringDecoder} = require('string_decoder')
const decoder = new StringDecoder('utf8')
const buffer = Buffer.from('Hello World')
const str = decoder.write(buffer)
console.log(str)
```

## 方法

- stringDecoder.write(buffer[, encoding])
- stringDecoder.end(buffer[, encoding])

`write`方法把 buffer 转换为字符串，`end`方法把 buffer 转换为字符串并返回。

```js
const {StringDecoder} = require('string_decoder')
const decoder = new StringDecoder('utf8')

decoder.write(Buffer.from([0xe2]))
decoder.write(Buffer.from([0x82]))
console.log(decoder.end(Buffer.from([0xac])))
```


string_decoder用于把Buffer转换为字符串

Node.js - StringDecoder


## Tutorials

- [Install](/blog/nodejs/01-install)
- [First Program](/blog/nodejs/02-first-program)
- [NPM & CLI](/blog/nodejs/03-npm&cli)
- [Globals](/blog/nodejs/04-globals)
- [OS](/blog/nodejs/05-os)
- [Error](/blog/nodejs/06-error)
- [DNS & NET](/blog/nodejs/07-dns&net)
- [Crypto](/blog/nodejs/08-crypto)
- [TSL & SSL & DEBUGGER](/blog/nodejs/09-tsl&ssl&debugger)
- [Process](/blog/nodejs/10-process)
- [Child Process](/blog/nodejs/11-child_process)
- [Buffers](/blog/nodejs/12-buffers)
- [Streams](/blog/nodejs/13-Streams)
- [File System](/blog/nodejs/14-File%20System)
- [Path](/blog/nodejs/15-Path)
- [StringDecoder](/blog/nodejs/16-StringDecoder)
- [Query String](/blog/nodejs/17-Query%20String)
- [zlib](/blog/nodejs/18-zlib)
- [Assertion](/blog/nodejs/19-Assertion)
- [V8](/blog/nodejs/20-V8)
- [Callbacks](/blog/nodejs/21-Callbacks)
- [Events](/blog/nodejs/22-Events)

## Node.js 技术栈学习指南路线图

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


Learning Node.js


`Node.js`全局对象可以在任何模块使用，包括模块、函数、字符串、对象等。

## \_\_dirname

表示当前执行脚本所在的目录

```js
console.log(__dirname)
```

## \_\_filename

表示当前执行脚本的文件名

```js
console.log(__filename)
```

## console

用于控制台标准输出，常用 console 方法：

- `log`:输出信息
- `info`:输出信息，和 log 一样
- `error`:输出错误信息 ❌
- `warn`:输出警告消息 ⚠️
- `dir`:用来对一个对象进行检查
- `time`:开始时间，及时开始
- `timeEnd`:结束时间，计时结束
- `trace`:当前执行代码在堆栈中的调用路径
- `assert`:判断两个表达式是否为真

## process

`process`用于描述当前 Node.js 进程状态的对象，提供了一个与操作系统的简单接口

常用方法：

- `exit`:当进程准备退出时触发
- `beforeExit`:当 node 进程清空事件循环时
- `uncaughtException`:当一个异常冒泡回到事件循环时
- `signal` 事件:当进程接收到信号时

常用属性：

- `stdout`:标准输出流。
- `stderr`:标准错误流。
- `stdin`:标准输入流。
- `argv`:argv 属性返回一个数组，由命令行执行脚本时的各个参数组成。它的第一个成员总是 node，第二个成员是脚本文件名，其余成员是脚本文件的参数。
- `execPath`:返回执行当前脚本的 Node 二进制文件的绝对路径。
- `execArgv`:返回一个数组，成员是命令行下执行脚本时，在 Node 可执行文件与脚本文件之间的命令行参数。
- `env`:返回一个对象，成员为当前 shell 的环境变量
- `exitCode`:进程退出时的代码，如果进程优通过 process.exit() 退出，不需要指定退出码。
- `version`:Node 的版本，比如 v0.10.18。
- `versions`:一个属性，包含了 node 的版本和依赖.
- `config`:一个包含用来编译当前 node 执行文件的 javascript 配置选项的对象。它与运行 ./configure 脚本生成的 "config.gypi" 文件相同。
- `pid`:当前进程的进程号。
- `title`:进程名，默认值为"node"，可以自定义该值。
- `arch`:当前 CPU 的架构：'arm'、'ia32' 或者 'x64'。
- `platform`:运行程序所在的平台系统 'darwin', 'freebsd', 'linux', 'sunos' 或 'win32'
- `mainModule`:require.main 的备选方法。不同点，如果主模块在运行时改变，require.main 可能会继续返回老的模块。可以认为，这两者引用了同一个模块。

## buffer

js 只有字符串数据类型，没有二进制数据类型，不过，在处理`tcp`流和文件流时，就必需使用到二进制数据。

`buffer`用于创建存放二进制数据的缓存区

```js
const buf = Buffer.from('Hey!')
```

获取 buffer 的长度

```js
buf.length
```

遍历 buffer 的内容

```js
for (const item of buf) {
  console.log(item)
}
```

写入 buffer 内容

```js
buf.write('world')
```

复制 buffer

```js
buf.copy(Buffer.alloc(4))
```

切割 buffer

```js
buf.slice(0).toString()
```

## setImmediate

当要异步地（但要尽可能快）执行某些代码时，即传入的任何函数将在事件循环的下一个迭代中执行回调。

类似于`setTimeout(()=>{},0)`

```js
setImmediate(() => {
  console.log('immediate')
})
```

[setTimeout 和 setImmediate 到底谁先执行](https://segmentfault.com/a/1190000023315304)

## setInterval

在指定毫秒数`ms`后执行指定函数`cb`，在调用`clearInterval`之前，每隔指定毫秒数执行一次。

```js
function t() {
  console.log(1)
}

const interFn = setInterval(t, 1000)
```

## setTimeout

在指定毫秒数`ms`后执行指定函数`cb`，只执行一次

```js
function o() {
  console.log(2)
}

const timeFn = setTimeout(o, 1000)
```

## clearImmediate

用于清除`setImmediate`

## clearInterval

用于清除一个之前通过`setInterval`创建的定时器

```js
clearInterval(interFn)
```

## clearTimeout

用于清除一个之前通过`setTimeout`创建的定时器

```js
clearTimeout(timeFn)
```
