平臺新版本的需求需要對文件和文件夾進行比較，類似于beyond compare的功能，但是是在線的，需要找一個比較好用又能快速上手的js插件。找來找去，選中了CodeMirror。
CodeMirror代碼地址-github【最新版本5.31.0采用了es6的語法，我寫demo時出錯顯示es6的import語句Error，并且該版本下的lib文件夾下沒有codemirror.js文件，我引入的是src目錄下面的。后來改了5.12.0版本的代碼，該版本是正常es5語法。我們項目中應該不會使用最新版本?！?/p>
CodeMirror官方網站【官方網站是英文，可有時間翻譯呀！為社區(qū)做貢獻！】error.png
關于使用：
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.fromTextArea(el, opt);頁面中元素必須是textarea，其它如div、span、body會報錯
有兩種調用方式：CodeMirror(el, opt);頁面中的元素可以是除了textarea元素之外的任意標簽元素。
CodeMirror.fromTextArea()中第一個參數是DOM元素，而且必須是textarea元素；第二個參數是可選配置項，有很多，以后有時間慢慢說。error.png
先來看一看demo目錄下的文件，都有什么功能？如何使用？
demo目錄下有許多html，依次打開，應該就會發(fā)現各種功能的實現。
activeline.html【初看好像是代碼的背景高亮顯示，點中哪一行，那一行的代碼就會背景高亮顯示】
代碼：activeline.html.pnglink_script.png其實實現是在textarea后面創(chuàng)建了一個div，用來顯示代碼和操作，然后將之前的textarea給diaplay:none：editor_html.png
textarea_display_none.png
以上引入的文件：
【docs.css】是某些常用標簽元素的樣式定義(article,strong,p...)；
【codemirror.css】是對CodeMirror類及其相關聯(lián)類的樣式定義；
【codemirror.js】有很多代碼，8000多行，但是我感覺應該是創(chuàng)建覆蓋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【初看好像是代碼檢測，最后發(fā)現是代碼自動補全，需要用到快捷鍵（自定義），但是未成功啊，缺少了什么？】
頁面中已經提醒按ctrl+space來激活自動補全，但是我按了沒用啊，只是無奈切換了多遍輸入法。。。
anywordhint.html.png
關于代碼：
hint_code.png
引入的文件：
【docs.css】選擇性引入；
【codemirror.css】和【codemirror.js】必須引入；
【javascript.js】支持javascript語法高亮；如果沒有引入，編輯區(qū)內的文字沒有字體高亮===>【你想在編輯框內顯示哪種語言，就需要加載那個語言的js文件，統(tǒng)一放在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相關聯(lián)的，不知道針對的是html的哪方面？
btree.html【名字叫b樹，第一想法是文件的目錄樹結構，樹結構的可視化么？】
在編輯框中輸入：
btree_html.png
點擊最下面的按鈕：btree_html_click.png
代碼實現：btree_code.png
代碼分析：
首先在編輯框中輸入字符會觸發(fā)editor的onchange事件，觸發(fā)這個事件的回調就是更新頁面視圖，因為onchange事件時是持續(xù)觸發(fā)的，因此更新視圖也是持續(xù)調用的，但是這里用了一個setTimeout，200ms的延遲，可能是為了不持續(xù)觸發(fā)回調，提升性能。
btree_onchange.png
更新頁面視圖其實就是html結構的渲染【對editor.getDoc()的API不太了解，還有就是遞歸渲染】：
update_visual.png
點擊按鈕時觸發(fā)的事件【將script標簽里的代碼加載到頁面代碼編輯區(qū)內===>觸發(fā)editor的onchange事件===>觸發(fā)更新視圖函數===>頁面局部重新渲染】：
fillEditor.png
buffers.html【buffers是緩沖區(qū)的意思，可能是對代碼字節(jié)流的實現，在代碼量特別龐大的情況下？記得本科畢業(yè)找工作，在線筆試會有代碼編輯來實現某些算法，有幾種主要的語言可以來回切換，我一般會選擇html或javascript，難道這個buffers是實現語言的切換的功能？】buffer_html.png來看代碼：
以下函數的功能是將DOM元素的內容取出來，并進行某種形式的格式化，變成想要的字符串，展示在頁面的代碼編輯區(qū)塊內。
以下函數的功能是：創(chuàng)建option元素插入到頁面的select中，并將CodeMirror.Doc()函數的返回值賦值給該頁面的一個全局變量buffer的屬性上去。nodeContent_js.png
以下函數的功能是：將全局buffer對象中對應的屬性取出來，放在頁面上的代碼編輯區(qū)內。這個函數有很多CodeMirror的API，還不是很了解，不會用。調用是在頁面加載后即頁面初始化以及頁面中的下拉框的值發(fā)生變化時。用戶改變觸發(fā)。openBuffer_js.png以下函數的功能是：為下拉框新增一個用戶輸入的值，在這里就要接收用戶的輸入，用的是瀏覽器的prompt。如果用戶輸入了值，并且確認，就調用openBuffer生成一個option插入到select，再調用selectBuffer，將buffer里面存入的對應的值在頁面編輯框內顯示，然后將下拉框置為該值。調用是在用戶點擊按鈕時。selectBuffer_js.pngnewBuf.png
<== 未完待續(xù) ==>
