数据驱动的核心即是建立良好的数据模型

在正常的工作中，关于数据处理时，对于对象或者数组，我们采取的都是深拷贝，尽量的避免不同数据之间的关联。
但最近遇到个情况，恰好的说明了浅拷贝在某些时候是个利器，也正是要利用浅拷贝的相同数据源的关联，才能简化操作，如果使用深拷贝去做，那么会处理起来十分十分复杂-------这也说明了数据模型的边界一定要良好。
简单说下需求：
由于流程图绘制的页面使用了mxgraph这个库，所以前后端定义的交互格式是这样：

{   
	serviceid:'',
	processxml:'',
	nodeList:[],
	edgeList:[],
}

其中processxml是用于前端结合mxgraph的方法来回显视图，nodeList和edgeList是用于后端存储视图的节点信息，那么问题就来了，要做到视图的创建/编辑，刷新回显的正常，就要做到processxml和nodeList/edgeList随时保持一致，由于xml不能负载太多，所以只在里面保留了节点的id和名称及类型，主要的信息还是存在两个数组里。
模型定义：

postSaveData:{      // 提交服务器对象
    serviceid:'',    // 服务流程id
    nodeList:[],     // 节点列表
    edgeList:[],     // 连线列表
    processxml:'',   // 服务流程xml
},
nodeMap:{},         // 节点映射
edgeMap:{},         // 线条映射

创建节点时：

// 配置新线条
let edgeObj = {};   // 创建临时对象
edgeObj.edgeid = cell.id;
edgeObj.edgename = cell.title;
edgeObj.edgesourceid = cell.source.id;
edgeObj.edgetargetid = cell.target.id;
edgeObj.paramList = [];
self.edgeMap[edgeObj.edgeid] = edgeObj;  // 将临时对象映射进中转对象
self.postSaveData.edgeList.push( edgeObj );   // 将临时对象存进提交的nodeList数组

编辑时：

// 判断是节点还是线条
if( cell.edge == true ){
    let edgeObj = self.edgeMap[cellId];
    self.edgeFormObj = deepCopyDataObj( edgeObj );
    self.dialogStatus_edge = 'edit';
    self.handleOpenEdgeDialog();
}else{
    let nodeObj = self.nodeMap[cellId];
    // Object.assign(); 此方法只会深拷贝第一层数据，比如nodeObj里的第二层paramList属于第二层数组，那么不会被深拷贝，依然会以nodeMap为数据源进行联动改变
    self.nodeFormObj = deepCopyDataObj( nodeObj );
    self.dialogStatus_node = 'edit';
    self.handleOpenNodeDialog();
                };

保存时：

// 保存编辑属性到对象
let edgeObj = self.edgeMap[tempId];
edgeObj.edgename = self.edgeFormObj.edgename;
edgeObj.edgeid = self.edgeFormObj.edgeid;
edgeObj.edgesourceid = self.edgeFormObj.edgesourceid;
edgeObj.edgetargetid = self.edgeFormObj.edgetargetid;
edgeObj.priority = self.edgeFormObj.priority;
edgeObj.edgeconfig = self.edgeFormObj.edgeconfig;
edgeObj.edgecode = self.edgeFormObj.edgecode;
edgeObj.edgereqparam = self.edgeFormObj.edgereqparam;
edgeObj.paramList = self.edgeFormObj.paramList;
self.dialogEdgeVisible = false;
self.$refs.dynamicEdgeForm.resetFields(); 

交互时：

self.postSaveData.processxml = MxUtils.getXml( node );
let formData = deepCopyDataObj( self.postSaveData );

这部分数据处理其实也很平常，但是也给我自己一个认识，因为平常的数据处理时，因为数据结构都比较清晰，做的做平常的就是在data里定义好各个场景的模型，然后深拷贝；但这儿也展现了浅拷贝和创建临时对象的重要性，可以大大的简化数据操作。