提供连接文件时JavaScript的页面级执行

Page-level execution of JavaScript when serving concatenated files

本文关键字：执行 JavaScript 连接 文件      更新时间：2023-09-26

场景：

页面数为x的网站将使用单个串联JavaScript文件。一些单独的JavaScript文件与页面有关，另一些则与插件/扩展等有关。

当一个页面被提供时，整个JavaScript集都会被执行（就像加载时执行一样）。遗憾的是，只有JavaScript的一个子部分与页面直接相关。其余部分与网站上的其他页面相关，如果写得不好，可能会对当前页面产生潜在的副作用。

问题：

只执行与页面直接相关的JavaScript，同时维护单个串联文件的最佳策略是什么

当前感觉不对劲的解决方案：

与特定页面相关的JavaScript被封装在"；名称空间的"init函数。每个页面都使用一个内联脚本来呈现，该脚本调用该页面的init函数。它运行得很好，但我宁愿没有任何内联脚本。

有人有什么聪明的建议吗？我应该只使用内联脚本并完成它吗？我很惊讶，对于大多数开发人员来说，这并不是一个更大的问题。

只需使用内联脚本。如果需要一两行代码来初始化您需要的JavaScript，那也没关系。这实际上是一个很好的设计实践，因为它允许在多个页面上重用JavaScript。

单个（或至少几个）连接的js文件的优势是显而易见的（页面中的连接较少意味着加载时间较短，您可以一次缩小所有文件，…）

我们使用这样的解决方案，但是：我们允许不同的页面获得不同的串联文件集——尽管我确信存在不同的模式。

在我们的案例中，我们将javascript文件按功能划分为几个组；每个页面都可以指定它们需要哪些。然后，该框架将提供具有一致命名和版本控制的连接文件，以便缓存在浏览器级别上运行良好。

我们使用django和一个自制的解决方案，但这只是因为我们几年前就已经开始了，当时只有django压缩可用，而django已经不可用了。django管道的继任者看起来不错，但您可以在djangopackages/assetmanagers上找到替代方案。

当然，在不同的框架上，你会发现一些等效的包。如果没有框架，这个解决方案可能无法实现；-）

顺便说一句，使用这些模式，您还可以压缩js文件（静态地，如果您有良好的缓存策略，甚至是动态地）

我不认为您的解决方案有那么糟糕，尽管您不信任内联脚本是件好事。但您必须以某种方式找出您所在的页面，因此在每个页面上调用适当的init函数是有意义的。您也可以根据其他一些因素调用init函数：

  • 页面URL
  • 页面标题
  • 文档正文中设置的类
  • 附加到脚本URL并由全局文档就绪函数解析的参数

当文档准备好时，我只需调用一堆init函数。每一个都会检查页面上是否需要它，如果不需要，只需返回即可。

您可以做一些简单的事情：

var locationPath = window.location.pathname;
var locationPage = locationPath.substring(locationPath.lastIndexOf('/') + 1);
switch(locationPage) {
    case 'index.html':
        // do stuff
    break;
    case 'contact.html':
        // do stuff
    break;
}

我真的很困惑，为什么从页面上调用javascript感觉不对？页面和javascript之间有一个连接，使其明确化应该会使代码更容易理解、调试和更有组织性。我相信你可以尝试使用一些自动布线惯例，但我不认为这真的能帮助你解决问题。只需从页面中调用名称分隔函数即可完成。

相关文章：