安装依赖

1

yarn add react-i18next i18next i18next-browser-languagedetector

配置多语言JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// en-us.json
{
  "common": {
    "cancel": "Cancel"
  },
  "join": "join",
  "retry": "Retry after {{timer}}s",
  "choosePerson": "Selected <0>{{num}}</0> person"
}

// zh-cn.json
{
  "common": {
    "cancel": "取消"
  },
  "join": "加入",
  "retry": "{{timer}}秒后重试",
  "choosePerson": "选择人数<0>{{num}}</0>, 没选择人数<1>{{num1}}</1>"
}

// 变量需要通过{{}}格式包裹，组件需要通过<数字></数字>格式包裹

定义i18n.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from "i18next";
import enUsTrans from "../public/locales/en-us.json";
import zhCnTrans from "../public/locales/zh-cn.json";
import {
  initReactI18next
} from 'react-i18next';

i18n.use(LanguageDetector) //嗅探当前浏览器语言
.use(initReactI18next) //init i18next
.init({
  //引入资源文件
  resources: {
    en: {
      translation: enUsTrans,
    },
    zh: {
      translation: zhCnTrans,
    },
  },
  //选择默认语言，选择内容为上述配置中的key，即en/zh
  fallbackLng: "en",
  debug: false,
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
})

export default i18n;

主文件引用

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react'
import App from 'next/app'
import '../config/i18n'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default MyApp

使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React from 'react'
import { NextPage } from 'next'
import { useTranslation, Trans, Translation } from 'react-i18next'
// import i18n from "i18next";

const Home: NextPage = () => {
  let { t , i18n } = useTranslation()

  return (
    <div >
      <div>
      <button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
      </div>

      {/* 3种常用使用方式 */}
      <h1>{t('home')}</h1>
      <h2><Trans>home</Trans></h2>
      <Translation>{t => <h3>{t('home')}</h3>}</Translation>

      <h1>
        {i18n.t("common.cancel")}
        <div>{i18n.t("retry", {retry: 3})}</div>
        <Trans i18nKey={"choosePerson"} values={{num: 3, num1: 4}} components={[<div>content</div>, <span>content</span>]}></Trans>
      </h1>
    </div>
  )
}

export default Home

先决条件

一分钟安装nodejs，版本(>=10.13.0)

创建项目

1
2
3

npm i -g @nestjs/cli

nest new project

初始项目结构

1
2
3
4
5

# 将创建 project 目录， 安装node模块和一些其他样板文件，并将创建一个 src 目录，目录中包含几个核心文件。
src
├── app.controller.ts # 带有单个路由的基本控制器示例。
├── app.module.ts # 应用程序的根模块
└── main.ts # 应用程序入口文件。它使用 NestFactory 用来创建 Nest 应用实例。

1
2
3
4
5
6
7
8
9

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

平台

Nest 旨在成为一个与平台无关的框架。 通过平台，可以创建可重用的逻辑部件，开发人员可以利用这些部件来跨越多种不同类型的应用程序。 从技术 上讲，Nest 可以在创建适配器后使用任何 Node HTTP 框架。 有两个支持开箱即用的 HTTP 平台：express 和 fastify。 您可以选择最适合您 需求的产品。

用 @nestjs/platform-express 包。 许多用户都可以使用 Express ，并且无需采取任何操作即可启用它。| |fastify|Fastify 是一个高性能，低开销的框架，专注于提供最高的效率和速度。 在这里阅读如何使用它。|

无论使用哪种平台，它都会暴露自己的 API。 它们分别是 NestExpressApplication 和 NestFastifyApplication。

将类型传递给 NestFactory.create() 函数时，如下例所示，app 对象将具有专用于该特定平台的函数。 但是，请注意，除非您确实要访问底层平 台API，否则无需指定类型。

1

const app = await NestFactory.create<NestExpressApplication>(AppModule);

运行应用程序

1
2
3

npm run start

// http://localhost:3000 Hello World

聊聊 Vue 中 axios 的封装

axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。

虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用。下面，我们就来聊聊 Vue 中 axios 的封装。

typescript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

区别

安装

1

npm install -g typescript

编译

1
2

tsc helloworld.ts
// helloworld.ts => helloworld.js

在线学习语法和特性

先简单了解下什么是 CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default

简单点说 CSS Module 是具有局部作用域的 css 文件。既然提到了局部作用域，那么肯定有全局作用域，在 create-react-app 中，我们引入 css 文件通常为以下形式：

1
2
3
4

/* index.css */
.color {
  color: red;
}

1
2
3
4
5
6
7

/* index.tsx */
import React, { Component } from 'react'
import './index.css'

export default class Index extends Component {
  // ...
}

interface是接口，type是类型，本身就是两个概念。只是碰巧表现上比较相似。希望定义一个变量类型，就用type，如果希望是能够继承并约束的，就 用interface。如果你不知道该用哪个，说明你只是想定义一个类型而非接口，所以应该用type。

在 TypeScript 中，interface 和 type 主要用于类型的声明，它们的相同点以及区别如下：

它来了，它来了，16.8版本hooks成功加入(^▽^)

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？ —— 拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？ —— 拥有了Hooks，生命周期钩子函数可以先丢一边了。

你在还在为组件中的this指向而晕头转向吗？ —— 既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

js 二进制与位运算

生活中，我们经常用到的是以十进制为单位，进位是满 10 进 1，而计算机是用二进制，那么就是满 2 进 1 喽，为什么采用二进制呢？简单说下，Ta的由来其实是根据电路的开关闭合，电路只有 0 和 1，具体的详情这里不多做解释了，可以自行百科^_^。javascript 采用有符号 32 位的 2 进制，可表示 4294967295 个整数(含正负)，范围是 -2147483648(2 的 32 次方) ~ 2147483647。

带符号二进制基本规则与几个概念

在计算机中规定最高位是符号位，0 为正，1 为负。正数表示是原码，负数是原码的补码。

原码

除去符号位，其他 32 位都为正。

例：00000000000000000000000000001010 原码 00000000000000000000000000001010。

反码

所谓反码，除符号位外，其他位 0 变 1，1 变 0。 例：1010 反码 1101

补码

所谓补码，就像是小学学过的 10 进制补数，举个例子就很好理解，3 的补数是多少？是 7。4 的补数是 6，补数就是 10 减去这个数。在二进制的补码就是相加等于 0，互为相反数。

• 0 的补码 0 的原码、反码、补码均为 0
• 正数的补码 原码
• 负数的补码 原码除符号位外的所有位取反+1。如何推出来的，看了一篇文章，挺有意思。点击查看

五大算法

• 贪心算法：局部最优解法
• 分治算法：分成多个小模块，与原问题性质相同
• 动态规划：每个状态都是过去历史的一个总结
• 回溯法：发现原先选择不优时，退回重新选择
• 分支限界法：按广度优先策略搜索问题的解空间树，适合求解最优化问题

数据树

• 二叉树: 最多只有两个子节点

  • 完全二叉树
    • 若设二叉树的深度为k，除第 k 层外，其它各层 (1～k-1) 的结点数都达到最大个数，第k 层所有的结点都连续集中在最左边
  • 满二叉树
    • 深度为 h, 有 n 个节点，且满足 n = 2^h - 1
  • 平衡二叉树
    • 它或者是一颗空树，或它的左子树和右子树的深度之差(平衡因子)的绝对值不超过1，且它的左子树和右子树都是一颗平衡二叉树
  • 最优二叉树(哈夫曼树)
    • 树的带权路径长度达到最小，称这样的二叉树为最优二叉树，也称为哈夫曼树(Huffman Tree)。哈夫曼树是带权路径长度最短的树，权值较大的结点离根较近。

• 二叉查找树: 是一种特殊的二叉树，能有效地提高查找效率

  • 小值在左，大值在右
  • 节点 n 的所有左子树值小于 n，所有右子树值大于 n

• 遍历节点
  • 前序遍历
    • 根节点
    • 访问左子节点，回到 1
    • 访问右子节点，回到 1
  • 中序遍历
    • 先访问到最左的子节点
    • 访问该节点的父节点
    • 访问该父节点的右子节点， 回到 1
  • 后序遍历
    • 先访问到最左的子节点
    • 访问相邻的右节点
    • 访问父节点， 回到 1

DLR–前序遍历（根在前，从左往右，一棵树的根永远在左子树前面，左子树又永远在右子树前面 ）

LDR–中序遍历（根在中，从左往右，一棵树的左子树永远在根前面，根永远在右子树前面）

LRD–后序遍历（根在后，从左往右，一棵树的左子树永远在右子树前面，右子树永远在根前面）

• 插入与删除节点

爱心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
        s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
        }),
        t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
    function(e) {
        setTimeout(e, 1e3 / 60)
    },
    i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    n(),
    r()
} (window, document);