sparrow-js源代码可视化二次开发-构思篇

前言

sparrow-js 去年实现了可视化生成源代码的能力，可以通过选择物料的方式生成源代码，生成源代码后要二次开发怎么办？很多人会有这样的疑问。这次主要尝试二次开发。在原有代码的基础上实现可视化开发。

源代码可视化

源代码可视化：编译后在浏览器访问的页面就是可视化的页面,让其处于编辑态即可二次开发。

开发流程，如下图 现在的开发路径

本文尝试实现如下开发路径

下面分析下如何激活浏览器渲染页面，让其可以处于编辑态。

实现方案：

• 激活页面，让其处于编辑态

以Vue代码结构举例：如下代码

<template>
  <div class="home">
    <div class="s-box" draggable="true"></div>
    <s-edit-box></s-edit-box>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped></style>

激活页面的途径是解析template，为标签追加属性、自动追加编辑组件、人为输入编辑插槽组件，使其可编辑。在界面上激活后的呈现demo如下。

输入常规Vue代码：

• 激活后：

• 追加新组件

选中需要追加的容器，配合sparrow-js里的物料，将代码追加到相对应的文件位置里即可.

• 删除组件

先看下下图的代码结构对比：

vue2 的代码分散在不同位置，现在的方式下没有想到有什么好的办法可以删除关联代码，如果是右侧的代码分布删除操作就容易操作很多，所以暂时没想到好的删除方式，目前只能可视化追加，追加的可删除，需手动删除原有代码。后续会尝试code->ast->Json方式，深入增删改。

• 代码

代码在这里持续开发中。

开源地址

github.com/sparrow-js/…

总结

本文主要分享二次可视化开发的实现思路，就像去年年初的sparrow-js生成源代码跟年底呈现出来的完全不一样，本文可能最终的产物和这篇文章也不一样，写着写着想到更好的思路可能就换方案了。具体的代码持续开发中，最终希望呈现结果是让项目直接在界面端由静态变为动态可编辑。可以追加代码，目前还在尝试阶段欢迎有缘感兴趣的人一起交流。