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

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

因为在 论坛，博客 里写东西的时候，非常希望有个运行功能，当然目前大部分的功能都是 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，gizp后2.7KB，纯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了，可以留言，我会及时处理的。

JS 简易控制台插件 [供 博客, 论坛 运行js用]的更多相关文章

  1. 运用BT在centos下搭建一个博客论坛

    在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...

  2. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  3. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件（二）

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  4. 借用Snippet插件美化博客中的代码

    书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件.   笔者在网上翻阅的时候发现了Snippet ...

  5. 基于Hexo+Node.js+github+coding搭建个人博客——基础篇

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...

  6. Chrome 插件自定义博客编辑界面

    总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...

  7. 使用Coding.net+Hexo+node.js+git来搭建个人博客

    使用Coding.net来搭建基于Hexo的博客 一.准备工作 什么是Coding.net Coding可以说,就是国产的Github,但是,有一个功能使它似乎超越了GitHub-那就是 Web ID ...

  8. mysql常用博客论坛

    大神博客: starive的博客:http://blog.itpub.net/26435490/viewspace-1133659/ 北在南方的博客:http://blog.itpub.net/226 ...

  9. 使用Node.js+Hexo+Github搭建个人博客

    一.为什么要花时间去搭建个人博客? 首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”.一开始我把笔记做在本子上.电脑上,发现要用的时候特别地不方便,而且越记越多.越多越 ...

随机推荐

  1. python代码实现经典排序算法

    排序算法在程序中有至关重要的作用, 不同算法的时间复杂度和空间复杂度都有所区别, 这影响着程序运行的效率和资源占用的情况, 经常对一些算法多加练习, 强化吸收, 可以提高对算法的理解, 进而运用到实践 ...

  2. GitHub 新手教程 三，Git Bash

    1,通过 开始菜单 启动 Git Bash,或者 在 cmd 下执行以下命令: D:\SoftWare\Git\git-bash.exe --cd-to-home (D:\SoftWare\Git 是 ...

  3. TCP三路握手，本质是一个通信原理相关的问题

    在通信系统中,最基本的信息的传递都需要两步,发送方发送的消息和对方的回复确认:A->B Send, B->A Reply(ACK).如果多接触一下其他行业的通信流程和规范,例如航空.铁路调 ...

  4. someday团队Postmortem（事后诸葛亮会议）

    一.会议相关介绍: 时间:2018年1月12日 地点:第九实验楼五楼机房 参会人员:someday团队全体成员 二.每个成员在beta阶段的实践和alpha阶段有何改进? (一)设想和目标: 我们的软 ...

  5. 个人作业3——个人总结AlPha阶段

    一.Alpha版本的总结 1.感受 Alpha版本已经结束了,回顾整个过程,我最大的遗憾就是项目完成得不是很理想,同时觉得自己做得不够多.不够好. 2.我做了哪些工作 数据库的连接,部分团队博客:部分 ...

  6. DEP

    DEP(Data execution protect)数据执行保护,这个功能需要操作系统和硬件的共同支持才可以生效.DEP的原理就是在系统的内存页中设置了一个标志位,标示这个内存页的属性(可执行). ...

  7. 在iOS9 中使用3D Touch

    iOS9提供了四类API( Home Screen Quick Action . UIKit Peek & Pop . WebView Peek & Pop 和 UITouch For ...

  8. 动态sql中的条件判断取值来源于map 或者 model

  9. [代码]--ORA-01745: 无效的主机/绑定变量名 ORA-00917: 缺失的逗号 oracle日期格式错误

    今天在oracle中执行插入语句的时候报了一个奇怪的错误,在程序中报的错误是ORA-01745: 无效的主机/绑定变量名,网上一查说是缺失逗号,在查询分析器执行的时候报缺失的逗号,仔细看了一下也没有缺 ...

  10. Java字节流与字符流

    九.字节流与字符流 9.1 IO的分类 <段落>根据数据的流向分为:输入流和输出流. 输入流 :把数据从其他设备上读取到内存中的流. 输出流 :把数据从内存 中写出到其他设备上的流. 数据 ...