首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议144:推荐使用JSON格式进行通信

关灯直达底部

JSON是一个轻量级并易于解析的数据格式,它按照JavaScript对象和数组字面语法来编写。下面代码是用JSON编写的用户列表。


[{

/"id/":1,

/"username/":/"alice/",

/"realname/":/"Alice/",

/"email/":/"[email protected]/"

},{

/"id/":2,

/"username/":/"bob/",

/"realname/":/"Bob/",

/"email/":/"[email protected]/"

},{

/"id/":3,

/"username/":/"carol/",

/"realname/":/"Carol/",

/"email/":/"[email protected]/"

},{

/"id/":4,

/"username/":/"dave/",

/"realname/":/"Dave/",

/"email/":/"[email protected]/"

}]


用户为一个对象,用户列表为一个数组,与JavaScript中其他数组或对象的写法相同。这意味着如果对象被包装在一个回调函数中,JSON数据可以成为能够运行的JavaScript代码。在JavaScript中解析JSON可简单地使用:


function parseJSON(responseText){

return(/'(/'+responseText+/')/');

}


上面的JSON数据也可以提炼成一个更简单的版本,将名字缩短:


[{

/"i/":1,

/"u/":/"alice/",

/"r/":/"Alice/",

/"e/":/"[email protected]/"

},{

/"i/":2,

/"u/":/"bob/",

/"r/":/"Bob/",

/"e/":/"[email protected]/"

},{

/"i/":3,

/"u/":/"carol/",

/"r/":/"Carol/",

/"e/":/"[email protected]/"

},{

/"i/":4,

/"u/":/"dave/",

/"r/":/"Dave/",

/"e/":/"[email protected]/"

}]


JSON精简版本将相同的数据以更少的结构和更小的字节尺寸传送给浏览器。也可以完全去掉属性名,与原格式相比,这种格式可读性更差,但更利索,文件尺寸非常小:大约只有标准JSON格式的一半。


[

[1,/"alice/",/"Alice/",/"[email protected]/"],

[2,/"bob/",/"Bob/",/"[email protected]/"],

[3,/"carol/",/"Carol/",/"[email protected]/"],

[4,/"dave/",/"Dave/",/"[email protected]/"]

]


解析过程需要保持数据的顺序,也就是说,这种精简格式在进行格式转换时必须保持和第一个JSON格式一样的属性名:


function parseJSON(responseText){

var users=;

var usersArray=(/'(/'+responseText+/')/');

for(var i=0,len=usersArray.length;i<len;i++){

users[i]={

id:usersArray[i][0],

username:usersArray[i][1],

realname:usersArray[i][2],

email:usersArray[i][3]

};

}

return users;

}


在上面代码中,使用将字符串转换为一个本地JavaScript数组,然后再将它转换为一个对象数组,用一个更复杂的解析函数换取了较小的文件尺寸和更快的时间。数组形式的JSON在每一项性能比较中均获胜,它文件尺寸最小,下载最快,平均解析时间最短。尽管解析函数不得不遍历列表中所有5000个单元,它的速度还是提高了30%。

当使用XHR时,JSON数据作为一个字符串返回。该字符串通过转换为一个本地对象。然而,当使用动态脚本标签插入时,JSON数据被视为另一个JavaScript文件并作为本地码执行。为做到这一点,数据必须被包装在回调函数之中,这就是所谓的“JSON填充”或JSONP。下面用JSONP格式编写用户列表。


parseJSON([{

/"id/":1,

/"username/":/"alice/",

/"realname/":/"Alice/",

/"email/":/"[email protected]/"

},{

/"id/":2,

/"username/":/"bob/",

/"realname/":/"Bob/",

/"email/":/"[email protected]/"

},{

/"id/":3,

/"username/":/"carol/",

/"realname/":/"Carol/",

/"email/":/"[email protected]/"

},{

/"id/":4,

/"username/":/"dave/",

/"realname/":/"Dave/",

/"email/":/"[email protected]/"

}]);


因为回调包装的原因,所以JSONP略微增加了文件的尺寸,但与其在解析性能上的改进相比这点增加微不足道。由于数据作为本地JavaScript处理,所以它的解析速度与本地JavaScript一样快。

JSONP文件大小和下载时间与XHR测试基本相同,而解析时间几乎快了10倍。标准JSONP的解析时间为0,因为根本用不着解析,它已经是本地格式了。简化版JSONP和数组JSONP也是如此,只是每种JSONP都需要转换成标准JSONP直接使用的格式。

最快的JSON格式是使用数组的JSONP格式,虽然这种格式只比使用XHR的JSON略快,但是这种差异随着列表尺寸的增大而增大。如果所从事的项目需要一个由10 000或100 000个单元构成的列表,那么使用JSONP比使用JSON好很多。

要避免使用JSONP还有一个与性能无关的原因:JSONP必须是可执行的JavaScript,利用动态脚本标签注入技术可在任何网站中被任何人调用。从另一个角度来说,JSON在运行之前并不是有效的JavaScript,使用XHR时只是被当做字符串获取。不要将任何敏感的数据编码为JSONP,因为无法确定它是否包含私密信息、随机的URL或cookie。

与XML相比,JSON有许多优点:格式小得多;在总响应报文中,结构占用的空间更小;数据占用得更多,特别是在数据包含数组而不是对象时。JSON与大多数服务器端语言的编/解码库之间有着很好的互操作性。JSON在客户端的解析工作微不足道,可以将更多写代码的时间放在其他数据处理上。对网页开发者来说最重要的是,它是表现最好的格式之一,既因为在线传输相对较小,也因为解析十分快速。JSON是高性能Ajax的基石,特别是在使用动态脚本标签插入时。