日期:2014-05-16  浏览次数:20374 次

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_