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

Question

这些存在吗？

多年来，我一直是大型强类型面向对象语言（Java 和 C#）的奴隶，并且是 Martin Fowler 及其同类的信徒。 Javascript，由于它的松散类型和函数性质，似乎不适合我习惯的习惯用法。

组织 javascript 富客户端的最佳实践是什么？我对一切都感兴趣，从保存代码的位置（一个文件或多个文件）到 MVC 模式，再到四种模式再到分层。

不将东西放入全局命名空间似乎是唯一的共识。

我使用 JQuery 作为“扩展 API”。

Answer 1

我喜欢使用某种 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);
});

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

Answer 2

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

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

一次你有能力创建分层模块，这是在相关子模块中创建 UI 组件的问题。这些 UI 组件最好也是独立的。这意味着每个都有自己的模板、CSS、本地化等，如下所示：

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

http://boilerplatejs.org

Answer 3

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

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

Answer 4

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

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