在混搭中使用消極式載入
 |
ThingWorx 9.3.2 或更新版本支援此功能。
|
消極式載入可讓您減少或延遲資源需求型與資料密集型操作，以改善混搭載入時間與效能。您可以使用消極式載入配置混搭來載入重要元件，然後再根據使用者執行的動作載入其他資料及執行服務。此外，您也可以從 DOM 中卸載容器，以釋放系統資源，並在容器超出檢視時改善效能。這樣，您便可讓使用者更快地存取重要功能，進而改善混搭的整體回應情況。在 Mashup Builder 中，支援針對下列類型的容器使用內容、事件與服務執行消極式載入：
• 版面配置容器
• 「標籤」與「動態面板」小器具中的容器。
混搭 Loaded 事件通常用來在混搭中執行資料服務與函數，即使資料不可見時也是如此。您在設計更為複雜的混搭時，當混搭中包含下列項目時，使用者經歷的載入時間可能會比較長，效能也會降低：
• 同時執行的大量資料服務。
• 大型媒體實體，這可能會影響下載資源所花費的時間。
• 顯示大量資料的視覺化效果，例如複雜的格點與集合小器具，這可能會影響彩現效能。
例如，假設混搭使用「標籤」小器具來建立版面配置，其中每個標籤都包含不同類型的視覺化效果或一組輸入小器具。在使用者只需要檢視某些標籤時並行載入所有標籤的資料會增加載入時間，網路向伺服器發出的請求總數也會增加。您可以選擇根據使用者執行的動作、服務的輸出或運算式函數來載入特定標籤。如需有關在「標籤」小器具中使用消極式載入的詳細資訊，請參閱標籤小器具 (主題化)。
最佳作法與使用考量事項
• 請使用容器的 Loaded 事件代替混搭事件來執行繫結至消極式載入之小器具的服務。除非已執行 LoadContainer 服務，否則繫結混搭 Loaded 事件以針對消極式載入的容器執行服務不會顯示任何結果。
• 設計解決方案的版面配置，然後確定可單獨載入的混搭部份。請考慮解決方案的一般使用情況，並使用該資訊來決定如何載入內容。在某些情況下，當使用者必須快速在不同檢視之間切換時，載入比最初所需更多的資料可能會讓使用者獲得更好的體驗，這會縮短每次載入每個標籤的時間。您可以選擇事先載入特定資料，而不是每次開啟容器或標籤時都載入一兩秒。建立混搭之後，您應該先衡量其載入時間與效能，然後再將其與您設計的預期使用情況進行比較。
• 當容器花費數秒來載入其內容時，請考慮保持其載入，即使它不再位於目前檢視中也是如此。保持內容載入可防止使用者在每次切換到不同的檢視然後再返回之前檢視時等待內容重新載入。您可以新增按鈕並將其繫結至 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 時，此內容才可用。
|
事件
|
在自訂小器具延伸功能中使用消極式載入
接下來這部份內容描述更新自訂小器具延伸功能以支援消極式載入所需的步驟。欲使用容器的消極式載入功能，您必須手動檢閱及更新小器具 <小器具名稱>.runtime.js 檔案。
小器具使用名為 beforeDestroy() 的函數，來在將小器具繫結與資料從 HTML DOM 中移除之前先將其清除。在舊版 ThingWorx 中，從 DOM 中移除小器具的一般方法是宣告指向小器具物件的變數，然後在呼叫 beforeDestroy 時將 null 值指派給此變數。例如：
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
使用此方法銷毀小器具會導致重新載入小器具時發生問題，因為所呼叫的方法會嘗試使用此變數。欲在自訂小器具中使用消極式載入，您必須透過新增 domOnly 引數，來更新您自訂小器具延伸功能之 <小器具名稱>.runtime.js 檔案中 beforeDestroy() 函數的參考。範例程式碼如下：
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
domOnly 引數可讓您從 DOM 移除小器具，而不會銷毀小器具，您可於稍後將其重新載入至 DOM。
欲更新現有延伸功能，請執行下列步驟：
1. 擷取小器具延伸功能，然後在文字編輯器中開啟 <小器具名稱>.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 中匯入更新的小器具。
現在您即可在消極式載入的容器中使用自訂小器具。