1

我的任务是改善当前的混乱，这是我们的 JavaScript “策略”；我们是一家在线购物公司，我的老板给了我时间来正确地做这件事。他非常热衷于保持这种模块化并增加组件的可重用性。

我们的 HTML 是使用 JSP 呈现的，并且我们有很多自定义标签可以写出，例如，关于产品的信息，而 Web 设计人员无需担心它。

现在，我们想用 JavaScript 做类似的事情。应该为网页设计师提供一组自定义标签，例如，

<foo:draggable> 
 ... some HTML here ...
</foo:draggable>

这会将 HTML 包装在一个<div>顶部的拖动条和一个关闭按钮中。

我的想法是用一个唯一的命名空间 CSS 类名来标记 div，例如foo_draggable，然后将我的所有函数放在一个 JS 文件中。然后，该 JS 文件查看 DOM 中是否存在具有 CSS 类的元素，foo_draggable如果找到，它将附加所需的事件处理程序。

但是，我担心缩放问题，并且想知道在通常不会使用它们的情况下运行大量选择器查询是否是个好主意。

第一种选择是显式地启动每个可拖动项目，但这意味着将<script>标签放在所有地方。第二种方法是不将所有 UI 功能放在一个文件中，而只是下载我需要的那些，但这意味着更多的 HTTP 请求和更慢的页面加载速度。

有没有人有这方面的经验？

4

3 回答 3

3

有两个类名怎么样？

<div class='foo fooDragable'></div>
<div class='foo fooSortable'></div>

您将类 'foo' 添加到所有需要 javascript 修改的元素中。您的 javascript 必须只检查一次 dom 是否为 foo。

var $foo = $('.foo');

之后你可以在这个数组中搜索，这个数组应该比完整的 dom 小得多。

var $dragAble = $foo.filter('.fooDragable');
于 2009-11-12T14:39:12.123 回答
0

您是否考虑或查看过JSF？如果您还没有使用 JSF，我知道这是一个重大变化。但是有很多带有 ajaxical 酱汁的即用型 JSF 组件库，例如RichFaces、IceFaces、PrimeFaces等。自己为它创建组件/标签几乎是浪费时间。

或者，您可以替换所有 Javascript 以使用出色的 jQuery JS 框架。

于 2009-11-12T14:42:58.280 回答
0

根据你有多少单独的组件，运行选择器的额外开销可能不是什么大问题。您可以在页面加载时一次初始化所有组件。页面上不存在的任何内容都不会被初始化，并且不会产生进一步的开销。在大多数 JavaScript 框架中，按类名（或标签名）选择非常快。只有浏览器本身不支持的复杂选择器很慢。

如果你有一些常用的组件，然后是一组不太常用的组件，那么将它们分开可能是值得的。将常用组件保存在单个 JavaScript 文件中（经过压缩、压缩和积极缓存），并将其加载到每个页面中，无论是否需要。缓存将确保它只下载一次，并且它只是一个小的 HTTP 请求。对于不太常见的组件，将它们保存在单独的文件中（理想情况下，每个组件一个），并在使用它们的页面上添加一个脚本标签。

我并不完全熟悉 JSP 的工作原理，但可能会自动执行此操作 - 如果文档中包含标签，请在文档标题中为 foo_widget.js 添加脚本标签，或类似的东西。

于 2009-11-12T14:45:20.253 回答