摘要：可能是在環(huán)境或者直接在瀏覽器的控制臺(tái)中進(jìn)行調(diào)試。阮老師的代碼傳送門在此這個(gè)代碼的演示程序，如下圖所示本系統(tǒng)的特點(diǎn)系統(tǒng)采用進(jìn)行開發(fā)的。

github:https://github.com/sixtrees/j...

這兩天在看阮一峰的《ES6標(biāo)準(zhǔn)入門》，對(duì)其中涉及到的代碼示例部分，感覺到很不方便，不知道阮老師是如何進(jìn)行代碼調(diào)試的。可能是在nodejs環(huán)境或者直接在瀏覽器的控制臺(tái)中進(jìn)行調(diào)試。我每次都是在nodejs命令行中進(jìn)行代碼編寫，由于命令行本身的特點(diǎn)，有一句代碼編寫錯(cuò)誤，都可能導(dǎo)致需要重寫所有的代碼。

像下圖中所示的情況一樣，當(dāng)我們由java或者其他語言的編寫習(xí)慣造成的語法錯(cuò)誤for (var item of set )，導(dǎo)致測(cè)試代碼沒能得到正確的輸出，這時(shí)候我們就需要重頭來過，這體驗(yàn)當(dāng)然是不好的，在瀏覽器的控制臺(tái)中這種情況，會(huì)好一點(diǎn)。但是，一旦我們不小心觸碰到了ENTER按鍵，那就悲劇了。

我也曾異想天開的認(rèn)為既然nodejs可以使用node app.js來啟動(dòng)nodejs程序，那為什么不試試用node test.js來進(jìn)行代碼測(cè)試呢。經(jīng)過測(cè)試，發(fā)現(xiàn)是可以的，但是這樣，我每一次都要在命令行和文本編輯器之間進(jìn)行切換。

由于，我想簡(jiǎn)單點(diǎn)，開發(fā)一個(gè)基于web的IDE來運(yùn)行我們輸入的javascript或者es2015也就是es6代碼。經(jīng)過一個(gè)晚上加一個(gè)上午的構(gòu)思和代碼編寫，已經(jīng)完成了基礎(chǔ)代碼的編寫。下圖就是這個(gè)項(xiàng)目的一個(gè)運(yùn)行示例。利用CodeMirror插件來作為代碼編輯插件，并且根據(jù)需要，改寫了CodeMirror官方的javascript-hint.js文件，使得代碼提示的效果更豐富，同時(shí)也發(fā)現(xiàn)了網(wǎng)上大多數(shù)坑人的帖子帶來的問題，后面都要有詳細(xì)的說明。先來簡(jiǎn)單的看一下我們的系統(tǒng)長(zhǎng)什么樣吧，至于界面的設(shè)計(jì)，大家就將就的看一下，畢竟功能才是我們所需要的。

目前，我已經(jīng)將代碼托管至github(點(diǎn)我)。下面，我來演示如何安裝本平臺(tái)，請(qǐng)大家放心，不會(huì)涉及太多復(fù)雜的東西，因?yàn)檫@個(gè)系統(tǒng)只是一個(gè)很簡(jiǎn)單的IDE環(huán)境。

先在webstorm下看一下項(xiàng)目結(jié)構(gòu)：

下面開始進(jìn)入安裝階段。
項(xiàng)目采用的是express進(jìn)行開發(fā)的，因此，主要的npm依賴見下面的代碼區(qū)。

  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "hbs": "~4.0.1",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }

好了，我們開始連接服務(wù)器或者在自己的電腦上打開命令行（我用的msysgit，大家也可以用cmder）
進(jìn)入到我們的工作文件夾，我這里用的是自己的D盤下面的nodejs文件夾，可以使用如下命令進(jìn)行快速進(jìn)入

Administrator@neil-PC MINGW64 /d/nodejs
$ cd
$ cd d:/nodejs
$ pwd
/d/nodejs
$ git clone https://github.com/sixtrees/js-online-running.git

克隆完成后，進(jìn)入js-online-running文件夾。

執(zhí)行npm安裝項(xiàng)目的依賴，關(guān)于npm install 如何安裝package.json文件夾下的依賴，請(qǐng)大家自行了解其中緣由。

$ npm install
js-online-running@0.0.0 D:
odejsjs-online-running
+-- body-parser@1.17.2
+-- cookie-parser@1.4.3
+-- debug@2.6.8
+-- express@4.15.3
+-- hbs@4.0.1
+-- morgan@1.8.1
`-- serve-favicon@2.4.3

安裝好npm的依賴之后，我們就可以使用 node bin/www來運(yùn)行項(xiàng)目了。bin/www文件時(shí)系統(tǒng)啟動(dòng)文件，請(qǐng)不要用node app.js來試圖運(yùn)行本系統(tǒng)。
還有就是不要在bin之前加/，這是畫蛇添足。執(zhí)行node bin/www后，node就會(huì)啟動(dòng)localhost:3000作為項(xiàng)目的部署地址了，端口號(hào)可以在bin/www文件中進(jìn)行修改。此時(shí)，是沒有任何輸出的，如果你是用webstorm打開的，推薦大家使用nodemon等熱部署解決方法。具體的方法，請(qǐng)自己自行上網(wǎng)查找解決方案，反正就是很簡(jiǎn)答的那種。像用IDEA來開發(fā)java， 我會(huì)推薦大家使用JRebel來進(jìn)行熱部署。這樣的東西是可以提供編程的效率的。

此時(shí)，打開瀏覽器，輸入localhost:3000，就可以看到我們的頁面了。

此時(shí)，nodejs控制臺(tái)也會(huì)輸入所有的資源請(qǐng)求情況。

到這里，系統(tǒng)的部署就完成了。就可以用這個(gè)平臺(tái)來進(jìn)行js代碼的運(yùn)行測(cè)試了。
總結(jié)一下，啟動(dòng)項(xiàng)目，使用node bin/www，如果想隨電腦啟動(dòng)，請(qǐng)自行查找如何在windows或者linux平臺(tái)下，讓nodejs項(xiàng)目對(duì)計(jì)算機(jī)啟動(dòng)而啟動(dòng)。

下面，我使用阮一峰的《es6標(biāo)準(zhǔn)入門》的一個(gè)案例代碼來演示如何使用本平臺(tái)，其實(shí)這個(gè)平臺(tái)的初衷就是學(xué)了配合阮老師的書來學(xué)習(xí)的。
阮老師的代碼傳送門：在此

var a = [1,2,3,4];
var set = neww Set(a);
for(var item of a) {
  console.log(item);
}

這個(gè)代碼的演示程序，如下圖所示

系統(tǒng)采用nodejs+express進(jìn)行開發(fā)的。但是主要的實(shí)現(xiàn)都是靠html+javascript來實(shí)現(xiàn)的，我當(dāng)時(shí)是想用戶傳遞自己輸入的javascript語句到后臺(tái)進(jìn)行執(zhí)行，但是根據(jù)常識(shí)，瀏覽器是可以直接運(yùn)行javascript代碼的，因此，就想到了eval這個(gè)讓大家又愛又怕的函數(shù)來執(zhí)行我們輸入的javascript語句，并且捕獲異常，將捕獲的異常信息做為bootstrap-treeview插件的數(shù)據(jù)來顯示具有層次結(jié)果的錯(cuò)誤信息。（這里我可能描述的不夠準(zhǔn)備，捕獲的是Error.

總結(jié)幾個(gè)特點(diǎn)：

使用最新的的CodeMirrror，包含了所有的樣式和addon。用戶可以根據(jù)自己喜歡來設(shè)置自己喜歡的代碼編輯區(qū)的配色方案。

利用CodeMirror的cursorActivity事件來完成代碼提示的觸發(fā)。網(wǎng)上一群坑爹的貨，居然說用onChange事件，老子的瀏覽器選項(xiàng)卡直接卡死，在仔細(xì)看了官方的文檔后，發(fā)現(xiàn)cursorActivity事件才是解決代碼提示的正確道路。

利用split函數(shù)將用戶輸入的所有的代碼按照空格進(jìn)行分割，獲取所有的英文單詞，將這些單詞傳遞給一個(gè)自定義的全局變量CodeMirror.ukeys，結(jié)合javascript的關(guān)鍵字來實(shí)現(xiàn)代碼提示，所以，本系統(tǒng)能夠?qū)崿F(xiàn)實(shí)時(shí)的代碼提示，而且可以提示用戶出入的變量名，不僅僅是javascript關(guān)鍵詞，從而給人更真實(shí)的IDE感。

由于時(shí)間較多，沒有做很多的后臺(tái)的程序的編寫， 大家有興趣的，可以mysql或者mongodb來實(shí)現(xiàn)類似于HUE的在線IDE。

這個(gè)問題在原生的CodeMirror有兩個(gè)問題，

一個(gè)問題就是代碼提示的時(shí)候，在沒有任何輸入的時(shí)候就會(huì)彈出所有的提示關(guān)鍵詞，這一點(diǎn)讓人很討厭，那么該如何改進(jìn)呢。由于我們這里使用的javascript-hint.js來進(jìn)行javascript代碼的提示，那我們可以修改的文件就應(yīng)該是public/codemirror/addon/hint/javascript-hint.js文件，如果大家仔細(xì)的閱讀了CodeMirror的代碼，就會(huì)發(fā)現(xiàn)在javascript-hint.js文件中有一個(gè)函數(shù)getCompletions，該函數(shù)有一個(gè)參數(shù)叫token,這個(gè)token其實(shí)是編譯原理中所說的token，也就是一個(gè)語法分割單位，這個(gè)token是我們代碼提示的關(guān)鍵，所有的關(guān)鍵字就要跟token進(jìn)行比對(duì)，如果發(fā)現(xiàn)token是某些關(guān)鍵字的前綴，那么這些單詞都要作為當(dāng)前的關(guān)鍵字提示給用戶。
例如，下圖中，我們正在輸入的語法單詞是se，那么此時(shí)觸發(fā)的cursorActivity事件調(diào)用showHint方法，經(jīng)過一系列的函數(shù)判斷，最重獲取到當(dāng)前的token是se，則我們需要將所有以se為首的單詞進(jìn)行彈出提示。那么，針對(duì)我們正在說的這個(gè)事情：CodeMirror在我們沒有任何輸入的時(shí)候，也會(huì)進(jìn)行代碼提示，那根據(jù)分析沒有任何輸入時(shí)，觸發(fā)cursorActivity事件時(shí)，得到的token的值是""，我們只需要在getCompletions函數(shù)(這個(gè)函數(shù)就是獲取和當(dāng)前用戶正在輸入的語法單詞匹配的所有關(guān)鍵詞的函數(shù))的開始判斷token==""，如果是true，則直接返回一個(gè)空的list{}。

改寫的代碼如下：

    function getCompletions(token, context, keywords,options) {

        //這里是處理沒有任何字母輸入時(shí)也會(huì)有代碼提示的原因。
        if (token.string == "") {
            return {list:{}};;
        }
        ...
}

另外一個(gè)問題就是CodeMirror能提供的auto-complete(代碼自動(dòng)完成)是需要進(jìn)行按鍵綁定的，用戶通過某個(gè)按鍵組合才能觸發(fā)autocomplete事件，這對(duì)于我們寫代碼的速度肯定影響是很大。因此，我們希望在我們輸入字符的同時(shí)，界面可以給出我們實(shí)時(shí)的代碼提示，而不需要進(jìn)行按鍵組合來觸發(fā)。一般網(wǎng)上的示例都是比較坑爹的，代碼示例如下：

editor.on("change", function () {
     editor.showHint();
});

如果你是這么用CodeMirror的，或者你正在發(fā)愁的時(shí)候，我希望我的這的總結(jié)能夠給你提供比較穩(wěn)的幫助。繼續(xù)說，上面的代碼示例千萬不要用，因?yàn)檫@樣做了，瀏覽器會(huì)卡死的，而造成這種現(xiàn)象 的原因可能是CodeMirror內(nèi)部處理的問題，我沒有仔細(xì)研究，但是經(jīng)過我的仔細(xì)閱讀官方文檔和不斷摸索，我給出一個(gè)比較正確的方案來實(shí)現(xiàn)代碼的實(shí)時(shí)提示。

//不要用change
editor.on("cursorActivity", function () {
            //調(diào)用顯示提示
            editor.showHint();
});

如果，你是這么做的或者你剛好這么改正了，那么恭喜你，你應(yīng)該得到了你要的效果。

好了，這兩個(gè)問題，就簡(jiǎn)單論述到這里，下面還有更重要的東西需要我來論述的。

不失一般性，我這里就描述一下這個(gè)項(xiàng)目中，我是如何獲取更多的關(guān)鍵字（這里的關(guān)鍵字是指匹配用戶輸入的提示單詞）并且將這樣單詞進(jìn)行匹配并跟隨原有的關(guān)鍵字進(jìn)行實(shí)時(shí)提示的。

還記得剛才看過的那個(gè)代碼片段吧，上面的代碼是我為了給大家描述如何來觸發(fā)代碼實(shí)時(shí)提示的解決方案的。下面才是本項(xiàng)目中實(shí)際用到的代碼。下面的代碼注釋已經(jīng)寫的很清楚的，首先就是利用CodeMirror的API來獲取用戶輸入代碼（注意是純代碼），然后利用正則來提取出所有的單詞，用match匹配后得到的是一個(gè)數(shù)組，然后將該數(shù)組傳遞給我們拓展在CodeMirror全局變量的上一個(gè)屬性ukeys。然后再調(diào)用editor.showHint()來處理實(shí)際的代碼提示。

 /**
 * 用來實(shí)時(shí)對(duì)用戶的輸入進(jìn)行提示
 */
editor.on("cursorActivity", function () {
    //獲取用戶當(dāng)前的編輯器中的編寫的代碼
    var words = editor.getValue() + "";
    //利用正則取出用戶輸入的所有的英文的字母
    words = words.replace(/[a-z]+[-|"]+[a-z]+/ig, "").match(/([a-z]+)/ig);
    //將獲取到的用戶的單詞傳入CodeMirror,并在javascript-hint中做匹配
    CodeMirror.ukeys = words;
    //調(diào)用顯示提示
    editor.showHint();
});

上面的描述希望沒有給您帶來閱讀上的不順暢，下面，我將描述一下如何在javascript-hint.js文件中如何接受我們傳入的ukeys以及如何利用內(nèi)置的函數(shù)快速完成關(guān)鍵字的匹配并將匹配的結(jié)果疊加進(jìn)行關(guān)鍵字的提示。

如果你對(duì)下面的文字描述不感興趣，請(qǐng)移步github(點(diǎn)我)，直接看源碼（有注釋）.

    /**
     * 主調(diào)函數(shù)，加入了我自己定義的一個(gè)CodeMirror.ukeys變量，用來向CodeMirror傳遞用戶
     * 輸入的所有的單詞
     * @param editor
     * @param options
     * @returns {{list, from, to}|*}
     */
    function javascriptHint(editor, options) {

        var ukeys =  CodeMirror.ukeys;//獲取用戶的所有的輸入的單詞
        return scriptHint(editor, javascriptKeywords,ukeys,
            function (e, cur) {
                return e.getTokenAt(cur);
            },
            options);
    };

如上面的代碼所示，在javascriptHint函數(shù)中，我們獲取到CodeMirror.ukeys，并將ukeys傳遞給scriptHint函數(shù)。scriptHint函數(shù)的主要代碼如下：

    //這是處理關(guān)鍵字匹配的關(guān)鍵函數(shù)實(shí)現(xiàn)
    function scriptHint(editor, keywords, ukeys,getToken, options) {
        // Find the token at the cursor
        var cur = editor.getCursor(), token = getToken(editor, cur);
        if (/(?:string|comment)/.test(token.type)) return;
        token.state = CodeMirror.innerMode(editor.getMode(), token.state).state;

        // If it"s not a "word-style" token, ignore the token.
        if (!/^[w$_]*$/.test(token.string)) {
            token = {
                start: cur.ch, end: cur.ch, string: "", state: token.state,
                type: token.string == "." ? "property" : null
            };
        } else if (token.end > cur.ch) {
            token.end = cur.ch;
            token.string = token.string.slice(0, cur.ch - token.start);
        }

        var tprop = token;
        // If it is a property, find out what it is a property of.
        while (tprop.type == "property") {
            tprop = getToken(editor, Pos(cur.line, tprop.start));
            if (tprop.string != ".") return;
            tprop = getToken(editor, Pos(cur.line, tprop.start));
            if (!context) var context = [];
            context.push(tprop);
        }
        return {
            list: getCompletions(token, context, keywords,ukeys, options),
            from: Pos(cur.line, token.start),
            to: Pos(cur.line, token.end)
        };
    }

從上面的代碼中，可以看到scriptHint函數(shù)主要是獲取list(匹配的關(guān)鍵字)。這也印證了上面我在處理沒有任何輸入時(shí)，判斷token==""返回的是{list:{}}是正確的寫法。這個(gè)函數(shù)的改動(dòng)很小，主要還是將ukeys繼續(xù)向下傳遞 list: getCompletions(token, context, keywords,ukeys, options)。所以的單詞匹配都是在getCompletions函數(shù)中實(shí)現(xiàn)的，在這個(gè)函數(shù)中，提供了很多內(nèi)置函數(shù)，我們只需要添加幾行代碼就可以完成附加關(guān)鍵詞的功能了。該函數(shù)的改動(dòng)后的代碼如下所示：

 /**
     *
     * @param token 當(dāng)前光標(biāo)下用戶正在輸入的單詞
     * @param context
     * @param keywords 關(guān)鍵字列表，本文件內(nèi)定義
     * @param ukeys 用戶添加的關(guān)鍵字
     * @param options
     * @returns {*}
     */
    function getCompletions(token, context, keywords, ukeys,options) {

        //這里是處理沒有任何字母輸入時(shí)也會(huì)有代碼提示的原因。
        if (token.string == "") {
            return {list:{}};
        }
        var found = [], start = token.string, global = options && options.globalScope || window;

        function maybeAdd(str) {
            if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
        }

        function gatherCompletions(obj) {
            if (typeof obj == "string") forEach(stringProps, maybeAdd);
            else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
            else if (obj instanceof Function) forEach(funcProps, maybeAdd);
            forEach(ukeys,maybeAdd);//匹配我們傳進(jìn)來的用戶輸入的代碼中的所有的單詞
            forAllProps(obj, maybeAdd)
        }

        if (context && context.length) {
            // If this is a property, see if it belongs to some object we can
            // find in the current environment.
            var obj = context.pop(), base;
            if (obj.type && obj.type.indexOf("variable") === 0) {
                if (options && options.additionalContext)
                    base = options.additionalContext[obj.string];
                if (!options || options.useGlobalScope !== false)
                    base = base || global[obj.string];
            } else if (obj.type == "string") {
                base = "";
            } else if (obj.type == "atom") {
                base = 1;
            } else if (obj.type == "function") {
                if (global.jQuery != null && (obj.string == "$" || obj.string == "jQuery") &&
                    (typeof global.jQuery == "function"))
                    base = global.jQuery();
                else if (global._ != null && (obj.string == "_") && (typeof global._ == "function"))
                    base = global._();
            }
            while (base != null && context.length)
                base = base[context.pop().string];
            if (base != null) gatherCompletions(base);
        } else {
            // If not, just look in the global object and any local scope
            // (reading into JS mode internals to get at the local and global variables)
            for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
            for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
            if (!options || options.useGlobalScope !== false)
                gatherCompletions(global);
            forEach(keywords, maybeAdd);
        }
        //console.log(found);
        return found;
    }

我們只在gatherCompletions函數(shù)中添加了一條語句
好了，如果你這么做了，就可以完成我們輸入的變量也會(huì)出現(xiàn)在CodeMirror中了。

CodeMirror還提供了sql的代碼提示的附加功能。主要針對(duì)的有MSSQL、mysql、mariadb以及PLSQL。本文以一個(gè)實(shí)際的項(xiàng)目中的實(shí)際使用來演示如何按照上文的描述來修改對(duì)應(yīng)的sql-hint.js中的內(nèi)容來完成：

取消沒有輸入任何有效字符時(shí)的代碼提示問題

用cursorActivity設(shè)置代碼實(shí)時(shí)提示

增加表的字段到代碼提示中去。

sql對(duì)應(yīng)的關(guān)鍵字信息在CodeMirror/mode/sql/sql.js中，我在項(xiàng)目中用的是類似于oracle的數(shù)據(jù)庫，因此我們?cè)?b>sql.js增加了PLSQL的部分關(guān)鍵字，如下圖所示（更詳細(xì)的信息，請(qǐng)參考我的github）

然后修改CodeMirror/addon/hint/sql-hint.js中的 CodeMirror.registerHelper("hint", "sql", function (editor, options) {函數(shù)中添加如下圖所示的代碼，同樣是判斷token是否=="".

由于問題2和問題三都是在cursorActivity中編寫。直接上代碼來描述吧。
獲取所有的表字段
我的項(xiàng)目中，在編寫sql的頁面有所有的字段信息，所以我就用jquery直接獲取了，如果大家的字段不在頁面中，那就用ajax請(qǐng)求在頁面一次加載的時(shí)候就保存在頁面的一個(gè)全局變量中吧。一定不要讓瀏覽器都去發(fā)ajax請(qǐng)求去獲取字段列表，那樣不卡死才怪。

 $(function(){
        console.log("get field");
        $(".field .easytree-title").each(function (){
            var tmp =$(this).html();
            tmp = tmp.substring(0,tmp.indexOf("["));
            window.fields.push(tmp);
        })
    });

上面的代碼獲取了我的項(xiàng)目中的所有的字段，并作為一個(gè)數(shù)組存儲(chǔ)在全局變量window.fields上。然后再在cursorActivity中傳遞到sql-hint.js中。
字段傳遞及關(guān)鍵字的匹配

 editor.on("cursorActivity",function(){
        CodeMirror.ukeys =  window.fields;
        editor.showHint();
    });

sql-hint.js文件的改寫2
在 CodeMirror.registerHelper("hint", "sql", function (editor, options) {中添加如下圖所示的代碼，就完成了單詞的匹配及后續(xù)的匹配到的單詞的顯示。

上圖的代碼也就是利用封裝好的函數(shù)讀取CodeMirror.ukeys并進(jìn)行關(guān)鍵字匹配，如果匹配成功則加入到result中，最后返回的list就是result.

最后上一個(gè)效果圖。所有改動(dòng)后的文件都在本次示例的項(xiàng)目中。github地址(點(diǎn)我)