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

通常有一些代码来初始化UI组件。例如，需要在UI中设置document.ready或bind事件中的一些UI。如何使html和UI相关的javascript代码更少耦合？

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

view.js

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

来源

2013-03-16 Bear

创建一个接受参数'init（id，whatever）'的函数。 – undefined 2013-03-16 10:35:45

但它很麻烦，通常有很多视图初始化。然后，我需要分别创建相同数量的函数（initxxx，init yyy，...）来初始化这些视图.... – Bear 2013-03-16 10:37:01

不，不是创建许多函数，而是多次调用该函数。 – undefined 2013-03-16 10:37:43

或者，你可以通过HTML元素的功能的IDS。由于：

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

在HTML文件中，调用脚本标签中的功能的init（ “＃some_view”）;

来源

2013-03-16 10:41:38

但是如何处理一个需要初始化许多UI的页面？只需说明document.ready中的init代码即可。 – Bear 2013-03-16 10:45:59

改为使用名称空间。例如：UIOne.init（），UITwo.init（） – 2013-03-16 10:50:26

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

DOM元素可以遍历而不必定义id, class, rel or any other attribute，但这可能会伤害你在速度部门，仍然不能排除HTML结构的依赖关系。

拥有id比任何缺点都有优势。通过id属性选择DOM元素是抓取元素的最快方法。

您需要将html与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')对象 DOM遍历已经完成一次。下次您使用它时，遍历不是必需的。即使您必须将id从#some_view更改为#something_else，也只能在一个地方完成。

来源

2013-03-16 11:12:54

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

回答

相关问题