前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • 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
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 前言

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

本章内容分解:

  • 逻辑层基础库源码解析

# WAService.js注入

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

image.png

# 模块分析

首先我们进行WAService.js文件的解析。在我们2.17.3版本的基础库包中,逻辑层基础库代码大概有11万行。

我们依然使用传统的折叠法,对代码进行折叠,然后进行分析。

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

# core-js模块

第一个模块与渲染层基础库中是一样的,core-js模块。

image.png

# Foundation

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

image.png

与渲染层一致

# WeixinJSBridge

WeixinJSBridge通讯模块,在4536行左右。

image.png

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

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

这里与渲染层基础库也是一致的。

# NativeBuffer模块

NativeBuffer模块的定义在文件4924行左右。

image.png

javascript语言自身只有字符串数据类型,没有二进制数据类型。 但在处理像TCP流或文件流时,必须使用到二进制数据。因此在微信小程序中,定义了一个NativeBuffer模块,该模块用来创建一个专门存放二进制数据的缓存区。

# 日志打印模块

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

image.png

日志打印模块包含wxNativeConsole、wxConsole、wxPerfConsole等,与WAService.js相比少了一个__webviewConsole__,

# WeixinWorker模块

worker模块在文件5195行左右。

image.png

内部包含创建worker、结束当前workder、发送数据请求、监听回调等方法。

# JSContext模块

JSContext在文件5328行左右。

image.png

JsContext 是js代码执行的上下文对象,相当于一个 webview 中的 window 对象。在同一个 VM 中,你可以传递不同的 Context。

# __appServiceEngine__模块

最后很大部分模块都是此模块,__appServiceEngine__,提供了App、Page、Component、Behavior、getApp、getCurrentPages等框架的基本对外接口。在文件109273行左右。

image.png

声明位置:

image.png

路由的跳转,优雅的triggerLifeTime

image.png

# Exparser模块

Exparser组件系统提供了框架底层的能力,如实例化组件,数据变化监听,View 层与逻辑层的交互等。在文件100703行左右。

image.png

# virtualDOM模块

__virtualDOM__连接着__appServiceEngine__和exparser,如对开发者传入Page方法的对象进行格式化再传入exparser的对应方法处理。在文件104

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • 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专栏

  • 其他专栏