62

我在 Java/C++ 方面有很强的背景，我想知道是否有可能在不降低质量的情况下开发一个更大的 JavaScript 应用程序。

任何提示都表示赞赏：

  • 发展环境
  • 调试技术
  • 单元测试
  • 剖析
  • 仪器仪表
  • 系统设计
  • 界面设计
  • 代码设计

我也很好奇JavaScript PC Emulator和JavaScript Game Engine等项目是如何处理这些问题的，以防你们中的一些人知道。

4

9 回答 9

41

开发环境 那么，您需要一个 Web 服务器（取决于服务器端架构），如 Apache 或 IIS 来模拟 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

设计

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

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

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

  • 基本小部件
  • 基础 AJAX 通信
  • UI 核心（辅助方法...）

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

与服务器通信： 提供RESTful 服务进行通信是一个好主意。您还必须在 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/ 。此时延迟加载也可能会有所帮助。

于 2011-07-02T15:52:16.017 回答
14

我参与了使用SproutCore和Cappuccino编写大型 JavaScript 应用程序，根本没有任何“宏框架”。这就是我的想法：

首先，您在使用 Java 时获得的所有相同“良好设计”原则仍然适用：不要编写意大利面条式代码、封装、分离关注点和使用 MVC。

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

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

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

发展环境

我个人使用 MacVim。我听说过Cloud9IDE的好消息，这是一个用于 JS 开发的浏览器内 IDE。对于 Cappuccino，您可以使用 Apple 的 Xcode IDE，甚至可以设计 UI（非常酷）。

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

调试技术

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

单元测试

SproutCore 使用 QUnit，Cappuccino 使用 OJUnit/OJSpec。然后还有像JSDOM和env.js这样的项目，它们可以让您在服务器上模拟浏览器，并为您提供一个无需浏览器即可运行自动化测试的环境。

Selenium或Jasmine等项目也值得一试。

分析/仪器

您可以使用 Chrome Dev Tools 进行分析。 YSlow非常适合一般的 Web 应用程序分析（包括资产加载等）。

系统设计

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

这是SproutCore 的一个很棒的教程，这是一个用于主干.js 的教程。

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

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

界面设计

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

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

代码设计

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

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

于 2011-07-07T13:34:35.257 回答
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。它提供大量调试和更好地理解您的代码。在该领域，Google 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.

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

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

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

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

这使工作变得高效而轻松。您可以在 Javascript 中使用一些特定的模式。我会让保罗爱尔兰人启发你。

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

还有几个链接。

于 2011-07-07T17:10:00.073 回答
7

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

于 2011-06-30T03:29:21.510 回答
6

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

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

诸如GWT之类的东西允许您使用 Java 编写代码，因此如果您有一个能够协调使用 Java 或其他静态类型应用程序开发语言进行开发的团队，他们可能会发现过渡到 GWT 比过渡到 JavaScript 容易得多。GWT 还提供了可靠的核心库、模板、in-java-IDE 调试、每个浏览器的最小化代码以及许多其他好东西。

GWT 还与 java 单元测试工具（即junit ）一起使用，许多 java 团队已经在将 junit 集成到持续构建系统和测试仪表板中经验丰富。

于 2011-07-02T17:25:48.657 回答
4

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

开发环境

如果您更喜欢 IDE，JetBrains 有一个非常好的 Web 编辑器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 以及函数式编程有很好的支持（函数是语言中的一等公民）。对象字面量是类意义上的对象和结构意义上的字典的完美组合。除此之外，该语言还有一些真正独特的功能，它们可以让您完成许多强大的事情。

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

构建大型 jQuery 应用程序

于 2011-07-03T18:10:12.867 回答
3

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

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

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

于 2011-07-02T17:33:10.287 回答
3

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

对于调试，您将不得不依赖内置的浏览器调试器（Chrome/Safari 中的开发者工具，IE 中的开发者工具栏，Firefox 中的 Firebug），但最强大的调试工具仍然是 IE + Visual Studio，虽然不是很舒服次。

于 2011-07-09T01:42:45.060 回答
1

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

于 2011-07-09T02:08:13.787 回答