使jQuery函数调用。 最佳做法？
我正在构建一个由组件组成的站点。 一个组件，定义为一组特定的HTML和CSS以及jQuery。 该网站的每个页面都包含许多组件。
根据最佳实践，我们将javascript块放在页面底部。 我们加载了所需的.js文件，然后我打算调用所需的函数：
doThisThing(); doThatThing(); 假设我有组件X.我想在渲染页面上出现该组件时调用一个函数。 从jQuery的角度来看，处理这个问题的理想方法是什么？ 一些选择：
1）无论组件是否在页面上，始终调用该函数：
$('.componentX').doYourThing()
这很简单，因为我们可以只有一个通用的jQuery函数调用块。 但是，由于搜索DOM寻找可能不存在的东西，因此会有轻微的性能损失。
2）将调用附加到组件本身：
my component $('.componentX').doYourThing()
这很好，因为它包含同一组件中的标记和.js调用。 缺点？
3）将我们的组件体系结构与后端系统集成，以允许实例化.js块中的组件。 换句话说，它会检查组件是否放在页面temlate上，如果是，则会添加它依赖于主脚本块的js函数调用。
4）我应该考虑的其他选择？
更新：
根据肯普的回答，我想我应该澄清一下。 我们所有的jQuery函数都将被包装成一个大的压缩.js文件，所以在服务器命中方面，它们都是一样的。 我更感兴趣的是如何在单个页面模板的上下文中最好地处理页面上每个组件的所有单个函数调用。
例如，组件X可能在所有页面的90％上使用。 因此，为其他10％的页面调用jquery函数似乎不是什么大问题。
但是，组件Y可能仅在所有页面的5％上使用。 我可能不希望在95％的时间内在每个页面上调用jquery函数，这是不必要的。
进一步的情况可能会使事情进一步复杂化：组件Z可能在所有页面的100％上使用一次，但在5％的页面上使用两次。
根据项目的大小，我会选择＃1选项，因为它很简单，或选项＃3，因为它是正确的。
使用＃1，如果正确设置选择器，性能影响可能无关紧要。 基于Id的选择器是最好的（ #elementid ），然后是element.classname （相比之下， .classname相当慢）。
使用＃3，每个组件都需要知道其function所需的JS文件。 在页面上定义组件时，必须将该JS文件添加到页面的 。 在不知道您的服务器端语言和框架（如果有的话）的情况下，很难说更多，但如果组件通过服务器上的代码以任何方式表示，它们应该有一个构造函数或初始化例程，并且在该代码中是你可以放置逻辑来修改页面的 ，或者稍后读取的一些集合来构建页面的 。
我不喜欢＃2，因为你会在整个页面上拥有JavaScript。 这似乎不太理想。
您可以选择混合解决方案，编译和压缩您的js文件并调用函数inline让我们说我们将使用2个不同的函数inheritance人的例子：
var DA = { animateStuff:function(element){ $(element).animate({height:500},normal); $(element).doSomethingElse(); }, doAnotherStuff:function(element){ $(element).doOtherThings(); } };
使用jquery lib打包你的js并将其加载到部分。 然后，
在HTML部分：
my component my component
通过这种方式你的html将更干净，js文件将更清洁，你不会等待dom加载调用你的function。 只要标签加载，您的function就会正常工作。 您可以根据需要将其他选项传递给您的函数。
例如，您可能决定稍后将DA.animateStuff函数更改为：
animateStuff:function(element, desiredHeight){ if(!desiredHeight){ var desiredHeight = 500 } $(element).animate({ height: desiredHeight },normal); $(element).doSomethingElse(); },
你可以改变html像：
my component
通过这种方式，您可以在调用函数时定义元素的高度。 如果你没有定义它将是500。
希望这很有帮助。 干杯
我个人会将所有代码放在一个.js文件中（除非你有一些非常具体的任务只在几个不经常加载的页面上完成），这样它就可以用一个请求缓存一次。 我相信多个请求的开销大于几个DOM扫描（由客户端完成）。
选项＃2违反了jQuery的一个主要原则，它将javascript代码与标记分开，因此我永远不会走这条路。
就个人而言，虽然我知道这很麻烦，也许不是理想的做法，如果你担心开销，我会选择＃2，修改。
我假设你的每个组件都分配了一个ID？ 如果每次输出组件时都执行$（’＃componentX1’）。doSomething（），那么您将获得最少的开销，因为DOM不会像访问组件时那样在任何地方进行扫描。通过class级名称。 请参见http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspx 。
另一个想法 – 我不确定你的整个模板系统是如何工作的，但也许你可以将每个组件X的ID存储在一个全局变量中，然后循环并打印出底部的.doSomething（）javascript。每个人的模板。