Huangyuntse

2024-4、2024-5、2024-6 更新

前端工程化相关学习

• Webpack运行时runtime做了什么事情
• TradingView使用
• 前端模块化
• 包管理器

webpack 的 runtime，也就是 webpack 最后生成的代码，实现了一个自定义的模块加载系统，替代浏览器原生的模块机制

webpack_modules

维护一个所有模块的数组。将入口模块解析为 AST，根据 AST 深度优先搜索所有的模块，并构建出这个模块数组。每个模块都由一个包裹函数 (module, module.exports, webpack_require) 对模块进行包裹构成。

webpack_require(moduleId)

手动实现加载一个模块。对已加载过的模块进行缓存，对未加载过的模块，执行 id 定位到

webpack_modules

webpack_modules中的包裹函数，执行并返回 module.exports，并缓存

webpack_require(0)

webpack_require_(0)运行第一个模块，即运行入口模块，另外，当涉及到多个 chunk 的打包方式中，比如 code spliting，webpack 中会有 jsonp 加载 chunk 的运行时代码。

结合官方文档：https://tradingview.github.io/lightweight-charts/docs/plugins/intro 食用
代码见：tradingview示例：K线图绘制图片

Series Primitives

生命周期

• attached：添加到图表时触发，附加方法通过一个参数调用，该参数包含图表、系列以及用于请求更新的回调函数
• detached：移除图表时触发

CommonJS

• 使用require，export进行导入导出
• CommonJS是Node的模块化方案，只能在Node端运行，不能在浏览器端，除非使用一些构建工具进行编译（Webpack、Rollup）
• 特定的第三方库只支持CommonJS，比如下载量很高的ms
• CommonJS属于动态加载，可以直接require一个变量：require(`./${a}`);

  1 2 3 4

  // sum.js exports.sum = (x, y) => x + y; // index.js const { sum } = require("./sum.js");

Npm/Yarn

如何通过Npm发包

files

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

main、browser、exports、module

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

main

main 规定了包的主要入口点，默认值为 index.js。
如果你的包名为 foo 可以通过 require("foo") 引入对应模块导出的内容，所以这应该是个 CommonJS 模块，除非你设置了 "type": "module"。

XSS

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

整体过程

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

反射型XSS

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

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

比特币中的密码学

比特币中的哈希特性

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入门计划： polebug大佬学习记录
• Web3开发学习路线： https://54web3.cc/blog/roadmap/learning-path-web3
• 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