首页 > 代码库 > JS 简易控制台插件 [供 博客, 论坛 运行js用]
JS 简易控制台插件 [供 博客, 论坛 运行js用]
今天厚着脸皮来推荐下鄙人写的一个小插件吧。
看过我博客的应该都熟悉这个插件了，其实就是这货。
这东西是我去年写的，当时水平也不怎么样，不过好歹还是实现了简单功能。
我先简单介绍下这东西什么用吧。
因为在 论坛，博客 里写东西的时候，非常希望有个运行功能，当然目前大部分的功能都是 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="http://www.mamicode.com/Simple-Console.min.js"></script>
如果是在 IE6-7 调试的时候用，建议开启劫持模式。
<script type="text/javascript" src="http://www.mamicode.com/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了，可以留言，我会及时处理的。
