加载和运行js代码时，页面加载完成(不引人注目的方式)

Loading and running js code when page loading finished (unobtrusive way)

本文关键字：加载 引人注目 方式 运行 js 代码      更新时间：2023-09-26

我想从HTML中尽可能多地分离我的JS代码，我可以看到几个模式。

1)我可以使用 
$(document).ready(function() {...})

正文标签结束前

2)我可以把js代码像 
new FormValidationHandler()

在body标签

结束前

3)我可以指向外部js文件包含初始化，如$(文档)准备或新的FormValidationHandler在脚本标签

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

我的问题是哪一种方式是首选?

第二个是，有两个地方我可以把我的外部脚本到网页:

    head标签中的
  • body标签中的
  • (通常在末尾)

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

这就是我喜欢做的。它可能不完美，但我喜欢这样:

脚本在HTML文档中的位置:

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

有一个例外:处理FOUC的脚本(例如modernizr)。这个脚本必须在头部。我看不出有其他合理的例外。

脚本组织:

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

对于超文本文档(大多数网页)，我喜欢区分两种脚本:库和我在法语中称之为"script d' interfaage"("链接脚本"可能是一个很好的翻译…)。

库，顾名思义，就是在javascript环境中加载库的脚本，但不做任何事情。

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

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

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

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

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

外部文件还是内联脚本?

就我个人而言，我更喜欢使用外部文件的所有脚本，但通常我使用一个内联脚本标签来声明一些库所需的一些变量(你的键为你的广告服务等…)。

加载外部库

最后一个特殊情况:当您必须从另一个主机加载脚本时。通常，您无法判断脚本是否会加载，因为您无法判断其他服务器是否启动，以及它是慢还是快……你不能确切地知道这个脚本要做什么，所以它可能会破坏你的页面…

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

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

相关文章：