【現(xiàn)代JavaScript系列教程】02-規(guī)范與代碼編輯器及開發(fā)者控制臺(tái)的介紹

來(lái)源 |?https://www.javascript.info

這是一個(gè)系列教程。它旨在幫助你由淺入深掌握 JavaScript 這門語(yǔ)言。但是，當(dāng)你已經(jīng)熟悉了這門語(yǔ)言的基礎(chǔ)知識(shí)，你就會(huì)需要其他資料。

規(guī)范

ECMA-262 規(guī)范?包含了大部分深入的、詳細(xì)的、規(guī)范化的關(guān)于 JavaScript 的信息。這份規(guī)范明確地定義了這門語(yǔ)言。

但正因其規(guī)范化，對(duì)于新手來(lái)說(shuō)難以理解。所以，如果你需要關(guān)于這門語(yǔ)言細(xì)節(jié)最權(quán)威的信息來(lái)源，這份規(guī)范就很適合你（去閱讀）。但它并不適合日常使用。

每年都會(huì)發(fā)布一個(gè)新版本的規(guī)范。最新的規(guī)范草案請(qǐng)見(jiàn)?https://tc39.es/ecma262/。

想了解最新最前沿的功能，包括“即將納入規(guī)范的”（所謂的 “stage 3”），請(qǐng)看這里的提案?https://github.com/tc39/proposals。

當(dāng)然，如果你正在做瀏覽器相關(guān)的開發(fā)工作，那么本教程的?第二部分?涵蓋了其他規(guī)范。

手冊(cè)

• MDN（Mozilla）JavaScript 索引?是一個(gè)帶有用例和其他信息的手冊(cè)。它是一個(gè)獲取關(guān)于個(gè)別語(yǔ)言函數(shù)、方法等深入信息的很好的來(lái)源。

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

  雖然，利用互聯(lián)網(wǎng)搜索通常是最好的選擇。只需在查詢時(shí)輸入“MDN [關(guān)鍵字]”，例如 https://google.com/search?q=MDN+parseInt 搜索?parseInt?函數(shù)。

• MSDN?—— 一本微軟的手冊(cè)，它包含大量的信息，包括 JavaScript（在里面經(jīng)常被寫成 JScript）。如果有人需要關(guān)于 Internet Explorer 的規(guī)范細(xì)節(jié)，最好去看：http://msdn.microsoft.com/。

  當(dāng)然，我們還可以在使用互聯(lián)網(wǎng)搜索中使用如 “RegExp MSDN” 或 “RegExp MSDN jscript” 這樣的詞條。

兼容性表

JavaScript 是一門還在發(fā)展中的語(yǔ)言，定期會(huì)添加一些新的功能。

要查看它們?cè)诨跒g覽器的引擎及其他引擎中的支持情況，請(qǐng)看：

• http://caniuse.com —— 每個(gè)功能的支持表，例如，查看哪個(gè)引擎支持現(xiàn)代加密（cryptography）函數(shù)：http://caniuse.com/#feat=cryptography。

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

所有這些資源在實(shí)際開發(fā)中都有用武之地，因?yàn)樗鼈儼擞嘘P(guān)語(yǔ)言細(xì)節(jié)，以及它們被支持的程度等非常有價(jià)值的信息。

為了讓你在真正需要深入了解特定功能的時(shí)候不會(huì)捉襟見(jiàn)肘，請(qǐng)記住它們（或者這一頁(yè)）。

代碼編輯器

程序員接觸時(shí)間最長(zhǎng)的就是代碼編輯器。

代碼編輯器主要分兩種：IDE（集成開發(fā)環(huán)境）和輕量編輯器。很多人喜歡這兩種各選一個(gè)。

IDE

IDE（集成開發(fā)環(huán)境）是指用于管理整個(gè)項(xiàng)目的，具有強(qiáng)大功能的編輯器。顧名思義，它不僅僅是一個(gè)編輯器，而且還是個(gè)完整的“開發(fā)環(huán)境”。

IDE 加載項(xiàng)目（通常包含很多文件），并且允許在不同文件之間導(dǎo)航（navigation）。IDE 還提供基于整個(gè)項(xiàng)目（不僅僅是打開的文件）的自動(dòng)補(bǔ)全功能，集成版本控制（如 git）、集成測(cè)試環(huán)境等一些其他“項(xiàng)目層面”的東西。

如果你還沒(méi)考慮好選哪一款 IDE，可以考慮下面兩個(gè)：

• Visual Studio Code（跨平臺(tái)，免費(fèi)）。

• WebStorm（跨平臺(tái)，收費(fèi)）。

對(duì)于 Windows 系統(tǒng)來(lái)說(shuō)，也有個(gè)叫 “Visual Studio” 的 IDE，請(qǐng)不要跟 “Visual Studio Code” 混淆。“Visual Studio” 是一個(gè)收費(fèi)的、強(qiáng)大的 Windows 專用編輯器，它十分適合于 .NET 開發(fā)。用它進(jìn)行 JavaScript 開發(fā)也不錯(cuò)。“Visual Studio” 有個(gè)免費(fèi)的版本 Visual Studio Community。

很多 IDE 是收費(fèi)的，但是它們都可以試用。購(gòu)買 IDE 的費(fèi)用對(duì)于一名合格的程序員的薪水來(lái)說(shuō)，肯定算不了什么，所以去選一個(gè)對(duì)你來(lái)說(shuō)最好的吧。

輕量編輯器

“輕量編輯器”沒(méi)有 IDE 功能那么強(qiáng)大，但是它們一般很快、優(yōu)雅而且簡(jiǎn)單。

“輕量編輯器”主要用于快速打開和編輯文件。

“輕量編輯器”和 “IDE” 最大的區(qū)別是，IDE 一般在項(xiàng)目中使用，這也就意味著在開啟的時(shí)候要加載很多數(shù)據(jù)，如果需要的話還會(huì)分析項(xiàng)目的結(jié)構(gòu)等。如果我們只需要編輯一個(gè)文件，那么“輕量編輯器”會(huì)更快。

實(shí)際上，“輕量編輯器”一般都有各種各樣的插件，這些插件可以做目錄級(jí)（directory-level）的語(yǔ)法分析和代碼補(bǔ)全。所以“輕量編輯器”和 IDE 也沒(méi)有嚴(yán)格的界限。

下面是一些值得你關(guān)注的“輕量編輯器”：

• Atom（跨平臺(tái)，免費(fèi)）。

• Visual Studio Code（跨平臺(tái)，免費(fèi)）。

• Sublime Text（跨平臺(tái)，共享軟件）。

• Notepad++（Windows，免費(fèi)）。

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

不要爭(zhēng)吵

上面列表中的編輯器都是我和我的朋友（他們都是我認(rèn)為很優(yōu)秀的開發(fā)者）已經(jīng)使用了很長(zhǎng)時(shí)間并且很滿意的。

當(dāng)然還有很多其他很好的編輯器，你可以選擇一個(gè)你最喜歡的。

選擇編輯器就像選擇其他工具一樣，是很個(gè)人化的。具體取決于你的項(xiàng)目，習(xí)慣以及個(gè)人喜好。

開發(fā)者控制臺(tái)

代碼是很容易出現(xiàn)錯(cuò)誤的。你也很可能犯錯(cuò)誤……哦，我在說(shuō)什么？只要你是人，你?一定?會(huì)犯錯(cuò)誤（在寫代碼的時(shí)候），除非你是?機(jī)器人。

但在瀏覽器中，默認(rèn)情況下用戶是看不到錯(cuò)誤的。所以，如果腳本中有錯(cuò)誤，我們看不到是什么錯(cuò)誤，更不能夠修復(fù)它。

為了發(fā)現(xiàn)錯(cuò)誤并獲得一些與腳本相關(guān)且有用的信息，瀏覽器內(nèi)置了“開發(fā)者工具”。

通常，開發(fā)者傾向于使用 Chrome 或 Firefox 進(jìn)行開發(fā)，因?yàn)樗鼈冇凶詈玫拈_發(fā)者工具。一些其它的瀏覽器也提供開發(fā)者工具，有時(shí)還具有一些特殊的功能，通常它們都是在“追趕” Chrome 或 Firefox。

所以大多數(shù)人都有“最喜歡”的瀏覽器，當(dāng)遇到某個(gè)瀏覽器獨(dú)有的問(wèn)題的時(shí)候，人們就會(huì)切換到其它的瀏覽器。

開發(fā)者工具很強(qiáng)大，功能豐富。首先，我們將學(xué)習(xí)如何打開它們，查找錯(cuò)誤和運(yùn)行 JavaScript 命令。

Google Chrome

打開網(wǎng)頁(yè) bug.html。

在這個(gè)頁(yè)面的 JavaScript 代碼中有一個(gè)錯(cuò)誤。一般的訪問(wèn)者看不到這個(gè)錯(cuò)誤，所以讓我們打開開發(fā)者工具看看吧。

按下 F12 鍵，如果你使用 Mac，試試 Cmd+Opt+J。

默認(rèn)情況下，開發(fā)者工具會(huì)被在 Console 標(biāo)簽頁(yè)中打開。

就像這樣：

具體什么樣，要看你的 Chrome 版本。它隨著時(shí)間一直在變，但是都很類似。

• 在這我們能看到紅色的錯(cuò)誤提示信息。這個(gè)場(chǎng)景中，腳本里有一個(gè)未知的 “l(fā)alala” 命令。

• 在右邊，有個(gè)可點(diǎn)擊的鏈接 bug.html:12。這個(gè)鏈接會(huì)鏈接到錯(cuò)誤發(fā)生的行號(hào)。

在錯(cuò)誤信息的下方，有個(gè)?>?標(biāo)志。它代表“命令行”，在“命令行”中，我們可以輸入 JavaScript 命令，按下 Enter 來(lái)執(zhí)行。

現(xiàn)在，我們能看到錯(cuò)誤就夠了。稍后，在?在 Chrome 中調(diào)試?一節(jié)中，我們會(huì)重新更加深入地學(xué)習(xí)開發(fā)者工具。

多行輸入

通常，當(dāng)我們向控制臺(tái)輸入一行代碼后，按 Enter，這行代碼就會(huì)立即執(zhí)行。

如果想要插入多行代碼，請(qǐng)按 Shift+Enter 來(lái)進(jìn)行換行。這樣就可以輸入長(zhǎng)片段的 JavaScript 代碼了。

Firefox、Edge 和其它瀏覽器

大多數(shù)其它的瀏覽器都是通過(guò) F12 來(lái)打開開發(fā)者工具。

它們的外觀和感覺(jué)都非常相似，一旦你學(xué)會(huì)了它們中的一個(gè)（可以先嘗試 Chrome），其它的也就很快就可以熟悉了。

Safari

Safari（Mac 系統(tǒng)中的瀏覽器，Windows 和 Linux 系統(tǒng)不支持）有一點(diǎn)點(diǎn)不同。我們需要先開啟“開發(fā)菜單”。

打開“偏好設(shè)置”，選擇“高級(jí)”選項(xiàng)。選中最下方的那個(gè)選擇框：

現(xiàn)在，我們通過(guò) Cmd+Opt+C 就能打開或關(guān)閉控制臺(tái)了。另外注意，有一個(gè)名字為“開發(fā)”的頂部菜單出現(xiàn)了。它有很多命令和選項(xiàng)。

總結(jié)

• 開發(fā)者工具允許我們查看錯(cuò)誤、執(zhí)行命令、檢查變量等。

• 在 Windows 系統(tǒng)中，可以通過(guò) F12 開啟開發(fā)者工具。Mac 系統(tǒng)下，Chrome 需要使用 Cmd+Opt+J，Safari 使用 Cmd+Opt+C（需要提前開啟）。

現(xiàn)在我們的環(huán)境準(zhǔn)備好了。下一章，我們將正式開始學(xué)習(xí) JavaScript。

本文完?