如何减少html和UI相关javascript代码的耦合？

通常会有一些代码来初始化UI组件。例如，需要在document.ready中设置一些ui或将事件绑定到ui

根据我的理解，我们不应该把这些代码放在html文件中。但我担心的是，如果我将这些init代码放在一个单独的js文件中，它似乎仍然与html文件高度耦合，因为我需要硬编码UI类/id以选择它。将html和与UI相关的javascript解耦的通常做法/体系结构是什么？如果你能提供一些简单的例子就好了

view.js

---

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

---

在HTML文件中，调用脚本标记内部的函数作为initsome_视图

虽然我一直在想这件事只有上帝知道，但我不相信这是一个直截了当的答案。原因如下

可以遍历DOM元素，而不必具有define id、class、rel或任何其他属性，但这可能会损害您的速度，并且仍然不能排除对html结构的依赖

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

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

但是，通过一种简单、更好和推荐的方法，您可以减少必须更改id等属性的级联效应

---

这实际上更快，因为在将$'some_view'对象分配给someView时，DOM遍历已经完成了一次。下次使用它时，将不需要遍历。即使您必须将id从某个视图更改为其他视图，也只能在一个位置执行此操作。

创建一个接受参数initid的函数。但这非常麻烦，init通常有许多视图。然后我需要创建相同数量的函数initxxx，inityyyy，。。。。分别初始化那些视图…不，不是创建许多函数，而是多次调用函数。不同的ui有不同的初始化代码，对吗？对不起，你能指出没有意义的地方吗？我只是想把问题弄清楚，但是一个有很多需要初始化的UI的页面怎么样？只需说出document.ready.Go中的init代码即可，改为使用名称空间。例如：UIOne.init，UITwo.init

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

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

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

// use someView everywhere (within scope)

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