大家好，我正在考虑构建一个使用 ajax 的网站，并且我正在尝试花一些时间预先考虑架构。
我正在使用 Code Igniter 和 jquery。我最初的想法是弄清楚如何在 javascript 端复制 MVC，但似乎 M 和 C 并没有太多的位置。
很多 JS 将是 ajax 调用，但我可以看到它的发展不止于此，还有大量的 DOM 操作，以及探索 HTML5 客户端数据库。我应该如何考虑构建这些文件？追求MVC有意义吗？我应该以某种方式去jquery插件路线吗？我不知道如何进行，我喜欢一些提示。谢谢大家！
【问题讨论】：
标签： javascript jquery model-view-controller architecture
我制作了一个 MVC 风格的 Javascript 程序。用 M 和 C 完成。也许我做了一个错误的举动，但我最终创作了自己的事件调度程序库。我确保不同的层只使用可以转换为纯 JSON 对象的消息协议进行通信（即使我实际上并没有执行该转换步骤）。
所以 jquery 主要存在于 MVC 架构的 V 部分。在 M 和 C 端，我的主要代码可以在独立的 CLI 版本的 spidermonkey 中运行，或者在 javascript 的服务器端 rhino 实现中运行（如有必要）。这样，如果以后需求发生变化，我可以让我的 M 和 C 层在服务器端运行，通过这些 json 消息与浏览器中的 V 端进行通信。不过，它只需要对我的消息调度程序进行一些修改即可改变这一点。将来，如果浏览器获得一些点对点风格的技术，我可以让不同的 teir 在不同的浏览器中运行。
但是，目前，所有三层都在一个浏览器中运行。我编写的事件分派器允许多播消息，因此现在实现撤消功能就像创建一个新对象一样简单，该对象只侦听需要撤消的消息。将状态自动保存到服务器是一个类似的操作。我能够在事件调度程序中进行全面详细的调试和分析。我能够准确地定义代码的运行方式、速度、时间和地点，所有这些都来自代码的中心部分。
当然，我遇到的主要缺点是我没有很好地管理事物的复杂性。为此，如果我把这一切都重新做一遍，我会非常非常仔细地研究“功能反应式”范式。在 javascript 中有一个现有的该范例的实现，称为 flapjax。如果没有专门使用flajax库，我会确保视图层遵循该执行模型。 （我不确定 Flapjax 本身是否能很好地执行这个想法，但这个想法本身很重要）。
函数式反应的另一个大实现是石英作曲家，它随苹果的开发工具免费提供（购买任何 mac 后免费）。如果您可以使用它，请仔细查看它以及它是如何工作的。 （它甚至还有一个 javascript 补丁，因此您可以使用预构建的视图层对您的应用程序进行原型制作）
函数式反应范式的主要内容是确保视图看起来不会保持任何类型的状态，除了您刚刚给它显示的状态。更具体地说，我从“将对象添加到屏幕”“从屏幕上删除对象”类型消息开始，现在我更倾向于“显示此对象列表，我将让您找出从当前显示到我现在希望您显示的最有效的方法”。这消除了一大堆与管理不善有关的错误。
这也解决了我遇到的另一个问题，即由于消息以错误的顺序到达而导致的错误。这是一个需要解决的大问题，但您可以通过在一个大包中发送最终所需状态而不是一系列步骤来回避它。
无论如何，这是我的小吐槽。如果您对我的战时经历有任何其他问题，请告诉我。
【讨论】：
冒着被激怒的风险，我建议您使用除 JQuery 之外的另一个框架，否则您将面临达到其性能上限的风险。它的 ala-mode 插件在尝试将 M、V 和 C 分开时也会出现一些问题。
Dojo 以其通过不同传输协议绑定到服务器端数据的数据存储以及可轻松扩展和定制的面向对象、轻快的小部件系统而闻名。它的风格可以帮助您编写干净、划分良好的代码——尽管它不是严格意义上的 MVC。这将需要一些额外的计划。
不过，Dojo 的学习曲线比 JQuery 更陡峭。
更多关于您的问题，保存和查询此数据的 AJAX 调用和对象（或数据存储）将是您的模型。小部件和 CSS 将是您的视图。控制器基本上就是将所有这些连接在一起的应用程序代码。
为了将它们分开，我建议使用松耦合的事件驱动系统。尝试尽可能少地直接访问对象，使它们保持“黑盒”并通过自定义事件或发布/订阅主题获取数据。
【讨论】：
有一些 JavaScript MVC 框架，这个名字很明显： http://javascriptmvc.com/
【讨论】：
JavaScriptMVC (javascriptmvc.com) 是组织和开发大型 JS 应用程序的绝佳选择。
架构设计非常实用。您将使用 JavaScript 做 4 件事：
JMVC 将这些拆分为模型、视图、控制器模式。
首先，也是最重要的优势，是控制器。控制器使用事件委托，因此您无需附加事件，只需为您的页面创建规则。他们还使用控制器的名称来限制控制器的工作范围。这使您的代码具有确定性，这意味着如果您在“#todos”元素中看到事件发生，您就知道必须有一个 todos 控制器。
$.Controller.extend('TodosController',{
'click' : function(el, ev){ ... },
'.delete mouseover': function(el, ev){ ...}
'.drag draginit' : function(el, ev, drag){ ...}
})
接下来是模型。 JMVC 提供了一个强大的类和基本模型，让您可以快速组织 Ajax 功能（#2）并使用特定于域的功能包装数据（#3）。完成后，您可以使用控制器中的模型，例如：
Todo.findAll({after: new Date()}, myCallbackFunction);
最后，一旦您的待办事项返回，您必须显示它们（#4）。这是您使用 JMVC 视图的地方。
'.show click' : function(el, ev){
Todo.findAll({after: new Date()}, this.callback('list'));
},
list : function(todos){
$('#todos').html( this.view(todos));
}
在'views/todos/list.ejs'中
<% for(var i =0; i < this.length; i++){ %>
<label><%= this[i].description %></label>
<%}%>
JMVC 提供的不仅仅是架构。它可以帮助您在开发周期的任何阶段：
【讨论】：
我认为 JavaScript 中肯定有“M”和“C”的位置。
查看AngularJS。
它有助于您的应用程序结构和“视图”和“逻辑”之间的严格分离。 旨在与其他库一起工作，尤其是 jQuery。
包含完整的测试环境（单元、e2e）+ 依赖注入，因此使用 AngularJS 进行测试是小菜一碟。
【讨论】：