将jQuery Reference放在HTML文档的底部会破坏用户控件

Question

Walter Rumsby为Where to place JavaScript in an HTML file提供了一个很好的答案。他将Yahoo Exceptional Performance团队所做的工作及其建议引用到place scripts at the bottom of the page。这是一个坚硬而快速的规则，我已经关注了很长一段时间了。在同一个帖子中Levi Rosol指出“最好的地方[JavaScript]就在你需要之前就已经开始了。”这就是我现在所处的困境。

我在页面末尾添加了对jQuery的引用，但是遇到了如何构建我想要添加客户端功能的用户控件的问题。具体来说，我很难找到适应依赖关系的最佳方法。用户控件有一个span标记，其中包含我想根据用户在用户控件中检查的复选框的数量更新的数值。我正在使用jQuery来查找span标记并更新其text属性。

不幸的是，除非我在用户控件之前出现对jQuery的引用，否则我会收到JavaScript错误。这是有道理的，因为控件引用了尚未添加的功能。我可以想到这个问题的几种解决方案，但我正在寻找最佳实践选择。

1. 在用户控件内部放置对jQuery库的引用。
   • 下行：如果将用户控件放入转发器，则会对jQuery库进行多次引用。
2. 在用户控件中不添加JavaScript并编写所有代码以更新包含页面中用户控件的span标记。
   • 下行：我最终会在多个地方使用相同的代码，从而造成潜在的维护噩梦。
3. 将jQuery引用放在页面的head部分。
   • 下行：我违反了对place scripts at the bottom of the page的建议，并且如果该页面不包含对jQuery的引用，则创建了一个无法使用的用户控件。

在考虑解决此问题时，我想出了这些选项和缺点。我当然愿意接受有关更好解决方案的建议，并且禁止任何人寻求我应该选择的三种建议。

Answer 1

有一个谷歌项目旨在解决你可能想要看到的这些叫做Jingo的痛苦：

http://code.google.com/p/jingo/

我推荐的另一个解决方案是像YUI Loader Utility这样的加载器。

http://developer.yahoo.com/yui/yuiloader/

它允许您管理依赖项等，并且在您使用其UI组件时它不仅有用。它可以用于任何事情;只需查看addModule周围的文档。

如果你使用的是ASP.NET，那么ScriptManager是另一个很好的解决方案。

Answer 2

另一种选择是通过从usercontrol注册一个启动脚本来动态生成脚本引用，该脚本编写了对文档头的脚本引用。

javascript函数可以检查现有的jQuery引用，如果没有找到，则写出引用。这将解决多个引用。讨论了一个基本的例子in this thread。

Answer 3

我发现的最简单的解决方案是使用帮助程序来累积要包含在页面主体中的Javascript片段，同时呈现其他页面元素。然后，您可以首先包含jQuery，然后是任何延迟的文字Javascript片段。

它确实需要在页面生成期间保持一些额外的状态，这会使渲染管道稍微复杂化。但是，它允许您获得延迟的Javascript包含，在加载页面后不需要复杂的DOM操作来挑选任何现有的对jQuery的引用。