起因
在知乎上面看一个关于回调函数的帖子时,有人为了表明观点,就给了个链接说是代码示例.好奇心强大,就点了过去.然后就发现了这么个前端代码在线调试和分享的利器–jsFiddle
jsFiddle的主要用途
个人觉得jsFiddle有下面几个使用场景：
- 写代码的时候，（可能是html,可能是css,也可能是js,有些东西没把握或者不清楚,但是现有的工程复杂度太高,不好直接拿来测试.重新建立个html文件然后写doctype,html,head…这个过程又太麻烦。可能环境搭建好，想法也没了。这个时候比较直接的方式就是打开浏览器，地址栏输入jsFiddle.net。然后立马开始需要进行的测试工程。
- 写技术博客或者回复评论(前提是这个评论支持加入iframe)的时候，需要展示一些代码。需要面临两个问题：一个是好的代码高亮，二是代码的实际运行结果。有些网站有这个功能(也许wordpress也有这样的插件，只是我还没接触到)，一个展示代码的文本框，下面一个按钮“运行代码”，点击就会跳转到另一个页面看代码的实际运行效果。但是在jsFiddle的代码分享就有个比较好的地方，通过tab选项卡的方式可以方便的切换显示html,css,js的代码和实际的运行效果。当然，这个对于小片段的代码最有优势，如果是太复杂的效果则肯能不是很适合了
- jsFiddle还有一个git思想的fork功能，这样就很方便你在查看别人代码的同时，能进行简单的修改调试，这样能进一步的理解
一些使用方面的技巧
jsFiddle网站本身也提供了很详细的使用文档,不过只有英文版的,英文还不错的同学可以看这里
界面介绍
界面有两种状态，一种是没保存前也就是通过地址直接访问的时候，一种是在前一种状态中点击顶部菜单中的”save”之后
两种状态的主要区别也是在顶部菜单栏。
两种状态下的菜单栏
保存之前的菜单
保存之后的菜单
第一种状态中特殊的按钮是”save”,可以把当前编辑的项目保持到jsFiddle的服务器上面,这样方便再次查看和分享
第二种状态中特殊的按钮有”update”,”fork”,”base”/“set as base”和”share”
像”update”和”fork”都是类似github的方式
“update”就是将当前状态保存为一个版本，方便调试(只有初始版本和update版本，这两个版本).
“fork”就是把当前的项目复制到一个新建项目中
“base”按钮出现在没有进行过”update”或者最初版本的项目中，表明这是最初始的版本，点击没效果，只是标识作用 “set as base”相反，出现在非初始版本的项目中。可点击，作用是把当前版本变成最初版本，原先的初始版本会被删除
“share”点击之后会展开一个面板，提供三种形式的分享方式
- 一个是当前项目的地址，进入后看到的和作者当前看到的内容一样
- 一个是全屏的tab选项卡展示代码和结果。不过默认提供的只是结果的展示。需要了解url的规则才好自定义
- 第三种其实就是用iframe引用的第二个的地址。
还有4个公用的菜单按钮*
“run” 是执行代码,点击之后就能在右下角的result区域看到代码执行的结果
- “debug on mobile”(就是那个类似手机上表示信号的图标), 是用来进行手机端调试使用的
- “TidyUp” 是整洁代码
- “JSHint” 是js的错误检查
代码编辑区
代码编辑区
分为四个区块,分别是html,css,js的输入区域,和代码运行的结果展示区域result
可以拖动区块直接的框去控制各个区块的大小
功能区
功能区在代码编辑区的左侧 Framework&Extensions 是程序需要用到的类库,有jQuery,YUI,ExtJs,Dojo等等,但是很可惜,国内的KISSY貌似没有的 Fiddle Options
- Name,Description 是对当前代码的一个命名和描述,方便以后在个人平台上面查看
- Normalized CSS 这个是选择是否加载一个reset css的文件,去除一些浏览器默认添加的样式
- Body tag 可以自定义body标签,这个是考虑到某些类库需要给body标签添加类或者别的属性
- DTD 定义html文档的类型申明,默认是html5的
- Framework attribute 用来定义加载类库的script标签上面的一些属性
编写代码
草稿
对于登录的用户，对于当前正在编辑的jsfiddle里面的代码，只要你点击过run，那么就可以通过访问jsfiddle.net/draft/
来查看看看运行过的代码的执行页面，展示的内容和result里面一样。
这样做的一个很大的好处是：能够方便的比较在不同浏览器下，代码的执行结果的不同，当然，前提是在不同的浏览器下，得先登录了。
分享代码
jsFiddle里面，除了能够很方便开发者去写一些demo之外，很大的一个好处就是高度可自定义的设定分享的展示方式。
在点击save按钮之后，得到的页面地址，只要把这个地址发送给你想分享的对象，那么对方就能通过这个地址看到和你save之后一模一样的界面。
同时，点击share按钮，在弹出菜单里面Share link里面的值也就是这个值。Embed on your page，这个里面是一个html代码，可以放在你的文章里面，方便在文章中添加代码。就比如我这个 还有一种http://jsfiddle.net/shuizhongyueming/L49jh/embedded/result/。
这个地址是可以配置的，在地址的embedded后面，有四种无序参数：html,css,js,result 以逗号分隔，只要在地址里面按需加入需要的即可。
同样，那个IFrame的src值也是可以这样设定的
比如，如果我想向人分享我的demo里面的js和result。那么我可以http://jsfiddle.net/shuizhongyueming/L49jh/embedded/js,result/。
那么demo的展示页面里面，就会有两个tab页，顺序和地址里面的顺序一致。
结语
以上差不多是我所知的关于jsfiddle的全部东西了。欢迎指正和补充
