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提供的功能的一个大概性的介绍。详细的文档能够直接在线浏览。