19

您的 JavaScript 代码是如何组织的？它是否遵循 MVC 之类的模式或其他模式？

一段时间以来，我一直在从事一个辅助项目，并且越深入，我的网页就越变成功能齐全的应用程序。现在，我坚持使用jQuery，但是，页面上的逻辑正在增长到某种组织，或者我敢说，“架构”是需要的。我的第一种方法是“MVC-ish”：

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

然而，我对其他人如何构建更丰富的 JavaScript 应用程序非常感兴趣。我对 GWT 或其他面向服务器的方法不感兴趣……只是对“javaScript + <generic web service-y thingy here>”的方法感兴趣

注意：之前我说过 javaScript“不是真正的 OO，不是真正的功能”。我想，这让每个人都分心了。这么说吧，因为 javaScript 在很多方面都是独一无二的，而且我来自强类型背景，我不想强​​制使用我知道的范式，但它们是用非常不同的语言开发的。

4

7 回答 7

7

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

考虑一下：

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

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

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

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

于 2008-08-28T15:29:51.863 回答
4

JavaScriptMVC 是组织和开发大型 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 测试
  • 文档
  • 脚本压缩
  • 错误报告
于 2009-08-22T20:37:05.160 回答
3

MochiKit 很棒——而且是我的初恋，可以这么说，就 js 库而言。但是我发现虽然 MochiKit 具有非常富有表现力的语法，但它对我来说并没有 Prototype/Scriptaculous 或 jQuery 对我的感觉那么舒服。

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

于 2008-08-29T19:58:55.987 回答
2

谢谢大家的回答。过了一段时间，我想发布我到目前为止所学到的东西。

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

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

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

主要差异开始发生，因为我需要处理事件处理等。由于模块需要相互“对话”，我发现自己需要远离 DOM，将其抽象为碎片。

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

我完全评估过的一个新玩家是Sproutcore。看起来像是 Ext in approach，其中 DOM 是隐藏的，您最想处理项目的 API。

于 2008-09-15T13:17:22.547 回答
2

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

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

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

于 2008-09-15T13:41:24.673 回答
2

只是一个快速的澄清。

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

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

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

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

于 2008-10-10T07:12:48.870 回答
1

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

顺便说一句，JavaScript是面向对象的，但由于它使用原型继承，人们不会以这种方式相信它。我还认为它也是功能性的，这完全取决于你如何编写它。如果您真的对函数式编程风格感兴趣，请查看MochiKit - 您可能会喜欢它；它在很大程度上倾向于 JavaScript 的函数式编程方面。

于 2008-08-28T15:31:35.727 回答