Salesforce入门教程（中文）-023 理解浏览器中的JavaScript

1.理解浏览器中的JavaScript
JavaScript运行时引擎在许多不同的地方运行，但它最常被托管在浏览器中。
那么，JavaScript和浏览器之间有什么区别呢？

浏览器的主要工作是充当网络服务器的客户端。
它通过互联网请求资源，使用几种协议中的一种（通常是HTTP/HTTPS）。
一旦服务器将这些资源传给它，浏览器就需要对它们进行处理。
至少要将HTML和CSS渲染成一个页面。
当一个资源包含一些JavaScript时，浏览器就会接触到JavaScript运行时引擎来解析、评估和执行这些代码。

同样地，当一个脚本在执行时，它也可以回到浏览器中去做一些事情，比如修改网页，与本地环境互动，或者与其他网络资源互动。
为了使这些互动发挥作用，浏览器会浮现出一些API。
事实上，人们所认为的客户端JavaScript的很大一部分实际上就是这些API。

2.Web API

有API可以与浏览器进行交互，这并不令人惊讶。
就像任何其他编程语言或平台表面的API与它所运行的环境进行互动一样，你的浏览器也是如此。

虽然超过一半的浏览器互联网流量来自谷歌浏览器，但大约还有30%的流量来自其他五个浏览器。
这凸显了这些API的网络标准的重要性，这样一来，JavaScript就可以一次写好，在任何地方运行。

将网络API添加到图片中

之前，我们创建了一个JavaScript运行时的图片。

请求在堆栈中使用单个线程执行。
一个请求会保留该线程，直到它完成该请求的所有同步逻辑的执行。
新的请求被排在队列中，直到线程准备好。
当下一个排队的请求可用时，事件循环将其移入堆栈。

我们现在要把网络API添加到我们的JavaScript图片中。
这些API扩展了核心的JavaScript语言。
它们浮现出界面，执行对现代网络的用户体验至关重要的许多工作。例如，浏览器API可以。

与浏览器中呈现的当前页面的结构进行交互（文档对象模型或DOM API

在不离开当前页面的情况下向服务器执行异步请求（Fetch API）。
与音频、视频和图形互动
与浮现在浏览器上的设备功能互动（地理位置、设备方向、客户端数据存储）。
大多数情况下，是这些API将新的请求添加到队列中。

我们避开了JavaScript生态系统中的一个重要部分：
第三方API和抽象或扩展浏览器功能的JavaScript库。
这些在JavaScript如何被广泛使用方面起着重要作用。

就我们在Salesforce中的目的而言，我们涵盖了我们的JavaScript框架：Lightning组件框架。
具体来说，在谈论Lightning平台上的JavaScript时，本模块涉及Lightning Web组件的开发模式。

举个例子:
你在一个带有表单的网页上有一个笔记列表。
你在表单上填写了一些字段，点击一个按钮来保存这些数据，然后一个新的项目被添加到列表中。为了好玩，我们还可以说，你将在本地缓存这个新记录，以加快未来涉及该记录的请求。

这个简单的用例将与下列浏览器API进行交互

Fetch API (保存记录)
DOM API（向HTML列表添加一个新项目
客户端数据存储（在本地缓存数据）。
让我们深入了解一下DOM API，因为它代表了用户在JavaScript中看到的东西。

3.文档对象模型Document Object Model:DOM
DOM：你在JavaScript上的页面

当一个页面被请求，然后被浏览器接收时，浏览器会解析HTML并创建该页面的描述或模型。
这个模型被用来在浏览器的视口中绘制页面。
它也通过DOM浮现给JavaScript。

把DOM想象成一棵树。
它从浏览器的显示功能的根部开始：窗口。在那里，页面被封装在window.document中，页面的主体在window.document.body中。
然后，树状结构向外扩散到页面上所代表的每一个内容。
大多数网页都有一个非常复杂的树，有许多节点，最后以叶子节点作为层次结构中最细小的部分结束。