页面加载完成后加载并运行js代码（非干扰性）

Question

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

1）我可以使用

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

在关闭身体标签之前

2）我可以像这样放js代码

new FormValidationHandler() 

在关闭正文标签之前的脚本标签中

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

4）还有一种使用自调用功能的方法，但不知道它是否映射到此问题

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

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

• 在头标签中
• 在正文标签中（通常在末尾）

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

Answer 1

有我喜欢做的事。 它可能并不完美，但我喜欢这种方式：

HTML文档中的脚本位置：

每个脚本都在HTML文档的末尾，即关闭主体之前加载。

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

脚本组织：

在我看来，这是两种情况：如果您使用超文本文档或Web应用程序（也许这需要更多说明，但可能会很长：p）。 我很少为Web应用程序工作，所以我还没有一个经过验证的组织。 但是我认为在Web应用程序中，您可能可以使用一些脚本加载库，例如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或任何其他外部库，例如统计计数器或广告服务。