iOS混合开发库(GICXMLLayout)一、介绍

搬砖的码农
1,761 阅读6分钟

功能介绍

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，然后开发出类似小程序那样的功能。

avatar
文章
阅读
粉丝