iOS混合開發庫(GICXMLLayout)二、功能、架構介紹

搬磚的碼農發表於2019-01-04
iOSXML架構

如果你已經下載了專案原始碼，並且在模擬器或者真機中執行過了，你會發現GIC還是提供了較多的功能的，通過這些功能基本能夠滿足大多數的開發需求了。

這篇文章主要分享下GIC的整體功能以及架構設計介紹。

GIC的佈局系統以及UI元素是基於Texture實現的，資料繫結中的單向和雙向繫結是基於RAC實現的，而動畫是基於PopAnimation實現的。可以說GIC是站在巨人的肩膀上誕生的。

因為GIC在佈局系統以及UI元素是基於Texture實現的，因此GIC天生在效能上就有優勢，同樣支援background 佈局和渲染(區別於UIView只能在UI執行緒呼叫)，就算是在像iphone4那樣的機器上也能流暢的執行（你可以直接將專案中的Sample在真機上執行體驗）。事實上，在實際的開發過程成，你會發現，GIC即發揮了Texure的效能優勢，又帶來了使用XML進行簡單便利的UI佈局體驗，可以這麼說，GIC之於Texture就像Marsonry之於Autolayout。

架構圖

GICXMLLayout 整體架構圖

從上面的架構圖中可以看出，整個GIC分為三個模組，GICCore、behavior 擴充套件、JavaScript。其實嚴格來說，應該只有兩個模組，GICCore和Behavior,JavaScript其實是behavior的一個擴充套件而已。

這裡單獨介紹下什麼是Behavior。Behavior的中文意思是行為,你可以理解為通過Behavior來賦予元素的某個行為。比如：

一個list(UITableView)本身不具備下拉重新整理能力的，但是你可以通過Behavior將下拉重新整理的功能單獨封裝成一個behavior,然後賦予list下拉重新整理的能力。或者就像架構圖上設計的，GIC中的元素本身不支援JS呼叫的，但是通過Behavior擴充套件就能具備執行JS指令碼的能力。

總的來說就是將某一特定的功能封裝成behavior，然後將這個behavior新增到某個元素上的時候，該元素就具備了這個行為能力。因此，你可以通過自定義自己的behavior來實現功能上的擴充套件。

從上面的架構圖中還能發現，除了XML解析和資料轉換以外，其他的都屬於自定義元素。GIC的核心功能就是基於XML來實現以前需要coding才能實現的功能，因此一切元素都是圍繞著XML來實現的 ，更進一步的可以將XML理解為是一個map工具，將XML的節點元素對映到native某個Class的工具。

下面一一介紹下各個子模組的功能和特點：

一、GICCore模組

1. 解析模組

  1. XML解析：

    這裡主要是負責根據XML每個節點的名稱，解析成對應Native中的某個Class，然後將該節點的屬性轉換成對應Class屬性的資料型別。

  2. 資料轉換

    我們都知道XML中的屬性都是字串形式的，雖然我們能夠通過元素名稱從而找到對應Native的Class，但是每個Class的屬性的資料型別是不一樣的，有的是int、有的是string、有的是UIColor、有的是UIFont等等，這些不同的資料型別就需要有專門的轉換器來將string轉換成對應的資料型別，這樣在XML解析的過程中，可以通過不同的資料轉換器，將XML中的屬性轉換成對應該元素native屬性的資料型別。

通過XML解析和資料轉換，就能將一個XML檔案準確的對映到Native的Class，並且設定對應的屬性。

這樣一來，整個的XML解析模組就清晰了，剩下的事情就是定義元素的事情了。

2. GIC提供的核心元素。

  1. UI元素：

    UI元素其實就是能夠顯示的元素，比如：lable、image、list、canvas等等，也包括其他通過自定義擴充套件實現的UI元素。GIC自帶的UI元素雖然有限，但是通過各種組合也能實現複雜的UI佈局。

  2. 佈局系統：

    GIC中的佈局系統是基於Texture實現的，每一種佈局皮膚對應於Texture中的某個LayoutSpec，而GIC在Texure的基礎上進行了進一步的封裝，使得在使用XML進行佈局的時候更加的簡單方便。GIC也提供了類似前端FlexBox那樣的佈局皮膚，你可以通過組合不同的佈局皮膚來實現複雜的UI佈局。

  3. 資料繫結:

    資料繫結功能可以說是貫穿整個GIC的功能，任意元素的的任意屬性都可以通過繫結來賦值。GIC中的資料繫結是基於JavaScriptCore和RAC來實現的，JavaScriptCore主要是用來實現計算繫結的JS表示式，而RAC主要是用來實現單向、雙向繫結功能的。資料繫結的語法類似於前端的VUE,使用{{
    }
    }    兩對大括號來表示資料繫結，資料繫結的表示式支援JS，也就是說你可以直接在資料繫結的表示式中動態的計算。

  4. 模板:

    模板的功能類似於前端的tempalte，是參考Vue中的component功能開發的，因此也具有模板巢狀、佔位等功能。你可以將一些具有相同UI佈局的XML程式碼單獨作為一個模板，然後在任何地方引用這個模板，這樣的功能類似於Native中的自定義UIView的功能。

  5. 樣式:

    樣式的功能類似CSS，只是使用XML來描述，你可以利用樣式為整個APP提供類似主題的功能，只需要定義不同的樣式檔案即可。

  6. behavior:

    行為的概念在本編開頭已經介紹過了，就不再過多介紹了

以上6個功能是GIC提供的核心功能，構成了整個GIC的基礎。其他的功能都是基於這6大功能實現的。

二、behavior擴充套件

GIC中的很多的功能都是基於behavior來實現的。本篇開頭也提到了，behavior可以為任意元素賦予behavior所擁有的功能，這樣一來，可以很大程度的對實際專案中的某些功能進行解耦。

目前GIC提供的功能中，有如下幾個是通過behavior實現的，分別是。

  1. 事件:

    目前GIC針對所有的UI元素都提供了tap、double-tap、touch-begin、touch-move、touch-end共5個觸控事件，而其他的事件都屬於自定義事件，比如:item-select提供了cell選擇事件，開發者也可以為元素新增任意的自定義事件。在XML中可以直接以js表示式或者對應ViewModel中的方法名稱來繫結事件，當事件觸發以後，GIC會自動執行JS表示式或者呼叫ViewModel中的方法。

  2. 指令:

    指令這個概念其實是從前端的VUE中借鑑過來的，目前GIC提供了兩個指令，分別是for和if。for指令是用來從陣列中動態迴圈建立元素並且自動將陣列的item作為元素的資料來源，而且會自動監控陣列的改變然後自動做出相應的操作，比如當陣列刪除item的時候for指令會自動刪除該item對應的元素等等，而這一切無需你手動去處理，for指令會自動幫你處理。而if指令會根據條件表示式的true、false來動態的新增、刪除元素。

  3. 動畫:

    GIC的動畫是基於PopAnimation開發的，理論上支援任意屬性的動畫，而GIC的文件中在列出屬性的同時也給出了該屬性是否支援動畫。你現在可以直接使用XML來寫動畫了，GIC的動畫也提供了不同的觸發方式，最新版已經支援通過任意事件來觸發動畫了。

  4. 指令碼:

    事實上指令碼並不是單指JavaScript,只是當前GIC只實現了對JavaScript的支援而已，從架構圖上可以看出，指令碼是獨立於GICCore以外的一個單獨的功能，理論上可以支援任意的指令碼語言，比如：Lua、Python、Dart，只需要提供相應的指令碼解析器以及提供相應的指令碼入口即可。而GIC中對JavaScript的支援，也是獨立於GICCore單獨開發的。

三、JavaScript

GIC對JavaScript的支援是基於JavaScriptCore這個framework實現的，而JavaScriptCore是webkit的一個分支，而且還是開源的，具備跨平臺的能力。因此，在Android上也能實現一樣的功能。

目前JavaScript模組分三個子模組，分別是:

  1. elementsAPI:

    該模組的功能是將native的元素，轉換成可以直接被JS呼叫的JSValue,這樣一來可以直接使用JS來給給該元素設定屬性或者刪除該元素等等。

  2. JSAPI擴充套件:

    JavaScriptCore本身包含的JSAPI是有限的，一些常用API比如：console、XMLHttpRequest、setInterval等等是沒有的，因此需要自己去新增相應的JSAPI的支援，GIC已經提供了部分常用的API的實現，其他一些API開發者可以自己實現。

  3. nativeAPI:

    這個模組目前並沒有直接放入GIC的程式碼中，原因是擔心一旦GIC直接包含這部分的程式碼會導致蘋果的封殺。在技術上，JS直接呼叫Native的API是可以實現的，而且也並不是很複雜，這個模組的程式碼會作為一個獨立的程式碼共享出來，如果你想要這樣的功能，只需要將該模組的程式碼新增到你的專案中即可。這樣你就擁有了可以直接使用JS呼叫NativeAPI的能力。但說實話，這樣的功能在GIC中其實不是必須的，因為首先GIC的XML佈局已經是動態的了，而且還支援JS來寫邏輯，另外還提供了豐富的自定義功能，因此在實際的開發中，對於JS呼叫NativeAPi這樣的功能就顯得不是那麼的急需了。

總結

以上是對GIC提供的功能的一個大概性的介紹。詳細的文件可以直接線上瀏覽。

來源：https://juejin.im/post/5bfe4c66e51d4557884afc48

相關文章