Vanilla JS，如何管理不同部分/视图的不同脚本

Question

示例：

• 我有一个网站，我正在使用模板引擎（即Handlebars，EJS，Pug ......）
• 我的观点分为较小的部分（导航，页脚等）
• 我在导航器和页脚的不同文件中有简短的JS脚本（nav.js，footer.js ...）

在网站上管理和运行这些脚本的最佳方法是什么？

到目前为止我一直在做的事情如下：

• 将每个脚本添加到全局obj

  // nav.js
  my_scripts = my_scripts || {};
  my_scripts.nav = {
    // navigator script
  }
  

  // footer.js
  my_scripts = my_scripts || {};
  my_scripts.footer = {
    // footerscript
  }
  

• 将所有脚本文件连接成一个

• 在基本模板中仅使用一个脚本标记来导入连接文件

• 向导航器添加一小段代码，页脚部分用于激活所需的脚本。类似的东西：

  // footer.ejs
  script>
  my_scripts.footer.init();
  /script>
  

我不是特别喜欢这个，因为它涉及在我需要运行脚本的每个模板中添加小js片段。

另一种选择是导入相关部分中的每个脚本文件，而不是将它们全部连接起来，但感觉不对。

总结一下，问题是：在不使用框架的情况下，为不同的部分/视图/页面管理不同脚本的最佳方法是什么？