前端與編譯原理 用js去運行js代碼 js2run

前端與編譯原理 用js去運行js代碼 js2run

===
前端與編譯原理彷佛相隔甚遠,各類熱門的框架都學不過來,那能顧及到這麼多底層呢,前端開發者們彷佛對編譯原理的影響僅僅是"抽象語法樹",但這只是個開頭而已,咱們的目的是利用js直接運行js代碼

項目地址
安裝及使用方法

寫這個幹嗎,有現成的eval不香麼

接觸過微信小程序開發的同窗或許知道,小程序爲運行環境禁止new Function,eval,setTimeout等方法的使用,限制了咱們執行字符串形式的動態代碼,其餘小程序平臺對此也有諸多限制,可是解析器畢竟也就是那麼回事,能夠寫一個解析器,讓Js本身去運行本身

編譯器和解釋器

編譯器負責代碼轉化成語法樹,代碼通過編譯器的詞法分析,語法分析等階段事後,會生成一個樹狀結構的抽象語法樹(AST),裏面詳盡的描述了代碼類型,開始結束位置等信息,感興趣的同窗能夠在這個AST Explorer網站自行體驗
到了AST階段代碼還不可以運行,可是AST詳細的記錄了代碼的語義化信息,因此Babel,Webpack,Sass,Less,Prettier等工具能夠進行各類處理,可以把AST翻譯成目標語言並運行的工具叫作"解釋器"

關於編譯器已經有現成的Babel,acron供咱們選擇,他們都較爲成熟,選哪一個都沒錯,看喜愛,因爲解釋本事幹的事情就是,寫了什麼代碼,就按照什麼代碼去執行,好比有一段代碼var a = 1,那就在執行環境裏建立一個變量a並賦值1,接下的一行是a += 10那就在執行環境裏把這個變量a給他加上100,這個執行環境能夠是一個對象,每次聲明變量或者執行操做,都是在對對象進行操做,當操做結束的時候,釋放掉變量便可,不會對執行環境之外的代碼有影響,因爲是js去運行js,new關鍵字,this,循環,以及對象的方法等都不須要有太多的改動,可讓js解釋器的實現變得很是簡單

後續

在寫解釋器的時候,須要考慮關鍵字判斷,標識符節點處理,字符節點,表達式,塊級聲明,函數定義,函數表達式,this,new,循環,if等各類代碼的處理,在這裏就不一一詳盡的去描述了,源碼參考了@jrainlau大神的代碼,至於生產環境的使用也能夠參考@axetroy的開源項目,能夠參考源碼中的註釋,也能夠看大神們的文章

感謝如下成員
@jrainlau
@axetroy 這位大神的runjs更成熟一些,若是項目須要能夠參考這個