JS 简易控制台插件 [供博客, 论坛运行js用]

浏览数：13 / 时间：2015年06月09日

今天厚着脸皮来推荐下鄙人写的一个小插件吧。
看过我博客的应该都熟悉这个插件了，其实就是这货。

这东西是我去年写的，当时水平也不怎么样，不过好歹还是实现了简单功能。
我先简单介绍下这东西什么用吧。

因为在论坛，博客里写东西的时候，非常希望有个运行功能，当然目前大部分的功能都是 open 实现的。
而且在 IE6-7 下没有 console 可供调试，所以当时脑子一热就写了这东西。
可能你会说 Firebug Lite 不是很方便么，而且兼容 IE6 呢。。
确实，不过我的出发点不一样，只是写一个可供输出 console 结果的小插件。

目前已经在落叶兄弟的论坛里经历了一年的洗礼，出现过各种奇葩BUG，同时也让我学到了很多。
让我印象比较深的BUG之一就是不能用正则处理结果。

因为用户调试正则时 RegExp.$1, RegExp.$_ 之类的会有值存在。
如果插件处理结果的时候也用正则处理，就会覆盖这些结果。

举个例子简单说明

"aaaa123aaa".match(/(\d+)/);
console.log( RegExp.$1 ); // 123

点击右上角运行看看效果吧。
如果我在处理结果的时候也用正则了，这里的 $1 就被覆盖，或者丢失了。
类似这样的问题还有很多，真心学到了不少呢。

好了不扯了，继续说插件吧。
大家可以去我的 Git@OSC 下载《简易控制台插件》

插件很小，min后4.58KB，纯js写的不依然任何库，兼容现代浏览器和 IE6-11。
PS: 我的博客由于语法高亮插件的缘故，所以不支持IE6-8，要测试 IE6-11 的朋友可以去落叶兄弟的论坛看看。

调用方法

请将该文件调用写到 body 标签内，写在头部会出错，因为没有写 dom ready 检测。
也不要异步调用他，因为脚本有一个根据参数判定是否劫持 console 的过程。

所以为了简单安全，直接在 <body> 内调用即可。

<script type="text/javascript" src="Simple-Console.min.js"></script>

如果是在 IE6-7 调试的时候用，建议开启劫持模式。

<script type="text/javascript" src="Simple-Console.min.js?rep"></script>

全局方法

为了方便在博客, 论坛等地方使用，脚本特意提供了一个 runjs 方法。

runjs(‘alert("test.")‘);
runjs(‘console.log("test.")‘);
runjs(‘console.dir({key: "val"})‘);

console调试接口

水平有限，只提供几个简单常用的接口给大家。

alert(str); //显示信息
console.log(arg1 [,arg2 ...]); // 可显示多个参数的信息
console.dir(obj); // 如果是对象，展开显示
console.time(str); // 测试代码运行时间
console.timeEnd(str); // 测试代码运行时间
console.error(str); // 输出错误信息 (其实是提供给插件本身用的)
console.clear(); // 清空显示 (其实是提供给插件本身用的)

目前就这些，基本用法和原生的一样，只是功能没原生的强。。
PS：关于 time, timeEnd 的用法可以参考下《浅谈 == 与 === 的性能问题》或者看谷歌官方文档。

接下来说说怎么在你的博客或者论坛里调用这个插件吧。

var runit = {
    js: function (code, istry) { // 运行js，istry 是否捕获运行时错误
        runjs(code, istry);
    },
    html: function (code) { // 运行 html
        var newwin = window.open(‘‘, "_blank", ‘‘);
        newwin.document.open(‘text/html‘, ‘replace‘);
        newwin.opener = null;
        newwin.document.write(code);
        newwin.document.close(); 
    }
}

这个是我目前线上用的代码，非常简单。

在你的语法高亮上加上一个运行按钮，然后绑定事件即可。
例如这样：

$(".codeBox").on("click", ‘.cb-run‘,  function() {
    var className = this.className,
        runType = className.indexOf(‘html‘) > -1 ? "html" : "js",
        istry = ~className.indexOf("notry"),
        code = $(this).partnet().find("pre").text(); // 获取pre内的代码文本
        // 或者这样
        // var code = $(this).partnet().data("code"); // 高亮时绑定的源码，比每次 text 获取效率高。
    runit[runType](code, istry); // 运行代码
});

这个差不多就是我的博客运行功能的核心思路了。
当然我还做了一些其他处理，因为我用的语法高亮插件仅仅是高亮功能，那些按钮什么的全是我自己加上的。

好了，今天的分享差不多就这些了，如果在使用中有什么不懂的，或者遇到BUG了，可以留言，我会及时处理的。