Huangyuntse

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

前端工程化相关学习

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

移动端适配

vw/vh + rem 结合动态计算根字体大小

1. rem 配合动态根字体大小

让 1rem 的大小，永远跟着屏幕宽度自动变化

1
2
3
4
5
6
7
8

html {
    --screen-width: var(--fallback-screen-width, 100vw);
    /* 根字体大小 = 视口宽度 / 3.75 */
    font-size: calc(var(--safe-width) / 3.75);
}
body {
    font-size: 0.16rem; /* 业务层使用 rem 作为单位 */
}

2. 现代视口单位兼容（dvw/dvh）

• dvw/dvh（动态视口单位）规避移动端 “刘海屏 / 导航栏” 占用视口的问题；
• 通过 @supports 做特性检测，仅在支持 dvh 的浏览器中替换为 dvw/dvh，向下兼容不支持的设备（仍用 vw/auto）。

1
2
3
4
5
6

@supports (height: 100dvh) {
    html {
        --screen-width: 100dvw;
        --screen-height: 100dvh;
    }
}

JSBridge是什么

JSBridge本质就是：Web端和客户端Native之间的通信桥梁，让混合开发模式中的Web端和Native端能够互相通信，实现双向调用。

Web端调用Native端

在Webview中注入JS API

通过WebView提供的接口，App将Native的相关接口注入到JS的Context（window）的对象中
Web端就可以直接在全局 window 下使用这个暴露的全局JS对象，进而调用原生端的方法

Android注入方法：

• addJavascriptInterface配合@JavascriptInterface：Android 4.2+ 配合 @JavascriptInterface 才安全可用

IOS注入方法：

• WKWebView + WKScriptMessageHandler 是 iOS 官方方案，推荐新项目优先使用，链路更清晰。
• WebViewJavascriptBridge 是常见历史封装方案，接入快、兼容旧项目，但初始化握手和调试成本更高。

币圈参与者和生态

• 长期资金：机构、投行、矿企
• 风险投资：VC、加速器
• 交易所与做市商：庄家、抽水、点差（插针，收割散户：以前存在，现在大所基本较少）
• 量化基金：职业牌手、模型驱动
• 开发者、项目方：发币者
• 散户：韭菜

币圈基本构成

现货市场（Spot Market）

• 一级市场：NFT铸造、土狗、盲盒、空投认购
  参与链上的初始发行环节（容易被套、被骗、资金盘）
• 二级市场：交易所、DEX买卖
  中心化交易所买币或去中心化交易所链上买卖

衍生品市场（Derivatives Market）：合约、期权

• 合约
• 期权

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

比特币中的密码学

比特币中的哈希特性

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取签名

MCP概述

MCP（Model Context Protocol）模型上下文协议

MCP用途

能让模型更好的使用各类工具（大模型本身只会问答）

MCP Host

支持MCP协议的软件，Cursor，Claude Desktop，Cline

MCP Server

本质上是一个符合MCP协议的程序，不一定联网

• timeout: 60 （连接MCP Server的超时时间）

• command: uv (程序)

• transportType: stdio、sse（client和MCP Server沟通的方式）
  以一个 MCP Server 为例
  

• MCP Server，MCP Host，用户，模型交互流程
  

• 如何使用别人写的MCP Server

  • mcp.so
  • mcpmarket.com
  • smithery.ai

MCP Server一般用 Python 或 Node 编写，对应启动程序 -> uvx，npx

开发一个MCP Server

MCP底层协议

MCP的含义和地位

概述

JavaScript 提供了一些 API 来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、base64 等

结合官方文档：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"。