0

通常有一些代码来初始化 UI 组件。例如，需要在 UI 中设置一些 uidocument.ready或bind向 UI 设置事件。

据我了解，我们不应该将这些代码放在 html 文件中。但我担心的是，如果我将这些初始化代码放到单独的 js 文件中，它似乎仍然与 html 文件高度耦合，因为我需要对 UI 类/id 进行硬编码才能选择它。将 html 和 UI 相关的 javascript 解耦的通常做法/架构是什么？如果您能提供一些简单的示例，那就太好了。

视图.js 

function init() {
    $("#some_view").click(sth);
    $("#some_view").text(sth);
}
4

2 回答 2

1

虽然，我一直在想这件事只有天知道，但我不相信它可以是一个直截了当的答案。这就是为什么

DOM 元素可以在没有定义的情况下被遍历id, class, rel or any other attribute，但这可能会伤害你的速度部门，仍然不能排除对 html 结构的依赖。

拥有id确实比它可能拥有的任何缺点都有优势。通过属性选择 DOM 元素id是获取元素的最快方式。

您需要将 js 与 html 文件分开，因为它允许浏览器缓存。即使从开发人员的角度来看，将事物组织起来也很不错。

但是通过一种简单、更好和推荐的方法，您可以减少必须更改属性（如id.

// have selectors defined once and use that object later.
var someView = $("#some_view");

// use someView everywhere (within scope)

someView.click(sth);
someView.text(sth);

这实际上更快，因为在将$('#some_view')对象分配给someView. 下次使用时，就不需要遍历了。即使您必须将idfrom更改#some_view为#something_else，也只能在一个地方完成。

于 2013-03-16T11:12:54.407 回答
1

或者，您可以将 html 元素的 id 传递给函数。作为：

function init(id) {
    $(id).click(sth);
    $(id).text(sth);
}

在 HTML 文件中，将脚本标记内的函数调用为 init("#some_view");

于 2013-03-16T10:41:38.890 回答