iOS混合開發庫(GICXMLLayout)一、介紹

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

功能介紹

GICXMLLayout(以下簡稱GIC)是iOS上的一個全新的混合開發庫，專案地址：github.com/ghwghw4/GIC…

線上文件地址：gicxmllayout.gonghaiwei.cn

GICXMLLayout能幹什麼？有什麼特點？

  1. 使用XML來描述UI、動畫、事件繫結、資料繫結。

    是的，你可以直接使用XML來寫動畫、甚至直接呼叫CGContext來畫線、圖形甚至報表。

  2. 資料繫結。

    GIC提供了優秀的資料繫結能力,繫結語法類似於前端的VUE，當然也支援JS表示式。目前支援三種繫結模式，分別是：once:一次性、 one way:單向繫結、two way:雙向繫結

  3. 支援MVVM模式。

    UI是使用XML來描述的，而業務邏輯你可以使用Native程式碼或者直接JavaScript來寫。並且得益於資料繫結功能，做到了UI和業務邏輯的完全分離。開發體驗上接近前端的開發。

  4. 優秀的佈局系統。

    相比較於iOS原生的自動佈局，GIC的佈局系統將會更加的靈活方便、也更簡單、佈局效能也更高，更是提供了完整的類似前端FlexBox佈局的佈局皮膚。使得在實際的開發過程中，使用極少的程式碼就能寫出複雜的佈局。整個佈局體驗類似前端的HTML+CSS,但是GIC更加簡單。事實上，但凡使用過flex佈局系統的同學都知道這套佈局系統是多麼的好用。

  5. 模板系統。

    類似於前端的template技術，你可以將部分UI封裝成模板(事實上任何能夠使用XML描述的都可以封裝成模板)，然後在任意地方使用已封裝的模板。甚至支援模板巢狀、佔位模板，使得在實際的開發過程中，進一步的簡化UI的開發流程。

  6. 簡單、優秀的自定義擴充套件能力。

    GIC在自定義擴充套件方面做到了儘可能的簡化。你甚至可以直接一行程式碼就將原來寫的UIView、UIViewController變成自定義元素，然後在XML中呼叫。可以參考文件中的自定義一章，

  7. 支援JavaScript。

    最新版本支援大多數的ES6特性，包括但不限於promise、yield、arrow function、class等，也支援ES8的async、await等特性。最低適配iOS8.0。(注：iOS9.0及以下版本是不支援ES6、ES8的，但是GIC支援)

  8. HotRload &
    HotUpdate。

    HotRload適用於開發除錯，HotUpdate適用於生產環境。當然前提是你的業務邏輯是用JavaScript來寫的。

開發初衷

作為一個iOS開發者，開發過大大小小差不多10多個APP，對於iOS的UI佈局可以說是深有體會。在iOS上開發UI佈局，有兩種途徑。1.storyboard(xib) 2.純coding的形式。這裡不比較哪種開發方式更好，我自己選擇的是第二種方式。其實不管使用哪種方式，在開發效率上其實是很低的，尤其是列表類的頁面開發，更甚者是非固定高度的列表類頁面的開發，開發流程複雜、低效，還要考慮效能優化等問題。

舉個例子：Feeds類的頁面，這樣的頁面的特點是佈局複雜，Cell的高度是不固定的，尤其是裡面的lable顯示，有的最多顯示兩行、有的不限行數等等，我們在實現這樣功能的時候，一般是如下流程：自定義UITableViewCell->
建立佈局UI->
計算每個Cell的高度->
顯示Cell，這裡面最複雜的並不是建立佈局UI，而是需要你手動的計算Cell的高度，哪怕你使用了autolayout，但是計算Cell的高度這一步你還是逃不掉，因為UITableView在顯示的時候就需要你提供cell的高度，除了這些更不要說為UITableView進行的各種效能優化的過程了。

而現在有了GIC以後，你無需自定義UITableViewCell,也無需手動去計算cell的高度，你只需要使用XML編寫UI的佈局程式碼即可，非常的方便。比如：

<
!-- list 等同於UITableView -->
<
list background-color="white" separator-style="1">
    <
section>
        <
!--使用for指令來將資料來源中的陣列迴圈生成list-item-->
        <
for>
            <
!-- list-item 等同於UITableViewCell -->
            <
list-item selection-style="2">
                <
inset-panel background-color="white" inset="15">
                    <
lable text="{{ 
name 
  }
  }" font-size="15">
<
/lable>
                <
/inset-panel>
            <
/list-item>
        <
/for>
    <
/section>
<
/list>
複製程式碼

從XML的佈局程式碼來看，你可以很容易的從中看到UITableView的影子，有section,有list-item(UITableViewCell),有每個Cell的佈局程式碼，非常的簡單，複雜的例子，您可以直接從專案自帶的例子中檢視。

隨著GIC開發的深入，後來發現如果業務邏輯僅僅是通過Native的ViewModel來實現的話還是有侷限性的，因此在最新版本中，基於JavaScriptCore這個官方庫實現了可以直接執行JavaScript程式碼的功能。使用最新的版本，已經可以結合XML+JavaScript來開發一個完整的APP了。然後通過將XML、JavaScript、Images等靜態資源打包更新的方式來實現整個APP的Hot Update功能。

其實您可能會說，這個庫相較於RN、Weex等有什麼優勢？GIC的開發初衷可不是用來替代RN、Weex的，而是對現有iOS開發方式的一種改進。

將原來native使用coding或者storybord、xib等方式來寫UI的方式替換成完全使用XML來描述，並且將原來native需要對每個UI做frame計算或者使用autolayout佈局的方式替換成另外一種自動佈局方式，你無需去計算UI的frame，GIC會自動將每個元素的佈局計算好。

GIC目前只有iOS的版本，並不具備跨平臺的能力。但除了這個以外，GIC已經能滿足大多數的開發需求，哪怕有些功能是不具備的，但您也可以通過自定義擴充套件的途徑來實現特殊的需求，比如：有些頁面的導航欄在滑動的時候需要漸變功能，這樣的功能你完全可以通過自己擴充套件來實現，之後照樣能使用XML來載入。RN、Weex等除了需要會JavaScript以外，還需要你會HTML+CSS等技能，而GIC在最簡單的情況下，你只需要會XML就行了。

有了GIC以後並不意味著你能夠直接跟Objective-C、Swift等語言拜拜了，GIC只是對現有iOS開發方式的一種擴充，但是自定義元素、自定義behavior等其他自定義功能，仍然需要你自己使用OC、Swift進行開發。

事實上在基於GIC的基礎上，你可以自己擴充套件出屬於自己的一套自定義元素、behavior，然後開發出類似小程式那樣的功能。

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

相關文章