<p><code></p> <h2 id="articleHeader0">架构分析</h2> <ol> <li> <p>Node进行文件数据处理</p> </li> <li> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js进行视图的呈现</p> </li> <li> <p>Electron作为客户端</p> </li> </ol> <h2 id="articleHeader1">C++语法解析</h2> <h3 id="articleHeader2">效果展示</h3> <p><span class="img-wrap"><img data-src="/img/remote/1460000008837882?w=600&amp;h=458" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="cppAnalysis" title="cppAnalysis" style="cursor: pointer;"></span></p> <h3 id="articleHeader3">读取形式</h3> <p>按照代码行进行读取, 每次读取到一行就进行遍历分析</p> <h3 id="articleHeader4">关键字与特殊符号建立映射</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/** * 关键字 */ let keyWords = [ 'asm', 'auto', 'bool', 'break', 'case', 'catch', 'char', 'class', 'const', 'continue', 'cin', 'cout', 'default', 'delete', 'do', 'double', 'define', 'else', 'enum', 'except', 'explicit', 'extern', 'endl', 'false', 'finally', 'float', 'for', 'friend', 'goto', 'if', 'inline', 'int', 'include', 'long', 'mutable', 'main', 'namespace', 'new', 'operator', 'private', 'protectde', 'public', 'printf', 'register', 'return', 'short', 'signed', 'szieof', 'static', 'struct', 'string', 'switch', 'std', 'scanf', 'template', 'this', 'throw', 'true', 'try', 'typedef', 'typename', 'union', 'unsigned', 'using', 'virtual', 'void', 'while' ] /** * 特殊字符 */ let specialWords = [ ',', ';', '(', ')', '{', '}', '#', '^', '?', ':', '.', '[', ']', '+', '-', '*', '/', '%', '=', '>', '<', '!', '~', '|', '&amp;', '&amp;&amp;', '||', '==', '>=', '<=', '!=', '++', '--', '::', '<<', '>>', '+=', '-=', '*=', '/=', '%=', '&amp;=', '^=', '->'<br /> ]</p> <p>keyWords.forEach(word => {<br /> wordsMap.set(word, 'keyWord')<br /> })</p> <p>specialWords.forEach(word => {<br /> wordsMap.set(word, 'specialWord')<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">/** * 关键字 */</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> keyWords = [ <span class="hljs-string">'asm'</span>, <span class="hljs-string">'auto'</span>, <span class="hljs-string">'bool'</span>, <span class="hljs-string">'break'</span>, <span class="hljs-string">'case'</span>, <span class="hljs-string">'catch'</span>, <span class="hljs-string">'char'</span>, <span class="hljs-string">'class'</span>, <span class="hljs-string">'<a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>'</span>, <span class="hljs-string">'continue'</span>, <span class="hljs-string">'cin'</span>, <span class="hljs-string">'cout'</span>, <span class="hljs-string">'default'</span>, <span class="hljs-string">'delete'</span>, <span class="hljs-string">'do'</span>, <span class="hljs-string">'double'</span>, <span class="hljs-string">'define'</span>, <span class="hljs-string">'else'</span>, <span class="hljs-string">'enum'</span>, <span class="hljs-string">'except'</span>, <span class="hljs-string">'explicit'</span>, <span class="hljs-string">'extern'</span>, <span class="hljs-string">'endl'</span>, <span class="hljs-string">'false'</span>, <span class="hljs-string">'finally'</span>, <span class="hljs-string">'float'</span>, <span class="hljs-string">'for'</span>, <span class="hljs-string">'friend'</span>, <span class="hljs-string">'goto'</span>, <span class="hljs-string">'if'</span>, <span class="hljs-string">'inline'</span>, <span class="hljs-string">'int'</span>, <span class="hljs-string">'include'</span>, <span class="hljs-string">'long'</span>, <span class="hljs-string">'mutable'</span>, <span class="hljs-string">'main'</span>, <span class="hljs-string">'namespace'</span>, <span class="hljs-string">'new'</span>, <span class="hljs-string">'operator'</span>, <span class="hljs-string">'private'</span>, <span class="hljs-string">'protectde'</span>, <span class="hljs-string">'public'</span>, <span class="hljs-string">'printf'</span>, <span class="hljs-string">'register'</span>, <span class="hljs-string">'return'</span>, <span class="hljs-string">'short'</span>, <span class="hljs-string">'signed'</span>, <span class="hljs-string">'szieof'</span>, <span class="hljs-string">'static'</span>, <span class="hljs-string">'struct'</span>, <span class="hljs-string">'string'</span>, <span class="hljs-string">'switch'</span>, <span class="hljs-string">'std'</span>, <span class="hljs-string">'scanf'</span>, <span class="hljs-string">'template'</span>, <span class="hljs-string">'<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>'</span>, <span class="hljs-string">'throw'</span>, <span class="hljs-string">'true'</span>, <span class="hljs-string">'try'</span>, <span class="hljs-string">'typedef'</span>, <span class="hljs-string">'typename'</span>, <span class="hljs-string">'union'</span>, <span class="hljs-string">'unsigned'</span>, <span class="hljs-string">'using'</span>, <span class="hljs-string">'virtual'</span>, <span class="hljs-string">'void'</span>, <span class="hljs-string">'while'</span> ] <span class="hljs-comment">/** * 特殊字符 */</span> <span class="hljs-keyword">let</span> specialWords = [ <span class="hljs-string">','</span>, <span class="hljs-string">';'</span>, <span class="hljs-string">'('</span>, <span class="hljs-string">')'</span>, <span class="hljs-string">'{'</span>, <span class="hljs-string">'}'</span>, <span class="hljs-string">'#'</span>, <span class="hljs-string">'^'</span>, <span class="hljs-string">'?'</span>, <span class="hljs-string">':'</span>, <span class="hljs-string">'.'</span>, <span class="hljs-string">'['</span>, <span class="hljs-string">']'</span>, <span class="hljs-string">'+'</span>, <span class="hljs-string">'-'</span>, <span class="hljs-string">'*'</span>, <span class="hljs-string">'/'</span>, <span class="hljs-string">'%'</span>, <span class="hljs-string">'='</span>, <span class="hljs-string">'&gt;'</span>, <span class="hljs-string">'&lt;'</span>, <span class="hljs-string">'!'</span>, <span class="hljs-string">'~'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'&amp;'</span>, <span class="hljs-string">'&amp;&amp;'</span>, <span class="hljs-string">'||'</span>, <span class="hljs-string">'=='</span>, <span class="hljs-string">'&gt;='</span>, <span class="hljs-string">'&lt;='</span>, <span class="hljs-string">'!='</span>, <span class="hljs-string">'++'</span>, <span class="hljs-string">'--'</span>, <span class="hljs-string">'::'</span>, <span class="hljs-string">'&lt;&lt;'</span>, <span class="hljs-string">'&gt;&gt;'</span>, <span class="hljs-string">'+='</span>, <span class="hljs-string">'-='</span>, <span class="hljs-string">'*='</span>, <span class="hljs-string">'/='</span>, <span class="hljs-string">'%='</span>, <span class="hljs-string">'&amp;='</span>, <span class="hljs-string">'^='</span>, <span class="hljs-string">'-&gt;'</span> ] keyWords.forEach(<span class="hljs-function"><span class="hljs-params">word</span> =&gt;</span> { words<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>.set(word, <span class="hljs-string">'keyWord'</span>) }) specialWords.forEach(<span class="hljs-function"><span class="hljs-params">word</span> =&gt;</span> { wordsMap.set(word, <span class="hljs-string">'specialWord'</span>) })</code></pre> <h3 id="articleHeader5">遍历分析过程</h3> <ul> <li> <p>代码注释匹配</p> <ul> <li> <p>当读到一行中包含/*的两个字符时候, 这时把代码注释的标志设置为true, 然后一直读取,知道遇到*/的时候就把标志重新置为false</p> </li> <li> <p>判断是否可以构成单词,成立的条件是不以数字开头,并且只包含数字, 下划线, 以及字母, 可以通过正则来/[a-z]|[A-z]|_/匹配</p> </li> <li> <p>判断是否为字符串或者字符, 成立条件是以",'开头</p> </li> <li> <p>判断是否为数字</p> </li> <li> <p>判断是否为特殊字符, 这时就通过建立的映射进行关键字查找</p> </li> <li> <p>判断空格</p> </li> </ul> </li> <li> <p>代码解释</p> </li> </ul> <p>判断工具函数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" //判断是否是字母与下划线 function judgeWord(word) { let wordPatten = /[a-z]|[A-z]|_/ return wordPatten.test(word) } //判断是否为数字 function judgeNumber(number) { let numberPatten = /[0-9]/ return numberPatten.test(number) } //判断是否为特殊字符 function judgeSpecialWord(letter) { return wordsMap.get(letter) === 'specialWord' ? true : false } //判断是否为关键词 function judgeKeyWord(letter) { return wordsMap.get(letter) === 'keyWord' ? true : false } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-comment">//判断是否是字母与下划线</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">judgeWord</span>(<span class="hljs-params">word</span>) </span>{ <span class="hljs-keyword">let</span> wordPatten = <span class="hljs-regexp">/[a-z]|[A-z]|_/</span> <span class="hljs-keyword">return</span> wordPatten.test(word) } <span class="hljs-comment">//判断是否为数字</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">judgeNumber</span>(<span class="hljs-params">number</span>) </span>{ <span class="hljs-keyword">let</span> numberPatten = <span class="hljs-regexp">/[0-9]/</span> <span class="hljs-keyword">return</span> numberPatten.test(number) } <span class="hljs-comment">//判断是否为特殊字符</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">judgeSpecialWord</span>(<span class="hljs-params">letter</span>) </span>{ <span class="hljs-keyword">return</span> wordsMap.get(letter) === <span class="hljs-string">'specialWord'</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span> } <span class="hljs-comment">//判断是否为关键词</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">judgeKeyWord</span>(<span class="hljs-params">letter</span>) </span>{ <span class="hljs-keyword">return</span> wordsMap.get(letter) === <span class="hljs-string">'keyWord'</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span> } </code></pre> <p>行分析函数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="exports.analysisLine = (line, annotation) => {<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> oneLine = []<br /> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> word = ''<br /> let i = 0<br /> let includeFile = false<br /> while (i < line.length) { //注释代码的优先级最高,需要先进行判断 if (line[i] === '/' &amp;&amp; line[i + 1] === '*') { word += line[i] i++ annotation = true; } if (!annotation) { //表示不是注释内容 if (judgeWord(line[i])) { //表示是属于字母与下划线 word += line[i] while (i + 1 < line.length &amp;&amp; (judgeNumber(line[i + 1]) || judgeWord(line[i + 1]))) { i++ word += line[i] } if (judgeKeyWord(word)) { //判断单词是否属于关键词 oneLine.push({ word: word, type: 'keyWord' }) } else { //不为关键词, 则为标识符 oneLine.push({ word: word, type: 'identifier' }) } //由于include是属于头文件的引入, 需要对头文件进行特殊处理 if (word === 'include') { includeFile = true } word = '' i++ } else if (line[i] === '&quot;') { //字符串判断 while (i + 1 < line.length &amp;&amp; line[i + 1] !== '&quot;') { word += line[i] i++ } word += (line[i] || '' )+ (line[i + 1] || '') oneLine.push({ word: word, type: 'string' }) word = '' i += 2 } else if (line[i] === ''') { //字符判断 while (i + 1 < line.length &amp;&amp; line[i + 1] !== ''') { word += line[i] i++ } word += (line[i] || '' )+ (line[i + 1] || '') oneLine.push({ word: word, type: 'char' }) word = '' i += 2 } else if (judgeNumber(line[i])) { //数字判断 word += line[i] while (i + 1 < line.length &amp;&amp; (judgeNumber(line[i + 1]) || line[i + 1] === '.')) { i++ word += line[i] } oneLine.push({ word: word, type: 'number' }) word = '' i++ } else if (judgeSpecialWord(line[i])) { //特殊字符判断 if (line[i] === '<' &amp;&amp; includeFile) { //处理头文件的引入 oneLine.push({ word: line[i], type: 'specialWord' }) i++ word += line[i] while (i + 1 < line.length &amp;&amp; line[i + 1] !== '>') {<br /> i++<br /> word += line[i]<br /> }<br /> oneLine.push({<br /> word: word,<br /> type: 'libraryFile'<br /> })<br /> word = ''<br /> i++<br /> } else {<br /> //处理//的注释代码<br /> if (line[i] === '/' &amp;&amp; line[i + 1] === '/') {<br /> i++<br /> while (i + 1 < line.length) { i++ word += line[i] } oneLine.push({ word: word, type: 'Annotations' }) word = '' i += 3 } else { word += line[i] while (i + 1 < line.length &amp;&amp; (judgeSpecialWord(word + line[i + 1]))) { i++ word += line[i] } oneLine.push({ word: word, type: 'specialWord' }) word = '' i++ } } } else if (line[i] === ' ') { oneLine.push({ word: line[i], type: 'space' }) i++ } } else { //表示注释内容 while (i + 1 < line.length &amp;&amp; (line[i + 1] !== '*' &amp;&amp; line[i + 2] !== '/')) { word += line[i] i++ } word += line[i] + (line[i + 1] || '') + (line[i + 2] || '') oneLine.push({ word: word, type: 'Annotations' }) annotation = false; word = '' i += 3 } } return oneLine }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s.analysisLine = <span class="hljs-function">(<span class="hljs-params">line, annotation</span>) =&gt;</span> { <span class="hljs-keyword">let</span> oneLine = [] <span class="hljs-keyword">let</span> word = <span class="hljs-string">''</span> <span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span> <span class="hljs-keyword">let</span> includeFile = <span class="hljs-literal">false</span> <span class="hljs-keyword">while</span> (i &lt; line.length) { <span class="hljs-comment">//注释代码的优先级最高,需要先进行判断</span> <span class="hljs-keyword">if</span> (line[i] === <span class="hljs-string">'/'</span> &amp;&amp; line[i + <span class="hljs-number">1</span>] === <span class="hljs-string">'*'</span>) { word += line[i] i++ annotation = <span class="hljs-literal">true</span>; } <span class="hljs-keyword">if</span> (!annotation) { <span class="hljs-comment">//表示不是注释内容</span> <span class="hljs-keyword">if</span> (judgeWord(line[i])) { <span class="hljs-comment">//表示是属于字母与下划线</span> word += line[i] <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; (judgeNumber(line[i + <span class="hljs-number">1</span>]) || judgeWord(line[i + <span class="hljs-number">1</span>]))) { i++ word += line[i] } <span class="hljs-keyword">if</span> (judgeKeyWord(word)) { <span class="hljs-comment">//判断单词是否属于关键词</span> oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'keyWord'</span> }) } <span class="hljs-keyword">else</span> { <span class="hljs-comment">//不为关键词, 则为标识符</span> oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'identifier'</span> }) } <span class="hljs-comment">//由于include是属于头文件的引入, 需要对头文件进行特殊处理</span> <span class="hljs-keyword">if</span> (word === <span class="hljs-string">'include'</span>) { includeFile = <span class="hljs-literal">true</span> } word = <span class="hljs-string">''</span> i++ } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (line[i] === <span class="hljs-string">'"'</span>) { <span class="hljs-comment">//字符串判断</span> <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; line[i + <span class="hljs-number">1</span>] !== <span class="hljs-string">'"'</span>) { word += line[i] i++ } word += (line[i] || <span class="hljs-string">''</span> )+ (line[i + <span class="hljs-number">1</span>] || <span class="hljs-string">''</span>) oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'string'</span> }) word = <span class="hljs-string">''</span> i += <span class="hljs-number">2</span> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (line[i] === <span class="hljs-string">'''</span>) { <span class="hljs-comment">//字符判断</span> <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; line[i + <span class="hljs-number">1</span>] !== <span class="hljs-string">'''</span>) { word += line[i] i++ } word += (line[i] || <span class="hljs-string">''</span> )+ (line[i + <span class="hljs-number">1</span>] || <span class="hljs-string">''</span>) oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'char'</span> }) word = <span class="hljs-string">''</span> i += <span class="hljs-number">2</span> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (judgeNumber(line[i])) { <span class="hljs-comment">//数字判断</span> word += line[i] <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; (judgeNumber(line[i + <span class="hljs-number">1</span>]) || line[i + <span class="hljs-number">1</span>] === <span class="hljs-string">'.'</span>)) { i++ word += line[i] } oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'number'</span> }) word = <span class="hljs-string">''</span> i++ } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (judgeSpecialWord(line[i])) { <span class="hljs-comment">//特殊字符判断</span> <span class="hljs-keyword">if</span> (line[i] === <span class="hljs-string">'&lt;'</span> &amp;&amp; includeFile) { <span class="hljs-comment">//处理头文件的引入</span> oneLine.push({ <span class="hljs-attr">word</span>: line[i], <span class="hljs-attr">type</span>: <span class="hljs-string">'specialWord'</span> }) i++ word += line[i] <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; line[i + <span class="hljs-number">1</span>] !== <span class="hljs-string">'&gt;'</span>) { i++ word += line[i] } oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'libraryFile'</span> }) word = <span class="hljs-string">''</span> i++ } <span class="hljs-keyword">else</span> { <span class="hljs-comment">//处理//的注释代码</span> <span class="hljs-keyword">if</span> (line[i] === <span class="hljs-string">'/'</span> &amp;&amp; line[i + <span class="hljs-number">1</span>] === <span class="hljs-string">'/'</span>) { i++ <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length) { i++ word += line[i] } oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'Annotations'</span> }) word = <span class="hljs-string">''</span> i += <span class="hljs-number">3</span> } <span class="hljs-keyword">else</span> { word += line[i] <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; (judgeSpecialWord(word + line[i + <span class="hljs-number">1</span>]))) { i++ word += line[i] } oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'specialWord'</span> }) word = <span class="hljs-string">''</span> i++ } } } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (line[i] === <span class="hljs-string">' '</span>) { oneLine.push({ <span class="hljs-attr">word</span>: line[i], <span class="hljs-attr">type</span>: <span class="hljs-string">'space'</span> }) i++ } } <span class="hljs-keyword">else</span> { <span class="hljs-comment">//表示注释内容</span> <span class="hljs-keyword">while</span> (i + <span class="hljs-number">1</span> &lt; line.length &amp;&amp; (line[i + <span class="hljs-number">1</span>] !== <span class="hljs-string">'*'</span> &amp;&amp; line[i + <span class="hljs-number">2</span>] !== <span class="hljs-string">'/'</span>)) { word += line[i] i++ } word += line[i] + (line[i + <span class="hljs-number">1</span>] || <span class="hljs-string">''</span>) + (line[i + <span class="hljs-number">2</span>] || <span class="hljs-string">''</span>) oneLine.push({ <span class="hljs-attr">word</span>: word, <span class="hljs-attr">type</span>: <span class="hljs-string">'Annotations'</span> }) annotation = <span class="hljs-literal">false</span>; word = <span class="hljs-string">''</span> i += <span class="hljs-number">3</span> } } <span class="hljs-keyword">return</span> oneLine }</code></pre> <h3 id="articleHeader6">界面实现过程</h3> <ul> <li> <p>Electron, <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>搭建</p> </li> </ul> <p>具体的搭建过程省略, 可查看源码或自行查找资料</p> <ul> <li> <p>动态编辑显示</p> <ul> <li> <p>数据绑定, 使用v-model结合watch进行数据监控, 当数据发生变化的时候重新分析每行数据</p> </li> <li> <p>二维<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>保存分析的数据, 使用二维<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>保存分析完的词法, 保留原生的代码行</p> </li> <li> <p>通过v-bind:class对不同类型的词法进行代码高亮的简单呈现</p> </li> </ul> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;container&quot;> <div class=&quot;navigator&quot;> <button class=&quot;menu-btn&quot; @click=&quot;open&quot;>open</button><br /> <button class=&quot;menu-btn&quot; @click=&quot;save&quot;>save</button> </div> <div class=&quot;content&quot;> <div class=&quot;code-input&quot;> <textarea v-model=&quot;codeInput&quot;><br /> </textarea> </div> <div class=&quot;code-show&quot;> <div v-for=&quot;(line, index) in codeShowArr&quot;> <p v-for=&quot;word in line&quot; :class=&quot;word.type&quot;> <template v-if=&quot;word.type==='space'&quot;><br /> &amp;nbsp<br /> </template><br /> <template v-else><br /> {{word.word}}<br /> </template> </p> </p></div> </p></div> </p></div> </p></div> <p></template></p> <p><script> import { analysisLine } from '../controllers/analysis' import fileController from '../controllers/fileController'</p> <p>export default { watch: { codeInput: function() { this.codeShowArr = [] this.codeInput.split(/r?n/).forEach(line => { let wordArr = [] analysisLine(line, this.annotation).forEach(word => { wordArr.push(word) }) this.codeShowArr.push(wordArr) }) } }, data () { return { codeInput: '', codeShow: '', codeShowArr: [], annotation: false } }, methods: { open() { fileController.openDialog().then(filePath => { return fileController.readPackage(filePath) }).then(res => { this.codeInput = res }) }, save() { fileController.openDialog().then(filePath => { return fileController.writePackage(filePath, <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.codeShowArr) }) } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="jsx"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navigator"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"open"</span>&gt;</span>open<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-btn"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"save"</span>&gt;</span>save<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code-input"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"codeInput"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code-show"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(line, index) in codeShowArr"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"word in line"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"word.type"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"word.type==='space'"</span>&gt;</span> &amp;nbsp <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-else</span>&gt;</span> {{word.word}} <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> { analysisLine } <span class="hljs-keyword">from</span> <span class="hljs-string">'../controllers/analysis'</span> <span class="hljs-keyword">import</span> fileController <span class="hljs-keyword">from</span> <span class="hljs-string">'../controllers/fileController'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">watch</span>: { <span class="hljs-attr">codeInput</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.codeShowArr = [] <span class="hljs-keyword">this</span>.codeInput.split(<span class="hljs-regexp">/r?n/</span>).forEach(<span class="hljs-function"><span class="hljs-params">line</span> =&gt;</span> { <span class="hljs-keyword">let</span> wordArr = [] analysisLine(line, <span class="hljs-keyword">this</span>.annotation).forEach(<span class="hljs-function"><span class="hljs-params">word</span> =&gt;</span> { wordArr.push(word) }) <span class="hljs-keyword">this</span>.codeShowArr.push(wordArr) }) } }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">codeInput</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">codeShow</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">codeShowArr</span>: [], <span class="hljs-attr">annotation</span>: <span class="hljs-literal">false</span> } }, <span class="hljs-attr">methods</span>: { open() { fileController.openDialog().then(<span class="hljs-function"><span class="hljs-params">filePath</span> =&gt;</span> { <span class="hljs-keyword">return</span> fileController.readPackage(filePath) }).then(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> { <span class="hljs-keyword">this</span>.codeInput = res }) }, save() { fileController.openDialog().then(<span class="hljs-function"><span class="hljs-params">filePath</span> =&gt;</span> { <span class="hljs-keyword">return</span> fileController.writePackage(filePath, <span class="hljs-keyword">this</span>.codeShowArr) }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <ul> <li> <p>文件的读取和写入</p> <ul> <li> <p>使用Electron中引入Node的fs模块来进行文件读取写入处理</p> </li> <li> <p>使用Electron的Dialog控件选取文件</p> </li> </ul> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" import Promise from 'bluebird' import electron from 'electron' const {dialog} = electron.remote const fs = Promise.promisifyAll(require('fs')); const writePackage = (filePath, data) => {<br /> return fs.writeFileAsync(filePath, JSON.stringify(data, null, 2)).catch(err => {<br /> return Promise.reject(err)<br /> });<br /> }</p> <p>const readPackage = (filePath) => {<br /> return fs.readFileAsync(filePath, 'utf-8').catch(err => {<br /> return Promise.reject(err)<br /> });<br /> }</p> <p>const openDialog = () => {<br /> return new Promise((resolve, reject) => {<br /> dialog.showOpenDialog({<br /> properties: [<br /> 'openFile',<br /> ]<br /> }, (res) => {<br /> if(!res) {<br /> return reject('404')<br /> }<br /> return resolve(res[0])<br /> });<br /> })<br /> }</p> <p>export default {<br /> writePackage,<br /> readPackage,<br /> openDialog<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-keyword">import</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a></span> <span class="hljs-keyword">from</span> <span class="hljs-string">'bluebird'</span> <span class="hljs-keyword">import</span> electron <span class="hljs-keyword">from</span> <span class="hljs-string">'electron'</span> <span class="hljs-keyword">const</span> {dialog} = electron.remote <span class="hljs-keyword">const</span> fs = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/promis" title="浏览关于“Promis”的文章" target="_blank" class="tag_link">Promis</a>e</span>.promisifyAll(<span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>)); <span class="hljs-keyword">const</span> writePackage = <span class="hljs-function">(<span class="hljs-params">filePath, data</span>) =&gt;</span> { <span class="hljs-keyword">return</span> fs.writeFileAsync(filePath, <span class="hljs-built_in">JSON</span>.stringify(data, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>)).catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(err) }); } <span class="hljs-keyword">const</span> readPackage = <span class="hljs-function">(<span class="hljs-params">filePath</span>) =&gt;</span> { <span class="hljs-keyword">return</span> fs.readFileAsync(filePath, <span class="hljs-string">'utf-8'</span>).catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(err) }); } <span class="hljs-keyword">const</span> openDialog = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> { dialog.showOpenDialog({ <span class="hljs-attr">properties</span>: [ <span class="hljs-string">'openFile'</span>, ] }, (res) =&gt; { <span class="hljs-keyword">if</span>(!res) { <span class="hljs-keyword">return</span> reject(<span class="hljs-string">'404'</span>) } <span class="hljs-keyword">return</span> resolve(res[<span class="hljs-number">0</span>]) }); }) } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { writePackage, readPackage, openDialog } </code></pre> <p>对此, 一个简单的C++词法分析就完成了, 过程并不复杂, 只要理解了优先级和并列情况的区分就比较清晰的写出, 由于<br />个人匆匆写完这个程序, 并没有对js部分的代码进行优化, 质量过低, 仅供参考</p> <p></code></p>

本文固定链接:

C++语法解析器

http://www.js-code.com/cpp/cpp_61480.html

80%的人都看过