2

我正在构建一个由组件组成的站点。定义为一组特定的 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 块中实例化组件。换句话说，它会检查组件是否放置在页面模板上，如果是，则将其依赖的 js 函数调用添加到主脚本块中。

4）我应该考虑的其他选择？

更新：

根据kemp的回答，我想我应该澄清一下。我们所有的 jQuery 函数都将打包到一个大的压缩 .js 文件中，因此就服务器命中而言，它们都是一样的。我对如何在单个页面模板的上下文中最好地处理页面上每个组件的所有单个函数调用更感兴趣。

例如，组件 X 可能会在 90% 的页面上使用。因此，为其他 10% 的页面调用 jquery 函数似乎没什么大不了的。

但是，组件 Y 可能仅用于所有页面的 5%。我可能不想在 95% 的情况下在每一页上调用 jquery 函数，这是不必要的。

另一种情况可能会使事情变得更加复杂：组件 Z 可能在 100% 的所有页面上使用一次，但在 5% 的页面上使用两次。

4

4 回答 4

2

您可以使用混合解决方案，编译和压缩您的 js 文件并调用内联函数假设我们将使用 2 个不同的函数，这里的示例：

var DA = {
    animateStuff:function(element){
        $(element).animate({height:500},normal);
        $(element).doSomethingElse();
    },
    doAnotherStuff:function(element){
        $(element).doOtherThings();
    }
};

<head>用 jquery lib 打包你的 js 并在部分中加载它。然后，

在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。

希望这会有所帮助。干杯

于 2010-01-27T19:50:51.267 回答
1

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

使用#1，如果您正确设置选择器，性能影响可能微不足道。基于 id 的选择器是最好的（#elementid），然后element.classname（只是.classname比较慢）。

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

我不喜欢#2，因为那时您将在整个页面上使用 JavaScript。这似乎不太理想。

于 2010-01-27T14:23:32.423 回答
0

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

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

于 2010-01-25T21:29:35.310 回答
0

就个人而言，虽然我知道这很混乱，而且可能不是理想的做法，但如果您担心开销，我会选择选项 #2，修改后的。

我假设您的每个组件也都分配了一个 ID？如果每次输出组件时都执行 $('#componentX1').doSomething() ，那么开销会最小，因为 DOM 不会像访问组件时那样频繁地被扫描通过类名。请参阅http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspx。

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

于 2010-01-28T21:17:54.280 回答