歡迎光臨
每天分享高質量文章

基於xlua和mvvm的unity框架

1、框架簡介

這兩天在Github上發現了xlua的作者車雄生前輩開源的一個框架—XUUI,於是下載下來學習了一下。XUUI基於xlua,又借鑒了mvvm的設計概念。xlua是目前很火的unity熱更方案,不僅支持純lua腳本熱更,也可以做 C# 代碼的bug hotfix,而mvvm框架呢,在前端開發中應用很廣,我周圍同事在做wpf開發時也用到了mvvm框架,mvvm樣式在unity開發中也同樣適用,github上可以找到不少開源案例。XUUI主要有兩大核心能力:一是支持MVVM的單向、雙向系結,二是框架應用時可以做模塊加載、模塊掃清、模塊間資料隔離、模塊間可控交互。 

2、框架特點

作者在文件中介紹了XUUI框架的特點:一是可以和任意UI庫配合,ugui,ngui,fairyGUI,你自己倒騰的UI庫都可以;二是支持把本框架作為一個mvvm驅動器,純用C#寫邏輯;三是支持“計算屬性”:“計算屬性”依賴的各屬性發生改變會觸發“計算屬性”的重計算;四是可隨時系結View以及解系結。 

3、使用示例

下載專案到本地,可以看到作者提供了幾個使用示例。使用時要設置好系結信息,給各個UI元素(比如Button、Text、InputField等)添加配接器,可以通過Component/XUUI選單或者手動到XUUI\Scripts\UGUIAdapter目錄找腳本拖放到UI上,然後設置BindTo屬性即可,XUUI作者已經提供了Button、Text、Dropdown、InputField的配接器,其他ui元素比如Toggle就需要自己去編寫了,作者已經提供了接口模板,自己實現其他配接器也不難。先來看一下Helloworld示例:

這個示例中,有三個ui元素,系結信息如下:InputField: info.name;Text      : message,這是個“計算屬性”,計算時用了info.name,當info.name發生變化會觸發message重新計算,並自動更新Text;Button    : click,這會系結到一個click command上。C#代碼如下:

如上面C#代碼所示,首先要new一個Context,引數是個lua腳本,該lua腳本傳回一個table,table需要包含幾個特殊的欄位: data就是ViewModle(VM);computed中取用到的VM元素,在其依賴的VM元素發生改變會自動重新計算並同步到各個系結了它(比如上例的message)的節點;commands是類似按鈕點擊事件系結的響應方法,隨後,呼叫Context的Attach方法進行系結。

 

4、XUUI中幾個重要的類

(1)Context:啟動框架的方法就是new一個Context實體,並傳入lua腳本,在Context的建構式中,會初始化好lua運行環境(即LuaEnv),並解析傳入的lua腳本,對框架各模塊進行配置,Context實現了IDisposable接口,以便對一些非托管資源進行手動的垃圾回收。

(2)DataConsumer:如果ui Adapter需要監聽VM變化,須實現DataConsumer接口(可以不顯式宣告實現,只要有DataConsumer宣告的接口即可)

(3)DataProducer:如果ui Adapter需要把資料同步回VM,須實現DataProducer接口

(4)EventEmitter:如果ui Adapter需要產生一個事件,須實現EventEmitter接口

 

5、XUUI框架的應用

在實際使用中,並不會像上面HelloWorld實體那麼簡單,作者也提供了在實際使用時的示例,首先new一個Context,Context的建構式傳入的是一個含modules欄位以及name欄位的table:

執行上面代碼,框架會做這些事情: 加載myapp.module1,myapp.module2,加載的規則和require是一致的;為這兩個設置獨立的沙盒,各模塊即使定義了全域性變數也互不影響,一定程度上減輕不同模塊開發者由於溝通不足或者筆誤引發的模塊間衝突;模塊間資料隔離:模塊也可以定義data、commands、computed,在模塊定義的commands和computed只能看到本模塊的data; 模塊間呼叫:通過exports欄位可以匯出一些函式供其它模塊呼叫,其它模塊可以通過“模塊名.函式名”呼叫

* 支持模塊掃清(reload),reload後data變動會更新UI,監聽原先commands也會自動更新到新的commands,computed會自動重新計算並更新UI。

module1代碼如下:

module2代碼如下:

需要註意的是:這裡的UI不像邏輯那樣劃分模塊,通過“模塊名.模塊內路徑”去進行資料/響應的系結,比如moudle1.select,module2.click等等。 

6、最後

昨天才接觸到這個框架,XUUI框架下載量並不多,今天大概學習了一下,分享一下學習成果,總的來說,這個框架集成了xlua和mvvm,有很多值得借鑒的地方,很適合ui模塊的開發。博客內容有部分是從作者文件里抄下來的,因為怕自己描述不准確。分享一下,希望這個框架能像基於ulua的SimpleFramework一樣被更多開發者使用~

專案地址:https://github.com/chexiongsheng/XUUI

 

 

原文地址:https://www.cnblogs.com/IAMTOM/p/10445859.html

赞(0)

分享創造快樂