想象一下一个 Web 应用程序,它有数十个页面组(pg1、pg2...),其中一些页面组需要特定于它们的 JavaScript 代码,但不适用于整个应用程序。例如,在 window.resize() 上进行一些视觉修复可能仅在 pg2 中相关,而在其他地方则不相关。
以下是一些可能的解决方案:
1/ 集中式:为整个应用程序设置一个脚本文件,处理所有页面组。很容易知道相关 DOM 对象是否存在,因此所有不相关的页面只需增加一个小的额外 if()。最大的优点是所有 JS 仅需加载一次,适用于整个 Web 应用程序,无需修改 HTML 代码。缺点是在不相关的页面上添加了额外的检查。
2/ 混合式:集中式脚本检查页面上特定函数的存在,并在存在时启动它。例如,我们可以添加一个
if (typeof page_specific_resize === 'function') page_specific_resize();
在这种情况下,特定的页面组将具有以下功能:
<script>
function page_specific_resize() {
//....
}
</script>
优点在于代码仅存在于相关页面,因此不会在每个页面上进行测试。缺点是HTML的额外大小会导致整个页面组的结果。如果有超过几行的代码,则页面组可能能够加载一个特定于其的附加脚本,但这样我们就要在那里添加一个HTTP调用,以可能在集中式脚本中节省一些数据。
哪种做法是最佳实践?请评论这些解决方案或提出您自己的解决方案。添加一些资源来支持您更好的主张(考虑性能和易维护性)将会很好。最详细的答案将被选中。谢谢。
pg1
、pg2
不需要大量的JavaScript代码,你可能希望将它们集中在一起,以减少JavaScript文件的数量。这样可以使应用程序更轻松调试,因为你不需要浏览多个文件夹来找到与相关页面关联的适当函数。不方便的是,你将加载无用的函数,这意味着pg1
的所有函数也会为pg2
和pg3
加载,这可能会降低每个页面的加载速度。 - Anwar