在 Javascript 对象中分离视图和控制器逻辑答案

【问题标题】：Separating View & Controller logic in Javascript objects在 Javascript 对象中分离视图和控制器逻辑
【发布时间】：2012-09-17 15:46:11
【问题描述】：

我想将 DOM 操作和交互 (jQuery) 分开，让我们从我的客户端应用程序逻辑 (socket.io) 中将其称为 VIEW，让我们将其称为控制器。沟通需要有两种方式：

当用户与 DOM 交互时查看到 CONTROLLER，例如点击按钮
当服务器发送要在 DOM 中显示的更新时查看控制器，例如新的聊天消息

我在这两个 JavaScript 对象之间进行通信时遇到了问题。我如何以有效的方式在两者之间进行沟通？下面的简单示例。

// CONTROLLER LOGIC (socket.io stuff)
function socketController() {}

socketController.prototype = {

    constructor: function() {

        // define socket listners
    this.socket.on('chatMessage', this.chatUpdate.bind(this));
    }

    chatUpdate: function(data) {

        // somehow call a "render" function on the "view" object
        // this.view.renderChatDOM(data.username, data.message);
    }
}

// VIEW LOGIC (jQuery stuff)
function jqueryView() {}

jqueryView.prototype = {

    onDOMReady: function() {

        // bind event handlers
        $('#send-message').bind('click', this.sendMessage.bind(this));          
    }

    sendMessage: function(event) {

            // manipulate DOM
        var $messageNode = $('#message-input'),
                $buttonNode = $('#send-message'),
                message = $messageNode.val();

            $messageNode.val(''); // clear input

            // somehow call the socketController and send data
            // this.socketController.chatSend(message);
    }
}

【问题讨论】：

这是一个非常模糊的问题，不清楚您的示例中的哪个 javascript 是客户端还是服务器端...您能澄清一下吗？
没有服务器端代码。我只关心客户端分离：socket.io 代码从我的 Dom 操作 jQuery。
所以基本上socket.io和“socketController”中的应用程序逻辑需要将从服务器发送的更新传送到更新DOM的“jqueryView”对象。然后当另一个用例发生时：用户与 DOM 交互时，“jqueryView”对象需要将更改传达给“socketContoller”对象，以便它可以将数据发送到服务器。因此将 Dom 操作与应用程序逻辑分开......我希望这更清楚
我只是在纠结如何表示这两种方式的交流。

标签： javascript jquery model-view-controller node.js socket.io

【解决方案1】：

您为什么不看一下提供从视图到控制器（或视图模型）的两种数据绑定方式的 DOM 操作库。然后您不必管理手动更新，而只需更改您的客户端模型（或客户端视图），框架将负责保持图层同步。 http://knockoutjs.com 可能是个值得一看的好地方。

【讨论】：

这看起来不错，双向数据绑定是我不知道的一种模式。由于我正在编写的这个应用程序（node.js / socket.io）纯粹是出于教育目的，我想避开库（我也讨厌它创建的 js 库的数量和社区碎片）。如果有人能引导我创建双向对象数据绑定（不带库），那就太好了！？
检查这个：jsfiddle.net/bpH6Z/4 ... 找到它：stackoverflow.com/questions/11904039/…
BTW .. 这只是最小的数据绑定，无法与 KnockoutJS、AngularJS 类型的库的强大功能相提并论。由于您这样做是出于教育目的，还请查看 boilerplatejs.org，它描述了仅适用于 JS 前端的参考架构。

【解决方案2】：

所以最后 Hasith 是对的。我确实在寻找 javascript 中的 MVC 框架。我决定使用backbone.js，因为就大小、学习曲线和资源而言，它的侵入性最小。

这解决了我将应用程序逻辑 (MODEL) 与 DOM 操作和呈现 (VIEW) 分开的问题。

去主干.js！！

【讨论】：