Question

我从带有update / create / delete标志的websocket接收JSON对象。根据这些信息，我要么更新，创建或删除HTML元素并绑定回调。这可能会影响多个HTML元素。

我目前的做法是将所有内容放入通过jquery处理HTML生成的特定对象中，例如：

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

并绑定事件侦听器。但随着越来越多的代码的添加，它变得非常混乱，现在我正在寻找一种分离代码的正确方法。

对于如何正确地做到这一点有什么想法吗？构架？也许jQuery模板（这仍然让我对如何干净地添加回调感到茫然）？

Answer 1

查找MVVM框架。这正是您需要的，因为您的JavaScript变得越来越复杂。它分离了您的Presentation代码（html）和Presentation Logic（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类。它们可以随时更改，您的代码仍然相关。

Answer 2

要渲染html，您可以使用Handlerbars.js它非常成熟，并且有很多文档

对于事件绑定，我建议您对未使用ajax更新删除的父对象使用jQuery delegate。这样，您只需要在每个请求上重新分配事件

Answer 3

在您的情况下，我建议您查看Knockoutjs，AngularJS或Backbone.js。

Answer 4

结帐Backbone.js。这是一个非常流行和灵活的MVC-ish为JS浏览器应用程序设置。代码托管在github。

Answer 5

Knockout JS可能值得一看，它将数据模型与视图模型分开，并处理它们之间的依赖关系。

如何正确分离JavaScript视图/逻辑代码

5 个答案: