Huangyuntse

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

前端工程化相关学习

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

币圈参与者和生态

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

币圈基本构成

现货市场（Spot Market）

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

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

• 合约
• 期权

概述

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

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的含义和地位

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

本质上就是在任何前端js可能读取的地方插入恶意脚本

整体过程

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

反射型XSS

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