【现代JavaScript系列教程】02-规范与代码编辑器及开发者控制台的介绍

来源 | https://www.javascript.info

这是一个系列教程。它旨在帮助你由浅入深掌握 JavaScript 这门语言。但是，当你已经熟悉了这门语言的基础知识，你就会需要其他资料。

规范

ECMA-262 规范 包含了大部分深入的、详细的、规范化的关于 JavaScript 的信息。这份规范明确地定义了这门语言。

但正因其规范化，对于新手来说难以理解。所以，如果你需要关于这门语言细节最权威的信息来源，这份规范就很适合你（去阅读）。但它并不适合日常使用。

每年都会发布一个新版本的规范。最新的规范草案请见 https://tc39.es/ecma262/。

想了解最新最前沿的功能，包括“即将纳入规范的”（所谓的 “stage 3”），请看这里的提案 https://github.com/tc39/proposals。

当然，如果你正在做浏览器相关的开发工作，那么本教程的 第二部分 涵盖了其他规范。

手册

• MDN（Mozilla）JavaScript 索引 是一个带有用例和其他信息的手册。它是一个获取关于个别语言函数、方法等深入信息的很好的来源。

  你可以在 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference 阅读它。

  虽然，利用互联网搜索通常是最好的选择。只需在查询时输入“MDN [关键字]”，例如 https://google.com/search?q=MDN+parseInt 搜索 parseInt 函数。

• MSDN —— 一本微软的手册，它包含大量的信息，包括 JavaScript（在里面经常被写成 JScript）。如果有人需要关于 Internet Explorer 的规范细节，最好去看：http://msdn.microsoft.com/。

  当然，我们还可以在使用互联网搜索中使用如 “RegExp MSDN” 或 “RegExp MSDN jscript” 这样的词条。

兼容性表

JavaScript 是一门还在发展中的语言，定期会添加一些新的功能。

要查看它们在基于浏览器的引擎及其他引擎中的支持情况，请看：

• http://caniuse.com —— 每个功能的支持表，例如，查看哪个引擎支持现代加密（cryptography）函数：http://caniuse.com/#feat=cryptography。

• https://kangax.github.io/compat-table —— 一份列有语言功能以及引擎是否支持这些功能的表格。

所有这些资源在实际开发中都有用武之地，因为它们包含了有关语言细节，以及它们被支持的程度等非常有价值的信息。

为了让你在真正需要深入了解特定功能的时候不会捉襟见肘，请记住它们（或者这一页）。

代码编辑器

程序员接触时间最长的就是代码编辑器。

代码编辑器主要分两种：IDE（集成开发环境）和轻量编辑器。很多人喜欢这两种各选一个。

IDE

IDE（集成开发环境）是指用于管理整个项目的，具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的“开发环境”。

IDE 加载项目（通常包含很多文件），并且允许在不同文件之间导航（navigation）。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如 git）、集成测试环境等一些其他“项目层面”的东西。

如果你还没考虑好选哪一款 IDE，可以考虑下面两个：

• Visual Studio Code（跨平台，免费）。

• WebStorm（跨平台，收费）。

对于 Windows 系统来说，也有个叫 “Visual Studio” 的 IDE，请不要跟 “Visual Studio Code” 混淆。“Visual Studio” 是一个收费的、强大的 Windows 专用编辑器，它十分适合于 .NET 开发。用它进行 JavaScript 开发也不错。“Visual Studio” 有个免费的版本 Visual Studio Community。

很多 IDE 是收费的，但是它们都可以试用。购买 IDE 的费用对于一名合格的程序员的薪水来说，肯定算不了什么，所以去选一个对你来说最好的吧。

轻量编辑器

“轻量编辑器”没有 IDE 功能那么强大，但是它们一般很快、优雅而且简单。

“轻量编辑器”主要用于快速打开和编辑文件。

“轻量编辑器”和 “IDE” 最大的区别是，IDE 一般在项目中使用，这也就意味着在开启的时候要加载很多数据，如果需要的话还会分析项目的结构等。如果我们只需要编辑一个文件，那么“轻量编辑器”会更快。

实际上，“轻量编辑器”一般都有各种各样的插件，这些插件可以做目录级（directory-level）的语法分析和代码补全。所以“轻量编辑器”和 IDE 也没有严格的界限。

下面是一些值得你关注的“轻量编辑器”：

• Atom（跨平台，免费）。

• Visual Studio Code（跨平台，免费）。

• Sublime Text（跨平台，共享软件）。

• Notepad++（Windows，免费）。

• Vim 和 Emacs 也很棒，如果你知道怎么使用它们的话。

不要争吵

上面列表中的编辑器都是我和我的朋友（他们都是我认为很优秀的开发者）已经使用了很长时间并且很满意的。

当然还有很多其他很好的编辑器，你可以选择一个你最喜欢的。

选择编辑器就像选择其他工具一样，是很个人化的。具体取决于你的项目，习惯以及个人喜好。

开发者控制台

代码是很容易出现错误的。你也很可能犯错误……哦，我在说什么？只要你是人，你 一定 会犯错误（在写代码的时候），除非你是 机器人。

但在浏览器中，默认情况下用户是看不到错误的。所以，如果脚本中有错误，我们看不到是什么错误，更不能够修复它。

为了发现错误并获得一些与脚本相关且有用的信息，浏览器内置了“开发者工具”。

通常，开发者倾向于使用 Chrome 或 Firefox 进行开发，因为它们有最好的开发者工具。一些其它的浏览器也提供开发者工具，有时还具有一些特殊的功能，通常它们都是在“追赶” Chrome 或 Firefox。

所以大多数人都有“最喜欢”的浏览器，当遇到某个浏览器独有的问题的时候，人们就会切换到其它的浏览器。

开发者工具很强大，功能丰富。首先，我们将学习如何打开它们，查找错误和运行 JavaScript 命令。

Google Chrome

打开网页 bug.html。

在这个页面的 JavaScript 代码中有一个错误。一般的访问者看不到这个错误，所以让我们打开开发者工具看看吧。

按下 F12 键，如果你使用 Mac，试试 Cmd+Opt+J。

默认情况下，开发者工具会被在 Console 标签页中打开。

就像这样：

具体什么样，要看你的 Chrome 版本。它随着时间一直在变，但是都很类似。

• 在这我们能看到红色的错误提示信息。这个场景中，脚本里有一个未知的 “lalala” 命令。

• 在右边，有个可点击的链接 bug.html:12。这个链接会链接到错误发生的行号。

在错误信息的下方，有个 > 标志。它代表“命令行”，在“命令行”中，我们可以输入 JavaScript 命令，按下 Enter 来执行。

现在，我们能看到错误就够了。稍后，在 在 Chrome 中调试 一节中，我们会重新更加深入地学习开发者工具。

多行输入

通常，当我们向控制台输入一行代码后，按 Enter，这行代码就会立即执行。

如果想要插入多行代码，请按 Shift+Enter 来进行换行。这样就可以输入长片段的 JavaScript 代码了。

Firefox、Edge 和其它浏览器

大多数其它的浏览器都是通过 F12 来打开开发者工具。

它们的外观和感觉都非常相似，一旦你学会了它们中的一个（可以先尝试 Chrome），其它的也就很快就可以熟悉了。

Safari

Safari（Mac 系统中的浏览器，Windows 和 Linux 系统不支持）有一点点不同。我们需要先开启“开发菜单”。

打开“偏好设置”，选择“高级”选项。选中最下方的那个选择框：

现在，我们通过 Cmd+Opt+C 就能打开或关闭控制台了。另外注意，有一个名字为“开发”的顶部菜单出现了。它有很多命令和选项。

总结

• 开发者工具允许我们查看错误、执行命令、检查变量等。

• 在 Windows 系统中，可以通过 F12 开启开发者工具。Mac 系统下，Chrome 需要使用 Cmd+Opt+J，Safari 使用 Cmd+Opt+C（需要提前开启）。

现在我们的环境准备好了。下一章，我们将正式开始学习 JavaScript。

本文完〜