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

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

如果你已經下載了專案原始碼,並且在模擬器或者真機中執行過了,你會發現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分為三個模組,GICCorebehavior 擴充套件JavaScript。其實嚴格來說,應該只有兩個模組,GICCoreBehavior,JavaScript其實是behavior的一個擴充套件而已。

這裡單獨介紹下什麼是BehaviorBehavior的中文意思是行為,你可以理解為通過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元素其實就是能夠顯示的元素,比如:lableimagelistcanvas等等,也包括其他通過自定義擴充套件實現的UI元素。GIC自帶的UI元素雖然有限,但是通過各種組合也能實現複雜的UI佈局。

  2. 佈局系統

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

  3. 資料繫結:

    資料繫結功能可以說是貫穿整個GIC的功能,任意元素的的任意屬性都可以通過繫結來賦值。GIC中的資料繫結是基於JavaScriptCoreRAC來實現的,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元素都提供了tapdouble-taptouch-begintouch-movetouch-end共5個觸控事件,而其他的事件都屬於自定義事件,比如:item-select提供了cell選擇事件,開發者也可以為元素新增任意的自定義事件。在XML中可以直接以js表示式或者對應ViewModel中的方法名稱來繫結事件,當事件觸發以後,GIC會自動執行JS表示式或者呼叫ViewModel中的方法。

  2. 指令:

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

  3. 動畫:

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

  4. 指令碼:

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

三、JavaScript

GICJavaScript的支援是基於JavaScriptCore這個framework實現的,而JavaScriptCorewebkit的一個分支,而且還是開源的,具備跨平臺的能力。因此,在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

相關文章