實現前端編譯器代碼

『壹』 編譯器的代碼分析

編譯器分析（compiler analysis）的對象是前端生成並傳遞過來的中間代碼，現代的優化型編譯器（optimizing compiler）常常用好幾種層次的中間代碼來表示程序，高層的中間代碼（high level IR）接近輸入的源程序的格式，與輸入語言相關（language dependent），包含更多的全局性的信息，和源程序的結構；中層的中間代碼（middle level IR）與輸入語言無關，低層的中間代碼(Low level IR)與機器語言類似。 不同的分析，優化發生在最適合的那一層中間代碼上。
常見的編譯分析有函數調用樹（call tree），控制流程圖（Control flow graph），以及在此基礎上的 變數定義－使用，使用－定義鏈（define-use/use-define or u-d/d-u chain），變數別名分析（alias analysis），指針分析（pointer analysis），數據依賴分析（data dependence analysis）等。
程序分析結果是編譯器優化（compiler optimization）和程序變形（compiler transformation）的前提條件。常見的優化和變形有：函數內嵌（inlining），無用代碼刪除（Dead code elimination），標准化循環結構（loop normalization），循環體展開（loop unrolling），循環體合並，分裂（loop fusion，loop fission），數組填充（array padding），等等。 優化和變形的目的是減少代碼的長度，提高內存（memory），緩存（cache）的使用率，減少讀寫磁碟，訪問網路數據的頻率。更高級的優化甚至可以把序列化的代碼（serial code）變成並行運算，多線程的代碼（parallelized，multi-threadedcode）。
機器代碼的生成是優化變型後的中間代碼轉換成機器指令的過程。現代編譯器主要採用生成匯編代碼（assembly code）的策略，而不直接生成二進制的目標代碼（binary object code）。即使在代碼生成階段，高級編譯器仍然要做很多分析，優化，變形的工作。例如如何分配寄存器（register allocatioin），如何選擇合適的機器指令（instruction selection），如何合並幾句代碼成一句等等。

『貳』 編譯器前端開發

編譯器粗略分為詞法分析，語法分析，類型檢查，中間代碼生成，代碼優化，目標代碼生成，目標代碼優化。把中間代碼生成及之前階段劃分問編譯器的前端，那麼後端與前端是獨立的。後端只需要一種中間代碼表示，可以是三地址代碼或四元式等，而這些都與前端生成的方式無關。也就是不論你前端是用fortran還是c/c++,只要生成了中間代碼表示就可以了，後端是不管你是用哪種語言生成的。

『叄』 如何實現前端代碼打開vscode編輯器

vscode 可安裝靜態web伺服器 Live Server用於運行前端代碼，方便調試。最新的 Live Server已支持php動態頁面。
安裝方法是，點擊左側第五個圖標，打開「擴展」頁面，在文本框中輸入Live Server，點擊第一個搜索結果，在右側頁面中點擊安裝，等待安裝完成。
運行方式是，選中項目，點擊屏幕下方工具欄中的Go live按鈕即可。再點擊一次，即停止運行伺服器。
Live Server有一些默認配置選項，用戶可以修改。點擊 文件->首選項->設置， 在右側頁面中找到 Live Server Config，其中列出的是本插件的配置屬性。將其復制到右側，修改屬性值，點擊保存即可。例如，修改默認的埠，可以復制以下代碼到頁面的右側的用戶設置中。

1
"liveServer.settings.port": 5501

點擊保存，默認的埠就有5500改為5501.
其他設置的含義，查找該插件的說明文檔。
注意，VSCode 中的所有設置都是通過json格式的數據配置的。用戶可以查找對應的key值，修改其value，從而修改配置屬性。

『肆』 如何實現在瀏覽器中拿到代碼，再傳到後台調用C編譯器進行編譯運行

後端工具是什麼無所謂，你用c照樣能搭後端，本質都是HTTP協議上傳輸的一組數據，思路我之前已經說了。基本思路就是這樣，你換什麼工具都一樣。
瀏覽器如何拿到代碼？DOM+js
如何傳給後端？Ajax
後端如何收到？工具里的API，自行查手冊。
你最大的問題在於對HTTP協議並不了解，這種情況下，去了解你所使用的工具即可，碼個demo，你就知道大體流程了。
----------------
你需要了解一下HTTP相關的知識，或者直接使用相關的工具來跳過了解HTTP這一步驟（時間不夠的話）
相關的工具如：1、apache2和php，2、java，3、python和django
前端頁面里使用ajax將數據提交到伺服器，伺服器藉助上述某個工具的API獲取前端提交的內容，然後保存到文件，在調用命令行進行編譯，將輸出重定向到文件，然後與標准答案比較。

『伍』 前端開發常用哪些工具軟體

前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：

1、WebStorm

幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。

2、IntelliJ idea

頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。

2、HBuilderX

HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。