开发更大的JavaScript应用程序的最佳实践

时间:2011-06-30 03:23:13

标签: javascript unit-testing ide system-design interface-design

拥有强大的Java / C ++背景我想知道是否有可能开发出更大的JavaScript应用程序,而不必削减质量。

任何提示都值得赞赏:

  • 发展环境
  • 调试技巧
  • 单元测试
  • 仿形
  • 仪表
  • 系统设计
  • 界面设计
  • 代码设计

我也很好奇JavaScript PC EmulatorJavaScript Game Engine之类的项目是如何处理这些问题的,以防有些人知道。

9 个答案:

答案 0 :(得分:40)

开发环境 那么,您需要一个Web服务器(取决于服务器端架构),如Apache或IIS来模拟AJAX通信。 有时,javascript的编辑器包含在服务器端开发语言的编辑器中。

有一个关于javascript IDE的有趣问题: https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support


调试技巧&纹 使用内置的浏览器调试和分析工具,如Firebug

您还可以查看this分析工具。


单元测试 如果使用jQuery,我建议http://docs.jquery.com/Qunit。在javascrit应用程序的开发版本中,加载了javascript测试文件。发布应用程序时,不会加载测试文件。


安全

  • 验证并计算服务器端
  • 上的所有内容
  • 防止XXS


<强>设计

  

应用--------------------------------

  • 应用程序组件
  • 自定义小部件
  

框架----------------------------------

  • 基本小部件
  • 基础AJAX通信
  • UI Core(帮助方法......)

框架提供基本功能。例如,基础框架是jQueryknockoutjs。在此框架之上构建了应用程序。当然,您可以为您的应用程序创建自己的框架。但是在选择jQuery时,你通常不需要处理跨浏览器的错误,因为jQuery会为你做这件事。


与服务器通信 提供RESTful Service进行沟通是个好主意。您还必须在JSON和XML之间进行选择。 JSON比XML更轻量级,因此通常选择JSON。


设计模式:如果javascript应用程序非常大,那么实现MVC或MVVM等设计模式是个好主意。

javascript之外还有一些MVC / MVVM框架(例如knockoutjs)。

这是一篇非常有用的关于javascript设计模式的文章:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/


但最后你必须自己决定你的应用程序应该如何构建等。设计模式可以向你展示一个好方法 - 但每个应用程序都是不同的,并不是每个解决方案都适用于所有问题。

不要忘记使用javascript时性能是一个大问题。所以压缩和组合javascript文件是个好主意:http://code.google.com/intl/de/speed/articles/。此时Lazy Loading也可能有所帮助。

答案 1 :(得分:14)

我参与了使用SproutCoreCappuccino编写大型JavaScript应用程序,而没有任何“Macroframework”。这就是我的想法:

首先,您在使用Java时获得的所有“良好设计”原则仍然适用:不要编写Spaghetti代码,封装,分离关注点并使用MVC。

许多人开始编写“web 2.0”或“web 3.0”(无论那意味着什么)app,只需添加jQuery并走上痛苦和痛苦的道路,因为他们的代码变得越来越大,完全无法维护。

像Cappuccino或SproutCore这样的“大”框架可以帮助你避免这样做。 Cappuccino非常适合桌面风格的应用程序,而SproutCore已将重点转移到2.0等“Web风格”应用程序(如New Twitter),同时仍然为您提供了构建应用程序和代码的绝佳方法。

现在针对您的具体领域或兴趣:

发展环境

我个人使用MacVim。我听说过Cloud9IDE的好东西,这是一个用于JS开发的浏览器内部IDE。对于Cappuccino,您可以使用Apple的Xcode IDE,甚至可以设计UI(非常酷)。

Cappuccino和SproutCore应用程序都可以在浏览器中进行测试,而无需Web服务器。如果您确实需要与Web服务器(您可能会这样做)进行通信,则Ruby on Railsnode.js通常用于轻松启动并运行后端。

调试技巧

在JavaScript开发方面,调试仍然是一个痛处。目前Google Chrome developer tools是最好的。您可以在浏览器中设置断点和各种简洁的东西。这是你想要使用的工具。

单元测试

SproutCore使用QUnit,Cappuccino附带OJUnit / OJSpec。然后有像JSDOMenv.js这样的项目,可让您模拟服务器上的浏览器,并为您提供一个无需浏览器即可运行自动化测试的环境。

此外,SeleniumJasmine等项目也值得一试。

剖析/仪器

你可以profiling with the Chrome Dev ToolsYSlow非常适合一般的Web应用程序分析(包括资产加载等)。

系统设计

从一开始就使用MVC。很多人从一个小应用程序开始,并在这里添加一些JavaScript来读取字段中的值,并在那里添加一些JavaScript来更新标签。他们再次这样做。然后再次。晚餐供应:意大利面条代码。使用SproutCorebackbone.js等框架来阻止这种情况并构建代码。

这是great tutorial for SproutCore,这是one for backbone.js

Cappuccino也是如此,tutorial I wrote about a year ago。这有点过时,但给你一般的想法。这是an up-to-date demo app我为5月份为MacTech杂志撰写的文章所做的。

因此,就像在任何其他开发环境中一样构建代码。也可以阅读this bookthis bookThese videos are also a great resource

界面设计

对于Cappuccino,您可以使用Apple的Xcode Interface Builder以图形方式布置您的UI。对于大多数其他系统,您将使用标准HTML和CSS设计UI。

如果您想开发移动版you must read this article

代码设计

请参阅我上面提到的图书和视频。并咨询this general coding style。当然人们对该页面上的风格的某些方面存在分歧,但这是一个很好的起点。

JavaScript是一个令人兴奋的开发环境,它拥有一个非常有活力的社区!你应该加入乐趣!我希望我的意见对你有所帮助。

答案 2 :(得分:10)

关于工具:

  • JSLint 是Douglas Crockford在http://www.jslint.com/开发的在线工具。 它告诉你为什么,即使可能性不大,你的代码也可能会中断。
  • JSMin 是一个用C语言编写的单文件javascript minifier。编译它,把它放在你的$ PATH中, 使用它为您的应用程序创建构建脚本。缩小的javascript被认为更快 加载。在http://www.crockford.com/javascript/jsmin.html
  • 获取
  • 拥有JS Read-Eval-Print循环总是很方便。下载量最多的是node.js,一个基于V8的REPL,Chrome javascript引擎。它可以让你 交互式测试javascript片段。它还通过一个机智的事件循环系统充当最强大的Web服务器之一。我们鼓励您这样使用它!
  • JS提示很好,但您需要一个优秀的 Web Inspector 。它提供了丰富的调试和更好地理解您的代码。在该领域,谷歌Chrome和Firebug都被认为是一流的。不同的是,谷歌Chrome是内置的。右键单击&gt;检查,你完成了。
    但是那里的最佳功能只能被发现in this colorful cheatsheet
  • JSFiddle也是一个尝试使用代码段的在线工具。
  • @mathias非常自豪地维护jsPerf,这是一个项目集合 哪个测试JS片段并且可以告诉跨浏览器哪个算法最快。
  • YSlow是另一个非常准确的工具,可以通过诙谐的建议告诉您网站是否快速,以及如何改进它。

IDE 而言,没有任何单一的开发环境被证明更有效。该领域最优秀的人只使用他们最喜欢的文本编辑器(@phoboslab,ImpactJS背后的人,使用KomodoEdit。保罗爱尔兰使用TextMate,这是好的,但只有Mac。很多人们使用Vim.JSLinux背后的人Fabrice Bellard使用他自己的Emacs版本。我认为。这无关紧要。)

单元测试很重要,但这绝不是问题。 Javascript足够强大,您可以在几行中构建一个更适合的单元测试软件。重要的是,感谢node.js(我上面推荐的JS提示),您可以通过将它们放在* .js脚本文件中来自动执行这些测试,并使用单行启动所有测试:{{1} }。

真正重要的是将mdn javascript documentation放在枕头下,html specification始终打开。请注意,我指出的版本并不广为人知,但它是迄今为止最好的版本!它甚至使用缓存清单,以便您在离线时可以重新读取已下载的页面!更不用说一个出色的搜索功能!

现在,既然我真的想要那个赏金,我会给你一个漂亮的页面,其中列出了构建网络应用所需的所有documentation 即可。它真的是一颗宝石。它包含指向您所需的所有信息的链接。这是所有圣经的索引。

最后,真正针对你想知道的问题是,你能用javascript做一个巨大的应用吗?
答案是肯定的。 Javascript确实有Crockford所说的“坏部分”,但是使用JSLint会警告你不要使用它们。另一方面,Javascript拥有强大的武器:

  • 闭包:您可以在另一个函数中定义一个函数,即使在外部函数运行完成后,它也可以访问外部变量。
  • 一流的功能:你可以创建函数数组,将函数作为参数传递给其他函数,从另一个函数返回一个函数,这一切都是免费的!
  • 对象文字,数组文字:这是JSON的基础。这是非常容易使用。 现在,所有javascript引擎都有一个$ node test.js和一个JSON.parse(aString)内置对象。
  • 原型设计:对象可以从您之前定义的任何变量继承。

这使得工作高效且轻松。您可以在Javascript中使用一些特定的模式。我会让Paul Irish enlighten you

在浏览器中使用javascript时最后一条建议:永远不要使用JSON.stringify(anObject)。始终使用<script>/* some javascript here */</script>

还有几个链接。

答案 3 :(得分:7)

您可以查看Google的Closure library and compiler。他们也写了一些非常大的Javascript应用程序。

答案 4 :(得分:6)

您应该研究JavaScript的替代方案,这些替代方案仍允许您在类似JavaScript的环境中进行部署。

许多编写大型应用程序的工具链都使个人和团队能够轻松地让代码协同工作,而不必让每个人都与其他人沟通,这是一个O(n ** 2)问题。

GWT这样的东西允许你用Java编写,所以如果你有一个团队能够协调Java或其他静态类型的应用程序开发语言的开发,他们可能会发现转换到GWT要比JavaScript更容易。 GWT还提供可靠的核心库,模板化,in-java-IDE调试,每个浏览器最小化的代码以及许多其他好东西。

GWT也适用于Java单元测试工具,即junit,许多java团队已经将junit集成到连续构建系统和测试仪表板中。

答案 5 :(得分:4)

请注意,这篇文章更注重网络,因为这是我主要工作的地方

开发环境

如果您更喜欢IDE,JetBrains有一个非常好的网页编辑器WebStorm,这使得在JavaScript中工作变得更加容易。 Aptana是另一个不错的选择。否则文本编辑器总是一个很好的选择(TextMate是我的首选)。

调试技巧

上面提到过,像firebug这样的浏览器DOM修补工具是必须的。您需要能够在使用它的环境中声明和评估您的代码,而无需不断保存和重新加载。

这里要提到的另一点是jslint,这是对你的javascript的严格验证。这相当于编译器时间错误,在修复javascript中的问题时非常有用。

单元测试

javascript的最佳单元测试框架是jasmine(基于rspec样式测试)。有些人不喜欢BDD样式声明,尽管大多数使用TDD接受BDD的人只是TDD做得对。就个人而言,我发现BDD风格有助于人们关注他们想要测试的内容。它有广泛的断言支持,并且已经做了很多工作来处理javascript的异步性质,而不会太脏。

<强>剖析/仪器

大多数浏览器都集成了开发支持。 firefox和chrome都很棒。虽然工具不能提供很好的细节,但它们可以很容易地用于识别服务器或客户端代码中的慢点。有了这些信息,就需要进行更深入的分析,但这应该只是追踪并解决问题的工作。

这绝对是一个空间,随着nodejs越来越受欢迎,浏览器之外会有很多增长。

设计(系统/代码/接口)

任何主要的JavaScript应用程序都会遇到任何动态类型语言都会遇到的所有问题。此外,javascript也有很长的历史,每天都会写很多坏代码。 Javascript没有什么可以帮助你进入成功的范畴,因此书籍就像“Javascript,好的部分”。

另一方面,javascript对OOP以及函数式编程(函数是该语言中的一等公民)有很大的支持。对象文字是类意义中的对象和结构意义上的字典的完美组合。除此之外,还有一些真正的unique features语言,它们可以让你完成许多有力的事情。

通过这些注意事项,您可以应用您在其他语言中使用的任何模式。有许多框架可以利用这一点。有一篇很棒的文章介绍了依赖管理,代码组织,模板,模块通信,构建过程(包括缩小)和最终测试的许多常见框架。

Building Large-Scale jQuery Applications

答案 6 :(得分:3)

在使用JS进行开发时,仍然可以使用类似Java的工具。我工作的公司有一个500K + loc应用程序,我们使用像Maven这样的工具来处理库依赖项。我们还使用Eclipse进行JS开发,使用WTP插件。

我们使用JS Test Driver for UnitTests和selenium for ATs。对于degugging和profiling,我们通常使用Firebug和VS Web Express内置的IE调试器。

对于代码编译,我们使用Google闭包和Java Servlet在开发过程中为JS提供服务,它能够以确保类依赖性可用的顺序加载每个JS文件及其依赖项。

答案 7 :(得分:3)

您的大部分问题已经得到解答,但是,我很惊讶没有人提到DynaTrace Ajax作为分析工具,因为它是目前市场上浏览器内JavaScript应用程序的最佳工具分析

对于调试,您将不得不依赖内置浏览器调试器(Chrome / Safari中的开发人员工具,IE中的开发人员工具栏,Firefox中的Firebug),但最强大的调试工具仍然是IE + Visual Studio,但不是有时很舒服。

答案 8 :(得分:1)

This article可能有助于理解 JavaScript中的策略模式