MockAddress Core 使用说明

快速开始

方式一：直接使用（适合简单场景）

如果你的网站结构和 mockaddress.com 类似（有 data/ 目录），可以直接使用，无需配置：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./src/css/main.css">
</head>
<body>
  <script type="module">
    import { generateUSAddress } from './src/js/address-generator.js';
    
    // 直接使用，会自动检测 data/ 目录
    const address = await generateUSAddress('CA');
    console.log(address);
  </script>
</body>
</html>

方式二：自定义数据路径（推荐）

如果你的数据文件放在其他位置，需要先配置：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./src/css/main.css">
</head>
<body>
  <script type="module">
    // 1. 先导入配置模块
    import { configure } from './src/js/config.js';
    import { generateUSAddress } from './src/js/address-generator.js';
    
    // 2. 配置你的数据路径
    configure({
      dataBasePath: 'my-custom-data/',  // 你的数据目录
      autoDetectPaths: false  // 禁用自动检测，只使用你指定的路径
    });
    
    // 3. 现在可以正常使用了
    const address = await generateUSAddress('CA');
    console.log(address);
  </script>
</body>
</html>

配置选项

`dataBasePath`（字符串，可选）

你的数据文件的基础路径。例如：

'my-data/' - 相对路径
'/static/data/' - 绝对路径
'https://cdn.example.com/data/' - CDN 路径

注意：如果不设置，代码会自动检测路径（适合 mockaddress.com 的多语言结构）。

`autoDetectPaths`（布尔值，默认 `true`）

是否启用自动路径检测。如果设为 false，则只使用 dataBasePath 指定的路径。

建议：

如果你的网站结构简单，设置 dataBasePath 并关闭 autoDetectPaths
如果你的网站有多语言目录结构（类似 mockaddress.com），保持 autoDetectPaths: true

数据文件结构

你需要准备以下 JSON 数据文件（放在你配置的 dataBasePath 目录下）：

usData.json - 美国地址数据
hkData.json - 香港地址数据
ukData.json - 英国地址数据
caData.json - 加拿大地址数据
jpData.json - 日本地址数据
jpNamesData.json - 日本姓名数据
inData.json - 印度地址数据
twData.json - 台湾地址数据
sgData.json - 新加坡地址数据
deData.json - 德国地址数据
namesData.json - 通用姓名数据
macOuiData.json - MAC OUI 数据（用于 MAC 工具）

注意：本开源仓库不包含这些数据文件。你需要自己准备数据，或者参考 mockaddress.com 的数据格式。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的地址生成器</title>
  <link rel="stylesheet" href="./src/css/main.css">
</head>
<body>
  <div id="app">
    <button id="generate-btn">生成美国地址</button>
    <div id="result"></div>
  </div>

  <script type="module">
    // 导入配置和生成函数
    import { configure } from './src/js/config.js';
    import { generateUSAddress } from './src/js/address-generator.js';
    
    // 配置数据路径（根据你的实际情况修改）
    configure({
      dataBasePath: 'data/',  // 你的数据目录
      autoDetectPaths: false  // 只使用指定路径
    });
    
    // 绑定按钮事件
    document.getElementById('generate-btn').addEventListener('click', async () => {
      try {
        const address = await generateUSAddress('CA');
        document.getElementById('result').innerHTML = `
          <p>姓名: ${address.firstName} ${address.lastName}</p>
          <p>地址: ${address.fullAddress}</p>
          <p>电话: ${address.phone}</p>
        `;
      } catch (error) {
        console.error('生成失败:', error);
        alert('生成失败，请检查数据文件路径是否正确');
      }
    });
  </script>
</body>
</html>

重要提示

数据文件格式：确保你的 JSON 文件格式与 mockaddress.com 使用的格式一致
CORS 问题：如果数据文件在不同域名，需要配置 CORS 头
路径问题：使用相对路径时，注意当前页面的位置
缓存：代码会自动缓存数据到 localStorage，如需清除缓存，可以调用 localStorage.clear()

不影响正式站点

如果你不调用 configure()，代码会使用默认的自动路径检测逻辑，完全不影响 mockaddress.com 的正常运行
配置是独立的，每个页面可以有自己的配置
配置不会持久化，每次页面加载都需要重新设置（如果需要）

5.3 KiB Raw Permalink Blame History Unescape Escape