通常，公司会自建 GitHub 或 GitLab 服务，而个人可能在 GitHub 官网上有自己的个人项目。然而，公司内部项目和个人项目的邮箱配置可能不同。当项目数量较多时，使用 git config --local 或 --global 进行设置就会变得相当麻烦。在这里，我将记录下我个人的解决方案，以便后续参考。

区分不同的 SSH Key

生成 SSH Key 文件

在 ~/.ssh/ 目录下生成 SSH Key 文件：

• 对于公司内部使用的邮箱，生成一个 SSH Key 文件命名为 ssh-company
• 对于个人 GitHub 使用的邮箱，生成一个 SSH Key 文件命名为 ssh-github

添加 config 文件

在 ~/.ssh/ 目录下创建一个 config 文件，并添加以下内容：

1
2
3
4
5
6
7
8
9
10
11

Host github.com
  HostName github.com
  User git
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/ssh-github

Host gitlab.com
  HostName gitlab.com
  User git
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/ssh-company

这样设置后，使用 git 命令和远程 Git 仓库进行交互时，将根据 Git 远程地址前缀使用不同的 SSH Key。

使用不同的姓名和邮箱

在进行 Git 提交时，可以区分个人项目和公司项目，使用不同的姓名和邮箱。

添加 .gitconfig 文件

生成 ~/.gitconfig 文件，相当于使用 git config --global 进行全局配置。在该文件中，可以设置个人的 Git 相关配置，例如：

1
2
3
4
5
6
7

[alias]
  st = status
  co = checkout
[includeIf "hasconfig:remote.*.url:git@gitlab.com:*/**"]
  path = ~/.gitconfig-company
[includeIf "hasconfig:remote.*.url:git@github.com:*/**"]
  path = ~/.gitconfig-github

includeIf 是 Git 的条件引入配置语法，它允许根据特定条件从其他文件中读取并合并配置。通过使用 includeIf，可以根据当前仓库的位置或其他条件有选择地包含额外的配置文件，从而实现为不同的仓库或目录设置不同配置而无需手动切换。

生成 .gitconfig-xxx 文件

为了区分姓名和邮箱，可以创建 .gitconfig-xxx 文件，并根据个人喜好添加配置。如果只想区分姓名和邮箱，可以按照以下方式设置：

1
2
3
4
5
6
7
8
9

### .gitconfig-company
[user]
    name = 公司姓名
  email = 公司邮箱

### .gitconfig-github
[user]
    name = 个人姓名
  email = 个人邮箱

这样，当进行提交时，根据远程主机地址前缀判断使用哪个姓名和邮箱。

处理 Hexo 部署异常问题

在使用 .gitconfig 文件自动区分提交后，执行 hexo d 命令时可能会出现以下提示：

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

Initialized empty Git repository in F:/Blog/.deploy_git/.g
Author identity unknown                                   
                                                          
*** Please tell me who you are.                           
                                                          
Run                                                       
                                                          
  git config --global user.email "you@example.com"        
  git config --global user.name "Your Name"               
                                                          
to set your account's default identity.                   
Omit --global to set the identity only in this repository.

这是因为在执行 hexo d 命令时，默认使用了全局的 Git user.name 和 user.email。

解决方案

在 Hexo 的 _config.yml 配置文件中进行设置：

1
2
3
4
5
6
7
8
9

# You can use this:
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]
  name: [git user]
  email: [git email]
  extend_dirs: [extend directory]

然而，即使使用了上述解决方案，再次执行 hexo d 命令时，仍然会使用全局的 Git 用户信息，导致报错。

解决方案的解决方案

如果 .deploy_git 目录已经生成并存在，会导致错误发生。此时，需要删除整个 .deploy_git 目录，然后再次执行 hexo d 命令。

希望这些解决方案能解决你的问题！如果还有其他疑问，请随时提问。

Done！

首先执行 git fsck --lost-found

会出现

只用关注 dangling commit 后面跟着的 id

然后 git show 对应的 id，查看是不是自己需要恢复的文件内容，尽量从下往上找。

找到对应的 id 之后执行 git merge <id>，然后就还原了。

不过还原之后是作为一次 commit 提交到本地的，并非暂存状态

我们目前需要整合多个不同的产品平台,让他们能够通过一个统一的入口来访问。但是这些被集成的产品都没有实施单点登录机制,而是使用 session-cookie 来做权限验证。因此,我们需要在用户点击进入不同产品时,先进行权限判断和跳转。大多数产品都是直接访问登录界面,然后系统会自动填充账号和密码后跳转到产品的默认首页。这种方案改造成本较低,但是会有一个短暂的白屏过程。我们可以尝试对此流程进行优化,实现无感知的平滑跳转。

优化思路

一个核心点：不用访问登录界面，自己模拟一个权限验证接口，如果已登录就直接跳转产品首页，如果未登录就接口层直接模拟登录流程生成 session，接口通过 302 和 set-cookie 完成上述需求。

使用 golang 模拟一个 http server 完成这个需求，代码如下

效果展示

当访问 login 接口时，判断用户权限，根据用户权限判断是否需要 Set-cookie, 这样就针对于这个项目而言，改造成本就没有那么大，而且访问也是无感知的，不会出现白屏这种现象。

Done!

简单记录一下安装步骤

总体分四步

1. 下载官方部署工具
2. 生成配置文件
3. 根据配置文件下载安装
4. 激活

使用 Terminal 操作时使用管理员权限

下载官方部署工具

在 https://www.microsoft.com/en-us/download/details.aspx?id=49117 下载 ODT 官方工具包

尽量使用 Edge 浏览器打开，我曾经使用 Chrome 会出现一道白条完全无法进行下一步，遇到下载不了可以尝试换一个浏览器

安装执行 ODT 工具会得到一个 setup.exe 文件和四个 XML 文件

生成配置文件

在 https://www.microsoft.com/en-us/download/details.aspx?id=49117 根据界面选配自己需要的软件

选择带批量许可证描述的版本，不要选择带 SPLA 字样的版本
授权和激活：选 KMS 选项。

不止三件套 Word、Excel、PowerPoint，也可以跟 Visio、Project 一起下载安装
选配完成之后点击导出会生成一个 XML 文件，比如命名成 Sokiy.xml，跟之前 ODT 安装生成的 setup.exe 放到一个目录下

根据配置文件下载安装

使用 cmd 或者其他 terminal 在放置 setup.exe 的文件夹下执行

1

.\setup.exe /download Sokiy.xml

然后会在当前目录下生成一个 Office 文件夹，所有需要的数据都会下载到这个目录里面。
根据选配的参数和网络情况下载时间有长有短，等到 terminal 显示下载完成时候执行下一步操作

1

.\setup.exe /configure Sokiy.xml

开始执行安装操作，这时候等待安装完成即可。

激活

64 位版本进入到 C:\Program Files\Microsoft Office\,
其他版本在 C:\Program Files(x86)\Microsoft Office\Office16

里面可能有 Office16、Office15、Office14 字样，选大的。

进去之后有一个 OSPP.VBS, 然后执行

1

cscript ospp.vbs /sethst:kms.03k.org

kms.03k.org 是 KMS 服务器地址，有很多在线的服务器

http://kms.03k.org
http://kms.chinancce.com
http://kms.luody.info
http://kms.lotro.cc
http://kms.luochenzhimu.com
http://kms8.MSGuides.com
http://kms9.MSGuides.com

填写 KMS 服务器的时候不需要前面的 http://

然后执行

1

cscript ospp.vbs /act

出现 Successful 字样就算成功了

参考

• 安装最新VL版office快捷指南
• KMS服务,一句命令激活windows/office!

命令式编程

所见即所得，代码看起来就是一串命令的组合，看代码就能看出来具体要干啥。
例如：

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

// double array items
function doubleItem (arr){
    const ret = []
    for(let i =0;i < arr.length;i++>){
        ret.push(arr[i] * 2);
    }
    return ret
}

//add one array items
function doubleItem (arr){
    const ret = []
    for(let i =0;i < arr.length;i++>){
        ret.push(arr[i] + 1);
    }
    return ret
}

代码的实现细节都是可以看到的，但是可扩展性不强且有一些重复代码。
代码量一上去很容易就能体会到，平常实现的某些需求从一些程度来讲模式都是相似的，这时候可以把共性的代码提取出来，把差异化作为参数传入，这个时候就能减少很多的重复代码。
这时候函数式编程的好处就体现出来了，我们就可以写出更简洁、更有表现力的代码。

函数式编程

函数式编程就是非常强调使用函数来解决问题的一种编程方式。

还是上面的列子，就可以写成

1
2
3

// double array items
const doubleItem = (arr) => arr.map((item) => item * 2);
const addOne = (arr) => arr.map((item) => item + 1);

比命令式编程更加的简洁，无需关心内部的实现，只需要知道这个函数能达到需要的效果。

函数式编程对函数有如下的特殊要求

• 声明式（Declarative）
• 纯函数（Pure Function）
• 数据不可变性（Immutability）

声明式

声明式有点像是用描述的字符定义了一些行为的映射，比如 doubleItem 代表的就是把传入的数字数组中每个 item 都乘以 2，并且返回新的数组，doubleItem 和数组每个子项乘以 2 的映射，
doubleItem 就是这个功能的声明。

纯函数

纯函数需要符合两个条件

• 函数的执行过程完全由输入参数决定，不会受除参数之外的任何数据影响。
• 函数不会修改任何外部状态。

数据不可变性

在原数据不变的情况下，产生新的数据来表现这种变化，而不是修改原数据。
毕竟原数据不一定是一个程序在用，多进程操作数据会有很多意想不到的结果，还不如数据不可变，用新数据表现数据的变化，让数据的变化有迹可循。

//Todo

call 函数就是改变当前函数 this 的指向
思路就是在自己手写的函数内部，在传入的对象中增加同样的函数，然后执行返回，最后删除即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const Obj1 = {
    name: "Sokiy",
    say: function (prefix, age) {
        console.log(
            `${prefix}, My name is ${this.name}, i'm ${age} years old.`
        );
    },
};

Obj1.say("Hello", 20);

const Obj2 = {
    name: "Tong",
};

Obj1.say.call(Obj2, "Hello", 18);

output:

Hello, My name is Sokiy, i’m 20 years old.
Hello, My name is Tong, i’m 18 years old.

手写的 call 函数

不用箭头是因为箭头函数没有自己的this，arguments，super或new.target
我们需要用到这个东西

1
2
3
4
5
6
7

Function.prototype.tinycall = function (target, ...args) {
  const key = Symbol();  //给定一个独一无二的 key，有可能会和原 target 中key 产生冲突
  target[key] = this; // this 就是需要执行的函数，所谓的重新指向就是复制了一份
  const res = target[key](...args);
  delete target[key];
  return res;
};

手写 apply 函数

同 call 函数，无非是 args 参数是否是数组的区别

在做一个项目的时候遇到了需要做 30x 跳转的问题，记录一下。

做单点登录的时候需要访问某一个接口后跳转到 CAS 服务器的登录界面，这时候采取了返回 30X 状态码让浏览器做重定向到其他界面。
然后发现并不能跳转，如果 IP 不一样的话直接会报跨域错误。

HTTP 响应状态码

原因

跨域原因

当我在 www.a.com 做 Ajax XHR 请求，想在请求中重定向到其他的界面，这时候接口返回 302 状态码，location 为 www.b.com。

浏览器收到 302 的请求之后，会自己在当前界面请求 request header 中的 location 地址，比如说 location 为 www.b.com，但是这个时候就是在 www.a.com 的界面请求 www.b.com 的接口数据，这时候会有 cors 跨域问题。

这时候查看控制台，会发现请求的 www.b.com 的请求并非是 document 资源请求类型，而是 xhr 的类型。

但是如果 www.a.com 是一个 document 的请求，302 后就相当于在 www.a.com 打开 www.b.com 的超链接，会跳转到 www.b.com。

XOR 是 exclusive OR 的缩写，更单纯的 OR 运算。

OR 运算的运算子有两种情况，计算结果为 true。

• 一个为 true，另一个为 false
• 两个都为 true

XOR 排除了第二种情况，只针对两个运算子值不一样的情况，更符合理想中的 OR 运算。

XOR 可以用来判断两个值是否相等。

1
2
3
4

0 ^ 0 = 0
1 ^ 1 = 0
0 ^ 1 = 1
1 ^ 0 = 1

一个通俗的解释

只有男性和女性能生出孩子，否则就不行。

明确含义

XOR 是数学运算，既然是数学运算，首先需要明确一个点

异或运算仅仅适用于数字间的运算
异或运算仅仅适用于数字间的运算
异或运算仅仅适用于数字间的运算

数字间的异或

以 javascript 语言举例

1
2
3

1 ^ 2 = 3
3 ^ 4 = 7
3 ^ 5 = 6

数字间的异或就是按位进行异或操作

1

3 ^ 4  =  0110 ^ 1000 = 1110 = 7

非数字的异或

然后测试一下字符串异或

1
2
3
4

'a' ^ 'b' = 0
'aaaaaaa' ^ 'dadasdasdasdas' = 0
true ^ false = 1
true ^ 'a' = 1

为什么两个字符串间异或会是 0 ?
为什么 true 跟 false 异或会是 1 ?
为什么布尔值跟字符串异或会是 1 ?

非数字异或操作原理分析

异或运算仅仅适用于数字间的运算，所以在进行异或操作前，会对两边的操作数做类型转换操作，

1
2
3
4

Number('String') = NaN
Number(1) = 1
Number(true) = 1
Number(false) = 0

所以

1
2
3

'a' ^ 'b' = NaN ^ NaN = 0
true ^ false = 1 ^ 0 = 1
true ^ 'a' = 1 ^ NaN = 1

这个在 Python 语言中同样适用

1
2
3
4

1 ^ 2 = 3
'1' ^ '1' = TypeError: unsupported operand type(s) for ^: 'str' and 'str'
True ^ False = 1
int(True) = 1

运算定律

XOR 满足如下定律，

1. 因为 0 ^ 0 === 1 ^ 1, 所以

1

x ^ x = 0

2. 因为 0 ^ 1 === 1 ^ 0, 所以

1

(a ^ b) === (b ^ a);

3. 因为 0 ^ ( 1 ^ 1 ) === (0 ^ 1) ^ 1, 所以

1

a ^ b ^ (c === a) ^ (b ^ c);

应用

简化运算

1
2

a ^ b ^ c ^ b ^c =  b ^ b ^ c ^ c ^ a = 0 ^ 0 ^ a = a

加密

根据 a ^ b ^ b = a, 我们可以这么推断 text ^ key ^ key = text,
因为 text 如果是字符串的话，是无法参与 XOR 运算的，所以我们首先要把字符串转成可以用数字代替的形式。

以 ASCll 中的字符举例，可以使用 ASCll 对照表还原

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

const key = "Sokiy"
  .split("")
  .map((item) => {
    return item.charCodeAt();
  })
  .join("");

//加密 & 解密
function encrypt(str) {
  if (typeof str !== "string") {
    throw "Parameter is not a string!";
  }
  let result = [];
  for (let i = 0; i < str.length; i++) {
    result.push(String.fromCharCode(str[i].charCodeAt() ^ key));
  }
  return result.join("");
}

console.log(encrypt("Sokiy")); //ᄲᄎᄊᄈᄘ
console.log(encrypt(encrypt("Sokiy"))); //Sokiy

一道面试题

Single Number
Given an array of integers, every element appears twice except for one. Find that single one.

给定一个整数数组，其中只有一个整数出现了一次，其余的整数都出现了两次，求出这个出现了一次的整数的值

1
2
3
4
5
6

const arr = [1, 1, 2, 3, 4, 5, 4, 5, 3];

let single = arr[0];
arr.forEach((element) => {
  single = single ^ element;
});

参考

• 阮一峰：异或运算 XOR 教程
• JS迷你书 Number类型二进制表示法

控制物块移动核心思想

• 监听键盘事件
• 在键盘触发的 callback 函数中更改物块 position 属性的 x,y,z 值

一个小问题

监听键盘的 callback 函数可以触发对应的物块移动，假如一直按下绑定的移动按键，物块移动看起来就生硬，一卡一卡的，有顿挫感。

原因分析

webGL 动画更新时采用 requestAnimationFrame 来告诉下一帧需要执行什么操作，以屏幕刷新率为 60HZ 举例，相当于 1s 内会执行 60 次 requestAnimationFrame 调用的函数。

1
2
3
4

function render() {
  console.log("Hello world!");
  requestAnimationFrame(render);
}

一秒内会输出 60 次 Hello world!

但是 document.addEventListener 监听的 keydown 、keyup 、keypress 的触发时间并没有跟屏幕刷新帧率保持一致，而且 keydown 事件的第一次触发到按下持续触发中间还有延迟，这就造成了在键盘监听事件中进行物块的移动会导致动画看起来一卡一卡的。

优化调整

思路就是把物块移动的操作放到 requestAnimationFrame 的调用函数中执行。

问题就来了，在 requestAnimationFrame 是要怎么感知到当前按下了哪个键的，总不能在 requestAnimationFrame 中每执行一次就监听一次 keydown、keyup 事件吧？

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

const global = {};
//创建一个 cube
function createCube() {
  const cubeGeometry = new THREE.BoxGeometry(10, 10, 10, 1, 1, 1);
  const cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0xfff000,
    wireframe: true,
  });
  global.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  global.cube.position.set(0, 5, 0);
  global.scene.add(global.cube);
}

Todo

在浏览器环境加载 json 文件，不同于 Node 环境可以采用 commonJS 模块化加载方式，直接

1

const data = require("./demo.json")

就行，浏览器环境不支持这种加载模式

记录一下怎么在浏览器环境加载 json 文件

.js 文件引入

使用 script 的机制，对 json 文件做适量改造，例如

// demo.json

1
2
3
4

{
  "id": 8848,
  "name": "Sokiy"
}

改造后
// demo.json.js

1
2
3
4

const demo = {
  id: 8848,
  name: "Sokiy",
};

直接 script 引入就行

1

<script src='./demo.json.js'></script>

优点

• 只需要少量改造就可以加载对应的 json 文件
• json 对象会保存在全局对象中，随用随取

缺点

• 需要改造
• 容易造成全局变量污染

XHR 加载

使用原生 XHR (XMLHttpRequest) 或者 jQuery 加载 json 文件

使用 jQuery 加载 json 文件

1
2
3
4
5

$(selector).getJSON(url, data, success(data, status, xhr));

$.getJSON("demo.json", function (data, status, xhr) {
  // code
});

优点

• 语法简单
• 不用对 json 文件做改动

缺点

• 需要加载 jQuery 文件

Fetch 加载

目前浏览器大都支持 fetch Api

1
2
3

fetch("./demo,json").then((res) => {
  return res.json();
});

如果需要加载多个 json 文件

1
2
3
4
5
6
7
8
9
10
11

const file_list = ["./demo.json", "./data.json"];
Promise.all(
  file_list.map((file) =>
    fetch(file).then((res) => {
      return res.json();
    })
  )
).then((ret) => {
  // ret = [{demo.json.data},{data.json.data}]
  //code After load some json files
});

优点

• fetch 目前支持度比较广且语法简单
• 不用额外引入其他第三方库资源

缺点

• 基于 Promise 的，但是对 http status 的状态 reject 会跟一般流程存在差异
• 加载的 status 状态没有像 XHR 那么直观

Done.

JS 执行时遇到新的执行函数的时候就会把需要执行的函数压入堆栈，函数执行完成之后会退栈释放对应的内存空间。
如果压入的函数数量过多，就会造成：

复现异常

先简单复现一下怎么造成堆栈异常

1
2
3
4
5
6
7

function stack(n) {
  if (n === 1) {
    return 1;
  }
  return stack(n - 1);
}
stack(100000);

打断点看一下堆栈调用情况

随着递归次数的增多，stack 函数一直在压入堆栈，然后超过浏览器堆栈数量上限（貌似不同平台不同版本会有些差异），直接 GG。

实例研究

我们就以经典的 Fibonacci 求值举例，做一次优化

递归实现 Fibonacci 数列求值

用递归实现计算一下第 100 位的 Fibonacci 的值，顺带计算一下执行时间。

代码如下：

1
2
3
4
5
6
7
8
9
10

function fibonacci(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.time("fibonacci");
console.log(fibonacci(100));
console.timeEnd("fibonacci");

WTF，我的机器配置 Intel i7-10700 2.90GHz + 16GB 跑了能有 2 分钟还没出来，
CPU 一直在 10% 左右。

降低一下标准，计算一下第 45 位的 Fibonacci 的值，顺带计算一下执行时间。
（降到 50 都算的时间很长，45 终于是有结果输出了）

1
2
3
4
5
6
7
8
9
10

function fibonacci(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.time("fibonacci");
console.log(fibonacci(45));
console.timeEnd("fibonacci");

差不多 10S 输出结果，Emm，属实有点拉跨。

优化的点分析

上面的递归 Fibonacci 存在一个严重的问题 重复计算太多了，
计算 fibonacci(5) 就需要计算 fibonacci(4)、fibonacci(3)、fibonacci(2)、fibonacci(1)，然后这一轮里计算 fibonacci(4) 就又要计算 fibonacci(3)、fibonacci(2)、fibonacci(1)，然后依此类推，CPU 占比那么高不是没有理由的。

可以做一下统计，稍微改动一下代码

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

let count = 0;
function fibonacci(n) {
  count++;
  if (n === 0 || n === 1) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.time("fibonacci");
console.log(fibonacci(45));
console.timeEnd("fibonacci");
console.log(`the number of exec count is ${count}`);

看一下结果输出

fibonacci(45) 已经 10 亿级别的计算量了。

有一个优化的点就是我们可以把重复计算部分去掉

优化一: 去除重复计算

1

fibonacci(3) = fibonacci(2) + fibonacci(1)

我们计算 fibonacci(4) 的时候，可以把 fibonacci(3) 跟 fibonacci(2) 的值带上，这样就不用重复计算了。

然后代码如下：

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

let count = 0;
function fibonacci(n) {
  if (n === 0 || n === 1) {
    return 1;
  }

  /**
   * @param n2  当前计算数的前面第二个值
   * @param n1   当前计算数的前一个值
   * @param flag  当前计算到第几位
   * **/
  function fibonacci_inner(n2, n1, flag) {
    count++;
    if (flag === n) {
      return n1 + n2;
    }
    return fibonacci_inner(n1, n1 + n2, flag + 1);
  }
  //从第二位开始计算
  return fibonacci_inner(1, 1, 2);
}

console.time("fibonacci");
console.log(fibonacci(45));
console.timeEnd("fibonacci");
console.log(`the number of exec count is ${count}`);

每次递归都会带上前两次值的结果，最终只需要输出前两次结果的和就行。
看一下结果输出：

快的不是一点半点，从 29019ms 到 0.083ms 的提升。 而且也只计算了每个数各自的结果，没有重复计算。

然后我们多计算几组值

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

fibonacci(100)
the result is 573147844013817200000
fibonacci: 0.078857421875 ms
the number of exec count is 99

fibonacci(1000)
the result is 7.0330367711422765e+208
fibonacci: 0.1318359375 ms
the number of exec count is 999

fibonacci(5000)
the result is Infinity
fibonacci: 0.325927734375 ms
the number of exec count is 4999

到 fibonacci(5000) 时，结果已经超过 js Number 类型能表示的数量的最大上限 2^53 -1，
我们再改动一下代码, 使用 Bigint

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

let count = 0;
function fibonacci(n) {
  if (n === 0 || n === 1) {
    return 1;
  }

  /**
   * @param n2  当前计算数的前面第二个值
   * @param n1   当前计算数的前一个值
   * @param flag  当前计算到第几位
   * **/
  function fibonacci_inner(n2, n1, flag) {
    count++;
    if (flag === n) {
      return BigInt(n1 + n2);
    }
    return fibonacci_inner(BigInt(n1), BigInt(n1 + n2), flag + 1);
  }
  //从第二位开始计算
  return fibonacci_inner(1, 1, 2);
}

console.time("fibonacci");
console.log(`the result is ${BigInt(fibonacci(5000))}`);
console.timeEnd("fibonacci");
console.log(`the number of exec count is ${count}`);

结果为

1
2
3

the result is 6276302800488957086035253108349684055478528702736457439025824448927937256811663264475883711527806250329984690249846819800648580083040107584710332687596562185073640422286799239932615797105974710857095487342820351307477141875012176874307156016229965832589137779724973854362777629878229505500260477136108363709090010421536915488632339240756987974122598603591920306874926755600361865354330444681915154695741851960071089944015319300128574107662757054790648152751366475529121877212785489665101733755898580317984402963873738187000120737824193162011399200547424034440836239726275765901190914513013217132050988064832024783370583789324109052449717186857327239783000020791777804503930439875068662687670678802914269784817022567088069496231111407908953313902398529655056082228598715882365779469902465675715699187225655878240668599547496218159297881601061923195562143932693324644219266564617042934227893371179832389642895285401263875342640468017378925921483580111278055044254198382265567395946431803304304326865077742925818757370691726168228648841319231470626
fibonacci: 3.984130859375 ms
the number of exec count is 4999

那我们计算 fibonacci(10000) 怎样？
然后是

Maximum call stack size exceeded

又超过堆栈上限了，所以我们需要在做一次优化

优化二: 防止递归超过堆栈上限

这个时候需要用到一个思路，就是把递归时递归的函数暴露出来，交给外面去执行，把递归变成循环同步执行。
所以我们会用到一个 js 函数 bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

bind 会创建一个新的函数，bind 的第一个参数会作为创建函数的 this 值，其余参数会作为参数传递给新函数。
然后我们还会用到 trampoline 函数 蹦床函数这个说法，蹦床函数其实很简单，就是参数是函数就执行函数，参数是其他类型就返回。

再改动一下代码

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

// 蹦床函数
function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}

let count = 0;
function fibonacci(n) {
  if (n === 0 || n === 1) {
    return 1;
  }

  /**
   * @param n2  当前计算数的前面第二个值
   * @param n1   当前计算数的前一个值
   * @param flag  当前计算到第几位
   * **/
  function fibonacci_inner(n2, n1, flag) {
    count++;
    if (flag === n) {
      return BigInt(n1 + n2);
    }
    //返回的不是 fibonacci_inner 的执行结果，而是 fibonacci_inner 本身
    return fibonacci_inner.bind(null, BigInt(n1), BigInt(n1 + n2), flag + 1);
  }
  //从第二位开始计算
  return fibonacci_inner(1, 1, 2);
}

console.time("fibonacci");
console.log(`the result is ${BigInt(trampoline(fibonacci(10000)))}`);
console.timeEnd("fibonacci");
console.log(`the number of exec count is ${count}`);

看一下输出值：

1
2
3

the result is 54438373113565281338734260993750380135389184554695967026247715841208582865622349017083051547938960541173822675978026317384359584751116241439174702642959169925586334117906063048089793531476108466259072759367899150677960088306597966641965824937721800381441158841042480997984696487375337180028163763317781927941101369262750979509800713596718023814710669912644214775254478587674568963808002962265133111359929762726679441400101575800043510777465935805362502461707918059226414679005690752321895868142367849593880756423483754386342639635970733756260098962462668746112041739819404875062443709868654315626847186195620146126642232711815040367018825205314845875817193533529827837800351902529239517836689467661917953884712441028463935449484614450778762529520961887597272889220768537396475869543159172434537193611263743926337313005896167248051737986306368115003088396749587102619524631352447499505204198305187168321623283859794627245919771454628218399695789223798912199431775469705216131081096559950638297261253848242007897109054754028438149611930465061866170122983288964352733750792786069444761853525144421077928045979904561298129423809156055033032338919609162236698759922782923191896688017718575555520994653320128446502371153715141749290913104897203455577507196645425232862022019506091483585223882711016708433051169942115775151255510251655931888164048344129557038825477521111577395780115868397072602565614824956460538700280331311861485399805397031555727529693399586079850381581446276433858828529535803424850845426446471681531001533180479567436396815653326152509571127480411928196022148849148284389124178520174507305538928717857923509417743383331506898239354421988805429332440371194867215543576548565499134519271098919802665184564927827827212957649240235507595558205647569365394873317659000206373126570643509709482649710038733517477713403319028105575667931789470024118803094604034362953471997461392274791549730356412633074230824051999996101549784667340458326852960388301120765629245998136251652347093963049734046445106365304163630823669242257761468288461791843224793434406079917883360676846711185597501
fibonacci: 4.223876953125 ms
the number of exec count is 9999

然后 fibonacci(100000) 的值

有点像尾递归优化，之前 node 短暂的支持尾递归优化，就是递归的函数会替换掉调用函数的执行栈，后续貌似不支持了。。。

OK，现在递归应该没有啥问题了，实际已经不能称之为递归了，看起来是递归的写法，但是底层执行逻辑是循环，直接写循环也挺好的。

Done。

测试方案

• 创建长度为 len 的 Array 和 Map 结构，内容都相同
• 创建一个乱序的长度为 len 且内容都是 true false 各半的数组
• 循环乱序数组，如果为 true 则分别取 Array 和 Map 的值做拼接，测试最终的代码运行时间

Rander Array & Map

首先创建好我们的 Array 和 Map 结构

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

const BSAECHAR =
  "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let Ret = {}; //Array 和 Map 的输出集合
let len = 1000;

//在给定的集合中返回对应长度的 Array 和  Map
function randomString(length, chars) {
  let retArr = [];
  let retMap = new Map();
  for (let i = 0; i < length; i++) {
    let char = chars[Math.floor(Math.random() * chars.length)];
    retArr[i] = char;
    retMap.set(i, char);
  }
  return { arr: retArr, map: retMap };
}

console.time("render Ret");
Ret = randomString(len, BSAECHAR);
console.timeEnd("render Ret");

Random Array

然后定义我们的乱序数组，乱序函数使用 Fisher–Yates shuffle 洗牌算法

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

let RandomArr = [];

/**
 * Fisher–Yates shuffle
 */
function shuffle(arr) {
  let len = arr.length;
  while (len > 1) {
    let index = Math.floor(Math.random() * len--);
    [arr[len], arr[index]] = [arr[index], arr[len]];
  }
  return arr;
}

//创建一个乱序的长度为 len 且内容都是 true false 各半的数组
console.time("render RandomArr");
RandomArr = shuffle(
  Array(len / 2)
    .fill(true)
    .concat(Array(len / 2).fill(false))
);
console.timeEnd("render RandomArr");

Array benchmark

首先测试从 Array 中取值的时长

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
 * 从 Array 中取值
 */
function renderResultInArray() {
  let ret = "";
  RandomArr.forEach((item, index) => {
    if (item) {
      ret += Ret.arr[index];
    }
  });
  return ret;
}

console.time("array");
let retArr = renderResultInArray();
console.timeEnd("array");

Map benchmark

然后测试从 Map 中取值的时长

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
 * 从 Map 中取值
 */
function renderResultInMap() {
  let ret = "";
  RandomArr.forEach((item, index) => {
    if (item) {
      ret += Ret.map[index];
    }
  });
  return ret;
}

console.time("map");
let retMap = renderResultInMap();
console.timeEnd("map");

结论

然后执行程序进行输出：

貌似 Map 结构并没有说比 Array 取值快, WTF。

包名规范

即使是自己练手的项目，如果对包名不加限制的话，也很难管理和维护，所以可以通过增加和命名空间类似的 Scope 做限制。

egg:

• @sokiy-tools/switch-dns

• @sokiy-tools/ip-proxy

• @common-tools/test

登录私有源

1. Method 1：

   可以通过 nrm 添加私有源路径然后切换到对应私有源

   1	nrm add XXX YYY & nrm use XXX

   然后添加用户或者进行登录

   1 2	//添加 //登录 npm adduser or npm login

   然后输入账号名密码邮箱，添加账号密码自定义，登录时输入添加时对应账号的密码。

2. Method 2：

   1	npm adduser --registry http://xxxxxxxx

todo

• 想要合并本地的多次 commit 提交。
• 有几次的 commit message 写的有问题，想要进行修改。

修改 commit message

修改本地最新一次提交的 commit message

可以使用

1

git commit --amend

来针对最新一次本地的 commit message 做修改。

默认会打开编辑器界面，有可能是 nano，可以使用：

1

git config --global core.editor vim

设置默认的编辑器为 vim。

修改本地其中某一次的 commit message

假如我们本地的提交记录是

可以看到 local 相对于 origin 有三个提交没有 push。

可以使用

1

git rebase -i 2967706

2967706 这个 commit id 是本地分支记录里远程分支的最新一次提交的 commit id ，这是一个合并 commit 的操作，会把我们本地还未 push 的 commit 都包含进来，可以用这个操作修改其中某次的 commit message。

执行 git rebase -i 2967706 命令后，我们可以针对未提交的 commit meaasge 做修改。

然后把 9ec87bb 前面的 pick 改成 reword 或者 r

r, reword = use commit, but edit the commit message

列出的 commit 记录是最新的在最下面。然后会弹出 vim 编辑界面，改完之后保存并退出。

然后就会变成

发现我们修改的那次提交的 commit id 和它之后提交的记录的 commit id 都变了。

合并 commit 提交记录

拿上面修改的 commit 做一次合并提交，把本地的三次提交合并到一次提交。

使用

1

git rebase -i 2967706

弹出编辑界面，保存并退出。

回车之后又出现编辑界面，因为我改了最新的一次提交由 pick 改成了 record 。

终端输出

然后提交修改

1

git push origin master

It’s Done

已经 push 到远程的 commit 记录，还是不建议改了。强行改其他协同的人要哭了。

CSRF（Cross-site request forgery），中文名称：跨站请求伪造。
可以在 B 网站利用 A 网站的 cookie 去做一些针对 A 网站的操作,但这用户是没法感知的

攻击方式

举个栗子

小明在 A 网站登录买了一个 8848 钛合金手机,准备在朋友面前装个逼, 美滋滋的下了单,填好收货信息付了款之后没有关闭 A 网站的页签(有时候关了页签 cookie 也还是会存留一段时间的),然后在 B 网站开始溜达, 但是恰好 B 网站就是针对 A 网站做的一个钓鱼网站, 里面有一个按钮链接是修改已经登录了 A 网站用户的收货信息的, 这个链接对小明是迷惑的,比如就是一个链接到 NSFW 网站的地址,小明点了进去然后发送了一条请求(相同的路径和参数)给 A 网站, 因为 A 网站没有做 CSRF 防护, 导致这条请求会携带 A 网站的 cookie, 那么 A 网站会认为这个请求就是该用户发起的, 所以地址修改成功, 到时候小明就是人财两空

核心原理

就是在 B 网站点击一个带有 A 网站请求的链接时, 这条链接会带上 A 网站的 cookie,就相当于你访问了 A 网站的那条链接, 这个时候 cookie 会自动带上的

防护措施

服务端生成一个随机的 csrftoken, 这个只要是随机的都成,
然后用户在登录的时候,把这个值放在响应头的 set-cookie 中,然后客户端在请求接口的时候从 cookie 中拿出这个值,放在请求头的 header 中(不是 cookie 里面,是 header 里面,放到 cookie 里面一点用都没),

B 网站是只能用 A 网站的 cookie,
用的意思是 B 网站只知道在 B 网站访问 A 网站的链接,是可以带上 A 网站的 cookie 的,但是这个 cookie 的内容, B 网站是没法感知的,当然也是不能操作的

所以当把 csrftoken 放到请求 header 中的时候, B 网站中点击 A 网站的链接是没法去传递这个值的, 然后后端再去校验 csrftoken 的值是否正确就行。

所有的设计最终一定是符合大众对事物的认知的，一定是满足大部分人的使用习惯的。
「平平淡淡才是真」

为什么需要 package-lock.json

在 npm 5.0 版本之前，如果在 package.json 中某个依赖库版本加上 ^ 或者 ~ 的前缀，那么下次安装的时候，如果该依赖库有升级，那么默认就会安装符合前缀要求的最新的版本，这样就可能导致同一个 package.json，在不同时间安装的依赖库版本号可能不一致。所以 npm 对版本号的命名做了一些规范，小版本号之间的升级只是做一些小改动，不要影响之前版本的运行

但是

「理想往往会被现实打脸」
因为只是规范，没有强约束（也没法强约束），架不住有的依赖库作者不按这个来。
所以就必须锁住版本，就直接在项目中不要用 ^~ 等前缀，写死版本号，这样就没啥问题了。

但是

npm 不能这么干啊，npm 要这么干那都得乱套，所以就新增一个版本锁文件吧（我猜的）
那不就是 package-lock.json

善变的规则

npm 5.0 - 5.6 中间，群魔乱舞，package-lock.json 的处理逻辑一直在改。

• 要么是升级了 package.json 的版本号，然后再次安装的时候，还是之前的版本（因为 package-lock 就是之前的版本）。
• 要么是 package-lock 文件就是个摆设，npm install 的时候无论 package-lock 文件是怎么样的，默认都会安装最新版本

5.6 之后的规则终于符合大众的认知了， 当 package.json 没有更新的时候，默认安装 package-lock 中指定的版本，如果 package.json 有更新，则安装 package.json 中的版本，然后同步到 package-lock 中。

起码从我的认知来讲，这样是最合适的，又能锁版本，又能更新版本。

个人理解: 用一种描述性的语言定义一个规则,去匹配需要匹配到的字符串的子串
匹配ip地址的思路

维度切分

要匹配 0.0.0.0-255.255.255.255,可以先匹配 0-255,这一个区间,然后向ip去扩展.

要匹配 0-255,不能直接去匹配255,正则本来就是一个规则,255这个数字不是很规则,因为数字是从0-9,直接去匹配符合小于255的数字显然是不太切合实际的,可以再做维度切分.
可以把255切分成几层。

举例

举个例子,不一定要按这个来
255拆分成
0-9
10-99
100-199
200-249
250-255
然后对应的正则就是

1
2
3
4
5

[0-9]         //对应0-9
[1-9][0-9]    //对应10-99
1[0-9]{2}     //对应100-199
2[0-4][0-9]   //对应200-249
25[0-5]       //对应250-255

然后拼接这个正则表达式

1
2

(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]|[0-9])  
([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])  //这两种都行,只不过不加^$开始结束符号的时候,匹配到的子串不同

匹配0-255加.

1

(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.)

然后组装IP匹配的正则

1

/^((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))$/im

齐活