在客户端和服务器中使用 MVC 模式答案

【问题标题】：Using MVC pattern in Client and Server在客户端和服务器中使用 MVC 模式
【发布时间】：2012-06-21 09:26:34
【问题描述】：

我尝试了几天来寻找在客户端和服务器中都使用 MVC 模式的理由。我目前在服务器端使用 MVC 框架，并且创建了一个 RESTfull api。我使用jsrender创建了模板

<script id="housestemplate" type="text/x-jquery-tmpl">
    <li><a href="#" onclick="gethouse({{:house.id}});">
        <h3>{{:house.house_type.type}}</h3>
        <p>{{:house.area}} {{:house.bedroom_num}}</p></a>
</script>

然后我使用 ajax 来检索和填充模板

        $.ajax
        ({
            type:"GET",
            url: url ,
            success:function (data) {
                $("#renderHouse").html($("#housestemplate").render(data));
            }
        });

Javascript MVC 框架如何在不破坏 DRY 规则的情况下改进此功能，因为模型和视图（模板）在客户端和服务器代码中重复？

【问题讨论】：

把客户端和服务器想象成两个独立的应用程序，服务器只关心处理数据库和处理数据请求，客户端只关心将数据呈现给用户，取用户输入并与服务器通信
这里的重点是服务器和客户端运行在不同的领域，通常使用不同的编程语言，因此独立但重叠的数据模型的必要性大于符合 DRY。

标签： model-view-controller backbone.js

【解决方案1】：

对于that 的特定示例，这绝对是一种矫枉过正，您最好使用简单的 javascript/jquery。

但是，将 javascript/jquery 的数量增加到大约 500 行。它看起来怎么样？可管理？ 1000-2000 LOC怎么样？现在，您希望将所有代码组织为对象（类:) 和可以相互通信的方法，就像后端服务的组织方式一样。嗯……那又怎样？好吧，backbone.js 来救援！它有助于将您的代码组织到 MVC(C) 范例中（后者 C 是 Collection）。因此，您将代码组织和事件驱动的通信作为框架的一部分，并且您希望之前的 2k 行代码一开始就以这种方式组织。

那么，骨干带给你什么？意大利面条的代码组织和预防。事实上，您可以使用类似 UML 的分析（类图等）来分析和设计应用程序的“前端”并使其更易于维护。

所以你想问的问题是，值得吗？这取决于您期望的 javascript 数量和前端的范围/大小。正如@jakee 指出的那样，将客户端/服务器视为在不同领域中运行确实有帮助。

祝你好运！

【讨论】：

感谢您的回答。就像往常一样，情况就是这样。