JavaScript 簡(jiǎn)介

讓我們來(lái)看看 JavaScript 有什么特別之處，我們可以用它實(shí)現(xiàn)什么，以及哪些其他技術(shù)可以與其搭配產(chǎn)生奇妙的效果。

什么是 JavaScript？

JavaScript 最初被創(chuàng)建的目的是“使網(wǎng)頁(yè)更生動(dòng)”。

這種編程語(yǔ)言寫(xiě)出來(lái)的程序被稱為 腳本。它們可以被直接寫(xiě)在網(wǎng)頁(yè)的 HTML 中，在頁(yè)面加載的時(shí)候自動(dòng)執(zhí)行。

腳本被以純文本的形式提供和執(zhí)行。它們不需要特殊的準(zhǔn)備或編譯即可運(yùn)行。

這方面，JavaScript 和 Java 有很大的區(qū)別。

為什么叫 JavaScript？
JavaScript 在剛誕生的時(shí)候，它的名字叫 “LiveScript”。但是因?yàn)楫?dāng)時(shí) Java 很流行，所以決定將一種新語(yǔ)言定位為 Java 的“弟弟”會(huì)有助于它的流行。
隨著 JavaScript 的發(fā)展，它已經(jīng)成為了一門(mén)完全獨(dú)立的語(yǔ)言，并且也擁有了自己的語(yǔ)言規(guī)范 ECMAScript。現(xiàn)在，它和 Java 之間沒(méi)有任何關(guān)系。

如今，JavaScript 不僅可以在瀏覽器中執(zhí)行，也可以在服務(wù)端執(zhí)行，甚至可以在任意搭載了 JavaScript 引擎 的設(shè)備中執(zhí)行。

瀏覽器中嵌入了 JavaScript 引擎，有時(shí)也稱作“JavaScript 虛擬機(jī)”。

不同的引擎有不同的“代號(hào)”，例如：

• V8 —— Chrome、Opera 和 Edge 中的 JavaScript 引擎。
• SpiderMonkey —— Firefox 中的 JavaScript 引擎。
• ……還有其他一些代號(hào)，像 “Chakra” 用于 IE，“JavaScriptCore”、“Nitro” 和 “SquirrelFish” 用于 Safari，等等。

上面這些術(shù)語(yǔ)很容易記住，因?yàn)樗鼈兘?jīng)常出現(xiàn)在開(kāi)發(fā)者的文章中。我們也會(huì)用到這些術(shù)語(yǔ)。例如，如果“V8 支持某個(gè)功能”，那么我們可以認(rèn)為這個(gè)功能大概能在 Chrome、Opera 和 Edge 中正常運(yùn)行。

引擎是如何工作的？
引擎很復(fù)雜，但是基本原理很簡(jiǎn)單。

1. 引擎（如果是瀏覽器，則引擎被嵌入在其中）讀取（“解析”）腳本。
2. 然后，引擎將腳本轉(zhuǎn)化（“編譯”）為機(jī)器語(yǔ)言。
3. 然后，機(jī)器代碼快速地執(zhí)行。

引擎會(huì)對(duì)流程中的每個(gè)階段都進(jìn)行優(yōu)化。它甚至可以在編譯的腳本運(yùn)行時(shí)監(jiān)視它，分析流經(jīng)該腳本的數(shù)據(jù)，并根據(jù)獲得的信息進(jìn)一步優(yōu)化機(jī)器代碼。

瀏覽器中的 JavaScript 能做什么？

現(xiàn)代的 JavaScript 是一種“安全的”編程語(yǔ)言。它不提供對(duì)內(nèi)存或 CPU 的底層訪問(wèn)，因?yàn)樗畛跏菫闉g覽器創(chuàng)建的，不需要這些功能。

JavaScript 的能力很大程度上取決于它運(yùn)行的環(huán)境。例如，Node.js 支持允許 JavaScript 讀取/寫(xiě)入任意文件，執(zhí)行網(wǎng)絡(luò)請(qǐng)求等的函數(shù)。

瀏覽器中的 JavaScript 可以做與網(wǎng)頁(yè)操作、用戶交互和 Web 服務(wù)器相關(guān)的所有事情。

例如，瀏覽器中的 JavaScript 可以做下面這些事：

• 在網(wǎng)頁(yè)中添加新的 HTML，修改網(wǎng)頁(yè)已有內(nèi)容和網(wǎng)頁(yè)的樣式。
• 響應(yīng)用戶的行為，響應(yīng)鼠標(biāo)的點(diǎn)擊，指針的移動(dòng)，按鍵的按動(dòng)。
• 向遠(yuǎn)程服務(wù)器發(fā)送網(wǎng)絡(luò)請(qǐng)求，下載和上傳文件（所謂的 AJAX 和 COMET 技術(shù)）。
• 獲取或設(shè)置 cookie，向訪問(wèn)者提出問(wèn)題或發(fā)送消息。
• 記住客戶端的數(shù)據(jù)（“本地存儲(chǔ)”）。

瀏覽器中的 JavaScript 不能做什么？

為了用戶的（信息）安全，在瀏覽器中的 JavaScript 的能力是受限的。目的是防止惡意網(wǎng)頁(yè)獲取用戶私人信息或損害用戶數(shù)據(jù)。

此類(lèi)限制的例子包括：

• 網(wǎng)頁(yè)中的 JavaScript 不能讀、寫(xiě)、復(fù)制和執(zhí)行硬盤(pán)上的任意文件。它沒(méi)有直接訪問(wèn)操作系統(tǒng)的功能?，F(xiàn)代瀏覽器允許 JavaScript 做一些文件相關(guān)的操作，但是這個(gè)操作是受到限制的。僅當(dāng)用戶做出特定的行為，JavaScript 才能操作這個(gè)文件。例如，用戶把文件“拖放”到瀏覽器中，或者通過(guò) ?<input>? 標(biāo)簽選擇了文件。有很多與相機(jī)/麥克風(fēng)和其它設(shè)備進(jìn)行交互的方式，但是這些都需要獲得用戶的明確許可。因此，啟用了 JavaScript 的網(wǎng)頁(yè)應(yīng)該不會(huì)偷偷地啟動(dòng)網(wǎng)絡(luò)攝像頭觀察你，并把你的信息發(fā)送到 美國(guó)國(guó)家安全局。
• 不同的標(biāo)簽頁(yè)/窗口之間通常互不了解。有時(shí)候，也會(huì)有一些聯(lián)系，例如一個(gè)標(biāo)簽頁(yè)通過(guò) JavaScript 打開(kāi)的另外一個(gè)標(biāo)簽頁(yè)。但即使在這種情況下，如果兩個(gè)標(biāo)簽頁(yè)打開(kāi)的不是同一個(gè)網(wǎng)站（域名、協(xié)議或者端口任一不相同的網(wǎng)站），它們都不能相互通信。這就是所謂的“同源策略”。為了解決“同源策略”問(wèn)題，兩個(gè)標(biāo)簽頁(yè)必須 都 包含一些處理這個(gè)問(wèn)題的特定的 JavaScript 代碼，并均允許數(shù)據(jù)交換。本教程會(huì)講到這部分相關(guān)的知識(shí)。這個(gè)限制也是為了用戶的信息安全。例如，用戶打開(kāi)的 ?http://anysite.com? 網(wǎng)頁(yè)必須不能訪問(wèn) ?http://gmail.com?（另外一個(gè)標(biāo)簽頁(yè)打開(kāi)的網(wǎng)頁(yè)）也不能從那里竊取信息。
• JavaScript 可以輕松地通過(guò)互聯(lián)網(wǎng)與當(dāng)前頁(yè)面所在的服務(wù)器進(jìn)行通信。但是從其他網(wǎng)站/域的服務(wù)器中接收數(shù)據(jù)的能力被削弱了。盡管可以，但是需要來(lái)自遠(yuǎn)程服務(wù)器的明確協(xié)議（在 HTTP header 中）。這也是為了用戶的信息安全。

如果在瀏覽器環(huán)境外（例如在服務(wù)器上）使用 JavaScript，則不存在此類(lèi)限制?，F(xiàn)代瀏覽器還允許安裝可能會(huì)要求擴(kuò)展權(quán)限的插件/擴(kuò)展。

是什么使得 JavaScript 與眾不同？

至少有 3 件事值得一提：

• 與 HTML/CSS 完全集成。
• 簡(jiǎn)單的事，簡(jiǎn)單地完成。
• 被所有的主流瀏覽器支持，并且默認(rèn)開(kāi)啟。

JavaScript 是將這三件事結(jié)合在一起的唯一的瀏覽器技術(shù)。

這就是為什么 JavaScript 與眾不同。這也是為什么它是用于創(chuàng)建瀏覽器界面的使用最廣泛的工具。

此外，JavaScript 還可用于創(chuàng)建服務(wù)器和移動(dòng)端應(yīng)用程序等。

JavaScript “上層”語(yǔ)言

不同的人想要不同的功能。JavaScript 的語(yǔ)法也不能滿足所有人的需求。

這是正常的，因?yàn)槊總€(gè)人的項(xiàng)目和需求都不一樣。

因此，最近出現(xiàn)了許多新語(yǔ)言，這些語(yǔ)言在瀏覽器中執(zhí)行之前，都會(huì)被 編譯（轉(zhuǎn)化）成 JavaScript。

現(xiàn)代化的工具使得編譯速度非?？烨彝该鳎瑢?shí)際上允許開(kāi)發(fā)者使用另一種語(yǔ)言編寫(xiě)代碼并會(huì)將其“自動(dòng)轉(zhuǎn)換”為 JavaScript。

此類(lèi)語(yǔ)言的示例有：

• CoffeeScript 是 JavaScript 的一種語(yǔ)法糖。它引入了更加簡(jiǎn)短的語(yǔ)法，使我們可以編寫(xiě)更清晰簡(jiǎn)潔的代碼。通常，Ruby 開(kāi)發(fā)者喜歡它。
• TypeScript 專注于添加“嚴(yán)格的數(shù)據(jù)類(lèi)型”以簡(jiǎn)化開(kāi)發(fā)，以更好地支持復(fù)雜系統(tǒng)的開(kāi)發(fā)。由微軟開(kāi)發(fā)。
• Flow 也添加了數(shù)據(jù)類(lèi)型，但是以一種不同的方式。由 Facebook 開(kāi)發(fā)。
• Dart 是一門(mén)獨(dú)立的語(yǔ)言。它擁有自己的引擎，該引擎可以在非瀏覽器環(huán)境中運(yùn)行（例如手機(jī)應(yīng)用），它也可以被編譯成 JavaScript。由 Google 開(kāi)發(fā)。
• Brython 是一個(gè) Python 到 JavaScript 的轉(zhuǎn)譯器，讓我們可以在不使用 JavaScript 的情況下，以純 Python 編寫(xiě)應(yīng)用程序。
• Kotlin 是一個(gè)現(xiàn)代、簡(jiǎn)潔且安全的編程語(yǔ)言，編寫(xiě)出的應(yīng)用程序可以在瀏覽器和 Node 環(huán)境中運(yùn)行。

這樣的語(yǔ)言還有很多。當(dāng)然，即使我們?cè)谑褂么祟?lèi)編譯語(yǔ)言，我們也需要了解 JavaScript。因?yàn)榱私?JavaScript 才能讓我們真正明白我們?cè)谧鍪裁础?br>

Mock 工具

一個(gè)好用的開(kāi)源接口 Mock 工具：https://github.com/eolinker/eoapi

除了 Mock 功能，還集合了 API 管理和測(cè)試功能，還可以通過(guò)插件廣場(chǎng)幫助你將 API 發(fā)布到各個(gè)應(yīng)用平臺(tái)，比如發(fā)布到網(wǎng)關(guān)上完成 API 上線，或者和低代碼平臺(tái)結(jié)合，將 API 快速變成低代碼平臺(tái)中可使用的組件等。

總結(jié)

• JavaScript 最開(kāi)始是專門(mén)為瀏覽器設(shè)計(jì)的一門(mén)語(yǔ)言，但是現(xiàn)在也被用于很多其他的環(huán)境。
• JavaScript 作為被應(yīng)用最廣泛的瀏覽器語(yǔ)言，且與 HTML/CSS 完全集成，具有獨(dú)特的地位。
• 有很多其他的語(yǔ)言可以被“編譯”成 JavaScript，這些語(yǔ)言還提供了更多的功能。建議最好了解一下這些語(yǔ)言，至少在掌握了 JavaScript 之后大致的了解一下。