进入万智牌卡片页面时，如何仅加载特定标签页的JS内容？

嘿，我来帮你搞定这个按需加载的问题！既然你对JS不太熟悉，我会尽量讲得直白易懂，一步步实现页面仅加载当前激活标签对应的卡片数据。

核心思路 #

页面初始化时，只加载当前默认激活的标签页对应的卡片JS数据；当用户切换标签时，再加载对应标签的内容（如果还没加载过），避免一开始就加载所有类型的卡片资源。

步骤1：拆分卡片数据为独立文件 #

首先，把不同类型的卡片数组拆成单独的JS文件，这样方便按需加载：

• 把地牌的数组放到 lands.js 文件里：

// lands.js
const land_cards = [ 
  "lands/dragonskull-summit", 
  "lands/drowned-catacomb", 
  "lands/field-of-ruin", 
  // 其他地牌...
];

• 同理，把生物牌放到 creatures.js，法术牌放到 spells.js 等等，每个文件里只存对应类型的卡片数组。

步骤2：编写按需加载函数 #

接下来写一个通用的加载函数，负责加载指定标签类型的卡片数据，并且避免重复加载：

方案A：用ES模块（推荐，更规范） #

如果你的项目支持ES模块（在HTML里给主JS标签加 type="module"），可以用动态 import：

// 假设你有一个渲染卡片的函数renderCards，用来把卡片数组渲染到页面上
async function loadTabCards(tabType) {
  // 先检查是否已经加载过该类型的卡片，避免重复请求
  if (window[`${tabType}_cards`]) {
    renderCards(window[`${tabType}_cards`]);
    return;
  }

  try {
    // 动态导入对应类型的JS模块
    const module = await import(`./${tabType}.js`);
    // 把加载好的数组存到全局，下次切换不用再加载
    window[`${tabType}_cards`] = module[`${tabType}_cards`];
    // 渲染卡片
    renderCards(module[`${tabType}_cards`]);
  } catch (error) {
    console.error(`加载${tabType}卡片失败：`, error);
  }
}

方案B：动态创建Script标签（无需模块，更简单） #

如果不想用ES模块，也可以通过动态创建script标签的方式加载：

function loadTabCards(tabType) {
  // 检查是否已加载
  if (window[`${tabType}_cards`]) {
    renderCards(window[`${tabType}_cards`]);
    return;
  }

  // 创建新的script标签
  const script = document.createElement('script');
  script.src = `./${tabType}.js`;
  
  // 脚本加载完成后渲染卡片
  script.onload = () => {
    renderCards(window[`${tabType}_cards`]);
  };
  
  // 加载失败提示
  script.onerror = () => {
    console.error(`加载${tabType}卡片脚本出错了！`);
  };

  // 把脚本加到页面里
  document.head.appendChild(script);
}

步骤3：页面初始化时加载默认标签 #

页面加载完成后，自动找到当前激活的标签，加载对应内容：

document.addEventListener('DOMContentLoaded', () => {
  // 找到默认激活的标签（假设你的标签有.tab类，激活的标签加了.active类）
  const activeTab = document.querySelector('.tab.active');
  
  if (activeTab) {
    // 从标签的data属性获取类型（需要给每个标签加data-tab-type属性，比如data-tab-type="lands"）
    const tabType = activeTab.dataset.tabType;
    // 加载对应卡片
    loadTabCards(tabType);
  }
});

步骤4：处理标签切换事件 #

给所有标签添加点击事件，切换时加载对应内容：

// 给所有标签绑定点击事件
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // 先移除所有标签的激活状态
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    // 给当前点击的标签添加激活状态
    tab.classList.add('active');
    
    // 获取当前标签的类型，加载对应卡片
    const tabType = tab.dataset.tabType;
    loadTabCards(tabType);
  });
});

关键提示 #

别忘了给每个标签元素加上 data-tab-type 属性，比如：

<button class="tab active" data-tab-type="lands">地牌</button>
<button class="tab" data-tab-type="creatures">生物牌</button>
<button class="tab" data-tab-type="spells">法术牌</button>

这样JS就能准确知道每个标签对应的卡片类型啦～

内容的提问来源于stack exchange，提问作者Alexandre Pedroza