JSON显示库 -- showJson (Javascript)

现在的web的js开发很方便啊,但是碰到iframe里的东西还是不方便看到变量的内容,所以就写了这么个看json内容的玩意,还可以当控制台输出用。

很简单,有需要以后开发新功能

/** 
 * Show json in a new page.(For debug)
 *
 * Licensed under the MIT or GPL Version 3 licenses.
 * @version 1.3
 * @author OWenT
 * @link http://www.owent.net
 * @history 
 *      2012.12.27 
 *          1. 改进JSON内对象循环引用时的导致的栈溢出问题
 *          2. 引入层级路径
 *          3. 引入锚点
 */
 
 /**
  * Object转为字符串
  * @param {Object} json Object对象 
  * @param {Number} tab 缩进数量
  * @param {Object} rules 应用规则
  * @param {String} path 当前路径
  * @return 生成的HTML
  */
function json2String(json, tab, rules, path) {
    var tabStr = "", singleTab = "    ", isClear = false;
    var txt = "";
    
    if (!rules) {
        rules = {
            id: "__json2string_process" + (new Date).getTime().toString() + (json2String.baseIndex ++),
            objs: []
        };
        isClear = true;
    }
    
    tab = tab || 1;
    if (!path) {
        path = "{ROOT}";
        txt += "<a name=\"" + rules.id + "." + path + "\"> </a>";
    }
    
    for (var i = 0; i < tab; i ++) {
        tabStr += singleTab;
    }
    
    if (!json && json !== 0) {
        txt += '<span style="color: Red;">null</span>';
    } else if (typeof(json) == "object") {
        var prefix = '<span style="color: DarkGray; font-weight: bolder;">{</span>', suffix = '<span style="color: DarkGray; font-weight: bolder;">}</span>';
        try {       
            if (toString.call(json).match(/array/i)) {
                prefix = '<span style="color: Orange;">[</span>';
                suffix = '<span style="color: Orange;">]</span>';
            }
        } catch(e) {
            // hoho ...
        }
        
        if (json[rules.id]) {
            txt += prefix + "此处引用 <a style=\"text-decoration: underline; color: Blue;\" href=\"#" + rules.id + "." + json[rules.id] + "\" target=\"_self\" title=\"跳转到引用 " + json[rules.id] + "\" >" + 
                json[rules.id] + "</a>" + suffix;
            return txt;
        }
        json[rules.id] = path;
        rules.objs.push(json);
        
        txt += prefix + "<br />\r\n";
        var first = true;
        for (var key in json) {
            if (key == rules.id)
                continue;
                
            if (first)
                first = false;
            else
                txt += ",<br />\r\n";
            txt += tabStr + "<a name=\"" + rules.id + "." + path + "." + key + "\"> </a>" + "<strong>" + 
                key + "</strong> : " +  json2String(json[key], tab + 1, rules, path + "." + key);
        }
        txt += "<br />\r\n" + tabStr.substr(0, tabStr.length - singleTab.length) + suffix;
    } else if (typeof(json) == "string") {
        txt += '<span style="color: Green;">"' + json + '"</span>';
    } else if (typeof(json) == "number") {
        txt += '<span style="color: Blue;">' + json + '</span>';
    } else if (typeof(json) == "function") {
        txt += '<span style="color: Purple;">' + json + '</span>';
    } else {
        txt += json.toString();
    }
    
    if (isClear) {
        for (var i = 0; i < rules.objs.length; ++ i) {
            delete rules.objs[i][rules.id];
        }
        rules.objs = [];
    }
    
    return txt;
}
 
function showJson(json, title, windowName, dlg_opt) {
    json2String.baseIndex = json2String.baseIndex || 0;
    
    title = title || "Json viewer";
    windowName = windowName || "result" + (new Date()).toGMTString();
    if (window.jQuery && jQuery.fn && jQuery.fn.dialog) {
        $("<div></div>").append(json2String(json)).css({
            "text-align": "left"
        }).dialog($.extend({
            "modal": false,
            "title": title,
            "width": 640,
            "height": 480,
            "buttons": {
                "关闭": function() {
                    $( this ).dialog( "close" );
                }
            }
        }, dlg_opt));
    } else {
        var wnd = window.open("about:blank", "_blank", "height=600, width=800, toolbar=no, menubar=no, resizable=yes, location=no, status=no", true);
        if (!wnd)
            alert("窗口被拦截!");
        wnd.document.write("<!DOCTYPE html><html><head><title>" + title + "</title></head><body>" + json2String(json) + "</body></html>");
    }
    return wnd;
}
  1. 更新对不同类型着色
  2. 如果载入了jQuery UI 则使用jQuery UI的Dialog打开,用于解决嵌套iframe时浏览器拦截问题
  3. 解决Object循环引用时栈溢出问题,同时增加引用的指向锚点

Licensed under the MIT or GPL Version 3 licenses.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏chenssy

【死磕Java并发】-----Java内存模型之重排序

在执行程序时,为了提供性能,处理器和编译器常常会对指令进行重排序,但是不能随意重排序,不是你想怎么排序就怎么排序,它需要满足以下两个条件: 1. 在单线程环境...

17820
来自专栏闰土大叔

一个前端老菜鸟写给在校生和应届生的几句走心话

大家好,我是王小闰,来自山西太原,是一名活跃于前端圈的90后大叔,目前业余时间在运营着自己的一个技术类公众号,叫闰土大叔。

17420
来自专栏chenssy

【死磕Java并发】—–J.U.C之并发工具类:Semaphore

信号量Semaphore是一个控制访问多个共享资源的计数器,和CountDownLatch一样,其本质上是一个“共享锁”。

8130
来自专栏chenssy

【死磕Java并发】-----深入分析volatile的实现原理

通过前面一章我们了解了synchronized是一个重量级的锁,虽然JVM对它做了很多优化,而下面介绍的volatile则是轻量级的synchronized。如...

12410
来自专栏Kirito的技术分享

天池中间件大赛百万队列存储设计总结【复赛】

维持了 20 天的复赛终于告一段落了,国际惯例先说结果,复赛结果不太理想,一度从第 10 名掉到了最后的第 36 名,主要是写入的优化卡了 5 天,一直没有进展...

30530
来自专栏chenssy

【死磕Java并发】-----Java内存模型之分析volatile

前篇博客【死磕Java并发】—–深入分析volatile的实现原理 中已经阐述了volatile的特性了:

11920
来自专栏闰土大叔

vue菜鸟从业记:公司项目里如何进行前后端接口联调

最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言。

20810
来自专栏chenssy

【死磕Java并发】-----Java内存模型之happens-before

在上篇博客(【死磕Java并发】—–深入分析volatile的实现原理)LZ提到过由于存在线程本地内存和主内存的原因,再加上重排序,会导致多线程环境下存在可见性...

13320
来自专栏AI派

我是如何入门机器学习的呢

机器学习在很多眼里就是香饽饽,因为机器学习相关的岗位在当前市场待遇不错,但同时机器学习在很多人面前又是一座大山,因为发现它太难学了。在这里我分享下我个人入门机器...

21250
来自专栏chenssy

【死磕Java并发】-----Java内存模型之从JMM角度分析DCL

DCL,即Double Check Lock,即双重检查锁定。其实DCL很多人在单例模式中用过,LZ面试人的时候也要他们写过,但是有很多人都会写错。他们为什么会...

14430

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励