hash 路由锚点

浏览器在通过 # 改变 url 的时候（比如 a 标签锚点），会不可避免（至少到本文时间 2023-07-21 是如此）地改变页面的滚动位置，没有办法可以阻止这个行为。即使通过监听 hashchange 来 preventDefault 事件也不会生效。

所幸，浏览器的 location 提供了 pushState 和 replaceState 方法，如果通过这两个方法改变 hash，是不会导致页面跳转的。（当然 history 对象也可以）

用例：

1

location.pushState('', '', hashUrl)

但如果使用这种方法，会导致 vue-router 无法监听到 route 的改动，所以这个属性也不会触发响应式的变化。

我发现 VuePress 内部实现了这样的改变 # 路由页面不滚动的方法，去翻看了一下源码，发现 Vue Router 中存在一个 scrollBehavior 的属性，允许自定义路由跳转时页面滚动的位置，或者是否触发。之后发现它可以返回一个 { el: hashName } 的对象用作滚动，我就知道这也是使用了 pushState ，移除了 # 的影响，之后再自己使用 window.ScrollTo 来做一个手动跳转。其实和我自己的实现是一致的，只是自己的实现无法告知 Vue Router。

另外尝试了一种办法：监听 hashchange

所有 # 路由不再特殊处理，只是在页面滚动时候。记录当前位置，在 hash 跳转的时候，页面已经做完滚动更新之后，再自己使用 scrollTo 跳转到之前记录的位置，从而看上去位置没有变化，但实际上这种方法页面会有一个一闪而过的效果，体验不是很好，就没有用上。

docker

学习中…

docker-compose

nginx + openresty

redis

Rust

学习中

所有权和借用，是相对 js 来说很不一样的概念。

另外 js 中自执行函数的广泛运用的原因也算是了解了，因为他们写惯了其他语言的条件赋值。

JS

1
2
3
4
5
6
7

let v = (() => {
    if (Math.random() > 0.5) {
        return 1
    } else {
        return 2
    }
})()

Rust

1
2
3
4
5
6

let k = 2;
let v = if k > 1 {
    1
} else {
    2
};

图床

近期一直在做一些小工具，想把这个长久以来一直没做的事情也安排掉。

blog 的文章中几乎没有图片，也是因为没有图床，在最开始写的时候，还想过为什么本地看可以，到了网站上就裂开了，后来明白了之后也没有做对应的操作，只是故意避开了这一点。但这次，想试试 cloudflare 的图床，把图片都安排到这上面，需要一个小插件把图片都转换一下。

Route intercept

这里只是想记录一下对 401 的请求拦截与路由拦截区别，之前一直觉得在请求拦截 401 与用户未登录状态即可，最近发现在路由侧也加上未登录校验，可以提前跳转到登录页，同时不会再浏览器历史记录中添加上需要登录的页面路由，可以方便用户使用浏览器的回退功能回到上一页。

最近遇到这个场景后，我觉得两边都加上是必要的。

无感刷新token

在项目中，碰到 401 是很正常的情况，在过往的项目中，一般会定义一个长时间的 token，过期后自动跳转登录。最近在做一个项目的时候，登录接口只会返回一个短 token 和一个 refreshToken，在短 token 过期后通过 refreshToken 重新生成新的 token 和 refreshToken 并保存。

方法有几种，也遇到了一些问题，在此仅讨论 CSR 情况。

Rust

编码与字体

字符概述

GB 与全角半角

大家都知道，程序中的所有信息都是以二进制的形式存储在计算机的底层，也就是说我们在代码中定义的一个 char 字符或者一个 int 整数都会被转换成二进制码储存起来，这个过程可以被称为编码，而将计算机底层的二进制码转换成屏幕上有意义的字符（如“hello world”），这个过程就称为解码。

在计算机中字符的编解码就涉及到 字符集（Character Set） 这个概念，他就相当于能够将一个字符与一个整数一一对应的一个映射表，常见的字符集有 ASCII、Unicode 等。

历史中的很长一段时间里，计算机仅仅应用在欧洲的一些发达国家，因此在他们的程序中只存在他们所理解的拉丁字母（如a、b、c、d等）和阿拉伯数字，他们在编码解码时也只需要考虑这一种情况，就是如何将这些字符转换成计算机所能理解的二进制数，此时 ASCII 字符集应运而生，他们在编码时只需要对照着 ASCII 字符集，每当在程序中遇到字符 a 时，就会相应的找到其中 a 对应的 ASCII 值 97 然后以二进制形式存起来即可。

爬虫

背景

最近在研究 nodejs 爬虫相关的东西，本来只想简单的处理一下，抓取一下网页数据。但是这个网站是服务端渲染，找不到暴露的接口，第一想到的是通过 got 库获取对应的 html，在获取过程中，始终爆出 Zlib 的 ERROR，加上 decompress false 的字段后不会报错，但这样获取的就是二进制流数据了，并且数据异常。之后发现切换 axios 可以正常返回的。研究之后发现，nodejs 的 Zlib 库存在问题，如果我使用 zlib.createUnzip 的流式读取，则不会报错。

之前数据异常的原因是对方服务端 content-type 始终返回 gzip，即使我没有传入对应的 header 头。关于 content-type 这个字段，有的网站会固定返回 gzip。导致返回结果需要解码之后才能使用。

顾虑

很久没有再来规划路线了，最大的感受是迷茫，不如从前有信心了，不懂的知识似乎越学越多了。再挣扎中求生吧，痛苦的本因就是不会，不会就是菜，菜就去学。

每天时间过得很快，做的事情却很少，日复一日确实也会心生厌倦，而且睡眠质量不太好，体验很差，起得越来越痛苦了。