Javascript体系结构/应用程序结构最佳实践?

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

• 我有一个页面控制器
• DOM是我的视图
• 服务器是我的型号

通常,我会创建一个单例页面控制器类(需要关闭支持类),用于控制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);
});

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

对于复杂的Javascript开发,根据我的经验,构建代码库至关重要。从历史上看,作为一种修补语言,Javascript的开发有一个很大的趋势,即最终会产生大量的脚本文件。

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

一旦您能够创建层次模块,就需要在相关的子模块中创建UI组件。这些UI组件最好也是自包含的。意思是每个都有自己的模板、css、本地化等,如下所示:

我用示例代码创建了一个JS参考体系结构,以分享我在几个大型JS项目中获得的经验。我是样板JS的作者。如果您想要一个内置了几个关键问题的参考代码库,请将其用作启动代码库。

http://boilerplatejs.org

如果我们谈论的是javascript应用程序架构,那么Nicholas Zakas 2011播客是必看的: Nicholas Zakas: Scalable JavaScript Application Architecture

还有Addy Osmani的在线参考资料: Patterns For Large-Scale JavaScript Application Architecture

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

更普遍地说,这里有一篇关于 JavaScript best practices 来自Opera开发博客。