[轉]json2.js 源碼解讀

時間 2019-11-11

原文原文鏈接

這一部分是對Date String Number Boolean擴展toString方法，Date的toString是返回UTC格式的字符串，然後面幾個是返回原始值。json

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;
            }
        }

下面是圖解：
app

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編譯。oop

若是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; 
// };