tar用于linux的文件和目录创建档案，利用tar命令，可以把一大堆的文件和目录全部打包成一个文件

Linux命令tar


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

## 作用域 - 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()
```


作用域


## useRouter 钩子

使用方式：

```jsx
import {useRouter} from 'next/router'

export default function Home() {
  const router = useRouter()
  console.log(router)
  return <></>
}
```

`useRouter`钩子返回一个对象，包含了路由相关的信息，包括：

- `router.query`：路由参数
- `router.pathname`：路由路径
- `router.asPath`：当前页面的完整路径
- `router.route`：当前路由的路径
- `router.events`：事件监听器

### router.push

- `url`: 路径
- `as`:dom 中标签
- `options`:路由配置
- `shallow`:是否深度渲染，默认为 false，更新路由时，会重新调用`getStaticProps`, `getServerSideProps`, `getInitialProps`并渲染新的页面。

### router.replace

`router.replace`方法类似于`router.push`，但是会替换当前的路由，而不是增加一个新的路由。

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/Next.js-navigate-programmatically.mp4"
  controls
  width={640}
  height={320}
  autoPlay
></video>

## 代码

feedback.js

```jsx
const FeedBack = (props) => {
  return (
    <div style={{padding: 50}}>
      <h1>Feedback Page</h1>
    </div>
  )
}

export default FeedBack
```

index.js

```jsx
import {useRouter} from 'next/router'

export default function Home() {
  const router = useRouter()
  return (
    <div style={{padding: 50}}>
      <h1>Home Page</h1>
      <h2>push()</h2>
      <p>
        <button onClick={() => router.push('/feedback')}>
          Go to the feedback page
        </button>
      </p>
      <p>
        <input type="checkbox" onChange={() => router.push('/feedback')}></input>{' '}
        Check me to go to the feedback page
      </p>
      <br />

      <h2>replace()</h2>
      <div>
        <button onClick={() => router.replace('/feedback')}>
          Go to the feedback page and not go back
        </button>
      </div>
    </div>
  )
}
```


Next.js - how-to-programmatically-navigate-in-next-js


`Node.js`提供一些基本系统相关的函数：

`os.arch()` 返回当前计算机的 CPU 体系结构，比如：可能的值为`x32`、`x64`、`arm`、`arm64`、`s390`、`s390x`、`mipsel`、`ia32`、`mips`、`ppc`、`ppc64`

`os.cpus()`返回包含有关每个逻辑 CPU 内核的信息的对象数组

`os.endianness()`返回标识为其编译 Node.js 二进制文件的 CPU 的字节序的字符串。 可能的值是大端序的 'BE' 和小端序的 'LE'

`os.freemem()`返回可用系统内存

`os.getPriority()`获取进程优先级

`os.homedir()`返回当前用户主目录

`os.hostname()`返回系统主机名

`os.lodavg()`用于获取平均负载

`os.networkInterfaces()`返回网络接口列表

`os.platform()`返回当前系统平台，比如：`darwin`、`win32`、`freebsd`、`linux`

`os.release()`返回当前系统版本

`os.setPriority()`设置进程优先级

`os.tmpdir()`返回当前系统临时文件默认目录

`os.totalmem()`返回当前系统内存，以字节为单位

`os.type()`返回当前操作系统名称，比如：`linux`、`darwin`、`windows_nt`

`os.userInfo()`返回当前用户信息

`os.uptime()`返回系统正常运行时间

`os.version()`返回当前系统内核、时间、发行版本等信息

`os.constants`包含用于错误码、进程信号等的常用操作系统特定常量

`os.EOL`返回当前操作系统的换行符

`os.devNull`空设备的特定于平台的文件路径。


Node.js - os


在上一篇文章[【First Theme】](/blog/translate/build-chrome-extensions/first-theme)学习了创建第一个主题。

这篇文章学习创建一个新标签插件，类似如图：

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

## 结构

```bash
mkdir new-tab-extension && cd new-tab-extension
```

将以下内容吸入`manifest.json`，这是任何浏览器扩展的主入口。

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "New Tab Extension",
  "description": "A demo first new tab experience",
  "action": {
    "default_icon": "icons/icon-48.png"
  },
  "icons": {
    "48": "icons/icon-48.png"
  },
  "chrome_url_overrides": {
    "newtab": "new-tab.html"
  }
}
```

新标签扩展插件的核心在于`chrome_url_overrides`，它告诉浏览器使用哪个页面打开新标签。

创建`new-tab.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 New Tab</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <h1>Hello world 👋</h1>
  </body>
</html>
```

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  background-color: rgb(238 242 255);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
h1 {
  font-size: 10vmin;
  color: rgb(218 0 96);
}
```

## 测试插件

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


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

Chrome插件开发 - 新标签


**traceroute**命令用于显示数据包到主机之间的路径。

> raceroute 命令 用于追踪数据包在网络上的传输时的全部路径，它默认发送的数据包大小是 40 字节。
>
> 通过 traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径。当然每次数据包由某一同样的出发点（source）到达某一同样的目的地(destination)走的路径可能会不一样，但基本上来说大部分时候所走的路由是相同的。
>
> traceroute 通过发送小的数据包到目的设备直到其返回，来测量其需要多长时间。一条路径上的每个设备 traceroute 要测 3 次。输出结果中包括每次测试的时间(ms)和设备的名称（如有的话）及其 ip 地址。

## 使用方法

```bash
traceroute <host>
```

## 案例

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

## 参数

- `-d` 使用 Socket 层级的排错功能。
- `-f` 存活数值 设置第一个检测数据包的存活数值 TTL 的大小。
- `-F` 设置勿离断位。
- `-g` 网关 设置来源路由网关，最多可设置 8 个。
- `-i` 网络界面 使用指定的网络界面送出数据包。
- `-I` 使用 ICMP 回应取代 UDP 资料信息。
- `-m` 存活数值 设置检测数据包的最大存活数值 TTL 的大小。
- `-n` 直接使用 IP 地址而非主机名称。
- `-p` 通信端口 设置 UDP 传输协议的通信端口。
- `-r` 忽略普通的 Routing Table，直接将数据包送到远端主机上。
- `-s` 来源地址 设置本地主机送出数据包的 IP 地址。
- `-t` 服务类型 设置检测数据包的 TOS 数值。
- `-v` 详细显示指令的执行过程。
- `-w` 超时秒数 设置等待远端主机回报的时间。
- `-x` 开启或关闭数据包的正确性检验。

**traceroute**命令可在 Linux、macOS、WSL 和任何 UNIX 环境下运行


traceroute命令用于显示数据包到主机之间的路径

Linux命令traceroute


## 什么是闭包

作用：能够在函数定义的作用域外，使用函数定义作用域内的局部变量，并且不会污染全局。

原理：基于词法作用域链和垃圾回收机制，通过维持函数作用域的引用，让函数作用域可以在当前作用域外被访问到

```js
function foo() {
  var a = 'hzfe'
  function bar() {
    console.log(a)
  }
  return bar
}

var baz = foo()
baz() // hzfe
```

在这个例子中，函数 bar 作为返回值返回后，在自己定义的词法作用域以外的地方执行。一般来说，在函数 foo 执行后，通常会期待函数 foo 的整个内部作用域被引擎回收机制销毁。而闭包可以阻止这件事情的发生。事实上内部作用域依然存在，因为函数 bar 本身在使用，所以并不会被回收。

在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

## 闭包的应用

无论何时何地，如果将函数作为返回值，就会看到闭包在这些函数中的应用。在定时器，事件监听器，ajax 请求，跨窗口通信，web workers 或者任何其他的异步/同步任务中，只要使用了回调函数，实际上就是使用闭包。使用闭包的例子可以参考实现节流防抖函数。

```js
var a = 'hzfe'
;(function IIFE() {
  console.log(a)
})()
```

通常认为立即执行函数（IIFE）是典型的观察闭包的典型例子，但严格来说并不是。虽然创建了闭包，但没有体现出闭包的作用。因为函数并不是在它本身的词法作用域以外执行的。 它在定义时所在的作用域中执行，而非外部作用域。

## 扩展

- [闭包 MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures)
- [垃圾回收机制](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors/Closed_Overlay_Requires_Arguments)
- [你不知道的 JavaScript](https://www.imooc.com/article/2907)
