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

Question

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

javascriptjqueryarchitecturedesign-patterns

28

这些存在吗？

多年来，我一直是大型强类型面向对象语言（Java和C#）的奴隶，并且是Martin Fowler及其同类的爱好者。由于JavaScript松散类型和函数式的特性，似乎不适合我所熟悉的惯用法。

组织JavaScript富客户端的最佳实践是什么？我对从代码存放的位置（一个文件或多个文件）到MVC模式、四人帮模式和分层的所有内容都感兴趣。

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

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

- Guido Anselmi

2

好的态度。现在你将成为大型动态类型半面向对象/函数式语言的奴隶。听起来更好，不是吗？ - Yuriy Zubarev

2

欢迎来到丛林。Douglas Crawford 是思考 JavaScript 的好起点：http://javascript.crockford.com/ - Jared Farrish

值得一看的是 Dojo 代码库的架构...它是我见过的高度架构化的客户端对象导向 JavaScript 中实现最好的之一。 - prodigitalson

同样是道场创始人的一部分，TIBCO General Interface：http://developer.tibco.com/gi/default.jsp - Jared Farrish

1

你实际上可以继续使用强类型语言并使用以下任何一种技术来构建漂亮的Web UI：Silverlight、JavaFX、ActiveX和当然，老旧的Java Applets。 - Paul Sasik

@PaulSasik 今天你可以使用Typescript来编写强类型的Javascript代码 - 尽管出于与不推荐使用Coffeescript相同的原因，我也不会建议这样做。 - pilau

4个回答

6

对于复杂的Javascript开发，按照我的经验，构建代码库的结构非常关键。历史上，Javascript是一种补丁语言，因此很容易导致Javascript开发最终生成大量的脚本文件。

我建议将应用程序的功能区域逻辑上分离为清晰的模块，这些模块之间松散耦合并且自包含。例如，如下所示，您的产品套件可能具有多个产品模块，每个模块具有多个子模块：

一旦您有了创建分层模块的能力，就可以在相关子模块中创建UI组件。这些UI组件也最好是自包含的，即每个组件都有自己的模板、CSS、本地化等，如下所示：

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

http://boilerplatejs.org

- Hasith

5

如果我们在谈论JavaScript应用程序的架构，那么Nicholas Zakas 2011年的播客是必看的： Nicholas Zakas: 可扩展的JavaScript应用程序架构此外，Addy Osmani的在线参考资料也很重要：大规模JavaScript应用程序架构的模式

- Galileo_Galilei

5

你可能想看一下Backbone.js，它为你构建模型类提供了一个良好的框架，用于表示应用程序中的数据并将其绑定到HTML UI。这比将数据与DOM绑定更可取。

更普遍地说，这里有一篇很棒的文章来自Opera开发博客，讲解JavaScript最佳实践。

- Rob Sobers

2

我会避免使用额外的库来解决可以用模式解决的问题。这样会增加额外的负担和请求，而只是为了完成简单的清理任务。 - Slappy

由于某种原因，当我点击JavaScript最佳实践时，它无法加载，但如果我直接将URL粘贴到地址栏中，它会链接https://dev.opera.com/articles/javascript-best-practices/。 - Luigi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Slappy · Accepted Answer

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

我有一个页面控制器（CONTROLLER）
DOM是我的视图（VIEW）
服务器是我的模型（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);
});

我也应该在这里补充说明，你的MODEL在这种情况下是你的DTO（数据传输对象），它们被优化用于解决特定问题。这不是你的领域模型。