Javascript 架构/应用程序结构最佳实践？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5400132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Architecture/Application Structure Best Practices?
提问by Guido Anselmi
Do these exist?
这些存在吗？
I've been a slave to big strongly typed OO languages (Java & C#) for many years and am a devotee of Martin Fowler and his ilk. Javascript, due to it's loosely typed and functional nature seems to not lend itself to the idioms I am used to.
多年来，我一直是大型强类型 OO 语言（Java 和 C#）的奴隶，并且是 Martin Fowler 及其同类的忠实拥护者。Javascript，由于它的松散类型和功能性质似乎不适合我习惯的习语。
What are the best practices for organizing a javascript rich client? I am interested in everything from where to keep your code, (one file or multiple files) to MVC patterns to gang of four patterns to layering.
组织 javascript 富客户端的最佳实践是什么？我对从哪里保存代码（一个文件或多个文件）到 MVC 模式到四个模式组合到分层的所有内容都感兴趣。
Not putting stuff in the Global namespace seems to be the only consensus.
不将东西放入 Global 命名空间似乎是唯一的共识。
I am using JQuery as the "Extended API."
我使用 JQuery 作为“扩展 API”。
采纳答案by Slappy
I like to use a sort of MVC client side architecture.
我喜欢使用一种 MVC 客户端架构。
- I have a page CONTROLLER
- The DOM is my VIEW
- The server is my MODEL
- 我有一个页面控制器
- DOM 是我的观点
- 服务器是我的模型
Typically I create a singleton page controller class (with supporting classes off that is needed) that controls the ajax calls and view binding.
通常我会创建一个单例页面控制器类（需要关闭支持类）来控制 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);
});
I should also add here that your MODEL in this case is your DTO's (Data Transfer Objects) which are optimised to the problem they solve. This is NOT your domain model.
我还应该在这里补充一点，在这种情况下，您的模型是您的 DTO（数据传输对象），它们针对它们解决的问题进行了优化。这不是您的域模型。
回答by Hasith
For complex Javascript development, structuring your codebase it critical in my experience. Historically being a patching language, there is a great tendency that Javascript development ending up with massive script files.
对于复杂的 Javascript 开发，根据我的经验构建代码库至关重要。从历史上看，作为一种修补语言，Javascript 开发最终会产生大量脚本文件的趋势很大。
I'd recommend to logically separate the functional areas of the application in to clear modules that are loosely coupled and self contained. For example as shown below your product suite might have multiple product modules and each module with multiple sub modules:
我建议在逻辑上将应用程序的功能区域分开，以清除松散耦合和自包含的模块。例如，如下所示，您的产品套件可能有多个产品模块，每个模块都有多个子模块：
Once you have the ability to create hierachical modules, it is a mater of creating UI components in relavant sub-module. These UI components should also preferably be self contained. Meaning each with own template, css, localization, etc. like shown below:
一旦您能够创建分层模块，就可以在相关子模块中创建 UI 组件。这些 UI 组件也最好是自包含的。意思是每个都有自己的模板、css、本地化等，如下所示：
I created a JS reference architecture with sample code to share my expierince I gained in couple of large scale JS projects. I'm the author of boilerplateJS. If you want a reference codebase where several of the critical concerns built-in, feel fee to use it as your startup codebase.
我创建了一个带有示例代码的 JS 参考架构，以分享我在几个大型 JS 项目中获得的经验。我是boilerplateJS的作者。如果您想要一个参考代码库，其中内置了几个关键问题，请将其用作您的启动代码库。
回答by Galileo_Galilei
If we are talking about javascript apps architecture then Nicholas Zakas 2011 podcast is a must see: Nicholas Zakas: Scalable JavaScript Application Architecture
如果我们谈论 javascript 应用程序架构，那么 Nicholas Zakas 2011 播客是必看的： Nicholas Zakas：可扩展的 JavaScript 应用程序架构
Also Addy Osmani's online reference: Patterns For Large-Scale JavaScript Application Architecture
还有 Addy Osmani 的在线参考： Patterns For Large-Scale JavaScript Application Architecture
回答by Rob Sobers
One thing you might want to look into is Backbone.jswhich gives you a nice framework for building Model classes to represent that data in your application and bind them to your HTML UI. This is preferred to tying your data to the DOM.
您可能想要研究的一件事是Backbone.js，它为您提供了一个很好的框架，用于构建模型类以在您的应用程序中表示该数据并将它们绑定到您的 HTML UI。这比将数据绑定到 DOM 更可取。
More generally, here is a great article on JavaScript best practicesfrom the Opera development blog.
更一般地说，这里有一篇来自 Opera 开发博客的关于JavaScript 最佳实践的精彩文章。
