css - Spacing


## 输入值数字化

```js
const checkMyValueType = (event) => {
  console.log(typeof event.target.value) // string
  console.log(typeof event.target.valueAsNumber) // number
}
;<input type="number" onkeyup="checkMyValueType(event)" />
```

## 复制输入框值到粘贴板

```js
function copyToClipboard(inputID) {
  navigator.clipboard.writeText(document.querySelector(inputID).value)
}
```

## 检查窗口是否可见

```js
const isBrowserTabInView = () => document.hidden
isBrowserTabInView() // returns true or false depending if tab is in view / focus
```

## 布尔值取反

```js
let myBool = false
myBool = !myBool
console.log(myBool) // true
myBool = !myBool
console.log(myBool) // false
```

## 检查值是否是偶数

```js
const isEven = (num) => num % 2 === 0
console.log(isEven(2)) // true
console.log(isEven(3)) // false
```

## 检查日期是否是工作日

```js
const isWeekday = (d) => d.getDay() % 6 !== 0
console.log(isWeekday(new Date(2021, 0, 11))) // true (Monday)
console.log(isWeekday(new Date(2021, 0, 10))) // false (Sunday)
```

## 日期加减

```js
const addDaysToDate = (date, n) => {
  date.setDate(date.getDate() + n)
  return date.toISOString().split('T')[0]
}
addDaysToDate('2021-0-10', 10) // "2021-01-20"
addDaysToDate('2021-0-10', -10) // '2020-12-31'
```

## 获取时分秒

```js
const timeFromDate = (date) => date.toTimeString().slice(0, 8)
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)))
// "17:30:00"
console.log(timeFromDate(new Date(2021, 0, 10, 5, 56, 44)))
// "05:56:44"
```

## 计算两个日期之间的工作日数

```js
const countWeekDaysBetween = (startDate, endDate) =>
  Array.from({length: (endDate - startDate) / (1000 * 3600 * 24)}).reduce(
    (count) => {
      if (startDate.getDay() % 6 !== 0) {
        count++
      }
      startDate = new Date(startDate.setDate(startDate.getDate() + 1))
      return count
    },
    0
  )
countWeekDaysBetween(new Date(2021, 0, 10), new Date(2021, 0, 20)) // 7
countWeekDaysBetween(new Date(2021, 1, 10), new Date(2021, 2, 18)) // 26
```

## 检查 localstorage 是否可用

```javascript
const isLocalStorageEnabled = () => {
  try {
    const key = `__storage__test`
    window.localStorage.setItem(key, null)
    window.localStorage.removeItem(key)
    return true
  } catch (e) {
    return false
  }
}
isLocalStorageEnabled() // true, if localStorage is accessible
```

## 计算函数等花费时间

```js
startTime = performance.now()
anyMethodOrCode()
const endTime = performance.now()
console.log(endTime - startTime + ' milliseconds.') // (Time in milliseconds)
```

## 捕获右键点击

```js
window.oncontextmenu = () => {
  console.log('right click')
}
```

## 只触发一次事件

```js
const myButton = document.getElementById('myBtn')
const myClickFunction = () => {
  console.log('this click will only get called once')
}
myButton.addEventListener('click', myClickHandler, {
  once: true
})
```

## 滚动到顶部

```js
const scrollToTopOfDocument = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}
scrollToTopOfDocument()
```

## 检查字符串是否大写

```js
const isUpperCase = (str) => str === str.toUpperCase()
console.log(isUpperCase('string')) // false
console.log(isUpperCase('STRING')) // true
console.log(isUpperCase('5TR1NG')) // true
```

## 检查元素是否处于 focus 状态

```js
const elementIsInFocus = (el) => el === document.activeElement
elementIsInFocus(anyElement) // returns true if in focus, false if not in focus
```

## 查找数组间不同元素

```js
const differenceInArrays = (array1, array2) => {
  const set = new Set(array2)
  return array1.filter((x) => !set.has(x))
}
differenceInArrays(['apple', 'orange', 'banana'], ['apple', 'orange', 'mango']) // ["banana"]
differenceInArrays([10, 12, 5], [66, 10, 6]) // [12, 5]
```

## 移除事件监听

```js
const removeEventOffElement = (el, evt, fn, opts = false) =>
  el.removeEventListener(evt, fn, opts)
const testFunction = () => console.log('My function has been called')
document.body.addEventListener('click', testFunction)
// Call remove method
removeEventOffElement(document.body, 'click', fn)
```

## 随机生成 HEX 值

```js
const generateRandomColour = () =>
  '#' + Math.floor(Math.random() * 16777215).toString(16)
//EXAMPLE
document.getElementsByTagName('body')[0].style.color = generateRandomColour()
```

## 查找第一个定义的非空参数

```js
const getFirstValidValue = (...values) => values.find(v => ![undefined, null].includes(v));
console.log(getFirstValidValue(null, undefined, 'Hey', null); // 'Hey'
```

## 元素外部监听事件

```js
const onClickOutsideElement = (element, callback) => {
  document.addEventListener('click', (e) => {
    if (!element.contains(e.target)) callback()
  })
}
onClickOutside('#some-element', () => console.log('Hey you missed'))
// Will log "Hey you missed" everytime a click that was not "some-element" was clicked
```

## 总结

有时开发人员会发现自己在一次又一次地创建相同的东西，希望上面的一些代码片段可以在在开发中重用。最新的 JavaScript 特性和浏览器 api 是很重要的。


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


本章学习如何创建`turboReader`插件，如下图：

<video
  src={
    'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/turboreader_ghlbnk.webm'
  }
  autoPlay
></video>

## 初始化项目

```bash
mkdir turboReader && cd turboReader
```

添加`manifest.json.json`

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "TurboReader",
  "description": "Become a faster reader with TurboReader",
  "action": {},
  "icons": {
    "48": "icons/icon-48.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "scripting"]
}
```

添加`background.js`，获取活动标签，并注入名为`turboMode`的函数。

```js
const turboMode = () => {
  // do something
}

chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true})
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: turboMode
  })
})
```

## 创建函数

首先获取页面内所有段落

```js
const paragraphs = document.getElementsByTagName('p')
```

判断当前是否是阅读模式

```js
const isTurboMode = document.body.classList.contains('trms')
```

遍历并处理段落

```js
for (const paragraph of paragraphs) {
  if (isTurboMode) {
    // 阅读模式已开启就返回当前段落
    paragraph.innerText = paragraph.innerText
  } else {
    // 阅读模式未开启，返回处理后的段落
    paragraph.innerHTML = paragraph.innerText
      .split(' ')
      .map((word) => {
        const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
        const boldLength = length === 1 ? 1 : Math.floor(length / 2)
        return `<strong>${word.substring(
          0,
          boldLength
        )}</strong>${word.substring(boldLength)}`
      })
      .join(' ')
  }
}
```

在循环外部加入判断

```js
isTurboMode
  ? document.body.classList.remove('trms')
  : document.body.classList.add('trms')
```

完整代码

```js
const turboMode = () => {
  const paragraphs = document.getElementsByTagName('p')
  const isTurboMode = document.body.classList.contains('trms')
  for (const paragraph of paragraphs) {
    if (isTurboMode) {
      paragraph.innerText = paragraph.innerText
    } else {
      paragraph.innerHTML = paragraph.innerText
        .split(' ')
        .map((word) => {
          const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
          const boldLength = length === 1 ? 1 : Math.floor(length / 2)
          return `<strong>${word.substring(
            0,
            boldLength
          )}</strong>${word.substring(boldLength)}`
        })
        .join(' ')
    }
  }

  isTurboMode
    ? document.body.classList.remove('trms')
    : document.body.classList.add('trms')
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/turbo-reader)


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

Chrome插件开发 - Creating the TurboReader browser extension


所有的代码都是在执行上下文中执行的，执行上下文是一个抽象的概念，它是一种规范，用来定义变量或函数有权访问的其他数据，决定它们的各自行为。

在深入研究前，需要了解一些概念：

- 编译器：负责语法分析和代码生成
- JavaScript 引擎：负责执行代码
- 函数声明：指的是使用 function 关键字声明的函数
- 函数表达式：指的是使用 var 关键字声明的函数

## JavaScript 是如何被执行的

JavaScript 代码在执行之前，会经历三个阶段：

- 词法分析（Lexical Analysis）
- 语法分析（Syntactic Analysis）
- 代码生成（Code Generation）

词法分析阶段，会将代码分解成一个个词法单元，比如 var、function、if、else、for、while 等等。

语法分析阶段，会将词法单元转换成一个个语法单元，比如 var a = 1，会被转换成一个个词法单元，然后再转换成一个个语法单元，比如 var、a、=、1。

代码生成阶段，会将语法单元转换成可执行的代码，比如 var a = 1，会被转换成一个个语法单元，然后再转换成可执行的代码，比如 var a = 1。

## JavaScript 中的执行上下文

JavaScript 中的执行上下文是一个抽象的概念，它是一种规范，用来定义变量或函数有权访问的其他数据，决定它们的各自行为。

执行上下文分为三种：

- 全局执行上下文
- 函数执行上下文
- eval 函数执行上下文

### 全局执行上下文

全局执行上下文是默认的执行上下文，它会在 JavaScript 代码执行之前被创建，它会被放到执行上下文栈中，当 JavaScript 代码执行完毕后，它会被从执行上下文栈中移除。

全局执行上下文包含三个部分：

- 变量对象（Variable Object，VO）
- 作用域链（Scope Chain）
- this

#### 变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

变量对象包含两个部分：

- 函数的所有形参（如果是函数上下文）
- 函数声明
- 变量声明

变量对象的创建过程：

- 创建一个 VO
- 将所有形参，变量和函数声明添加到 VO 中
- 将 VO 赋值给活动对象（AO）

#### 作用域链

作用域链是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。

作用域链的创建过程：

- 创建一个作用域链
- 将当前执行上下文的变量对象添加到作用域链中
- 将父级执行上下文的变量对象添加到作用域链中
- 将父级的父级执行上下文的变量对象添加到作用域链中
- 依次类推，直到全局执行上下文的变量对象添加到作用域链中

#### this

this 是一个指针，指向函数执行时所在的作用域。

[this 的指向](/blog/javascript/advance/this指向)

### 函数执行上下文

函数执行上下文是在函数被调用时被创建，它会被放到执行上下文栈中，当函数执行完毕后，它会被从执行上下文栈中移除。

## JavaScript 中的提升

JavaScript 中的提升是指变量和函数的声明会被提升到当前作用域的顶部。

### 变量提升

变量提升是指变量的声明会被提升到当前作用域的顶部，但是变量的赋值不会被提升。

```js
console.log(a) // undefined
var a = 1
```

### 函数提升

函数提升是指函数的声明会被提升到当前作用域的顶部，但是函数的赋值不会被提升。

```js
console.log(a) // function a() {}
function a() {}
```

## JavaScript 执行栈

JavaScript 执行栈是一个用于存储函数调用的栈结构，它遵循先进后出的原则。

当浏览器加载脚本，JS 引擎从全局上下文也就是默认上下文开始执行代码，所以全局上下文被放在执行栈的最底部。

然后 JS 引擎再搜索代码中被调用的函数。每一次函数被调用，一个新的 FEC 就会被创建，并被放置在当前执行上下文的上方。

执行栈最顶部的执行上下文会成为活跃执行上下文，并且始终是 JS 引擎优先执行。

一旦活跃执行上下文中的代码被执行完毕，JS 引擎就会从执行栈中弹出这个执行上下文，紧接着执行下一个执行上下文，以此类推。

为了了解执行栈的工作流，请考虑下面的代码：

```js
var name = 'Victor'

function first() {
  var a = 'Hi!'
  second()
  console.log(`${a} ${name}`)
}

function second() {
  var b = 'Hey!'
  third()
  console.log(`${b} ${name}`)
}

function third() {
  var c = 'Hello!'
  console.log(`${c} ${name}`)
}

first()
```

解释以上代码的执行过程：

1. 全局上下文被创建，全局上下文被压入执行栈中。
2. 全局上下文初始化，创建变量对象、作用域链、this。
3. 全局上下文代码被执行，遇到 first() 函数调用，创建 first() 函数执行上下文，first() 函数执行上下文被压入执行栈中。
4. first() 函数执行上下文初始化，创建变量对象、作用域链、this。
5. first() 函数执行上下文代码被执行，遇到 second() 函数调用，创建 second() 函数执行上下文，second() 函数执行上下文被压入执行栈中。
6. second() 函数执行上下文初始化，创建变量对象、作用域链、this。
7. second() 函数执行上下文代码被执行，遇到 third() 函数调用，创建 third() 函数执行上下文，third() 函数执行上下文被压入执行栈中。
8. third() 函数执行上下文初始化，创建变量对象、作用域链、this。
9. third() 函数执行上下文代码被执行，打印 `Hello Victor`。
10. third() 函数执行上下文被弹出执行栈。
11. second() 函数执行上下文代码被执行，打印 `Hey Victor`。
12. second() 函数执行上下文被弹出执行栈。
13. first() 函数执行上下文代码被执行，打印 `Hi Victor`。
14. first() 函数执行上下文被弹出执行栈。
15. 全局上下文代码被执行，打印 `Victor`。
16. 全局上下文被弹出执行栈。

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

## 全局执行上下文对比函数执行上下文

全局执行上下文和函数执行上下文的区别在于：

1. 全局执行上下文只有一个，但是函数执行上下文可以有很多个。
2. 全局执行上下文在浏览器关闭时被销毁，但是函数执行上下文在函数执行完毕后被销毁。

## 参考

1. [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Call](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Call)
2. [JavaScript 执行上下文——JS 的幕后工作原理](https://www.freecodecamp.org/chinese/news/execution-context-how-javascript-works-behind-the-scenes/)


执行上下文


Linux ping 命令用于检测主机。

执行 ping 指令会使用 ICMP 传输协议，发出要求回应的信息，若远端主机的网络功能没有问题，就会回应该信息，因而得知该主机运作正常。

如下是 ping baidu.com：

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

**ping**发出请求到对应的主机，主机返回结果。

默认情况**ping**会每秒发出请求，直到使用**ctrl+c**中断，也可以使用-c times 指定接收包的次数，如：

```bash
ping -c 2 baidu.com
```

当结束**ping**命令时，屏幕上会打印出统计结果，其中包括丢包率以及速率

```bash
ping -i 3 -s 1024 -t 255 baidu.com

# -i 3 发送周期为 3秒 -s 设置发送包的大小 -t 设置TTL值为 255
```

## 参数

- `-d` 使用 Socket 的 SO_DEBUG 功能。
- `-c` 完成次数 设置完成要求回应的次数。
- `-f` 极限检测。
- `-i` 间隔秒数 指定收发信息的间隔时间。
- `-I` 网络界面 使用指定的网络接口送出数据包。
- `-l` 前置载入 设置在送出要求信息之前，先行发出的数据包。
- `-n` 只输出数值。
- `-p` 范本样式 设置填满数据包的范本样式。
- `-q` 不显示指令执行过程，开头和结尾的相关信息除外。
- `-r` 忽略普通的 Routing Table，直接将数据包送到远端主机上。
- `-R` 记录路由过程。
- `-s` 数据包大小 设置数据包的大小。
- `-t` 存活数值 设置存活数值 TTL 的大小。
- `-v` 详细显示指令的执行过程。


Linux命令ping


## cli

`Next.js`提供了一个简单的命令行工具，可以帮助我们快速部署和管理应用。

```bash
npx next -h

#设置端口
npx next dev -p 4000 #开发模式
PORT=4000 npx next dev #开发模式

npx next start -p 4000 #生产模式
PORT=4000 next start #生产模式

next lint #检查代码规范

next build #构建静态资源
next export #导出静态资源
```

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

```bash
➜  demo npm run build

> demo@1.0.0 build
> next build

info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ λ /                                      470 B          75.4 kB
├   /_app                                  0 B            74.9 kB
├ ○ /404                                   193 B          75.1 kB
├ λ /api                                   0 B            74.9 kB
└ ○ /posts/first                           2.75 kB        77.7 kB
    └ css/9871d7e98c5c71df.css             103 B
+ First Load JS shared by all              74.9 kB
  ├ chunks/framework-a87821de553db91d.js   45 kB
  ├ chunks/main-d8b1ff545a609496.js        28.6 kB
  ├ chunks/pages/_app-05a4472bc3e8727e.js  507 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/5d2c4ba91281dd0f.css               175 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
```

## deployment

通过`next build`构建静态资源，然后通过`next export`导出静态资源。

- `.next/static/chunks/pages`–此文件夹中的每个 JavaScript 文件都与具有相同名称的路由相关联。例如，.next/static/chunks/pages/about.js 将是在应用程序中查看/about 路由时加载的 JavaScript 文件
- `.next/static/media`–从 next/image 静态导入的图像在这里散列和复制
- `.next/static/css`–应用程序中所有页面的全局 CSS 文件
- `.next/server/pages`–从服务器预呈现的 HTML 和 JavaScript 入口点`.nft.json` 文件在启用输出文件跟踪时创建，并包含依赖于给定页面的所有文件路径。
- `.next/server/chunks`– 在整个应用程序的多个地方使用的共享 JavaScript 块
- `.next/cache`–从 Next.js 服务器输出构建缓存和缓存的图像、响应和页面。使用缓存有助于减少构建时间并提高加载图像的性能

部署方式

- Vercel
- netlify
- github pages
- firebase
- self-hosted
- node.js server
- docker

## SSG vs SSR

[SSG vs SSR](https://blog.logrocket.com/ssg-vs-ssr-in-next-js/)


Next.js - CLI & Deployment


## 前置

[【上一篇】](/blog/javascript/nextjs/tips/build-blog-with-nextjs)完成了使用 Next.js 构建 blog。

**注意**

主题切换基于`chakra-ui`、`tailwindcss(可选)`，chakra-ui 和 tailwind.css 都内置支持颜色模式

> chakra-ui 将颜色模式变量值存储在`localstorage`中，以确保持久化

详细文档参考[Color Mode](https://chakra-ui.com/docs/styled-system/color-mode)

```bash
pnpm install react-icons
```

## 设置

新增`utils/theme.ts`

```ts
import {extendTheme, type ThemeConfig} from '@chakra-ui/react'

const theme = extendTheme({
  config: {
    initialColorMode: 'system',
    useSystemColorMode: true
  } as ThemeConfig,
  fonts: {
    heading: `'Dosis', sans-serif`
  }
})

export default theme
```

## 修改\_document.js

```tsx
// pages/_document.js

import {ColorModeScript} from '@chakra-ui/react'
import NextDocument, {Html, Head, Main, NextScript} from 'next/document'
import theme from './theme'

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          {/* 👇 Here's the script */}
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

新增`components/DarkModeSwitch/index.tsx`

```tsx
import {useColorMode, Box} from '@chakra-ui/react'
import {BsMoonFill, BsFillSunFill} from 'react-icons/bs'

const DarkModeSwitch = () => {
  const {colorMode, toggleColorMode} = useColorMode()
  return (
    <Box
      as="div"
      position="absolute"
      top={4}
      right={4}
      zIndex={9999}
      onClick={toggleColorMode}
    >
      {colorMode === 'light' ? (
        <BsMoonFill size={18} />
      ) : (
        <BsFillSunFill size={18} />
      )}
    </Box>
  )
}

export default DarkModeSwitch
```

修改`pages/_app.tsx`

```tsx
import dynamic from 'next/dynamic'
import Head from 'next/head'
import React from 'react'
import {ChakraProvider} from '@chakra-ui/react'
import theme from 'utils/theme'

// 新增
const DarkModeSwitch = dynamic(() => import('components/DarkModeSwitch'), {
  ssr: false
})

const App = ({Component, pageProps, router}) => {
  const {route} = router
  const url = `https://manon.icu${route}`

  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=5"
        />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
        <meta name="description" content="Manon.icu,homepage" />
        <title>Manon.icu | Home</title>
      </Head>
      <ChakraProvider theme={theme}>
        {/* 新增 */}
        <DarkModeSwitch />
        <Component {...pageProps} canonical={url} key={url} />
      </ChakraProvider>
    </>
  )
}

export default App
```

[Source Code](https://github.com/Manonicu/blog-demo/tree/feat-switch-theme-mode)


从性能、打包大小、SEO来看，Next.js可能是最适合写blog的React框架。