官方文档 [Getting Started | Next.js (nextjs.org)](https://nextjs.org/docs/getting-started)

## [安装](https://nextjs.org/docs/getting-started#automatic-setup)

```bash
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts
```

运行

```
npm run dev
```

访问 http://localhost:3000

## 项目结构

![image-20220712030637300](https://img.kuizuo.cn/image-20220712030637300.png)

| 文件           | 内容                 |
| -------------- | -------------------- |
| pages          | 页面文件             |
| pages/api      | api 数据接口         |
| public         | 静态资源文件         |
| styles         | 样式文件             |
| next-env.d.ts  | 确保 typescript 支持 |
| next.config.ts | next 配置文件        |

## 路由

nextjs 有一个基于页面概念的文件系统路由器，存放在 pages 下`.js`, `.jsx`, `.ts`, `.tsx` 文件都将作为组件，即**文件路径 → 页面路由**，例如这里的 index.tsx 映射为 index，`pages/about.js` 将映射为 `/about`。

同时还支持动态路由，创建`pages/user/[id].tsx`文件，然后访问`user/1`，`user/2`

```tsx title="[id].tsx"
import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <div>User id:{id} </div>
}

export default User
```

此时访问 http://localhost:3000/user/1 便可得到 `User ID: 1`

在 router 对象下没有 param 属性，都是存放在 query 参数中，例如访问 user/1?username=kuizuo，此时的 query 值为 `{username: 'kuizuo', id: '2'}`

:::tip

不过这里有个比较有意思的点，如果你在上方代码中使用 console.log 打印 query 的话，在 vscode 中会打印出空对象`{}`，而在浏览器中会打印一次空对象，一次真实的 query 对象（并且打印两遍）

![image-20220712191356587](https://img.kuizuo.cn/image-20220712191356587.png)

:::

## 数据渲染

如果你打开控制台，查看所返回的页面，你会发现响应中只有 User id:，这不就和 react 的 CSR(客户端)渲染没有区别吗，是的，确实是这样。因为上一部分的代码，并且从输出 query 也可以看的出来而不是 SSR(服务端)渲染。首先我要展示一下两者渲染的代码

### CSR 客户端渲染

```tsx title="[id].tsx"
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  const [data, setData] = useState({
    username: '',
    email: '',
  })

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(res => res.json())
      .then(data => {
        setData(data)
      })
      .catch(err => {})
  }, [id])

  return (
    <div>
      <p>username:{data.username} </p>
      <p>email:{data.email} </p>
    </div>
  )
}

export default User
```

经常写 react 的肯定对上面的代码不陌生，前端向后端发送数据请求，接受到数据后赋值给 data，然后渲染出来。因为请求数据是需要耗时的，所以在页面显示完之后，会停顿一会在显示出数据（主要是我这边没写 loadding），并且由于 id 并不是第一时间获取到的（从上面的 id）。

![image-20220712193009186](https://img.kuizuo.cn/image-20220712193009186.png)

从这里来看，客户端渲染不仅要获取页面组件，还要请求数据，最终再通过 js 渲染出来

### SSR 服务端渲染

next 中服务端渲染需要用到 getServerSideProps 函数，而后端的数据获取都是在该函数内来获取，并通过 prop 传入给前端组件中，来看实际代码

```tsx title="[id].tsx"
const User = ({ data }: { data: any }) => {
  return (
    <div>
      <p>username:{data.username} </p>
      <p>email:{data.email} </p>
    </div>
  )
}

export default User

export async function getServerSideProps(context: { query: { id: any } }) {
  const { id } = context.query // 这里context.param也能获取到id

  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)

  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}
```

如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。

首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。

![image-20220712192713634](https://img.kuizuo.cn/image-20220712192713634.png)

同时查看控制台中的 Fetch/XHR 的是看不到请求的数据，因为这些数据并不是由前端发送的,而是由后端发送的（故不受跨域请求的限制）。

从这就能看出客户端渲染与服务端渲染的的区别了。

### SSG 静态生成

不过还没完，还有一个静态生成，先来看看代码。

```tsx title="[id].tsx"
const User = ({ data }: { data: any }) => {
  return (
    <div>
      <p>username:{data.username} </p>
      <p>email:{data.email} </p>
    </div>
  )
}

export default User

export async function getStaticProps(context: { params: { id: any } }) {
  const { id } = context.params

  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)

  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

export async function getStaticPaths() {
  return {
    paths: new Array(20).fill(0).map((a, i) => ({ params: { id: String(i + 1) } })),
    fallback: 'blocking',
  }
}
```

主要是 getServerSideProps 替换成 getStaticProps，同时增加了一个 getStaticPaths 用于生成静态页面的，而上面的 getStaticPaths 表示生成 id 1 到 20 的页面，那假设如果我访问 id 为 21 的 user 呢？由于这里设置`fallback: 'blocking'`，所以还是会走服务端渲染的那一部分。但如果设置`fallback: fasle`，访问 user/21 就会提示 404。

通俗点来说就就是生成一系列静态页面，不需要服务端处理，所以返回的速度更快，其缺点其实也比较明显，数据的任何更改都需要在服务端重新构建，而服务端渲染则是可以动态处理数据，不需要完全重建。

### ISR 增量式静态生成

不做过多介绍，详看文档 [Data Fetching: Incremental Static Regeneration | Next.js (nextjs.org)](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)

## api 接口

上面的数据都是调用 [JSONPlaceholder](http://jsonplaceholder.typicode.com/) 所提供的虚拟数据，在 next 中要提供数据接口的话，只需要在 pages/api 下编写即可，生成的路由规则和组件一样。例如 pages/api/hello.ts 映射为 api/hello，浏览器访问[http://localhost:3000/api/hello](http://localhost:3000/api/hello) 就可以得到`{"name": "John Doe"}`

```tsx title="hello.ts"
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  res.status(200).json({ name: 'John Doe' })
}
```

这里的 req、res 就是同大部分 node 后端框架一样，而这里的写法与 serverless 一致（这里应该就是 serverless）。

上述是 get 请求，那 post 请求呢？无论什么 http 请求方法都将在 handler 处理，通过 req.method 来获取请求方法，要区分的话可以通过如下代码。

```tsx
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}
```

### 写一个简单的 CRUD

既然知道了上述的一些作用，不妨来个熟悉的 CRUD。这里以文章 post 为例

这里数据端使用的时 sqlite，配置不做展示，只展示主要核心功能

```typescript title="api/post/index.ts"
import type { NextApiRequest, NextApiResponse } from 'next'
import db from '../../../lib/db'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    switch (req.method) {
      case 'GET':
        db.all(`select * from post`, (err, rows) => {
          res.status(200).json(rows)
        })
        break
      case 'POST':
        const { title, content } = req.body

        db.get(`insert into post(title, content) values(?, ?)`, [title, content], (err, rows) => {
          res.status(200).json(rows)
        })
        break
    }
  } catch (error) {
    res.status(500).end()
  }
}
```

```typescript title="api/post/[id].ts"
import type { NextApiRequest, NextApiResponse } from 'next'
import db from '../../../lib/db'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { id } = req.query
  const { title, content } = req.body

  try {
    switch (req.method) {
      case 'GET':
        db.get(`select * from post where id=$id`, { $id: id }, (err, rows) => {
          res.status(200).json(rows)
        })
        break
      case 'Put':
        db.get(
          `update post set title=?,content=? where id=?`,
          [title, content, id],
          (err, rows) => {
            res.status(200).json(rows)
          },
        )
      case 'DELETE':
        db.get(`delete from post where id=$id`, { $id: id }, (err, rows) => {
          res.status(200).json(rows)
        })
    }
  } catch (error) {
    res.status(500).end()
  }
}
```

这里为了符合 RESTFUL 风格，所以 post 下编写了两个文件，这时候请求[http://localhost:3000/api/post](http://localhost:3000/api/post/2) 就能获取到所有文章数据，基本的 CRUD 也就实现了。

这里写 sql 是真滴繁琐，没使用 str 或是 typeorm 主要是不想把这个 demo 搞得太复杂，实际项目还是用上比较好。

当然这里只是作为后端 api 接口的演示，至于前端的展示与编写就和普通前端开发没啥大的区别。基本后端框架能做的，next 能做后端很多事情，更多的使用还是作为接口转发，中间件等，毕竟 Next 主要的强项还是服务端渲染的能力。

## 打包部署

既然说到部署，那肯定离不开 nextjs 的母公司[Vercel](https://vercel.com)了，关于 Vercel 之前也写过相关文章，关于 Vercel 就不过多介绍。

nextjs 部署到 vercel 实在简单，将项目推送到 github 仓库中，然后在 vercel 中 New Project，接着选择 nextjs 的仓库，点击 Deploy，静等部署即可。关于部署可以看这篇文章 [Vercel 部署个人博客](https://kuizuo.cn/develop/Vercel部署个人博客)

现在你可以通过访问 [kz-next-app-demo.vercel.app](https://kz-next-app-demo.vercel.app/) 来访问该项目，并尝试访问`/api/post`，`user/1`来看看。

只能说不愧是母公司。

至于其他部署？既然都用 nextjs 了，还考虑自建服务器来部署吗？

## 总结

这次的整体过程比较简单，后续应该会使用 nextjs 编写一个完整的项目（~~也有可能是 nuxt.js~~)。

Next.js项目搭建与部署

写一个 VSCode 扩展

当我使用笔记本的时候，每次移动光标，都要大费周章，同时由于笔记本的缘故，导致键入Home与End都需要搭配Fn功能键来实现。所以我希望在任何情况下（敲代码，写文章）都可以将某些组合键绑定为上下左右键，在代码编辑器上有键盘映射可以设置，但脱离代码编辑器就不起作用了，在window下有个神器 [AutoHotkey](https://www.autohotkey.com/) 可以实现我想要的功能。



## 安装

打开[官网](https://www.autohotkey.com/)，点击Download，安装即可。

## 使用

安装完成后，右键新建会AutoHotKey Srcipt后缀为ahk。例如创建demo.ahk，其内容如下

```ahk
<+<!I::Send {Up} 
<+<!K::Send {Down} 
<+<!J::Send {Left} 
<+<!L::Send {Right} 
<+<!H::Send {Home} 
<+<!;::Send {End} 
```

然后保存双击该文件，即可运行autohotkey，此时打开任意文本，键入<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + [HIJKL;] 就可以看到光标上下左右移动。

这里对上面语法进行讲解

| 键名  | 热键标识 |
| ----- | -------- |
| Ctrl  | ^        |
| Shift | +        |
| Alt   | !        |
| Win   | #        |

如果要针对左右Ctrl或Shfit只需要在前面添加`<` `>` 。`::`则作为映射关系，左边的按键作用于何种指令，而右侧则是左侧按键所对应的指令，这里的指令相对简单，只是发送键盘上下左右的关系，指令还可以实现信息框MsgBox 启动应用等等。具体还有更多键盘与鼠标热键详情可在AutoHotkey Help手册中查看，非常详细，不过是英文。

具体要映射的快捷键可自行发挥，但要切记不建议与常用快捷键冲突，例如上面为何是IJKL而不是WASD，其原因会导致快捷键冲突。

此外AutoHotkey不仅能做键盘映射，实现宏定义，一键启动任务也不成问题，篇幅有限，就不做过多演示，有兴趣可自行研究。

AutoHotkey键盘映射

在线运行 TypeScript [https://www.typescriptlang.org/play](https://www.typescriptlang.org/play)

## typeof

```typescript
typeof val
```

获取对象的类型

1. 已知一个 javascript 变量，通过 typeof 就能直接获取其类型

```typescript
const str = 'foo'
typeof str === 'string' // true

const user = {
  name: 'kuizuo',
  age: 12,
  address: {
    province: '福建',
    city: '厦门',
  },
}

type User = typeof user
// {
//   name: string;
//   age: number;
//   address: {
//      province: string;
//      city: string;
//   };
// }

type Address = (typeof user)['address']
// {
//    province: string;
//    city: string;
// }
```

2. 获取函数的类型（参数类型与返回值类型）

```typescript
function add(a: number, b: number): number {
  return a + b
}

type AddType = typeof add
// (a: number, b: number) => number

type AddReturnType = ReturnType<typeof add>
// number

type AddParameterType = Parameters<typeof add>
// [a: number, b: number]
```

## keyof

```typescript
keyof T
```

获取 T 类型中的所有 key，类似与 Object.keys(object)

根据 key 获取对象其属性的例子

```typescript
function getProperty<T extends object, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}
```

上面代码有很好的代码提示，并且如果获取的 key 不在其对象中，将会直接报错。

对于一些常用类型的 keyof 值

```typescript
type K0 = keyof string
// number | typeof Symbol.iterator | "toString" | "charAt" | ... more
type K1 = keyof boolean
// "valueOf"
type K2 = keyof number
// "toString" | "valueOf" | "toFixed" | "toExponential" | "toPrecision" | "toLocaleString"
type K3 = keyof any
// string | number | symbol
```

## 交叉类型

& 交叉运算符

类似集合中的交集，满足以下特性

1. 唯一性：A & A 等价于 A
2. 满足交换律：A & B
3. 满足结合律：(A & B) & C 等价于 A & (B & C)
4. 父类型收敛：如果 B 是 A 的父类型，那么 A & B 将收敛为 A 类型.

任何与 never 交叉的类型都是 nerver，any 交叉的类型为 any（除了 nerver）

```typescript
type A0 = any & 1 // any
type A1 = any & boolean // any
type A2 = any & never // never

type A3 = string & number // never
```

## 映射类型

```typescript
{ [P in K]: T }
```

其中 in 类似与 for ...in 语句，而 T 类型表示任意类型。遍历 K 类型的所有 key，生成 P : T，例如

```typescript
interface Todo {
  title: string
  description: string
  completed: boolean
}

type Demo<T> = { [P in keyof T]: T }
type Todo1 = Demo<Todo>
// {
//   title: string
//   description: string
//   completed: boolean
// }
```

上面代码看似没有任何映射关系，因为在映射类型中可以给对其添加`readonly `和 `?` 只读与可选修饰符，以及`+` `-` 增加与删除修饰符（默认为+）例如

```typescript
{ [ P in K] :T }
{ [ P in K] ?:T }
{ [ P in K] -?:T }

{ readonly [ P in K] :T }
{ readonly [ P in K] ?:T }
{ -readonly [ P in K] ?:T }

```

就可以实现一些 TypeScript 的内置工具类（给对象属性只读，可选等等）

```typescript
type MyPick<T, K extends keyof T> = {
  [P in K]: T[P]
}

type MyPartial<T> = {
  [P in keyof T]?: T[P]
}

type MyRequired<T> = {
  [P in keyof T]-?: T[P];
}

type MyReadonly<T> = {
  readonly [P in keyof T]: T[P]
}

...
```

## 条件类型

```typescript
T extends U ? X : Y
```

其代码语法类似与三元运算符，

1. 如果 T 和 U 都为基本类型两侧相同，则 extends 在语义上可以理解为 ===

```typescript
type Demo1 = 'foo' extends 'bar' ? true : false // false
type Demo2 = 'c' extends 'c' ? true : false // true
```

2. 若位于 extends 右侧的类型包含位于 extends 左侧的类型(即**狭窄类型 extends 宽泛类型**)时，结果为 true，反之为 false。

```typescript
type Demo3 = string extends string | number ? true : false // true
```

3. 当 extends 作用于**对象**时，若在对象中指定的 key 越多，则其类型定义的范围越狭窄。

```typescript
type Demo4 = { a: true; b: false } extends { a: true } ? true : false // true
```

4. 作用于联合类型中，且 T 为**裸类型参数**(无`T[] [T] Promise<T>` 等类型包装过)，那么则为**分布式条件类型**，对于该类型来说，当 T 为联合类型时，运算过程会被分解为多个分支（类似于乘法分配律），那么返回的类型也将是多个类型。

分布式条件类型的特点：“裸”类型、类型参数、联合类型参数会触发分支。

```typescript
type Demo5<T, U> = T extends U ? never : T
type Demo6 = Demo5<'a' | 'b' | 'c' | 'd', 'c' | 'd'> // 'a' | 'b'
```

例如上面定义的 Demo5，其实也就是 TypeScript 内置工具类的[`Exclude<UnionType, ExcludedMembers>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#excludeuniontype-excludedmembers)的实现，所返回的结果是 `'a' | 'b'`，其内部的实现相当于

```typescript
'a' extends 'c' | 'd' ? never : 'a' // 'a'
'b' extends 'c' | 'd' ? never : 'b' // 'b'
'c' extends 'c' | 'd' ? never : 'c' // never
'd' extends 'c' | 'd' ? never : 'd' // never
// 执行四次条件类型,最终合并得到 'a' | 'b'

```

但如果 T 不能**裸类型参数**类型，那么便不会做**分布式条件类型**，返回的结果便只有一个。

## 类型推断

```typescript
type Demo<T> = T extends (infer U)[] ? U : T
```

如果 T 为`string[]`类型，那么 infer 可以推导出 U 为 string 类型

注：infer 只能在**条件类型的`extends`子句**中才允许`infer`声明，且只能**在条件分支中 true 中**使用

下列语句都将报错

```typescript
type Wrong1<T extends (infer U)[]> = T[0]

type Wrong2<T> = (infer U)[] extends T ? U : T

type Wrong3<T> = T extends (infer U)[] ? T : U
```

一些例子

```typescript
type Unpacked<T> = T extends (infer U)[]
  ? U
  : T extends (...args: any[]) => infer U
  ? U
  : T extends Promise<infer U>
  ? U
  : T

type T0 = Unpacked<string> // string
type T1 = Unpacked<string[]> // string
type T2 = Unpacked<() => string> // string
type T3 = Unpacked<Promise<string>> // string
type T4 = Unpacked<Promise<string>[]> // Promise<string>
type T5 = Unpacked<Promise<string> | string> // string | Promise<string>
```

通过 infer 就可以推导出函数的参数类型与返回值类型

```typescript
const fn = (v: boolean) => {
  if (v) return 1
  else return 2
}

type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : any

type MyParameterType<T> = T extends (...args: infer P) => any ? P : any

type FnReturnType = MyReturnType<typeof fn>
// 1 | 2
type FnParameterType = MyParameterType<typeof fn>
// [v: boolean]
```

## 声明文件

我个人习惯会在根目录创建 types 文件夹，里面存放 d.ts 声明文件，同时 tsconfig.json 中配置 `"include": ["src/**/*.ts", "types/**/*.d.ts"]`

创建一个全局声明文件`global.d.ts`，使用 declare 关键字来声明

```typescript title="global.d.ts"
declare module 'foo' {
  export var bar: number
}
```

此时就可以在其他文件中`import * as foo from 'foo'`，即便没有安装 foo 模块，但是 foo 依然有 bar 属性提示，这在一些第三方使用 js 所编写的库中经常遇到。在例如我想给我的 axios 封装些自己定义的代码，同时还带有类型提示，那么就可以使用声明文件，如下

```typescript title="global.d.ts"
import * as axios from 'axios'

declare module 'axios' {
  export interface Axios {
    myget: (url: string, config?: AxiosRequestConfig) => Promise<AxiosResponse>
  }
}
```

```typescript title="demo.ts"
import axios, { AxiosRequestConfig } from 'axios'

axios.myget = async (url: string, config?: AxiosRequestConfig) => {
  console.log(url)
  return axios.get(url, config)
}
```

## type 和 interface 区别

### 相同点

1. 都可以用来描述对象或函数

2. 类型别名和接口都支持扩展

```typescript
type User = {
  name: string
}

type User1 = User & { age: number }
```

```typescript
interface User {
  name: string
}

interface User1 extends User {
  age: number
}
```

### 不同点

1. 同名接口会自动合并，而类型别名不会

```typescript
interface User {
  name: string
}

interface User {
  age: number
}

const user: User = {
  name: 'kuizuo',
  age: 20,
}
```

```typescript
type User = {
  name: string
}

type User = {
  age: number
}
// 标识符“User”重复。
```

### 使用场景

#### type 的使用场景

- 定义基本类型
- 定义元组类型
- 定义函数类型
- 定义联合类型
- 定义映射类型

#### interface 的使用场景

- 利用接口自动合并特性，在第三方库中可以对其进行接口扩展

- 定义对象类型且无需使用 type 时

## TypeScript 内置工具类

[TypeScript: Documentation - Utility Types (typescriptlang.org)](https://www.typescriptlang.org/docs/handbook/utility-types.html)

## 相关文档与练习

[TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)](https://www.typescriptlang.org/)

[深入理解 TypeScript | 深入理解 TypeScript (jkchao.github.io)](https://jkchao.github.io/typescript-book-chinese/)

[type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)](https://github.com/type-challenges/type-challenges)

TypeScript高级语法

考试终于结束了，也将近一个月没怎么写代码和文章了，准备调整下自身状态，开始进一步的学习。然后在前段时间我的一个同校同学拿到了 xx 公司的 offer，然后该公司正好有招前端开发实习，就问我有没有兴趣尝试一下，但一开始我内心其实不是很想工作的，想着暑假去闭关学其他技术，同时加上我目前的身份**准大三(休学一年)**实习期可能也就 2 个月，毕竟这行业不同于打工，是需要长期工作和维护。不过一想毕竟没面试过，所以就蛮去尝试一下，至于最终的结果，阅读全文吧。



## 简历

我的那位同学给我推了面试官的微信，于是加完微信，简单的几句招呼便直接开始找我要了一份**简历**，也就是整个面试过程中最重要的物件，即**面试的前提**。

很显然我压根就没有准备过这玩意，然后面试官叫我去准备一下（期间聊天强调过几次有空准备下简历），于是就去网上搜寻了关于简历说明、编写建议与简历模板，也了解到简历对面试者的一个重要性。

**简历是面试官了解面试者最快方式**，甚至可以说对于大部分人群是非要不可。于是我花费了一天的时间去准备了一份属于自己的简历，主要内容为个人的基本信息、技术特长、个人描述、教育背景、工作经验、项目经验等，其内容一定要真实，同时也要在精简的同时，让面试官一眼就能看到你的亮点，以及将来你到贵公司工作能为其提供的帮助，这些在外面的大部分简历编写建议中也有提及，这里我也仅是简单总结。

关于我的简历就不展示了（毕竟暂时比较烂），不过关于简历模板的话，我倒是可以推荐下。我所使用的是 [木及简历](https://www.mujicv.com/)，此外还有 [Markdown 简历排版工具 (mdnice.com)](https://resume.mdnice.com/) 与 [简历自动生成 (sugarat.top)](https://resume.sugarat.top/) ，这些都是我在搜寻资料中认为不错的在线简历模板。

最主要是丰富自身的阅历与技术，这样在简历编写时，其内容是一定能吸引到面试官的注意。要是什么技能都不会，什么项目都没有，一份不起眼的简历，作为面试官是很难给你一个面试的机会。

如果你已经看到这里了，并且你未来有找工作的需求，那么现在就可以着笔简历，而不是等到要找工作的时候在准备。同时在日常开发与学习中，也可以不断去完善自身简历。**总之，越早写简历越好**。

将简历提交给面试官后，如果叫你准备下面试，那么恭喜，已经进入第二步------**面试**

## 面试

这次预定为周六早上 10 点（即本文发布日期）**线上面试**（无屏幕共享，只单纯聊聊技术栈相关），正常来说知道自己要被面的话，应该来说会提前做些准备。然而我就不一样了，我**没刷过任何面试题**（八股文），所以我想看看我的知识储备能否回答出这些问题，结果也确实如此，这次面试大多数问题回答不出来或者回答的半知半解的。

### 问技术

关于所问的问题，和外面主流的前端面试大致，这些就是考验基本功的问题，例如 HTML5 的新特性，JS 的一些语法等等，这些在八股文在面试过程中是必须要背的，因为这些决定计算机的基本功。此外面试官在了解你的大致技术栈后，必然会针对你简历上的内容，提出一些针对性的问题。比方说我在简历上写了一个后台管理系统 [KzAdmin](https://admin.kuizuo.cn) 其中就有问到像 JWT，axios 封装，前端菜单展示等问题，然后和一个[JavaScript 的混淆与还原](https://deobfuscator.kuizuo.cn/)，就问这个主要功能，以及其中所涉及的一些技术栈相关的。

至于整个面试所关于技术的问题与细节就不一一列举了，不过令我意外的是，所问题的竟然没有算法题，不过事后想想也对线上面试还无共享屏幕的前提下，咋可能问算法题呢，最多也就是问问你对你的技术栈的了解程度与理解情况，整个过程与我预期所想符合。

### 闲谈

最后就是表明他们的项目可能是需要长期的，然后我目前的情况又相对比较特殊，问我下学期课程的安排啥的。相对面试者比较在意的就是薪资，但在这次谈论期间是没有关于薪资的，我和面试官都没提，我自然是不敢提的，毕竟问题都回答的那么烂了，哪里还好意思提，同时这是实习岗位，自然薪资不会高到哪里去的。

当然了，整个面试过程最后一句话是**回去等通知**

### 等待面试结果

通常面试都有以下三种结果。

第一、现场录用。第二、当场拒用。第三、回去等通知

大多数面试结果都是第三条，我自然不例外。至于有没有二面啥的，自我感觉有个 7 成左右。为何不敢说百分百呢？从整个面试的过程来看，其实我准备时间是充分的，但根本没怎么准备，甚至可以说全程是种摆烂的态度。再从回答问题上来看，我整个回答情况就表明告诉面试官我没准备好这次面试，加上一开始没准备好简历，就相当于我就是来面着玩的 😂。

公司面对这类面试者（求职意向不是很明确，情况特殊），大概率就是直接刷掉了。当然，这只是我的个人对此次面试的看法，如果有二面的话，我一定好好刷面试题，顺带锻炼下表达能力（现在在回想整个回答过程，我甚至都不好意思说我是学前端的了）。如果没有的话，算了不去想了。

## 面试结果

承接上文，直到考试结束任然没收到任何通知，即挂了。其原因其实我也在上文中说到，我的面试态度相对比较差，加上实习期限的原因。不过后话来说，即便我收到了这份 offer 我也不一定会去，当然这里说这种话确实有那么一点不好，但首先我是工作过（虽然不算一个体系的公司，只能算作工作室），而且给我分配的时间充裕，而且薪资还不低，并且当时涉及的业务还是我相对比较强项的协议复现和逆向（虽然我已经快半年没碰，而且大概率会在持续半年的时间不接触逆向相关的）。但每天的任务就是等待产品经理的需求，这时就需要停下手头的事情，来完成任务，大部分的时间都是在测试和维护。虽说和与搬砖打工有点区别，但本质无异，都是枯燥任务。同时我本身是挺反感重复任务与中断的，所以上一份的工作给我的感受就是（时间）充实但又夹杂着（任务）枯燥，但很多时候就不得不妥协，因为生活所迫，这里就不做感慨了。

总之，这次的面试结果也并不让我意外，甚至可以说是情理之中。

## 总结与建议

对整个面试的过程对我而言就是要锻炼自身表达能力，在除了没刷八股文外，像一些问题，我很难用口语去告诉面试官我的意思，但使用屏幕共享加代码展示就不一样，但当时的面试官没提加上我也没主动申请，这是我认为整个过程比较可惜的一点。不过整个过程下来，我认为面试也没什么的，无非就是问问题，平常多刷面试题。

关于一些建议的话：

首先就是个人简历非常重要，最好添写个人[Github](https://github.com/)与[博客](https://kuizuo.cn)，绝对是面试的加分项。尤其是博客，在上面所分享的内容，也可能会吸引到一些需要招聘你的 HR。至少告诉面试官你有在学习，并且懂得记录。其次就是简历上一定要有能亮眼的地方同时自己又很掌握的项目经验，这样面试官针对性的问题，对自身也有很好的作答。如果自己掌握程度不是很大的情况下，还是不建议编写，即便学过，但忘了，那就是不会（说的不就是我吗）。

一个好的简历谁都会写，但面试不是一纸千金，工作更不是纸上谈兵。简历是了解一个人的基本资料，而面试主要是考察一个人的工作能力与综合素质，即便你工作能力再强大，但你工作态度属于摸鱼的状态，同样是无法胜任此工作的。所以既然选择要工作，那就应该做足准备，拿出最好的工作态度给面试官。

所以我一开始的目的到底是什么呢？准备实习工作呢？还是闭关学习呢？又或者是...