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

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

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

    一.环境 系统环境:centos 7.4 64位 Nginx:1.7.9 MySQL: 5.7.20 (二进制包) PHP:5.6.37 二.Ngin 安装 Nginx部署 yum install   ...

  2. 用HackRF和Gqrx来听FM广播

    本文内容.开发板及配件仅限用于学校或科研院所开展科研实验! 淘宝店铺名称:开源SDR实验室 HackRF链接:https://item.taobao.com/item.htm?spm=a1z10.1- ...

  3. 1. Python3 环境搭建

    Python3 环境搭建 开门见山,其他关于Python发展史.语言类型.优缺点等等 可以自己去百度百度,这里就不多说了.其实基本想要学这门语言的时候,你已经了解差不多了!!! Python的运行环境 ...

  4. PAT甲题题解-1108. Finding Average (20)-字符串处理

    求给出数的平均数,当然有些是不符合格式的,要输出该数不是合法的. 这里我写了函数来判断是否符合题目要求的数字,有点麻烦. #include <iostream> #include < ...

  5. Supervised Hashing with Kernels, KSH

    Notation 该论文中应用到较多符号,为避免混淆,在此进行解释: n:原始数据集的大小 l:实验中用于监督学习的数据集大小(矩阵S行/列的大小) m:辅助数据集,用于得到基于核的哈希函数 r:比特 ...

  6. idea不能跟随输入法问题

    在写注释的时候会发现输入法不跟随,这是idea工具本身存在的bug,这个问题很头疼,我找了好多办法都不行,比如删除idea自带的jre,这个办法对我的2018.1.5版本并不适用,以下办法是不需要删除 ...

  7. iptables之四表五链

    iptables可谓是SA的看家本领,需要着重掌握.随着云计算的发展和普及,很多云厂商都提供类似安全组产品来修改机器防火墙. iptables概念 iptables只是Linux防火墙的管理工具而已. ...

  8. react & monaco editor & vs code

    react & monaco editor & vs code monaco-editor https://microsoft.github.io/monaco-editor/inde ...

  9. wordpress WP-PageNavi分页

    1.安装WP-PageNavi分页插件: 这个就没什么好介绍直接安装插件. 2.在需要分页的页面按下面的方式加上相应代码: 插入的位置在以 <?php if (have_posts()) : ? ...

  10. ubuntu系统创建新用户并赋予sudo权限

    1.创建新用户 创建新用户有两种方式:adduser和useradd adduser会为用户创建組./home目录下同名文件夹,密码,而useradd不会 因此推荐使用adduser创建用户,例: s ...