weex 源码解析（一） -- 总体实现思路（Android视角）

weex最近也比较火，公司也开始使用了该框架，因而就开始玩下，入手部分不会太难，可是调试却是折腾了很多时间。折腾完了，也写了一两个小页面，那接下来就要拆下weex这个轮子啦~ 方便后面使用的时候，有什么坑，但愿能够跳的快一些。

先抛出一个问题

若是咱们要在Android里，不用webview，经过在线的方式，动态的在一个FrameLayout里，添加各类子View，进行展现，而且还能够给各个子View添加各类监听事件。你们要怎么实现这样的功能呢？

咱们能够这么实现：

1. 在Android端，先在布局里添加一个自定义的FrameLayout。
2. 获取该动态FrameLayout的在线配置信息，根据这些配置信息，动态生成各类子View，添加到这个FrameLayout上。
3. 为了可以响应各类监听事件，那还须要在这个配置信息里，添加上一些事件监听和监听后的操做，例如，onClick事件，点击以后的操做。
4. 配置信息里，添加上一些子View的布局宽高之类的。 。。。

那这里有些难点了，配置信息该怎么写呢？ 恩，咱们可使用Android 布局xml的方式，快速的写出这些view的布局，而后将xml布局下发给客户端，客户端使用xml解析器将这个xml文件进行解析，生成对应的子view，设置好各子view的布局。 为了可以让子View添加各类监听事件，并作响应的操做，咱们须要扩展咱们 xml文件，定制各类语法，添加事件的监听和处理方法。

说到这里，若是你作过前端的话，那确定会发现，这不就使用前端开发就行了吗？正好里面就有布局的排列，样式的定义，各类事件的监听和方法的定义。

下面先来一份使用vue写的H5页面。

若是使用前端语言来编写配置信息，那也挺不错的，至少配置信息的编写，比较通用，开放给其余人使用，学习门槛也比较低。最重要的是，比本身从新定义一套语法，轻松多了。weex的思想其实和这个是相似的，也就是将用vue来写配置文件，在android 层，将这些配置信息进行解析，而后动态的生成各类子View，添加到咱们刚刚说的FrameLayout上。好，记住这个思路，那咱们接下来就须要看看，weex是怎么实现这种方案的。

总体框架

为了避免让你们一开始就只看树叶，不见森林，咱们先来看看weex官网工做原理的这张总体框架图。

看不懂，没有关系，这里说的，其实也不太复杂。下面来一一介绍下：

Vue File，就是咱们上面说的配置信息，能够添加各类子View，样式，事件响应方法等。

Vue File transformer 为 JS Bundle，JS Bundle 就是vue编译生成的结果文件，通常命名是xxx.js，在weex工程的编译结果目录$weex-project-dir/dist下，这里作下为何要转为js文件，而不直接用vue文件呢？（多是为了作文件压缩，还会把引用的其余vue文件的内容给集成到一个js文件里，这样Android端，就能够只加载一个最终的js文件就能够了。）

server，这里是指经过网络将js文件传送到Android端，固然这个js文件，直接放在本地也行，让weex SDK去加载本地的js文件。

JavaScript Runtime，这里是在解析上面的js文件。由于vue是前端开发js框架语言，比较通用，因而weex团队，也将其作的通用一些，可让vue项目，运行在H5，Android，IOS上。这样的好处不言而喻了。 除了解析布局，还能够用来执行在vue上定义的一些方法，否则，一些监听事件的回调，以及一些方法，都不知道要在哪里运行才比较好了。这里的JavaScript Runtime，在Android端其实就是 UC 提供的 v8 内核。

IOS，Android，H5 的 RenderEngine，天然就是将上面解析的js内容，转成咱们具体的子View树，加到咱们上面说的自定义FrameLayout上了，进行渲染，和设置各类监听事件和方法了。为何JavaScript Runtime和RenderEngine在这里是双向通行的？是由于布局的显示是在各终端上渲染，可是一些方法的执行，仍是在JavaScript Runtime上去执行，这就涉及到不少双方通信的状况，因此是双向的。

总结：

为了可以动态的将各类子view加在本地自定义FrameLayout中，须要Android端去解析用vue编写的配置文件，并生成对应的子View进行渲染。因为vue中有一些函数方法须要执行，能够在JavaScript Runtime里执行。

后续：

看来在一篇文章里，写彻底部的weex 源码解析，有点难度，那仍是分开几篇来写好了，第一次在掘金上写文档，以上是我的的理解，写得有误的地方，还请指出，以便更正，后续会继续写完剩下的解析。