前言
经过上半年一通瞎折腾，sparrow-js确定了1.0.0版的主要功能，之前的文章提到过“提升研发效率”是sparrow-js的唯一目标，怎么样才能提升效率，归根结底就是抽象重复代码。“提升研发效率”涵盖的信息太大太模糊，涉及到从需求生产到线上运行维护的方方面面，一些公司在搞的超级效率平台应该会涵盖整个产品生命周期，作为个人开发者精力有限只能在垂直方向单点突破，所以sparrow-js 目前更具体的定位是提升前端中后台使用vue element-ui项目的效率，视情况和精力逐渐往更高层级突破。本方案思路是通用的，可以复制到任何前端技术架构下。git地址
为什么sparrow-js是叫场景化低代码搭建
sparrow-js 为什么不叫可视化搭建，而是场景化低代码搭建，这个名字跟要解决什么问题相关，我个人理解可视化搭建最重要的能力是赋能，通过可视化的手段降低开发门槛。而场景化低代码搭建侧重于效率，通过减少编码量达到提升效率效果。场景化低代码搭建更能说明本项目想做的事情，sparrow-js整个设计思路都是建立在提升效率的基础上。
主题
sparrow 1.0.0 采用蓝色为主色调，蓝色具有理智、准确的意象，强调科技、效率，正和sparrow的目标相呼应。所以就把蓝色定为sparrow的主色调。
功能介绍
1.0.0 的功能分为提效功能和基础功能两部分介绍
提效功能
提效功能是围绕提效目标设计的功能目前有以下功能
通用组件
通用组件提供vue element-ui里的组件，可拖拽或点击到预览区实时预览，提供配置能力，此部分灵活通用，但提效不明显，很多同类产品都实现到这步，不太受开发者欢迎，如果只到这里我自己也没有太大动力用。
编辑区块
编辑区块目前还在开发中，是提效的主要功能，产出的产物是特定场景下的代码片段，可编辑可配置，直接使用。后续会加大开发力度开发编辑区块部分。
静态区块
静态区块提供静态代码片段，对于特定业务领域的抽象或者当模版使用。
场景组件
通用组件明显用起来较麻烦，需要自己配置，开发者都比较懒就想点吧点吧就用，所以提供场景组件，场景组件可以自带功能自带场景，如图搜索“图片”，出现图片墙、图片列表、图片拖拽选择适合业务需要的场景直接用就可以了。目前组件还较少，后续会进一步扩充组件种类。
ctrl+c 和 ctrl+V
作为复制粘贴工程师肯定要实现复制粘贴功能，选中需要复制的组件按ctrl+c即可复制，在选择一个容器点击激活ctrl+V，完成。
基础功能
基础功能有
- 拖拽搭建
- 删除
- 预览
- 导出
- 查看源代码
- 保存
- 页面树
- 等等
上一篇有提到过，一般低代码或可视化工具都有的功能就不在介绍了。
技术方案
技术方案采用编译时输出源代码，通过webpack热更新实时预览，
优点
- 目前主力开发还是在本地开发，本方案可模拟真实的开发场景，预览的页面是完全可使用可操作的。
- 本地开发相比于cloud开发技术上更成熟、更普遍、sparrow-js更易于与本地开发环境结合。
- 依赖技术方案成熟，源代码生产（babel）和实时预览（webpack）都有现成的方案拿来就用
缺点
- 需要安装，不利于传播（online版后续有时间开发一个）
- 实时预览稍缓慢（webpack热更新较慢，vite没准能解决）
下面聊一轮技术实现
实时预览
实时预览就是一个用vue-cli生成的普通项目，代码地址，没啥特别的地方，预览页面的组件通过容器盒和组件盒包裹让组件可操作，可配置，提供特定编辑能力，如表单，使用表单容器插入的表单组件可自带form-item，自带标签；容器编辑器代码在这里；实时预览通过webpack的热更新实现，预览页面产生的交互数据通过postmessage传递给操作界面，操作界面在根据相应指令进行下一步操作。
下面代码是实时编辑预览界面上文本的代码实现；
<template>
<div :class="{
'text-box': !this.clearClass
}">
<div :class="{
'edit-text': !this.clearClass,
'edit-text-init': this.clearClass
}"
contenteditable="true"
@blur="blur"
>
{{label}}
<slot />
</div>
</div>
</template>
<script>
import Event from '../../utils/Event'
export default {
props: ['label', 'uuid', 'clearClass'],
methods: {
blur (e) {
Event.emit('insert_handler', {
emit: 'client.component.insertEditText',
params: {
value: e.target.innerText || '',
uuid: this.uuid
}
})
}
}
}
</script>
操作界面
操作界面负责基础操作、预览工程和代码转换工程中间桥梁、拖拽实现、物料展示、自定义配置等工作；配置区域使用 json schema 渲染配置界面，配置数据如下
export default {
model: {
attr: {
placeholder: '',
'v-model': ''
},
},
schema: {
fields: [
{
type: 'object',
label: '',
model: 'attr',
schema: {
fields: [
{
type: "input",
inputType: "text",
label: "v-model",
model: "v-model"
}
]
}
}
]
}
}
操作界面代码基本上都是常规操作
服务端（重点）
操作界面的数据传过来就该到服务端出场了，添加一个组件的过程首先是找到组件对象 找组件对象添加组件到组件树上的的代码实现
public addComponent (data: any, operatetype: string = 'manual') {
let { id, nextSiblingId, path } = data;
let compIndex = -2;
// 组件的下一个兄弟，确定组件的放置位置
if (nextSiblingId) {
compIndex = this.components.findIndex(item => item.uuid === nextSiblingId);
}
const hasBox = fsExtra.pathExistsSync(Path.join(__dirname, `../box/${id}`));
let backComp = null;
// 如果组件有路径获取路径下的组件，如果没有就是内置的组件
if (path) {
const dynamicObj = require(`..${path}`).default;
const comp = new dynamicObj(config || params, this.storage);
this.components.push(comp);
// 检测是不是容器组件，如果是到容易组件下获取
} else if (hasBox) {
const dynamicObj = require(`../box/${id}`).default;
const comp = new dynamicObj(config || data, this.storage)
} else {
// 内置通用组件
const dynamicObj = require(`../component/${id}`).default;
const comp = new dynamicObj(config || params, this.treePath);
this.components.push(comp);
}
return backComp;
}
组件对象通过VueParse解析对应的模版读取js代码生成AST，DOM部分使用cheerio操作DOM结构；创建对象后组件就变成了可组装可配置的活组件；代码可以查看开源地址; 组件树生成完，下一步就是生成代码，组装js代码使用VueGenerator，也是通过babel AST实现代码和VueParse同目录下，JS 和 DOM生成完代码输出到预览项目，预览项目通过webpack热更新实时预览。整个添加组件的过程完成。其他操作也都是针对组件树的增删改查，没错，就是这么简单。
总结
以上就是 1.0.0 版本的主要功能，待场景组件和编辑区块开发完成就齐活儿了，预计10月正式发布1.0.0，届时可以正式在生产环境用起来了，功能有可能是做梦YY的，也有可能是参考了别的优秀项目文章，一些不成熟的小想法😄，欢迎对此感兴趣的同学讨论交流。要有真正在生产环境使用的技术上合作一下也是可以的。
