Question

情境：

使用单个连接的JavaScript文件提供 x 页数的网站。一些单独的JavaScript文件属于一个页面，另一些属于插件/扩展等。

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

问题：

在维护单个连锁文件的同时，只执行与网页直接相关的JavaScript的最佳策略是什么？

当前解决方案感觉不对：

与特定页面相关的JavaScript包含在该页面的“命名空间” init 函数中。每个页面都使用内联脚本进行呈现，该脚本调用该页面的init函数。它很有用，但我宁愿没有任何内联脚本。

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

Answer 1

只需使用内联脚本即可。如果它是一行或两行来初始化JavaScript你需要那么好。这实际上是一个很好的设计实践，因为它允许在多个页面上重复使用JavaScript。

Answer 2

单个（或至少很少）连接的js文件的优点是明确的（页面中的连接越少意味着加载时间越短，您可以一次缩小它们，...）。

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

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

我们使用django和一个自制的解决方案 - 但这只是因为我们几年前已经开始，当时只有django-compress可用，并且django compress不再可用。 django-pipeline后继者似乎很好，但您可以在djangopackages/asset-managers上找到替代方案。

在不同的框架上，您当然会找到一些等效的包。没有框架，这个解决方案可能无法实现; - ）

顺便说一句，使用这些模式你也可以压缩你的js文件（静态，甚至动态，如果你有一个很好的缓存策略）

Answer 3

我不认为你的解决方案是那么糟糕，尽管你不信任内联脚本是件好事。但是你必须找到你在哪个页面，所以在每个页面上调用相应的init函数是有道理的。您还可以根据其他一些因素调用init函数：

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

Answer 4

当文档准备就绪时，我只是调用一堆init函数。每个都检查页面上是否需要它，如果没有，只需返回。

Answer 5

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

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;
}

Answer 6

我真的很困惑为什么从页面调用javascript感觉不对？页面和javascript之间存在连接，并且使其明确应该使您的代码更容易理解，调试和更有条理。我相信你可以尝试使用一些汽车接线惯例，但我认为它不会帮助你解决问题。只需从您的页面调用名称间隔功能即可完成..

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

情境：

问题：

当前解决方案感觉不对：

6 个答案: