[转]json2.js 源码解读

这一部分是对Date String Number Boolean扩展toString方法,Date的toString是返回UTC格式的字符串,而后面几个是返回原始值。

function f(n) {// 返回两位数字字符串
            return n < 10 ? ‘0‘ + n: n;
        }
        if (typeof Date.prototype.toJSON !== ‘function‘) {//如果Date不支持原生的toJSON方法
            Date.prototype.toJSON = function() {//扩展Date的toJSON方法
                //是否是有穷数,如果为true,返回根据UTC时间计算出的年月日时分秒 YYYY-MM-DDThh:mm:ssZ如果为false,返回null
                return isFinite(this.valueOf()) ? this.getUTCFullYear() + ‘-‘ + f(this.getUTCMonth() + 1) + ‘-‘ + f(this.getUTCDate()) +
                 ‘T‘ + f(this.getUTCHours()) + ‘:‘ + f(this.getUTCMinutes()) + ‘:‘ + f(this.getUTCSeconds()) + ‘Z‘: null;
            };
            //扩展String Number Boolean的toJSON方法
            String.prototype.toJSON = Number.prototype.toJSON = Boolean.prototype.toJSON = function() {
                return this.valueOf();//返回他们的原始值
            };
        }

这里是扩展Stringify方法

function str(key,holder) {//第一次调用时 key:‘‘,holder:{‘‘: value} 
            var i,// The loop counter.
            k,// The member key.
            v,// The member value.
            length,mind = gap,//初始mind和gap都为""
            partial,value = holder[key];//第二次调用时 value就是传入的键所对应的值
            //如果value有toJSON方法
            if (value && typeof value === ‘object‘ && typeof value.toJSON === ‘function‘) {
                value = value.toJSON(key);//调用value.toJSON方法
            }

            if (typeof rep === ‘function‘) {//如果replace是一个方法
                value = rep.call(holder,key,value);
            }
            // 判断value类型
            switch (typeof value) {
            case ‘string‘://如果是字符串,加引号
                return quote(value);
            case ‘number‘://如果是数值
                //有穷数用原生的String()将数值转为符串,否则返回null
                return isFinite(value) ? String(value) : ‘null‘;
            case ‘boolean‘://如果是bool值或者null,返回String(value)
            case ‘null‘:
                return String(value);
            case ‘object‘://如果是对象
                if (!value) {//null
                    return ‘null‘;
                }
                gap += indent;//分隔符
                partial = [];//临时数组
                if (Object.prototype.toString.apply(value) === ‘[object Array]‘) {//数组
                    length = value.length;
                    for (i = 0; i < length; i += 1) {//对数组的每一项递归调用str
                        partial[i] = str(i,value) || ‘null‘;
                    }
                    // 如果partial为[],返回"[]"
                    // 如果 gap分隔符存在,返回[\n‘ + gap + partial.join(‘,\n‘ + gap) + ‘\n‘ + mind + ‘]‘
                    // 如果分隔符不存在,返回‘[‘ + partial.join(‘,‘) + ‘]‘
                    v = partial.length === 0 ? ‘[]‘: gap ? ‘[\n‘ + gap + 
                    partial.join(‘,\n‘ + gap) + ‘\n‘ + mind + ‘]‘: ‘[‘ + partial.join(‘,‘) + ‘]‘;
                    gap = mind;//重置为""
                    return v;
                }
                if (rep && typeof rep === ‘object‘) {//如果rep存在且为数组或者对象
                    length = rep.length;//如果是数组
                    for (i = 0; i < length; i += 1) {//过滤
                        if (typeof rep[i] === ‘string‘) {
                            k = rep[i];//键是数组的值
                            v = str(k,value);//递归调用
                            if (v) {
                                //"key": value 或者"key":value
                                partial.push(quote(k) + (gap ? ‘: ‘: ‘:‘) + v);
                            }
                        }
                    }
                } else {//如果不是数组或方法或不存在
                    for (k in value) {
                        if (Object.prototype.hasOwnProperty.call(value,k)) {
                            v = str(k,value);
                            if (v) {
                                partial.push(quote(k) + (gap ? ‘: ‘: ‘:‘) + v);
                            }
                        }
                    }
                }

                v = partial.length === 0 ? ‘{}‘: gap ? ‘{\n‘ + gap + 
                partial.join(‘,\n‘ + gap) + ‘\n‘ + mind + ‘}‘: ‘{‘ + partial.join(‘,‘) + ‘}‘;
                gap = mind;
                return v;
            }
        }

下面是图解:

function quote(string) {//将传入的字符串加上引号,有必要转义的先转义
            escapable.lastIndex = 0;//起始位置从0开始
            return escapable.test(string) ? ‘"‘ + string.replace(escapable,function(a) {//匹配到的字符 如\t \n
                var c = Meta[a];//字符对应的转义表示
                //如果c是字符串 ,直接返回对象中键所对应的值  ‘\t‘=>‘\\t‘
                //如果c不是字符串,也就是说它不在Meta对象中,这时做不同的转义处理:
                //拿 a为"\u0600"举例
                //a.charCodeAt(0) =>1536
                //a.charCodeAt(0).toString(16) => 600
                //(‘0000‘ + a.charCodeAt(0).toString(16)) =>0000600
                //(‘0000‘ + a.charCodeAt(0).toString(16)).slice( - 4) 取最后四位 => 0600
                //‘\\u‘ + (‘0000‘ + a.charCodeAt(0).toString(16)).slice( - 4)) ‘\\u0600‘
                return typeof c === ‘string‘ ? c: ‘\\u‘ + (‘0000‘ + a.charCodeAt(0).toString(16)).slice( - 4);
            }) + ‘"‘: ‘"‘ + string + ‘"‘;
        }

这里是扩展parse方法

if (typeof JSON.parse !== ‘function‘) {//如果JSON没有parse方法
            cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
            JSON.parse = function(text,reviver) {//扩展JSON方法
                var j;

                function walk(holder,key) {// walk({‘‘:j},‘‘)

                    var k,v,value = holder[key];//value第一次是传入的eval编译后的结果
                    if (value && typeof value === ‘object‘) {//如果value存在并且是对象
                        for (k in value) {
                            if (Object.prototype.hasOwnProperty.call(value,k)) {//是否有原型上的属性
                                v = walk(value,k);//递归调用获取结果
                                if (v !== undefined) {
                                    value[k] = v;
                                } else {
                                    delete value[k];
                                }
                            }
                        }
                    }
                    //调用walk之前有判断,所以在这里reviver肯定存在
                    return reviver.call(holder,value);
                }
                text = String(text);
                cx.lastIndex = 0;
                if (cx.test(text)) {
                    text = text.replace(cx,function(a) {
                        // \u0600   --->  \\u0600 因为\需要转义
                        return ‘\\u‘ + (‘0000‘ + a.charCodeAt(0).toString(16)).slice( - 4);
                    });
                }

                // text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,‘@‘) 
                // =>把\\t \\uffff 这类转为@
                // =>var text=‘{"a":"\\t44","b":"\\uffff"}‘;  text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,‘@‘);  //{"a":"@44","b":"@"}
                // replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,‘]‘)
                // =>把非空字符串、数值、bool、null替换为]
                // .replace(/(?:^|:|,)(?:\s*\[)+/g,‘‘)
                // => 把 [,[    :[  这类的替换为‘‘
                // 如果剩余的字符串只剩下 ]:,{}和空格 就是测试通过,否则抛出异常
                if (/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,‘@‘)
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,‘]‘).replace(/(?:^|:|,‘‘))) {

                    j = eval(‘(‘ + text + ‘)‘);//eval()传入的参数加括号编译

                    return typeof reviver === ‘function‘ ? walk({//如果第二个参数是函数 返回walk({‘‘:j},‘‘)的结果,否则直接返回eval编译的结果
                        ‘‘: j
                    },‘‘) : j;
                }

                throw new SyntaxError(‘JSON.parse‘);
            };
        }

通过一系列的替换操作,如果剩下的字符串只剩下 ]:,{}和空格,测试通过,接下来就可以用eval编译。

如果parse方法的第二个参数存在,返回walk的调用结果,否则直接返回eval编译结果。

//reviver的用法:
// var jsontext = ‘{ "hiredate": "2008-01-01T12:00:00Z","birthdate": "2008-12-25T12:00:00Z" }‘; 
// var dates = JSON.parse(jsontext,dateReviver); 
// console.log(dates); 
 
// function dateReviver(key,value) { 
//     var a; 
//     if (typeof value === ‘string‘) { 
//         a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value); 
//         if (a) { 
//             return new Date(Date.UTC(+a[1],+a[2] - 1,+a[3],+a[4],//                             +a[5],+a[6])); 
//         } 
//     } 
//     return value; 
// };

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


AJAX是一种基于JavaScript和XML的技术,能够使网页实现异步交互,节省带宽和时间,提高用户体验。在使用AJAX时,需要通过解析JSON格式的数据,来获取所需要的数据。
在网页开发中,我们常常需要通过Ajax从后端获取数据并在页面中展示出来。其中,JSON是一种常用的数据格式。那么,在使用Ajax获取JSON数据后,如何将数据取出来呢?
在前端开发中,经常需要循环JSON对象数组进行数据操作。使用AJAX技术可以在不刷新页面的情况下异步获取数据。那么我们该如何循环JSON对象数组呢?下面我们通过一段代码来进行讲解。
AJAX(Asynchronous JavaScript and XML)是一种用于创建 Web 应用程序的技术,它使用 JavaScript 和 XML(或 JSON)来在后台异步传输数据。
AJAX技术被广泛应用于现代Web开发,它可以在无需重新加载页面的情况下,向服务器发出请求并更新页面,实现了异步更新的效果。而传递JSON数据是AJAX中比较常见的一种方法,下面是如何使用AJAX传递JSON数据的详细介绍。
Ajax是一种通过JavaScript和HTTP请求交互的技术,可以实现无需刷新页面的异步数据交互。在处理数据时,常常需要删除一些已存在的数据。本文将介绍如何使用Ajax删除JSON数据库中的数据。
在使用Ajax时,我们经常需要将数据格式化为JSON格式。JSON是一种轻量级数据交换格式,它以键值对的形式来表达数据。
AJAX是一种支持异步请求的技术,它可以让前端页面不用刷新就能向后台请求数据,并异步地展示给用户,提高了用户的体验感。其中,使用JSON格式化数据可以帮助我们更方便快捷地处理返回的数据。
AJAX是一种前端技术,可以通过异步请求来获取数据,并在页面上更新它们。JSON是一种轻量级的数据交换格式,因为它易于读取和编写,因此在Web应用程序中被广泛使用。AJAX传送JSON数据是一种常见的技术,可以让Web应用
在前端开发中,ajax是很常见的技术,它可以在不刷新整个页面的情况下请求服务器数据和更新部分页面。而当需要遍历多个json文件时,可以使用ajax循环遍历来实现。
AJAX技术是实现Web页面无刷新的最佳方式。其中json解析是一种常用的技术,它可以通过AJAX异步请求数据,再用json解析器将返回的json字符串解析成JavaScript对象。下面就让我们来看看如何使用ajax解析json数据。
AJAX技术可以在不刷新整个WEB页面的情况下与服务器进行数据交换,这使得在现代WEB应用中使用AJAX技术变得非常普遍。而访问JSON数组是一种非常常见的AJAX操作。在本文中,我们将向您展示如何使用AJAX技术循环遍历JSO
Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个页面的情况下更新网页的技术。它可以向服务器发送请求并接收响应,然后使用JavaScript动态地显示内容。
AJAX技术可以帮助我们实现对JSON数据库的循环读取。下面我们来介绍一下如何使用AJAX技术读取JSON数据库。
AJAX是一种在Web应用中实现局部更新的技术。而JSON是一种数据格式,非常适合用来表示数据。在AJAX中,我们经常需要从后端服务器获取JSON格式的数据,在前端页面中进行处理。那么,如何解析JSON数据呢?
AJAX是一种在不重新载入整个页面的情况下,能够更新部分页面的技术,它可以通过异步通信获取后台数据,其中JSON作为一种轻量级数据交换格式,常常被用来传递数据。在使用AJAX接收到后台传送的JSON数据后,需要进行解
在网站开发中,为了减少页面的刷新,异步加载技术成为了开发中越来越常见的一种技术,而 AJAX 技术就是一种常见的实现方式。其中,通过循环读取 JSON 数据能够实现页面内容的实时更新。
在前端开发中,经常需要从服务器获取JSON数据来展示在页面上,而循环遍历这些数据就需要使用AJAX以及JavaScript。本文将介绍如何使用AJAX和JavaScript来循环遍历JSON数据。
在前端开发中,我们常常需要通过 Ajax 请求后端接口获取数据并进行展示。而 JSON 数据则是一种常见的数据格式,因此我们需要了解如何通过 Ajax 获取 JSON 数据。
在使用ajax传递数据时,我们通常会遇到传递json数据类型的情况。那么,接下来我们就来仔细了解一下如何使用ajax传递json数据类型。