基于牛客网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鼓励一下，还有很多不足，以后有时间慢慢完善吧。大佬轻喷，菜鸟一枚。

项目地址