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

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

从阅读各种博客并保持更新,我已经阅读了类似于Backbone.js和JavascriptMVC的库,这两者听起来都是很好的选择,以使代码更加模块化和分离。

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

所以考虑到这一点 – 在开始一个Javascript和jQuery代表用户体验和数据呈现给用户的项目时,常识是什么?

非常感谢

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

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

  • 依赖管理:如何以正确的顺序编译和加载javascript文件? 我的建议是RequireJS 。
  • 测试:测试UI代码从来都不容易,但是jQuery的人已经做了一段时间了,他们的测试工具QUnit已经有很好的文档/测试。
  • 缩小:在部署到生产之前,您需要缩小代码需求。内置了RequireJS,但如果您想获得疯狂的小型源代码,也可以使用Closure Compiler 。
  • 构建系统:所有这些工具都很棒,但您应该在一个主构建系统中将它们全部集合在一起,这样您就可以在命令行上运行一个简单的命令,并让您调试或生成应用程序。 使用的具体工具取决于您选择的语言 – Ruby => Rake ,Python – >编写您自己的, NodeJS作为构建工具(我最喜欢这个选项) – > Jake

除此之外,请注意一些东西是否笨拙或缓慢(无论是工具还是框架)和重构。

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

我想建议在function样式中使用javascript,这可以通过coffeescript和underscore.js这样的抽象来帮助。

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

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

我个人也喜欢拥有一个中央文件管理器,而不是在每个页面上都有一个复杂的require / include结构。 基于逐页特征检测从中央加载器加载javascript模块。 (有关中央文件管理器的示例 ,请参见此处)。

我还想提倡通过node.js重新使用的可能性越来越大。 有很多人致力于将浏览器代码逐字移植到node.js或将node.js代码逐字复制到浏览器。 (参见在nodejs上运行的YUI3 , 在浏览器中 运行 node.js,在浏览器中使用commonJS。不可否认,其中大多数都是WIP而且不稳定。)

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

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