对jQuery函数调用进行组件化。最佳实践？
我正在构建一个将由组件组成的网站。定义为一组特定的HTML、CSS和jQuery的组件。该网站的每个页面将由许多组件组成。
根据最佳实践，我们将javascript代码块放在页面的底部。我们加载所需的.js文件，然后我计划调用所需的函数：
doThisThing();
doThatThing();假设我有一个组件X，只要这个组件出现在呈现的页面上，我就想调用一个函数。从jQuery的角度来看，处理此问题的理想方法是什么？一些选项：
1)无论组件是否在页面上，始终调用函数：
$('.componentX').doYourThing()这很简单，因为我们可以只有一个通用的jQuery函数调用块。但在搜索DOM以查找可能不存在的内容时，性能会受到轻微影响。
2)将调用附加到组件本身：
<div id="componentX">my component</div>
<script>$('.componentX').doYourThing()</script>这很好，因为它本身将标记和.js调用包含在同一个组件中。缺点？
3)将我们的组件架构与后端系统集成，以允许在.js块中实例化组件。换句话说，它将检查组件是否放置在页面temlate上，如果是，则会将它所依赖的js函数调用添加到主脚本块。
4)我应该考虑的其他选项？
更新：
根据kemp的回答，我想我应该澄清一下。我们所有的jQuery函数都将被封装到一个大的压缩的.js文件中，所以就服务器命中率而言，它们都是一样的。我更感兴趣的是如何在单个页面模板的上下文中最好地处理页面上每个组件的所有单个函数调用。
例如，组件X可能在所有页面的90%上使用。因此，为其他10%的页面调用jquery函数似乎不是什么大问题。
但是，组件Y可能只在所有页面的5%上使用。我可能不想在每一个页面上调用jquery函数，因为95%的时间都是这样的，这是不必要的。
另一个场景可能会使事情变得更加复杂:组件Z可能在100%的所有页面上使用一次，但在5%的页面上使用两次。
回答 4
Stack Overflow用户
发布于 2010-01-27 22:23:32
根据项目的规模，我会选择选项#1，因为它很简单，或者选择#3，因为它是合适的。
对于#1，如果您正确设置选择器，则性能影响可能微乎其微。基于Id的选择器是最好的(#elementid)，然后是element.classname (只是.classname比较慢)。
在#3中，每个组件都需要知道其功能需要哪个JS文件。在页面上定义组件时，必须将该JS文件添加到页面的<head>中。如果不知道您的服务器端语言和框架(如果有)，就很难再说更多了，但是如果组件是通过服务器上的代码以任何方式表示的，那么它们应该有一个构造函数或初始化例程，并且在这些代码中放置用于修改页面的<head>的逻辑，或者放置一些稍后从中读取以构造页面的<head>的集合。
我不喜欢#2，因为那样页面上就会到处都是JavaScript了。这似乎不太理想。
Stack Overflow用户
发布于 2010-01-28 03:50:51
你可以选择一种混合的解决方案，编译和压缩你的js文件，并内联调用函数。假设我们将使用两个不同的函数，这里的例子：
var DA = {
animateStuff:function(element){
$(element).animate({height:500},normal);
$(element).doSomethingElse();
},
doAnotherStuff:function(element){
$(element).doOtherThings();
}
};使用jquery lib打包您的js，并将其加载到<head>部分。然后,
在html部分中：
<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX');</script>
<div class="componentY">my component</div>
<script>DA.doAnotherStuff('.componentY');</script>这样你的html会更整洁，js文件也会更整洁，你不需要等待dom被加载来调用你的函数。一旦加载了<script>标签，你的函数就可以工作了。您可以根据需要将其他选项传递给您的函数。
例如，您可能决定稍后将您的DA.animateStuff函数更改为：
animateStuff:function(element, desiredHeight){
if(!desiredHeight){
var desiredHeight = 500
}
$(element).animate({ height: desiredHeight },normal);
$(element).doSomethingElse();
},您可以像这样更改html：
<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX',900);</script>通过这种方式，你可以在调用函数时定义元素的高度。如果你没有定义，它将是500。
希望这能对你有所帮助。干杯
Stack Overflow用户
发布于 2010-01-26 05:29:35
就我个人而言，我会将所有代码放在一个.js文件中(除非您只在几个不经常加载的页面上完成了一些非常具体的任务)，这样它就可以通过一个请求缓存一次。我相信多个请求的开销比多几次DOM扫描(由客户端完成)要大得多。
选项#2违背了jQuery的主要原则之一，即将javascript代码从标记中分离出来，所以我永远不会走上这条路。
https://stackoverflow.com/questions/2135654
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号