如何正確分離JavaScript視圖/邏輯代碼

我從帶有更新/創建/刪除標誌的websocket接收JSON對象。基於這些信息，我可以更新，創建或刪除HTML元素並綁定回調。這可能會影響多個HTML元素。如何正確分離JavaScript視圖/邏輯代碼

我目前的做法是，把一切都成通過jQuery例如爲：

$.("<table>").addChild($("<tr>")).addClass('test')

和綁定事件偵聽器處理HTML生成特定的對象。但隨着越來越多的代碼的增加，它變得非常混亂，現在我正在尋找合適的方法來分離代碼。

有沒有關於如何正確地做到這一點的任何想法？構架？也許jQuery模板（這仍然讓我在黑暗中如何添加回調幹淨）？

來源

2012-09-27 user1703761

您是否嘗試創建自定義事件？ – udidu

從來沒有聽說過他們，我只是看着他們，我不認爲這將有助於分離視圖/邏輯代碼。如果你有關於如何使用這些的想法，請解釋:) – user1703761

可能重複：http://stackoverflow.com/questions/7495680/can-anyone-suggest-design-pattern-to-separate-business-logic-and -presentation-lo –

在你的情況，我可以推薦你看看Knockoutjs,AngularJS或Backbone.js。

來源

2012-09-27 15:29:16 nekman

謝謝你，我已經看過Knockoutjs和AngularJS，並且我理解AngularJS更好地做事情的方式。 – user1703761

呈現HTML，您可以使用它Handlerbars.js是非常成熟，有大量的文件

的對於事件的結合，我建議你不已經與阿賈克斯更新刪除父對象上使用jQuery delegate。這樣你只需要重新分配每個請求的事件

來源

2012-09-27 15:26:23 coolxeo

查找MVVM框架。這正是你所需要的，因爲你的JavaScript變得越來越複雜。它的方式隔開您的需求爲您演示代碼（HTML）和表示邏輯（JavaSript）

Knockout.js是一個非常好的圖書館，讓你開始，我建議要通過教程，讓你開始在其之間的關注。

快速例如：

HelloWorld.html的

<div data-bind="value: helloWorldVariable"></div> 
<input type="button" data-bind="click: helloWorld" />

page.js：

var ViewModel = { 
    helloWorldVariable: ko.observable('test'), 
    helloWorld: function() { 
     this.helloWorldVariable('clicked!'); 
    } 
} 

// Bind viewmodel

當按鈕被點擊時，在div會自動顯示「點擊」。顯然，這可以在通過AJAX請求從服務器檢索信息時使用，而且您不必依賴控件ID/CSS類。他們可以隨時更改，並且您的代碼仍然相關。

來源

2012-09-27 15:29:04

結帳Backbone.js。這是爲JS瀏覽器應用程序設置的非常流行和靈活的MVC-ish。該代碼託管在github上。

來源

2012-09-27 15:29:24

Knockout JS可能值得一看，它將數據模型從視圖模型中分離出來，並處理它們之間的依賴關係。

來源

2012-09-27 15:29:31

如何正確分離JavaScript視圖/邏輯代碼

回答

相關問題