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

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

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

    测试六段:    测试第一段:        - 能根据测试用例的描述步骤来执行用例        - 能对照用例的预期结果发现产品的问题        - 能够清晰准确的将问题记录下来后反馈给开发, ...

  2. Nginx 配置高可用

    阅读本文需要安装Nginx 一 什么是高可用 nginx作为负载均衡服务器 所有请求都到了nginx 可见nginx处于非常重要的位置 如果nginx服务器宕机 后端web服务器将无法提供服务 影响严 ...

  3. 转载别人的一篇关于git的文章

    转载网址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  4. Overlay技术

  5. 【读书笔记】Linux内核设计与实现（第五章）

    5.1 内核通信 系统调用在用户空间和硬件设备之间添加了一个中间层. 该层主要作用: 1.为用户空间提供了一种硬件的抽象接口. 2.保证了系统的稳定和安全. 3.每个进程都运行在虚拟系统中. 在Lin ...

  6. 第一个spring，第五天。

    陈志棚:界面跳转与框架 李天麟:游戏界面ui 徐侃:算法代码的设计 经过五天的时间,经过队员的汇报,我们初步已经完成了各项的任务.

  7. 给VMware下的Linux扩展磁盘空间（以CentOS6.3为例）

    参照这篇文章进行的,但是和作者的步骤有些不一样. #查看挂载点:df -h#显示: 文件系统 容量 已用 可用 已用%% 挂载点/dev/mapper/vg_dc01-lv_root 47G 12G ...

  8. 1-Python3从入门到实战—基础之语法

    Python从入门到实战系列--目录 编码格式 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串 # -*- coding=utf-8 -*- 也可以 ...

  9. JetBrains系列WebStorm等中文输入法无法跟随光标的问题的解决办法

    参考:https://blog.csdn.net/wang414300980/article/details/79537875 电脑配置: 解决这个问题的思路就是修改启动软件的JDK,有以下几个方法: ...

  10. Vue入门---属性、style和class绑定方法

    一 .用对象的方法绑定class <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...