今天厚着臉皮來推薦下鄙人寫的一個小插件吧。
看過我博客的應該都熟悉這個插件了，其實就是這貨。
這東西是我去年寫的，當時水平也不怎么樣，不過好歹還是實現了簡單功能。
我先簡單介紹下這東西什么用吧。
因為在 論壇，博客 里寫東西的時候，非常希望有個運行功能，當然目前大部分的功能都是 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了，可以留言，我會及時處理的。
