在html body标签中使用内联javascript是一个很好的论据？

Question

我的一位同事认为在html文档中的任何地方只包含document.ready（）调用（MULTIPLE）更简单，而不是试图将它们全部放在头部，脚部或者外部js文件。你能告诉我你对此的看法吗？

document.ready stuff由主模板中包含的模块加载。我认为这很混乱。但我需要一个很好的论点。

Answer 1

您的同事的方法存在许多问题：

• 这不是干的。每次要调用代码时都必须重复代码。
• 无法缓存相同的Javascript;它必须加载每个新页面。
• 如果您决定稍后以不同方式执行此操作，则N个文件现在不同而不是一个。
• 维护人员不会立即明白此代码在N个不同的文件中重复。

Answer 2

你的同事的方法实际上是非常合理和务实的。

为了完整起见，我会指出在ready()中放入太多的外部JS文件是一个错误。我开始这样做了一次，结果是页面加载时间为500-1000毫秒，所有这些不必要的JS代码正在执行。外部JS文件应该用于声明函数。页面本身应该声明实际运行哪些内容。这结合了最小的代码执行和最大化缓存（因为所有页面的JS文件都相同）。

在页面顶部，您不知道文档中将包含哪些模块/组件，除非您在那里声明它，（imho）是重复自己的更糟糕的情况。

在理想的做法是某种形式的多通道模板的过程，将允许包含的模块/组件来触发需要运行和模板处理器将结合这一切，把它放在网页的顶部代码。我实际上已经编写了这样的系统并且它非常可行，但它也更乏味。

你说它很乱，但硬币的另一面是，当你查看页面时，很容易确定哪些代码属于哪个模块/组件，因为它们是相邻的。如果你在页面顶部有一大堆JS，你怎么知道与什么有关？

只要你没有结束几十个脚本块，我认为你的合作伙伴的方法很好。任何替代方案都需要同样清晰，不要执行超过必要的代码。

Answer 3

如果它不是单页特定的，我不推荐它，因为维护会很痛苦。如果它是特定于页面的，则最好将其尽可能低地放在文档中，尤其是在加载外部脚本时。查看Cuzillion，这是一款可帮助您找到加载时间最佳组合的工具。

Answer 4

如果它们在文档中，如果页面是动态的（php，asp.net），则可以在javascript本身中使用服务器端变量。这可以非常方便，但它可以防止javascript作为独立页面在页面外使用。但如果你确定你永远不会在页面外需要那个javascript，那肯定是一个优势。

Answer 5

这取决于。

将Javascript放入正文的一个激励因素是渐进式加载。如果Javascript就在</body>之前，那么它最后会被下载。实际上，即使是Google Analytics也会在包含跟踪代码段时推荐这种方法。

但是，大多数情况下，即使您担心渐进式加载，也应使用外部js文件。可以积极地缓存外部js文件以节省带宽，因此通常首选它们。唯一的例外是当它只是一个页面使用的一小段Javascript时，或者如果需要使用服务器端语言动态创建Javascript本身并且在这种情况下将其写入内联则更容易。< / p>

编辑：

我确信，有多种方法可以做你正在做的事情。我不知道你在做什么。但既然你在每个模块旁边都提到了Javascript，那就给了我一个想法。您可以为每个模块周围的div创建唯一的ID。然后你可以有一个js文件，它通过那些div id（通过jQuery选择器）对每个模块执行操作。这将是一个非常jQuery的解决方案。