对低代码的思考

基础低代码青训营

前端

Publish Date: 2022-06-20

常规低代码平台存在的问题

一、面向丝毫不懂开发的人：这些人很难仅通过拖拽和少量代码完全实现自己想要的app的效果，并且最终实现app之后也很难维护，如果app有要修改的东西，那么将举步维艰

二、还原网页能力差，一些低代码平台仅通过绝对定位的方式很难还原一个响应式的网页，而且提供的布局容器也不便使用

于是我们出于为了让自己开发的低代码平台能真正投入使用，投入生产，提升开发效率，决定换个方向，面向那些懂得前端技术的开发者，帮助他们通过点击就可以还原大部分的常规复杂度的网页，大体还原完成后，导出html或者vue文件，以便进一步开发

该低代码平台能提升开发者效率的原因

开发者在还原网页时，每次写好相关的网页样式之后，都需要保存，编译之后切换到浏览器，出现问题了则打开控制台调试，这占据了大部分开发的时间
我们开发的工具，所见即所得，选项式修改样式，为开发者省去了调试和敲代码的时间

下面是我们网页的还原的案例

http://lc.gql.fit/example/one

我们的演示视频里是38分41秒大体还原该网页，并且由于刚开发完还不熟练，如果熟练之后，再加上复制功能，还能加快数几分钟时间

我们网页的主要架构图

主要功能实现

1. 渲染器实现

首先一个大型组件PowerfulDynamicDraw，会接收用户点击之后生成的树形结构数据
组件对该结构进行遍历，如果遍历到包含子节点数组的数据则将数据发给递归FlexBox渲染器，其余发给具体的text，button，img，link，video组件
FlexBox渲染器接收到数据之后利用数据中的style样式对自身进行渲染，同时递归调用自身的动态组件component

2. 递归操作dom生成html和vue文件

首先提前准备好html模版和每个组件的字符串，并利用浏览器提供的appendChild和innerHtml的api，实现将字符串和dom相互转换的方法

let FlexBoxHtml = `<div><div>`
let LinkHtml = `<div class="link"><a></a></div>`
let TextHtml = `<div><p></p><div>`
let ButtonHtml = `<div class="button-com"><button></button></div>`
let ImgHtml = `<div class="card"><img fit="cover"></img></div>`

function strToDom(str){
    var temp = document.createElement('div')
    temp.innerHTML = str
    return temp.childNodes
}

function domToStr( node ) {  
    var tmpNode = document.createElement( "div" );  
    tmpNode.appendChild( node.cloneNode( true ) );  
    var str = tmpNode.innerHTML;  
    tmpNode = node = null; // prevent memory leaks in IE  
    return str;  
 }

导出过程中exportHtml接收到一个views数组，数组中每个节点都是树形结构，遍历views数组图中将树形结构传入一个递归生成dom的方法

let styleStr ;
let bodyRes ;
let baseName = 'block',baseIndex = 1

export function exportHtmlHandle(views,isVue){
    baseIndex = 1
    styleStr = ''
    bodyRes = document.createElement('div')
    bodyRes.classList.add('canvas')
    for(let i = 0 ; i < views.length ; i++){
        bodyRes.appendChild(getHtmlRes(views[i]))
    }
    // 根据最后的dom转换成最终文件对象,返回对象并生成文件
    let res = jsonToHtml['getMainStr'](bodyRes,styleStr,isVue);
    let blob = new Blob([res],{type:''})
    let fileName = isVue ? 'page.vue' : 'page.html'
    FileSaver.saveAs(blob, fileName)
}

该方法将数据中的style对象通过正则表达式还原成浏览器支持的格式同时根据数据中的component属性对应出提前准备好的字符串，再配合浏览器api将其转换为dom

function getHtmlRes(view){
    // 遍历views数组
    let tempDom = jsonToHtml[view.component](view, baseIndex )
    let childDom = tempDom.cloneNode(true)
    let tempStr = styleToStr(view.style)

    styleStr += `
        ${"." + baseName +"-" + baseIndex++}{
        ${tempStr}
    }` 
    if(view.component != 'FlexBox'){
        let sonStr = styleToStr(view[view.sonStyle])
        styleStr += `
            ${"." + baseName +"-" + baseIndex++}{
            ${sonStr}
        }` 
    }

    if(view.children){
        for(let i = 0; i < view.children.length; i++){
            childDom.appendChild(getHtmlRes(view.children[i]))
        }
    }
    return childDom
}

那么有了dom之后我们就可以为其动态的添加类名和属性，同时通过类名对应好生成的样式字符串

最终生成html文件主要内容的dom字符串和样式字符串，我们利用模版字符串将其拼接到最后的html/vue文件模版，并利用FileSaver将文件导出

// 根据最后的dom转换成最终文件对象,返回对象并生成文件
let res = jsonToHtml['getMainStr'](bodyRes,styleStr,isVue);
let blob = new Blob([res],{type:''})
let fileName = isVue ? 'page.vue' : 'page.html'
FileSaver.saveAs(blob, fileName)

http://lc.gql.fit/example/one

BAT man队伍项目的demo链接 [http://lc.gql.fit/example/one

](http://lc.gql.fit/example/one)

我们平台主要由四部分组成，左侧物料区，中心数据区和渲染器，右侧属性修改区
用户将物料区的组件拖拽到中心区域，对提前准备好的数据模版进行深拷贝之后将拷贝后的结果放进数据区，配合中心的弹性盒子，最终会形成树形结构的数据
中心渲染器接收到数据之后会对数据进行遍历，如果有子节点就将数据送到递归渲染器，没有子节点就将数据送到组件渲染器
最终渲染器会生成网页视图，同时会接收用户的点击与拖拽事件向右侧发送当前被选中的组件数据
用户可在右侧修改组件属性，修改的同时会将结果反馈到中心视图

Dom模版：对应每个组件的html代码

数据解析：接收views数据并将数组中的对象传入递归生成dom的方法

方法概述：递归过程中为dom模版添加类名和属性，同时通过正则表达式将style对象转换为浏览器支持的格式

Dom转换：将递归生成的dom转换为字符串，并利用FileSaver将其以文件导出

问题：

你们平台的优势
像素级别还原网页，节省了一个正常开发者还原网页时的繁琐的保存，调试的时间，并且这个网页和正常平台最大的不同就是渲染器支持递归的，也就是说他可以生成无限层级，这是符合一个网页的结构的
无限深度怎么做的
我会
渲染器怎么做的
我会
修改属性怎么做的
我会
生成html怎么做的
我会
动态渲染怎么做的
我会
树形查找和删除怎么做的和优化的
原来是用的常规的树形查找，后来优化是用的相对寻址，就是我们在全局数据保存当前被选中的数组和索引，这样就不用树形递归查找了，直接根据两个变量数组和索引就能完成了
没有事件：我们专注于发挥该编辑器还原一个网页的功能，当然要添加事件也是可以的