第1期 - 从零开始的异世界生活开篇本周一如往常，学习和生活也在持续，本周被一些事情所引导，出现了难得的那种注意力集中的

开篇

本周一如往常，学习和生活也在持续，本周被一些事情所引导，出现了难得的那种注意力集中的时间，有时候想想要是把这种注意力放到正确的事情上，可能会更好。

技术类

算法

Javascript数组sort排序算法如何实现？

现代浏览器大部分使用的都是V8引擎，但是V8引擎也是存在版本区别，所以不同的版本算法实现可能存在不同，Chrome浏览器可以通过chrome://version，找到Javascript V8引擎的版本

MDN-Array.prototype.sort()存在两个要点：

1）Array.prototype.sort接受的参数是一个排序函数compareFunction(a, b)，该排序函数需要遵循的规则：函数需要返回大于0，等于0，小于0三种情况，对于相同的a, b，计算后返回的结果应该相同。

2）Array.prototype.sort根据排序函数compareFunction返回结果，按照以下逻辑进行排序：

1. 如果大于0，将a, b进行位置交换
2. 如果小于0，则a, b位置保持不变
3. 如果等于0，则a, b位置保持不变

一般排序函数我们会使用(a, b) => a - b，这就是标准的升序排列

那么核心的要点，具体的Array.prototype.sort函数，在V8引擎中源码是怎么样的呢？

V8源码，注意选择代码分支，比如我的版本：8.9.255.20，所以分支选择：8.9.255，/third_party/v8/builtins/array-sort.tq，简单对源码进行拆分：

1） L1377定义了ArrayPrototypeSort，其中使用了名为ArrayTimSort的方法进行排序

2）L1246，ArrayTimSort的实现过程为使用名为BinaryInsertionSort的函数

3）L500开始核心的排序算法

参考：掘金-V8源码解析之Array.prototype.sort，这篇文章有更详细的解释和扩展

PS：实话是说，算法对现在的自己来说看起来还是很痛苦，因为大脑要去理解的时候，总是会按照代码运行的过程去模拟（大概就是所谓的算法可视化），这样的思考方式就降低了理解过程，很想知道这是不是唯一的思考模式。

前端静态服务

前端SPA应用构建（build）以后，本地想看构建的结果是否符合预期，于是需要本地启动静态服务器，本周尝试了以下四方案：http-server, webpack-dev-server，手写Express Server，Nginx

由于SPA应用的特性，选择的静态服务器的关键是需要解决请求代理的问题（因为输入的浏览器URL都要代理到index.html，再利用SPA的路由去解析）

1. http-server

http-server，很通用的静态资源服务解决方案，通过增加参数-P或者--proxy可以将所有的无法解析的请求都打到配置的地址

安装
npm install -g http-server
使用
http-server -p 9000 -P http://xxxxxxxx

但是该方案不能应对项目中请求多个代理地址的情况（从源码层面分析，只创建了一个Proxy）

PS：代理方案代码实现使用了http-proxy的库，具体可参见http-server源码

2. webpack-dev-server

webpack-dev-server，webpack打包后的本地项目，基本都是使用改方案去运行

安装
npm install -g webpack
// 由于webpack命令行都依赖webpack-cli，所以必须安装webpack-cli，否则各种报错
npm install -g webpack-cli

使用
webpack serve

使用webpack需要添加webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    historyApiFallback: true, // history模式SPA需要配置
    proxy: {
      '/app': { target: 'http://xxxxx', changeOrigin: true },
    }
  }
};

注意设置changeOrigin:true，来覆盖默认的保留保留主机头来源行为，否则本地使用虚拟地址（IP / localhost）启动的时候，代理无法正常运行

可以配置多个请求代理了，但是由于本次SPA项目，不是通过webpack打包出来的，所以配置中historyApiFallback:true无效，没办法将非接口请求都代理到index.html

PS：webpack-server的代理方案使用了：http-proxy-middleware具体代码位置可参见webpack-dev-server源码

3. 手写Express Server

由于Node本身就可以创建和启动服务，所以利用http-proxy-middleware + Express（express.static），手动搭建一个简单的静态服务

// include dependencies
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

// proxy middleware options
const options = {
  target: 'http://xxxx', // target host
  changeOrigin: true, // needed for virtual hosted sites
  pathRewrite: {
    '^/app/xxxx': '', // rewrite path
  },
};

// create the proxy (without context)
const exampleProxy = createProxyMiddleware(options);

// mount `exampleProxy` in web server
const app = express();
app.use('/app/xxxx', exampleProxy);
// 将非匹配请求都代理到当前都dist目录下，默认会加载dist目录中都index.html
app.use('/',express.static('./dist/'));

app.listen(9000);

具体代码在参照了http-proxy-middleware的示例基础上进行了调整，修改后符合了自己想要的简易逻辑

PS：http-proxy-middle代理方案底层使用的仍然是http-proxy，具体可参见http-proxy-middle源码

4. Nginx

Nginx反向代理，之前使用过改方案来解决，配置方式同3中类似，将所有非后端接口/资源请求请求都打到index.html即可。

其他

MacOS中nvm默认路径

nvm路径
/Users/<username>/.nvm

不同node版本路径：
/Users/<username>/.nvm/versions

<username>用当前系统用户名称进行替换

非技术相关

国际局势的变化

从疫情以后，从理性都来看国际局势确实在发生变化，这些变化注定会影响到我们的生活，最近通过B站在补充一些信息，虽然都是些希望我们看到的内容，但是风向标的变化还是很明显的。

沈逸老师B站的视频风格挺解压的，扩展国际局势认知还是挺有意思的，本周推荐: 沈逸：全球网络空间治理改革，能“革”掉美国的网络霸权吗？这个视频真的挺硬核的，不过对于视频观点，最好还是要学会自我理解和分析。

币圈的暴涨和暴跌

最近有在围观币圈的事情，在围观的过程中，对于上涨带来的兴奋感和下跌带来的挫败感，可能这个时候让人觉得有活着的感觉，而且这种单纯数字的上涨，能强力的刺激脑部，带来很微妙的情绪变化（丧失理智）。

经济学和心理学真的是特别需要好好学习的学科