Ajax 架构 - MVC？还是其他？

Question

Ajax 架构 - MVC？还是其他？

javascriptjquerymodel-view-controllerarchitecture

5

大家好，我正在考虑构建一个ajax-heavy网站，并试图花些时间来思考架构。

我正在使用Code Igniter和jquery。我的初始想法是找出如何在javascript方面复制MVC，但似乎M和C并没有太多的地方。

许多JS将是ajax调用，但我可以看到它会超越这一点，有很多DOM操作，以及探索HTML5客户端数据库。我应该如何考虑设计这些文件？追求MVC有意义吗？我应该以某种方式走jquery插件路线吗？我不知道如何继续下去，我希望得到一些提示。谢谢大家！

- thekevinscott

嘿，这对你有用吗？ - Breton

5个回答

6

冒着被骂的风险，我建议除了JQuery之外，您可以使用另一个框架，否则会有性能限制。它的众多插件也会在尝试分离M、V和C时产生一些问题。

Dojo以其数据存储设施而闻名，可用于绑定具有不同传输协议的服务器端数据，以及其面向对象、高速小部件系统，可轻松扩展和自定义。它的风格有助于引导您编写干净、良好分区的代码-虽然它并非严格的MVC模式。这需要一点额外的规划。

相比JQuery，Dojo的学习曲线更陡峭。

更重要的是，AJAX调用和保存并查询此数据的对象（或数据存储）将成为您的模型。小部件和CSS将成为您的显示。控制器基本上将是将所有内容连接起来的应用程序代码。

为了保持它们分开，我建议使用松耦合的事件驱动系统。尽可能少地直接访问对象，将它们“黑匣子化”，并通过自定义事件或发布/订阅主题获取数据。

- mwilcox

1

我不知道为什么你会被攻击。你的建议非常实用。jQuery是一个很棒的库，但它似乎并不是为这种类型的应用程序而设计的。它更适合轻量级使用，执行简单的效果，或提供打包的UI小部件，可以简单地部署在现有的静态网页上。话虽如此，我使用jQuery来解决典型的跨浏览器DOM gruntwork问题，如果没有库，你就必须自己处理。 - Breton

4

JavaScriptMVC（javascriptmvc.com）是组织和开发大规模JS应用的绝佳选择。

架构设计非常实用。您将使用JavaScript执行以下4个操作：

1. 响应事件 2. 请求数据/操作服务（Ajax） 3. 将特定于域的信息添加到ajax响应中。 4. 更新DOM

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提供的不仅是架构，还能在开发周期的每个环节为您提供帮助：

代码生成器
集成浏览器、Selenium和Rhino测试
文档
脚本压缩
错误报告

- Justin Meyer

3

我认为JavaScript中绝对有"M"和"C"的位置。

看看AngularJS。

它可以帮助你构建应用程序结构并严格区分“视图”和“逻辑”。设计与其他库良好配合，特别是jQuery。

完整的测试环境（单元测试，端到端测试）+依赖注入已包含在AngularJS中，因此使用AngularJS进行测试非常简单。

- Vojta

1

有一些JavaScript MVC框架可用，这个显然的名称是： http://javascriptmvc.com/

- doomspork

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Breton · Accepted Answer

我制作了一个MVC风格的Javascript程序，包含了M和C。也许我做错了一步，但最终我编写了自己的事件分发库。我确保不同层只使用可以转换为纯JSON对象的消息协议进行通信（尽管我实际上并没有执行该转换步骤）。

因此，jQuery主要存在于MVC架构的V部分。在M和C方面，我主要编写的是可以在独立的CLI版本的spidermonkey或必要时在服务器端rhino实现的JavaScript中运行的代码。这样，在以后需求更改时，我可以让我的M和C层在服务器端运行，并通过那些json消息与浏览器中的V侧通信。不过，这只需要对我的消息分发器进行一些修改即可。在将来，如果浏览器获得某些点对点样式技术，我可以在不同的浏览器中运行不同的层次结构。

然而，目前，所有三个层都在单个浏览器中运行。我编写的事件分发器允许多播消息，因此现在实现撤消功能将非常简单，只需创建一个新对象，它仅监听需要撤消的消息即可。自动保存状态到服务器是类似的操作。我能够在事件分发器内进行完整详细的调试和分析。我能够从中心代码定义代码如何运行、运行速度、何时以及在哪里。

当然，我遇到的主要缺点是我没有很好地管理复杂性。如果我可以重新开始，我会非常仔细地研究“函数响应”范例。JavaScript中有一种现有的实现叫做flapjax。如果视图层不使用flapjax库，我将确保其遵循该执行模型。（我不确定flapjax本身是否是这个想法的一个很好的执行，但这个想法本身很重要。）

函数响应范式的另一个重要实现是石英合成器，它是Apple开发工具的免费附带软件（购买任何Mac都可获得免费）。如果您可以使用它，请仔细查看它以及它的工作方式。（它甚至有一个JavaScript补丁，因此您可以使用预构建的视图层原型设计应用程序。）

函数响应范式的主要收获是确保视图不会维护除刚刚给定的要显示的状态之外的任何状态。更具体地说，我最初使用“将对象添加到屏幕上”、“从屏幕上删除对象”类型的消息，现在更倾向于“显示这个对象列表，我会让你找到从当前显示到我现在想要显示的最有效方法”。这消除了许多与松散管理状态有关的错误。

这也解决了我遇到的另一个由消息以错误顺序到达引起的错误问题。这是一个很大的问题，但您可以通过仅发送一个大包含最终期望状态而不是一系列步骤来绕过它。

总之，这就是我的小抱怨。如果你对我的战时经历有任何其他问题，请告诉我。