如何正确分离JavaScript视图/逻辑代码
我使用update / create / delete标志从websocket接收JSON对象。 基于这些信息，我可以更新，创建或删除HTML元素并绑定回调。 这可能会影响多个HTML元素。
我目前的做法是把所有东西都放到通过jquery处理HTML代码的特定对象中，例如：
$.("<table>").addChild($("<tr>")).addClass('test')
并绑定事件监听器。 但随着越来越多的代码的增加，它变得非常混乱，现在我正在寻找合适的方法来分离代码。
有没有关于如何正确执行此操作的任何想法？ 构架？ 也许jQuery模板（这仍然让我在黑暗中如何添加回调干净）？
在你的情况下，我可以推荐你看看Knockoutjs，AngularJS或Backbone.js。
查找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类。 他们可以随时更改，并且您的代码仍然相关。
要呈现html，你可以使用Handlerbars.js，它非常成熟并且有很多文档
对于事件绑定，我建议您在未使用ajax更新删除的父对象上使用jQuery委托。 这样你只需要在每个请求上重新分配事件
链接地址: http://www.djcxy.com/p/64233.html