在本集中,我們將了解 NGV(我們的現代 3D 檢視器框架)的插件方法。這是 NGV 系列的一部分。
一種方法是透過「只需點擊即可啟用」解決方案來針對非開發人員最終使用者。缺點是您需要編寫和維護大量額外的程式碼、文檔,這使得它既耗時又僵化。
因此,我們以開發人員為目標,專注於讓他們輕鬆使用。其實有很多關於外掛程式和可重複使用程式碼的技術可供我們利用:git、ES 模組、docker...
另一項重大簡化是沒有外部插件:要擴展軟體,用戶應該分叉專案並建立它。
外掛程式非常適合可維護的解決方案。使用外掛程式時,您被迫思考什麼是核心,什麼不是;什麼應該是可擴展或可替換的。您需要引入抽象、接口,這使得程式碼更加孤立且更易於理解。此外,您還可以編寫文件和說明來幫助核心開發人員以外的人員理解您的 API:這對每個人來說都變得更加容易。
舉個例子,我們創建了插件 ngv-plugin-cesium-widget 來將低階 Cesium 程式碼與應用程式程式碼隔離。我們計劃擁有數十個應用程式:在插件中使用通用程式碼使我們能夠在應用程式之間共享程式碼和概念。該插件是通用的,我們公開了用於配置它的介面:該插件可以處理任何配置,它是面向未來的。
@customElement('ngv-plugin-cesium-widget') export class NgvPluginCesiumWidget extends LitElement { public viewer: CesiumWidget; @property({type: Object}) cesiumContext: IngvCesiumContext; @property({type: Object}) modelCallback: (name: string, model: Model) => void;
透過插件系統,使用者可以超越配置。該解決方案可以定制甚至擴展。
例如,所有地理空間應用程式都有一個搜尋欄,但沒有一個具有相同的功能:不同的後端、不同的格式、不同的功能。
搜尋外掛程式可以附帶預先定義的提供者(例如:OpenstreetMap Nominatim),並允許您提供自己的提供者(例如:Pelias、Photon,...)。
這些提供者獨立於該應用程序,可以輕鬆共享或向上游貢獻。
此外,搜尋插件可以完全替換為其他實現,只要它遵循底層介面即可。
for (const pc of descr.config.providers) { const initialize = providerInitializers[pc.name]; if (!initialize) { console.error("could not find provider", pc.name, "skipping it"); continue; } const provider = initialize(pc.config); this.providers.push(provider); } this.autocomplete = new Autocomplete(this.autocompleteRef.value, { search: this.search.bind(this), onSubmit: this.onSubmit.bind(this), renderResult: this.renderResult.bind(this), getResultValue: this.getResultValue.bind(this), });
與「插件」的概念非常接近的是「模組」的概念。事實上,Ecmascript 模組是我們在 NGV 框架內部「打包」並提供插件的技術方式。
類似地,Web 元件是允許我們將 UI 外掛程式暴露給 DOM 的技術標準。
我們也可以將 git 視為允許我們的插件策略的基本工具,透過授權使用者分叉、適應、貢獻。
我們對插件問題的解決方案是一個依賴標準的架構,利用開發人員的專業知識和生態系統,它允許更容易理解、隔離和更易於維護的程式碼。
你設計過插件系統嗎?或者你已經開始思考這個問題了嗎?請在評論中告訴我您的反饋。
以上是NGV:插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!