H5 可视化构建工具原理解析（一）

前言

总共进 8 万行代码实现H5可视化构建工具，自去年十月开始陆续作了大半年，现已投入到业务中使用，虽然算是我的项目，但组件和部署模块涉及大量公司业务代码，就不开源了，主要讲讲实现思路，算是该项目的回顾总结，将核心难点、重点作拆分解析，拆分红系列不按期更新

成品图

动图太大，能够点击连接查看

技术栈

• 前端 Vue-CLI3 全家桶、Electron、Graphql、Typescript、Stylus、Vuetify
• 后端 Koa二、Graphql、Nuxt、MongoDB

为何须要 H5 可视化构建工具

互联网行业运营需求频繁，并且需求周期短，每每只有一、2天开发时间，放在项目里既拖慢总体编译效率，同时又没有任何意义，基本上都是当月做废，同时对开发者自己没有任何提高，重复劳动，咱们要作的就是经过工程的方式解放生产力，由运营同窗本身完成活动页上线，而再也不须要开发资源

肯定产品原型

• 提供可视化编辑的控制台生成Vue SFC源码
• 能够对已生成的页面进行管理（编辑，上下线）
• 控制台提供自上而下的单列布局适配移动端H5，简化操做逻辑
• 添加的组件可编辑属性、样式、事件回调
• 易于扩展的组件注册机制

这是我早期画的原型图，原谅我拙劣的画图能力，看看就好

接下来，咱们对第一个会遇到的难点进行解析

如何尽量模拟移动端真实环境

方案一：经过子组件实现模拟

• 优势：实现简单，而且做为子组件，状态和行为彻底受父组件控制
• 缺点：因为处于同一个window上下文，子组件的内容会被全局样式污染，难以保证与实机一致，同时 UA和rem等相对尺寸会失效

方案二： 经过iframe建立独立的window上下文来模拟

• 优势：iframe包含完整的HTML代码，拥有独立的上下文，能够尽量的模拟移动端环境
• 缺点：数据不共享，只能经过PostMessage机制进行通讯

---

对于方案一，没有独立的window上下文，缺陷是不可逆的，而方案二除了通讯困难，其余近乎完美，数据不共享的问题咱们能够经过实现StateSync机制来实现，咱们这里选择方案二，那如何实现StateSync呢？

这里只须要三个步骤

1. 首先咱们把页面编辑所须要的全部数据都提高到Vuex作全局存储
2. 监听store中全部的数据变化

实现监听store的伪代码:

const store = new Vuex.Store({
    state:{
        // 页面数据
        // ...
    },
    mutations:{
        //...
    },
});

// !因为mutation是Vuex中最小的提交粒度，因此只须要监听mutation就能够监听全部的数据变更
store.subscribe((mutation, state) => {

    // 数据发送
    // do someting ...
});
复制代码

重点来了

3. 当触发mutation时将整个Vuex Module State 经过PostMessage发送给对方（主窗口/iframe）

数据流走向图：

// 主窗口代码

// 监听来自iFrame的数据推送
window.addEventListener("message", (event) => {

   // 将iFrame推送的数据作同步操做
   store.dispatch(STATE_SYNC, event.data);
});


store.subscribe((mutation, state) => {

    // 这里咱们要避免出现死循环，忽略掉来自 THREAD_STATE_SYNC 的提交
    if (mutation.type.includes(THREAD_STATE_SYNC)) return;
    
    // 主窗口数据变更时同步至iframe
    iframe.contentWindow.postMessage(state);
});

复制代码

// iframe 代码


window.addEventListener("message", (event) => {

   // 将iFrame推送的数据作同步操做
   store.dispatch(STATE_SYNC, event.data);
});


store.subscribe((mutation, state) => {

  if (mutation.type.includes(THREAD_STATE_SYNC)) return;
  
  // 副线程发送
  window.parent.postMessage(state);
});

复制代码

至此，咱们完成了主窗口到iframe的数据自动同步，保证了数据的一致性同时，尽量的模拟了移动端的真实特性，为咱们的H5可视化编辑器打好基础，下一期我会开始讲如何实现UI组件库和可视化编辑器解偶，实现无痛迭代UI组件库和最大化复用UI组件

下一期

深刻解析 H5 可视化构建工具原理（二） 如何实现外部组件注册机制

最后

第一次正儿八经的写文章，可能想表达的东西没写清楚，有问题你们能够在评论区留言，顺便最近在找工做，有在杭州滨江附近好的就业机会请联系个人微信：wxdreams,十分感激