javaScript代码是如何组织的？它是否遵循MVC等模式？

我已经在一个副项目上工作了一段时间，而我得到的越多，我的网页就已经变成了功能齐全的应用程序。现在，我坚持使用jQuery，但是，页面上的逻辑正在发展到某种组织，或者甚至我敢说它需要"体系结构"的地步。我的第一种方法是" MVC-ish"：

• "模型"是一个JSON树，该树通过助手进行了扩展
• 该视图是DOM以及对其进行调整的类
• 控制器是我连接事件处理并启动视图或者模型操作的对象

但是，我对其他人如何构建更强大的javaScript应用程序非常感兴趣。我对GWT或者其他面向服务器的方法不感兴趣，只是对" javaScript + <通用Web服务，这里很重要>"的方法不感兴趣。

注意：前面我说过javaScript"不是真正的OO，不是真正的功能"。我认为，这分散了所有人的注意力。让我们这样说，因为javaScript在许多方面都是唯一的，而且我来自强类型的背景，所以我不想强加我所知道的范例，但是它们是用非常不同的语言开发的。

解决方案

回答

..但是Javascript有很多面向对象的方面。

考虑一下：

var Vehicle = jQuery.Class.create({ 
   init: function(name) { this.name = name; } 
});

var Car = Vehicle.extend({ 
   fillGas: function(){ 
      this.gas = 100; 
   } 
});

我已经使用这种技术来创建具有自己状态的页面级javascript类，这有助于使其保持状态(并且我经常标识可以重用并放入其他类的区域)。

当我们具有要执行自己的脚本的组件/服务器控件时，但是当我们在同一页面上可能有多个实例时，此功能也特别有用。这使状态保持独立。

回答

不能100％地确定意思，但是我会说，在过去6年中使用ASP.NET之后，一旦服务器完成了基本页面渲染，我的网页现在主要就由JavaScript驱动。我对所有内容都使用JSON(至今已有3年之久了)，并根据自己的客户端需求使用MochiKit。

顺便说一句，JavaScript是面向对象的，但是由于它使用原型继承，所以人们不会以这种方式赞扬它。我还要指出，它也具有功能，这完全取决于编写方式。如果我们真的对函数式编程风格感兴趣，请查看MochiKit，我们可能会喜欢的。它在JavaScript的函数式编程方面相当有优势。

回答

MochiKit非常棒-就js库而言，这是我的初恋。但是我发现，尽管MochiKit具有非常有表现力的语法，但对我来说，它并不像Prototype / Scriptaculous或者jQuery对我那样舒服。

我认为，如果我们知道或者喜欢python，那么MochiKit是理想工具。

回答

谢谢大家的回答。一段时间后，我想发布到目前为止所学的知识。

到目前为止，我发现使用Ext之类的方法与JQuery UI，Scriptaculous，MochiKit等之类的方法存在很大差异。

使用Ext，HTML只是一个占位符UI。从那时起，所有内容都在JavaScript中进行了描述。在另一个(也许更强大)API层下，可以最大程度地减少DOM交互。

使用其他工具包，我发现自己首先要做一些HTML设计，然后直接使用令人眼花effects乱的效果扩展DOM，或者仅替换此处的表单输入，然后添加其他内容。

我需要处理事件处理等时，主要的区别开始发生。由于模块需要彼此"交谈"，因此我发现自己需要远离DOM，将其抽象化。

我注意到，这些库中的许多库还包括一些有趣的模块化技术。 Ext网站上有一个非常清晰的描述，其中包括一种用模块"保护"代码的好方法。

我尚未完全评估过的新玩家是Sproutcore。似乎在Ext中，隐藏了DOM，而我们主要想处理项目的API。

回答

特里斯坦(Tristan)，我们会发现，当我们尝试将JavaScript架构为MVC应用程序时，往往会在一个方面(模型)出现不足。最难处理的领域是模型，因为数据不会在整个应用程序中持久存在，并且从本质上讲，模型在客户端似乎总是保持一致的更改。我们可以标准化从服务器传递和接收数据的方式，但是到那时，该模型实际上并不属于JavaScript，它属于服务器端应用程序。

我确实有一段时间尝试过，有人创建了一个框架来用JavaScript建模数据，就像SQLite属于应用程序的方式一样。就像Model.select(" Product")和Model.update(" Product"，" Some data ...")一样。基本上，这是一种对象表示法，其中包含大量数据来管理当前页面的状态。但是，刷新的那一刻，所有数据都会丢失。我可能不了解语法，但是我们明白了。

如果我们使用的是jQuery，那么Ben的方法确实是最好的。用函数和属性扩展jQuery对象，然后分隔"控制器"。我通常通过将它们放入单独的源文件中并逐节加载它们来完成此操作。例如，如果它是一个电子商务站点，那么我可能有一个JS文件，里面装有处理结帐流程功能的控制器的所有文件。这往往使事情轻巧且易于管理。

回答

请快速澄清。

编写不面向服务器的GWT应用程序是完全可行的。我假设从面向服务器的角度讲，意思是需要基于Java的后端的GWT RPC。

我已经编写了仅在客户端非常" MVC式"的GWT应用程序。

• 该模型是一个对象图。尽管我们使用Java编写代码，但是在运行时，对象是使用javascript编写的，不需要客户端或者服务器端的任何JVM。 GWT还通过完整的解析和操作支持来支持JSON。我们可以轻松连接到JSON Web服务，有关JSON混搭示例，请参见2.
• View由标准的GWT小部件(以及我们自己的一些复合小部件)组成
• 控制器层通过观察者模式与View完全分开。

如果"强类型"背景是Java或者类似语言，那么我认为我们应该认真考虑将GWT用于大型项目。对于小型项目，我通常更喜欢jQuery。即将与GWT 1.5配合使用的GWTQuery可能会改变这种状况，尽管由于jQuery插件很多，这种情况在不久的将来不会改变。

回答

JavaScriptMVC是组织和开发大型JS应用程序的绝佳选择。

该架构设计经过深思熟虑。我们将使用JavaScript进行四件事：

• 响应事件
• 请求数据/操作服务(Ajax)
• 将特定于域的信息添加到ajax响应中。
• 更新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));
}

在"视图/待办事项/list.ejs"中

<% for(var i =0; i < this.length; i++){ %>
   <label><%= this[i].description %></label>
<%}%>

JMVC提供的不仅仅是架构。它可以在开发周期的任何阶段为我们提供帮助：

• 代码生成器
• 集成的浏览器，硒和Rhino测试
• 文献资料
• 脚本压缩
• 错误报告