轉譯管理

轉譯管理系統會告知轉譯器何時重新轉譯區塊。確保區塊受到修改 (例如已設定欄位值) 時系統會更新區塊形狀以配合。

何時需要注意

如果發生以下情況，您需要與這個系統互動：

在 Blockly 中新增方法，用於修改區塊的形狀。
在 Blockly 中新增方法，這些方法會依據更新的區塊大小或位置資訊。

運作方式

自動排入佇列。每當區塊受到修改時，Blockly 會「佇列」a 與該區塊的轉譯結果以下列舉一些會排入轉譯佇列的修改項目：
- 設定欄位的值
- 新增或移除輸入
- 連結或取消連結子區塊
建立集合。當區塊排入佇列時，轉譯管理系統會將該區塊及其所有父項區塊，加入需要重新轉譯的一組區塊。
要求回撥電話。接著，算繪管理系統會使用 requestAnimationFrame 要求回呼。瀏覽器會在繪製目前影格「前」呼叫此回呼。
重新轉譯集合 (以樹狀結構)。requestAnimationFrame 回呼轉譯管理系統會將所有區塊轉譯成其中的每一個區塊從分葉區塊到根區塊這可確保系統子封鎖而是在顯示父項區塊前先準確大小資訊家長的方塊可以伸展子項的邊界。

運作方式

等待重新轉譯區塊，直到目前影格繪製前，這樣轉譯管理系統就能刪除重複的轉譯要求。如果封鎖規則是一律都會即時轉譯，同一個區塊也可能在非必要的情況下重複放送相同廣告而是會批次處理轉譯要求已變更的區塊只會在影格結束時繪製一次最終定案。重複繪製作業可讓 Blockly 的運作效率大幅提升。

例如，在另外兩個區塊之間插入一個區塊，將 11 個算繪佇列，但僅限實際發生 3 個 (每個區塊各一個)。效能提升了 3.6 倍。

使用方式

您通常不需要關心轉譯管理系統，因為您修改區塊時，系統會自動運作。但在某些情況下你不需要直接與其互動

佇列轉譯

如果您要為 Blockly 新增應更新區塊形狀的新方法，就必須呼叫 BlockSvg.prototype.queueRender 來排入區塊的算繪作業。

等待算繪完成

如果您正在 Blockly 新增方法，而且該方法需要更新大小或請等待保證 renderManagement.finishQueuedRenders()。這項承諾在任何排入佇列的轉譯作業都會完成，如果沒有佇列轉譯，則會立即完成。

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

立即觸發排隊算繪作業

如果您正在 Blockly 新增方法，而且該方法需要更新大小或請等到下一個任何轉譯才能完成的影格，您可以呼叫 renderManagement.triggerQueuedRenders 可強制執行任何排入佇列的轉譯作業立即生效

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

一般而言，我們不建議這麼做，因為成效不彰。只有在延遲導致使用者體驗不佳的情況下，才需要使用此方法。例如：插入標記需要定位資訊，請務必確認插入標記可提供使用者即時回饋，讓使用者立即觸發顯示方式

核心中還有幾個地方會觸發立即轉譯回溯相容性因素這些異動預計在 v11 中移除。