一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Others - Page 5 | Spark1e的个人博客

## 依然先说结论

UWP应用是一类特殊的应用，Windows会限制其在使用代理时使用127.0.0.1的回环地址，因此需要使用第三方工具开启回环代理或者修改注册表，考虑到修改注册表危险性较高且不便于操作，这里转载来自[Qv2ray](https://qv2ray.net/getting-started/step4.html#%E4%BD%BF%E7%94%A8%E7%B3%BB%E7%BB%9F%E4%BB%A3%E7%90%86)的解决方案。

## EnableLoopback

这是一个来自Fiddler的项目，用来调试UWP应用，也可以为我们简单的开启本地代理。

> Qv2ray给出的下载地址：[链接](https://qv2ray.net/EnableLoopback.zip)
> 上传到本站的地址：[链接](https://cdn.arc-light.fun/E2itoL/EnableLoopback.exe)

打开后在左侧的应用名称找到Microsoft Todo（或者其他的UWP应用名），勾选并点击"Save Changes"，即可开启127.0.0.1的本地代理权限。

![使用工具打开UWP的proxy](https://cdn.arc-light.fun/PSvgEE/enable-uwp-proxy.png)

有关于UWP应用联网的问题

## 如果你还没有被自动更新

你可以选择Fast Cycle或者使用Beta版尝鲜新Edge，这样的Edge版本不需要进行额外的操作，即可与旧版本兼容并存。

## 如果你已经通过Windows Update自动更新

那么就需要通过注册表修改使其并存。

首先找到注册表的这个位置：

`HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft`

在左侧的`Microsoft`项右键，选择“新建” > “项”，命名为EdgeUpdate。

在右侧窗口，右键，新建DWORD（32位）值，命名为`Allowsxs`，双击修改值为1（保持16进制不变）。

最终成果如图：![注册表最终修改](https://cdn.arc-light.fun/DD5JPL/dual-edge-reg.png)

## 如果操作完成后开始菜单仍找不到“Microsoft Edge 旧版”

在“设置” > “应用和功能”找到新版Edge，点击修改，（如果有卸载可以尝试卸载），再重新安装即可双版本共存。

![双版本共存](https://cdn.arc-light.fun/S3ReV0/dual-edge-final.png)

配置MS Edge双版本并行

> 如果英文能力还可以的同学可以直接移步 [官网文档](https://forestry.io/docs/welcome/)

## 原来的写博客方式

现在比较多的写博客模式是利用Github仓库，连接Github Page或者一些第三方服务如Netlify, Vercel(Now.sh)来进行部署，写好文章提交后的流程已经基本自动，而且大部分平台的服务都是免费的。

> 博主之前使用Vercel部署时，需要注意免费计划 **每个小时不能超过30次构建部署** 。

然而写博客主要是内容，那么书写平台就是一大问题，我们虽然可以用本地IDE（亦或是Code Server/VSCode Remote）这一类工具进行编写，但是未免仍不够轻量，如果是iPad这一类移动设备更是不方便，因而，我发现了这个基于Git的第三方编辑平台—— [Forestry.io](https://forestry.io)

## 快速上手

Forestry.io支持四种Git来源：Github, Gitlab, Bitbucket, Azure Devops。

一般作为博客我们使用Github，继续后会进入到Github的授权界面，授权即可。

> 默认的授权是读取Public库，如果你需要也可以在CMS左侧的Settings中选择授权Private仓库。

> 如果是Bitbucket和Azure Devops，可能需要更复杂的设置，我没有使用过，可以参考官方文档。

授权完成后，可以进入Dashboard，选择Add Site。

本篇以一个GatsbyJS的模板项目为例子，Hexo，Hugo，Jekyll官网上都有相关的例子可以参考。如果你是Hexo，请选择Other类别。然后点击Next。

![选择静态生成框架](https://cdn.arc-light.fun/ACvJrn/forestry-step1.png)

进入到“Select your git provider”界面，和原来一样，选择你的Git来源，这里我选择Github。

第三步就来到了仓库选择，直接选择你想要操作的仓库与分支，如果你不想让Forestry提交commit到master，请在此选择一个编辑分支。

![选择仓库与分支](https://cdn.arc-light.fun/px985W/forestry-step3.png)

导入完成，进入到CMS的主界面。

![CMS主界面](https://cdn.arc-light.fun/mrnxZc/forestry-step4.png)

## 简单设置

如同上面的CMS显示，我们只要将剩下三步配置完成即可。

### Set up sidebar

侧边栏是一些快捷入口，这里你可以配置三类：

![侧边栏配置](https://cdn.arc-light.fun/DzKWqf/forestry-setting1.png)

* 目录: 顾名思义，目录可以用作分类等场合，对应的，所有在分类下创建的文档都会进入到对应的目录下；
* 文档: 直接编辑某一篇文档，适合作为介绍页或者文档页的快捷入口；
* Heading: Heading是一个 **没有内容** 的侧边栏选项，适合作为分割线等等，来定制你的侧边栏；

这里添加一个Section，可以看到可以配置很多项，一般默认即可，如果不希望分类下额外存在目录，可以将创建内容改为Documents

![创建侧边栏](https://cdn.arc-light.fun/KEXWaw/forestry-setting2.png)

这里我们先不配置默认模板，先保存。

### Import Media

重头戏来了，之所以选择一个CMS，最重要的就是我们很多时候有上传图片的需求，但是无论是Git手动提交还是第三方工具上传，都费时费力，还需要手工粘贴图片的绝对地址。

而有了CMS，这一切都简化了。

![](https://cdn.arc-light.fun/ks36HG/forestry-setting3.png "配置媒体文件")

如图所示，可以支持四种图片管理方式，最普通的Git提交，第三方支持了Cloudinary和Amazon S3以及Netlify Large Media。

> Cloudinary可以免费试用，它是一个积分制的服务，如果你的博客流量较小，那么它的免费量其实足以；
>
> Amazon S3这里特别提一下，目前有很多VPS厂家会提供Object Storage，他们会提供类似S3的管理方式，但是咨询了Forestry.io的技术支持后，明确表示了 **目前支持的S3仅有Amazon，即你暂时无法通过配置其他域名来实现其他S3的配置** 。

如果配置顺利，在“可视化编辑器”内，你就可以点击这里实现上传直接插入文档中：

![](https://cdn.arc-light.fun/JatvkA/forestry-setting4.png "添加图片")

点击open后，会跳转到你的媒体库，上传即自动插入到文章中。

## 配置预览

Forestry.io支持在发布前进行预览，需要配置预览的相关命令，环境以Node.js为主，也可以进行自定义，本章内容建议详细参阅官方文档的 [配置页面](https://forestry.io/docs/previews/instant-previews/)

## 设置文章模板

这一章也是非常重要的，我们在前面的Section里可以设置默认模板，这就是为了方便统一类别下的文章格式一致(Front matter)，点击左侧的Front matter进入配置界面。

点击添加模板后，可以全新创建，也可以从已有的文章自动分析。

> 我自己使用时发现，文本编辑的识别率较好，如果是类似标签选择的则会识别错误，建议先导入，然后添加一篇新文章进行测试。

一般对于Markdown的博客写作，我们选择左侧的“Fields and big content area”。

![](https://cdn.arc-light.fun/Z721sM/forestry-setting5.png)

Forestry.io提供了一些Field选项，对于博客写作，它们可以与你的Front matter一一对应，通过交互实现配置Front matter，进而与你的博客主题（如Banner图，文章简介等等）比较好的对应，具体使用可以自己体验一下。

使用forestry.io管理你的博客

## 开篇先说结论

结论是：AX200在连接RM2100(Padavan)的5G 160Mhz无线信号时，出现跳ping（波动至250+）。

解决方案：设置RM2100的5G WiFi以20/40/80Mhz使用，目前跳ping得到缓解。

更新：使用了恩山的“啊Dee”的Padavan固件，稳定使用160Mhz，给一个[论坛链接](https://www.right.com.cn/forum/thread-4033492-1-1.html) 如果后续遇到新的问题会在本文中更新。

## 我的网络搭配

红米 AC2100主路由，刷入[C大的Padavan固件](https://github.com/chongshengB/rt-n56u/releases)，不开启任何插件的情况下，打开5G的20/40/80/160Mhz自动协商 ；

主机由于一居室的距离问题，因而加装了一个无线网卡（COMFAST AX200），测速和日常直播没有感受到速度问题，偶尔出现无法打开页面的情况，考虑到AC2100的CPU比较差，关闭了SmartDNS等插件。

而后，平时页面打开出现无法打开情况减少，但跳ping情况依然明显，在游戏(Insurgancy第三方服务器)内ping会几分钟内突然飙升至250左右，网页同时也速度极慢。

更新固件，修改信道等等方案都尝试后，决定降级到20/40/80Mhz自动协商，跳ping状况基本解决，不更改AX200配置的情况下，稳定在80Mhz传输。

## 后续更新驱动

希望后续能有稳定的AX200驱动能够支持ac模式下的160Mhz。不过目前来看各大第三方都不够稳定，个人使用C大的0604版还可以接受，地址上方自取。

目前来说，AC2100适合折腾人士，如果作为家里主路由的还不够稳定,刷入第三方后又不容易支持加速器等。

红米RM2100+AX200诡异跳ping问题

## 写在前面

在我个人使用VPS时，一开始的思路时独立尽可能少的服务到独立的VPS内，这导致我有很多最低配的服务器，服务没用到的时候其实运行负载并不高，低配置又不能支持诸如Sentry等服务的启动，因此，采用Docker将同类型的服务进行合并是更好的策略，但随之而来的是需要对配置有合理的规划

## 为什么先写Nginx

首先我们要清楚一点，Docker的部分权限是和系统平级的，比如 __防火墙__ (操作端口时会同时添加iptables)，这导致如果只做简单映射，就会把对应端口暴露在外网，需要限制哪些服务可以通过外网访问，哪些服务只暴露对应端口给Dashboard。

> 请在平时启动Docker容器时，不想暴露到外网必须指定port的时候加127.0.0.1。

> 如果端口只暴露而不需要映射到主机端口，请使用`--expose`代替`-p`。

## 默认配置

最方便的方式其实就是从已经运行的默认nginx镜像复制一份配置文件出来

```bash
dokcer cp YOUR_NGINX_ID:/etc/nginx/conf.d/default.conf ./
dokcer cp YOUR_NGINX_ID:/etc/nginx/nginx.conf ./
```

## 配置方案

由于是同一机器上多个容器，因此只将Nginx暴露到外网，其他容器均由Nginx进行反向代理。

端口之间各种复杂的映射并不是最好的办法，选择有两种：

- Nginx安装在实际的机器内，反代各种Docker容器；
- Nginx以容器形式安装，通过网络或者link方式组成一体的网络；

我的机器为了统一管理，这里选择第一种。

利用Docker管理VPS——Nginx篇

### 已解决

* Q: 用JS实现一个函数，能使输入特定的字符串转化为特定结构化数据。

  字符串仅由小写字母和`[,]`构成，且字符串不包含多余的空格

  示例一：`'abc'` -> `{value:'abc'}`

  示例二：`'[abc[bcd[def]]]'`-> `{value:'abc',children:{value:'bcd',children:{value:'def'}}}`

  A:

  ```javascript
  // 类比AST，将输入转换为一系列操作
  function normalize(str) {
    let parent = {}
    // 所有括回均不需要，直接移除
    parent.children = _normalize(str.replace(/\]/g, ''))
    return parent.children
  }
  
  function _normalize(str) {
    // [abc[bcd[def]]] => {value: "abc", children: {value: "bcd", children: {value: "def"}}}
    // 不具有树形结构直接返回
    let obj = {}
    if(str.charAt(0) !== '[') {
      obj.value = str
      return obj
    }
    // '['开始, 找到之后的连续字符串
    let arr = str.split('[')
    let _val = arr[1]
    // 截取剩下的部分再进行递归
    let rest = ''
    for(let i = 2; i < arr.length; i++) {
      rest = rest + '[' +arr[i]
    }
    if (rest === '') {
      return {value: _val}
    }
    return {value: _val, children: _normalize(rest)}
  }
  
  normalize('[abc[bcd[def]]]')
  // normalize('def')
  ```
  
* Q: 模仿lodash内调用curry函数，实现一个myCurry？

  A:

  > 墙裂推荐这篇[译文](https://www.jianshu.com/p/822c4bfeb8a9)，将柯里化的思考过程逐步展现出来
  
  > 本题解法来自《JavaScript轻量级函数式编程》

  ```javascript
  // lodash: _.curry(func, [arity=func.length])
  // 实现两点：1. 参数复用——可固定参数，2. 延迟计算——返回最终函数触发计算
  // 原型实现：
  function curry(fn, arity = fn.length) {
    return (function nextCurried(prevArgs) {
      return function curried(nextArg) {
        var args = prevArgs.concat([nextArg])
        if(args.length >= arity) {
          return fn(...args)
        } else {
          return nextCurried(args)
        }
      }
    })([])
  }
  // 注意：偏函数partial(add, 3)和柯里化curry(add)(3)的区别
  ```
  
* Q: 在不使用slice，replace等原生函数的情况下，实现一个indexOf方法（本题来自“司徒正美”的[博客](https://www.cnblogs.com/rubylouvre/archive/2011/08/19/2144894.html)）？

  A:
  ```javascript
  function getSubStrArr(str, length) {
    var subStrArr = []
    if(!length || length === 0) return subStrArr;
    for (var i = 0; i < str.length - length + 1; i++) {
      if(length > 1) {
        var tmp = [];
        for(var j = 0; j < length; j++) {
          tmp.push(str.charAt(i + j));
        }
        subStrArr.push(tmp.join(''));
      } else {
        subStrArr.push(str.charAt(i));
      }
    }
    return subStrArr;
  }

  function myIndexOf(str, target) {
    if(target === '' || target === undefined) return flag;
    var flag = -1
    var subStrArr = getSubStrArr(str, target.length);
    for(var i = 0; i < subStrArr.length; i++) {
      if(subStrArr[i] === target) {
        flag = i
      }
    }
    return flag
  }
  console.log(myIndexOf('abcdefgh', 'cde'))
  ```
  
* Q: 简单手写实现bind

  A: 见 [实现bind](https://blog.sparking.app/post?id=fe%252Fspeaking-javascript-%25E9%2598%2585%25E8%25AF%25BB%25E7%25AC%2594%25E8%25AE%25B0-%25E4%25B8%2589)
  
* Q: 如何获取两个时间（格式如: 2001-01-30）中间相差的年月日（提供三个精度）

  A:
  ```javascript
  // 这道题投机的方式是通过字符串与年月日格式的硬匹配完成，但是如果要求多种精度，则需要很繁琐，建议使用Date
  function parseDate(str) {
    let strArr = str.split('-')
    if(strArr.length !== 3 || parseInt(strArr[0]) < 1970 || parseInt(strArr[1]) > 11 || parseInt(strArr[2]) > 31 ) { // 简单处理，兼容如果当月没有此日期
      throw new Error('日期格式非法')
    }
    let date = new Date(strArr[0], strArr[1]-1, strArr[2])
    return date;
  }

  // 深拷贝日期对象
  function dateToString(_date, unit) {
    var _d = new Date(_date.valueOf());
    var _dStr = ''
    if(unit > 0) _dStr += _d.getFullYear();
    if(unit > 1) _dStr += ('-' + (parseInt(_d.getMonth()) + 1 >= 10 ? (parseInt(_d.getMonth()) + 1).toString() : '0' + (parseInt(_d.getMonth()) + 1).toString()));
    if(unit > 2) _dStr += ('-' + (parseInt(_d.getDate()) >= 10 ? parseInt(_d.getDate()).toString() : '0' + parseInt(_d.getDate()).toString()));
    return _dStr;
  }

  // unit指精度, 从1-3分别指年月日，函数返回一个数组，包含中间所有的相差的日子
  function minorDates(start, end, unit) {
    var _u = unit || 3;
    var _start = parseDate(start)
    var _end = parseDate(end)
    var _minors = []
    var _minorDate = _end - _start
    var step = 24 * 60 * 60 * 1000; // default 一天
    if(_minorDate <= 0) {
      return _minors
    } else {
      for(var i = 0; i < _minorDate / step; i++) {
        var _d = dateToString(new Date(_start.getTime() + i * step), unit)
        if(_minors.indexOf(_d) === -1) _minors.push(_d);
      }
    }
    return _minors
  }

  console.log(minorDates('2019-02-25', '2020-02-25', 3))
  ```

### 来自前端面试周报的题

> 本篇主要记录 Github airuikun/[**Weekly-FE-Interview **](https://github.com/airuikun/Weekly-FE-Interview) 仓库内的优秀面试题我自己的解法，会持续更新，但是不会每题都解一遍，建议可以访问源仓库。

* Q: 简单手写实现Promise

  A:

  ```javascript
  // 实现主要三个功能，thenable，resolve，reject，catch，finally
  ```
* Q: 简单手写实现Async/Await

  A:

  ```javascript
  
  ```

### [掘金](https://juejin.im/) 日常浏览的题目

* Q: Promise题

  **限制异步操作的并发个数并尽可能快的完成全部**

  有8个图片资源的url，已经存储在数组urls中。

  urls类似于`['https://image1.png', 'https://image2.png', ....]`

  而且已经有一个函数function loadImg，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。
  但有一个要求，任何时刻同时下载的链接数量不可以超过3个。请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

  > 作者：LinDaiDai_霖呆呆
  >
  > 链接：https://juejin.im/post/5e58c618e51d4526ed66b5cf
  >
  > 来源：掘金

  A:

  ```javascript
  // 最优解法可以往瀑布流靠拢，有一个三个任务race的池，当一个完成时加入一个未开始的开始。
  ```

### 大厂面试题

_本节内容来自网络_

前端部分面试题解（不定期更新）

## SaaS (软件即服务：Software as a Service)

> 举个不是非常恰当的例子，我想吃汉堡，我去汉堡店直接点汉堡，这是提供了“产品”来使用。

比如“石墨文档”这一类的在线应用，使用了他人提供好的成品软件，底层硬件和运行环境都交由平台管理，这种模式可以称为SaaS。

## PaaS (平台即服务：Platform as a service)

> 还是汉堡的例子，我觉得汉堡店的汉堡没那味儿，找了个可以DIY的店，这家店不提供成品的汉堡，但是会给我炉灶、炊具之类的，还有相关的材料，我可以自己做出自己需要的汉堡，这里提供了“平台”。

比如国外已经商业化的平台Heroku，这里并不需要用户去配置底层的硬件，只需要在容器内编写业务所需的代码即可。底层的操作系统、语言支持、硬件环境均由平台管理，这种可以称为PaaS。

## laaS (基础设施即服务：Infrastructure as a Service)

> 我觉得DIY的也不够好吃，想了想决定组一片地自己种原料自己管理店铺，自己组装一条生产线专门生产自己喜欢的汉堡。这些资源可以产出各式各样的产品，但是我只是借助它的“基础设施”完成我的需要，这种可以称为laaS。

比如目前的云平台，国外的DigitalOcean等，提供实际的基础设施，用户可以将自己的服务部署在相应的机器上使其运行并得到我们需要的结果，这种可以称为laaS。

## 其他新兴的模式

- 桌面即服务（DaaS）
- 无服务器计算（Serverless or FaaS）
	> 无服务器运算（英语：Serverless computing），又被称为功能即服务（Function-as-a-Service，缩写为 FaaS），是云计算的一种模型。以平台即服务（PaaS）为基础，无服务器运算提供一个微型的架构，终端客户不需要部署、配置或管理服务器服务，代码运行所需要的服务器服务皆由云端平台来提供。—— Wikipedia
- 安全即服务（Security as a service，SECaaS）
- 后端即服务（BaaS）
- 容器即服务 （Containers-as-a-Service）

SaaS, laaS, PaaS这些名词的快速理解

- 将端口添加到区域（永久 `--permanent`）
    ```bash
    firewall-cmd --zone=public --add-interface=eth0
    ```

- reload防火墙
    ```bash
    firewall-cmd --reload
    firewall-cmd --complete-reload # 需要断开链接
    ```
    
- 查看指定区域所有打开的端口
    ```bash
    firewall-cmd --zone=public --list-ports
    ```
    
- 在指定区域打开端口
    ```bash
    firewall-cmd --zone=public --add-port=80/tcp # (永久生效再加上 --permanent, udp设置同理)
    ```
    
- 查看防火墙状态
    ```bash
    systemctl status firewalld
    # firewall-cmd --state
    ```
    
- 防火墙启动/禁用等
    ```bash
    systemctl start firewalld # 启动防火墙
    systemctl stop firewalld # 禁用防火墙
    systemctl enable firewalld # 设置开机启动
    sytemctl disable firewalld # 停止并禁用开机启动
    firewall-cmd --reload # 重启防火墙
    ```

CentOS服务器配置防火墙

### git基本概念

### 设置git信息
- `git config --global user.name "[name]"`
  设置提交时的用户名
- `git config --global user.email "[email]"`
  设置提交时的用户邮箱
- `git config --global color.ui auto`
  设置命令行颜色

### 新建仓库
- `git init [project-name]`
  代码文件夹初始化git
- `git clone [url]`
  克隆项目仓库（包含整个版本信息）

### 修改
- `git status`
  列出所有即将被提交的新建和更改的文件
- `git diff`
  显示所有未加入暂存区的差异
- `git add [file]`
  1. git add -A: [`<path>`]表示把`<path>`中所有tracked文件中被修改过或已删除文件和所有untracted的文件信息添加到索引库。
  2. git add -i: [`<path>`]查看`<path>`中被所有修改过或已删除文件但没有提交的文件，并通过其revert子命令可以查看`<path>`中所有untracted的文件，同时进入一个子命令系统。
- `git diff --staged`
  显示暂存区文件与最新文件版本的差异
- `git reset [file]`
  取消文件暂存，但保留其内容
- `git commit -m "[descriptive message]"`
  1. `-m`指后面可以直接输入message，否则需要调用编辑器
  2. `-a`命令后，与单独执行`git add`类似，但不会将新文件加入暂存区，因而不推荐使用
  3. `-v`命令可以在提交时显示所有diff信息

### 分工协作
- `git branch`
  默认无参数时，列出所有本地的当前仓库的分支
- `git branch [branch-name]`
  在本地创建一个新的分支
- `git checkout [branch-name]`
  切换到指定的分支并更新当前工作区
- `git merge [branch]`
  将指定分支的代码历史拼合到当前分支
- `git branch -d [branch-name]`
  删除指定的分支（慎用）

### 文件编辑
- `git rm [file]`
  将文件从当前工作区删除，暂存删除操作
- `git rm --cached [file]`
  将文件从版本控制中移除，但本地保留文件
- `git mv [file-original] [file-renamed]`
  修改文件名称，准备提交

### 跟踪设置
- `.gitignore`
  设置当前目录下版本控制自动忽略的文件，后缀或指定文件夹均可 
- `git ls-files --other --ignored --exclude-standard`
  列出当前项目下所有忽略的文件

### 碎片储存
- `git stash`
  临时保存所有的已跟踪的修改，以下命令都可以通过传入@n删除指定的更改
- `git stash pop`
  恢复最近一次暂存的修改，并从栈中移除
- `git stash list`
  列出栈中所有已暂存的修改条目
- `git stash drop`
  直接放弃最近一次暂存的更改

### 查看历史
- `git log`
  列出当前分支的版本历史
- `git log --follow [file]`
  列出指定的文件的版本历史，包括重命名
- `git diff [first-branch]...[second-branch]`
  显示两个分支的内容差异
- `git show [commit]`
  输出指定提交的metadata以及内容变化

### 撤销操作
- `git reset [commit]`
  撤销指定`[commit]`后所有的提交，保留本地更改
- `git reset --hard [commit]`
  删除所有的更改和历史，回退到指定的`[commit]`

### 同步更改
- `git fetch [bookmark]`
  下载从`[bookmark]`所有的更改历史
- `git merge [bookmark]/[branch]`
  组合`[bookmark]`分支到当前分支
- `git push [alias] [branch]`
  上传所有本地分支的提交到git服务器
- `git pull`
  下载书签历史以及非协作变化

Spark1e

Category: others