页面加载完成时加载和运行js代码（不显眼的方式）答案

【问题标题】：Loading and running js code when page loading finished (unobtrusive way)页面加载完成时加载和运行js代码（不显眼的方式）
【发布时间】：2011-12-25 02:08:50
【问题描述】：

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

1) 我可以使用

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

就在关闭body标签之前

2）我可以把js代码像

new FormValidationHandler()

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

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

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

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

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

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

是否应该只包含不必在页面加载时运行的代码？那么那个代码应该放在body里面？

【问题讨论】：

我不认为有必要对错。但我从那里的吨 og 指导方针来看，你的钱似乎非常正确。所有要在页面加载后执行的代码都应该在文档的末尾（内联/外部） - 所以它不会减慢页面加载速度，最后作为 http 请求出现。如果仅在该页面上使用内联 JS，并且永远不会在其他地方（元素定位等）使用内联 JS，则将函数等放置在外部文件中。我也更喜欢$(document).ready(function()，因为所有编码人员都会知道发生了什么，以及这对代码意味着什么。
所以您在正文部分的末尾有带有 $(document).ready(...) 的脚本标签？还是您更喜欢将其放在单独的文件中并通过那里的脚本调用该文件？
如果可能的话，我几乎总是尝试在正文的末尾使用它（一些解决方案在页面顶部提供了更多的灵活性）。我使用内联脚本来选择页面特定元素并向它们添加函数/插件/小部件，并使用带有 document.ready 的外部脚本来处理我所有不是页面特定的函数/插件/小部件:)

标签： javascript jquery unobtrusive-javascript

【解决方案1】：

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

HTML 文档中的脚本位置：

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

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

脚本组织：

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

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

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

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

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

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

这种指令真的是HTML doc和JS库之间的简单链接，阅读理解起来非常简单。

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

外部文件或内联脚本？

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

加载外部库

最后一个特定情况：当您必须从另一台主机加载脚本时。通常，您无法判断脚本是否会加载，因为您无法判断其他服务器是否已启动，以及它是慢还是快......您无法准确判断这个脚本是什么会的，所以它可能会破坏你的页面......

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

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

【讨论】：