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

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

1） 我可以用

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

就在关闭body标签之前

2） 我可以把js代码

new FormValidationHandler() 

在关闭主体标记之前的脚本标记中

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

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

我的问题是哪种方式更可取

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

• 头上的标签
• 在body标签中（通常在末尾）

---

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

我喜欢这样做。它可能并不完美，但我喜欢这样：

HTML文档中的脚本位置： 在HTML文档末尾加载的每个脚本，就在结束正文之前

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

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

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

正如名字所说，库是在javascript环境中加载库的脚本，但不做任何事情

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

对我来说，在一个完美的世界里，应该有和你一样多的库脚本，但每个HTML文档只有一个链接脚本。在这个脚本中，您可以找到$（document）.ready调用，如果您使用jQuery，那么这个脚本的所有内容都应该非常简单。理想情况下，在document ready（文档准备）功能中，应该只有如下说明：

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

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

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

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

加载外部库 最后一种特殊情况：当您必须从另一台主机加载脚本时。通常，您无法判断脚本是否将加载，因为您无法判断另一台服务器是否已启动，以及它是慢还是快。。。你不能确切地告诉这个脚本将做什么，所以它可能会破坏你的页面

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

为此，我个人开发了一个专门用于加载库的库（也许有一天我会在gitHub上发布它，当我有时间的时候）。

---

例如，我使用此脚本加载Facebook google+ou twitter API，或任何其他外部LIB，如统计计数器或ads服务。

我不认为有必要判断对错。但我从外面的办公室得知，看来你的钱花得很对。pageload之后要执行的所有代码都应该在文档的末尾（内联/外部）-因此它不会降低pageloading的速度，作为http请求排在最后。如果内联JS只在该页面上使用，则使用内联JS，并且永远不要在其他地方使用（元素定位等），否则将函数等放在外部文件中。我还更喜欢

$（document）.ready（function（）

），因为所有的编码人员都知道发生了什么，以及它对代码意味着什么。因此，在正文部分末尾有脚本标记$（document）.ready（…）？或者您更喜欢将它放在单独的文件中，并通过脚本调用该文件？如果可能的话，我几乎总是尝试在正文末尾使用它（一些解决方案在页面顶部提供了更多的灵活性）。我使用内联脚本来选择特定于页面的元素并向其添加函数/插件/小部件，并使用外部脚本和document.ready for my Function/plugins/widget（非特定于页面的所有函数/插件/小部件）：）