单元测试-开发大型JavaScript应用程序的最佳实践

开发环境好吧，您需要一个像Apache或IIS这样的web服务器（取决于服务器端架构）来模拟AJAX通信。有时，服务器端开发语言的编辑器中包含javascript编辑器。

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

---

调试技术&分析使用内置的浏览器调试和评测工具，如Firebug。

您还可以查看此评测工具。

---

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

---

安全

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

---

• 如何用javascript制作安全的游戏？

• 使AJAX调用安全

---

设计

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

• 应用程序组件
• 自定义小工具

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

• 基本小工具
• 基本AJAX通信
• UI核心（帮助程序方法…）

该框架提供了基本功能。例如，一个基本框架是jQuery和knockoutjs。在这个框架之上构建了应用程序。当然，您可以为您的应用程序创建自己的框架。但是，例如，当选择jQuery时，您基本上不需要处理跨浏览器错误，因为jQuery就是为您设计的。

---

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

---

设计模式：如果javascript应用程序真的很大，那么最好实现MVC或MVVM之类的设计模式。

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

• http://www.alistapart.com/articles/javascript-mvc/
• Flyweight图案

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

---

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

不要忘记，在使用javascript时，性能是一件大事。因此压缩和组合javascript文件是个好主意：http://code.google.com/intl/de/speed/articles/.在这一点上，懒惰加载可能也会有所帮助。

我参与过使用SproutCore和Cappuccino编写大型JavaScript应用程序，而根本没有任何"Macroframework"。这就是我的想法：

首先，您在Java工作中获得的所有"良好设计"原则仍然适用：不要编写Spaghetti代码、封装、分离关注点和使用MVC。

很多人开始编写"web 2.0"或"web 3.0"（无论这意味着什么）应用程序，只需将jQuery添加到其中，就会陷入痛苦和痛苦的境地，因为他们的代码变得越来越大，完全无法维护。

像Cappuccino或SproutCore这样的"大"框架可以帮助您避免这样做。卡布奇诺非常适合桌面风格的应用程序，而SproutCore已经将2.0的重点转移到了"网络风格"的应用程序上，如New Twitter，同时仍然为您提供了构建应用程序和代码的好方法。

现在转到您的特定领域或兴趣：

发展环境

我个人使用MacVim。我听说过Cloud9IDE，一个用于JS开发的浏览器内IDE。对于卡布奇诺，你可以使用苹果的Xcode IDE，甚至可以设计UI（这很酷）。

Cappuccino和SproutCore应用程序都可以在浏览器中进行测试，而无需网络服务器。如果您确实需要与web服务器对话（您可能会这样做），RubyonRails或node.js通常用于轻松启动并运行后端。

调试技术

当涉及到JavaScript开发时，调试仍然是一个痛点。谷歌Chrome开发工具是目前最好的。您可以在浏览器中设置断点以及各种巧妙的东西。这是你想要使用的工具。

单元测试

SproutCore使用QUnit，卡布奇诺配有OJUnit/OJSpec。还有像JSDOM和env.js这样的项目，它们可以让你在服务器上模拟浏览器，并为你提供一个在没有浏览器的情况下运行自动测试的环境。

此外，像Selenium或Jasmine这样的项目也值得一看。

仿形/仪表

您可以使用Chrome开发工具进行评测。YSlow非常适用于一般的web应用程序评测（包括资产加载等）。

系统设计

从一开始就使用MVC。很多人从一个小应用程序开始，在这里添加一些JavaScript来读取字段中的值，在那里添加更多JavaScript来更新标签。他们又这样做了。再说一遍。晚餐供应：意大利面条代码。使用像SproutCore或backbone.js这样的框架来防止这种情况并构建代码。

这是SproutCore的一个很棒的教程，这是一个针对backbone.js.的教程

卡布奇诺也是如此，这是我一年前写的一篇教程。它有点过时了，但给了你大致的想法。这是我为五月份为MacTech杂志写的一篇文章做的最新演示应用程序

因此，像在任何其他开发环境中一样构建代码。也许也可以读这本书或这本书。这些视频也是一个很好的资源。

接口设计

对于卡布奇诺，你可以使用苹果的Xcode界面生成器来图形化地布局你的UI。对于大多数其他系统，您将使用标准HTML和CSS设计UI。

如果你想为移动设备开发，你必须阅读这篇文章。

代码设计

请参阅我上面提到的书籍和视频。请参阅此通用编码样式。当然，人们对页面上的风格在某些方面存在分歧，但这是一个很好的起点。

JavaScript是一个令人兴奋的开发环境，它有一个非常活跃的社区！你应该加入这项娱乐活动！我希望我的意见对你有帮助。

关于工具：

• JSLint是Douglas Crockford在http://www.jslint.com/.它告诉你为什么，即使可能性不大，你的代码可能会崩溃
• JSMin是一个用C编写的单文件javascript迷你程序。编译它，将它放在$PATH中，然后使用它为您的应用程序创建构建脚本。小型化的javascript被认为更快负载在获取http://www.crockford.com/javascript/jsmin.html.
• 拥有JS Read Eval Print循环总是很方便的。下载量最大的是node.js，这是一个基于Chrome javascript引擎V8的REPL。它让你交互式测试javascript片段。它还通过一个诙谐的事件循环系统，作为最强大的网络服务器之一发挥作用。我们鼓励您以这种方式使用它
• JS提示很好，但您确实需要一个出色的Web检查器。它提供了大量的调试和对代码的更好理解。在这个领域，谷歌Chrome和Firebug都被认为是顶尖的。不同的是，谷歌浏览器是内置的。右键单击>检查，就完成了
  但其中最好的功能只能在这个丰富多彩的备忘单中发现
• JSFiddle也是一个尝试片段的在线工具
• @mathias非常自豪能够维护jsPerf，一个项目集合测试JS片段并可以判断，跨浏览器，哪种算法最快
• YSlow是另一个非常准确的工具，可以告诉你你的网站是否快速，以及你如何改进它，并提供机智的建议

就IDE而言，没有一个开发环境被证明更有效。该领域最优秀的人只使用他们最喜欢的文本编辑器（例如，ImpactJS背后的人@phoboslab使用KomodoEdit。Paul Irish使用TextMate，这很好，但只使用Mac。很多人使用Vim。我认为，JSLinux背后的人Fabrice Bellard使用他自己的Emacs版本。这一点都不重要）。

单元测试很重要，但这从来都不是问题。Javascript足够强大，您可以用几行代码为自己构建一个比其他任何软件都更适合的单元测试软件。重要的是，多亏了node.js（我上面推荐的js提示符），您可以通过将这些测试放在*.js脚本文件中来自动化这些测试，并用一行代码启动所有测试：$ node test.js。

真正有效的是将mdnjavascript文档放在枕头下，并且html规范始终打开。请注意，我为您指出的版本并不广为人知，但它是迄今为止最好的！它甚至使用缓存清单，这样你就可以在离线时重新读取已经下载的页面！更不用说出色的搜索功能了！

现在，既然我真的很想要这笔奖金，我会给你一个漂亮的页面，列出构建web应用程序所需的所有文档。它真是一颗宝石。它包含一个指向您需要的所有信息的链接。这是所有圣经的索引。

最后，真正针对你想知道的问题是，你能用javascript做一个巨大的应用程序吗
答案是肯定的。Javascript确实有Crockford所说的"坏部分"，但使用JSLint会警告您不要这样做。另一方面，Javascript拥有强大的武器：

• 闭包：您可以在另一个函数中定义一个函数，即使在外部函数运行完毕后，它也可以访问ouside变量
• 第一类函数：您可以创建函数数组，将函数作为参数传递给其他函数，从另一个函数返回函数，所有这些都是免费的
• 对象文字，数组文字：这是JSON的基础。它很容易使用。现在，所有javascript引擎都有一个JSON.parse(aString)和一个内置的JSON.stringify(anObject)对象
• 原型化：对象可以从您之前定义的任何变量继承

这使得工作既高效又简单。您可以在Javascript中使用一些特定的模式。我会让Paul Irish启发你的。

在浏览器中使用javascript时，最后一条建议是：永远不要使用<script>/* some javascript here */</script>。始终使用<script src="javascript-file.js"></script>。

还有几个链接。

• http://my.opera.com/emoller/blog/2011/05/01/javascript-performance或者如何不用担心在浏览器中实现ZIP
• http://paperjs.org/features/关于我们现在能走多远。随时随地编辑预编译的javascript
• http://brendaneich.com/2011/05/mozillas-nodeconf-presentation/关于javascript的未来

您可以查看Google的闭包库和编译器。他们也编写了一些相当大的Javascript应用程序。

您应该寻找JavaScript的替代方案，这些方案仍然允许您在类似JavaScript的环境中进行部署。

许多编写大型应用程序都有一个工具链，可以让个人和团队轻松地将代码协同工作，而不必让每个人都与其他人交流，这是一个O（n**2）问题。

像GWT这样的东西允许你用Java编写，所以如果你有一个团队能够用Java或其他静态类型的应用程序开发语言协调开发，他们可能会发现向GWT的过渡比向JavaScript的过渡容易得多。GWT还提供了坚实的核心库、模板、javaIDE调试、每个浏览器的最小化代码以及许多其他好处。

GWT还使用java单元测试工具，即junit，许多java团队已经在将junit集成到连续构建系统和测试面板中方面经验丰富。

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

开发环境

如果你更喜欢IDE，JetBrains有一个非常好的web编辑器WebStorm，它可以让javascript的工作变得更容易。Aptana是另一个不错的选择。否则，文本编辑器总是一个很好的选择（TextMate是我的首选）。

调试技术

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

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

单元测试

javascript最好的单元测试框架是jasmine（基于rspec风格的测试）。有些人不喜欢BDD风格的声明，尽管大多数使用TDD的人都认为BDD做得很好。就我个人而言，我发现BDD风格有助于人们将注意力集中在他们试图测试的内容上。它有广泛的断言支持，并且已经做了大量的工作来处理javascript的异步性质，而不会变得太脏。

分析/仪器

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

随着nodejs的日益流行，浏览器之外的这个空间肯定会有很大的增长。

设计（系统/代码/接口）

任何主要的javascript应用程序都会遇到任何动态类型语言都会遇到的所有问题。此外，javascript也有很长的历史，每天都会编写很多糟糕的代码。Javascript不会把你推向成功的深渊，因此书上写着"Javascript，好的部分"。

另一方面，javascript对OOP以及函数式编程都有很好的支持（函数是该语言中的第一类公民）。对象文字是类意义上的对象和结构意义上的字典的美丽组合。除此之外，语言还有一些真正独特的功能，它们可以让你完成许多强大的事情。

考虑到这些因素，您可以应用在其他语言中使用的任何模式。有许多框架利用了这一点。有一篇很棒的文章介绍了许多用于依赖关系管理、代码组织、模板、模块通信、构建过程（包括缩小）和最终测试的通用框架。

构建大规模jQuery应用程序

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

我们对UnitTests使用JS测试驱动程序，对AT使用selenium。对于调试和分析，我们通常使用内置在VSWebExpress中的Firebug和IE调试器。

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

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

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

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