网络间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、EllipesStrokeshape.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"){//画笔Penshape.name = _shape.name;shape.option.list = _shape.list;}else if(_shape.name=="CircleStroke"){//圆形CircleStrokeshape.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); 才最后运行正确。

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