前言
在日常开发中，偶尔会有些比较特殊的需求需要用原生html、css绘制页面组件，但是在已经习惯了框架加逻辑的开发模式后，自然也懒得花时间去画静态页面组件，平时的开发重心基本都放在业务逻辑上，页面绘制及渲染基本都是直接套框架，能复制的直接粘贴，简单方便哈哈~~。
因为在工作中比较经常遇到一些特殊的页面组件，所以萌生出一个想法，打算自己开发一个组件设计器，有什么想实现的页面，直接画出来后导出组件，在项目中直接使用，省去了敲代码的过程，也体验了一番UI设计的滋味。到这里发现自己连页面设计的工作也包了。
源码地址及演示网址放在文章末尾
第一步：功能分析
页面组件有按钮、文本、输入框、图片、DIV块等；样式属性有位置、宽高、边框、边距、颜色、大小等，目前仅配置了比较常用的组件和属性。
<button>按钮</button>
<text>文本</text>
<input type="text">
<img src="" alt="">
<div>DIV</div>
{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border: 1px solid #d4d4d4;
padding: 10px;
margin: 10px;
color: #37205f;
font-size: 16px;
}
第二步：功能开发
根据组件创建对应标签，绑定监听函数，当值发生变化时设置标签样式。
let nodeName = 'button'
let node = document.createElement(`${nodeName}`);
let inputWidth = document.getElementById('inputWidth');
inputVal.onchange = (e) => {
node.style.width = e.target.value
}
第三步：样式调整
把所有的功能与标签衔接好后，就需要调整整体样式。下面是当前的版本，比较简陋，待后续功能比较完善后会设计个好看点的主题。
第四步：功能测试
测试是对设计器功能的过程预览，之中暴露出来的问题便是代码运行逻辑不符合正常操作的预期。下面简单列举这个项目中遇到的几个问题。
问题一：拖拽设置功能
在对组件绑定拖拽事件后，将标签节点拖拽到某一位置时，需要判断在哪个节点下，进行插入操作。
因为页面上存在多个非工作区节点(有单层的还有多层树结构的)，需要进行过滤排除。
解决方法：在松开鼠标后获取鼠标位置下的所有节点，如果没有子节点就判断标签类型；如果是树结构就利用递归判断内层是否存在可用于判断的类型。这个方法解决了大部分操作情况。
问题二：导出导入功能
在导出前需要将标签与样式分离开来，然后根据文件格式来确定数据的编码格式，这一块还是比较容易的。
解决方法：将页面节点中的样式内容提取出来，放到style标签中，其余部分则放html标签中，以字符串形式导出对应格式文件。
在导入时需要判断文件格式，在读取文件内容时，需要对内容进行处理，才能插入到编辑区域。
第五步：功能完善
- 当前的任何异常操作都没有反馈信息
- 导入的模板会将原有的数据覆盖，暂时还无法追加
- 边框、边距等样式没有支持自定义上下左右
