嘯達(dá)同學(xué)的zone.js系列分享第四篇，新鮮出爐，終于等到了Angular對(duì)zone.js的使用

zone.js系列往期文章

• zone.js由入門到放棄之一——通過(guò)一場(chǎng)游戲認(rèn)識(shí)zone.js

• zone.js由入門到放棄之二——zone.js API大練兵

• zone.js由入門到放棄之三——zone.js 源碼分析【setTimeout篇】

NgZone

我在《zone.js由入門到放棄之一》中簡(jiǎn)述過(guò)zone.js和NgZone的關(guān)系，我說(shuō)ngZone生于zone.js；長(zhǎng)于Angular。在這里我再解釋一下這句話的意思：首先zone.js維護(hù)了一個(gè)執(zhí)行上下文棧，可以幫助開發(fā)者追蹤異步任務(wù)、并通過(guò)生命周期勾子注入業(yè)務(wù)。NgZone實(shí)際上就是一個(gè)從root zone中fork出來(lái)的子zone。只不過(guò)這個(gè)子zone是專門為Angular量身定做的，并被當(dāng)作一個(gè)可注入的服務(wù)被集成到Angular開發(fā)工具中。我見(jiàn)過(guò)有些文章中說(shuō)Angular封裝了zone.js從而構(gòu)建出NgZone。其實(shí)這種說(shuō)法是不準(zhǔn)確的，個(gè)人理解，Angular其實(shí)并沒(méi)有對(duì)zone.js的框架或是核心做任何改動(dòng)，只是利用zone.js的執(zhí)行上下文來(lái)監(jiān)聽異步事件，從而指導(dǎo)Angular在合適的時(shí)機(jī)進(jìn)行變更檢測(cè)。

NgZone的前半生

本文的開始，我們先看下NgZone是在何時(shí)何處構(gòu)造出來(lái)的：

首先，一個(gè)Angular的工程的入口文件是main.ts。在main.ts中，大家大多都會(huì)見(jiàn)到這么一句platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));，我這里簡(jiǎn)單敘述一下這里到底執(zhí)行了些啥。Angular是支持跨平臺(tái)運(yùn)行的，那么Angular在執(zhí)行前需要確定當(dāng)前工程到底是運(yùn)行在哪一個(gè)平臺(tái)下的：瀏覽器？服務(wù)端（SSR）？WebWorker？或是移動(dòng)端？

platformBrowserDynamic()方法返回的實(shí)際就是一個(gè)平臺(tái)對(duì)象PlatformRef，PlatformRef中定義了如何引導(dǎo)啟動(dòng)一個(gè)Angular應(yīng)用。在這里我多扯幾句Angular實(shí)現(xiàn)化平臺(tái)運(yùn)行的原理。Angular工程在初始化的時(shí)候會(huì)注入很多基礎(chǔ)服務(wù)，比如Renderer2、Compiler等等很多。這些服務(wù)其實(shí)都是一些抽象類，對(duì)外提供了統(tǒng)一的API，對(duì)內(nèi)會(huì)屏蔽了不同平臺(tái)之間的差異。當(dāng)我們的Angular應(yīng)用運(yùn)行在不同平臺(tái)時(shí)，Angular都會(huì)有一套相對(duì)應(yīng)的實(shí)現(xiàn)邏輯；就像設(shè)計(jì)模式中的適配器一樣，不同平臺(tái)有不同平臺(tái)的adapter。這也就是為什么，我們?cè)跒g覽器時(shí)使用BrowserModule啟動(dòng)應(yīng)用；而在SSR中使用AppServerModule啟動(dòng)應(yīng)用。

那么在瀏覽器模式下，platformBrowserDynamic()返回的平臺(tái)信息在application_ref.ts這個(gè)文件下。這個(gè)服務(wù)對(duì)外暴漏了一個(gè)bootstrapModuleFactory方法，當(dāng)我們通過(guò)bootstrapModule啟動(dòng)Angular應(yīng)用的時(shí)候，bootstrapModule最終會(huì)調(diào)用到bootstrapModuleFactory。而從這個(gè)bootstrapModuleFactory開始，我們將第一次在Angular中看到NgZone的身影。

bootstrapModuleFactory何許人也

bootstrapModuleFactory中通過(guò)getZone方法構(gòu)建了ngZone服務(wù)。getZone方法也比較簡(jiǎn)單，它會(huì)實(shí)例化一個(gè)NgZone服務(wù)。

而下面就是我簡(jiǎn)化過(guò)后NgZone的構(gòu)建邏輯，是不是一下子看到很多熟悉的勾子函數(shù)。正向前文說(shuō)的，NgZone就是一個(gè)特殊的Zone，而幫助Angular進(jìn)行變更檢測(cè)的所有邏輯都集中在ZoneSpec中定義的這幾個(gè)勾子中，了解了這些內(nèi)容會(huì)對(duì)掌握Angular變更檢測(cè)原理提供很大幫助。不過(guò)本期不會(huì)對(duì)這幾個(gè)勾子進(jìn)行詳細(xì)講解，下一篇文章，我會(huì)step by step地演示這其中的邏輯，對(duì)這塊感興趣的可以關(guān)注一下。

所以本期講解到此結(jié)束…

哈哈，我當(dāng)然不會(huì)這么敷衍的，其實(shí)到這里這次的NgZone分享才剛剛開始。NgZone有個(gè)非常有意思的屬性叫做_outer，因?yàn)榇蠹以谑褂肁ngular的時(shí)候很少會(huì)直接跟zone.js接觸，而這個(gè)_outer，它也是一個(gè)zone的實(shí)例，它在Angular中的存在感要遠(yuǎn)比zone.js多的多。后文中，我們統(tǒng)一把_outer稱之為OuterZone，而把_inner稱之為InnerZone。

OuterZone

曾經(jīng)有一個(gè)作者這么評(píng)價(jià)zone.js對(duì)Angular的貢獻(xiàn)：

作為 Angular 開發(fā)者，我們每個(gè)人都欠 Zone.js 一頓飯：多虧了有 Zone 的協(xié)助，我們能夠以魔術(shù)般的方式使用 Angular；事實(shí)上，大部分時(shí)候我們只是修改了一個(gè)屬性，Angular 就會(huì)自動(dòng)渲染組件，確保視圖總是及時(shí)更新。非?？幔?/p>

話雖如此，但是如果我說(shuō)OuterZone的出現(xiàn)就是為了讓Angular可以擺脫zone.js的控制而運(yùn)行，這會(huì)不會(huì)顯得很打臉。Angular團(tuán)隊(duì)解釋這么做是為了性能。因?yàn)閦one.js會(huì)在初始化時(shí)將很多異步方法Patch了，從而可以監(jiān)控到這些異步任務(wù)，并通知Angular在適當(dāng)?shù)臅r(shí)機(jī)進(jìn)行變更檢測(cè)。但是有的時(shí)候，我們有些業(yè)務(wù)并不需要觸發(fā)變更檢測(cè)，畢竟每進(jìn)行一次變更檢測(cè)在時(shí)間和空間上都是有消耗的。尤其是像拖拽、鼠標(biāo)移動(dòng)、滾動(dòng)條這種事件，他們會(huì)在短時(shí)間被觸發(fā)多次。如果每次事件觸發(fā)都需要進(jìn)行變更檢測(cè)，那就太浪費(fèi)了。所以，Angular團(tuán)隊(duì)以及zone.js的作者都開始想辦法，讓開發(fā)者的一些動(dòng)作可以不受zone.js的“監(jiān)管”。這里我總結(jié)了幾種辦法：

• 使用noop代替zone.js，讓Angular完全與zone.js脫離關(guān)系

• 使用OnPush策略

• 讓zone.js停止對(duì)某些異步方法進(jìn)行跟蹤

• 使用OuterZone

讓Angular完全與zone.js脫離關(guān)系

這一點(diǎn)其實(shí)Angular團(tuán)隊(duì)已經(jīng)寫到官方指導(dǎo)中了，Angular團(tuán)隊(duì)同時(shí)也給出了代碼案例說(shuō)明了脫離zone.js后應(yīng)該如何進(jìn)行變更檢測(cè)。這里我就不過(guò)多介紹這部分內(nèi)容了，畢竟修改起來(lái)也就2行代碼的事。

OnPush策略

由于上面脫離方式過(guò)于暴烈，Angular同時(shí)又提供了OnPush策略用來(lái)進(jìn)行組件級(jí)的性能優(yōu)化。其實(shí)按道理講，OnPush策略其實(shí)跟zone.js并沒(méi)有什么關(guān)系，放在這里只不過(guò)是想說(shuō)明一下，這也是一種讓代碼“脫離”變更檢測(cè)的方式（OnPush策略并不是完全脫離）。同時(shí)，Angular也建議在使用OnPush策略的時(shí)候，配合ChangeDetection一起使用，這樣能讓你在需要變更檢測(cè)的時(shí)候也能恢復(fù)變更檢測(cè)。對(duì)于OnPush策略的文獻(xiàn)也很多，我這里也不做展開了，感興趣的可以自己搜一下。

讓zone.js停止對(duì)某些異步方法進(jìn)行跟蹤

我在《zone.js由入門到放棄之二》中介紹過(guò)如何讓zone.js放棄對(duì)setTimeout進(jìn)行Patch，當(dāng)我設(shè)置了global.__Zone_disable_timers = true;后，setTimeout就不會(huì)被Patch了。諸如這樣的配置有很多，需要的可以點(diǎn)擊這里。??

使用OuterZone

首先，我們明確一下ngZone的構(gòu)造過(guò)程中生成了兩個(gè)Zone，InnerZone是負(fù)責(zé)跟Angular配合進(jìn)行變更檢測(cè)的；而OuterZone實(shí)際就是Zone.current，它并不會(huì)參與Angular的變更檢測(cè)。NgZone中定義了一個(gè)runOutsideAngular的方法，這個(gè)方法會(huì)調(diào)用OuterZone.run方法，讓參數(shù)中的fn可以執(zhí)行在OuterZone中。

舉個(gè)例子，假設(shè)你有一個(gè)setTimeout方法。當(dāng)這個(gè)方法在Angular中執(zhí)行時(shí)，由于zone.js對(duì)setTimeout進(jìn)行過(guò)打包，所以zone.js會(huì)追蹤setTimeout的各個(gè)執(zhí)行階段并觸發(fā)對(duì)應(yīng)的鉤子函數(shù)。又由于InnerZone是rootZone的一個(gè)子Zone，同時(shí)InnerZone中設(shè)置了大量了的勾子函數(shù)，所以InnerZone也可以感知到setTimeout的執(zhí)行過(guò)程，并在特定的情況下觸發(fā)便變檢測(cè)。在Angular中，大多的異步過(guò)程都是這么執(zhí)行的。

當(dāng)我們有一天不希望某個(gè)setTimeout方法再觸發(fā)變更時(shí)，我們可以讓這個(gè)setTimeout執(zhí)行在runOutsideAngular中。此時(shí)，因?yàn)镺uterZone沒(méi)有設(shè)置任何勾子函數(shù)，也不會(huì)通知Angular應(yīng)用進(jìn)行變更檢測(cè)。所以，runOutsideAngular實(shí)際上相當(dāng)于給你提供一塊世外桃源，讓你可以“安靜”地運(yùn)行一些異步任務(wù)。

Show me your code

上面講了這么多概念，下面我想用一個(gè)簡(jiǎn)單的性能優(yōu)化案例來(lái)串一下今天所有的知識(shí)點(diǎn)。在本期示例中，我們要做一個(gè)自動(dòng)登出的界面。界面每過(guò)5s會(huì)檢查一次頁(yè)面上是否有鼠標(biāo)操作。如果有，則頁(yè)面保持登錄狀態(tài)；如果沒(méi)有，界面自動(dòng)登出。在這里，我們僅對(duì)界面的登錄、登出狀態(tài)做簡(jiǎn)單處理——通過(guò)isLogined控制登錄狀態(tài)。

需求澄清

• Origin：界面每5s進(jìn)行一次檢測(cè)

• Origin：5s內(nèi)有鼠標(biāo)移動(dòng)、鼠標(biāo)滾輪事件觸發(fā)，則界面保持登錄態(tài)；反之，界面自動(dòng)登出

V1版本

V1版本中，app組件在構(gòu)造時(shí)啟動(dòng)定時(shí)器，定時(shí)器每過(guò)5s檢查頁(yè)面狀態(tài)isDirty。isDirty === trye，則頁(yè)面有鼠標(biāo)事件觸發(fā)；isDirty === false，則頁(yè)面自動(dòng)登出。鼠標(biāo)事件通過(guò)@HostListener監(jiān)聽；同時(shí)通過(guò)ngDoCheck勾子，觀測(cè)頁(yè)面進(jìn)行變更檢測(cè)的頻次。

通過(guò)Angular提供的DevTools可以方便地監(jiān)控到Angular應(yīng)用執(zhí)行過(guò)程中的性能情況，當(dāng)頁(yè)面加載后，只要稍微動(dòng)一動(dòng)鼠標(biāo)，Angular的變更檢測(cè)就會(huì)瘋狂執(zhí)行（每一個(gè)小柱子代表一次CD）。

下圖是界面中控制臺(tái)的瘋狂輸出，這里每當(dāng)界面上有鼠標(biāo)滾輪或是鼠標(biāo)移動(dòng)事件發(fā)生后，都會(huì)引起Angular進(jìn)行一次變更檢測(cè)。

V2版本

從V1版本的日志圖中我們可以發(fā)現(xiàn)，每次scrollmoved執(zhí)行過(guò)后都會(huì)緊跟一個(gè)rendering...打印。所以在V2版本中，我們先對(duì)需求做一些調(diào)整，我們刪除對(duì)滾輪事件的監(jiān)聽。為了能盡量全地演示這些性能提升手段，V2版本中，我們通過(guò)zone.js中的屏蔽手段屏蔽對(duì)鼠標(biāo)滾輪事件的檢測(cè)。

• Origin：界面每5s進(jìn)行一次檢測(cè)

• Changed：5s內(nèi)有鼠標(biāo)移動(dòng)、鼠標(biāo)滾輪事件觸發(fā)，則界面保持登錄態(tài)；反之，界面自動(dòng)登出

我在《zone.js由入門到放棄之二》中講過(guò)對(duì)setTimeout方法的屏蔽方法，這里我也把zone.js提供的所有屏蔽API分享出來(lái)，大家可以按需使用。

??????

在Angular中屏蔽很簡(jiǎn)單，但是有坑。

STEP1

增加一個(gè)zone-flag.v2.ts文件（文件名隨便?。?內(nèi)容就一行如下:

STEP2

在polyfills.ts文件中寫入:

切記，這里必須這么寫，直接把(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll'];寫到pollyfills是不行，想問(wèn)為啥，問(wèn)就是變量提升的坑。??

此時(shí)，重新運(yùn)行Angular應(yīng)用，這時(shí)你會(huì)發(fā)現(xiàn)，scrollmoved日志后面沒(méi)有再緊跟rendering...日志了，這意味著鼠標(biāo)的scroll事件已經(jīng)不會(huì)觸發(fā)變更檢測(cè)了。

既然鼠標(biāo)滾輪事件已經(jīng)移出我們的監(jiān)聽范圍，則我們也可以修改一下app中的代碼，將對(duì)scroll的監(jiān)聽移除。

V3版本

V2中，我們已經(jīng)通過(guò)zone.js讓鼠標(biāo)的scroll事件脫離了變更檢測(cè)。接下來(lái)，我們使用ngZone的runOutsideAngular方法，讓mousemove也脫離Angular的變更檢測(cè)。V3的代碼，分別注入了Renderer2，ElementRef，NgZone服務(wù)。通過(guò)runOutsideAngular注冊(cè)監(jiān)聽可以讓事件不觸發(fā)變更檢測(cè)。同時(shí)，我們通過(guò)mouseMoveUnsub保存事件的注銷方法，在界面登出后注銷事件監(jiān)聽。

這是優(yōu)化后的控制臺(tái)，在保證功能不變的情況下，Console控制臺(tái)也清凈了不少。除了setInterval會(huì)間歇性地觸發(fā)變更檢測(cè)，其它的鼠標(biāo)事件已經(jīng)都不會(huì)觸發(fā)變更檢測(cè)了。

接下來(lái)，我們把V3的性能profile拿出來(lái)對(duì)比看一下。在V3版本下，不管你在界面上如何操作鼠標(biāo)，都不會(huì)觸發(fā)變更檢測(cè)了。從圖上我們也能看出，Angular變更檢測(cè)的周期基本上每隔5s才會(huì)觸發(fā)一次，與setInterval的執(zhí)行周期一致，這也是符合預(yù)期的。將V3的火焰圖跟V1的對(duì)比一下你就會(huì)發(fā)現(xiàn)，此時(shí)變更檢測(cè)的次數(shù)遠(yuǎn)小于之前。我大致看了一下，每次變更檢測(cè)的耗時(shí)大概在0.1ms~0.6ms之間。這么看，同樣的功能，性能之間的差異有著天壤之別！

V4

最后一版我們?cè)侔炎詈笠稽c(diǎn)小問(wèn)題優(yōu)化掉，從V3圖上我們還能零星看到幾次rendering...日志，之前說(shuō)了，這是由于setInterval導(dǎo)致的。V4版本就是要把setInterval產(chǎn)生的變更檢測(cè)也優(yōu)化掉。

STEP1

在經(jīng)過(guò)前面的優(yōu)化學(xué)習(xí)之后，這里的處理對(duì)大家說(shuō)應(yīng)該十分好理解了。這里，我們同樣通過(guò)runOutsideAngular方法處理setInterval的執(zhí)行。

但是，當(dāng)我們把this.startTiming();放到runOutsideAngular后，我們發(fā)現(xiàn)如果5s沒(méi)有對(duì)界面操作，界面也不會(huì)變成期待您下次光臨!!。這里希望大家能先自己想想這是為什么，然后再往下看。

STEP2

NgZone的本質(zhì)是用來(lái)配合執(zhí)行變更檢測(cè)的，當(dāng)我們使用runOutsideAngular后，回調(diào)函數(shù)的執(zhí)行將會(huì)脫離變更檢測(cè)。又由于在zone.js中，Zone的執(zhí)行上下文是會(huì)傳遞的；當(dāng)setInterval中的回調(diào)執(zhí)行是，它依舊會(huì)在OutZone中執(zhí)行。試想一下，當(dāng)this.stopTiming();執(zhí)行在OutZone中的時(shí)候，this.isLogined = false;根本不會(huì)引起變更檢測(cè)，則UI也不會(huì)進(jìn)行渲染。此時(shí)，你會(huì)發(fā)現(xiàn)，當(dāng)你脫離變更檢測(cè)的時(shí)候，雙向綁定的魔力也會(huì)消失。

此時(shí)，我們就需要手動(dòng)喚醒變更檢測(cè)。這里喚醒變更的方式有多鐘:

• 通過(guò)NgZone.run方法可以讓被執(zhí)行方法回到InnerZone中執(zhí)行，從而觸發(fā)變更檢測(cè)

• 通過(guò)ChangeDetectorRef.detectChanges手動(dòng)進(jìn)行變更檢測(cè)

總結(jié)

本期內(nèi)容先概念，后示例，通過(guò)一個(gè)性能優(yōu)化案例把本期所學(xué)的知識(shí)實(shí)踐了一下。從案例中可以看到，當(dāng)場(chǎng)景適合時(shí)，“擺脫”變更檢測(cè)帶來(lái)的性能提升是巨大的。同時(shí)，你還會(huì)發(fā)現(xiàn)，我們其實(shí)可以不經(jīng)過(guò)zone.js就觸發(fā)變更檢測(cè)，而且性能還不錯(cuò)，這是不是說(shuō)明我們可以拋棄zone.js了呢？

這其實(shí)是一個(gè)很有意思的話題，尤其在lvy和OnPush策略推出后。在此，我有些個(gè)人觀點(diǎn)想分享一下。我個(gè)人認(rèn)為雖然我們有很多途徑可以擺脫zone.js和變更檢測(cè)，但是這些“擺脫”都很臨時(shí)。尤其當(dāng)我們清楚了zone.js在背后作出的努力后，我們就知道完全讓用戶自己去控制變更檢測(cè)是多么恐怖，就好像一夜回到了ajax + jQuery的時(shí)代，每一次的UI渲染都需要用戶手動(dòng)執(zhí)行。所以說(shuō)，這些“擺脫”方法其實(shí)是在前端業(yè)務(wù)復(fù)雜化到一定程度后，同時(shí)人們對(duì)極致性能的追求到一定程度后所催生的一種產(chǎn)物；是Angular團(tuán)隊(duì)為了迎合更廣泛的需求上的一種調(diào)整。zone.js畢竟給大家?guī)?lái)了太多便利，想要完全放棄會(huì)有不少困難。

我之前看到過(guò)一個(gè)Angular的大佬在講lvy，視頻最后的問(wèn)答階段，有位觀眾問(wèn)Angular會(huì)不會(huì)拋棄zone.js？這位大佬大概的回答是：他不認(rèn)為zone.js會(huì)消失。他們只是建議大家在“傻瓜”節(jié)點(diǎn)中通過(guò)OnPush策略減少對(duì)zone.js的使用，但是針對(duì)大多數(shù)應(yīng)用，zone.js不會(huì)消失。

油管鏈接奉上，我就不一句一句給大家翻譯了。

最后的最后，下一期我會(huì)詳細(xì)講一下InnerZone的執(zhí)行原理，喜歡的請(qǐng)持續(xù)關(guān)注~~~

OpenTiny 社區(qū)招募貢獻(xiàn)者啦

OpenTiny Vue 正在招募社區(qū)貢獻(xiàn)者，歡迎加入我們??

你可以通過(guò)以下方式參與貢獻(xiàn)：

• 在 issue 列表中選擇自己喜歡的任務(wù)

• 閱讀貢獻(xiàn)者指南，開始參與貢獻(xiàn)

你可以根據(jù)自己的喜好認(rèn)領(lǐng)以下類型的任務(wù)：

• 編寫單元測(cè)試

• 修復(fù)組件缺陷

• 為組件添加新特性

• 完善組件的文檔

如何貢獻(xiàn)單元測(cè)試：

• 在packages/vue目錄下搜索it.todo關(guān)鍵字，找到待補(bǔ)充的單元測(cè)試

• 按照以上指南編寫組件單元測(cè)試

• 執(zhí)行單個(gè)組件的單元測(cè)試：pnpm test:unit3 button

如果你是一位經(jīng)驗(yàn)豐富的開發(fā)者，想接受一些有挑戰(zhàn)的任務(wù)，可以考慮以下任務(wù)：

• ? [Feature]: 希望提供 Skeleton 骨架屏組件

• ? [Feature]: 希望提供 Divider 分割線組件

• ? [Feature]: tree樹形控件能增加虛擬滾動(dòng)功能

• ? [Feature]: 增加視頻播放組件

• ? [Feature]: 增加思維導(dǎo)圖組件

• ? [Feature]: 添加類似飛書的多維表格組件

• ? [Feature]: 添加到 unplugin-vue-components

• ? [Feature]: 兼容formily

參與 OpenTiny 開源社區(qū)貢獻(xiàn)，你將收獲：

直接的價(jià)值：

1. 通過(guò)參與一個(gè)實(shí)際的跨端、跨框架組件庫(kù)項(xiàng)目，學(xué)習(xí)最新的Vite+Vue3+TypeScript+Vitest技術(shù)

2. 學(xué)習(xí)從 0 到 1 搭建一個(gè)自己的組件庫(kù)的整套流程和方法論，包括組件庫(kù)工程化、組件的設(shè)計(jì)和開發(fā)等

3. 為自己的簡(jiǎn)歷和職業(yè)生涯添彩，參與過(guò)優(yōu)秀的開源項(xiàng)目，這本身就是受面試官青睞的亮點(diǎn)

4. 結(jié)識(shí)一群優(yōu)秀的、熱愛(ài)學(xué)習(xí)、熱愛(ài)開源的小伙伴，大家一起打造一個(gè)偉大的產(chǎn)品

長(zhǎng)遠(yuǎn)的價(jià)值：

1. 打造個(gè)人品牌，提升個(gè)人影響力

2. 培養(yǎng)良好的編碼習(xí)慣

3. 獲得華為云 OpenTiny 團(tuán)隊(duì)的榮譽(yù)和定制小禮物

4. 受邀參加各類技術(shù)大會(huì)

5. 成為 PMC 和 Committer 之后還能參與 OpenTiny 整個(gè)開源生態(tài)的決策和長(zhǎng)遠(yuǎn)規(guī)劃，培養(yǎng)自己的管理和規(guī)劃能力

6. 未來(lái)有更多機(jī)會(huì)和可能

關(guān)于 OpenTiny

OpenTiny 是一套企業(yè)級(jí)組件庫(kù)解決方案，適配 PC 端 / 移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

核心亮點(diǎn)：

1. 跨端跨框架：使用 Renderless 無(wú)渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級(jí)別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強(qiáng)。

2. 組件豐富：PC 端有100+組件，移動(dòng)端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場(chǎng)景下的流暢體驗(yàn)，除了業(yè)界常見(jiàn)組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP地址輸入框、Calendar 日歷、Crop 圖片裁切等

3. 配置式組件：組件支持模板式和配置式兩種使用方式，適合低代碼平臺(tái)，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺(tái)，針對(duì)低碼平臺(tái)做了大量?jī)?yōu)化

4. 周邊生態(tài)齊全：提供了基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，提供包含 10+ 實(shí)用功能、20+ 典型頁(yè)面的 TinyPro 中后臺(tái)模板，提供覆蓋前端開發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線主題配置平臺(tái) TinyTheme

聯(lián)系我們：

• 官方公眾號(hào)：OpenTiny

• OpenTiny 官網(wǎng)：https://opentiny.design/

• OpenTiny 代碼倉(cāng)庫(kù)：https://github.com/opentiny/

• Vue 組件庫(kù)：https://github.com/opentiny/tiny-vue?（歡迎 Star）

• Angluar組件庫(kù)：https://github.com/opentiny/ng?（歡迎 Star）

• CLI工具：https://github.com/opentiny/tiny-cli?（歡迎 Star）

更多視頻內(nèi)容也可以關(guān)注OpenTiny社區(qū)，B站/抖音/小紅書/視頻號(hào)。