於洋的dojo2學習筆記(3.第一個dojo的應用元件)
參考文件
https://dojo.io/tutorials/002_creating_an_application/
目標
今天學習一些原理的部分:
瞭解最簡單的 Dojo 2 應用程式的結構及每一部分的作用。 但不會全面討論 Dojo 2 應用程式的每一個可能的組成部分。
主 HTML 文件
下載好demo文件之後,我們看看002_creating_an_application\initial\biz-e-corp\src下的indexl.html檔案
HTML 頁面是每一個 web 應用程式的基礎，Dojo 2 應用程式也不例外。 在示例程式中，index.html
<body> 標籤中只包含一個元素：<my-app>。 這個元素並沒有什麼特別之處，但重點是我們能唯一的識別這個元素。 為了明白其中的原理，我們看 main.ts 檔案中的這行程式碼：(位於initial\biz-e-corp\src)
const root = document.querySelector('my-app') || undefined;
//加入||的意義是如果"querySelector"函式返回空值,則返回undefined
上面的程式碼中，我們搜尋 my-app
root。 應用程式正是用這個節點來存放 Dojo 2 應用程式。 應用程式所做的每一件事情都應該包含在這個元素中。 這樣做有幾點好處:
1.Dojo 2 應用程式能容易地與頁面中的其他內容共存。 這些內容可以是靜態資源，舊有的應用程式，或另一個 Dojo 2 應用程式。
2.Dojo 2 能夠輕鬆使用第三方庫。 例如，如果你想使用 moment.js (什麼鬼?)來簡化你程式中處理時間的工作， 則可在主 HTML 文件中載入它，然後 Dojo 2 應用程式就可以使用這個類庫。
投影儀
main.ts 中的這些程式碼：
const Projector = ProjectorMixin(HelloWorld);
const projector = new Projector();
projector.append(root);
投影儀是什麼?
現實中,投影儀用於載入某種形式的媒體，如幻燈片或視訊，然後投影到一個平面上，如臥室裡的牆(和愛人一起看看愛情動作片?)。 類似的方式，Dojo 2 的投影獲取應用程式的虛擬化標識，然後投影到實際的頁面上。
這些程式碼是允許投影在 virtual DOM 和使用者看到的渲染 HTML 之間協調的關鍵程式碼。 第一行程式碼建立一個類，將 Helloworld 部件註冊為頂級部件，讓投影與 Dojo 2 應用程式關聯。 然後建立投影類例項，並呼叫 append 方法讓投影與 HTML 文件關聯。
每當 Dojo 2 應用程式需要更新 DOM，都會通知給投影。 但是，投影並不會立即重繪頁面。 相反，它會使用 window 物件的 requestAnimationFrame() 方法為應用程式登記一個重繪請求。 這個方法允許應用程式延遲更新 DOM，直到瀏覽器準備重繪頁面。 這樣做，更新操作能批量分組執行，可優化渲染效能。 當 window 物件重繪頁面，應用程式的當前 virtual DOM 用來決定在一次操作中需要做哪些更新。 這允許應用程式按需頻繁更新 virtual DOM，而不會帶來降低程式響應效能的風險。
widgets
widget是dojo1就有的概念,是視窗中的小部件,包含資料可以與使用者互動
widget是 Dojo 2 使用者介面的基本構建單元。 他們將元件的視覺化和行為封裝到一個元素中。 這些方面封裝在部件的實現中。 widget會暴露出屬性和方法，以與其他元件互動。 考慮下面的圖表：
第一個圖展示的是傳統的 HTML + JavaScript 結構。 因為應用程式的視覺化（HTML）和行為（JavaScript）都是公開可訪問的， 應用程式的元件都能被直接操作，這會導致 HTML 和 JavaScript 彼此沒有同步。 需要編寫大量的測試用例來確保這種情況不會發生。
第二個圖展示部件如何確保各元件僅按照設計意圖互動。 部件封裝視覺化和行為。然後暴露出屬性和方法供其他元件與之互動。 通過提供可控介面，就很容易保持部件的視覺化和行為各方面同步。
在我們的示例應用程式中，我們僅有一個 HelloWorld 部件：
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v } from '@dojo/widget-core/d';
export default class HelloWorld extends WidgetBase {
protected render() {
return v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]);
}
}
這個部件很簡單，僅包含一個 <h1> 標籤，且無任何行為，但已能演示一些重要概念。 注意 render 方法為投影提供虛擬節點（也稱為 DNodes），以決定向 HTML 文件中新增哪些內容。 在這個例子中，部件足夠簡單，函式總是返回相同的結果。 我們可以讓部件功能更豐富一些，允許加入額外的屬性來改變 DNodes 的生成邏輯。 我們也可為這些屬性設定預設值以新增更多複雜行為，而不需要調整應用程式中與之互動的程式碼。 這將鼓勵開發鬆耦合的元件，更易於開發和維護。
測試
基本應用程式包含的最後一項就是它的測試套件。 Dojo 2 的設計確保不會出現錯誤，或者很容易被監測盜， 但測試用例依然是必需的，用於驗證業務邏輯和確保應用程式元件按照期望協作工作。 Dojo 2 使用Intern 測試框架(自動化測試工具?)來提供測試能力。 Intern 支援多種測試策略，包括單元測試，功能測試，效能基準測試，可訪問性測試和視覺化迴歸測試。 測試也使用Dojo 2 test-extras library 來驗證部件 render 函式的輸出結果。 test-extras 庫用來簡化 Dojo 2 部件的功能測試。 要了解更多資訊，參考Testing Dojo 2 Widgets(todo 此處要加入超連結,不知道什麼時候才能學到) 。
我們的示例程式中包含一些測試，這些測試驗證程式是否按期望的結果執行。 測試用例程式碼在 tests/unit/widgets/HelloWorld.ts 檔案中， 我們來了解部分測試程式碼：
it('should render', () => {
const h = harness(() => w(HelloWorld, {}));
h.expect(() => v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]));
});這個測試確保渲染函式返回正確的標籤，並且標籤中包含正確的內容。 我們將在後續的教程中專題討論測試，但是現在你可以使用它們來檢查你的工作， 只要執行下面的終端命令：(這裡要說明的是,要使用下載的程式碼,要在新目錄重新安裝dojo cli)
dojo test
在node. js預設情況下,執行 dojo test後應用按需編譯(實時編譯)。然而"測試"也可以使用dojo test後加 --config不編譯包,但是首先我們需要確保我們已經建立了測試包。這些包可以使用watch命令,這意味著在每次修改後重新執行測試後完整的應用程式不需要重建。
在終端執行
dojo build --mode test --watch
上邊的命令執行時,在另一個終端執行
dojo test --config local
測試成功!