基於牛客網Js v8引擎提供的讀/寫方法作的調試頁面

項目地址

正直秋招季，對找工做的人來講，牛客網確定不陌生，如今不少大型互聯網公司的在線筆試都是在牛客網上面進行的（好像有打廣告的嫌疑）。

Js有那麼多的操做數據結構的api，ES6新增的那些set、map數據結構和其它的好比Array.from()這麼方便的東西。做爲一名想成爲前端程序員的菜鳥，就想好好的用Js寫編程題，奈何都知道，Js侷限性，對數據的讀取和輸出都得靠頁面來實現，固然也能夠console，只是不符合咱們如今須要的使用場景。

牛客網爲了知足咱們用Js寫編程題的願望，在Javascript v8那塊，給提供了readline()和print()兩個方法，用來讀取輸入和輸出：

但很明顯，這隻能在它提供的編碼頁面才能用，咱們想線下使用，並且想進行debug是更不可能的。怎麼辦？想用Js寫題目又不能保證代碼一次寫對，想debug又無從下手。而後一堆人轉用C++、Java去了。但本菜鳥就是想用Js寫，怎麼辦？只能本身仿照那兩個函數（readline()和print()）實現其功能了，寫一個線下的調試頁面，本地js代碼放上去調試，完了以後直接複製黏貼代碼到牛客網就好了。

效果演示：

先說下，代碼很簡陋，基本思路就是一個頁面兩個框，一個用來輸入數據--readline()，一個用來顯示執行結果--print()。要調試的Js文件得本身在entry.js文件中引入，而後在chrome的開發者工具那塊debug。具體用法和注意事項請參照項目源碼那邊的README。

不貼下代碼好像不地道，這是項目的核心文件entry的代碼，包括實現readline()和print()函數：

/*加載js文件*/
var excute = function(){
    var script = document.createElement("script");
    script.src = "./code/demo.js";
    document.body.appendChild(script);
}


/*讀取一行數據*/
var readline = function () {
    var data = '\n' + document.getElementById('data').value + '\n';

    readline.count = ++readline.count || 1;

    var line = [],
        nNum =0;

    for(var i = 1,vlen = data.length; i < vlen; i++){
        if(data[i] === '\n'){
            nNum +=1;
        }

        if(nNum === readline.count){
            for(var ii = i-1; data[ii] != '\n'; ii--){
                line.push(data[ii]);
            }

            line = line.reverse();

            return line.join('');   //返回的是字符串類型
            //break;
        }
    }

}

/*重測數據*/
var repeat = function(){
    var con = document.getElementById('data').value;
    readline.count = undefined;
    document.getElementById('result').innerHTML = '';
}

/*更新頁面 清空輸入框*/
var update = function () {
        window.location = './entry.html';
}

/*輸出函數*/
var print = function (data) {
    //console.log(data);
    document.getElementById('result').innerHTML = '';
    document.getElementById('result').innerHTML = data;
}

這個工具的初衷是能愉快的用牛客網的那兩個api，在線下調試Js代碼，想要的就拿去吧，但願能start鼓勵一下，還有不少不足，之後有時間慢慢完善吧。大佬輕噴，菜鳥一枚。

項目地址