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