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

例如：

• 我有一个网站，我正在使用一个模板引擎（即车把，EJS，哈巴狗…）
• 我将我的视图拆分为更小的部分（导航器、页脚等…）
• 我在不同的文件中为导航器和页脚（nav.JS，footer.JS…）编写了简短的JS脚本

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

到目前为止，我一直在做以下工作：

• 将每个脚本添加到全局obj
  // nav.js my_scripts = my_scripts || {}; my_scripts.nav = { // navigator script } //nav.js my_scripts=my_scripts |{}； my_scripts.nav={ //导航器脚本 } //footer.js my_scripts=my_scripts |{}； my_scripts.footer={ //页脚脚本 }
• 将所有脚本文件连接成一个脚本文件

• 在基本模板中仅使用一个脚本标记来导入连接的文件
• 向导航器和页脚部分添加一小段代码，以激活所需的脚本。比如：
  // footer.ejs script> my_scripts.footer.init(); /script> //footer.ejs 脚本> my_scripts.footer.init（）； /脚本>

我并不特别喜欢这一点，因为它需要在运行脚本所需的每个模板中添加小的js片段

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

---

总而言之，这里再次提出了一个问题：在不使用框架的情况下，为不同的部分/视图/页面管理不同脚本的最佳方法是什么

名称空间内容（避免污染全局名称空间）压缩文件，缩小并仅加载连接的缩小脚本。或者看看JS的不同模块加载器，为您处理这些任务。哦，请查看DOMContentLoaded事件来初始化您的代码片段。嗨@Thomas！避免污染的好处。关于其余部分，这正是我正在做的，全部由Grunt自动化，但这仍然不能回答我的问题，即是否有一种方法可以实现这一点，而不必从DOMContentLoaded上的每个模板调用我的脚本，为内容命名（避免污染全局名称空间）并对文件命名，缩小并仅加载连接的缩小脚本。或者看看JS的不同模块加载器，为您处理这些任务。哦，请查看DOMContentLoaded事件来初始化您的代码片段。嗨@Thomas！避免污染的好处。关于其余部分，这正是我正在做的，全部由Grunt自动化，但这仍然不能回答我的问题，即是否有一种方法可以实现这一点，而不必从DOMContentLoaded上的每个模板调用我的脚本， // footer.ejs script> my_scripts.footer.init(); /script>