首页 > 代码库 > json2.js 源码解读
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方法
if (typeof JSON.stringify !== ‘function‘) {//扩展JSON的stringify方法 escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; meta = { // table of character substitutions ‘\b‘: ‘\\b‘, ‘\t‘: ‘\\t‘, ‘\n‘: ‘\\n‘, ‘\f‘: ‘\\f‘, ‘\r‘: ‘\\r‘, ‘"‘: ‘\\"‘, ‘\\‘: ‘\\\\‘ }; JSON.stringify = function(value, replacer, space) {//扩展JSON.stringify方法 var i;//for循环变量 gap = ‘‘;//分隔符 indent = ‘‘;//分隔符 // If the space parameter is a number, make an indent string containing that // many spaces. if (typeof space === ‘number‘) {//如果是数值 for (i = 0; i < space; i += 1) {//分隔符为space个空格 indent += ‘ ‘; } } else if (typeof space === ‘string‘) {//如果是字符串 indent = space;//分隔符就是字符串 } rep = replacer; if (replacer && typeof replacer !== ‘function‘ && (typeof replacer !== ‘object‘ || typeof replacer.length !== ‘number‘)) { throw new Error(‘JSON.stringify‘);//如果第二个参数存在,必须为函数或者数组(伪数组),否则抛出异常 } return str(‘‘, { ‘‘: value }); };}
做了2件事:获取分隔符和replacer,内部调用str方法
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 = http://www.mamicode.com/holder[key];//第二次调用时 value就是传入的键所对应的值 //如果value有toJSON方法 if (value && typeof value =http://www.mamicode.com/== ‘object‘ && typeof value.toJSON === ‘function‘) { value = value.toJSON(key);//调用value.toJSON方法 } if (typeof rep === ‘function‘) {//如果replace是一个方法 value =http://www.mamicode.com/ 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 = http://www.mamicode.com/holder[key];//value第一次是传入的eval编译后的结果 if (value && typeof value =http://www.mamicode.com/== ‘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 =http://www.mamicode.com/== ‘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; // };
json2.js 源码解读
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。