前端代碼編輯器ace 語法驗證

本文主要是介紹實際項目中如何加入語法檢測功能。官方文檔連接https://github.com/ajaxorg/ace/wiki/Syntax-validation

      代碼編輯器ace，使用webworker進行實時語法檢查。目前支持JavaScript，json，php，coffeescript，css，xquery模式。
      根據官方https://ace.c9.io/#nav=higlighter的例子，在項目開發中，新增了Formula的語法高亮，下面是定義Mode並增長語法高亮的部分代碼
      //parserNet是parser模塊，在發生錯誤的時候會主動調用parseError方法

      至於怎麼實現語法檢測的功能，比較複雜，涉及到編譯原理，語法詞法分析的知識。這個我瞭解的也只是入門，有時間的時候再介紹吧

ace.define("ace/mode/formula", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text", "ace/mode/formula_highlight_rules"], function (acequire, exports, module) { var oop = acequire("../lib/oop"); var TextMode = acequire("./text").Mode; var FormulaHighlightRules = acequire("./formula_highlight_rules").FormulaHighlightRules; var Mode = function () { this.HighlightRules = FormulaHighlightRules; this.$behaviour = this.$defaultBehaviour; }; oop.inherits(Mode, TextMode); (function () { this.lineCommentStart = "//"; this.$id = "ace/mode/formula"; this.createWorker = function (session) { var worker = { //編輯器銷燬或修改模式的時候
                terminate: function () { session.clearAnnotations(); //清除錯誤信息
                    this.$worker = null; if (this.$doc) this.$doc.off("change", this.changeListener); this.changeListener = null; this.$doc = null; }, //文檔變化的回調
                _changeListener: function () { if (!this.$doc) return; var val = this.$doc.getValue(); if (val.trim() === "") { session.clearAnnotations(); //清除錯誤信息
                        return; } var res = []; //重寫parserNet.parseError方法，收集錯誤信息
                    parserNet.parseError = function (str, obj) { var column = obj.loc ? obj.loc.first_column : 0; res.push({ column: column, raw: str, row: obj.line, text: str, type: "error" }) } try { //parserNet.parse實時檢測代碼功能
 parserNet.parse(val); } catch (e) { } session.setAnnotations(res)//顯示錯誤信息
 }, //綁定文檔對象的時候
 attachToDocument(doc) { if (this.$doc) this.terminate(); this.$doc = doc; this.changeListener = _.debounce(this._changeListener.bind(this), 500); this.changeListener(); //綁定change文檔事件
                    doc.on("change", this.changeListener); }, //響應weoker中發出的消息，this.sender.emit("annotate",[])消息，也能夠定義其餘的消息名稱
 annotate(results) { session.setAnnotations(results); } };
 //綁定文檔 worker.attachToDocument(session.getDocument()); return worker; }; }).call(Mode.prototype);

        在實際項目中，有多是給ace已存在的高亮增長語法檢測，下面是webpack打包項目中的寫法，主要參考怎麼引用已存在的ace模式

import 'brace/mode/mysql.js' import {parserMySql} from '../mysql/mysqlParser.js'; var MysqlMode = ace.acequire("ace/mode/mysql").Mode; (function () { this.createWorker = function (session) { var worker = { terminate: function () { session.clearAnnotations(); this.$worker = null; if (this.$doc) this.$doc.off("change", this.changeListener); this.changeListener = null; this.$doc = null; }, _changeListener: function () { if (!this.$doc) return; var val = this.$doc.getValue(); var res = []; parserMySql.parseError = function (str, obj) { var column = obj.loc ? obj.loc.first_column : 0; res.push({ column: column, raw: str, row: obj.line, text: str, type: "error" }) } if (val.trim().length === 0) { res.push({ column: 0, raw: "該字段不能爲空", row: 0, text: "該字段不能爲空", type: "error" }) } else { try { parserMySql.parse(val); } catch (e) {
 } } session.setAnnotations(res) }, attachToDocument(doc) { if (this.$doc) this.terminate(); this.$doc = doc; this.changeListener = _.debounce(this._changeListener.bind(this), 500); this.changeListener(); doc.on("change", this.changeListener); }, annotate(results) { session.setAnnotations(results); } }; worker.attachToDocument(session.getDocument()); return worker; }; }).call(MysqlMode.prototype);