JavaScript脚本的加载顺序是否会产生影响？

绝对会有影响！这在Drupal 8里可是个很常见的前端坑，尤其是你写的这种直接操作DOM的标签页脚本。

为什么加载顺序会导致问题？ #

你的脚本一开始能正常运行，大概率是刚好赶在目标DOM元素渲染完成后才执行了。但如果加载顺序变了，就会直接失效：

• 如果你的main.js在页面<head>里加载，或者在那些.js--bottons-ecards标签页内容元素之前加载，脚本执行时根本找不到这些DOM节点——document.getElementsByClassName("js--bottons-ecards")会返回空数组，后续的样式修改自然就没作用了。
• 要是你的脚本依赖其他库（比如jQuery，很多Drupal项目都会用到），但库还没加载完成脚本先跑了，也会直接抛出错误导致功能失效。

Drupal 8里正确规避加载顺序问题的方法 #

Drupal有自己的资产管理系统，别直接硬塞脚本，按照规范来做就能彻底解决这个问题：

1. 用libraries.yml管理脚本加载 #

在你的主题或自定义模块里创建（或修改）yourtheme.libraries.yml，定义你的脚本库并指定依赖和加载时机：

custom.tabs:
  js:
    js/main.js: {}
  dependencies:
    - core/drupal
    - core/jquery
  footer: true # 强制脚本在页面底部加载，确保DOM已渲染

然后在模板或模块里引用这个库，比如在page.html.twig里加{{ attach_library('yourtheme/custom.tabs') }}。

2. 用Drupal Behaviors封装代码 #

这是Drupal官方推荐的方式，它会在DOM初始化完成、以及AJAX动态加载内容后自动触发，完美适配Drupal的动态场景。把你的标签页逻辑改成这样：

Drupal.behaviors.customTabSystem = {
  attach: function (context, settings) {
    // 定义标签页切换函数
    function openPage(pageName, elmnt, color) {
      let tabcontent = document.getElementsByClassName("js--bottons-ecards");
      for (let i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      // 显示目标页面
      document.getElementById(pageName).style.display = "block";
      // 切换标签按钮样式
      let tablinks = document.getElementsByClassName("tablink");
      for (let i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
      }
      elmnt.style.backgroundColor = color;
    }

    // 给标签按钮绑定点击事件，用once避免AJAX重复绑定
    once('custom-tab-bind', '.tablink', context).forEach(button => {
      button.addEventListener('click', function() {
        // 建议用data属性传参数，比如按钮上加data-page-name="xxx" data-color="xxx"
        openPage(this.dataset.pageName, this, this.dataset.color);
      });
    });
  }
};

这样不管脚本加载顺序如何，都会等到DOM就绪后再执行逻辑，再也不会出现找不到元素的问题。

3. 手动监听DOM加载事件 #

如果不想用Drupal Behaviors，至少要把你的代码包裹在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放你的openPage函数和事件绑定逻辑
  function openPage(pageName, elmnt, color) {
    // ... 你的原有代码
  }
});

总结 #

你之前的脚本正常运行只是巧合，一旦缓存策略调整、新增其他脚本改变了加载顺序，问题就会出现。遵循Drupal的资产管理规范，用Behaviors封装代码，才是解决这类问题的根本办法。

内容的提问来源于stack exchange，提问作者Henrique Moreira