如何正确分离 JavaScript 视图/逻辑代码 [关闭]

Posted 2023-02-24

【中文标题】如何正确分离 JavaScript 视图/逻辑代码 [关闭]

【英文标题】：How do i separate JavaScript View/Logic code properly [closed]

【发布时间】：2012-09-19 10:14:39

【问题描述】：

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

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

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

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

对于如何正确执行此操作有任何想法吗？构架？也许是 jQuery 模板（这仍然让我对如何干净地添加回调一无所知）？

【问题讨论】：

您是否尝试过创建自定义事件？

从来没有听说过，我只是查了一下，我认为这对分离视图/逻辑代码没有帮助。如果您对如何使用这些有想法，请解释:)

可能重复：***.com/questions/7495680/…

【参考方案1】：

查找 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会自动显示“clicked”。显然，这可以在通过 AJAX 请求从服务器检索信息时使用，并且您不必依赖控件 ID/CSS 类。它们可以随时更改，您的代码仍然相关。

【参考方案2】：

对于您的情况，我建议您查看 Knockoutjs 、 AngularJS 或 Backbone.js。

【讨论】：

谢谢，我查看了 Knockoutjs 和 AngularJS，我了解 AngularJS 做得更好的方式。

【参考方案3】：

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

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

【参考方案4】：

查看Backbone.js。这是一个非常流行和灵活的 MVC 风格的 JS 浏览器应用程序。代码托管在github。

【参考方案5】：

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