1、框架簡介

這兩天在Github上發(fā)現(xiàn)了xlua的作者車雄生前輩開源的一個框架—XUUI，于是下載下來學習了一下。XUUI基于xlua，又借鑒了mvvm的設計概念。xlua是目前很火的unity熱更方案，不僅支持純lua腳本熱更，也可以做 C# 代碼的bug hotfix，而mvvm框架呢，在前端開發(fā)中應用很廣，我周圍同事在做wpf開發(fā)時也用到了mvvm框架，mvvm模式在unity開發(fā)中也同樣適用，github上可以找到不少開源案例。XUUI主要有兩大核心能力：一是支持MVVM的單向、雙向綁定，二是框架應用時可以做模塊加載、模塊刷新、模塊間數(shù)據(jù)隔離、模塊間可控交互。?

2、框架特點

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

3、使用示例

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

這個示例中，有三個ui元素，綁定信息如下：InputField: info.name；Text????? : message，這是個“計算屬性”，計算時用了info.name，當info.name發(fā)生變化會觸發(fā)message重新計算，并自動更新Text；Button??? : click，這會綁定到一個click command上。C#代碼如下：

如上面C#代碼所示，首先要new一個Context，參數(shù)是個lua腳本，該lua腳本返回一個table，table需要包含幾個特殊的字段： data就是ViewModle（VM）；computed中引用到的VM元素，在其依賴的VM元素發(fā)生改變會自動重新計算并同步到各個綁定了它（比如上例的message）的節(jié)點；commands是類似按鈕點擊事件綁定的響應方法，隨后，調用Context的Attach方法進行綁定。

?

4、XUUI中幾個重要的類

（1）Context：啟動框架的方法就是new一個Context實例，并傳入lua腳本，在Context的構造函數(shù)中，會初始化好lua運行環(huán)境（即LuaEnv），并解析傳入的lua腳本，對框架各模塊進行配置，Context實現(xiàn)了IDisposable接口，以便對一些非托管資源進行手動的垃圾回收。

（2）DataConsumer：如果ui Adapter需要監(jiān)聽VM變化，須實現(xiàn)DataConsumer接口（可以不顯式聲明實現(xiàn)，只要有DataConsumer聲明的接口即可）

（3）DataProducer：如果ui Adapter需要把數(shù)據(jù)同步回VM，須實現(xiàn)DataProducer接口

（4）EventEmitter：如果ui Adapter需要產生一個事件，須實現(xiàn)EventEmitter接口

?

5、XUUI框架的應用

在實際使用中，并不會像上面HelloWorld實例那么簡單，作者也提供了在實際使用時的示例，首先new一個Context，Context的構造函數(shù)傳入的是一個含modules字段以及name字段的table：

執(zhí)行上面代碼，框架會做這些事情： 加載myapp.module1，myapp.module2，加載的規(guī)則和require是一致的；為這兩個設置獨立的沙盒，各模塊即使定義了全局變量也互不影響，一定程度上減輕不同模塊開發(fā)者由于溝通不足或者筆誤引發(fā)的模塊間沖突；模塊間數(shù)據(jù)隔離：模塊也可以定義data、commands、computed，在模塊定義的commands和computed只能看到本模塊的data； 模塊間調用：通過exports字段可以導出一些函數(shù)供其它模塊調用，其它模塊可以通過“模塊名.函數(shù)名”調用

* 支持模塊刷新（reload），reload后data變動會更新UI，監(jiān)聽原先commands也會自動更新到新的commands，computed會自動重新計算并更新UI。

module1代碼如下：

module2代碼如下：

需要注意的是：這里的UI不像邏輯那樣劃分模塊，通過“模塊名.模塊內路徑”去進行數(shù)據(jù)/響應的綁定，比如moudle1.select，module2.click等等。?

6、最后

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

項目地址：https://github.com/chexiongsheng/XUUI

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

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結

以上是生活随笔為你收集整理的基于xlua和mvvm的unity框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。