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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (24)

你的javaScript代码是如何组织的?它是否遵循像MVC或其他类似的模式?

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

  • '模型'是一个JSON树,可以通过助手来扩展
  • 该视图是DOM +类来调整它
  • 控制器是连接事件处理和启动视图或模型操作的对象

然而,我对其他人如何构建更多实用的javaScript应用程序感兴趣。我对GWT或其他面向服务器的方法不感兴趣......只是在“javaScript + <通用Web服务-y这里的事情>”的方法中

注:早些时候我说过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类,这有助于保持它的包含(并且我经常识别可以重用并放入其他类的区域)。

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

用户回答回答于

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

这个架构设计非常深思熟虑。有4件事你会用JavaScript做:

  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测试
  • 文档
  • 脚本压缩
  • 错误报告

扫码关注云+社区