博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[转]json2.js 源码解读
阅读量:5990 次
发布时间:2019-06-20

本文共 8194 字,大约阅读时间需要 27 分钟。

这一部分是对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, key, 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(/(?:^|:|,)(?:\s*\[)+/g, ‘‘))) {                    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; // };

转载地址:http://evnlx.baihongyu.com/

你可能感兴趣的文章
字典操作
查看>>
Javascript基础1
查看>>
Java核心技术及面试指南 集合部分总的面试题归纳以及答案
查看>>
“看懂-复制-本土化-战胜”模式-看书《阿里传》
查看>>
Oracle占用端口情况
查看>>
python 键值对的树实现
查看>>
nginx
查看>>
python网络编程socket之多线程
查看>>
分工表
查看>>
【软工学习】优化管理
查看>>
MySQL创建用户的三种方法 (并授权)转
查看>>
如何起一个本地服务
查看>>
declaration may not appear after executable statement in block
查看>>
【CT】Universal Turing Machine
查看>>
数据之魅(1)单一变量:形状和分布
查看>>
Nginx调优
查看>>
神,赐我一颗平静的心!
查看>>
HDU2045(递推题)
查看>>
企业级 SpringBoot 教程 (二十五)sprinboot整合elk,搭建实时日志平台
查看>>
(一)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - 平台导语简介
查看>>