在更大的项目上处理javascript的方法？

Question

几年前发现jQuery之后，我意识到在不编写代码书的情况下真正制作交互式和用户友好型网站是多么容易。随着项目规模的扩大，执行任何调试或实施更改或新功能所需的时间也会增加。

通过阅读各种博客并保持一定程度的更新，我已经阅读了类似于Backbone.js和JavascriptMVC的库，它们听起来都是很好的选择，以使代码更加模块化和分离。

然而，由于远离Javascript或jQuery专家，我并不是很适合在项目中说明什么是一个好的基石，在这个项目中，可维护性，调试和开发的未来易于优先。

考虑到这一点 - 在开始一个Javascript和jQuery代表用户的大部分用户体验和数据呈现的项目时，常识是什么？

非常感谢

Answer 1

Backbone.js和JavascriptMVC都是使用框架以合理的方式组织大型项目的很好的例子（SproutCore和Cappuccino也很好）。我绝对建议您选择一种处理来自服务器的数据，处理来自DOM的事件和来自服务器的响应以及视图创建的标准方法。否则它可能是维护的噩梦。

除了MVC框架之外，您应该为这些问题选择一个解决方案：

• 依赖管理：如何以正确的顺序编译和加载javascript文件？我的建议是RequireJS。
• 测试：测试用户界面代码绝非易事，但是jQuery上的人已经做了一段时间了，他们的测试工具QUnit已经过充分记录/测试。
• 缩小：在部署到生产环境之前，您需要缩小代码的数量.ProseJS内置了此代码，但如果您想获得疯狂的小型源代码，也可以使用Closure Compiler。
• 构建系统：所有这些工具都很棒，但您应该在一个主构建系统中将它们全部集合在一起，这样您就可以在命令行上运行一个简单的命令，并让您调试或生成应用程序。使用的具体工具取决于您选择的语言 - Ruby =＆gt; Rake，Python - ＆gt;编写自己的 NodeJS 作为构建工具（我最喜欢这个选项） - ＆gt; Jake

除此之外，请注意一些事情是否变得笨拙或缓慢（无论是工具还是框架）和重构。

Answer 2

查看本书，主要是第10章http://jqfundamentals.com/book/index.html#chapter-10

Answer 3

我建议使用功能样式的javascript，这可以通过coffeescript和underscore.js这样的抽象来帮助。

同时最大限度地减少交叉模块交互并依赖事件驱动代码是保持整个项目井井有条的好方法。我非常喜欢backbone.js通过让视图绑定模块上的更改事件来处理模块视图弱耦合的方式。

基于功能事件的代码非常适合宏结构。我也建议将javascript与DOM结合起来。 （同样backbone.js有一个很好的例子，说明模型是如何完全独立的，甚至视图也不依赖于dom。对于所有你关心的视图都可以从WebSocket上下载数据。

我个人也喜欢拥有一个中央文件管理器，而不是在每个页面上都有一个复杂的require / include结构。基于逐页特征检测从中央加载器加载javascript模块。 （请参阅此处查看中央文件管理器的example）。

我还想提倡通过node.js增加良好再利用的可能性。有很多人致力于将浏览器代码逐字移植到node.js或将node.js代码逐字复制到浏览器。 （请参阅YUI3 running on nodejs，node.js in the browser，commonJS in the browser不可否认，其中大部分都是在制品，而且不稳定。）

Answer 4

我的建议是将尽可能多的javascript隔离到视图之外的外部js文件中，然后在标题中引用它们。这不仅允许javascript在页面之间重复使用，而且它在一个公平的层面上分离您的关注点，分散您的代码以便于调试（无论如何我更容易理解）。此外，这使得您的js更安全，因为它不会直接呈现在浏览器页面上。当然，这种安全性可以忽略不计，因为像firebug或IE的开发人员工具这样的工具可以访问分层的javascript文件。

其次，我建议使用像compress.msbuild这样的工具（在最终编译时进行部署）将所有自定义编写的javascript压缩到whatevertheirnameis-min.js。将所有内容压缩到一行实际上不仅可以减少代码的负载和运行时间，还可以将其混淆为更安全。拆分-min文件要困难得多，更不用说当所有代码都是单行时找到任何特定的函数。