【簡介】
微軟官方前不久發布了 try.dot.net 這個有趣的網址,開始只是圖個新鮮看了一下,后面通過自身實踐過后,發現這着實算是個“有趣”的站點!
首先我們大概地列舉一下這個站點能給我們帶來什么?
- 在線做一些教學教程,附上可以調試的代碼片段,很方便他人學習
- 面試的時候更方便了,面試官寫好一個代碼片段,可以讓不同的求職者直接在上面編寫代碼運行程序
當然不止上述的功能,利用你的想象力去豐富工具的使用場景吧。
接下來我們通過一個自身的使用經歷介紹一下如何使用這個有趣的工具。
【實現過程】
1.登陸 try.dot.net 的官方介紹網站,了解如何使用 try.dot.net
我們通過微軟提供的github項目地址和微軟發布說明可以輕松的了解到try.dot.net的使用說明。這里提供鏈接:
GitHub地址:https://github.com/dotnet/try
官方介紹地址:https://dotnet.microsoft.com/platform/try-dotnet
從介紹網址看到經典用法:
通過iframe嵌套到自己的網址展示代碼片段,遺憾的是,目前本人還卡在iframe跨域拒絕的階段 /手動哭(搞了一晚上還是沒搞明白怎么解決iframe跨域這個網址,有大神了解可以留言並給個demo瞅瞅)
通過上面的iframe地址可以看到try.dot.net 展示代碼片段的時候是通過gist這個代碼片段id進行鏈路的。
2.gist的使用
gist是github的一個附加功能,支持將多個代碼片段存放在站點上,站點會針對代碼片段自動生成一個id,在別的地方就可以使用id引用了。
首先需要登錄gist的站點:https://gist.github.com
可能有人可以訪問github,卻訪問不了這個網站(比如我),這里有個解決方案:
配置hosts(不會自行百度吧):192.30.253.118 gist.github.com
然后就可以登陸到這個站點了。
界面非常簡潔,直接輸入文件名和相關代碼點右下角的保存即可。AddFile可以添加另一段代碼。
隨便寫了個實體類放在這里:
保存后,點擊剛才的類文件,便可以看到瀏覽器的url變成了這樣的:
https://gist.github.com/sevenTiny/98b8b484dd9d0fbf8bd1bac0425db914
已經生成了代碼片段的id。
接下來我們就要復制這個id去用try.dot.net調試我們的代碼片段了。
3.try.dot.net的集成
在上文中復制id,然后將try.dot.net demo中的fromGist進行替換即可得到自己的代碼片段地址
https://try.dot.net/?fromGist=98b8b484dd9d0fbf8bd1bac0425db914
我們可以訪問一下
代碼運行正常,結果也正確!
那么問題來了,有人說我的也是這么操作的,為啥訪問地址后,代碼沒出現呢?代碼區域是空白的...
我開始也遇到了這個情況,對照了和微軟官方的代碼段后,發現只有缺少Main方法這個區別,無奈又加了個帶Main方法的程序片段,然后問題解決了,代碼成功出現!
猜測微軟這個try.dot.net是模仿了個控制台應用程序,必須要有控制台應用程序的Main方法才能運行。
必須提供帶Main方法的代碼片段
運行后的try.dot.net界面只能顯示該代碼片段,其他代碼片段不會顯示,但是可以引用使用。
【拓展】
通過上述操作,我們已經了解到了如何將自己的代碼片段使用 try.dot.net 展示並運行,那么我們可以小小激發我們一下好奇心,了解一下微軟怎么在前端界面做的代碼提示呢?
我們打開瀏覽器F12查看請求信息,然后輸入一段代碼
可以清晰地看出,每次輸入字符,站點都會請求分析當前的代碼,然后返回可能提示出的代碼片段,彈出代碼提示框。
原理還是比較直觀的。
謝謝看到這里~