Question

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

我一直在做一个辅助项目已经有一段时间了，而且我得到的越多，我的网页就变成了一个功能齐全的应用程序。现在，我坚持使用jQuery，然而，页面上的逻辑正在增长到一些组织，或者我敢说，“架构”是需要的。我的第一种方法是“MVC-ish”：

'model'是一个使用帮助程序扩展的JSON树
视图是DOM加上调整它的类
控制器是我连接事件处理和启动视图或模型操作的对象

然而，我对其他人如何构建更实质的javaScript应用程序非常感兴趣。我对GWT或其他面向服务器的方法不感兴趣...只是在“javaScript +＆lt; generic web service-y thingy here＆gt;”的方法中

注意：早些时候我说javaScript“不是真正的OO，不是真正的功能”。我认为，这让每个人分心。让我们这样说吧，因为javaScript在很多方面都是独一无二的，而且我来自一个强类型的背景，我不想强制我所知道的范例，而是用非常不同的语言开发。

Answer 1

..但Javascript有很多方面 OO。

考虑一下：

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

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

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

当您拥有要执行自己的脚本的组件/服务器控件时，当您在同一页面上有多个实例时，这也特别有用。这使州保持独立。

Answer 2

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

架构设计经过深思熟虑。您将使用JavaScript做4件事：

回应活动
请求数据/操作服务（Ajax）
将域特定信息添加到ajax响应中。
更新DOM

JMVC将这些分为模型，视图，控制器模式。

首先，也许最重要的优势是控制器。控制器使用事件委派，因此您只需为页面创建规则，而不是附加事件。它们还使用Controller的名称来限制控制器的工作范围。这使得您的代码具有确定性，这意味着如果您在'#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测试
文档
脚本压缩
报告错误

Answer 3

MochiKit很棒 - 就js图书馆来说，这是我的初恋，可以这么说。但我发现虽然MochiKit具有非常富有表现力的语法，但对于我来说，它并不像Prototype / Scriptaculous或jQuery那样让我感觉舒适。

我想如果你知道或喜欢python，那么MochiKit对你来说是一个很好的工具。

Answer 4

非常感谢你的回答。过了一段时间，我想发布到目前为止我学到的东西。

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

使用Ext，HTML只是一个占位符 - UI就在这里。从那时起，所有在JavaScript中进行了描述。在另一个（可能更强大的）API层下，DOM交互最小化。

使用其他工具包，我发现自己从做一些HTML设计开始，然后直接使用时髦效果扩展DOM，或者只是替换这里的表单输入，添加它。

主要的差异开始发生，因为我需要处理事件处理等。由于模块需要彼此“交谈”，我发现自己需要离开DOM，将其抽象化。

我注意到许多这些库也包括一些有趣的模块化技术。 Ext网站提供了非常清晰的描述，其中包括a fancy way to "protect" your code with modules。

我尚未完全评估的新玩家是Sproutcore。它似乎是Ext in方法，其中隐藏了DOM，并且您通常希望处理项目的API。

Answer 5

Tristan，你会发现当你尝试将JavaScript作为一个MVC应用程序进行体系结构时，它往往会在一个领域 - 模型中出现。最难处理的领域是模型，因为数据不会在整个应用程序中持续存在，并且本质上模型似乎在客户端变得非常一致。您可以标准化从服务器传递和接收数据的方式，但此时模型并不真正属于JavaScript - 它属于您的服务器端应用程序。

我确实看到过一次尝试，有人创建了一个用于在JavaScript中建模数据的框架，就像SQLite属于应用程序的方式一样。它就像Model.select（“Product”）和Model.update（“Product”，“Some data ...”）。它基本上是一个对象表示法，它包含大量数据来管理当前页面的状态。但是，刷新的那一刻，所有数据都将丢失。我可能不在语法上，但你明白了。

如果您使用的是jQuery，那么Ben的方法确实是最好的。使用您的函数和属性扩展jQuery对象，然后划分您的“控制器”。我通常将它们放入单独的源文件中，并逐段加载它们。例如，如果它是一个电子商务网站，我可能有一个JS文件，其中包含处理结帐流程功能的控制器。这往往会使事情变得轻巧且易于管理。

Answer 6

快速澄清一下。

编写非面向服务器的GWT应用程序是完全可行的。我假设从面向服务器的意味着你需要基于Java的后端的GWT RPC。

我已经在客户端编写了非常“MVC-ish”的GWT应用程序。

该模型是一个对象图。虽然您使用Java编写代码，但在运行时，对象都是javascript，客户端或服务器端不需要任何JVM。 GWT还支持JSON，具有完整的解析和操作支持。您可以轻松连接到JSON Web服务，请参阅2以获取JSON mashup示例。
View由标准GWT小部件（加上我们自己的一些复合小部件）组成。
控制器层与View via Observer模式整齐地分开。

如果您的“强类型”背景是使用Java或类似语言，我认为您应该认真考虑大型项目的GWT。对于小项目，我通常更喜欢jQuery。与GWT 1.5一起使用的即将到来的GWTQuery可能会改变这一点，但由于jQuery插件丰富，不会在不久的将来发生。

Answer 7

不是100％肯定你在这里的意思，但我会说在过去6年做完ASP.NET后，我的网页现在主要由JavaScript驱动，一旦基本页面呈现由服务器完成。我将JSON用于所有内容（现在已经使用了大约3年）并使用MochiKit来满足我的客户端需求。

顺便说一句，JavaScript 是 OO，但由于它使用原型继承，人们不会以这种方式给予信任。我也认为它也有功能，这一切都取决于你如何写它。如果您真的对函数式编程风格感兴趣，请查看MochiKit - 您可能会喜欢它;它倾向于JavaScript的函数式编程方面。

javaScript客户端代码的替代“架构”方法？

7 个答案: