页面加载完成时加载并运行js代码（不引人注目的方式）

Question

我想尽可能地将 JS 代码与 HTML 分开，我可以看到几种模式。

使用

$(document).ready(function() {...}) 

1) 我可以在关闭 body 标签之前

2) 我可以在关闭 body 标签之前将 js 代码放入

new FormValidationHandler() 

脚本标签中

3) 我可以在脚本标签中指向包含 $(document)ready 或 new FormValidationHandler 等初始化的外部 js 文件

4 ）还有一种使用自调用函数的方法，但不知道它是否映射到这个问题

我的问题是哪种方法是首选？

第二个是，我可以在两个地方将外部脚本放入网页中：

• 在 body 标记中的head 标记中
• （通常在末尾）

head 应该只包含不必在页面加载时运行的代码吗？那么该代码应该放在body中吗？

Answer 1

这就是我喜欢做的事情。它可能并不完美，但我喜欢这样：

HTML 文档中的脚本位置：

每个脚本都在 HTML 文档末尾加载，就在结束正文之前。

有一个例外：处理 FOUC 的脚本（例如modernizr）。这个脚本必须在头部。
我没有看到任何其他合理的例外。

脚本组织：

在我看来，有两种情况：如果您使用超文本文档或网络应用程序（也许这可能需要更多解释，但会很长：p）。我很少从事网络应用程序的工作，所以我还没有一个经过验证的组织来做这件事。但我认为在网络应用程序中，您可能可以使用一些脚本加载库，例如 requirejs ，它可能比简单的网页。

对于超文本文档（大多数网页），我喜欢区分两种脚本：库和我在法语中所说的“script d'interfaçage”（“链接脚本”可能是一个很好的翻译......）。

顾名思义，库是在 javascript 环境中加载库的脚本，但不执行任何操作。

链接脚本用于将这些库链接到特定的 HTML 文档。

对我来说，在一个完美的世界中，应该有与您一样多的库脚本，但每个 HTML 文档只有一个链接脚本。如果您使用 jQuery，则在此脚本中您将找到 $(document).ready 调用，并且该脚本的所有内容都应该非常非常简单。理想情况下，在文档就绪函数中应该只有如下指令：

$('my selector').MyPlugin({
    option1:'value',
    option2: 'value'
});

这种类型的指令实际上是 HTML 文档和 JS 库之间的简单链接，并且非常易于阅读和理解。

通过这个组织，你可以进行任何类型的打包来减少要加载的js文件的数量。该打包必须针对客户端缓存和限制 HTTP 请求等进行优化...

外部文件还是内联脚本？

就我个人而言，我更喜欢对所有脚本使用外部文件，但通常我使用一个内联脚本标签来声明某些库所需的一些变量（广告服务的密钥等......）。

加载外部库

最后一个具体情况：当您必须从另一台主机加载脚本时。一般来说，你无法判断脚本是否会加载，因为你无法判断其他服务器是否已启动，以及它会慢还是快......你无法准确判断这个脚本的内容会这样做，所以它可能会破坏你的页面...

从其他主机加载脚本确实会产生问题，这就是为什么我建议在页面完全加载后异步加载它们，并使用尽可能多的控件。

为此，我亲自开发了一个专门用于加载库的库（也许有一天我会在有时间的时候将其发布到 gitHub 上）。
例如，我使用此脚本加载 Facebook google+ ou twitter API，或任何其他外部库，例如统计计数器或广告服务。