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

若是你已經下載了項目源碼，而且在模擬器或者真機中運行過了，你會發現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。

架構圖

從上面的架構圖中能夠看出，整個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的工具。

下面一一介紹下各個子模塊的功能和特色：

1、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大功能實現的。

2、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單獨開發的。

3、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提供的功能的一個大概性的介紹。詳細的文檔能夠直接在線瀏覽。