try.dot.net 的正確使用姿式

【簡介】

  微軟官方前不久發佈了 try.dot.net 這個有趣的網址,開始只是圖個新鮮看了一下,後面經過自身實踐事後,發現這着實算是個「有趣」的站點!前端

  首先咱們大概地列舉一下這個站點能給咱們帶來什麼?git

  1. 在線作一些教學教程,附上能夠調試的代碼片斷,很方便他人學習
  2. 面試的時候更方便了,面試官寫好一個代碼片斷,可讓不一樣的求職者直接在上面編寫代碼運行程序

  固然不止上述的功能,利用你的想象力去豐富工具的使用場景吧。github

  接下來咱們經過一個自身的使用經歷介紹一下如何使用這個有趣的工具。面試

【實現過程】

  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進行鏈路的。url

  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查看請求信息,而後輸入一段代碼

  

  

  能夠清晰地看出,每次輸入字符,站點都會請求分析當前的代碼,而後返回可能提示出的代碼片斷,彈出代碼提示框。

  原理仍是比較直觀的。

  謝謝看到這裏~

相關文章
相關標籤/搜索