最近給網站做了個「代碼執行器」，主題我直接抄了Xcode 的主題，現在代碼終于可以在瀏覽器里實時看到運行效果了，效果如下：
還可以進行全屏編輯代碼：
以后看技術文章可以這樣看：
有人可能會問，這個功能有什么用？
這個不吹牛逼，如果技術文章能夠配上一個代碼執行器，那簡直太棒了，比如一篇演算法文章，光有思路不行，關鍵是能夠掌握代碼的寫法，如果看不懂代碼可以直接點擊一下「運行」按鈕，即可看到代碼的執行效果，比如上圖中，是我在《大廠演算法面試》這本小書的截圖，可直接運行代碼，詳細內容，可以看：
頭條：判斷是否為 IP 地址
《大廠演算法面試》小書
一個 api 的作用是什么，用文字解釋半天，用代碼直接輸出執行結果效果更佳，
如何實作這個功能
前端生態真的是太牛逼了，不管你實作什么功能都會有現成的方案，你只需要稍微改一改即可，如果實在滿足不了你的需求改一下原始碼即可，這一點，比移動端強太多了，
在前端小課網站上我放了一份常用的第三方庫，其中有提到 codeMirror，它是一款代碼編輯器，基于它實作了「代碼執行器」，
https://lefex.gitee.io/framework-book/codeMirror.html
在實作程序中遇到了幾個問題：
1、主題太丑
說實話，在 codeMirror 中沒找到一個我喜歡的主題，最后直接把 Xcode 的主題復制了一份，codeMirror 支持主題自定義功能，直接修改 css 樣式即可，然后匯入到專案當中：
2、執行代碼
執行 js 代碼字串，直接使用 eval 函式
console.log(eval('2 + 2'));
// expected output: 4
詳細內容可以看：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
3、console.log 輸出 hook
代碼執行程序中，可以通過 console.log 來輸出內容，進行除錯代碼，直接重寫 console.log 函式，把要輸出的內容顯示到 UI 上即可，
本文主要講了一個大體的思路，其中還有很多細節要處理，可以直接到小課網站體驗，
網站地址：
https://lefex.gitee.io/
https://lefex.github.io/
大家加油！
長按關注
素燕《前端小課》
幫助 10W 人入門并進階前端
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/219832.html
標籤：其他
上一篇：2020-11-14 python+selenium 定位得到元素,卻無法點擊的解決方法
下一篇：前端開發實習生面經