Javascript架构/应用程序结构最佳实践？

Question

这些存在吗？

多年来,我一直是大型强类型OO语言(Java和C#)的奴隶,并且是Martin Fowler及其同类的奉献者.Javascript,由于它的松散类型和功能性似乎不适合我习惯的习语.

组织javascript富客户端的最佳做法是什么？我感兴趣的是从哪里保存你的代码(一个文件或多个文件)到MVC模式到四个模式到分层.

没有把东西放在全局命名空间似乎是唯一的共识.

我使用JQuery作为"扩展API".

Answer 1

我喜欢使用一种MVC客户端架构.

• 我有一个页面CONTROLLER
• DOM是我的视图
• 服务器是我的MODEL

通常我会创建一个单例页面控制器类(需要关闭支持类)来控制ajax调用和视图绑定.

var pageXController = {
  init: function(param) {
    pageXController.wireEvents();
    // something else can go here
  },

  wireEvents : function() {
    // Wire up page events
  }

  // Reactive methods from page events
  // Callbacks, etc
  methodX : function() {}
}

$(document).ready( function() {
  // gather params from querystring, server injection, etc
  pageXController.init(someparams);
});

我还应该补充一点,在这种情况下,你的模型是你的DTO(数据传输对象),它们针对他们解决的问题进行了优化.这不是您的域模型.

Answer 2

对于复杂的Javascript开发,构建代码库对我的经验至关重要.从历史上看,作为一种补丁语言,Javascript开发最终会出现大量脚本文件.

我建议逻辑上将应用程序的功能区域分开,以清除松散耦合和自包含的模块.例如,如下所示,您的产品套件可能有多个产品模块,每个模块都有多个子模块:

一旦您能够创建分层模块,它就是在相关子模块中创建UI组件的一个主要部分.这些UI组件也应该优选地是自包含的.每个都有自己的模板,css,本地化等,如下所示:

我创建了一个带有示例代码的JS参考架构,以分享我在几个大型JS项目中获得的expier.我是boilerplateJS的作者.如果你想要一个内置几个关键问题的参考代码库,那么使用它作为你的启动代码库会觉得费用.

http://boilerplatejs.org

Answer 3

您可能想要研究的一件事是Backbone.js,它为您提供了一个很好的框架,用于构建Model类来表示应用程序中的数据并将它们绑定到HTML UI.这是将数据绑定到DOM的首选.

更一般地说,这是一篇关于Opera开发博客的JavaScript最佳实践的精彩文章.

Answer 4

如果我们谈论javascript应用程序架构,那么Nicholas Zakas 2011播客是必须看到的: Nicholas Zakas:可扩展的JavaScript应用程序架构

Addy Osmani的在线参考: 大规模JavaScript应用程序架构的模式