概述
InBiz平臺(tái)中的自定義組件是其核心組成部分，它們不僅彌補(bǔ)了標(biāo)準(zhǔn)組件在功能上的不足，更實(shí)現(xiàn)了用戶自定義功能的靈活開發(fā)。這些組件的開發(fā)流程涵蓋了功能開發(fā)和渲染兩大關(guān)鍵方面，為用戶提供了更為強(qiáng)大和靈活的應(yīng)用構(gòu)建能力。
自定義組件開發(fā)
自定義組件本質(zhì)上就是React組件，通過導(dǎo)出后在InBiz平臺(tái)中通過特定加載方法集成。開發(fā)過程與普通React組件無異，但需確保與InBiz平臺(tái)數(shù)據(jù)共享、UI組件庫(kù)版本一致，且提供無感開發(fā)體驗(yàn)。為此，InBiz推出inbiz/cli npm包，助力開發(fā)者輕松解決這些問題。
組件共享及數(shù)據(jù)共享
Webpack 5的externals配置允許自定義import包的來源，從而優(yōu)化打包文件。在平臺(tái)層，我們可將共享組件及事件掛載在window對(duì)象上，使自定義組件運(yùn)行時(shí)能直接從window獲取，實(shí)現(xiàn)組件共享與開發(fā)者無感體驗(yàn)，提升整體開發(fā)效率。
ts提示
為減小文件大小，共享組件不直接包含在自定義包中。為在開發(fā)時(shí)提供TypeScript提示，需在平臺(tái)生成共享組件的TS文件，并配置tsconfig.json以包含這些文件。
加載組件
通過@inbiz/cli工具，自定義組件源碼被編譯為瀏覽器兼容的JS，并根據(jù)組件單獨(dú)打包為獨(dú)立文件，實(shí)現(xiàn)按需加載。僅在被調(diào)用時(shí)渲染，顯著提升應(yīng)用性能。
組件標(biāo)識(shí)轉(zhuǎn)換為組件
在inbiz中組件的配置是一個(gè)字符，如“FileUpload$e0de25ff-dc9e-4681-a61f-3a201b29278f”，其中FileUpload為組件名稱(也是組件唯一標(biāo)識(shí))，e0de25ff-dc9e-4681-a61f-3a201b29278f為自定義組庫(kù)的唯一id.在組件加載過程中，想通過組件庫(kù)id獲取組件庫(kù)代碼所在網(wǎng)絡(luò)地址，并獲取到組件庫(kù)入口文件，并在組件庫(kù)的入口文件中獲取渲染的組件并異步加載。
組件異步加載
組件的異步加載是在webpack的require['context']方法上實(shí)現(xiàn)，通過此方法加載的組件是分割打包的，在加載時(shí)就可以按需加載。
總結(jié)
通過InBiz低代碼平臺(tái)的自定義組件開發(fā)及渲染功能，用戶可以輕松構(gòu)建滿足特定業(yè)務(wù)需求的應(yīng)用程序。自定義組件的開發(fā)過程簡(jiǎn)單明了，只需遵循一定的規(guī)范和步驟即可完成。而渲染引擎和動(dòng)態(tài)數(shù)據(jù)綁定等功能則保證了組件的靈活性和實(shí)時(shí)性。隨著低代碼平臺(tái)的不斷發(fā)展和完善，相信未來會(huì)有更多優(yōu)秀的自定義組件涌現(xiàn)出來，為企業(yè)數(shù)字化轉(zhuǎn)型提供更加強(qiáng)大的支持。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。