可导入内容:扩展组件的功能

[00:00:00]大家好，欢迎来到另一场Xforce数据峰会的演讲。今天，我们请到了Barry Hughes，他在英国一家名为Blue Wave Group的Salesforce咨询公司工作，他们是Salesforce的白金合作伙伴，他将谈谈如何导入JavaScript来扩展您的Lightning组件。这是巴里。

[00:00:41]非常感谢大家。今天很高兴和大家交谈。向凯西，莱纳德，保罗和整合公司致敬。感谢组织这次伟大的活动。今天我将用半小时的时间讲导入JavaScript。你拥有JavaScript, JavaScript已经存在了。

[00:01:00]看看导入如何帮助您的闪电Web组件。这是一个技术会议，但是大多数人可能会对Lightning Web Components的一般方法、它们的优点以及我们如何扩展它们感兴趣。在进入内容之前，先给我简单介绍一下。

[00:01:19]我在一家叫蓝波集团的公司工作。我个人住在爱尔兰，但他们住在英国。我们的手指在很多云里。如你所见，我们是白金合作伙伴。我们的人不仅是顾问，也是导师。就我自己而言，我是一名应用程序架构师。

[00:01:36]我在Salesforce指导了很长一段时间。我不像以前那样经常做了。我是复数视界的作者，我马上会回到这个话题。我还组织了一个位于爱尔兰都柏林的开发小组，到现在已经有8年了。

[00:01:48]正如我所说，我是Pluralsight的作者，所以如果你想了解更多关于Lightning Web Components和Salesforce上的很多东西，这里有大量的课程，我想有50种不同的，我想叫，详细的课程和更多的官方课程，除了Salesforce的各个方面，包括一个关于Lightning Web Components的免费课程。其中一个免费的是我自己的。现在是2020年4月，PluralSight正在世界各地免费提供服务，即使你不是用户。

[00:02:16]但如果你不是订户，当你收听这段录音时他们没有免费的，这门课程将一直是免费的。因此，您可以学习如何创建组件原型的课程，并学习如何安装并运行Lightning Web Component套件的完整示例。

[00:02:31]所以今天我想讲的是照明Web组件。这是一个有点出乎意料的主题，因为我们从2016年开始就在开发Aura组件。我们在2014年首次引入了基于组件的开发和Salesforce的概念。

[00:02:45]花了几年时间Aura的组件才完全可用。Aura组件的主要问题以及我们转移到Lightning Web components的主要原因是，Aura和当时的许多其他平台、Angular平台以及其他一些平台一样，都存在这样的问题:当它们编写代码时，必须编译成我们所说的纯JavaScript才能在浏览器上运行。

[00:03:07]大约两年前，谷歌和其他一些公司决定采用一种新的W3C规范，该规范允许我们在这些平台上运行大量在浏览器本地可用的漂亮代码。

[00:03:18]于是网络组件诞生了。Web组件不是Salesforce的东西，它是一个通用的Web东西，但Salesforce已经接受了它。现在你可以在Lightning平台上创建web组件了。我们称之为闪电Web组件。但如果你熟悉其他平台的股票，如果你在Angular, Angular的新部分，React, Vue.js, Ionic，还有很多其他的。

[00:03:40]如果你在这些框架上开发网络组件，你就可以在Salesforce中开发网络组件。只是有点不同。这就意味着，如果你要雇佣Salesforce的开发人员，那么他们的数量可能比你想象的还要多。

[00:03:53]所以闪电网络组件在2018年12月宣布，在纽约的世界巡回演出也出乎意料。人们必须很快了解这个东西，但令人惊讶的是，它们很快就被接受了，人们在第二年夏天就开始使用它们，这与Aura的首次亮相相比非常快。

[00:04:19]在Blue Wave Group，我们在2019年6月部署了我们的第一个Lightning Web组件，从那时起我们就一直在开发几乎全部的Lightning Web组件，尽管有时我们因为不同的原因不得不制作Aura。

[00:04:30]但是Lightning Web Components平台的使用和改进已经取得了相当大的进展，以至于今年6月即将推出的TrailheadX是虚拟的。我们期待更多关于Lightning Web Components的消息。

[00:04:43]但它是开源的。我们可以看到这些人是如何在Salesforce中使Lightning Web Component工作的。标准组件是开源的。如果我们看到一个标准组件，比如一个数据表，我们可以取那个源，把它改成我们想要的样子。

[00:04:52]我们也可以使用Lightning Web Component在我们自己的电脑上进行本地开发，而不需要任何组织，你们将在我的演示中看到这一点。这里有很多很棒的资源，不仅仅是在Pluralsight万博手机登录平台上，还有其他平台，在那里你可以获得很多关于如何启动和运行Lightning Web组件的信息。

[00:05:18]因此，大多数开发人员和管理员都做了一个Trailhead介绍自己对Lightning Web Components。他们所做的有点像你们在右边看到的。他们安装VS Code。这是Salesforce历史上第一次我们不能用浏览器做东西，我们必须使用IDE来制作闪电Web组件并编辑它们。

[00:05:41]所以我们使用的是VS Code，这是Salesforce推荐的一个IDE，但还有其他的。在这里，我们正在制作一个非常著名的Lightning Web组件HelloBinding，这是一个示例库和许多Trailheads的一部分，它们将让您学习如何制作这些组件。

[00:05:59]当你用自己的代码制作这些组件时，你会得到一个文件夹，默认情况下里面有三个文件。在本例中，我们得到一个HelloBinding文件夹，一个JavaScript文件，一个HTML文件和一个XML文件。HTML文件实际上是可选的，你不需要它，除非你在浏览器上显示一些东西。

[00:06:07]但JavaScript文件基本上是强制性的，XML文件只是显示JavaScript文件或组件可用的位置。要注意的是，所有文件的名称必须完全相同，包括区分大小写。

[00:06:36]当你创建你的第一个Lightning Web Component时，你会看到一个JavaScript文件，里面已经有两行代码，这是Salesforce开发人员第一个真正的学习曲线。我们要面对的是进口和出口。[00:06:53]对于JavaScript开发人员来说，导入和导出并不是什么新鲜事，尤其是那些使用ES6 JavaScript或更多JavaScript的人，但是我们在这里导入了一些库，让我们可以做我们想做的事情，我们还导出了一个类，以便Salesforce可以将该组件类用于其他地方。

[00:07:12]我们将回过头来看看这些导入和导出是做什么的，但这节课的核心是向Salesforce开发人员描述什么是导入，什么是导出，我们能做什么，我们能导入什么?我们能导入什么，我们如何导入代码?有没有什么东西是我们可以抓住的，很酷的。

[00:07:30]让我们来谈谈基本的JavaScript导入和导出。在左边，我们有一个JavaScript文件。这是用我们的Lightning组件存储的，我马上会给你们展示它的存储位置我会给你们一个演示。我们有一个包含类的JavaScript文件，如果你不习惯ES6，我们可以在JavaScript文件中创建类。

[00:07:52]这个类有一个构造函数类叫做user，我们给它们一个名字和一个年龄。在这个JavaScript文件中，我们还有更多的方法我们可以获取传递给我们的用户对象让我们获得用户的名字和年龄以及控制台日志。没有什么了不起的。

[00:08:06]但是你可以看到，这里有模糊的下划线，出口这个词。现在，这背后的思想是我们现在可以导出JavaScript函数，JavaScript类，甚至JavaScript常量和其他变量。Sp可以被输入到其他地方。这些都是可导出的，我们在函数前面有export在类前面有export default。

[00:08:32]类前面的export default非常酷，因为这意味着我们可以在导入时以稍微不同的方式获取它。在一个JavaScript文件中只能有一个默认导出。在右边，你看到的是实际的导入。我只想往下看我的脸。我们有一个导入，我们从。lib/user/js导入user和其他一些东西

[00:08:58]现在user.js是我们引入的左边文件。你可以看到我们导入了user这个词。该用户实际上获取了导出默认值，因此该用户现在是一个可以访问类的对象。然后，我们将引入印刷名称和印刷年龄。实际上，在printname的情况下，我们给它一个别名printUserName，我们给它这个名字是为了我们所在的特定JavaScript文件main。js。

[00:09:25]然后我们可以创建一个新的用户对象，因为我们已经导入了它。我们创建一个叫Bob的用户，他将是30岁然后我们可以通过导入的JavaScript文件中的方法控制台输出Bob的年龄和名字。

[00:09:41]所以我们可以制作JavaScript文件，我们可以导入这些东西来分隔我们的代码。在Aura中也很相似。我们可以将helper类引入到控制器中，非常相似，只是这个要灵活得多我们可以引入任意多的文件，任意多的方法甚至可以引入它们的一部分，而不是所有的方法。

[00:10:02]再深入一点。我们不只是在平面代码中导入。我们还可以引入可以扩展的类。在这个例子中，在右边，我们扩展了一个类。我们有一个类叫动物。这个动物会有名字和体重，所以我们可以做大象，大猩猩，不管什么情况。

[00:10:22]但在右边，我们引进了那只动物，但我们把它扩展到我们的班级。你可以看到一个类，我们在扩展它。现在我们有了这个类。这是另一个JavaScript文件，我们可以创建一个类叫gorilla，扩展animal，我们可以在这里为gorilla添加自己的方法。

[00:10:39]之后我们可以调用大猩猩，看到这个类的一个新对象，调用一些方法并得到一些返回，这不仅仅是调用大猩猩类内部的方法，它还调用它的父类animal中的后续方法。你懂的。如果你想的话，我们可以导入和导出代码并扩展代码。

[00:11:03]所以在Salesforce中，当我们制作闪电Web组件时，我们可以在不同的地方添加JavaScript。我们可以导入的一些地方有优点也有缺点，但在这门课和这次演讲中，我会向你们展示我们可以在哪里导入。

[00:11:19]例如，我们有几个不同的地方可以使用JavaScript。左边是HelloBinding文件夹。我们添加了一个名为helpers的子文件夹并在它下面添加了一些JavaScript文件。我们在组件本身的根中也有user。js文件。

[00:11:35]所以在右边你可以看到我可以从根目录导入。你可以看到它实际上进入了。user。js。我们也可以从。helpers的user。js中导入，如果你想，你可以有文件夹结构。这一切都是完全可能的。我来给你们展示一下这个动作。

[00:11:55]这是我几分钟前说过的代码，这是我们的JavaScript文件。几分钟前我讲过，我们可以在这里引入代码使用JavaScript文件在根目录，也就是这里。我们也可以用一些代码和辅助类引入它。

[00:12:15]这是一个排序JavaScript文件，它实际上在这里的助手类中。你也可以引入一个静态常数就像我之前说的。这是联系人列表。如果我们想做一些测试，我们也可以把它带进来。这类东西是我们可以加入到代码中的。

[00:12:30]然而，有几件事我们不能做。你可以看到我已经试过一些了。为什么我们不能在LWC目录下创建一个文件夹，我们称它为scripts并在这里添加我们的目录。这在Salesforce是不允许的。我们不允许这样做，JavaScript文件必须存在于文件夹中。

[00:12:51]然而，它本身也可以是另一个组成部分。如果我们向下滚动，你会看到，这里有另一个组件叫做user，另一个闪电Web组件。这个文件只有一个JavaScript文件和一个XML文件。如果我们看一下JavaScript这和我几分钟前展示的JavaScript差不多。

[00:13:08]我们可以通过导入c/user来帮助HelloBinding类，就像这一行。让我们取消注释，以便您可以看到。一旦你引入了c/user，你实际上就引入了那个组件并重用了代码。这为您提供了范围方面的选项，因此您可以为自己的组件保留一个共享的JavaScript文件，而不在其他地方使用它，使其非常封装。

[00:13:34]或者我们可以做一个可重用的JavaScript片段，把它添加到自己的闪电Web组件中。你可以想象一个叫做效用的，不管什么情况，你可以把它带进来。我不需要在实用程序类中引入JavaScript的那些部分。

[00:13:51]正如我所说，这只是一个JavaScript文件，它没有导出功能，也没有你所看到的普通Lightning文件的导入功能。这里不需要照明元素。没有像元素一样导出默认类扩展。这只是我们可以使用的基本JavaScript。如果我们看一下这个类的实际情况

[00:14:15]我们实际上是在本地web开发服务器上启动这个东西。我来给大家演示一下这是怎么做的。Visual Studio Code，我们可以取任何组件，也就是这个helloBinding。我们可以右键单击它，有一个选项可以在本地预览组件。

[00:14:30]如果你在录制这个演讲的时候在你的Visual Studio Code中安装了SFDX扩展，它就已经在那里了。你可以点击右键使用它。让我们向您展示运行中的控制台。在这里，我会默认掉一些console行它会改变这个字段来实现它。

[00:14:52]你可以看到，它正在进行很多调用。我向您展示的调用，呼叫用户，说他的名字是Bob，并从Bob那里获取信息。是的。好的。这就带来了我们自己的进口。我要说明的是，我展示给你们的所有代码都可以在GitHub回购中找到，我希望你们能在这里看到。

[00:15:17]我要把车拖上来了你看到了吗，莱纳德，你看到这些东西了吗?我在这里展示给你们看。我只是想确保你能看到右边图片以外的东西。我们可以把它剪掉。好的。但所有这些都在一个GibHub回购- github.com/barryhughes1/importables -你可以抓取那个回购和所有你看到的代码都在那里。

[00:15:37]所以就像我说的，关于你能做什么和不能做什么有几个不同的陷阱。如果我们试图访问一个无效的文件，如果我们导入samplecontacts1。js，它不存在，那就不会保存它会在你保存它的时候在你的代码中返回一个错误。所以你不能保存它。

[00:16:00]然而，你的表达可能会出错。这个表达式说，printNameee这里有很多e作为printUserName，在user。js中没有有很多e的打印名方法，这实际上会保存但会导致错误，所以这是需要记住的。

[00:16:19]我还可以访问printDOB，我写了一个表达式，printDOB实际上并不存在，但它可以让你保存它。你就是不能叫它。与前面一样，您的导入可以来自LWC文件夹中的文件。静态资源，我们稍后会展示，或者来自另一个Lightning Web组件，这是我几分钟前展示的用户命令。

[00:16:40]如果你试图在你的LWC目录中创建一个专用文件夹，并在其中放入一个JavaScript文件，它将不允许你在该目录中保存任何文件。这是平台的局限性。

[00:16:51]所以我之前向你们展示了如何将用户lightning组件导入为组件中的共享JavaScript文件，这实际上是直接从lightning组件食谱中选取的一个例子。如果你在食谱示例库中查找，你会找到它们，这个叫做MiscSharedJavaScript。

[00:17:17]这是在金融领域引入一些功能的一个例子。在这个例子中，我们实际上导入了一个叫做c/mortgage的组件，在左边，我们导入了期限期权以及如何在计算的基础上计算月供。

[00:17:35]因此，学习组件开发的一个关键方面是学习已经存在的导入。到目前为止，在这个演示中，我们已经讨论了我们自己编写的JavaScript代码，但是我们还没有编写的代码呢。已经存在的代码呢?这个平台提供了一些，其中一些对于现阶段的大多数Salesforce开发人员来说是非常直接的。

[00:18:06]就像我们几分钟前谈到的lightningElement - lightningElement有点像网页开发者的HTML Element，它允许我们获取访问DOM的权限并使用它做一些事情。它实际上主要用于测试，但它是用来操作Dom的。

[00:18:21] API，轨道和电线。大多数开发者都知道这些。API允许您在组件中创建一个公共属性，可以从父组件中调用它。跟踪现在几乎没有了，跟踪允许你操作我从分析中得到的DOM，任何对属性的更改都会立即在组件的DOM中更改。Wire允许您与Lightning数据服务通话，该数据服务可以与Apex通话，也可以与常规的Lightning数据服务通话。

[00:18:52]这四个是大多数开发人员所熟悉的。还有很多其他的方法，如果我把它们都讲一遍，会使我的演讲变得非常无聊，它们在网上的Lightning开发指南中有很好的文档说明。我不需要讲太多在右边的@Salesforce库中，它们更多是关于效用函数的。

[00:19:15]比如获取静态资源，与单词翻译对话，与bench对话，与Apex对话，获取客户端的形式因素，获取用户ID，诸如此类的事情。

[00:19:30]在底部的左手边我们有更多的闪电库。这些很酷，因为它们不仅允许你获取记录，获取列表，还允许你操作记录，访问UI记录API。我可以看到一个页面的布局是什么样子的，以及诸如此类的事情。但底部的两个，lwc-jest和platformResourceLoader，我想给你们看一些例子

[00:20:00]在jest方面，我们实际上可以使用jest和其他库来测试我们的照明Web组件。在本例中，我们使用Jest。这是一个使用导入、标准导入的好例子，Salesforce帮助我们完成了一项特定的工作。我们在这里导入createElement。

[00:20:18]我们在前面介绍过lightningElement，它可以访问DOM。createElement允许我们将一个组件推入一个虚拟DOM中进行测试。你可以看到第二行我们导入了Hello，因为那实际上是我们正在测试的组件。

[00:20:34]那么这只是Jest的功能。我们实际上描述的是C-hello是测试的名字。第一行，afterEach清空虚拟Dom，然后再往下看最后第二行，这里显示读取行的section行，实际上是在Dom中创建元素C-hello我们可以看到里面有什么。

[00:20:56]这非常简单，但这是导入一个createElement，并导入另一个实际运行测试的组件。再一次，进口为我们服务。

[00:21:05]从JavaScript库的角度来说，这是事情变得更有趣的地方。如果你来自node.js的世界，或者之前做过很多JavaScript，你会知道在过去的15年里JavaScript的世界在飞速发展有一些不可思议的库JavaScript开发者和node.js只是假设，你需要他们引入并使用它们。

[00:21:33]而Salesforce的开发人员却不太习惯这样。我们在这里做的是，我们说，有一些库你可以获取。我们可以得到一些库，其中一些很有趣。屏幕上有两个，图表。js和D3.js它们很酷，因为在照明Web组件的示例库中已经有了它们的示例。

[00:21:51]所以，如果你想看这些程序的运行情况，你可以获取这些程序，然后在示例代码中工作。其他的也很酷，math。js是我自己经常用的一个，但有两个我想特别谈谈。我想谈谈Lodash和Moment.js。

[00:22:07] Lodash下划线是一个库，一个巨大的实用程序库，允许我们为JavaScript代码做大量的功能，这些功能已经稳定了很长一段时间，我们可以使用它们。我们会在接下来的一个演示中用到它。右边的这个，moment。js，如果你上过node。js的课程，可能会是你第一个学的。moment。js是一个很棒的JavaScript库，它能让我们操作日期和时间，做很多了不起的事情。

[00:22:34]所以我要给你们看两个不同的演示。我将向您演示如何使用自己的JavaScript显示一些记录，以及如何对它们进行排序。然后我将展示如何用这两个库做类似的事情。

[00:22:48]我要给你们看的第一个是，我们看这里。是的，它叫fake-data-fetcher。fake-data-fetcher实际上是一段代码你可以从Lighting Web Component食谱和一个示例库中获取，但这里的fetcher代码，如果我给你们展示它背后的代码，它做了很多很好的事情。

[00:23:15]它的主要作用是从外部获取数据，在这种情况下，我可以对数据进行排序。这里我将使用自己的JavaScript来排序一些代码，得到余额最低的那个，余额最高的那个，更改日期，诸如此类。让我们先读一下代码。

[00:23:32]所以fakeDataFetcher基本上是标准组件。这很简单。模板非常简单，我们只是制作一个lightning数据表。如果您熟悉Lightning Web Components，那么它是需要一段时间才能适应的组件之一，但它具有相当多强大的特性。

[00:23:51]数据和列，这就是显示的东西。但我们如何对它们进行排序才是这段代码真正发挥作用的地方。如果我们改变它们，我们实际上会调用一些代码。在JavaScript文件中，我们会做一些导入。我要给你们看的第一个是第一时间得到这一天。

[00:24:10]这里有一个导入叫做fetchdatahelper。js。如果我们找这个。这里这个，我们实际上引入了一个对外部网络源的调用。这是一个我们可以获取一些信息的web端点，只是一个简单的发布，获取信息并带回。

[00:24:20]所以实际上导入它以及它带回的元数据的类型。这是我们的代码，当我们执行connectedCallback时，我们实际上是使用await关键字获取这个，这使它是异步的。我们取回数据，然后显示在屏幕上。没什么难的。我想向你们展示的主要是我是如何获取它的。

[00:24:50]那么，当我点击一个栏目标题时，这里到底发生了什么?当我点击它时，我在调用updateColumnSorting，这是JavaScript文件中的一个函数。在这里。四行代码。这很简单。它实际上选择了我想排序的东西以及反应被排序的东西。

[00:25:05]我必须解析它，所以我得到了数据的副本，这样我就可以操作它，我调用了一个叫做sortData的东西。sortData不在这里。这是从我之前写的一个很有用的JavaScript文件中导入的，这是我的sortData函数，这是我很久以前从网上找来的，让它自己能工作它不仅能按字符串排序还能按类型排序。

[00:25:32]这就是为什么数字会发生变化。诸如此类的事情。我要导入很多本来可以从别处获取的代码。在JavaScript的几行代码中，我就能调用外部源并对数据进行排序，然后对不同的组件以不同的方式重用它。

[00:24:48]这是我用自己的Javascript写的代码。但让我们从使用外部库Lodash下划线和moment。js的角度来看它，来做一些很酷的事情。我做了一个闪电网络组件我把它拖到了Salesforce的主页上，这是一个特别的机会列表。

[00:26:15]在这种情况下，我实际上得到了所有的机会。这就是所谓的顶点代码，我们以随机的顺序得到所有的机会。然后我想让JavaScript按金额降序排列结束日期降序排列。你可以看到这些金额是按降序排列的。

[00:26:3]如果我看其中的三个12万，它们是按日期排序的，最近的日期在最下面。那么我是如何在JavaScript代码中做到这一点的呢?我们过去看看吧。它叫做topoportunitiesable。html。这很简单。我这里有两张表。这样做的原因是，我做了第二个，或者我过滤了代码，只显示接近1的那些。

[00:27:00]那么我是怎么做到这两件事的呢?它们都是用非常相似的方式完成的。看看JavaScript，我们可以看到一些东西。我们实际上输入了一些东西。我要给艾派克打电话，这是另一个导入。为了让你们知道如果你想调用一个Apex方法，你必须使用导入，这是Apex类，我要调用它的方法。

[00:27:20]我把它叫做getopportunities list。我实际上是在展示一个祝酒词如果我得到一个错误，我希望在这种情况下我不会得到一个错误。然后我想引入两个外部框架，外部javascript文件Lodash和moment。js。如果你来自node。js的世界，你通常习惯于制作包。Json文件，安装它们，然后调用它们。

[00:27:47]但在Salesforce却不是这样。我们必须把这些东西作为静态资源。万博手机登录平台这就是我们在这里所做的。有两个静态资源，我得到了这两个框架的核心Ja万博手机登录平台vaScript。再跟你们确认一下，这是什么意思，在moment。js中，如果我想下载，我需要得到moment。js的JavaScript文件并把它作为静态资源引入，Lodash也是如此。

[00:28:10]请确保你不要做我做的事，不要引入完整的版本，我引入了核心版本——那没用。带来完整的构建，并确保所有的JavaScript都在那里，但它非常小。这是满载的，所以我们得把这些搬进来。

[00:28:23]这些是Salesforce中的静态资源，我要万博手机登录平台用另一个重要的。Lightning平台资源加载器，将这些静态资源引入Salesforce。万博手机登录平台你可以看到它在我的特定函数组件中叫做loadScript。如果我们向下滚动看看这些东西在我的connectedCallback中是什么样的，它是组件代码中的一个生命周期钩子。

[00:28:48]首先，我要加载moment。js我要依次做这些事。moment。js会被初始化，然后这是我的loadScript。这是使用Salesforce提供的库来加载脚本我将加载moment。js当它完成时，我将去做其他事情。

[00:29:03]如果没有，我就会捕捉到一个错误，这就是我的吐司。我的下一行是引入Lodash，这是完全相同的代码。我要引入Lodash，初始化它，假设它一切正常。我知道所有东西都装好了，这很好。最后我得到的是，我正在收集我想要的所有记录，所有的库都已加载，我们如何获取记录呢?

[00:29:35]这也不是什么新鲜事。这里我用的是导入的Apex方法。我将调用它，这实际上是这里的方法，在这种情况下，它取回所有的机会。所以这还不是一个可以投入生产的演示版本。万博max手机网页登录你不会想要得到所有的机会和任何你想要的东西。

[00:29:45]但这次，我们将在一个月后把它带回来，因为机会太少(难以理解)。现在我想要拿回我的机会，但我要做的第一件事是我想要排列它们。他们是怎么订购的?好吧，我本可以执行之前所做的JavaScript文件，但我使用的是Lodash。

[00:30:00]在Lodash中有一个非常方便的小函数叫做orderBy。调用Lodash的方法是使用下划线，下划线-点这就是调用Lodash库你可以去orderBy调用你想调用的东西。我们快速浏览了一下Lodash并查看了一些文档。我们来谈谈洛达什能做什么。

[00:30:19]这就是Lodash的巨大功能库。orderBy允许我们基于多种不同的方式对集合进行排序。我们还可以使用sortBy，这是类似的。还有一些其他的选项可以提升获取数组的第一个元素，除了数组的某些元素之外的所有元素。

[00:30:42]某物是数字，某物是对象你可以使用大量的实用函数你可以用一行代码做一些了不起的事情。回到我的代码库，希望你们能看到。在我的代码中，我所做的就是写一行代码然后我把结果，我从Apex中得到的很多记录，所有这些机会，我把它们排序在一行中。

[00:31:05]所以我先按数量排序，然后按降序排列。截止日期会按升序排列就像我展示的那样。最近的一个在最下面，只有一行代码我把所有的记录都排序了这在你们自己的JavaScript中应该有很多行代码。

[00:31:21]你真正不想做的是在你自己的Lightning组件和这个区域，开始编码如何排序它们，因为有很多帮助，可以帮助你做这些事情，而不需要写所有的代码。这些都已经经过了测试。

[00:31:32]在我们正常的web组件代码JavaScript中，我们还可以做一些事情，我们可以对一些记录执行forEach，或者基本上是对订单数据进行迭代，这很好，但下划线有自己的forReach方式。你可以看到它们非常相似。我能想象出其中一个可能来自另一个。之后，我要在实际解中做的是，我也要以年为单位进行计算。

[00:32:01]所以我想知道截止日期是什么时候?这是几年前还是几个月前这是什么时候?moment。js有很多强大的函数。其中一个叫fromNow，我用这个来展示它是什么样子的，这样我就可以执行moment()。fromNow()会返回它是多久以前的。

[00:32:19]这就是我在这里所做的，这是两年前的事，也是用一行代码完成的。如果我们到下面这里，我实际上占用了我的rowDat。FromNowDate和它的时刻得到结束日期和到期从那里。还是那句话，一行代码就能知道事情发生的时间

[00:32:37] Lodash上还有一件事要告诉你们，那就是第二张表，让我们看看我对第二张表做了什么。我这里有一个表格，它过滤了所有的记录。在这种情况下，所有的机会都是封闭式的。通过Lodash的一行代码，我们就可以用_。filter，这是Lodash中的另一个函数来获取它并根据它的阶段是否为Closed Won来过滤一些东西，只给我那些记录。

[00:33:05]所以你可以看到在这里用一行代码报告了非常多的功能。在许多情况下，我们只引入一个库来提供帮助。再说一次，所有这些例子都在Github回购中。同样，网址是github.com/barryhughes1/importanbles。

[00:33:25]又是Github上的回购。这张幻灯片会提供给你们。这些是我使用的一些资源。万博手机登录平台第一个链接是Salesforce内部的示例库，还是那句话，如果你不知道它是什么样子的。这是一个非常非常强大的资源，在这里，您可以通过了解布道者和专家正在做什么来了解所有关于Lightning Web Components的知识。

[00:33:48]我给你们看的很多代码片段都在LWC食谱中，第一个食谱，它更多的是介绍它是如何工作的，而其他的很多都是看实际的例子。非常有力和深入的例子，你可以在那里找到。

[00:34:05]文档组件库是一个极好的资源，我每天都要浏览一下。这是一种展示Lightning组件的方式。我们可以看到手风琴是什么样子的，还有开发者指南，这是我们如何看待Salesforce，我们如何让组件工作的指南。如果你对生命周期钩子感兴趣，renderedCallback()是什么，所有的信息都在那里，非常非常好。我一直在使用它，还有很多其他的事情，理解JavaScript和我从我的演示中选取的一些例子。

[00:34:35]这就是今天的演讲。我将在视频播放时在线，如果你有任何问题或想知道图书馆在哪里或如何使用它，请告诉我。

(00:34:55)好了。谢谢。谢谢你,巴里。这是辉煌的。对于不是Salesforce开发人员，只使用Salesforce，但做过一些JavaScript开发的人来说，它的功能非常强大。它非常强大。基本上这些都是静态包含，对吧?如果你在页面上有两个Lightning组件，它们都使用了Moment.js，你必须在每个组件上都包含Moment.js，对吗?它是被静态推进去的。

[00:35:26]所以在Salesforce的世界里，当然在Aura的世界里，只要你拥有你在两者中包含的资源，但它只会一直加载。因此，您必须将它包含在两个组件的代码中，但您可以一次性将它们全部连接起来。

[00:35:42]在这种情况下，这将是一个使用共享组件代码的好例子，你可以从那里调用它的一些函数。

[00:35:50]你可以做，你可以做笔记显示组件，对吧?它们不需要HTML，所以你可以创建你自己的实用函数库，把它们扔进去。

[00:36:00]你可以像我一样把它们导入来。C-user，那个C-user例子根本没有HTML模板。只需导入is，然后使用它。在《Aura》中做同样的事情要困难得多。

[00:36:12]例如，如果你有一个自定义对象，你想在它上面有几个不同的闪电组件视图，你只需要创建一个，你所有的工具来管理你的自定义对象，然后你只需要把它导入到你的每个组件中。[00:36:26]正是如此，是的，正是如此。是的。

[00:36:30]有什么性能方面的考虑吗?我的意思是，你能把，20,30,40个图书馆都装进去吗?

[00:36:36]是的，图书馆越大，显然这是网络世界，需要的时间就会越长。我想说的是，你们见过我导入我自己的Javascript，我几乎直接导入，当我调用外部web源时使用这个，我等待。然后像Lodash和Moment.js这样的东西，我将它们与平台资源库一起引入。

[00:37:02]我想说的是，如果你有任何大小的JavaScript文件，把它作为静态资源引入。不要直接引入它，因为您不需要降低代码的响应速度。我还没有听说Salesforce计划做什么，添加需求或软件包。json或者CDN，它们目前还不能工作。

[00:37:21]但他们正在想办法让我们做这种事。Evergreen当然是一种方法，他们试图弄清楚在大量的工作中我们能在多大程度上使用非常高级的组件，所以我可以想象，我们能够CDN各种JavaScript，加上现代的web组件开发。在美国，你可以完全CDN别人的组件，并在其他地方使用它。那是会有的，只是现在还没有。

[00:37:48]但对于Salesforce的所有人来说，性能是非常重要的。这就是我们没有他们的原因。Salesforce往往很担心他们的性能，]所以这就是你应该使用静态资源来引入你的库的主要原因。万博手机登录平台

(00:38:03)好了。非常感谢你的演讲，这是一个有趣的话题，也是Salesforce非常强大，非常新，非常新的一部分。谢谢你，巴里，谢谢你的时间。

[00:38:16]谢谢，莱纳德，谢谢你和凯西组织这次会议。祝大家好运。谢谢你！