2008-08-28 73 views
16

你的javaScript代码是如何组织的?它遵循像MVC这样的模式,还是其他的东西?javaScript客户端代码的替代“架构”方法?

我一直在一个侧面项目工作了一段时间,我越来越多,我的网页变成了一个功能齐全的应用程序。现在,我坚持使用jQuery,但是,页面上的逻辑正在增长,以至于某些组织或者敢说我需要“架构”。我的第一种方法是“MVC-ISH”:

  • 的“模式”是一个JSON树获取与助手
  • 的观点是DOM加上类,调整它
  • 扩展的控制器对象在那里我连接事件处理和启动视图或模型操作

但是,我对其他人如何构建更实质的javaScript应用程序非常感兴趣。我对GWT或其他面向服务器的方法不感兴趣......只是在“javaScript + <通用Web服务-y这里的东西>”

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

回答

6

..但JavaScript有很多方面,面向对象。

考虑一下:

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

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

我用这个技术来创建具有自己的状态页面级的JavaScript类,这有助于保持它包含了(我经常确定我可以重复使用,把地区进入其他课程)。

如果组件/服务器控件具有自己的脚本来执行,但是当您可能在同一页面上有多个实例时,这也特别有用。这使状态分开。

0

不是100%确定这里是什么意思,但是我会说在过去6年做了ASP.NET之后,我的网页现在主要由JavaScript驱动,一旦基本页面呈现由服务器完成。我使用JSON处理所有事情(已经使用了大约3年),并使用MochiKit来满足我的客户端需求。

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

2

MochiKit非常棒 - 我的第一个爱,就是说,就像js库一样。但是我发现尽管MochiKit具有非常明确的语法,但对于我来说,Prototype/Scriptaculous或jQuery对我来说并没有那么舒适。

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

1

非常感谢您的回答。过了一段时间,我想发布我迄今为止学到的东西。

到目前为止,我看到一个非常大的差异使用类似Ext的办法,和其他人一样JQuery UIScriptaculousMochiKit

随着外部,进入HTML只是一个单一的占位符 - UI放在这里。从此,在JavaScript中描述了所有内容。在另一个(也许更强大的)API层下,DOM交互被最小化。

用另一只包,我发现自己做了一下HTML设计开始,然后直接用时髦的效果延长DOM,或只是更换表单输入这里,此外还有。

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

我注意到许多这些库还包括一些有趣的模块化技术。在Ext网站上有一个非常明确的描述,其中包括a fancy way to "protect" your code with modules

我没有完全评估的新玩家是Sproutcore。这看起来像Ext中的方法,其中隐藏了DOM,而且你最想处理项目的API。

1

特里斯坦,你会发现,当您尝试架构JavaScript作为MVC应用程序也容易拿出短在一个区域 - 模型。要处理的最困难的领域是模型,因为数据不会在整个应用程序中持续存在,本质上,模型在客户端似乎会一直发生变化。你可以标准化你从服务器传递和接收数据的方式,但那时模型并不属于JavaScript--它属于你的服务器端应用程序。

我曾经看到过一次尝试,有人创建了一个在JavaScript中对数据建模的框架,就像SQLite属于应用程序的方式一样。它就像Model.select(“Product”)和Model.update(“Product”,“Some data ...”)。这基本上是一种对象符号,它持有一堆数据来管理当前页面的状态。但是,刷新一分钟后,所有数据都将丢失。我可能没有语法,但你明白了。

如果你使用的是jQuery,那么Ben的方法确实是最好的。用你的函数和属性扩展jQuery对象,然后划分你的“控制器”。我通常通过将它们放入单独的源文件中并逐节加载它们来完成此操作。例如,如果它是一个电子商务网站,我可能会有一个JS文件,其中包含处理结帐过程功能的控制器。这倾向于保持轻量级且易于管理。

1

只是一个快速澄清。

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

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

  • 该模型是一个对象图。尽管您使用Java进行代码编写,但在运行时,对象在JavaScript中,不需要客户端或服务器端的任何JVM。GWT还支持JSON,并提供完整的解析和操作支持。您可以轻松连接到JSON Web服务,请参阅2了解JSON混搭示例。
  • 视图由标准的GWT小部件(加上一些我们自己的复合小部件)组成
  • 控制器层通过Observer模式与View整齐分离。

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

3

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

建筑设计非常深思熟虑。有4个东西你都不会做的JavaScript:

  1. 响应事件
  2. 请求数据/操纵服务(阿贾克斯)
  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)); 
} 

在 '视图/待办事项/ list.ejs'

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

JMVC提供比架构多得多。它可以帮助你在开发周期与不断一部分:

  • 代码生成
  • 集成浏览器,硒和犀牛测试
  • 文档
  • 脚本压缩
  • 错误报告