# 前言
这一章节中我们将对渲染层的底层基础库WAWebview.js进行一个分析,看看里面都有哪些模块。
本章内容分解:
- 渲染层基础库源码解析
- Exparser系统源码解析。
# WAWebview.js注入
我们重温一下在哪里看到过渲染层基础库的注入。在最开始章节找寻小程序渲染层代码中我们找寻到了渲染层基础库的注入:

# 模块分析
首先我们进行WAWebview.js文件的解析。在我们2.17.3版本的基础库包中,渲染层基础库代码大概有8万多行。那么我们怎么进行分析呢?
我这边使用了比较传统的方法,就是折叠法,折叠成代码块,然后进行分析。这里折叠使用了Subline编辑器,因为我的VsCode插件较多,每次修改或者变动文件会有点卡,使用没有插件的Subline比较轻量,如果你也是跟着这本小册同步的去做,建议你也下载一个Subline去折叠代码。
我们从上往下进行分析,第一个模块是Foundation模块。
# core-js模块
最开始有一段4000多行的模块,为core-js模块。

core-js负责初始化框架js代码,编译js,加载业务逻辑js等功能。
# Foundation
Foundation是基础模块。我们来看一下声明的核心位置,在文件的4275行左右。

在源码的基础上我添加了一些备注,方便阅读理解。本身是没有备注的。
我们可以从其中看到里面包含了一些api,有EventEmitter事件的发布订阅,配置的Ready事件,基础库Ready事件,Bridge Ready事件,env、global环境变量。
其中EventEmitter 的核心就是事件触发与事件监听器功能的封装。小程序应该是自己在内部实现了一套。如果你想自己尝试一下Node.js环境下可以使用require('events')包,js环境下也有类似的实现event-emitter,值得了解一下。
# WeixinJSBridge
WeixinJSBridge通讯模块,在4528行左右的。

可以看到WeixinJSBridge通讯模块中包含了我们在通讯系统章节讲解的通讯api,包含有on、publish、invoke、subscribe、invokeCallbackHandler、subscribeHandler。
通讯系统的具体实现在通讯系统章节有讲解,这里只是对Native注入通讯api的封装,便于内部调用。
# 异常监听模块
基础库内针对promise或者js等异常事件也是做了监听处理。在文件4872行左右

# 日志打印模块
日志打印模块在文件5027行左右。

日志打印模块包含wxNativeConsole、__webviewConsole__、wxConsole、wxPerfConsole等,打印日志类型非常丰富。日志打印API在基础库源码中导出充斥着,因为边界函数特别的多,恨不得每个逻辑判断都加上try catch
# 系统函数和第三方函数模块
系统函数和第三方函数模块在文件5294行左右。

# Report信息上报模块
Report信息上报模块在文件5488行左右。内部包含了非常多种类的上报api及异常监听api。

# Exparser模块
Exparser组件系统模块的实现就是在基础库中,文件9820行左右。

还记得exparser组件系统章节中渲染层经过编译后的自定义HTML标记吗?忘记没关系,我们回顾一下
