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中。
然后，树状结构向外扩散到页面上所代表的每一个内容。
大多数网页都有一个非常复杂的树，有许多节点，最后以叶子节点作为层次结构中最细小的部分结束。
作为一个API，DOM非常庞大，可以让你触摸到这棵树的每一部分。
它也有许多方法来优化与DOM的互动。
看一下jsbin.com上的这个简单的例子吧。
它包括:
一个输入字段
一个添加项目的按钮
一个无序的列表
每次你点击按钮，代码就会进入输入框，读取其值，将其转换为文本节点，创建一个新的li元素，将文本节点插入到li节点中，最后将新的li-文本节点粘到ul中。
检查文本输入中是否有数据
如果没有，不要向列表中添加新的li
一旦添加了新的li，清除文本输入。
如果悬念让你心烦意乱，请看看修改后的代码。
正如你所看到的，仅仅是这个简单的例子就需要开发者执行一堆手工步骤。
而且它甚至没有在服务器上存储任何数据，或以任何其他方式与服务器互动。
由于这个原因，JavaScript库（reactjs，jQuery）和框架（Angular，vuejs）已经成为互动页面的标准。
这些框架抽象和简化了DOM交互，并经常自动应用缺失的功能。
Lightning组件框架也不例外。
阴影DOM的封装
DOM的API是丰富而灵活的。
使用相对简单的JavaScript，很容易对UI的外观、行为和调用的动作进行修改。
但也有一个隐患。
DOM模型使其难以封装用户界面的各个部分，并保护它们免受意外（或有目的的恶意）改变。
出于这个原因，Shadow DOM标准被开发出来。
Shadow DOM在UI功能的特定部分周围创建了一个边界。
这个边界可以防止父方改变子方的元素或CSS。
它还迫使跨越边界传播的任何事件重新定位它们的目标，防止父代越过阴影DOM边界。
Lightning组件框架:Aura组件和Lightning Web组件
从19年春季版（API版本45.0）开始，你可以使用两种编程模型构建Lightning组件：Lightning Web组件模型和原始Aura组件模型。
Lightning Web组件是使用HTML和现代JavaScript构建的自定义HTML元素。
Lightning Web组件和Aura组件可以在一个页面上共存并相互操作。
本内容仅涉及Lightning Web组件。
Lightning网络组件和DOM
从现在开始，每个单元都会有一个类似的章节，其中有一些例子来说明与Lightning Web Components的联系。
如果你想学以致用，现在是开始学习Trailhead上Lightning Web Components基础模块的好时机。
自动DOM更新
Lightning组件的基本价值在于建立一个由Salesforce数据驱动的自定义用户界面。
这与DOM操作有关，因为DOM本身是由Salesforce数据驱动的。
这个组件以其最简单的形式展示了这一原则。
// JavaScript Module: demo.js
import { LightningElement } from 'lwc';
export default class Demo extends LightningElement {
text = 'This text came from a JS prop';
}
<!-- HTML Template: demo.html -->
<template>
<lightning-card title="Basic DOM Example" icon-name="utility:hierarchy">
<div class="slds-card__body slds-card__body-inner">
<p>
<lightning-formatted-text value={text}></lightning-formatted-text>
</p>
</div>
</lightning-card>
</template>
首先是一些背景。
每个Lightning网络组件都需要一个JavaScript模块。
如果该组件包含任何要展示给用户的元素，也需要一个HTML模板。
大多数组件包含一个JavaScript和一个HTML文件，被称为捆绑包。
Lightning Web组件可以毫不费力地将数据渲染成用户界面。
例如，上面的代码使用JavaScript属性text来存储一个硬编码的字符串。
在<lightning-formatted-text>标签中，value属性的text属性被绑定到JavaScript text属性上，在用户界面中呈现数据。
但是，如果你想让用户界面在用户与之互动时发生变化呢？
我们可以扩展这个例子来做到这一点。
// JavaScript Module demo2.js
import { LightningElement } from 'lwc';
export default class Demo2 extends LightningElement {
text = '';
handleChange(event){
this.text = event.target.value;
}
}
<!-- HTML Template demo2.html -->
<template>
<lightning-card title="Basic DOM Example" icon-name="utility:hierarchy">
<div class="slds-card__body slds-card__body-inner">
<p>
<lightning-formatted-text value={text}></lightning-formatted-text>
</p>
<p>
<lightning-input οnchange={handleChange} label="Input Text" value={text}></lightning-input>
</p>
</div>
</lightning-card>
</template>
在Lightning网络组件中，JavaScript类属性是反应性的。
这意味着当一个属性的值被分配（或重新分配），并且该属性在模板中被使用时，组件的DOM会重新更新并显示新的值。
在模板中，我们添加了一个<lightning-input>。
虽然绑定文本属性是显示数据的关键，但注意到onchange属性。
现在被添加到JavaScript类中的handleChange函数是由变化事件触发的。
用户对值的每一次修改都会更新文本的值。
当文本被更新时，DOM也被更新。
虽然这是一个特意设计的例子，但它说明了Lightning Web Components是如何浮出水面的，使隐式DOM变化很容易作为一个开发者来实现。
明确的DOM操作
在构建Lightning Web组件时，手动操作DOM不应该是你的首要策略，但更复杂的组件可能需要你这样做。这是一个更高级的话题，但在签署DOM之前，值得从表面上了解一下这是如何工作的。
条件性渲染
在编写Lightning Web组件时，你可以明确地定义用户界面的某些部分，只有在满足某些条件时才会被渲染。你可以通过在嵌套的模板标签中添加if:true或if:false指令来实现。
//conditionalButton.js
import { LightningElement } from 'lwc';
export default class ConditionalButton extends LightningElement {
show = true;
handleClick(){
this.show = !this.show;
}
}
//conditionalButton.html
<template>
<lightning-card title="Conditional Rendering with Button" icon-name="utility:hierarchy">
<div class="slds-card__body slds-card__body-inner">
<p>
<template if:true={show}>
Peek-a-boo!
</template>
<template if:false={show}>
I'm hiding!
</template>
</p>
<p>
<lightning-button οnclick={handleClick} variant="neutral" label="Switch"></lightning-button>
</p>
</div>
</lightning-card>
</template>
在这个代码示例中，当show属性的值为true时，文本Peek-a-boo！出现。
当show被设置为false时，文本I'm hiding！就会出现。
点击按钮可以切换显示属性的值。
手动操作DOM的其他方法
在某些情况下，使用display CSS样式来操纵DOM元素的显示是可以的。
虽然这种方法在Lightning Web组件中照常工作，但它超出了这个特定模块的范围。
Resources
- Trailhead Module: Lightning Web Components Basic
- Lightning Web Components Developer Guide: HTML Templates
- Lightning Web Components Developer Guide: HTML Template Directives
- Lightning Web Components Developer Guide: Render DOM Elements Conditionally
- Lightning Web Components Developer Guide: DOM Access Containment
- Lightning Web Components Developer Guide: Shadow DOM
- UI Frameworks:
- Third party web APIs
4169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
