如何使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代碼更少耦合？

回答

相關問題