javascript - 用于前端 javascript 开发/测试和生产的工作流程/工具？

Question

在生产环境中，Web 前端 JavaScript 应用程序几乎不会“暴露”，即声明为全局变量或附加到 window。

• 所有代码最小化并附加到一个(或几个)js 文件；
• 几乎没有“暴露”，即声明为全局变量或附加到窗口。

但是，在开发过程中，如果代码可读、拆分为多个文件，并且可以从控制台访问原型(prototype)和相关实例，那么工作会更轻松。

为了更清楚(抛开最小化，这可以通过许多不同的工具轻松实现)，在生产中我会得到类似的东西:

(function() {
  var Greeter = function() {
  };

  Greeter.prototype.msg = function() {
    return 'Hello, world!';
  };

  Greeter.prototype.greet = function() {
    console.log(this.msg());
  };

  new Greeter().greet();
}());

这样，我的代码将在不暴露任何内容的情况下完成其工作:Greeter 对象及其实例都无法被其他代码访问。

(当然，这只是实现这一目标的多种方法之一，但这不是问题的重点)。

但是，调试这段代码很困难，并且单元测试也是不可能的。

为了允许调试和测试，我通常会将 Greeter 及其实例附加到 window 对象或其他某个对象。

因此，在开发过程中，我将使用以下内容:

(function() {
  var Greeter = function() {
  };

  Greeter.prototype.msg = function() {
    return 'Hello, world!';
  };

  Greeter.prototype.greet = function() {
    console.log(this.msg());
  };

  window.Greeter = Greeter;
  window.greeter = new Greeter();

  window.greeter.greet();
}());

这样我就能够对 Greeter 进行单元测试，并且还可以从浏览器的控制台询问它以检查其状态。

是否有一个工具或一组工具或某种不同的方式来组织我的代码，以便可以从开发版本传递到生产版本(这也将被最小化)？

Answer 1

没有任何一个软件包或可执行文件可以让您安装 100% 的方法。您需要结合编辑器、命令行工具和浏览器来创建有效的 Web 应用程序/JavaScript 开发环境。

3.18.13: Added a link for Sublime Web Inspector. Debug Javascript inside of Sublime Text! http://sokolovstas.github.com/SublimeWebInspector/

编辑器

要寻找的东西:插件系统、系统突出显示、linting、自动完成。如果您现在使用的编辑器支持插件，那么最好的选择就是坚持使用它并设置 linting 和语法突出显示。如果您正在寻找一些建议，以下所有内容都是不错的选择。

• Sublime Text 2(免费试用)
• Textmate(商业，30 天试用版)
• VIM(免费)
• Webstorm(商业版，30 天试用版)

工作流程工具:

我建议从 Yeoman 或 lineman 等高级工具集开始。他们有些固执己见，但提供了完整的工作流程，可以让你快速完成工作。一旦您熟悉了它的使用，您就可以深入了解它并根据您的需求进行选择和自定义。

• Yeoman:提供脚手架、包管理、开发服务器、连接和缩小以及运行规范

• Lineman:开发服务器、连接和缩小、运行规范

• Grunt:更低级别(由 Yeoman 和 Lineman 使用)。类似于ruby的rake

• VCS:不容忽视的是，基于命令行的良好 VCS 至关重要。我推荐 Git，再次使用您熟悉的内容开始。

浏览器:

浏览器中的开发工具将为您提供控制台和调试工具。花一些时间研究并真正了解如何使用浏览器中提供的开发工具。他们非常强大。

• Webkit 浏览器(Chrome 或 Safari):内置开发人员工具(命令选项 J)。

• Firefox + firebug

• 浏览器测试:强烈推荐 browserstack 进行跨浏览器测试。