原本链接:http://addyosmani.com/blog/large-scale-jquery/

题外话:本文是我们组妹纸mousachen翻译的,这里只是转载下。

今天,我们来看一看,你可以用来构建大型企业JQ应用的端对端工具和选择。虽然jQuery是一个很出色的JS库,为开发提供了一系列设计得很好的工具,但它专注于简洁和简化DOM的操作,这意味着它不能为构建大型应用提供重要的基本结构。

jQuery为DOM操作实现跨浏览器和跨平台的兼容。除了利用JQuery的优势,你可以加上其他的工具一起组合使用,形成适用于你的大型应用的开发工具。

有的开发者认为在过去关于构建RIA(富互联网应用),Dojo、MooTools或者YUI比起只是简单地使用 jQuery,更适合用于大型JS应用,然而,我相信你使用这个方案,也不会需要花太多的成本。

在这篇文章,我们会从依赖管理、jQuery的MVC、模板、测试和压缩等等方面来探讨你可以怎样为大型 jQuery应用搭配工具。

1、依赖管理

在写大型 jQuery应用的时候,你可能会希望能脚本能按特定的顺序或者按需加载,因为有的脚本之间存在依赖关系(举一个简单的例子,如果app.js是依赖于function.js,那么你会希望先加载function.js,再加载app.js)。脚本加载器可以实现这一点。虽然利用层次结构的脚本标签这种传统技术一样有效,但你会发现现在的脚本加载器,还拥有一些你可能用到新特性。例如根据浏览器支持特性的不同或者上文所述按需,动态加载不同的脚本。

现在最受欢迎的两个脚本加载器就是RequireJS(作者James Burke)和LabJS(作者Kyle Simpson)。在一段相当长的时间,一直有人曾经认为他们之间必定有一个会明显超越对方。但事实证明,他们各有所长。RequireJS的优点之一就是支持模块化开发。而当你不需要那些额外的特性,而希望这个加载器更轻量,那么LabJS就是最好的选择。

关于是否在你的项目中使用RequireJS或者LabJS的话题,更详细的介绍,请猛点这里。如果这两个脚本加载器并不能完全满足你的要求,为了节省你的时间,我也有其他的介绍:

RequireJS:如果你想让你的代码更模块化,我会推荐它。模块可以限制他们对全局的影响和减少耦合。RequireJS还提供了整合缩小脚本的优化工具,让脚本加载更快。http://requirejs.org/docs/jquery.html

LabJS:当你需要脚本能按需加载的同时,又能比RequireJS更轻量的脚本加载器,而且不想要模块化,那么LabJS就是最好的选择。http://www.labjs.com (请同时关注 YepNope JS, 一个具有条件判断功能的出色加载器,LabJS的加强版,作者Alex Sexton – http://www.yepnopejs.com).

StealJS:又一个出色的依赖管理工具。Steal是JavaScriptMVC的一部分,但你可以独立使用。它还可以合并压缩美化代码。http://jupiterjs.com/news/stealjs-script-manager

JSL Script Loader:支持延迟加载,有序加载,阻止重复资源和缓存。可能没有像LabJS和RequireJS那样被广泛地测试。http://www.andresvidal.com/jsl

Bootstrap:能够满足你的需求,却没有其他加载器那么多其他的功能。如果你想要一个不附带其他功能的最轻量的加载器,那么它就是最好的选择。 https://bitbucket.org/scott_koon/bootstrap

2、适用于大型jQuery应用的MVC和组织

在软件工程里,设计模式和架构模式允许你基于现有的尝试和测试模式来创造出可复用、结构化和更有组织的代码。在你的应用中使用设计模式,我认为是必要的,特别是一个团队而不是一个人在编写应用时,需要令代码风格和结构一致。

在现在web应用开发中,MVC模式(模型-视图-操作)就可以满足这个要求。如果你觉得MVC不太适合你,还有其他几种也相当流行的模式可供选择。

下面,我会介绍一些对jQuery和JS的MVC模式解答,然而如果你想知道更多关于JS设计模式的内容来帮助你知道哪一种MVC例子最适合你,可以点击这里,了解这个主题的相关免费书籍,来获取更多信息。

JS和JQ的MVC

MVC是一种当创建WEB应用(例如Rails,Python,ASP.net或者PHP)时,常用于服务器端的架构模式。所以,JS开发者会争执于基于jQuery的应用是否需要用MVC结构,还是分成更多基本模块代码更好呢。

有人认为一个干净的MVC结构服务器端代码库就已经足够了,也有人认为当jQuery应用的复杂度和规模的增加,我们需要MVC模式,特别是在企业层。虽然根据实际情况使用其他模式是一样可以的,但我会赞同后者。

这一节是写给那些相信MVC对他有用并且决定用MVC来写jQuery的人。

MVC模式怎样工作?

当你编写你的应用,利用传统MVC,你把对象分成三个类(或关联)。我对这些类的解释如下:

Model——模型,在应用中负责内容和数据。例如get和set就是在这个点下面的。Model是独立的,与View和Controller是完全分离的。

View——视图,而从web app的角度来看,也可以认为是UI。它一般比较愚蠢,不一定需要验证交互逻辑。它通常通过回调系统来输入。View是独立的,与Model和Controller完全分离。

Controller——控制器,位置在Model和View之间。Controller执行所有需要从Model请求数据,再放到View展现的必要的业务逻辑/数据操作。Controller执行大部分从View返回的验证,与View和Model紧密联系。

为什么我在这里推荐使用JavascriptMVC

JavascriptMVC得到很多好评,而且被有的人认为是当前大型JQ应用开发最全面的框架。我和一些以前做过大型JQ应用开发的同事对此也有同感。

如果你习惯用常规的方法(重服务器端,轻客户端)来建立web应用,你会发现用JMVC来开发需要小小思维的改变。

如果你的应用很大一部分是基于JS的,要保持模块化,组织性,可测试和整洁,就需要用到一个组合的工具,而这只是JMVC的一部分。大部分开发者会用于服务器端的代码,而适用于客户端的代码的时代已经来临。

我和Justin Meyer说到JMVC,他认为一些初学者最大的困惑可能是无法理解JMVC提供了什么。所以在这部分,我来说明这一点。

JMVC可以被看成两个东西——集成开发工具和可重复的MVC架构。JMVC的好处就是它为增加功能提供了一个清晰的路径和为项目的实现提供了方便。

首先,JavascriptMVC的MVC部分包括以下内容:

*Model——打包和组织Ajax请求和服务器端数据的方式;

*Controller——jQuery部件发生器;

*View——客户端模板

接下来,从JMVC提供的集成开发工具的角度来看,你会得到以下(或更多)的好处。虽然你很难想到有什么突破点,但这些功能的简洁的集成,让你不需要用工具来管理它们。

*依赖管理,建立产品(使用Less and CoffeeScript)

*自动化单元和功能测试

*文档

有人认为JMVC是杀鸡用牛刀。我只有在一种情况中,会同意这个观点。那就是当你写APP的时候,只用了很少的JS或者JS的关联性不大,那么管理工具就起不到什么作用了。

而其他情况,例如做一个大型应用,JMVC就可以为你的项目提供十二分的优势。

如果你的需求很广泛,而你又想用除了JMVC的其他MVC框架,我可以介绍其他的选择。

2011年5月1号更新:Justin Meyer告诉我JMVC刚刚推出了一个全新的交流网站,你可以在这里找到新的或近期的关于JMVC的文章。鼠标可猛击: http://community.javascriptmvc.com/

选择:

JavaScriptMVC*(推荐)

包括测试、依赖管理、构建工具和客户端模板的成熟MVC框架。需要把组织和构建代码的所有功能集成于一体的大型应用来说,JMVC是完美的。 Grooveshark的app的改版中大量使用JMVC。

视频预览: http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm

演示与下载:

http://www.javascriptmvc.com/#&who=getcode

https://github.com/jupiterjs/srchr

Backbone

这是一个优秀的DIY MVC框架,你可以根据你的项目自行选择附加的组件。Backbone提供了你需要使用MVC模式组织代码的骨干(但这里MVC的C是Collection而不是Controller)。它很赞的地方是它提供了一个由KVO绑定的核心组件的轻量框架(~2Kb)。

演示和下载:

http://documentcloud.github.com/backbone/

http://ryandotsmith.heroku.com/2010/10/a-backbone-js-demo-app-sinatra-backend.html

http://documentcloud.github.com/backbone/docs/todos.html

http://bennolan.com/2010/11/24/backbone-jquery-demo.html

SproutCore

当SproutCore在浏览器运行的时候,拓展MVC,包括服务接口、生成你的界面和响应操作应用状态。很大程度参与这个项目的Yeduha Katz正在把模块化加入SC中,所以这个功能很快就会被推出。推荐给希望希望有一个“丰富”桌面的应用,但不适合小尺寸的app。Apple是它的使用者之一。

视频预览: http://vimeo.com/16774060

演示和下载:

http://wiki.sproutcore.com/w/page/12412938/Hello-World-Tutorial

http://www.sproutcore.com/get-started/

Knockout JS

使用MVVM(可以被认为是有声明语法的MVC)。它非常适合界面开发,但也提供依赖管理、模板和兼容JQ。对于重量级的数据绑定的学习成本可能是一个曲线。

演示和下载:

http://knockoutjs.com/documentation/introduction.htm

http://knockoutjs.com/examples/

Eyeballs JS

由众所周知与Ruby有关联的Paul Campbell创作的MVC框架。它与很多库兼容,但也提供组织代码的功能,它是为了不可知和模块化。与Backbone看齐。但它的初始化函数function (o_O())可能会令有的人反感。重要的是,如果你是一个Ruby开发者,Eyeballs会给你一种熟悉的感觉,如果你主要用Ruby来为你的web应用建立服务器端代码,我会建议你试试使用它。

演示和下载:

https://github.com/paulca/eyeballs.js

Sammy JS

sammy.js是一个轻量的JQ插件,允许你很容易地定义基本路径的应用。MVC里面的C代表着Controller,有人认为Sammy.js是最好的控制器框架,但它没有完全提供Model和View。对于需要一定代码组织的单页面JS app,Sammy是值得一试的。

演示和下载:

https://github.com/quirkey/sammy

Choco

一个新的MVC框架,但不能独立使用。基于Sammy和JS-Model,但有解释器的支持和容易拓展。

视频预览:http://www.2dconcept.com/images/choco.mov

下载: https://github.com/ahe/choco

附带大型jQuery应用的相关模式资源:

*John Resig的简单继承

*Alex Sexton的使用继承模式来组织大型jQuery应用

*Rebecca Murphy推荐的对象字面模式

3、模板

模板已经成为近期JS行内最热门的话题,因为它可以很容易地为你输出到浏览器的数据定义一个模板,这会比使用传统的遍历数组更清晰和具可读性。

什么是模板?客户端模板基本上包含绑定表达式的标签,这个模板通常可以应用到数据对象或数组,并可以呈现到HTML DOM。有相当多可选择的模板可用在你的JQ或JS应用中,但很多时候,定义模板的语法差异不大。

下面介绍比较出名的JS模板。我觉得在我的项目中最有用的就是jQuery-tmpl和Mustache,哪怕有人觉得这些有点过重量级了。我也列出了一些其他的模板,让你可以按需选择。

*jQuery-tmpl http://github.com/jquery/jquery-tmpl (视频教程)

*Mustache.js https://github.com/janl/mustache.js ( 视频教程)

*Dust.js (one of Alex’s recommendations) – http://akdubya.github.com/dustjs/

*Handlebars by Yehuda Katz (Mustache的拓展) – https://github.com/wycats/handlebars.js (我喜欢这个)

*jQote http://aefxx.com/jquery-plugins/jqote/

*PURE http://beebole.com/pure

*Nano https://github.com/trix/nano

4、模块之间的通讯

虽然你可能会想用自己的方法来实现,但在你的应用中使用现有的pub/sub或者自定义事件来实现简单的模块间通讯是很理想的。你会发现有几种不同pub/sub的实现。目前,Ben Alman的版本在规模的重视和充分利用JQ自定义事件这两方面让我偏爱。

*Ben Alman’s pub/sub on GitHub (这个更新版本有两种方法)

*@phiggins jQuery.pubsub

*PubSubJS

*An Introduction To jQuery Custom Events

*jsSignals – Custom Events/Messaging for jQuery

5、建立进程&脚本合并

对于大型JQ和JS应用来说,一些可以自动完成相关任务的进程来协助生成你的最终版本的代码是很重要的。几行的JQ不是对于每个网站都是必要的,但重要的Web App一定要考虑到要有一个好的BP来协助单元测试。对于建立进程,我会推荐使用“Ant”,因为我个人认为在JS业界中,这是最广泛被使用的方案。在开始用Ant为JS项目建立脚本,可以先来看看这个给力的教程。

选择:

*合并JS源文件的Ruby库:http://getsprockets.org/

*使用Ant和YUI Compressor合并和压缩JS文件:http://www.samaxes.com/2009/05/combine-and-minimize-javascript-and-css-files-for-faster-loading/ and http://www.javascriptr.com/2009/07/21/setting-up-a-javascript-build-process/

*使用Google Closure Compiler和Ant编译JS应用:http://groups.google.com/group/closure-compiler-discuss/browse_thread/thread/92278e7a84736f3c

*只用Ant编程化合并文件:http://stackoverflow.com/questions/1373564/how-to-programmaticly-concatenate-with-ant

*使用MVC和.NET合并文件:http://www.codeplex.com/MvcScriptManager

*Smasher:Smasher是PHP5应用,基于Yahoo!搜索的内部工具。它可以合并、预处理和压缩多个JS文件。http://github.com/jlecomte/smasher

这里有另外一个为JS应用建立进程的工具:

*Jake(被Cappuccino使用):http://cappuccino.org/discuss/2010/04/28/introducing-jake-a-build-tool-for-javascript/

6、压缩脚本

压缩是所有大型JS应用中建立进程的一个重要部分。在线上环境中(特别是你需要更多的带宽),使用非压缩版本,可能会导致你的用户需要花更多时间去下载,所以你应该要压缩你的脚本。

压缩需要一个小工具来辅助,以得到最大的效益,但相信我,花时间去做压缩是值得的。你会发现很有趣的一件事情,在JQ,我们会不断尝试新的压缩工具,而工具也一直在变化——例如2010年,你选择了Google的Closure compile,但不意味着你在2011年不会选择UglifyJS。你的建立进程需要灵活地适应变化。

记住,压缩做的是脚本合并的步骤之一(如果你选择使用MVC,那么Javascript MVC会覆盖这两个步骤)。

选择:

*Google Closure Compiler http://code.google.com/closure/compiler/

*YUI Compressor http://developer.yahoo.com/yui/compressor/ (和Packer一起使用实现自动化)

*Minifier http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488

*UglifyJS * (推荐,因为压缩后在其他方面也有收益) https://github.com/mishoo/cl-uglify-js

*Packer for .NET http://svn.offwhite.net/trac/SmallSharpTools.Packer/wiki

*Dojo Toolkit’s ShrinkSafe http://www.dojotoolkit.org/

*JSMin – The JavaScript minifier http://www.crockford.com/javascript/jsmin.html

7、测试

发布前,JQ APP需要大量的测试来保证你的代码是正确的,而且是按预期进行的——这很重要,因为在写大型APP的时候,你不希望你的用户的第一次体验的好感度会降低。

在我们深入这一部分之前,我应该说无论如何完成你的测试覆盖率,没有什么理由让你不去写完你的代码并测试。那么,我们来看一下测试这方面的选择。

单元测试,是我必须推荐的部分,但在这一章,我会推荐测试JQ APP其他方面的资源,按需选择。

使用QUint对你的JS/JQ代码进行单元测试

一个有单元测试的坚固建立进程,常常用来测试和发布重要JQ应用。从用户界面来看,人工功能测试是很好的,但单元测试会允许你对你的代码进行压力测试来看看内部是否如期工作。这是一个很好的Qunit(一个很流行并可直接使用的JQ单元测试工具)教程。你可能会喜欢选择JSUnit或者FireUnit,但Qunit是三者中最被广泛使用的,也是我个人用于单元测试工具的选择。

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

使用JavascriptMVC中的FuncUnit进行测试

由Alex推荐的FuncUnit,允许你简单地操纵元素和模拟用户界面相当好。FuncUnit本身附加到Quint,你用它创建的测试可以在浏览器或者Selenium中运行。它也允许你在EnvJS(一个命令行浏览器)自动进行基本Qunit测试。我们推荐点击

http://jupiterjs.com/news/funcunit-fun-web-application-testing

使用MockJax和jQuery模拟你的Ajax请求实现快速开发

MockJax插件是一个神奇的开发和测试工具,可以在最少改动代码的情况下用JQ拦截和模拟Ajax请求。我推荐应用于需要频繁使用Ajax链接的Web APP测试。TamperData对这样的测试也一样有用。

这里有关于MockJax的教程:

http://enterprisejquery.com/2010/07/mock-your-ajax-requests-with-mockjax-for-rapid-development/

JQ的测试驱动开发

测试驱动开发的概念非常简单。当要为你的应用增加功能,在编写代码之前,你需要编写一个测试。在编写测试之前,你需要充分理解这个特性的规模和要求。开始时,你的测试肯定会失败,但我们的最终目标是,当测试通过时,我们的代码也完成了。这里有一个很好的教程,关于使用Elijah Manor来进行JQ的测试驱动开发:

http://msdn.microsoft.com/en-us/scriptjunkie/ff452703.aspx

自动测试浏览器兼容性,测试执行和结果反馈

如果主要依赖JS来建立一个大型WEB应用,你会想在不同的浏览器和不同的平台测试你的代码。你可以使用一些现成的框架,而不需要做大量的手动工作。John Resig会推荐WebDriver (Java), Watir (Ruby) and JSTestDriver来实现这个目的。Selenium RC也一样很流行使用。如果是内部测试,这些都是很好的工具。如果你是想要一个出色的测试系统,那么请看下一节。

用Envjs和BumbleBee在脚本环境中调试和测试JS

Envjs是一个提供了浏览器的JS执行的工具,相当于一个可用的脚本环境。这让开发者可以在console中运行JQ和JS,以达到调试代码的目标。Envjs的默认实现是Rhino。

Rhino (Java)是一个无论从外到内都是运行JS的好工具——从外,它可以像上面提到的那样做调试器。Rhino基本上把JS代码转换成Java类,主要用于服务器端的应用。如果你是使用Ant或者其他类似的来建立进程,那么把Rhino的JAR文件放到你的路径,会允许你构建运行JS。

Envjs的出色测试工具是BumbleBee,在今年发布的。它合并了Rhino, JSpec, Envjs和Ant,提供了一个“盒子外”的JS工具条,可以很容易地添加到你的自动化构建。我推荐使用。

JQ驱动自动化用户界面测试

UITest是一个可推荐的JQ自动化用户界面测试框架,由Menno van Slooten创造。在初期,你就可以在官方的github页面,或者via Menno的jQuery Bay Area Conference幻灯片这里相关话题的原始谈话中找到一些怎样使用这个框架的好例子。你也可以找到其他近期关于用户界面测试的最新资讯,在这篇文章讨论Selenium和Coded UI这些相似的选择。

https://github.com/mennovanslooten/UITest

结论

希望这个关于构建大型JQ应用的指引对你有用。一个全方位的解决方案是很理想化的,这篇文章的目的是提供所有可用的选择(在我的知识范围内),更好地根据你的大型应用开发,组合你的大型工具。

为了让你和你的团队能够灵活选择最有用的工具,我希望可以减少你进行相关研究的时间。

最后,如果你在找一个完方位的解决方案, JavaScriptMVC可能是最接近成熟和全面的选择,如果你觉得它比一个自定义的工具有用,我建议你使用它。记得,广泛来说,JMVC是完全的模块化。如果你想要按需选择,你只需要FuncUnit、Controller和StealJS来作为你的个人的工具,而不需要太多的东西。

无论你想怎样构建你的大型应用,在JS业界这里有很多工具和资源来帮助你。

相关阅读和资源:

*On jQuery and large applications with Rebecca Murphy

*On ‘Rolling Your Own’ Large jQuery Apps with Alex Sexton

*jQuery UI Developer’s Guide (for those wishing to use $.widget etc)

*Nicholas Zakas – Scalable JavaScript Application Architecture

*Tech Behind The New GrooveShark (Good Article On Large Scale jQuery App Dev)

*Cody Lindley’s excellent list of client-side development links for app development

*JS文档工具: JSDoc, YUI Doc或者PDoc

到了这里!我要感谢Alex Sexton, Dan Heberden和Justin Meyer对这篇文章给于的帮助。如果你觉得有帮助,请把它分享给你的朋友和同事。直到下一次之前,祝你的JQ&JQ APP好运!

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required