Next.js的静态资源存储，将静态资源放到根目录的public文件夹下即可

Next.js - Static File Serving


Next.js 已经成为 React 应用程序最重要的框架之一。它可以帮助开发人员在没有模板的情况下构建更好的服务器端渲染 React 应用程序。

Next.js 之所以能成为目前最好的 React 框架之一，与其很多特性离不开，比如打包构建、路由预取、TypeScript、SEO 等。

对于那些想要拥有一个简单但功能强大的博客的人来说，使用 Next.js 创建博客是当今的最佳选择。

SEO（搜索引擎优化）是改进应用程序在搜索引擎排名的过程。对于任何想要在搜索引擎上获得更好排名并带来更多流量的博客来说，这都是非常重要的。

我们将在本文中使用 Next.js 来构建博客。我们将介绍 SSG（静态站点生成）的工作原理，并完成 SEO 友好的博客。

## 入门

使用官方推荐的`Create Next App`创建项目

```bash
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
```

为什么要使用`Create Next App`

- 交互式体验：不带任何参数运行`npx create-next-app@latest`，将会开启交互模式，引导创建项目
- 零依赖：`Create Next App`没有依赖，毫秒级创建项目
- 离线支持：`Create Next App`侦测网络状态，无网状态将使用本地依赖缓存
- 支持模板：通过加入`--example`参数，可以拉取官方仓库任何模板
- 集成测试：集成测试功能

创建完成后项目目录构造如下：

```bash
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── pnpm-lock.yaml
├── public
├── styles
└── tsconfig.json
```

## 安装依赖

```bash
pnpm install globby gray-matter dayjs @chakra-ui/react prismjs @emotion/react @emotion/styled framer-motion next-mdx-remote remark-gfm
```

## 创建文章

根目录新增`_posts`目录，在`_posts`目录下创建两个`mdx`文件(\_posts/js/helloWorld.mdx,\_posts/demo.mdx)，为什么是`mdx`文件呢？`mdx`支持渲染组件，支持引入导出组件，详细文档参考[MDX](https://mdxjs.com/)

## 创建公共函数目录

根目录新增`utils`目录，在`utils`目录下创建`getAllPosts.js`并写入如下函数

```js
import fs from 'fs'
import {globby} from 'globby'
import matter from 'gray-matter'
const dayjs = require('dayjs')
const relativeTime = require('dayjs/plugin/relativeTime')

dayjs.extend(relativeTime)

//获取所有文章
const GetAllPosts = async () => {
  const posts = await globby(['_posts'])
  return posts
    .reduce((prev, next) => {
      const fileContents = fs.readFileSync(next, 'utf8')
      const {data, content} = matter(fileContents)
      const postData = {
        ...data,
        group: dayjs(data.date).format('MMM/YYYY'),
        date: dayjs(data.date).format('MMM DD, YYYY'),
        fromNow: dayjs(data.date).fromNow(),
        modified: dayjs(data.modified).format('MMM DD, YYYY'),
        content,
        slug: next.replace(/^_posts\//, '').replace(/\.mdx$/, '')
      }
      !data.draft && prev.push(postData)
      return prev
    }, [])
    .sort((a, b) => dayjs(b.date) - dayjs(a.date))
}

// 根据slug导出文章
const GetPostBySlug = (slug) => {
  // eslint-disable-next-line no-undef
  return new Promise((resolve, reject) => {
    GetAllPosts()
      .then((posts) => {
        const post = posts.find((post) =>
          post.slug.includes(`${slug.join('/')}`)
        )
        resolve(post)
      })
      .catch(() => {
        reject({})
      })
  })
}

export {GetAllPosts, GetPostBySlug}
```

## 创建组件

根目录新增`components`目录

1. 创建`PostPage.tsx`组件，内容如下：

```tsx
import React, {useEffect} from 'react'
import Prism from 'prismjs'
import {Box} from '@chakra-ui/react'

// 以下按需引入
require('prismjs/components/prism-go')
require('prismjs/components/prism-python')
require('prismjs/components/prism-javascript')
require('prismjs/components/prism-css')
require('prismjs/components/prism-bash')
require('prismjs/components/prism-swift')
require('prismjs/components/prism-tsx')
require('prismjs/components/prism-jsx')
require('prismjs/components/prism-typescript')
require('prismjs/components/prism-sql')
require('prismjs/themes/prism-okaidia.min.css')

const PostPage = ({children}) => {
  useEffect(() => {
    const highlight = async () => {
      await Prism.highlightAll()
    }
    highlight().then(() => {})
  }, [children])
  return (
    <Box position="relative" w="2/3" fontSize="text.sm">
      {children}
    </Box>
  )
}
export default PostPage
```

2. 创建`pages/index.tsx`

```tsx
import NextLink from 'next/link'
import {Fragment} from 'react'
import {
  List,
  LinkOverlay,
  ListItem,
  Container,
  Heading,
  Image
} from '@chakra-ui/react'

const IndexPage = ({groupByMonthPosts}) => {
  return (
    <Container>
      {Object.keys(groupByMonthPosts).map((group) => {
        return (
          <Fragment key={group}>
            <Heading as="h3" mt={12} mb={4}>
              {group}
            </Heading>
            <List spacing={3}>
              {groupByMonthPosts[group].map((post) => {
                return (
                  <ListItem
                    position="relative"
                    display="flex"
                    gap={2}
                    alignItems="center"
                    key={post.title}
                  >
                    <NextLink legacyBehavior href={`/${post.slug}`} passHref>
                      <LinkOverlay>{post.title}</LinkOverlay>
                    </NextLink>
                    {post.tags.map((tag) => {
                      return (
                        <Image
                          key={tag}
                          boxSize={4}
                          objectFit="cover"
                          alt={tag}
                          src={`https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/icons/${tag}.svg`}
                        />
                      )
                    })}
                  </ListItem>
                )
              })}
            </List>
          </Fragment>
        )
      })}
    </Container>
  )
}

export default IndexPage

export async function getStaticProps() {
  const {GetAllPosts} = await import('utils/getAllPosts')
  const posts = await GetAllPosts()
  const groupByMonthPosts = posts.reduce((prev, next) => {
    if (Array.isArray(prev[next.group])) {
      prev[next.group].push(next)
    } else {
      prev[next.group] = []
      prev[next.group].push(next)
    }
    return prev
  }, {})
  return {
    props: {
      groupByMonthPosts
    }
  }
}
```

3. 创建`pages/[...slug].tsx`

```tsx
import {MDXRemote} from 'next-mdx-remote'
import {serialize} from 'next-mdx-remote/serialize'
import dynamic from 'next/dynamic'
import ErrorPage from 'next/error'
import NextLink from 'next/link'
import {useRouter} from 'next/router'
import React from 'react'
import remarkGfm from 'remark-gfm'
import components from 'utils/components'
import {
  Container,
  Box,
  Heading,
  Text,
  Link,
  Image,
  Center
} from '@chakra-ui/react'

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

const Post = ({title, description, date, originalUrl, mdxSource, cover}) => {
  const router = useRouter()
  if (!router.isFallback && !mdxSource) {
    return <ErrorPage statusCode={404} />
  }
  return (
    <Container
      mt={20}
      maxW={{
        sm: 'container.sm',
        md: 'container.md',
        lg: 'container.2xl',
        xl: 'container.xl'
      }}
      className="post"
    >
      <NextSeo
        title={title}
        description={description}
        openGraph={{title, description}}
      />
      <Box as="hgroup">
        <Text textAlign="center" color="gray.500" fontSize="xs" as="p">
          Published {date}
        </Text>
        <Heading textAlign="center" as="h1" mt={4} mb={2}>
          {title}
        </Heading>
        {originalUrl && (
          <Center color="gray.500" fontSize="sm" mb={8}>
            本文翻译自：
            <NextLink legacyBehavior href={originalUrl} passHref>
              <Link>{originalUrl}</Link>
            </NextLink>
          </Center>
        )}
      </Box>
      <Image
        boxSize="100%"
        src={
          cover ??
          'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/NhSU3O.jpg'
        }
        alt={title}
      />

      <PostPage>
        <MDXRemote {...mdxSource} components={components} />
      </PostPage>
    </Container>
  )
}

export const getStaticPaths = async () => {
  const {GetAllPosts} = await import('utils/getAllPosts')
  const allPosts = await GetAllPosts()
  const paths = allPosts.map((post) => ({
    params: {
      slug: post.slug.split('/')
    }
  }))

  return {
    paths,
    fallback: false
  }
}

export const getStaticProps = async ({params}) => {
  const {GetPostBySlug} = await import('utils/getAllPosts')
  const {content, ...data} = await GetPostBySlug(params.slug)
  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [[remarkGfm]],
      rehypePlugins: []
    },
    scope: data
  })
  return {
    props: {
      ...data,
      mdxSource
    }
  }
}

export default Post
```

至此，基本框架搭建完成，接下来调整样式及组件的引入，以及 mdx 渲染修正。

4. 调整样式

**可选**

引入`tailwind.css`，执行`pnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p`

修改`tailwind.config.js`,如下：

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}
```

修改全局样式`styles/globals.scss`

```scss
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**必须**

修改`pages/_app.tsx`，引入`chakra-ui`的配置

```tsx
// pages/_app.js
import {ChakraProvider} from '@chakra-ui/react'

function MyApp({Component, pageProps}) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp
```

到这里，不出意外，你的界面应该是长这样

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

点击链接，应该会报错，未引入`utils/components`，这个是配置 mdx 内元素渲染的组件，参考[MDX Components](https://mdxjs.com/table-of-components/)，mdx 提供默认的渲染组件，所以，这个是非必须的，不需要删除即可

个人比较喜欢 chakra-ui，所以将组件都转成了 chakra-ui 提供的组件，配置如下：

```js
import CanIUse from 'components/CanIUse'
import {Heading, Link, Box} from '@chakra-ui/react'
import {FiExternalLink} from 'react-icons/fi'

const components = {
  CanIUse,
  h2: (props) => (
    <Heading as="h2" mb={4}>
      {props.children}
    </Heading>
  ),
  h3: (props) => (
    <Heading as="h3" mb={4}>
      {props.children}
    </Heading>
  ),
  h4: (props) => (
    <Heading as="h4" mb={4}>
      {props.children}
    </Heading>
  ),
  h5: (props) => (
    <Heading as="h5" mb={4}>
      {props.children}
    </Heading>
  ),
  p: (props) => (
    <Box as="div" mb={4}>
      {props.children}
    </Box>
  ),
  div: (props) => <Box mb={4}>{props.children}</Box>,
  a: (props) => {
    return (
      <Link
        display="inline-flex"
        alignItems="center"
        href={props.href}
        gap={2}
        isExternal
      >
        {props.children}
        <FiExternalLink />
      </Link>
    )
  }
}

export default components
```

好了，到这里基本完成了基于 Next.js 的博客搭建。

## 部署到 Vercel

Next.js 部署到 Vercel 无需更改和配置，无缝衔接。

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

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

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

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

[【Source Code】](https://github.com/Manonicu/blog-demo)

也可以参考我的个人网站[Manon.icu](https://manon.icu/)[Github Source Code](https://github.com/Manonicu/site)


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

Next.js - Building a blog


## 字符串的定义：

Swift 中可以使用两种方式来定义字符串：

- 使用双引号("")将字符串括起来。
- 使用三个双引号(""")来定义多行字符串。
  例如：

```swift
let str1 = "Hello, world!" // 使用双引号定义字符串
let str2 = """
This is a
multi-line
string.
""" // 使用三个双引号定义多行字符串
```

Swift 中的字符类型（Character）表示一个单独的字符，通常用于表示一个字母、数字、符号或空格等单个文本字符。

## 字符的定义：

Swift 中使用单引号('')来定义字符，例如：

```swift
let char1: Character = "A" // 定义单个字符
```

在字符串中，可以使用字符的集合来表示一段文本。例如：

```swift
let str3 = "Swift"
for char in str3 {
print(char)
}
```

上述代码会输出字符串 "Swift" 中的每个字符，即 "S"、"w"、"i"、"f"、"t"。

Swift 中的字符串和字符类型还支持各种文本处理功能，例如拼接、截取、查找、替换、转换大小写等。这些功能可通过使用字符串和字符类型的内置方法和属性来实现。

以下是一些常见的字符串和字符处理方法和属性的示例：

## 字符串拼接

可以使用加号运算符（+）将两个字符串连接起来。例如：

```swift
let str1 = "Hello"
let str2 = "world"
let str3 = str1 + " " + str2 // "Hello world"
```

## 字符串截取

可以使用下标操作符([])和 range(范围)操作符(...和..\<)从字符串中截取一段子字符串。例如：

```swift
let str = "Hello, world!"
let subStr1 = str[..<5] // "Hello"
let subStr2 = str[7...] // "world!"
let subStr3 = str[7..<12] // "world"
```

## 字符串查找

可以使用内置的 contains() 方法查找字符串是否包含某个子字符串，也可以使用 range(of: String) 方法查找子字符串的范围。例如：

```swift
let str = "Hello, world!"
let hasWorld = str.contains("world") // true
let range = str.range(of: "world") // Range<String.Index>(7..<12)
```

## 字符串替换

可以使用 replaceSubrange() 方法替换字符串中的一段子字符串。例如：

```swift
var str = "Hello, world!"
str.replaceSubrange(7..<12, with: "Swift") // "Hello, Swift!"
```

## 字符串大小写转换

可以使用 uppercased() 方法将字符串中的所有字符转换为大写，使用 lowercased() 方法将其转换为小写。例如：

```swift
let str = "Hello, world!"
let upperStr = str.uppercased() // "HELLO, WORLD!"
let lowerStr = str.lowercased() // "hello, world!"
```

## 字符串和数字类型的相互转换

可以使用 String() 方法将数字类型转换为字符串，使用 Int()、Float() 或 Double() 等方法将字符串转换为相应的数字类型。例如：

```swift
let num = 123
let str = String(num) // "123"

let str2 = "3.14"
let floatNum = Float(str2) // 3.14
```


字符串（String）是一种用于存储和操作文本的类型。字符串由一系列字符（Character）组成，可以包含字母、数字、符号和空格等文本字符。Swift 的字符串类型是可变的（Mutable），可以修改其值。

Swift - 字符、字符串


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

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

- 基本介绍
- 浏览器兼容性
- 启用 Flexbox
- 容器属性
  - 行||列 对齐 ==row and columns==
  - 水平||垂直 对齐 ==Vertical and horizontal==
  - 更改水平对齐 ==change horizontal alignment==
  - 更改垂直对齐 ==change vertical alignment==
    - 关于基准线 ==about baseline==
  - 换行 ==wrap==
- flex 元素上的属性
  - order
  - align-self
  - flex-grow
  - flex-shrink
  - flex-basis
  - flex

### 介绍

Flexbox，也称为灵活盒模块，是两个现代布局系统之一，还有 css Grid。与 css Grid（二维）相比，flexbox 是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。flexbox 的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。Flexbox 不兼容 IE10 以下，IE10 以下可以使用如下方式：

- Table layouts
- Floats
- clearfix hacks
- display: table hacks

### 兼容性

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

IE10 以下不兼容，一些浏览器需要使用-webkit 或者 display:-webkit-box 兼容处理。

### 使用 flexbox

```css
display: flexbox;
```

或者

```css
display: inline-flexbox;
```

### 容器属性

- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow

### 行对齐或者列对齐

flex-direction 决定容器以行对齐还是列对齐。

- flex-direction:row，行对齐，从左到右
- flex-direction:row-reverse，行对齐，从右到左
- flex-direction:column，列对齐，从上到下
- flex-direction:column-reverse，列对齐，从下到上

如下图所示：

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

### 水平对齐或者垂直对齐

flex-direction 默认是 row，从左向右，当其属性值为 column 时，是从上到下，可以使用 justify-content 和 align-items 改变水平和垂直对齐。

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

### 改变水平对齐方式

justify-content 有 5 个属性值：

1. flex-start 左对齐
2. flex-end 右对齐
3. center 居中对齐
4. space-between 首尾对齐容器左右侧，中间间距相等
5. space-around 每个元素的间距相等

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

### 改变垂直对齐方式

align-items 有 5 个属性值：

1. flex-start 顶部对齐
2. flex-end 底部对齐
3. center 居中对齐
4. baseline 基线对齐
5. stretch 拉伸以适应容器

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20181022141409.png)

关于 align-items:baseline，可以看看 codepen：[https://codepen.io/flaviocopes/pen/oExoJR](https://codepen.io/flaviocopes/pen/oExoJR)

### 换行

默认情况下，flexbox 容器中的项目保留在一行中，缩小它们以适合容器。

可以使用 flex-wrap:wrap 或者 flex-wrap:wrap-reverse 对容器中的元素进行换行处理。

一种简写方式：flex-flow:row wrap;即 flex-direction:row && flex-wrap:wrap

### 适用于 flexbox 容器内每个元素的属性

1. order
2. align-self
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex

#### order-改变元素的顺序，如下图所示，可以指定某个元素的 order 值，以改变其位置，默认值为 0

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20181022142507.png)

#### align-self-元素使用 align-self 覆盖容器的 align-items 对当前元素的对齐方式

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20181022142842.png)

#### flex-grow || flex-shrink 如有必要，可以增加或缩小某个元素

flex-grow：默认值为 0，当某个元素 flex-grow 为 1，另一个为 2，则为 flex-grow：2 的元素占用 flex-grow:1 的空间的 2 倍。

flex-shrink：默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。

比如：有这么一个容器，div>.box1*3+.box2*2 父容器定义宽度为 500px，子元素定义宽度为 120px，box1 的 flex-shrink 为 1，.box2 的 flex-shrink 为 2，那么子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 100*1+100*1+100*1+100*2+100\*2=700px。

```
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px
```

#### flex-basis-用于设置或检索弹性盒伸缩基准值，默认值为 auto，其与 width 的区别可以参考这篇文章：https://www.jianshu.com/p/17b1b445ecd4

#### flex：有三个属性值

1. flex-grow
2. flex-shrink
3. flex-basis

```css
flex: 0 1 auto 分别对应flex-grow、flex-shrink、flex-basis;
```

## 结尾

友情献上小游戏，通过游戏学习 flexbox

http://flexboxfroggy.com/#zh-cn


Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

Flexbox指南


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

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


闭包是一种自包含的函数，可以在代码中被传递和使用。闭包可以捕获和存储其所在上下文中的任何常量和变量的引用，因此被称为闭包，因为它们会封闭这些变量。Swift 中的闭包与 C 和 Objective-C 中的块（blocks）以及其他一些编程语言中的匿名函数类似。

以下是一个简单的示例，用于排序一个字符串数组：

```swift
let names = ["Chris", "Alex", "Ewa", "Barry", "Daniella"]

func backward(_ s1: String, _ s2: String) -> Bool {
  return s1 > s2
}

var reversedNames = names.sorted(by: backward)
```

在上面的示例中，backward 函数接受两个字符串参数，比较它们的大小，并返回一个布尔值，表示第一个字符串是否在第二个字符串之后。sorted 函数接受一个闭包作为参数，并使用该闭包对数组进行排序。由于 backward 函数符合 sorted 函数要求的类型，因此可以将 backward 函数作为 sorted 函数的参数传递。

在 Swift 中，可以使用闭包表达式来定义闭包。闭包表达式使用一对花括号（{}）来定义，并且在花括号中可以指定参数列表、返回类型和函数体。

以下是使用闭包表达式进行排序的示例：

```swift
let names = ["Chris", "Alex", "Ewa", "Barry", "Daniella"]

var reversedNames = names.sorted(by: { (s1: String, s2: String) -> Bool in
  return s1 > s2
})
```

在上面的示例中，sorted 函数的参数是一个闭包表达式。闭包表达式包含了与 backward 函数相同的代码，但是这些代码被写成了更简单的形式。闭包表达式使用一对花括号来定义闭包，并指定参数列表和返回类型。在闭包体中，可以使用 return 关键字来返回值。

Swift 中的闭包还有以下特点：

- 闭包表达式可以从上下文中推断出参数类型和返回类型，因此可以省略它们。
- 闭包表达式可以使用简写参数名，用 $0、$1、$2 等来代替参数名。
- 如果闭包表达式只包含一行代码，可以省略 return 关键字。
- 可以将闭包表达式作为函数的最后一个参数传递，并将其放在圆括号外面，以提高可读性。
  以下是使用闭包表达式进行排序的更简单的示例：

```swift
let names = ["Chris", "Alex", "Ewa", "Barry", "Daniella"]

var reversedNames = names.sorted(by: { $0 > $1 })
```

Swift 中的闭包是非常有用的工具，可以使代码更加简洁、可读和易于维护。


闭包是一种自包含的函数，可以在代码中被传递和使用

Swift - 闭包


`child_process` 模块使我们在一个运行良好的子进程内运行一些能够进入操作系统的命令

## spawn

`spawn`创建一个子进程

语法：`spawn(command, [args], [options])`

```js
const {spawn} = require('child_process')
const fs = require('fs')

for (var i = 0; i < 3; i++) {
  var workerProcess = spawn('node', ['support.js', i])
  workerProcess.stdout.on('data', function (data) {
    console.log('stdout: ' + data)
  })
  workerProcess.stderr.on('data', function (data) {
    console.log('stderr: ' + data)
  })
  workerProcess.on('close', function (code) {
    console.log('child process exited with code ' + code)
  })
}
```

## exec

`exec`使用子进程执行命令，不缓存子进程的输出，并将子进程的输出以回调函数参数的形式返回

语法：`exec(command, [options], callback)`

```js support.js
console.log('进程 ' + process.argv[2] + ' 执行。')
```

```js master.js
const fs = require('fs')
const child_process = require('child_process')

for (var i = 0; i < 3; i++) {
  var workerProcess = child_process.exec(
    'node support.js ' + i,
    function (error, stdout, stderr) {
      if (error) {
        console.log(error.stack)
        console.log('Error code: ' + error.code)
        console.log('Signal received: ' + error.signal)
      }
      console.log('stdout: ' + stdout)
      console.log('stderr: ' + stderr)
    }
  )

  workerProcess.on('exit', function (code) {
    console.log('子进程已退出，退出码 ' + code)
  })
}
```

## fork

`fork`创建一个子进程，并在父进程中继续执行

语法：`fork(modulePath, [args], [options])`

```js support.js
console.log('进程 ' + process.argv[2] + ' 执行。')
```

```js master.js
const fs = require('fs')
const child_process = require('child_process')

for (var i = 0; i < 3; i++) {
  var worker_process = child_process.fork('support.js', [i])

  worker_process.on('close', function (code) {
    console.log('子进程已退出，退出码 ' + code)
  })
}
```

[Node.js 文档](http://nodejs.cn/api/child_process.html)


child_process 模块使我们在一个运行良好的子进程内运行一些能够进入操作系统的命令