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

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

因为在 论坛，博客 里写东西的时候，非常希望有个运行功能，当然目前大部分的功能都是 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. Notepad++常用插件

    Notepad++常用插件 1.CCompletion 进行文本的方法查找的工具. 会点击Ccompletion中的CCompletion菜单,就会出现菜单选择框 2.Compare 进行文本比较的工 ...

  2. Teaching Machines to Understand Us 让机器理解我们 之二 深度学习的历史

    Deep history 深度学习的历史 The roots of deep learning reach back further than LeCun’s time at Bell Labs. H ...

  3. dokuwiki编辑器修改-color插件-添加按钮

    需求 dokuwiki的编辑工具栏是以 MediaWiki 的为基础发展来的. 在它的编辑器color插件的颜色按钮中,我想添加新的按钮功能.如红色字体黄色背景的修饰,类似于涂中文字强调的意思. 步骤 ...

  4. 利用KMP算法解决串的模式匹配问题（c++) -- 数据结构

    题目: 7-1 串的模式匹配 (30 分) 给定一个主串S(长度<=10^6)和一个模式T(长度<=10^5),要求在主串S中找出与模式T相匹配的子串,返回相匹配的子串中的第一个字符在主串 ...

  5. Sprint最后一天

    界面流程:  数据库里的信息: 还存在的问题: 1:选择包车城市时:下面的界面没对应到包车城市类型 2:看不到个人订票信息

  6. do

    http://www.cnblogs.com/xdp-gacl/p/3791993.html http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html

  7. ElasticSearch 2 (37) - 信息聚合系列之内存与延时

    ElasticSearch 2 (37) - 信息聚合系列之内存与延时 摘要 控制内存使用与延时 版本 elasticsearch版本: elasticsearch-2.x 内容 Fielddata ...

  8. join()方法跟踪

    #join方法跟踪java.lang.Thread.join() 进入线程的join方法,实际上线程thread是实现的 runnable接口 class Thread implements Runn ...

  9. 在vue中使用weixin-js-sdk自定义微信分享效果

    在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...

  10. mybatis之DAO层自动实现接口

    * 使用mybatis举例,使用DAO接口方式实现* 不需要针对接口去编写具体的实现类代码,编写映射XML文件,直接拿来使用即可.* 1.导入jar包:mybatis和mysql-connector* ...