准备工作

在开始使用 LG-SDK Base 之前，您需要完成以下准备工作：

获取签名：您需要向 Legend Trading 申请一个有效的签名，用于验证您的请求。如何获取
了解 SDK：熟悉 LG-SDK Base 的功能和 API，以便在项目中正确使用。示例地址

在线演示

这个 CodeSandbox 演示将帮助你快速上手 LG-SDK Base。

我们使用 Vue 搭建了它，因为它写起来很爽！但请别误会，legend-base 本身完全不依赖 Vue，你在 React、SolidJS 或者原生的项目中都能无缝使用它。

🔥 关键一步：关于 Signature

为方便体验，Demo 中已预置了一个测试 Signature。请注意，此 Signature 仅用于本地开发和测试，严禁用于生产环境。 在实际项目开发中，请务必替换为您自己申请的正式 Signature。

准备好了吗？让我们开始吧！

⚠️ 为了进步了解 LG-SDK Base里包含的方法，我们同时提供补充 demo 示例地址。

安装与引入

方式一：直接通过 `<script>` 标签引入

这是最简单直接的引入方式。只需在您的 HTML 文件中添加以下 script 标签，即可将 SDK 载入页面。

<script
  defer
  src="https://content.legendtrading.com/jssdk-base/legend-base.umd.js"
></script>

说明：

使用 defer 属性确保脚本不会阻塞页面解析。
引入后，SDK 的相关模块（如 LegendLoader）将作为全局变量可用。

方式二：支持 SRI (Subresource Integrity) 的引入方式

为了增强安全性，我们推荐使用 SRI 功能来验证资源完整性。以下是完整的实现流程：

第一步：获取 manifest 文件

首先需要加载 manifest.json 文件来获取最新版本的文件哈希值：

// 获取 manifest 文件
async function loadManifest() {
  try {
    const response = await fetch('https://content.legendtrading.com/jssdk-base/manifest.json');
    const manifest = await response.json();
    return manifest;
  } catch (error) {
    console.error('Failed to load manifest:', error);
    throw error;
  }
}

// 使用示例
const manifest = await loadManifest();
console.log(manifest);

manifest.json 响应示例：

{
  "legend-base.js": {
    "src": "legend-base.umd.js",
    "integrity": "sha256-F22hxP76AHEwkpxmptmt54hbQnl9qr1An8Z5S6yVstQ= sha384-KUxf1uYQZB1mInlWQ/3Jv8bHRz/lPqw7lSkRpdvCu0M/YC2azLAX0R6huNabQ6+b sha512-XjP9y1N/v5wgJ1nOsO4PSyZoKC7kvmzmoUSVKt5NuX/EDutFgtqSSdtDNVGBJKtGHbt6EYe6IYZRf2azWM2C+A=="
  },
  ...// 其他内容
}

第二步：动态创建带有 SRI 的 Script 标签

// 动态加载带有 SRI 的 SDK
async function loadSDKWithSRI() {
  try {
    // 1. 加载 manifest
    const manifest = await loadManifest();
    
    // 2. 获取 legend-base.js 的配置
    const baseConfig = manifest['legend-base.js'];
    
    // 3. 创建 script 标签
    const script = document.createElement('script');
    script.src = `https://content.legendtrading.com/jssdk-base/${baseConfig.src}`;
    script.integrity = baseConfig.integrity;
    script.crossOrigin = 'anonymous';
    script.async = true;
    
    // 4. 设置加载完成回调
    script.onload = () => {
      console.log('SDK loaded successfully with SRI verification');
    };
    
    script.onerror = () => {
      console.error('Failed to load SDK: SRI verification failed');
    };
    
    // 5. 添加到页面
    document.head.appendChild(script);
    
  } catch (error) {
    console.error('Failed to load SDK with SRI:', error);
  }
}

// 执行加载
loadSDKWithSRI();

第三步：完整的 HTML 实现

<!DOCTYPE html>
<html>
<head>
  <title>Legend Trading SDK</title>
  <!-- 预加载 manifest -->
  <link rel="preload" href="https://content.legendtrading.com/jssdk-base/manifest.json" as="fetch" crossorigin>
</head>
<body>
  <div id="app"></div>

  <script>
    // 动态加载 SDK
    async function initializeSDK() {
      try {
        // 加载 manifest
        const response = await fetch('https://content.legendtrading.com/jssdk-base/manifest.json');
        const manifest = await response.json();
        
        // 创建 script 标签
        const script = document.createElement('script');
        const baseConfig = manifest['legend-base.js'];
        
        script.src = `https://content.legendtrading.com/jssdk-base/${baseConfig.src}`;
        script.integrity = baseConfig.integrity;
        script.crossOrigin = 'anonymous';
        script.defer = true;
        
        // 添加到页面
        document.head.appendChild(script);
        
        console.log('SDK loading with SRI...');
        
      } catch (error) {
        console.error('Failed to initialize SDK:', error);
      }
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initializeSDK);
    } else {
      initializeSDK();
    }
  </script>
</body>
</html>

方式三：通过 AMD 模块加载器（如 RequireJS）引入

SDK 支持在 AMD 环境中使用，以下是在 RequireJS 中的配置方法：

基本使用示例

在您的 AMD 模块中，可以直接 require SDK。

requirejs.config({
  paths: {
    LegendLoader: "https://content.legendtrading.com/jssdk-base/legend-base.umd"
  }
});

// 使用 SDK
requirejs(["LegendLoader"], function(loader) {
  console.log("SDK 加载完成:", loader);
});

集成到应用

requirejs.config({
  baseUrl: "lib",
  paths: {
    app: "../app",
    LegendLoader: "https://content.legendtrading.com/jssdk-base/legend-base.umd"
  }
});

requirejs(["app/main", "LegendLoader"], function(main, loader) {
  // 应用和 SDK 都已就绪
  console.log("应用启动完成", loader);
});

安全配置（可选）

在要求严格的生产环境中，您可以通过 RequireJS 的 onNodeCreated 钩子为脚本添加完整性校验和跨域属性，以增强安全性。

requirejs.config({
  // ... 其他配置 ...
  config: {
    // 为所有脚本节点配置
    nodeCreated: function (node, config, module, path) {
      // 请将 'YOUR_INTEGRITY_VALUE' 替换为实际的SRI哈希值
      node.setAttribute("integrity", "YOUR_INTEGRITY_VALUE");
      node.setAttribute("crossorigin", "anonymous");
    },
  },
});