在混搭中使用延迟加载
 |
ThingWorx 9.3.2 或更高版本中支持此功能。
|
延迟加载可减少或延迟耗费资源的数据密集型操作，进而改进混搭加载速度及性能。可使用延迟加载来配置混搭以加载基本组件，然后根据用户所执行的操作加载附加数据并执行服务。此外，还可从 DOM 中卸载容器以释放系统资源，并在容器超出视图时提高性能。这样一来，用户便可更加快速地访问基本功能，从而提高混搭的整体响应能力。在 Mashup Builder 中，使用以下类型容器的属性、事件和服务时支持延迟加载：
• 布局容器
• 选项卡和动态面板小组件中的容器。
混搭 Loaded 事件通常用于在混搭中执行数据服务和函数，即使数据处于隐藏状态。在设计更为复杂的混搭时，若混搭包含以下内容，则会延长加载时间并降低性能：
• 大量同时执行的数据服务。
• 大型媒体实体，此时可能会影响资源下载时间。
• 显示大量数据的可视化内容，例如复杂的栅格和集合小组件，此时可能会影响渲染性能。
例如，一个使用选项卡小组件创建布局的混搭，其中每个选项卡均包含不同类型的可视化内容或一组输入小组件。当用户只需查看某些选项卡时，同时加载所有选项卡的数据会延长加载时间和向服务器发出的网络请求的总数。可选取根据用户所执行的操作、服务的输出或表达式函数来加载特定的选项卡。有关在选项卡小组件中使用延迟加载的详细信息，请参阅选项卡小组件 (可应用主题)。
最佳做法和使用注意事项
• 使用容器的 Loaded 事件来替代混搭事件执行绑定至延迟加载小组件的服务。若绑定混搭 Loaded 事件以执行延迟加载容器的服务，除非 LoadContainer 服务已执行，否则不会显示任何结果。
• 设计解决方案的布局，然后确定混搭中可单独加载的部分。考虑解决方案的典型用例，并使用该信息决定内容的加载方式。在某些情况下，若用户必须在不同的视图间快速切换，则加载超出最初所需的数据会带来更好的用户体验，因为这会缩短每次加载各个选项卡所需的时间。每次打开一个容器或选项卡时都要花费一两秒的时间加载数据，现在只需选择预先加载特定的数据即可。创建完混搭后，应评估其加载时间和性能，然后将其与设计的预期用例进行比较。
• 若某个容器在加载其内容时需花费数秒，可考虑使其保持加载状态，即使其不再位于当前视图。使内容保持加载状态可避免用户每次切换到不同视图再返回先前视图时等待内容重新加载。可添加一按钮并将其绑定至 ReloadContainer 小组件，以允许用户手动重新加载数据。
• 请确保其他小组件、函数或服务仅在加载完容器后使用延迟加载容器中的数据。
• 混搭可包含许多并非总是与所有用户相关的小组件和章节。使用服务和函数创建规则，以控制小组件和数据的加载和可见性。可基于用户输入或运行时发生的事件加载内容。
在延迟加载的容器中使用可见性规则，以便其仅在需要时显示。
• 请确保在加载完父容器后执行使用了延迟加载小组件中输入参数的函数。混搭函数可能仅在所有绑定参与者处于可见状态，或至少曾经处于可见状态的情况下才能发挥作用。
要配置容器的延迟加载属性，请完成以下步骤：
1. 在 Mashup Builder 中，选择工作区中的容器或使用“资源管理器”面板对其进行选择。
2. 在“属性”面板上，将容器 LazyLoading 属性设置为 True。此外还会显示延迟加载的其他属性、服务和事件。
◦ 要卸载容器数据，请将 EnableContainerUnload 属性设置为 True，然后绑定执行 UnloadContainer 服务的事件。
◦ 要在运行时加载容器，请将 LoadContainer 服务绑定至小组件、函数或数据服务事件。
|
|
切换到已配置为延迟加载的选项卡后，选项卡小组件中的延迟加载容器将自动加载、卸载和重新载入。
|
◦ 要重新加载容器中的内容，请将 ReloadContainer 服务绑定到某一事件，例如单击按钮。
3. 绑定所选容器的 Loaded 事件，以执行小组件、数据服务或函数内的服务。
或者，绑定 Unloaded 事件以在容器从 DOM 中移除时执行操作。
4. 单击“保存”，然后单击“查看混搭”。
在运行时执行 LoadContainer 后，Loaded 事件会触发并执行所有绑定服务，例如图表数据或表达式或验证器函数的 Evaluate 服务。
延迟加载属性
下表列出了可用于为混搭中容器启用和配置延迟加载的属性、事件和服务。
|
属性
|
说明
|
基本类型
|
默认值
|
|---|---|---|---|
|
LazyLoading
|
使您能够在运行时借助小组件、函数或服务事件加载、卸载和重新加载容器。
|
BOOLEAN
|
False
|
|
LoadContainer
|
一种可绑定服务，用于在运行时使用小组件、函数或服务事件加载、卸载和重新加载容器。
|
服务
|
|
|
Loaded
|
在运行时混搭视图中加载并显示容器时触发的事件。可使用此事件执行绑定至容器中小组件的服务。
|
事件
|
|
|
EnableContainerUnload
|
使您能够在启用 LazyLoading 属性时借助 UnloadContainer 服务卸载容器及其内容。
|
BOOLEAN
|
False
|
|
UnloadContainer
|
将容器及其内容 (包括子项容器) 从运行时混搭视图中卸载。将此事件绑定到混搭中事件，例如按钮小组件 Clicked 事件或验证函数 True 事件。
|
服务
|
|
|
ReloadContainer
|
将容器及其内容从运行时混搭视图中卸载并加载以进行重新加载。此属性仅在 EnableContainerUnload 处于选中状态时可用。
|
服务
|
|
|
Unloaded
|
在运行时混搭视图中卸载并移除容器时触发的事件。此属性仅在 EnableContainerUnload 处于选中状态时可用。
|
事件
|
在自定义小组件扩展中使用延迟加载
以下部分介绍了更新自定义小组件扩展以支持延迟加载所需的步骤。要使用容器的延时加载功能，必须手动审阅并更新小组件 <widgetname>.runtime.js 文件。
小组件使用名为 beforeDestroy() 的函数，该函数可用于清除小组件绑定和数据，然后其将从 HTML DOM 中移除。在先前的 ThingWorx 版本中，将小组件从 DOM 中移除的典型方式为声明一个指向小组件对象的变量，然后在调用 beforeDestroy 时为此变量分配一个 null 值。例如：
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
由于所调用方法会尝试使用此变量，因此在重新加载小组件后使用此方法销毁小组件会导致一系列问题。要在自定义小组件中使用延迟加载，必须通过添加 domOnly 自变量更新对于 beforeDestroy() 函数的参考，这些参考位于自定义小组件扩展的 <widgetname>.runtime.js 文件中。以下为代码示例：
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
domOnly 自变量可用于从 DOM 中移除而非销毁小组件，稍后还可将其重新加载到 DOM 中。
要更新现有扩展，请执行以下步骤：
1. 提取小组件扩展，然后在文本编辑器中打开 <widgetname>.runtime.js 小组件源文件。此 JavaScript 文件定义了小组件在用于混搭时的结构及其行为。
2. 在文件内容中搜索对于 beforeDestroy() 函数的所有参考。在移除小组件的 DOM 元素，且将小组件从其父小组件分离并销毁之前调用该函数。
◦ 如果参考了此方法，请按如下所示添加 domOnly 自变量：
this.beforeDestroy = function(domOnly) {
3. 为变量分配添加条件语句，从而仅在 domOnly 自变量的值为 false 时销毁小组件：
if (!domOnly) {
thisWidget = null;
}
thisWidget = null;
}
4. 保存小组件的 runtime.js 文件，然后重新打包自定义扩展名。
5. 在 Composer 中导入已更新小组件。
现可在延迟加载的容器中使用自定义小组件。