前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 前言

这一章节中我们将对渲染层的底层基础库WAWebview.js进行一个分析,看看里面都有哪些模块。

本章内容分解:

  • 渲染层基础库源码解析
  • Exparser系统源码解析。

# WAWebview.js注入

我们重温一下在哪里看到过渲染层基础库的注入。在最开始章节找寻小程序渲染层代码中我们找寻到了渲染层基础库的注入:

image.png

# 模块分析

首先我们进行WAWebview.js文件的解析。在我们2.17.3版本的基础库包中,渲染层基础库代码大概有8万多行。那么我们怎么进行分析呢?

我这边使用了比较传统的方法,就是折叠法,折叠成代码块,然后进行分析。这里折叠使用了Subline编辑器,因为我的VsCode插件较多,每次修改或者变动文件会有点卡,使用没有插件的Subline比较轻量,如果你也是跟着这本小册同步的去做,建议你也下载一个Subline去折叠代码。

我们从上往下进行分析,第一个模块是Foundation模块。

# core-js模块

最开始有一段4000多行的模块,为core-js模块。

image.png

core-js负责初始化框架js代码,编译js,加载业务逻辑js等功能。

# Foundation

Foundation是基础模块。我们来看一下声明的核心位置,在文件的4275行左右。

image.png

在源码的基础上我添加了一些备注,方便阅读理解。本身是没有备注的。

我们可以从其中看到里面包含了一些api,有EventEmitter事件的发布订阅,配置的Ready事件,基础库Ready事件,Bridge Ready事件,env、global环境变量。

其中EventEmitter 的核心就是事件触发与事件监听器功能的封装。小程序应该是自己在内部实现了一套。如果你想自己尝试一下Node.js环境下可以使用require('events')包,js环境下也有类似的实现 event-emitter,值得了解一下。

# WeixinJSBridge

WeixinJSBridge通讯模块,在4528行左右的。

image.png

可以看到WeixinJSBridge通讯模块中包含了我们在通讯系统章节讲解的通讯api,包含有on、publish、invoke、subscribe、invokeCallbackHandler、subscribeHandler。

通讯系统的具体实现在通讯系统章节有讲解,这里只是对Native注入通讯api的封装,便于内部调用。

# 异常监听模块

基础库内针对promise或者js等异常事件也是做了监听处理。在文件4872行左右

image.png

# 日志打印模块

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

image.png

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

# 系统函数和第三方函数模块

系统函数和第三方函数模块在文件5294行左右。

image.png

# Report信息上报模块

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

image.png

# Exparser模块

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

image.png

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

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏