Javascript codemirror 高级应用

时间  2019-11-08
标签 javascript codemirror 高级 应用 栏目 JavaScript 繁體版
原文   原文链接

搭建javascript在线IDE

项目地址

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

这两天在看阮一峰的《ES6标准入门》，对其中涉及到的代码示例部分，感受到很不方便，不知道阮老师是如何进行代码调试的。多是在nodejs环境或者直接在浏览器的控制台中进行调试。我每次都是在nodejs命令行中进行代码编写，因为命令行自己的特色，有一句代码编写错误，均可能致使须要重写全部的代码。html

像下图中所示的状况同样，当咱们由java或者其余语言的编写习惯形成的语法错误for (var item of set )，致使测试代码没能获得正确的输出，这时候咱们就须要重头来过，这体验固然是很差的，在浏览器的控制台中这种状况，会好一点。可是，一旦咱们不当心触碰到了ENTER按键，那就悲剧了。
enter description herejava

我也曾异想天开的认为既然nodejs可使用node app.js来启动nodejs程序，那为何不试试用node test.js来进行代码测试呢。通过测试，发现是能够的，可是这样，我每一次都要在命令行和文本编辑器之间进行切换。node

enter description here

因为，我想简单点，开发一个基于web的IDE来运行咱们输入的javascript或者es2015也就是es6代码。通过一个晚上加一个上午的构思和代码编写，已经完成了基础代码的编写。下图就是这个项目的一个运行示例。利用CodeMirror插件来做为代码编辑插件，而且根据须要，改写了CodeMirror官方的javascript-hint.js文件，使得代码提示的效果更丰富，同时也发现了网上大多数坑人的帖子带来的问题，后面都要有详细的说明。先来简单的看一下咱们的系统长什么样吧，至于界面的设计，你们就将就的看一下，毕竟功能才是咱们所须要的。mysql

enter description here

如何安装

目前，我已经将代码托管至github(点我)。下面，我来演示如何安装本平台，请你们放心，不会涉及太多复杂的东西，由于这个系统只是一个很简单的IDE环境。jquery

先在webstorm下看一下项目结构：
enter description herelinux

下面开始进入安装阶段。
项目采用的是express进行开发的，所以，主要的npm依赖见下面的代码区。git

"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"
  }

好了，咱们开始链接服务器或者在本身的电脑上打开命令行（我用的msysgit，你们也能够用cmder）
进入到咱们的工做文件夹，我这里用的是本身的D盘下面的nodejs文件夹，可使用以下命令进行快速进入es6

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

enter description here

克隆完成后，进入js-online-running文件夹。
enter description heregithub

执行npm安装项目的依赖，关于npm install 如何安装package.json文件夹下的依赖，请你们自行了解其中原因。

$ npm install
js-online-running@0.0.0 D:\nodejs\js-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

enter description here

安装好npm的依赖以后，咱们就可使用 node bin/www来运行项目了。bin/www文件时系统启动文件，请不要用node app.js来试图运行本系统。
还有就是不要在bin以前加/，这是多此一举。执行node bin/www后，node就会启动localhost:3000做为项目的部署地址了，端口号能够在bin/www文件中进行修改。此时，是没有任何输出的，若是你是用webstorm打开的，推荐你们使用nodemon等热部署解决方法。具体的方法，请本身自行上网查找解决方案，反正就是很简答的那种。像用IDEA来开发java， 我会推荐你们使用JRebel来进行热部署。这样的东西是能够提供编程的效率的。

enter description here

此时，打开浏览器，输入localhost:3000，就能够看到咱们的页面了。

enter description here

此时，nodejs控制台也会输入全部的资源请求状况。
enter description here

到这里，系统的部署就完成了。就能够用这个平台来进行js代码的运行测试了。
总结一下，启动项目，使用node bin/www，若是想随电脑启动，请自行查找如何在windows或者linux平台下，让nodejs项目对计算机启动而启动。

使用

下面，我使用阮一峰的《es6标准入门》的一个案例代码来演示如何使用本平台，其实这个平台的初衷就是学了配合阮老师的书来学习的。
阮老师的代码传送门：在此

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

这个代码的演示程序，以下图所示

enter description here

本系统的特色

系统采用nodejs+express进行开发的。可是主要的实现都是靠html+javascript来实现的，我当时是想用户传递本身输入的javascript语句到后台进行执行，可是根据常识，浏览器是能够直接运行javascript代码的，所以，就想到了eval这个让你们又爱又怕的函数来执行咱们输入的javascript语句，而且捕获异常，将捕获的异常信息作为bootstrap-treeview插件的数据来显示具备层次结果的错误信息。（这里我可能描述的不够准备，捕获的是Error.

总结几个特色：

  1. 使用最新的的CodeMirrror，包含了全部的样式和addon。用户能够根据本身喜欢来设置本身喜欢的代码编辑区的配色方案。
  2. 利用CodeMirror的cursorActivity事件来完成代码提示的触发。网上一群坑爹的货，竟然说用onChange事件，老子的浏览器选项卡直接卡死，在仔细看了官方的文档后，发现cursorActivity事件才是解决代码提示的正确道路。
  3. 利用split函数将用户输入的全部的代码按照空格进行分割，获取全部的英文单词，将这些单词传递给一个自定义的全局变量CodeMirror.ukeys，结合javascript的关键字来实现代码提示，因此，本系统可以实现实时的代码提示，并且能够提示用户出入的变量名，不只仅是javascript关键词，从而给人更真实的IDE感。
  4. 因为时间较多，没有作不少的后台的程序的编写， 你们有兴趣的，能够mysql或者mongodb来实现相似于HUE的在线IDE。

关于CodeMirror如何实现实时提示

这个问题在原生的CodeMirror有两个问题，

问题1

一个问题就是代码提示的时候，在没有任何输入的时候就会弹出全部的提示关键词，这一点让人很讨厌，那么该如何改进呢。因为咱们这里使用的javascript-hint.js来进行javascript代码的提示，那咱们能够修改的文件就应该是public/codemirror/addon/hint/javascript-hint.js文件，若是你们仔细的阅读了CodeMirror的代码，就会发如今javascript-hint.js文件中有一个函数getCompletions，该函数有一个参数叫token,这个token实际上是编译原理中所说的token，也就是一个语法分割单位，这个token是咱们代码提示的关键，全部的关键字就要跟token进行比对，若是发现token是某些关键字的前缀，那么这些单词都要做为当前的关键字提示给用户。
例如，下图中，咱们正在输入的语法单词是se，那么此时触发的cursorActivity事件调用showHint方法，通过一系列的函数判断，最重获取到当前的token是se，则咱们须要将全部以se为首的单词进行弹出提示。那么，针对咱们正在说的这个事情：CodeMirror在咱们没有任何输入的时候，也会进行代码提示，那根据分析没有任何输入时，触发cursorActivity事件时，获得的token的值是""，咱们只须要在getCompletions函数(这个函数就是获取和当前用户正在输入的语法单词匹配的全部关键词的函数)的开始判断token==""，若是是true，则直接返回一个空的list{}。

enter description here
改写的代码以下：

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

        //这里是处理没有任何字母输入时也会有代码提示的缘由。
        if (token.string == "") {
            return {list:{}};;
        }
        ...
}

问题2

另一个问题就是CodeMirror能提供的auto-complete(代码自动完成)是须要进行按键绑定的，用户经过某个按键组合才能触发autocomplete事件，这对于咱们写代码的速度确定影响是很大。所以，咱们但愿在咱们输入字符的同时，界面能够给出咱们实时的代码提示，而不须要进行按键组合来触发。通常网上的示例都是比较坑爹的，代码示例以下：

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

若是你是这么用CodeMirror的，或者你正在发愁的时候，我但愿个人这的总结可以给你提供比较稳的帮助。继续说，上面的代码示例千万不要用，由于这样作了，浏览器会卡死的，而形成这种现象 的缘由多是CodeMirror内部处理的问题，我没有仔细研究，可是通过个人仔细阅读官方文档和不断摸索，我给出一个比较正确的方案来实现代码的实时提示。

//不要用change
editor.on("cursorActivity", function () {
            //调用显示提示
            editor.showHint();
});

若是，你是这么作的或者你恰好这么改正了，那么恭喜你，你应该获得了你要的效果。

好了，这两个问题，就简单论述到这里，下面还有更重要的东西须要我来论述的。

如何增长CodeMirror代码提示的关键字

enter description here

不失通常性，我这里就描述一下这个项目中，我是如何获取更多的关键字（这里的关键字是指匹配用户输入的提示单词）而且将这样单词进行匹配并跟随原有的关键字进行实时提示的。

还记得刚才看过的那个代码片断吧，上面的代码是我为了给你们描述如何来触发代码实时提示的解决方案的。下面才是本项目中实际用到的代码。下面的代码注释已经写的很清楚的，首先就是利用CodeMirror的API来获取用户输入代码（注意是纯代码），而后利用正则来提取出全部的单词，用match匹配后获得的是一个数组，而后将该数组传递给咱们拓展在CodeMirror全局变量的上一个属性ukeys。而后再调用editor.showHint()来处理实际的代码提示。

/**
 * 用来实时对用户的输入进行提示
 */
editor.on("cursorActivity", function () {
    //获取用户当前的编辑器中的编写的代码
    var words = editor.getValue() + "";
    //利用正则取出用户输入的全部的英文的字母
    words = words.replace(/[a-z]+[\-|\']+[a-z]+/ig, '').match(/([a-z]+)/ig);
    //将获取到的用户的单词传入CodeMirror,并在javascript-hint中作匹配
    CodeMirror.ukeys = words;
    //调用显示提示
    editor.showHint();
});

上面的描述但愿没有给您带来阅读上的不畅，下面，我将描述一下如何在javascript-hint.js文件中如何接受咱们传入的ukeys以及如何利用内置的函数快速完成关键字的匹配并将匹配的结果叠加进行关键字的提示。

首先是javascript-hint.js中javascript代码提示的主调函数

若是你对下面的文字描述不感兴趣，请移步github(点我)，直接看源码（有注释）.

/**
     * 主调函数，加入了我本身定义的一个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函数中，咱们获取到CodeMirror.ukeys，并将ukeys传递给scriptHint函数。scriptHint函数的主要代码以下：

//这是处理关键字匹配的关键函数实现
    function scriptHint(editor, keywords, ukeys,getToken, options) {
        // Find the token at the cursor
        var cur = editor.getCursor(), token = getToken(editor, cur);
        if (/\b(?:string|comment)\b/.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函数主要是获取list(匹配的关键字)。这也印证了上面我在处理没有任何输入时，判断token==""返回的是{list:{}}是正确的写法。这个函数的改动很小，主要仍是将ukeys继续向下传递 list: getCompletions(token, context, keywords,ukeys, options)。因此的单词匹配都是在getCompletions函数中实现的，在这个函数中，提供了不少内置函数，咱们只须要添加几行代码就能够完成附加关键词的功能了。该函数的改动后的代码以下所示：

/**
     *
     * @param token 当前光标下用户正在输入的单词
     * @param context
     * @param keywords 关键字列表，本文件内定义
     * @param ukeys 用户添加的关键字
     * @param options
     * @returns {*}
     */
    function getCompletions(token, context, keywords, ukeys,options) {

        //这里是处理没有任何字母输入时也会有代码提示的缘由。
        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);//匹配咱们传进来的用户输入的代码中的全部的单词
            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函数中添加了一条语句
好了，若是你这么作了，就能够完成咱们输入的变量也会出如今CodeMirror中了。

附赠的福利

CodeMirror还提供了sql的代码提示的附加功能。主要针对的有MSSQL、mysql、mariadb以及PLSQL。本文以一个实际的项目中的实际使用来演示如何按照上文的描述来修改对应的sql-hint.js中的内容来完成：

  1. 取消没有输入任何有效字符时的代码提示问题
  2. 用cursorActivity设置代码实时提示
  3. 增长表的字段到代码提示中去。

问题1

sql对应的关键字信息在CodeMirror/mode/sql/sql.js中，我在项目中用的是相似于oracle的数据库，所以咱们在sql.js增长了PLSQL的部分关键字，以下图所示（更详细的信息，请参考个人github）

enter description here

而后修改CodeMirror/addon/hint/sql-hint.js中的 CodeMirror.registerHelper("hint", "sql", function (editor, options) {函数中添加以下图所示的代码，一样是判断token是否=="".
enter description here

问题2及问题3

因为问题2和问题三都是在cursorActivity中编写。直接上代码来描述吧。
获取全部的表字段
个人项目中，在编写sql的页面有全部的字段信息，因此我就用jquery直接获取了，若是你们的字段不在页面中，那就用ajax请求在页面一次加载的时候就保存在页面的一个全局变量中吧。必定不要让浏览器都去发ajax请求去获取字段列表，那样不卡死才怪。

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

上面的代码获取了个人项目中的全部的字段，并做为一个数组存储在全局变量window.fields上。而后再在cursorActivity中传递到sql-hint.js中。
字段传递及关键字的匹配

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

sql-hint.js文件的改写2
在 CodeMirror.registerHelper("hint", "sql", function (editor, options) {中添加以下图所示的代码，就完成了单词的匹配及后续的匹配到的单词的显示。

enter description here

上图的代码也就是利用封装好的函数读取CodeMirror.ukeys并进行关键字匹配，若是匹配成功则加入到result中，最后返回的list就是result.

最后上一个效果图。全部改动后的文件都在本次示例的项目中。github地址(点我)

enter description here

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程