Javascript的层次

最近我正在写一个教案，教一个小组关于Gatsby的数据显示。我的目标是分解主题，并回答参与者可能提出的所有低级问题。在这个过程中，我注意到javascript的生态系统有很多层！弄清楚是什么技术负责每一个特性对于调试和增长您的知识是非常有帮助的。因此，不用再多说了，我给你介绍了javascript的各个层次！

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

Javascript是您的基础语言。但是，它是基于ECMAScript的，ECMAScript是脚本语言的标准。ECMAScript有不同的版本，就像编程语言一样。了解ECMAScript规范更改时会发生什么非常重要。

在某种程度上，ECMAScript可以告诉您Javascript可以做什么。它的实际功能取决于解释它的Javascript引擎。浏览器中存在Javascript引擎。浏览器需要支持该标准才能使用新功能。

目前，广泛支持的ECMAScript版本是ES6。ES6标志着标准的重大变化，引入了let和const等概念

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

销毁结构分配是ES6中引入的内容之一。

如果您希望使用新引入的特性，那么了解ECMAScript在Javascript生态系统中的位置尤其有用。

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

前端开发中比较混乱的一个方面与Node有关。当你在本地开发的时候，你的计算机可能会指向一个版本的Node。Node实际上被绑定为包含两个不同的东西。Node.js运行时和npm包管理器。因此，您可能正在使用一个、两个或两者都不使用。

可以使用npm安装外部项目依赖项。这并不一定意味着你在使用Node.js运行时。

如前所述，Javascript由浏览器解释。Node.js运行时是解释器和环境的组合，允许您将Javascript用作通用编程语言，即在浏览器之外。它实际上基于Chrome使用的Javascript解释器。然而，这意味着如果你正在构建一个类似React的应用程序，Node.js运行时没有任何影响。你真正感兴趣的是不同的浏览器如何解释你的代码。

JSX

因此，解释代码的方式和支持哪些功能都有不同的层次。然而，这只是影响代码实际语法的方式之一。现代Javascript的一个复杂性是核心框架正在使用中。React是一个特别流行的框架。在React中，您可以使用JSX。JSX是一种Javascript语法，它允许您在React组件中直接使用HTML标记。这意味着您使用的是Javascript语言和您希望在HTML文件中看到的标记的组合。

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

JSX的语法规则和特性与Javascript语言不同。关于函数范围括号和括号的期望可能看起来不太熟悉。认识到这是JSX强制执行的一条规则将有助于提醒您为什么它与您的Javascript知识冲突。

框架

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

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

现代Javascript的一个复杂性是核心框架正在使用中…听起来熟悉吗？这意味着你有一些框架，比如Gatsby，是基于React的。了解Gatsby在做什么，而不是React提供的功能，可能是一个挑战。虽然这不太可能影响您的语法，但它会影响您在各种情况下的行为。例如，Gatsby将GraphQL查询的结果直接传递给组件props。试着在React中这样做，你会想你哪里做错了。

使用所有工具编写Javascript应用程序非常容易。然而，当你深入到更复杂的特性和代码中时，你很容易迷失方向。了解堆栈的哪一层会给您带来问题，或者可能提供一个更简单的解决方案，是非常有用的。