溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Dojo 進(jìn)階

發(fā)布時(shí)間:2020-10-18 21:10:35 來(lái)源:網(wǎng)絡(luò) 閱讀:137 作者:blocklang 欄目:web開(kāi)發(fā)

官網(wǎng) https://dojo.io

序言 - 構(gòu)建企業(yè)級(jí) web 應(yīng)用程序

在熱衷敏捷交付的時(shí)代,鼓勵(lì)將小功能點(diǎn)持續(xù)地交付給用戶。軟件行業(yè)開(kāi)始青睞這種方式,因?yàn)樗畲笙薅鹊亟档惋L(fēng)險(xiǎn),并最大限度地提高用戶的參與度和滿意度。

即使采用現(xiàn)代的交付方式,一些風(fēng)險(xiǎn)仍然不可避免。復(fù)雜性就是這樣一種風(fēng)險(xiǎn),對(duì)于成熟的應(yīng)用程序而言,復(fù)雜性更成為一個(gè)重要的關(guān)注點(diǎn)。無(wú)論應(yīng)用程序遵循什么樣的系統(tǒng)架構(gòu),隨著時(shí)間的推移,許多小功能聚集出一個(gè)龐大且令人畏懼的代碼庫(kù),需要幾個(gè)團(tuán)隊(duì)監(jiān)督。

應(yīng)用程序上線的時(shí)間越久,實(shí)現(xiàn)一個(gè)設(shè)計(jì)簡(jiǎn)潔的新功能的機(jī)會(huì)就越少。相反,更多的是在現(xiàn)有功能的基礎(chǔ)上調(diào)整、修復(fù) bug 或擴(kuò)展。一個(gè)成功的應(yīng)用程序——以及所包含的功能——大部分時(shí)間都花在維護(hù)上。

維護(hù)復(fù)雜的應(yīng)用程序需要經(jīng)過(guò)嚴(yán)格的訓(xùn)練。團(tuán)隊(duì)很容易陷入泥潭,將時(shí)間花在抱怨代碼和同事上面,而不是向用戶交付價(jià)值。要降低這種風(fēng)險(xiǎn)涉及很多方面,包括標(biāo)準(zhǔn)化、模式化、技術(shù)選型和工具等領(lǐng)域。

管理復(fù)雜性

在軟件交付的生命周期中,錯(cuò)誤發(fā)現(xiàn)的越早越好。在開(kāi)發(fā)階段修復(fù)一個(gè)錯(cuò)誤,比在交付環(huán)節(jié)修復(fù)錯(cuò)誤,或者已給用戶帶來(lái)負(fù)面影響的上線階段修復(fù)錯(cuò)誤要快的多,成本也低得多。

強(qiáng)類(lèi)型

早期捕獲錯(cuò)誤的好方法是在應(yīng)用程序的開(kāi)發(fā)階段支持強(qiáng)類(lèi)型。如果應(yīng)用程序的代碼中顯式指定了類(lèi)型信息,就可以避免數(shù)據(jù)類(lèi)型不匹配而導(dǎo)致的邏輯錯(cuò)誤。編譯器和靜態(tài)類(lèi)型檢查程序可以驗(yàn)證類(lèi)型信息,并當(dāng)類(lèi)型不匹配時(shí)讓構(gòu)建失敗。只有修復(fù)了這些錯(cuò)誤,軟件才能從個(gè)人的工作空間進(jìn)入到交付管道的后續(xù)環(huán)節(jié)。

Dojo 構(gòu)建在 TypeScript 之上,提供了顯式的類(lèi)型和靜態(tài)編譯時(shí)的類(lèi)型檢查。使用 Dojo 構(gòu)建的應(yīng)用程序可以用到 TypeScript(而不是普通的 JavaScript)帶來(lái)的優(yōu)勢(shì)。

當(dāng)使用 Dojo CLI 構(gòu)建應(yīng)用程序時(shí),應(yīng)用程序的構(gòu)建過(guò)程會(huì)默認(rèn)包含 TypeScript 的編譯階段。開(kāi)發(fā)人員從一開(kāi)始就能編寫(xiě)出類(lèi)型安全的應(yīng)用程序。

模塊化——單一職責(zé)原則

理想情況下,一個(gè)組件應(yīng)該足夠小,以便它只實(shí)現(xiàn)單一職責(zé)。一個(gè)組件越簡(jiǎn)單、封裝程度越高,則大量程序員長(zhǎng)期理解和維護(hù)時(shí)就越容易。擁有龐大代碼庫(kù)的大型應(yīng)用程序就是由大量的更小、更容易理解的組件組合而成的。

試圖降低復(fù)雜度時(shí),在單個(gè)組件中隔離職責(zé)有以下好處:

  • 限制范圍。假設(shè)組件維護(hù)一套一致的 API,則能在不影響外部用戶使用的情況下更改內(nèi)部實(shí)現(xiàn)。相反,組件的詳細(xì)信息保存在定義模塊的內(nèi)部,這意味著其定義不會(huì)與其他組件的定義沖突,所以就不會(huì)與其他組件的命名約定重疊。
  • 簡(jiǎn)化測(cè)試需求,因?yàn)閱卧獪y(cè)試只需關(guān)注單一職責(zé),而不是多個(gè)條件組合成的越來(lái)越多的應(yīng)用程序邏輯。
  • 組件可以在多處重用,避免多處重復(fù)實(shí)現(xiàn)。修復(fù)錯(cuò)誤時(shí),只需專(zhuān)注于單個(gè)組件,而不是散落在各處的單獨(dú)實(shí)例。

對(duì)于 web 應(yīng)用程序而言,隔離還能為終端用戶帶來(lái)額外的好處。應(yīng)用程序可以劃分為多個(gè)層,用戶在給定的時(shí)間點(diǎn)只加載他們感興趣的層。這減少了資源大小和網(wǎng)絡(luò)傳輸需求,從而縮短了加載時(shí)間。

Dojo 應(yīng)用程序的組件

Index 網(wǎng)頁(yè)

HTML 頁(yè)面是每個(gè)應(yīng)用程序的基本內(nèi)容,Dojo 應(yīng)用程序也不例外。傳統(tǒng)上,單個(gè) index.html 文件既是應(yīng)用程序的入口點(diǎn),也是將應(yīng)用程序的整體結(jié)構(gòu)存入 DOM 的根容器。

Dojo 應(yīng)用程序通常會(huì)注入到單個(gè) DOM 元素中,默認(rèn)情況下是注入到 document.body 中。這使得 Dojo 應(yīng)用程序可以與頁(yè)面中的其他內(nèi)容共存——靜態(tài)資源、傳統(tǒng)的應(yīng)用程序、甚至是另外一個(gè) Dojo 應(yīng)用程序。

部件

Dojo 中的部件與 DOM 元素類(lèi)似,是 Dojo 應(yīng)用程序中封裝的核心概念。正如傳統(tǒng)網(wǎng)站是通過(guò) DOM 元素逐層構(gòu)建的一樣,Dojo 應(yīng)用程序則是通過(guò)部件逐層構(gòu)建的。

部件可以描述一切,從單個(gè)界面元素(如 label 或 textbox)到更復(fù)雜的容器(如 form 表單、頁(yè)面或者整個(gè)應(yīng)用程序)。

類(lèi)似地,并非 DOM 中的所有元素都對(duì)用戶可見(jiàn),Dojo 部件不僅提供用戶界面,也可以實(shí)現(xiàn)應(yīng)用程序的所有幕后需求。

詳見(jiàn)創(chuàng)建 Dojo 部件參考文檔,了解如何在應(yīng)用程序中創(chuàng)建部件。

TypeScript 模塊

Dojo 部件可以是一個(gè)渲染函數(shù)工廠或者 TypeScript 類(lèi),通常包含在單個(gè) TypeScript 模塊中。該模塊封裝了組成部件的大部分內(nèi)容,包括它的行為以及虛擬 DOM 的語(yǔ)義化表示。

部件通過(guò)屬性接口向外部消費(fèi)者提供 API。這個(gè)接口既可包含狀態(tài)字段列表,在渲染時(shí)注入到部件中;也可以包含函數(shù),當(dāng)事件發(fā)生時(shí),部件需要通知應(yīng)用程序的其他部分時(shí)調(diào)用,比如部件狀態(tài)的變更。

CSS 模塊

部件的外觀樣式是交由 CSS 設(shè)置的,與常規(guī)的 HMTL 元素樣式類(lèi)似。CSS 模塊用于封裝單個(gè)部件的樣式,避免與其他部件的 CSS 類(lèi)名沖突。

部件導(dǎo)入 CSS 模塊跟導(dǎo)入其他 TypeScript 模塊一樣,并允許通過(guò)對(duì)象屬性引用 CSS 類(lèi)名,這些屬性會(huì)在開(kāi)發(fā)人員的 IDE 中自動(dòng)提示。在定義部件的語(yǔ)義元素結(jié)構(gòu)時(shí),可以使用這些屬性名指定樣式類(lèi)。部件中的 CSS 類(lèi)名和最終的樣式類(lèi)名不一致,而這可以在構(gòu)建階段識(shí)別出來(lái)。

雖然部件的 CSS 模塊可以完全封裝自身的樣式,但通常也需要一些靈活性。部件可以在應(yīng)用程序的不同配置下使用,每個(gè)配置都有自己獨(dú)特的外觀需求。Dojo 提供了覆蓋特定樣式的能力以滿足這個(gè)需求。

為了支持應(yīng)用程序?qū)用嫱庥^的一致性,可以通過(guò)主題進(jìn)一步控制部件的樣式。

詳見(jiàn) Dojo 樣式和主題參考文檔,了解如何為單個(gè)部件設(shè)置樣式。

狀態(tài)管理

企業(yè)應(yīng)用程序通常需要持久化狀態(tài),并允許用戶以各種方式查看和操作這些數(shù)據(jù)。當(dāng)需要同時(shí)在多處訪問(wèn)和編輯同一數(shù)據(jù),且要保持?jǐn)?shù)據(jù)的一致性時(shí),狀態(tài)管理可以成為大型應(yīng)用程序中最復(fù)雜的領(lǐng)域之一。

狀態(tài)通常存在位于 web 應(yīng)用程序組件外部的數(shù)據(jù)存儲(chǔ)或數(shù)據(jù)庫(kù)中,這意味著一些狀態(tài)管理復(fù)雜性需要在應(yīng)用程序之外解決。然而,對(duì)于數(shù)據(jù)在應(yīng)用程序與其用戶之間流動(dòng)的情況,有幾個(gè)范例能夠大大的降低管理復(fù)雜狀態(tài)的風(fēng)險(xiǎn)。

響應(yīng)式的數(shù)據(jù)修改

以命令式方式編寫(xiě)的應(yīng)用程序會(huì)描述應(yīng)更改哪些數(shù)據(jù),應(yīng)該如何更改,以及指定必須在何時(shí)何地更改。如果通過(guò)某種形式的計(jì)算或賦值在邏輯上連接多塊數(shù)據(jù),則這些連接在一段時(shí)間后只能表示成離散的點(diǎn)。久而久之,除了這些點(diǎn)之外,可能會(huì)以違反預(yù)期邏輯連接的方式修改任何數(shù)據(jù)值。

相反,以響應(yīng)式方式編寫(xiě)的應(yīng)用程序設(shè)法提升數(shù)據(jù)之間的邏輯連接,并放棄對(duì)明確地指定何時(shí)何地修改數(shù)據(jù)的控制,以使邏輯數(shù)據(jù)連接始終保持一致。

具有多個(gè)服務(wù)層的復(fù)雜應(yīng)用程序可能會(huì)在多處描述相同的數(shù)據(jù),因?yàn)樗鼈兩⒙湓趹?yīng)用程序的各處——這方面的一種常見(jiàn)模式是使用數(shù)據(jù)傳輸對(duì)象。一段數(shù)據(jù)的描述位置越多,則維護(hù)應(yīng)用程序狀態(tài)完整性的復(fù)雜度呈指數(shù)級(jí)增長(zhǎng)。

任何應(yīng)用程序只要 UI 需要?jiǎng)討B(tài)展示(包括 web 應(yīng)用程序),都會(huì)遇到維護(hù)邏輯數(shù)據(jù)連接一致性的問(wèn)題。這些應(yīng)用程序中的數(shù)據(jù)通常至少有兩種表示方式。

舉例說(shuō)明問(wèn)題

假設(shè)有一個(gè)待辦事項(xiàng)應(yīng)用程序,它存儲(chǔ)了一組任務(wù),當(dāng)向用戶顯示時(shí),每個(gè)任務(wù)都有以下兩種數(shù)據(jù)表示方式:

  • 任務(wù)的確切描述(它的“真實(shí)來(lái)源”,例如它在數(shù)據(jù)存儲(chǔ)中的值)
  • 任務(wù)描述的副本,通過(guò) UI 元素(如 label 或 textbox)呈現(xiàn)給用戶。

如果用戶只能查看任務(wù),則有幾個(gè)問(wèn)題與如何修改任務(wù)的描述以讓用戶可見(jiàn)有關(guān)。

如果在底層的數(shù)據(jù)存儲(chǔ)中更改了任務(wù),則需要通過(guò) UI 向上傳播新的描述信息,這樣用戶就不會(huì)查看過(guò)時(shí)的數(shù)據(jù)。如果任務(wù)顯示在 UI 的多個(gè)位置,則所有實(shí)例都需要更新,確保用戶不會(huì)在不同位置看到的數(shù)據(jù)不一致。

如果用戶還可以修改任務(wù)(比如更改描述信息),則還需要解決其他問(wèn)題。

任務(wù)描述現(xiàn)在有兩處真正的來(lái)源:數(shù)據(jù)存儲(chǔ)中的舊值,以及用戶在 textbox 中輸入的新值。

然后,需要將修改請(qǐng)求傳回給底層的數(shù)據(jù)存儲(chǔ),以便用新值替換舊值。修改完成后,需要將新的任務(wù)描述返回給用戶,讓用戶看到更改后的正確值。嘗試修改任務(wù)描述時(shí)會(huì)發(fā)生的任何錯(cuò)誤也需要在數(shù)據(jù)交換時(shí)考慮。

Dojo 的狀態(tài)管理

對(duì)于最基本的狀態(tài)管理需求,部件可以使用本地變量管理自身的狀態(tài)。雖然這種方法有助于隔離和封裝,但它只適用于非常簡(jiǎn)單的用例,如只在應(yīng)用程序中出現(xiàn)一次的部件,或者與應(yīng)用程序處理的所有其他狀態(tài)都斷開(kāi)了連接的部件。

隨著在部件間共享狀態(tài)的需求增加,Dojo 支持響應(yīng)式的控制反轉(zhuǎn)。將狀態(tài)提升到父容器部件中,然后使用子部件的 properties 接口注入到子部件中。如果需要,這種狀態(tài)提升可以橫穿整個(gè)部件層級(jí),將狀態(tài)集中在應(yīng)用程序根部件中,然后將部分狀態(tài)注入到相關(guān)的子分支中。

對(duì)于更復(fù)雜的需求,或者對(duì)于較深的部件層級(jí)且不希望在不相關(guān)的中間層傳遞狀態(tài),則外部的數(shù)據(jù)存儲(chǔ)可能是最好的方法。集中的數(shù)據(jù)存儲(chǔ)能夠幫助應(yīng)用程序處理大量的狀態(tài),允許復(fù)雜的狀態(tài)編輯操作,或者在多處請(qǐng)求相同的狀態(tài)子集。

Dojo 提供了一個(gè) Store 組件,它支持多種高級(jí)的狀態(tài)管理需求,例如:

  • 內(nèi)置支持異步調(diào)用,例如調(diào)用遠(yuǎn)程服務(wù)進(jìn)行數(shù)據(jù)管理。
  • 狀態(tài)操作按確定的順序執(zhí)行。
  • 記錄狀態(tài)操作歷史,允許回滾或撤銷(xiāo)操作。
  • 中間件用于包裝數(shù)據(jù)操作流程,可添加橫切點(diǎn),如用于授權(quán)或記日志。
  • 內(nèi)置支持基于 LocalStorage 的數(shù)據(jù)存儲(chǔ),有助于實(shí)現(xiàn) PWA。
  • 支持樂(lè)觀的數(shù)據(jù)更新,失敗時(shí)會(huì)自動(dòng)回滾。

用戶體驗(yàn)

Web 應(yīng)用程序本質(zhì)上是通過(guò)用戶界面提供體驗(yàn)的,應(yīng)用程序的作者需要考慮各種因素,以向用戶展示最好的界面。一致的可視化外觀和可訪問(wèn)性通常是最顯眼的因素,但也需要關(guān)注效率和性能,無(wú)論是應(yīng)用程序的邏輯,還是交付的內(nèi)容,都有助于提升 web 應(yīng)用程序的用戶體驗(yàn)。

主題

應(yīng)用程序提供最佳用戶體驗(yàn)的一種方式是向最終用戶提供一致的外觀。這可能與在類(lèi)似的元素中使用一致的字體一樣簡(jiǎn)單,但通常會(huì)擴(kuò)展到使用相同的色調(diào)顯示應(yīng)用程序,甚至實(shí)現(xiàn)一整套設(shè)計(jì)語(yǔ)言,如 Material Design。

Dojo 的樣式管道使用 CSS 模塊將樣式規(guī)則封裝到特定的部件中,避免在大型代碼庫(kù)中交叉污染。但是,樣式并不是完全隔離的——集中的 CSS 變量能夠定義公共的主題屬性并在應(yīng)用程序的所有部件間共享。也可以為 Dojo 部件套件提供自定義主題。

詳見(jiàn) Dojo 樣式和主題參考文檔,了解如何創(chuàng)建應(yīng)用程序主題。

UI 部件套件

通過(guò)部件套件,Dojo 提供了一些現(xiàn)成的 UI 組件。開(kāi)發(fā)人員可以立即使用這些部件制作許多常見(jiàn)的頁(yè)面,如 combobox、button、list、tab、text input 和 calendar 等部件。

Dojo 的部件支持國(guó)際化、可訪問(wèn)性和主題,讓開(kāi)發(fā)人員在無(wú)需自定義 UI 組件的情況下,能夠靈活的交付應(yīng)用程序?qū)S械挠脩趔w驗(yàn)。

導(dǎo)航路由

雖然有些應(yīng)用程序?yàn)橛脩籼峁┝艘粋€(gè)主視圖,其中可以處理大部分工作,但很多應(yīng)用程序中用戶需要訪問(wèn)更多的區(qū)塊。幫助頁(yè)面、設(shè)置面板或者分步驟工作流這些例子中,應(yīng)用程序可能有多個(gè)界面,用戶可以在任何時(shí)間訪問(wèn)這些界面。

應(yīng)用程序的每塊內(nèi)容都需要唯一標(biāo)識(shí)符,這樣用戶就可以訪問(wèn)它們。這些標(biāo)識(shí)符也必須要支持為鏈接設(shè)置書(shū)簽和分享鏈接,以便跳轉(zhuǎn)到應(yīng)用程序特定區(qū)塊。用戶也需要在不同區(qū)塊間導(dǎo)航,以便可以訪問(wèn)應(yīng)用程序提供的所有功能。導(dǎo)航可以前進(jìn)到下一步、后退到上一步或者根據(jù)用戶的選擇在多個(gè)選項(xiàng)間跳轉(zhuǎn)。

使用靜態(tài)文件的傳統(tǒng)網(wǎng)站包含可單獨(dú)識(shí)別的內(nèi)容,因?yàn)檎军c(diǎn)中的每個(gè)靜態(tài)文件都能單獨(dú)訪問(wèn)。HTML 文件可使用錨點(diǎn)元素,通過(guò)點(diǎn)擊鏈接在不同文件間導(dǎo)航,而不必手動(dòng)修改瀏覽器地址欄中的 URI。

顧名思義,單頁(yè)面 web 應(yīng)用程序只有一個(gè)主文件,用戶通過(guò)該文件訪問(wèn)整個(gè)應(yīng)用程序。但是,這些單頁(yè)面應(yīng)用可以使用 URI(連同 URI 已有的優(yōu)點(diǎn))來(lái)標(biāo)識(shí)每一個(gè)小節(jié)。

路由組件為跨層級(jí)的路由提供了導(dǎo)航選項(xiàng),并會(huì)將相應(yīng)的已標(biāo)識(shí)的路由分發(fā)到相應(yīng)的應(yīng)用程序區(qū)塊。路由還將處理任何錯(cuò)誤條件,例如導(dǎo)航到不存在的路由。

Dojo 路由

Dojo 的路由系統(tǒng)允許將 URL 的子路徑注冊(cè)為路由,以鏈接到某個(gè)特定類(lèi)型部件上,這個(gè)特定類(lèi)型的部件稱(chēng)為 Outlet。當(dāng)用戶導(dǎo)航到特定的路由時(shí),將會(huì)渲染注冊(cè)到該路由上的 Outlet 部件。

當(dāng)用戶導(dǎo)航到 Outlet 時(shí),就會(huì)“渲染” Outlet,但 Outlet 很少直接處理應(yīng)用程序的渲染。Outlet 主要是處理導(dǎo)航的封裝器(傳入查詢參數(shù)或者處理錯(cuò)誤的回調(diào)),而將渲染功能委托給應(yīng)用程序中的其他部件。

類(lèi)似于在傳統(tǒng) HTML 頁(yè)面中使用的錨點(diǎn),應(yīng)用程序可以使用與 Outlet 關(guān)聯(lián)的 Link 部件向用戶提供導(dǎo)航選項(xiàng)。

當(dāng)使用路由時(shí),Dojo 的構(gòu)建系統(tǒng)能為應(yīng)用程序中的所有頂級(jí)路由自動(dòng)生成單獨(dú)的包。然后可以根據(jù)需要將每個(gè)包獨(dú)立的交付給用戶。

詳見(jiàn) Dojo 路由參考指南,了解如何在自己的應(yīng)用程序中實(shí)現(xiàn)路由。

效率和性能

高效的渲染

動(dòng)態(tài)網(wǎng)站內(nèi)容(即包含 JavaScript)成為 web 的一部分已經(jīng)有很多年了。長(zhǎng)期以來(lái),站點(diǎn)就可以包含一些腳本來(lái)操作 DOM,進(jìn)行添加、更新或刪除內(nèi)容。但是,Web 的起源(至今仍然是它的一大關(guān)鍵特征)是以靜態(tài)頁(yè)面為基礎(chǔ)的。隨著時(shí)間的推移,瀏覽器的 DOM 實(shí)現(xiàn)得到了優(yōu)化,以便盡可能高效地、快速地向最終用戶渲染靜態(tài)內(nèi)容。

近年來(lái),隨著 web 應(yīng)用程序越來(lái)越復(fù)雜,瀏覽器已通過(guò) DOM 性能優(yōu)化做出了回應(yīng),針對(duì)動(dòng)態(tài)內(nèi)容作了優(yōu)化。然而,為了渲染用戶界面,web 應(yīng)用程序仍然需要與一套幾十年不變的命令式 API 交互。圍繞響應(yīng)式數(shù)據(jù)傳播而設(shè)計(jì)的現(xiàn)代 web 應(yīng)用程序需要一種更高效的方式,將用戶界面轉(zhuǎn)換為網(wǎng)頁(yè)的 DOM。

Dojo 將 DOM 從應(yīng)用程序中抽象出來(lái),推薦使用響應(yīng)式狀態(tài)流來(lái)最小化應(yīng)用程序的樣板文件,同時(shí)提高了渲染性能。部件會(huì)在渲染函數(shù)中輸出虛擬節(jié)點(diǎn),這些渲染函數(shù)使用虛擬 DOM 描述部件的結(jié)構(gòu)層級(jí)。然后,框架以盡可能高效的方式處理 VDOM 的渲染,只會(huì)影響實(shí)際需要修改的 DOM 元素。

需要從 DOM 中獲取具體信息來(lái)實(shí)現(xiàn)其需求的應(yīng)用程序,Dojo 通過(guò)中間件系統(tǒng)提供了另一種 DOM 抽象層。Dojo 中間件以一致的方式解決了這些問(wèn)題,并仍然支持橫跨應(yīng)用程序的響應(yīng)式數(shù)據(jù)流。

應(yīng)用程序的交付——分層和包

隨著 web 應(yīng)用程序規(guī)模的增長(zhǎng),當(dāng)一個(gè)任務(wù)只需要訪問(wèn)一部分資源時(shí),卻必須加載應(yīng)用程序的所有資源,這樣效率就會(huì)越來(lái)越低。每一個(gè)應(yīng)用程序資源都有一個(gè)與大小相關(guān)的成本:內(nèi)存空間需求和網(wǎng)絡(luò)上的數(shù)據(jù)傳輸;所有這些都會(huì)影響到用戶開(kāi)始工作之前需要的等待時(shí)間。讓?xiě)?yīng)用程序只在需要的時(shí)候加載所需的內(nèi)容,從而將此成本保持在最低水平,這符合用戶的最大利益。

獲取應(yīng)用程序的資源時(shí),在 HTTP 資源協(xié)商方面會(huì)產(chǎn)生額外的開(kāi)銷(xiāo)??蛻舳诵枰?qǐng)求數(shù)據(jù),然后客戶端必須等待服務(wù)器發(fā)送完資源的最后一個(gè)字節(jié)。更嚴(yán)重的情況下,開(kāi)銷(xiāo)還包括 DNS 解析、TCP 連接重建和 TLS 密碼/證書(shū)協(xié)商。

瀏覽器可以有效地減少這一開(kāi)銷(xiāo),但是瀏覽器不能完全消除這一開(kāi)銷(xiāo)——應(yīng)用程序也有責(zé)任來(lái)減少資源傳輸?shù)拈_(kāi)銷(xiāo)。與資源的大小相比,獲取一個(gè)應(yīng)用程序資源的開(kāi)銷(xiāo)是相對(duì)不變的。獲取1KB 文件的開(kāi)銷(xiāo)與獲取100KB 文件的開(kāi)銷(xiāo)類(lèi)似。

因此可以通過(guò)兩種方式降低開(kāi)銷(xiāo):減少資源總數(shù)和增加單個(gè)資源的大小。web 應(yīng)用程序可以通過(guò)分層和將相關(guān)的資源打包來(lái)實(shí)現(xiàn)這兩種方式。

單個(gè)層中應(yīng)該包含應(yīng)用程序中特定功能相關(guān)的資源集。當(dāng)用戶訪問(wèn)該功能時(shí),層中的所有資源可能同時(shí)加載。然后一個(gè)層包含的所有內(nèi)容都可以打包到一個(gè)文件中,以便更高效地傳送給用戶。

自動(dòng)分層

當(dāng)使用 Dojo 的路由系統(tǒng)時(shí),應(yīng)用程序可以從自動(dòng)分層和打包中獲益。應(yīng)用程序中的每個(gè)頂級(jí)路由都成為一個(gè)單獨(dú)的層,Dojo 的構(gòu)建系統(tǒng)會(huì)自動(dòng)打包每層內(nèi)容。這樣就可以對(duì)層分離,以及打包資源,而不需要配置額外的工具鏈。這種自動(dòng)化方案有一處折衷,即在每個(gè)包中都內(nèi)聯(lián)和復(fù)制了跨多個(gè)層的公共依賴項(xiàng)。

聲明分層

復(fù)雜的應(yīng)用程序可能需要對(duì)層或包的定義做更細(xì)粒度的控制。例如,如果應(yīng)用程序有一組橫跨多個(gè)路由的公共依賴項(xiàng),不要在每個(gè)包中內(nèi)聯(lián)或復(fù)制這些依賴,則需要將公共依賴提取到自己的包中,然后在第一次引用時(shí)延遲加載。

Dojo 的構(gòu)建管道允許在應(yīng)用程序的 .dojorc 構(gòu)建配置文件中指定資源包,然后能自動(dòng)將橫跨多個(gè)包的模塊依賴項(xiàng)轉(zhuǎn)換為延遲加載的引用。

可訪問(wèn)性與國(guó)際化

Web 本質(zhì)上是全球性的,為其編寫(xiě)的應(yīng)用程序需要支持所有用戶。文本需要按用戶選擇的語(yǔ)言和腳本顯示,并且需要根據(jù)用戶的區(qū)域設(shè)置對(duì)日期、時(shí)間、數(shù)字和貨幣等值進(jìn)行相應(yīng)的格式化。

Dojo 允許輕松使用消息包將文本消息從應(yīng)用程序邏輯中分離出來(lái),然后根據(jù)需要選擇使用 Unicode CLDR 數(shù)據(jù)的相關(guān)部分支持更高級(jí)的值格式化。

開(kāi)發(fā) web 時(shí),需要應(yīng)用程序?qū)τ脩糇銐虬?,不論用戶是否需要可訪問(wèn)性。W3C 的可訪問(wèn)性提案已經(jīng)幫助標(biāo)準(zhǔn)化了許多這方面的需求,包括對(duì)可訪問(wèn)的富 Internet 應(yīng)用程序做的額外工作。

使用 Dojo 的部件套件開(kāi)發(fā)的應(yīng)用程序已提供了現(xiàn)成的 WAI-ARIA 屬性。雖然 Dojo 在這一點(diǎn)上提供了幫助,但它只也只能做這么多——應(yīng)用程序作者有額外的責(zé)任來(lái)驗(yàn)證他們的應(yīng)用程序提供的可訪問(wèn)性級(jí)別。建議在應(yīng)用程序的交付生命周期中包含顯式的可訪問(wèn)性測(cè)試步驟。

詳見(jiàn) Dojo 國(guó)際化參考文檔,了解如何為全球用戶開(kāi)發(fā) Dojo 應(yīng)用程序。

可適配的外觀

當(dāng)前社會(huì),Internet 的重要性與日俱增,應(yīng)用程序被要求能適應(yīng)用戶訪問(wèn) web 的各種方式。較小尺寸的移動(dòng)體驗(yàn)已經(jīng)超過(guò)了桌面,但較大的外觀仍然可以滿足復(fù)雜的應(yīng)用程序需求。Dojo 提供了多種解決方案,幫助開(kāi)發(fā)人員創(chuàng)建適應(yīng)用戶訪問(wèn)需求的應(yīng)用程序。

當(dāng)需要預(yù)渲染內(nèi)容時(shí)(如開(kāi)發(fā)靜態(tài)站點(diǎn)時(shí)),Dojo 應(yīng)用程序可以利用構(gòu)建時(shí)渲染(BTR),應(yīng)用程序結(jié)構(gòu)的一部分或全部都是在構(gòu)建時(shí)計(jì)算的,而不是在用戶瀏覽器中運(yùn)行時(shí)計(jì)算的。Dojo 提供了一個(gè)靈活的基于塊 BTR 的解決方案,當(dāng)構(gòu)建應(yīng)用程序時(shí)能運(yùn)行 Node.js 腳本,支持讀取文件來(lái)獲取內(nèi)容等功能。Dojo 的 BTR 解決方案也支持漸進(jìn)式融合,以在預(yù)渲染內(nèi)容之上支持動(dòng)態(tài)行為。

漸進(jìn)式 web 應(yīng)用程序(PWA)有助于提供與本地設(shè)備 App 接近的體驗(yàn),同時(shí)依然能從 web 支持的可移植性和易交付等功能中受益。Dojo 通過(guò)簡(jiǎn)單的構(gòu)建配置就能幫助創(chuàng)建 PWA,開(kāi)發(fā)人員可以在應(yīng)用程序中添加離線使用、后臺(tái)數(shù)據(jù)同步和推送通知等。

Dojo 允許開(kāi)發(fā)人員通過(guò)中間件系統(tǒng),在所有的交付目標(biāo)上以一致的方式使用幾個(gè)即將可用的 web API。Intersection observer API 用于更好的控制渲染,僅渲染用戶可見(jiàn)的部件,例如支持無(wú)線滾動(dòng)列表。Resize observer API 能夠讓?xiě)?yīng)用程序動(dòng)態(tài)響應(yīng)視窗大小的變化,允許界面在桌面和移動(dòng)視窗的所有分辨率間逐步適應(yīng)。

應(yīng)用程序的開(kāi)發(fā)生命周期

Dojo 為開(kāi)發(fā) web 應(yīng)用程序提供了一個(gè)端到端的管道。應(yīng)用程序的作者可以使用 dojo create app CLI 命令快速創(chuàng)建 Dojo 應(yīng)用程序。然后可以使用 dojo build app 命令在開(kāi)發(fā)模式和生產(chǎn)模式下構(gòu)建應(yīng)用程序。使用本地 HTTP 服務(wù)運(yùn)行應(yīng)用程序,并監(jiān)視對(duì)項(xiàng)目文件的修改,構(gòu)建工具為快速開(kāi)發(fā)和迭代提供支持。使用這種機(jī)制,開(kāi)發(fā)人員可以在運(yùn)行的應(yīng)用程序中更改代碼并能立即看到結(jié)果。

這些命令是模塊化 Dojo CLI 工具鏈的一部分,該工具鏈支持開(kāi)發(fā)生命周期中的各種使用。通過(guò)應(yīng)用程序根目錄下的 .dojorc 配置文件,可以配置應(yīng)用程序的構(gòu)建管道。

詳見(jiàn) Dojo 構(gòu)建參考文檔,了解如何使用 Dojo 構(gòu)建各種應(yīng)用程序。

測(cè)試的策略

編譯器和靜態(tài)類(lèi)型檢查程序無(wú)法捕獲出所有的錯(cuò)誤。編寫(xiě)的功能在語(yǔ)法和邏輯上是有效的,但要么在運(yùn)行時(shí)出現(xiàn)無(wú)法預(yù)見(jiàn)的問(wèn)題,要么不是按預(yù)期的要求執(zhí)行功能。為了降低這種風(fēng)險(xiǎn),需要進(jìn)行額外的測(cè)試。

當(dāng)使用 Dojo CLI 構(gòu)建應(yīng)用程序時(shí),默認(rèn)會(huì)內(nèi)置一個(gè) Intern 測(cè)試庫(kù)的測(cè)試運(yùn)行器。這樣開(kāi)發(fā)人員人員在編寫(xiě)應(yīng)用程序功能的同時(shí)就可以立即編寫(xiě)測(cè)試代碼。

Intern 為很多測(cè)試場(chǎng)景提供了解決方案,但可能不足以滿足項(xiàng)目的所有測(cè)試需求。Dojo 也提供了一個(gè)簡(jiǎn)單的測(cè)試工具,允許應(yīng)用程序測(cè)試代碼在 VDOM 的抽象層級(jí)驗(yàn)證框架和部件。這個(gè)工具可以用在很多測(cè)試運(yùn)行器中,如 Intern、Jest 或應(yīng)用程序測(cè)試策略所需的任何其他程序。

詳見(jiàn) Dojo 測(cè)試參考文檔,了解如何高效測(cè)試 Dojo 應(yīng)用程序。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI