春去秋来，充满坎坷的2020也马上要结束了，每天看着各种大佬、标杆们的豪言壮志。于我也写写今年的项目总结，希望在程序的道路上砥砺前行。
今年主要写了一个可视化搭建单页的工具，通过大量的组件以及数据配置依照设计图搭建web单页，在架构项目的时候因为考虑到会有大量的数据操作以及代码的可维护型主要可分为：数据层、程序层以及工程层
首先就是技术的选型，现在市面上比较流行的以及社区比较完善的前端框架 react 、 vue、angular，由于之前用angular 开发过1.0的版本 开发起来比较繁琐，所以angular 就优先不考虑了，其次就是react和vue ，vue呢虽然很容易上手但是写起来没有react 有灵活性，（我是一个比较注重原生js 的人），故毫不犹豫的使用了react ，既然用的react 了，那么就毫不由于的使用了react-cli 工程配置的一些库和框架 简单列了一下：antd 、react-redux、 react-router-dom
项目展示
工作原理 ：触发menu，通过菜单类型在store中取出菜单对应的基础数据，通过viewConterol 视图控制层在中间区域展示出对应的组件，选中组件在右边的配置区域展示出此组件的对应的配置功能，编辑配置功能视图区域发生对应的改变（实现所见即所得），顶部区域的发布、预览、保存、则可以保存此编辑好的页面生成web单页。
一、工程层 我的工程目录如下：
我把工程主要分为五个部分 ：header、menu、viewConterol、config、store
header：主要承载顶部区域的 发布、预览、保存、设置等功能组件。 menu：组件库菜单 viewConterol：视图区域 config：配置区域，承载配置的所以组件 store：数据存储
二、数据层
其实呢数据层很简单，所有的组件都默认有自己的基础数据在一个map中，通过菜单在这个大的map中找到对应的组件基础数据放到这个store 的list 中，增、删、改、查 ，修改配置项跟新这个list即可，唯一区别的就是移动端的分页编辑，使用了pageQue 这个对象，这个对象呢还是依据list 这个组件队列，修改list 的同时会同步到pageQue中。
三、上传组件
为了快速生成海量的模板，我添加了上传组件功能
工作原理：上传一个含有组件的js html config.json 的压缩包，并生成我所需要的数据格式，来执行添加组件操作，此功能异常强大，实现了功能组件包管理
总结：
其实写了这么多项目了 自认为最重要的是 工程技术选型、工程目录搭建、工程数据处理，代码逻辑层的处理 高复用的代码，思路清晰的代码（分享一个我的诀窍：每次接到需求，我都是先正方向推理一遍，然后反方向推理一遍，然后先开始编写抽象部分）。
