循着无私与弃绝之念走在自我修行的道路上

前言

兜兜转转终于是有时间把这个站点建起来了;D，本文主要是记录下站点更新日志，会按月进行归档，还会简单写一下后续更新的一些想法和计划

想法还有很多

功能上非常想做的是个一言主题的页面，还有日间/夜间模式切换，日程表、sitemap功能
内容上可以补充的还有个人简介
工程上能做的有域名简化（自定义域名），blog自动化部署（借助一些Github Webhooks），CDN加速（腾讯云），页面SEO相关优化

那么，拭目以待吧~

2024-11、2024-12更新

主要是之前前端相关知识的文章整理、比特币相关学习

• 比特币
• React最佳实践
• Redux
• HTTP
• HTTP缓存

2024-10更新

腾讯云托管站点
主要是解决Github Page部署后国内内网无法访问的问题（搜了下是DNS污染的问题，不太好解决，暂时先迁到腾讯云上去托管站点了）

部分文章重新整理一版
整理了一系列陈年老文章，主要是一些文章之前的格式在博客里不太兼容，还有部分内容在迁移的过程中有丢失，都加以补充了

文章置顶、排序、显隐功能
引了个hexo-generator-index-custom插件来置顶、排序文章

| 比较杂的知识点，同源跨域、服务器代理、简单请求非简单请求

同源和跨域

为什么要有同源策略

• 本质上是浏览器有cookie这么个玩意，比如移动端app就没有同源限制
• 防止CSRF攻击

XSS

跨站脚本攻击（XSS，Cross - Site Scripting）攻击者通过在目标网站中注入恶意脚本，来获取用户的敏感信息、执行恶意操作等。这些恶意脚本通常是 JavaScript

整体过程

攻击者提交恶意代码 -> 浏览器执行恶意代码

攻击方式

反射型XSS

示例：一个简单的搜索功能，用户在搜索框输入内容后，服务器将用户输入的内容直接在页面上显示。攻击者构造一个类似 http://example.com/search?q=<script>alert('XSS')</script> 的 URL，当用户点击这个链接，就会弹出一个警告框显示 “XSS”。

工程化相关

包管理器

Npm/Yarn

Npm发包

files

指定哪些文件会被打包发布（后面详细描述）。

main、browser、exports、module

这四个字段都是用来定义包的入口，npm 只规定了 main 和 browser 这两个字段，exports 是 nodejs 的规范，module 一般被构建工具所支持。

main

main 规定了包的主要入口点，默认值为 index.js。

如果你的包名为 foo 可以通过 require("foo") 引入对应模块导出的内容，所以这应该是个 CommonJS 模块，除非你设置了 "type": "module"。

Pnpm

• 省空间
• 解决幽灵依赖

如何确定一个项目的包管理工具？

• lock文件、package.json下packageManager字段来判断

如何确定包管理工具的版本号？

• engines字段

打包工具

CommonJs和Esmodule的区别

CJS：运行时加载

Esmodule：编译时加载

不要被学术界的思维限制了头脑，不要被程序员的思维限制了想象力。

比特币中的密码学

比特币中的哈希特性

Collision resistance (抗哈希碰撞)

没有高效的方法来人为的制造哈希碰撞

• Collision resistance的定义：给定X，没有高效的方法找到Y，使得H(X) = H(Y)
• Collision resistance的特性：无法用数学证明
• MD5哈希函数：以前认为是Collision resistance，后来被鉴定为不安全的哈希函数，可通过人为的方式制造哈希碰撞
• 比特币中使用的哈希函数：SHA-256（Secure Hash Algorithm）

Hiding

哈希的过程单向不可逆

• Hiding的定义：输入值的空间够大，且分布均匀，取值可能性相同
  实际场景如何实现Hiding（保证分布均匀）：输入值 + 随机数（输入X || nonce随机数）后经过Hash

Puzzle friendly

事先无法知道什么样的输入能得到一个什么样的哈希值，只能一个个尝试

比如挖矿，H(nonce + block header) <= target，没有捷径，只能去尝试多个nonce来找到解 => proof of work

比特币中的账户管理

非对称加密（asymmetric encryption algorithm）：加密解密不用同一个密钥，加密用公钥，解密用私钥
去中心化，每个用户本地自己生成一组公钥和私钥，公钥相当于银行账号，私钥相当于账号密码
比特币交易过程中，为了能知道交易是由谁发起，需要用私钥将交易签名，公钥验证

两个人生成的公钥私钥相同怎么办（256位的值，产生两组相同公钥私钥的概率微乎其微）

message取hash->hash取签名

先开个坑，准备下Web3相关的学习

学习路线

• Web3开发学习路线: https://54web3.cc/blog/roadmap/learning-path-web3
• Web3 入门计划: https://cubic-leaf-731.notion.site/web3-202208-09-1623ccd15c2148a1ae00ed8794d153b1
• Web3从入门到精通开发学习路线：https://juejin.cn/post/7307185531330838543

WEEK 1: 区块链的基础知识

• 密码学基础
• 区块链基础
• 相关金融知识
• 学习比特币底层技术
• 学习以太坊原理

Hexo介绍

Hexo是一款基于Node.js的开源静态博客框架，用于快速、简单且高效地搭建静态博客网站。本质上是一个静态网站生成器，新增文章只需要编辑md文件，通过运行命令再生成像html的静态文件。

环境搭建

1
2
3
4
5
6
7
8
9
10
11

# 全局安装hexo脚手架
npm install -g hexo-cli

# 创建一blog项目
hexo init blog

# 进入项目
cd blog

# 安装依赖包
npm install

其他操作

1
2

# 右键 Git Bush，用户项目自动化部署
npm install hexo-deployer-git --save

项目预览

1
2
3
4
5
6
7
8

# 清理旧的静态文件
hexo clean

# 生成静态文件
hexo g

# 运行预览项目
hexo s

Webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

Webpack 五个核心概念

Entry

入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解
JS)

Plugins

插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。