浅谈小程序架构原理及模拟实现（ iframe + postmessage 简单模仿一个）

原理

提一下 hybrid

微信小程序是一个典型的hybrid架构，简单来说Hybrid App（混合模式移动应用）就是原生APP和HTML5混合开发，Hybrid APP底层依赖于原生Native提供的容器（webview），上层使用Html&Css&JS做业务开发。好处有很多，这里就不一一赘述。

小程序的架构，先拿一张CSDN官博发的架构图

视图层：每当跳转页面或者返回页面，都是原生APP把一层一层的webview往上盖或者删除。图中是通过事件的方式进行数据交互。

逻辑层：所有的页面逻辑都在逻辑层中，小程序中的js和html不是运行在同一线程里的，所以小程序不建议在js里对节点进行dom操作，获取节点信息的SelectorQuery()也是通过通信的方法拿到的信息，通信问题下面会说到JSBridge。

JSBridge： JSBridge可以调用原生Native功能，JSBridge就像其名称中的Bridge的意义一样，是 Native 和非Native之间的桥梁，它的核心是构建Native和非Native间消息通信的通道，而且这个通信的通道是双向的，数据传输过程有点像jsonp的感觉，当然这里还有一大功能时视图层和逻辑层的数据通信。

实现

用iframe来模仿webview，用H5的postmessage来当做JSBridge在iframe页面间通信的方法。

在实现小程序功能前先想想要做哪些准备工作

1. 创建页面在app.json中注册，所以我们新建一个server.html文件，在window上存一下app.json的信息

// server.html
window.appJson = {
   
    // 别的配置信息也不需要，所以这里只留一个pages的信息就可以
    "pages": [
        "pages/index/index",
        "pages/detail/detail"
    ]
};

2. 小程序每个页面的js文件里都有一个Page函数，所以现在我们来简单实现这个。
   • Page在逻辑层中，所以新建一个service.js。

// service.js
(function (global) {
   
    // 页面类与路径的映射集合
	const pageClassMap = {
   }
 	// 页面基类
	class PageBase {
   
        constructor(id, uri) {
   
            this.uri = uri
            this.id = id
            this._initData()
        }
        // 深拷贝一份，赋值操作右边的data是从原型上拿到的，下面创建页面的时候会挂在Page的原型上，然后左边的data是在页面基类上新创建的
        _initData() {
   
            this.data = JSON.parse(JSON.stringify(this.data || {
   }))
        }
        // 渲染函数要通知视图层渲染，所以用到bridge类，这里先不写
        _render() {
   }
        // setDate函数设置data也要用到通信
        setData()