在正常的工作中,关于数据处理时,对于对象或者数组,我们采取的都是深拷贝,尽量的避免不同数据之间的关联。
但最近遇到个情况,恰好的说明了浅拷贝在某些时候是个利器,也正是要利用浅拷贝的相同数据源的关联,才能简化操作,如果使用深拷贝去做,那么会处理起来十分十分复杂-------这也说明了数据模型的边界一定要良好。
简单说下需求:
由于流程图绘制的页面使用了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里定义好各个场景的模型,然后深拷贝;但这儿也展现了浅拷贝和创建临时对象的重要性,可以大大的简化数据操作。