Javascriptcodemirror高等运用

项目地点

github:https://github.com/sixtrees/j&＃8230;

这两天在看阮一峰的《ES6规范入门》，对个中触及到的代码示例部份，感觉到很不轻易，不知道阮先生是怎样举行代码调试的。多是在nodejs环境或许直接在浏览器的掌握台中举行调试。我每次都是在nodejs敕令行中举行代码编写，由于敕令行自身的特性，有一句代码编写毛病，都可以致使须要重写一切的代码。

像下图中所示的状况一样，当我们由java或许其他言语的编写习气形成的语法毛病for (var item of set )，致使测试代码没能获得准确的输出，这时刻我们就须要重头来过，这体验当然是不好的，在浏览器的掌握台中这类状况，会好一点。然则，一旦我们不小心触碰到了ENTER按键，那就悲剧了。

我也曾异想天开的以为既然nodejs可以运用node app.js来启动nodejs顺序，那为何不试试用node test.js来举行代码测试呢。经由测试，发明是可以的，然则如许，我每一次都要在敕令行和文本编辑器之间举行切换。

由于，我想简朴点，开辟一个基于web的IDE来运转我们输入的Javascript或许es2015也就是es6代码。经由一个晚上加一个上午的构想和代码编写，已完成了基本代码的编写。下图就是这个项目的一个运转示例。应用CodeMirror插件来作为代码编辑插件，而且依据须要，改写了CodeMirror官方的Javascript-hint.js文件，使得代码提醒的效果更雄厚，同时也发明了网上大多数坑人的帖子带来的题目，背面都要有细致的申明。先来简朴的看一下我们的体系长什么样吧，至于界面的设想，人人就迁就的看一下，毕竟功用才是我们所须要的。

怎样装置

如今，我已将代码托管至github(点我)。下面，我来演示怎样装置本平台，请人人宁神，不会触及太多庞杂的东西，由于这个体系只是一个很简朴的IDE环境。

先在webstorm下看一下项目构造：

下面最先进入装置阶段。
项目采纳的是express举行开辟的，因而，主要的npm依靠见下面的代码区。

"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文件夹，可以运用以下敕令举行疾速进入

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

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

实行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

装置好npm的依靠以后，我们就可以运用 node bin/www来运转项目了。bin/www文件时体系启动文件，请不要用node app.js来试图运转本体系。
另有就是不要在bin之前加/，这是弄巧成拙。实行node bin/www后，node就会启动localhost:3000作为项目的布置地点了，端口号可以在bin/www文件中举行修正。此时，是没有任何输出的，假如你是用webstorm翻开的，引荐人人运用nodemon等热布置处置惩罚要领。详细的要领，请本身自行上网查找处置惩罚计划，横竖就是很简答的那种。像用IDEA来开辟java， 我会引荐人人运用JRebel来举行热布置。如许的东西是可以供应编程的效力的。

此时，翻开浏览器，输入localhost:3000，就可以看到我们的页面了。

此时，nodejs掌握台也会输入一切的资本要求状况。

到这里，体系的布置就完成了。就可以用这个平台来举行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);
}

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

本体系的特性

体系采纳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{}。

改写的代码以下：

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代码提醒的症结字

不失平常性，我这里就形貌一下这个项目中，我是怎样猎取更多的症结字（这里的症结字是指婚配用户输入的提醒单词）而且将如许单词举行婚配并追随原有的症结字举行及时提醒的。

还记得适才看过的谁人代码片断吧，上面的代码是我为了给人人形貌怎样来触发代码及时提醒的处置惩罚计划的。下面才是本项目中现实用到的代码。下面的代码解释已写的很清晰的，起首就是应用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）

然后修正CodeMirror/addon/hint/sql-hint.js中的 CodeMirror.registerHelper("hint", "sql", function (editor, options) {函数中增加以下图所示的代码，同样是推断token是不是=="".

题目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) {中增加以下图所示的代码，就完成了单词的婚配及后续的婚配到的单词的显现。

上图的代码也就是应用封装好的函数读取CodeMirror.ukeys并举行症结字婚配，假如婚配胜利则加入到result中，末了返回的list就是result.

末了上一个效果图。一切修改后的文件都在本次示例的项目中。github地点(点我)