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