最近我正在寫一個教案，教一個小組關(guān)于Gatsby的數(shù)據(jù)顯示。我的目標(biāo)是分解主題，并回答參與者可能提出的所有低級問題。在這個過程中，我注意到j(luò)avascript的生態(tài)系統(tǒng)有很多層！弄清楚是什么技術(shù)負(fù)責(zé)每一個特性對于調(diào)試和增長您的知識是非常有幫助的。因此，不用再多說了，我給你介紹了javascript的各個層次！

Javascript…還是ECMAScript？ES6？怎么回事？

Javascript是您的基礎(chǔ)語言。但是，它是基于ECMAScript的，ECMAScript是腳本語言的標(biāo)準(zhǔn)。ECMAScript有不同的版本，就像編程語言一樣。了解ECMAScript規(guī)范更改時會發(fā)生什么非常重要。

在某種程度上，ECMAScript可以告訴您Javascript可以做什么。它的實際功能取決于解釋它的Javascript引擎。瀏覽器中存在Javascript引擎。瀏覽器需要支持該標(biāo)準(zhǔn)才能使用新功能。

目前，廣泛支持的ECMAScript版本是ES6。ES6標(biāo)志著標(biāo)準(zhǔn)的重大變化，引入了let和const等概念

character.map(function ( [first, last] ) {
    return first + last
});

銷毀結(jié)構(gòu)分配是ES6中引入的內(nèi)容之一。

如果您希望使用新引入的特性，那么了解ECMAScript在Javascript生態(tài)系統(tǒng)中的位置尤其有用。

Node-v是我的Javascript版本，不是嗎？

前端開發(fā)中比較混亂的一個方面與Node有關(guān)。當(dāng)你在本地開發(fā)的時候，你的計算機(jī)可能會指向一個版本的Node。Node實際上被綁定為包含兩個不同的東西。Node.js運(yùn)行時和npm包管理器。因此，您可能正在使用一個、兩個或兩者都不使用。

可以使用npm安裝外部項目依賴項。這并不一定意味著你在使用Node.js運(yùn)行時。

如前所述，Javascript由瀏覽器解釋。Node.js運(yùn)行時是解釋器和環(huán)境的組合，允許您將Javascript用作通用編程語言，即在瀏覽器之外。它實際上基于Chrome使用的Javascript解釋器。然而，這意味著如果你正在構(gòu)建一個類似React的應(yīng)用程序，Node.js運(yùn)行時沒有任何影響。你真正感興趣的是不同的瀏覽器如何解釋你的代碼。

JSX

因此，解釋代碼的方式和支持哪些功能都有不同的層次。然而，這只是影響代碼實際語法的方式之一?，F(xiàn)代Javascript的一個復(fù)雜性是核心框架正在使用中。React是一個特別流行的框架。在React中，您可以使用JSX。JSX是一種Javascript語法，它允許您在React組件中直接使用HTML標(biāo)記。這意味著您使用的是Javascript語言和您希望在HTML文件中看到的標(biāo)記的組合。

const IndexPage = () => (
    <Layout>
        <div>Your code is going to go here!</div>
    </Layout>
)

JSX的語法規(guī)則和特性與Javascript語言不同。關(guān)于函數(shù)范圍括號和括號的期望可能看起來不太熟悉。認(rèn)識到這是JSX強(qiáng)制執(zhí)行的一條規(guī)則將有助于提醒您為什么它與您的Javascript知識沖突。

框架

Javascript的另一層是由于您使用的框架而提供的特性。例如，在React中，你可以處理傳球道具。道具是框架的一個概念。

function Introduction(props) {
  return <h1>Welcome, {props.name}</h1>
}

現(xiàn)代Javascript的一個復(fù)雜性是核心框架正在使用中…聽起來熟悉嗎？這意味著你有一些框架，比如Gatsby，是基于React的。了解Gatsby在做什么，而不是React提供的功能，可能是一個挑戰(zhàn)。雖然這不太可能影響您的語法，但它會影響您在各種情況下的行為。例如，Gatsby將GraphQL查詢的結(jié)果直接傳遞給組件props。試著在React中這樣做，你會想你哪里做錯了。

使用所有工具編寫Javascript應(yīng)用程序非常容易。然而，當(dāng)你深入到更復(fù)雜的特性和代碼中時，你很容易迷失方向。了解堆棧的哪一層會給您帶來問題，或者可能提供一個更簡單的解決方案，是非常有用的。