CodeMirror学习（1）

作者: yztldxdzhu | 来源:发表于2017-10-24 20:23 被阅读5545次

平台新版本的需求需要对文件和文件夹进行比较，类似于beyond compare的功能，但是是在线的，需要找一个比较好用又能快速上手的js插件。找来找去，选中了CodeMirror。

CodeMirror代码地址-github【最新版本5.31.0采用了es6的语法，我写demo时出错显示es6的import语句Error，并且该版本下的lib文件夹下没有codemirror.js文件，我引入的是src目录下面的。后来改了5.12.0版本的代码，该版本是正常es5语法。我们项目中应该不会使用最新版本。】
error.png CodeMirror官方网站【官方网站是英文，可有时间翻译呀！为社区做贡献！】

关于使用：
1：引入css和js
<link rel="stylesheet" href="codemirror-5.12.0/lib/codemirror.css">
<script src="codemirror-5.12.0/lib/codemirror.js"></script>
2：写html
<div id="code"></div>
<textarea name="code_textarea" id="code_textarea" cols="30" rows="10"></textarea>
3：js初始化，调用方式
var editor1 = CodeMirror(document.getElementById("code"), {lineNumbers: true});
var editor2 = CodeMirror.fromTextArea(document.getElementById("code_textarea"), {lineNumbers: true});

注意：
有两种调用方式：CodeMirror(el, opt);页面中的元素可以是除了textarea元素之外的任意标签元素。

CodeMirror.fromTextArea(el, opt);页面中元素必须是textarea，其它如div、span、body会报错 error.png CodeMirror.fromTextArea()中第一个参数是DOM元素，而且必须是textarea元素；第二个参数是可选配置项，有很多，以后有时间慢慢说。

先来看一看demo目录下的文件，都有什么功能？如何使用？
demo目录下有许多html，依次打开，应该就会发现各种功能的实现。

activeline.html【初看好像是代码的背景高亮显示，点中哪一行，那一行的代码就会背景高亮显示】
activeline.html.png 代码： link_script.png editor_html.png 其实实现是在textarea后面创建了一个div，用来显示代码和操作，然后将之前的textarea给diaplay:none：
textarea_display_none.png
以上引入的文件：
【docs.css】是某些常用标签元素的样式定义(article,strong,p...)；
【codemirror.css】是对CodeMirror类及其相关联类的样式定义；
【codemirror.js】有很多代码，8000多行，但是我感觉应该是创建覆盖textarea的div及其嵌套div的初始化的实现；
【xml.js】因为CodeMirror支持多种类型的编程语言，xml.js应该就是配置xml的，让其在页面中像在代码编辑器中一样高亮显示xml的语法。因为demo中要显示的语言是xml，所以这里引入xml.js。如果不引入，所显示的文字就全部都是黑色默认的字体；
no_xml.js.png
【active-line.js】这个就是实现点击那一行，那一行就背景高亮的功能了，如果没有引入这个js，就会是以下这样：默认第一行没有背景高亮，但实际上应该是有背景高亮的，就是在该js里面实现的：
no_activeline.js.png
关于js中的配置：
mode: "application/xml",===>【以哪一种语言模式显示，这里是xml】
styleActiveLine: true,===>【点击选中背景高亮】
lineNumbers: true,===>【行号的显示与否】
lineWrapping: true===>【这个貌似与代码的缩进有关，但是不知道是干什么的？】

anywordhint.html【初看好像是代码检测，最后发现是代码自动补全，需要用到快捷键（自定义），但是未成功啊，缺少了什么？】
页面中已经提醒按ctrl+space来激活自动补全，但是我按了没用啊，只是无奈切换了多遍输入法。。。

anywordhint.html.png
关于代码：
hint_code.png
引入的文件：
【docs.css】选择性引入；
【codemirror.css】和【codemirror.js】必须引入；
【javascript.js】支持javascript语法高亮；如果没有引入，编辑区内的文字没有字体高亮===>【你想在编辑框内显示哪种语言，就需要加载那个语言的js文件，统一放在mode文件夹下，支持多种类型语言，这样页面显示的时候才会按照那种语言的语法特性来支持字体高亮】： no_javascript.js.png
【show-hint.css】、【show-hint.js】、【anyword-hint.js】因为没测出来，所以也不知道每个文件到底完成了什么功能。hint和lint到底有什么不同，貌似在js里面都是代码的检测？

bidi.html【这个初看不知道是什么鬼，试了demo之后也不知道是什么鬼，后来想想感觉跟字符有关，demo显示的阿拉伯文，是想说明支持各种国际化的字符么？】 bidi_html.png
bidi_code.png

另外页面中引入的是【xml.js】，但是实际内容是html，没有针对html的js，但是有其它和html相关联的，不知道针对的是html的哪方面？

btree.html【名字叫b树，第一想法是文件的目录树结构，树结构的可视化么？】

在编辑框中输入： btree_html.png
点击最下面的按钮： btree_html_click.png
代码实现： btree_code.png
代码分析：
首先在编辑框中输入字符会触发editor的onchange事件，触发这个事件的回调就是更新页面视图，因为onchange事件时是持续触发的，因此更新视图也是持续调用的，但是这里用了一个setTimeout，200ms的延迟，可能是为了不持续触发回调，提升性能。
btree_onchange.png
更新页面视图其实就是html结构的渲染【对editor.getDoc()的API不太了解，还有就是递归渲染】：
update_visual.png

点击按钮时触发的事件【将script标签里的代码加载到页面代码编辑区内===>触发editor的onchange事件===>触发更新视图函数===>页面局部重新渲染】：

fillEditor.png

buffers.html【buffers是缓冲区的意思，可能是对代码字节流的实现，在代码量特别庞大的情况下？记得本科毕业找工作，在线笔试会有代码编辑来实现某些算法，有几种主要的语言可以来回切换，我一般会选择html或javascript，难道这个buffers是实现语言的切换的功能？】 buffer_html.png
来看代码：

以下函数的功能是将DOM元素的内容取出来，并进行某种形式的格式化，变成想要的字符串，展示在页面的代码编辑区块内。 nodeContent_js.png 以下函数的功能是：创建option元素插入到页面的select中，并将CodeMirror.Doc()函数的返回值赋值给该页面的一个全局变量buffer的属性上去。
openBuffer_js.png 以下函数的功能是：将全局buffer对象中对应的属性取出来，放在页面上的代码编辑区内。这个函数有很多CodeMirror的API，还不是很了解，不会用。调用是在页面加载后即页面初始化以及页面中的下拉框的值发生变化时。用户改变触发。 selectBuffer_js.png 以下函数的功能是：为下拉框新增一个用户输入的值，在这里就要接收用户的输入，用的是浏览器的prompt。如果用户输入了值，并且确认，就调用openBuffer生成一个option插入到select，再调用selectBuffer，将buffer里面存入的对应的值在页面编辑框内显示，然后将下拉框置为该值。调用是在用户点击按钮时。 newBuf.png