一个 DApp，究竟由什么组成？

目录中的“前端应用、Ethers.js/Web3.js、智能合约、以太坊网络”可以看成四层。 真实系统还会在接口库和网络之间加入 Provider、钱包与 RPC 节点。它们不是额外的花活， 而是跨越浏览器安全边界所必需的连接机制。

前端应用 / UI

普通的 HTML、CSS、JavaScript 或 React 等界面代码。它决定用户看见什么、输入什么、什么时候请求钱包，但不能绕过协议直接改状态。

接口库

Ethers.js、Web3.js 等客户端库提供高层对象，把“调用 balanceOf”转成 ABI 字节和 RPC 请求，再把十六进制返回值解码为程序能使用的数据。

Provider 与钱包

Provider 是应用访问 Ethereum RPC 的接口；钱包通常在此接口背后管理账户许可与签名。EIP-1193 把浏览器中的 Provider 约束为最小、事件驱动的通用接口。^[2]

合约与以太坊网络

合约是部署在地址上的 Bytecode 与持久状态；节点验证交易并在 EVM 中确定性执行，最终把有效结果纳入共享状态。

合约部署后，网络保存的是地址、Bytecode 和状态，不保存一个供 JavaScript 直接调用的类。 编译器生成的 ABI 是一份 JSON 接口描述：它列出函数、参数、返回值、事件与自定义错误。 Solidity 的 ABI 规范定义了这些数据如何编码和解码。^[4]

从函数名到 calldata

例如，用户看到的是“查询余额”，开发者写的是 balanceOf(address)。 ABI 编码器把函数签名的 Keccak-256 哈希前 4 字节作为函数选择器， 再把参数按 32 字节槽规则编码。balanceOf(address) 的选择器是 0x70a08231；节点收到的不是函数名，而是一串以它开头的 calldata。

{
  "method": "eth_call",
  "params": [{ "to": "0xToken…", "data": "0x70a08231…" }, "latest"]
}

查询余额、读取公开变量、预演一次调用，通常使用 eth_call。 应用指定目标地址、calldata 与一个区块标签；节点在该区块状态上执行 EVM， 返回结果字节，但不把变化写回链上。JSON-RPC 还允许用 latest、safe、finalized 等标签明确读取哪个状态。 ^[7]

Solidity 合约可以在执行中 emit 事件。日志会随交易收据进入区块， 外部应用可以通过 RPC 查询或订阅，再按 ABI 解码。Ethereum.org 将它描述为合约与前端或其他订阅应用 沟通的重要方式。^[9]

Storage、返回值与 Event 各解决什么

假设测试网已部署一个 Counter 合约。它公开一个只读函数 number()， 一个写函数 increment()，并在成功写入后发出 NumberChanged 事件。 下面用 Ethers v6 风格展示最小结构；官方文档将 Provider 定义为只读链连接，将 Signer 定义为账户操作抽象。 ^[12]

contract Counter {
    uint256 public number;
    event NumberChanged(uint256 next, address indexed caller);

    function increment() external {
        number += 1;
        emit NumberChanged(number, msg.sender);
    }
}

import {
  BrowserProvider,
  Contract,
  JsonRpcProvider
} from "ethers";

const address = "0x已验证的测试网合约地址";
const abi = [
  "function number() view returns (uint256)",
  "function increment()",
  "event NumberChanged(uint256 next, address indexed caller)"
];

const readProvider =
  new JsonRpcProvider(RPC_URL);

const reader =
  new Contract(address, abi, readProvider);

const current = await reader.number();
screen.textContent = current.toString();

const provider =
  new BrowserProvider(selectedWalletProvider);

const signer = await provider.getSigner();
const writer =
  new Contract(address, abi, signer);

const tx = await writer.increment();
const receipt = await tx.wait();

从本课走向下一课的实现顺序

1. 01
   本地链

   先让合约、测试和前端在可重置环境中闭环。

2. 02
   测试网部署

   记录 chain ID、部署地址、构造参数、编译器与源码验证。

3. 03
   只读界面

   先完成无需钱包的读取、空状态、加载与 RPC 错误。

4. 04
   钱包与写入

   再接账户、网络切换、模拟、签名、pending 与收据。

5. 05
   事件与恢复

   让页面在刷新、重组、索引滞后和端点故障后仍能恢复正确视图。