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

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

任何提示都赞赏有关:

  • 发展环境
  • debugging技术
  • unit testing
  • 剖析
  • 仪表
  • 系统devise
  • 界面devise
  • 代码devise

我也很好奇,像JavaScript PC仿真器和JavaScript游戏引擎这样的项目如何处理这些问题,以防有些人知道。

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

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


debugging技术和性能分析使用内置的浏览器debugging和分析工具,如Firebug 。

你也可以看看这个分析工具。


unit testing如果使用jQuery,我会推荐http://docs.jquery.com/Qunit 。 在javascrit应用程序的开发版本中,加载了javascripttesting文件。 当应用程序发布时,testing文件不会被加载。


安全

  • validation并计算服务器端的所有内容
  • 预防XXS

  • 如何在JavaScript中做一个安全的游戏?

  • 使AJAX调用安全


devise

应用 – – – – – – – – – – – – – – – –

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

框架———————————-

  • 基础小工具
  • 基地AJAX通信
  • UI Core(助手方法…)

该框架提供了基本function。 例如,基本框架是jQuery和knockoutjs 。 在这个框架之上,应用程序被构build。 当然,您可以为您的应用程序创build自己的框架。 但是,例如,当selectjQuery时,你大多不需要处理跨浏览器的错误,因为jQuery为你做。


与服务器通信:为通信提供RESTful服务是一个好主意。 您还必须在JSON和XML之间进行select。 JSON比XML更轻量级,因此经常selectJSON。


devise模式:如果JavaScript应用程序真的很大,那么实现像MVC或MVVM这样的devise模式是一个好主意。

外面有一些MVC / MVVM框架的JavaScript(例如knockoutjs )。

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


但是最后你必须决定你的应用程序应该如何构build等。devise模式可以给你一个好的方法 – 但是每个应用程序都是不同的,并不是每个解决scheme都适用于所有问题。

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

我参与了使用SproutCore和Cappuccino编写大型JavaScript应用程序,而不使用任何“Macroframework”。 这是我的想法:

首先,您在使用Java时获得的所有“良好devise”原则仍然适用:不要编写意大利面代码,封装,分离问题和使用MVC。

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

卡布奇诺或SproutCore等“大”框架可以帮助您避免这样做。 卡布奇诺非常适合桌面型应用,而SproutCore已经将焦点转移到了“networking风格”的应用程序,如新的Twitter,同时仍然给你很好的方式来构build你的应用程序和你的代码。

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

发展环境

我个人使用MacVim。 我听说过关于Cloud9IDE的一些好消息 ,这是一个用于JS开发的浏览器内置IDE。 对于卡布奇诺,你可以使用苹果公司的Xcode IDE,甚至deviseUI(这是非常酷的)。

Cappuccino和SproutCore应用都可以在浏览器中正确testing,而不需要Web服务器。 如果您确实需要与Web服务器交互 (您可能会这么做), Ruby on Rails或node.js通常用于轻松获得后端并运行。

debugging技术

当谈到JavaScript开发时,debugging仍然是一个痛处。 谷歌Chrome开发者工具是目前最好的。 你可以在浏览器中设置断点和各种整洁的东西。 这是你想要使用的工具。

unit testing

SproutCore使用QUnit,卡布奇诺配有OJUnit / OJSpec。 然后有像JSDOM和env.js的项目,让你模拟服务器上的浏览器,并给你一个环境来运行自动化testing,而无需浏览器。

像selenium或茉莉花项目也值得一试。

剖析/仪器仪表

您可以使用Chrome开发工具进行分析 。 YSlow非常适合一般的Web应用程序分析(包括资产加载等)。

系统devise

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

这是SproutCore的一个很好的教程 ,这是一个backbone.js 。

卡布奇诺也是如此,这是我一年前写的一个教程 。 这有点过时了,但给你的总体思路。 下面是我为5月份为“MacTech”杂志撰写的文章所做的最新演示应用程序 。

因此,就像在其他任何开发环境中那样构build代码。 也许读这本书或这本书 。 这些video也是一个很好的资源 。

界面devise

对于卡布奇诺,您可以使用Apple的Xcode界面生成器以graphics方式布置您的用户界面。 对于大多数其他系统,您将使用标准HTML和CSSdevise您的UI。

如果你想开发移动, 你必须阅读这篇文章 。

代码devise

请参阅上面提到的书籍和video。 并参考这一般的编码风格 。 当然,人们对这个页面上的风格有些不同意,但这是一个很好的起点。

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

关于工具:

  • JSLint是Douglas Crockford在http://www.jslint.com/开发的在线工具。; 它告诉你为什么,即使可能性不大,你的代码可能会中断。
  • JSMin是用C语言编写的单文件javascript minifier。编译它,把它放在你的$ PATH中,并用它为你的应用程序创build构build脚本。 缩小的JavaScript被认为是更快加载。 获取它在http://www.crockford.com/javascript/jsmin.html
  • 有一个JS读取评估打印循环总是方便。 最下载的是node.js ,一个基于V8的REPL,Chrome的JavaScript引擎。 它可以让你交互式地testingJavaScript片段。 它也通过一个机智的事件循环系统作为最强大的Web服务器之一。 鼓励你这样使用它!
  • 一个JS提示是好的,但你确实需要一个杰出的Web Inspector 。 它提供了丰富的debugging和更好的理解你的代码。 在这个领域,Google Chrome和Firebug都被认为是顶尖的。 不同的是,Google Chrome是内置的。 右键点击>检查,你就完成了。
    但是这里最好的function只能在这个彩色的cheatsheet中发现。
  • JSFiddle也是一个在线工具,可以试用片段。
  • @mathias对于维护jsPerf感到非常自豪,jsPerf是testingJS代码片段的一个项目集合,可以说跨浏览器,哪个algorithm是最快的。
  • YSlow是另一个真正准确的工具,告诉你,如果你的网站是快速的,以及如何可以改进它,诙谐的build议。

IDE而言,没有一个单一的开发环境被certificate更有效。 这个领域最好的人只使用他们最喜欢的文本编辑器(@phoboslab, ImpactJS背后的人使用KomodoEdit ,Paul Irish使用TextMate,这很好,但是只有Mac,很多人使用Vim。我认为,JSLinux背后的家伙Fabrice Bellard使用了他自己的Emacs版本,这并不重要)。

unit testing很重要,但这不是问题。 Javascript是足够强大的,你可以build立一个更适合的unit testing软件在几行比什么都有。 重要的是,多亏了node.js(我上面推荐的JS提示符),你可以通过把这些testing放到一个* .js脚本文件中来自动执行这些testing,并用单行来启动所有的testing: $ node test.js

真正有效的是把mdn javascript文档放在你的枕头下, html规范总是打开的。 请注意,我指向你的版本并不广为人知,但它是迄今为止最好的版本! 它甚至使用caching清单,以便您可以在脱机时重新读取已下载的页面! 更不用说一个出色的searchfunction!

而现在,因为我真的想要这个赏金,我会给你一个漂亮的页面,列出你将需要build立一个Web应用程序的 所有文件 。 这真是一颗gem。 它包含您需要的所有信息的链接。 那是所有圣经的索引。

最后,真正针对你想知道的问题是,你可以在JavaScript中做一个巨大的应用程序?
答案是肯定的。 JavaScript确实有Crockford所说的“不好的部分”,但是使用JSLint警告你。 另一方面,Javascript有强大的武器:

  • closures:您可以在另一个函数内部定义一个函数,即使在外部函数运行之后,它也可以访问外部variables。
  • 第一类function:可以创build函数数组,将函数作为parameter passing给其他函数,从另一个函数返回函数,这一切都是免费的!
  • 对象文字,数组文字:这是JSON的基础。 这是非常容易使用。 所有的JavaScript引擎现在都有一个JSON.parse(aString)和一个JSON.stringify(anObject)内置对象。
  • 原型:对象可以inheritance你之前定义的任何variables。

这使得工作高效和简单。 有一些可以在Javascript中使用的特定模式。 我会让保罗·爱尔兰人开导你 。

最后一个build议是,在浏览器中使用javascript时:从来没有使用<script>/* some javascript here */</script> 。 始终使用<script src="javascript-file.js"></script>

还有几个链接。

你可以看看Google的Closure库和编译器 。 他们也写了一些非常大的Javascript应用程序。

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

大量编写大型应用程序的工具链使得个人和团队可以轻松地使代码一起工作,而不必让每个人都与其他人沟通,即O(n ** 2)问题。

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

GWT也可以与javaunit testing工具一起工作,即junit和许多java团队已经将junit集成到连续构build系统和testing仪表板中。

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

开发环境

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

debugging技术

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

还有一点要提到的是jslint ,它是对你的javascript的严格validation。 这相当于编译器时间错误,并且在解决javascript问题时可能是非常有价值的。

unit testing

最好的javascriptunit testing框架是jasmine (基于rspec样式testing)。 有些人不喜欢BDD风格的声明,尽pipe大多数使用TDD的人接受BDD只是TDD做对了。 就我个人而言,我发现BDD风格可以帮助人们把注意力集中到他们想要testing的东西上。 它有广泛的断言支持,并且已经做了很多工作来处理javascript的asynchronous性质,而不会太脏。

剖析/仪器仪表

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

随着nodejs越来越stream行,这绝对是一个在浏览器之外看到很多增长的空间 。

devise(系统/代码/接口)

任何主要的JavaScript应用程序都将遇到所有dynamictypes语言将会遇到的问题。 而且,JavaScript也有很长的历史,其中很多糟糕的代码是每天写的。 Javascript并没有把你推到成功的地步,所以书籍就像“Javascript,好的部分”。

另一方面,javascript对OOP有很大的支持,还有function性编程(function是语言中的一等公民)。 对象文字是类别意义上的对象与结构意义上的词典的完美结合。 除此之外,还有一些真正独特的function语言,他们可以让你完成许多有力的事情。

有了这些考虑,你可以应用任何其他语言使用的模式。 有很多利用这个优势的框架。 有一篇伟大的文章经历了许多依赖pipe理,代码组织,模板化,模块通信,构build过程(包括缩小)以及最终testing的通用框架。

构build大规模的jQuery应用程序

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

我们使用JS Test Driver for UnitTests和Selenium for AT。 为了消除和分析,我们通常使用Firebug和VS Web Express内置的IEdebugging器。

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

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

对于debugging,您将不得不依赖内置的浏览器debugging器(Chrome / Safari中的开发者工具,IE中的开发者工具条,Firefox中的Firebug),但是最强大的debugging工具仍然是IE + Visual Studio,倍。

本文可能有助于理解JavaScript中的策略模式