代码演示神器——jsfiddle

蚊子前端博客
发布于 2014-02-25 07:00
jsfiddle——前端代码在线演示神器,演示与分享完美统一体! - 很实用

jsfiddle 网站已停止服务,以下内容已失效

1. 介绍

很多时候,我们需要在我们写的文章或博客中,即时显示出我们写的 demo,能方便的解释出我们的思路。很久之前我也写过一篇文章,说的是如果利用博客园自己的资源来创建一个 demo,只不过这样做的一个坏处是,文章列表中会产生很多的 demo 标题,而那些文章只是我们在其他文章中引用而已,没必要有个标题专门显示出来。

前几天无意间发现了 jsfiddle,看到的第一感觉就是:哇,这么牛 X,给你 32 个赞!不过我也是刚开始用这个,还有很多的功能没有发掘出来,有什么不对的地方,望指正!

jsfiddle 的官网:http://jsfiddle.net/

2. jsfiddle 的具体使用

进入官网后,我们看到的是这样的界面:

界面主要是分为了三部分:

左侧:添加一些必要的链接或者其他的一些什么东西。比如我们写 js 时需要用到 jquery,那么我们就把 http://code.jquery.com/jquery-1.8.0.min.js 这个链接引入,就能在 js 这个编辑框里写 jquery 代码了。当然引入其他的文件应该也是可以的。

上侧:没标出来的那两个按钮我目前还不知道怎么使用。

运行:当把所有的代码完成后,点击“运行按钮”,就能在"result"框里看到运行的结果;

保存:运行之后没什么问题了,就可以保存了,网页就会跳转到一个新的页面,url 地址就是你这个项目的地址,复制出来直接使用就行了,而且我们还看到了 share 按钮:

share 按钮的下拉表里提供了三种选择:项目的 url 链接地址,项目的全屏展示地址,iframe 框架的代码。我们可以根据自己的需要,复制我们需要的地址。

代码格式化:能够将我们写的代码按比较正规的方式进行呈现。

纠错:当我们点击运行按钮没反应时,我们可以用这个代码进行适当的纠错。不过感觉这个的纠错不是完全的可信,有时候不准。做好的方案就是:自己先把代码写完运行没问题了,再粘贴过来。

还有就是,我们可以展示我们需要的代码,就按“项目的全屏展示地址”为例,它默认展示的只是 result 模块,我们如果想展示 html 和 js,可以这样写:http://jsfiddle.net/bingbing/J965R/embedded/result,html,js/。

而且模块展示的顺序就是我们在 url 中写的顺序,我们把 result 写在了第一个,那么默认展示的就是 result;如果我们把 js 写在第一个,那么默认展示的就是 js。当然了,大部分的情况默认展示的应该都是 result。

需要注意的是:当我们在博客园的文章源码里插入“iframe 的框架代码”时,不能直接这样写<iframe width="100%" height="300" src="http://jsfiddle.net/bingbing/J965R/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>,而是应该把 src 里的逗号换成%2C:http://jsfiddle.net/bingbing/J965R/embedded/result%2Chtml%2Cjs%2Ccss

这里插入一个代码演示的 demo,点击 div,能够随机变换背景颜色。

3. 总结

也没什么好总结的,希望能够发掘出 jsfiddle 更多的功能。

标签:
阅读(690)

公众号:

qrcode

微信公众号:前端小茶馆