【quickhybrid】如何实现一个Hybrid框架

章节目录

【quickhybrid】如何实现一个跨平台Hybrid框架
【quick hybrid】架构一个Hybrid框架
【quick hybrid】H5和Native交互原理
【quick hybrid】JSBridge的实现
【quick hybrid】H5和原生的职责划分
【quick hybrid】API的分类：短期API、长期API
【quick hybrid】API规划
【quick hybrid】API多平台支撑的实现
【quick hybrid】组件（自定义）API的实现
【quick hybrid】JS端的项目实现
【quick hybrid】Android端的项目实现
【quick hybrid】iOS端的项目实现

一些感慨

踏入前端领域满打满算也两年多了。到现在，主要方向已经是由Android原生转到了偏前端领域。

期间，不提自己的技术进步、视野拓宽，最大的产出之一应该就是从0开始构建了一个Hybrid框架了。

正值最近开始进行技术梳理，因此就准备写一系列文章沉淀起来。

本系列包含的内容清单

Hybrid框架的原理以及架构系列
JavaScript部分的原理以及源码系列（包括部分API的多容器的兼容）
Android部分的原理以及源码系列（仅覆盖核心实现以及API部分，不包含实际业务代码）
iOS部分的部分原理（一些坑会特别提出，理论上根据原理应该可以还原出）
- 由于本人没写过iOS应用，因此目前没有直接提供源码，后续有时间可以考虑进一步提供

什么样的`Hybrid`框架？

核心宗旨：__H5页面基于该框架可以替代80%以上的原生业务页面。__

更详细一点：

适用于需要开发大量项目级APP的场景
不是用于完全替代原生开发，而是替代里面的80%原生业务页面（模式是：原生部分 + H5部分）
框架人员至少需要一名Android原生，一名iOS原生，一名前端架构（如果全栈，可以考虑合一）
部分API（如UI显示类）考虑到了H5的兼容
并没有做到产品级别的优化（需求优先级别较低）

之所以不基于第三方框架而是自己重新实现，是由具体的环境与需求决定的。譬如要求自己必须完全掌握源码，某些功能必须通过特定安全检测等。

另外，本系列不与任何市面上的其他框架进行比较，仅是自己的经验总结。

此框架是否有实践经验？

此框架不是平地起高楼而来的，而是在接近两年的项目实战中慢慢演化出的，内部已经迭代过多个版本

另外，它已经在一个项目型公司全面推广使用了。（N+级别）

这里要说明下：

实际项目中，Hybrid框架仅仅是其中的一部分，还会包括一些原生通用组件，业务模块等
但是本系列仅止步于Hybrid框架（处于诸多因素考虑，包括核心实现以及API实现）

如何应用与自己的项目中？

最后的源码部分仅提供核心实现以及API部分，对于一些简单项目来说，其实也就够用了，
但是如果功能较复杂的，肯定需要进一步封装自己的原生功能。

实际上推荐使用以下人员配置：

一名资深Android原生（负责Android容器）
一名资深iOS原生（负责iOS容器）
一名资深前端（前端部分不要小觑，要配合排查问题的）
总架构（推荐是以上三人中的一人担任，譬如本系列是由前端来统一架构的-但前提是必须懂点原生原理，否则抓瞎）

因为每一个人精力有限，所以除非特别厉害和全能，否则不建议一人担任两职
（譬如像我转入前端后，以前的Android就遗忘的很快，但是如果重点兼顾Android，前端水准肯定无法快速提升）

在N+项目时的模式大致如下：

三名框架人员负责核心框架容器部分(框架还需要提供一些通用模块与组件)
各个业务线的APP中可以专门分配不同的原生人员负责打包APP（1对N，协助排查各自可能的业务问题）
每一个APP中可以有若干H5业务开发人员(由不同的复杂度而定，主要业务都是线上的H5形式)
三名对于的框架人员负责处理过滤后的真正框架BUG（由业务负责人过滤）

注意，以上是最小配置。（譬如可以分配更多的框架人员，优化提升等）

最后，以上是实际的经验总结，仅做参考。

框架更新与迭代

实际上不同框架的更新迭代方式都是不一样的，比如本系列中就是基于需求迭代

也就是说遇到问题才修复，优化，累积一段时间后开始考虑下一代的优化提升（迫于投入的窘迫性）

一般来说，整体的交互架构以及API是由对于的负责人规划的，然后安排给对于的容器实现

版本号的化仍然是以下经典形式：

大版本.小版本.修正版

譬如本框架在两年内迭代了多个大版本（涉及到底层），
使用起来变化较大就会变动小版本，
平时个别API新增和修复是修正版

这里因人而异，比如有的喜欢将API新增也变为小版本更新

借鉴与不足

本框架中在实现是吸取了不少市面上已有框架的经验，譬如：

钉钉（API设计上，可惜无法看到它底层实现...）
phonegap,html5+,apicloud,appcan等都有接触过（但参考的不多）
一些github开源库，譬如marcuswestin/WebViewJavascriptBridge等

另外，在文章总结时，参考了一些博文，包括我以前写的文章（会在参考来源中）

源码

github上这个框架的实现

quickhybrid/quickhybrid