javascript - 如何为网页设计师实现企业级 JavaScript "framework"？

Question

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

我们的 HTML 是用 JSP 呈现的，我们有很多自定义标签写出，例如，关于产品的信息，而无需网页设计师担心。

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

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

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

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

但是，我担心扩展问题，并且想知道在通常不使用选择器查询时运行大量选择器查询是否是个好主意。

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

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

Answer 1

如果有两个类名呢？

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

您将“foo”类添加到所有需要 javascript 修改的元素中。您的 javascript 只需为 foo 检查一次 dom。

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

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

var $dragAble = $foo.filter('.fooDragable');