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

StackOverflow https://stackoverflow.com/questions/32540

题

你的 JavaScript 代码是如何组织的？它遵循 MVC 等模式还是其他模式？

我从事一个业余项目已经有一段时间了，随着我的深入，我的网页越来越变成一个功能齐全的应用程序。现在，我坚持 jQuery, 然而，页面上的逻辑正在发展到需要某种组织，或者我敢说，“架构”的程度。我的第一个方法是“MVC-ish”：

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

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

笔记：之前我说过 javaScript“并不是真正的面向对象，也不是真正的函数式”。我认为这分散了每个人的注意力。让我们这样说吧，因为 javaScript 在很多方面都是独一无二的，而且我来自强类型背景，所以我不想强制使用我所知道的范例，但这些范例是用非常不同的语言开发的。

有帮助吗？

解决方案

..但是 Javascript 有很多方面 是 哦。

考虑一下：

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

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

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

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

其他提示

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({之后:新的日期（）}，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 测试
  • 文档
  • 脚本压缩
  • 错误报告

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

我认为如果你了解或喜欢 python，那么 MochiKit 对你来说是一个很好的工具。

非常感谢大家的回答。一段时间后，我想发布我迄今为止学到的东西。

到目前为止，我看到使用类似方法的方法有很大的不同 分机, ，还有其他人喜欢 jQuery 用户界面, 脚本性的, 麻糬套件, ， ETC。

对于 Ext，HTML 只是一个占位符 - UI 位于此处。从那时起， 一切 用 JavaScript 描述。DOM 交互在另一个（可能更强）API 层下被最小化。

对于其他套件，我发现自己首先进行一些 HTML 设计，然后使用时髦的效果直接扩展 DOM，或者只是在这里替换表单输入，在那里添加一个内容。

当我需要处理事件处理等时，主要差异开始发生。由于模块需要相互“交谈”，我发现自己需要脱离 DOM，将其抽象化。

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

我还没有完全评估过的一位新球员是 芽核. 。看起来就像 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。

我编写的 GWT 应用程序仅在客户端就非常“MVC 风格”。

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

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

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

顺便说一句，JavaScript 是 OO，但由于它使用原型继承，人们不会以这种方式给予它信任。我还认为它也是实用的，这完全取决于你如何编写它。如果您真的对函数式编程风格感兴趣，请查看 麻糬套件 - 你可能会喜欢它；它相当倾向于 JavaScript 的函数式编程。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top