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查看请求信息,而后输入一段代码

  

  

  能够清晰地看出,每次输入字符,站点都会请求分析当前的代码,而后返回可能提示出的代码片断,弹出代码提示框。

  原理仍是比较直观的。

  谢谢看到这里~

相关文章
相关标签/搜索