Question

我正在构建一个包含组件的网站。一个组件，定义为一组特定的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）我应该考虑其他选择吗？

更新：

根据肯普的回答，我想我应该澄清一下。我们所有的jQuery函数都将被包装成一个大的压缩.js文件，所以在服务器命中方面，它们都是一样的。我更感兴趣的是如何在单个页面模板的上下文中最好地处理页面上每个组件的所有单个函数调用。

例如，组件X可能在所有页面的90％上使用。因此，为其他10％的页面调用jquery函数似乎不是什么大问题。

但是，组件Y可能仅在所有页面的5％上使用。我可能不希望在95％的时间内在每个页面上调用jquery函数，这是不必要的。

可能使事情进一步复杂化的另一种情况：组件Z可能在所有页面的100％上使用一次，但在5％的页面上使用两次。

Answer 1

你可以选择混合解决方案，编译和压缩你的js文件并调用内联函数假设我们将使用2种不同的功能继承人的例子：

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。

希望这很有帮助。欢呼声

Answer 2

根据项目的大小，我会选择＃1选项，因为它很简单，或选项＃3因为它是正确的。

使用＃1，如果正确设置选择器，性能影响可能无关紧要。基于Id的选择器是最好的（#elementid），然后是element.classname（仅.classname相当慢）。

使用＃3，每个组件都需要知道其功能所需的JS文件。在页面上定义组件时，必须将该JS文件添加到页面的<head>。在不知道您的服务器端语言和框架（如果有的话）的情况下，很难说更多，但如果组件通过服务器上的代码以任何方式表示，它们应该有一个构造函数或初始化例程，并且在该代码中是你可以放置逻辑来修改页面的<head>，或者稍后读取的一些集合来构建页面的<head>。

我不喜欢＃2，因为你会在整个页面上拥有JavaScript。这似乎不太理想。

Answer 3

我个人会将所有代码放在一个.js文件中（除非你有一些非常具体的任务只在几个不经常加载的页面上完成），这样它就可以用一个请求缓存一次。我相信多个请求的开销大于几个DOM扫描（由客户端完成）。

选项＃2违反了jQuery的一个主要原则，它将javascript代码与标记分开，所以我永远不会走这条路。

Answer 4

就个人而言，虽然我知道这很麻烦，也许不是理想的做法，如果你担心开销，我会选择＃2，修改。

我假设每个组件都分配了一个ID？如果每次输出组件时都执行$（'＃componentX1'）。doSomething（），那么您将获得最少的开销，因为DOM不会像访问组件时那样在任何地方进行扫描。通过班级名称。请参阅http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspx。

另一个想法 - 我不确定你的整个模板系统是如何工作的，但也许你可以将每个组件X的ID存储在一个全局变量中，然后循环并打印出.doSomething（）javascript at每个模板的底部。

使jQuery函数调用。最佳做法？

4 个答案: