网络间json字符串传递的技巧

最近做到一个网络间传递数据的问题，我选择的是用json字符串进行数据传递，于是就各种拼json字符串，如下例：

发送数据：

function transferData(shape){	
	 var shapeJsonStr = '{'+
				'"name":"'+shape.name+'",'+
	 			'"fillStyle":"'+shape.option.fillStyle+'",'+
	 			'"lineWidth":'+shape.option.lineWidth+','+
	 			'"opacity":'+shape.option.opacity+','+
	 			'"strokeStyle":"'+shape.option.strokeStyle+'",';
	 if(shape.name=="Pen"){
		 //钢笔 -- 添加list
		 shapeJsonStr += '"list":'+JSON.stringify(shape.option.list);
	 }
	 else if(shape.name=="CircleStroke"){		
		 //圆形 -- 添加x、y、radius		 
		 shapeJsonStr += '"x":'+shape.option.x+',';
		 shapeJsonStr += '"y":'+shape.option.y+',';
		 shapeJsonStr += '"radius":'+shape.option.radius;
	 }
	 else{ //“矩形” 或 “椭圆”		 
		 if(shape.name=="RectStroke"){
			 //矩形 -- 添加left、top、width、height
			 shapeJsonStr += '"left":'+shape.option.left+',';
			 shapeJsonStr += '"top":'+shape.option.top+',';			 
		 }
		 else{
			 //椭圆 -- 添加x、y、width、height
			 shapeJsonStr += '"x":'+shape.option.x+',';
			 shapeJsonStr += '"y":'+shape.option.y+',';
		 }
		 shapeJsonStr += '"width":'+shape.option.width+',';
		 shapeJsonStr += '"height":'+shape.option.height;
	 }
	shapeJsonStr += '}';
	 
}

接收数据：

function paintReceive(shapeJsonStr){
	var _shape = JSON.parse(shapeJsonStr);
	var currentCanvas = window.painter.canvas.currentCanvasContainer.getCanvas();
	
	var shape = new window.painter.model.shapeModel[_shape.name]();//_shape为：Pen、CircleStroke、RectStroke、EllipesStroke		
	shape.name = _shape.name;
	shape.option.fillStyle = _shape.fillStyle;
	shape.option.lineWidth = _shape.lineWidth;
	shape.option.opacity = _shape.opacity;
	shape.option.strokeStyle = _shape.strokeStyle;
	
	if(_shape.name=="Pen"){	//画笔Pen					
		shape.name = _shape.name;
		shape.option.list = _shape.list;
	}
	else if(_shape.name=="CircleStroke"){//圆形CircleStroke		
		shape.option.x = _shape.x;
		shape.option.y = _shape.y;
		shape.option.radius = _shape.radius;
	}
	else{//矩形（RectStroke）或椭圆（EllipesStroke）		
		 if(_shape.name=="RectStroke"){
			 //矩形 -- 添加left、top、width、height
			 shape.option.left = _shape.left;
			 shape.option.top = _shape.top;
		 }
		 else{
			 //椭圆 -- 添加x、y、width、height
			 shape.option.x = _shape.x;
			 shape.option.y = _shape.y;
		 }
		 shape.option.width = _shape.width;
		 shape.option.height = _shape.height;
	}
	currentCanvas.paint(shape);	
}

一同事看完以后，给出了一个更好的方法，如下：

function transferData(shape){
	
	var shapeJsonObj={};
	shapeJsonObj.name=shape.name;
	shapeJsonObj.fillStyle = shape.option.fillStyle;
	shapeJsonObj.lineWidth = shape.option.lineWidth;
	shapeJsonObj.opacity = shape.option.opacity;
	shapeJsonObj.strokeStyle = shape.option.strokeStyle;
	
	 if(shape.name=="Pen"){
		 //钢笔 -- 添加list
		 shapeJsonObj.list = shape.option.list;
	 }
	 else if(shape.name=="CircleStroke"){		
		 //圆形 -- 添加x、y、radius		 
		 shapeJsonObj.x = shape.option.x;
		 shapeJsonObj.y = shape.option.y;
		 shapeJsonObj.radius = shape.option.radius;
	 }
	 else{ //“矩形” 或 “椭圆”		 
		 if(shape.name=="RectStroke"){
			 shapeJsonObj.left = shape.option.left;
			 shapeJsonObj.top = shape.option.top;
		 }
		 else{
			 //椭圆 -- 添加x、y、width、height
			 shapeJsonObj.x = shape.option.x;
			 shapeJsonObj.y = shape.option.y;
		 }
		 shapeJsonObj.width = shape.option.width;
		 shapeJsonObj.height = shape.option.height;
	 }
	 var shapeJsonStr = JSON.stringify(shapeJsonObj);
}

虽然说不上是多么高深的东西吧，但也却是一个小技巧，可以省去一些麻烦。

比如：

1、一开始用自己的方法拼接字符串的时候，因为不大清楚传过去的数据各是些什么类型，所以拼接的时候，name，fileStyle,strokeStyle的值为string类型的，但我并没有给其值加上" ",结果导致在接收端接收到json字符串后，想将其转换成json对象的时候就出错了

2、 拼接json字符串的时候，因为我一开始并没有将list转换为字符串，而是直接将“对象数组”赋值给list，如：shapeJsonStr += '"list":'+shape.option.list; 结果页导致在接收端接收到json字符串后，想将其转换成json对象的时候就出错。后来才知道这里不能赋值对象数组给list，于是做了以下处理： shapeJsonStr += '"list":'+JSON.stringify(shape.option.list); 才最后运行正确。

而按照同事给出的方法后，既不用考虑数据类型，也不用考虑传递的是对象数组，直接在最后一步进行转换就行了。