YUI 3 : json

    JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

JSON模块综述：

为了是脚本尽可能的小，JSON模块被分成了以下几个部分：

 json-parse,json-stringify,json

 

   json-parse：解析JSON字符串。

   json-stringify：将js对象转化为JSON字符串。

   json：同时实现以上两者。

 

解析JSON字符串到本地JS值

YUI().use('json-parse', function (Y) {

var jsonString = '{"products":['+
    '{"id":1,"price":0.99,"inStock":true,"name":"grapes"},'+
    '{"id":2,"price":3.5,"inStock":false,"name":"passion fruit"},'+
    '{"id":3,"price":2.5,"inStock":true,"name":"bananas"}'+
']}';

// JSON.parse 当jsonString为无效的JSON值时，要捕获错误。
try {
    var data = Y.JSON.parse(jsonString);
}
catch (e) {
    alert("Invalid product data");
}

//使用JSON值。
for (var i = data.products.length - 1; i >= 0; --i) {
    var p = data.products[i];
    if (p.price < 1) {
        p.price += 1; // Price increase!
    }
}

});

 

使用可选的“reviver ”参数：

注意名值对：key——var

这个可选的第二个参数，如果返回reviver的值是没有定义，那么这个key将被忽略。

YUI().use('json-parse', function (Y) {

    var jsonString = '{"products":['+
        '{"id":1,"price":0.99,"inStock":true,"name":"grapes"},'+
        '{"id":2,"price":3.5,"inStock":false,"name":"passion fruit"},'+
        '{"id":3,"price":2.5,"inStock":true,"name":"bananas"}'+
    ']}';

    // 移除所有没有库存，name为 bananas的条目，以及格式化price。
    var currencySymbol = '$';
    var reviver = function (key,val) {
        if (key === 'inStock' && !val) {
            return undefined;
        } else if (val === 'bananas') {
            return undefined;
        } else if (key === 'price') {
            val += val % 1 ? "0" : ".00";
            var pIdx = val.indexOf('.');
            val = pIdx ? "0" + val : val;
            val = currencySymbol + val.substr(0,pIdx + 3);
        }

        return val;
    };

    // 如果是无效的JSON，将抛出一个异常。
    try {
        var data = Y.JSON.parse(jsonString,reviver);
    }
    catch (e) {
        alert("Invalid product data");
    }

    // 使用处理过的数据。
    alert(data.products.length); // 1
    alert(data.products[0].price); // $0.99

});

 

不使用 eval：

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

参见：http://www.w3school.com.cn/js/jsref_eval.asp

使用JSON模块的parse方法将更加安全：

// 不安全
var data = eval('(' + shouldBeJsonData + ')');

// 安全
var data = Y.JSON.parse(shouldBeJsonData);

 

从JS对象中创建JSON字符串

为了把JS对象（或者是任何一个允许的值）转换为一个JSON字符串，传递对象到Y.JSON.stringify并且捕获返回值。

YUI().use("json-stringify", function (Y) {

    var myData = {
        troop : [
            { name: "Ashley", age: 12 },
            { name: "Abby", age:9 }
        ]
    }; 

    var jsonStr = Y.JSON.stringify(myData);

    alert(jsonStr); // {"troop":[{"name":"Ashley","age":12},{"name":"Abby","age":9}]}
});

 

使用一个白名单：

为了仅序列号一个固定的名的子集，该函数提供了一个key名数组作为stringify的第二个参数。

YUI().use("json-stringify", function (Y) {

    var myData = {
        troop : [
            { name: "Ashley", age: 12 },
            { name: "Abby", age:9 }
        ]
    }; 

    var jsonStr = Y.JSON.stringify(myData);

    alert(jsonStr); // {"troop":[{"name":"Ashley","age":12},{"name":"Abby","age":9}]}
});YUI().use("json-stringify", function (Y) {

    // 对象记录集
    var records = [
        {id:1, name: "Bob",   age: 47, favorite_color: "blue"},
        {id:2, name: "Sally", age: 30, favorite_color: "mauve"},
        {id:3, name: "Tommy", age: 13, favorite_color: "black"},
        {id:4, name: "Chaz",  age: 26, favorite_color: "plaid"}
    ];

    // 创建一个字符才仅仅包含id和age；
    var jsonStr = Y.JSON.stringify(records,["id","age"]);

    alert(jsonStr);
    // [{"id":1,"age":47},{"id":2,"age":30},{"id":3,"age":13},{"id":4,"age":26}]

}); 

 

使用一个自定义的”replacer“：

 

YUI().use("json-stringify", function (Y) {

    // 记录集
    var records = [
        {id:1, name: "Bob",   birthdate: "2/27/1964", favorite_color: "blue"},
        {id:2, name: "Sally", birthdate: "9/30/1983", favorite_color: "mauve"},
        {id:3, name: "Tommy", birthdate: "3/11/1990", favorite_color: "black"},
        {id:4, name: "Chaz",  birthdate: "5/22/1975", favorite_color: "plaid"}
    ];

    // 将id 和 favorite_color加入黑名单，将生日转换成为UTC格式。
    var replacer = function (key,val) {
        // 将id 和 favorite_color加入黑名单
        if (key === 'id' || key === 'favorite_color') {
            return undefined;

        // 将生日转换成为UTC格式。
        } else if (key === 'birthdate') {
            var d = new Date(),
                bd = val.split('/');
            d.setFullYear(bd[2],bd[0]-1,bd[1]);
            d.setHours(0,0,0);
            return d;
        }

        return val;
    };

    var jsonStr = Y.JSON.stringify(records,replacer);

    alert(jsonStr);
    // [{"name":"Bobby","birthdate":"1964-02-28T08:00:00Z"},{"name":"Sally","birthdate":"1983-09-30T07:00:00Z"},{"name":"Tommy","birthdate":"1990-03-11T08:00:00Z"},{"name":"Chaz","birthdate":"1975-05-23T07:00:00Z"}]

});

 

 

格式化JSON输出：

 

YUI().use('json-stringify', function (Y) {

    var fam = {
        family: "Franklin",
        children: [ "Bob", "Emily", "Sam" ]
    };

    //格式化：用四个空格。
    var jsonStr = Y.JSON.stringify(fam,null,4);

    alert(jsonStr);
    /*
    {
        "family": "Franklin",
        "children": [
            "Bob",
            "Emily",
            "Sam"
        ]
    }
    */

});

 

 

捕获JSON错误

同parse，stringify也需要捕获错误。

循环引用？

 

try {
    // BOOM
    Y.JSON.parse("{'this string': is, not_valid: ['J','S','O','N'] }");
}
catch (e) {
    alert("A string may eval to the same object, but might not be valid JSON");
}

// This is safe to stringify
var myData = {
    troop : [
        { name: "Ashley", age: 12 },
        { name: "Abby", age:9 }
    ]
}; 

// Create a cyclical reference
myData.troop[0]["NEWKEY"] = myData;

try {
    // BOOM
    jsonStr = Y.JSON.stringify(myData);
} catch (e) {
    alert("Cyclical references can sneak in.  Remember to wrap stringify.");
}

 

Notes about current native JSON support