1. 前言
在寫博客時，感覺博客園自帶的代碼展示分享能力稍微弱了一點，這個時候突然發現了jsFiddle這樣一個在線前端代碼展示分享神器。
2. 簡介
jsFiddle 主要分為3個部分：代碼編輯區、菜單和功能區
2.1 代碼編輯區
2.1.1 Html
在html編輯區輸入的代碼會被會被放在<body>和</body>之間。因此請不要輸入諸如doctype，head之類的標簽，因為這些標簽會在后台自動生成。
2.1.2 css
在css編輯區輸入的代碼會以內部樣式表的形式放置在head部分。
2.1.3 javascript
在javascript編輯區輸入的代碼會被放在head的Script標簽當中。也就是head的 <script type="text/javascript"> 和 </script>.
2.1.4 result
這是一個只讀區域，用於顯示程序運行的結果。只需點擊run就可以查看結果。
草圖（Draft）：只有注冊用戶才能使用。當前的運行結果會被保存在一個草圖當中。可以通過 http://jsfiddle.net/draft/訪問。草圖的最重要的作用就是用於檢測瀏覽器的兼容性（必須登陸才能查看）。
2.2 菜單
菜單分成保存前和保存后兩種狀態
保存前的菜單
保存后的菜單
Save:
將當前編輯的內容保存到服務器上，方便下次調用和分享。如果你只是想測試用的話是不需要保存的。
Update：
將當前的狀態保存為一個版本。類似於版本控制，會在URL后面加上一個數字。之前的版本還會存在，方便后期調試。
Fork:
把現在的項目復制到一個新的文件當中。
Base:
出現在沒有進行Update的項目當中，表明這是最初效果，只是一個標識符。
Set as base:
出現在非初始版本的項目中。可點擊，作用是把當前版本變成最初版本，原先的初始版本會被刪除。
Share:
提供了分享的三種形式。
Run:
點擊運行代碼，結果會在result中顯示。
Debug on mobile:
在手機端調試。
Tidyup:
格式化代碼。
JSHint:
調試js代碼。
2.3 功能區
2.3.1 Frameworks & Extensions:
第一個下拉菜單中列出了所有支持的框架，選擇一個框架之后會在<head>中引入此框架。如果選擇No-Library則不會加載任何框架。
第二個下拉菜單選擇加載框架的時間。（下面四種情況為個人理解，不保證正確）
onLoad:
加載完頁面當中的所有元素之后運行。
onDomReady:
加載完頁面所有的節點之后運行。
no wrap – in <head>:
在head中引入框架。（按順序執行）。
no wrap – in <body>:
在body中引入框架。（按順序執行）。
2.3.2 Fiddle options
Title:
在你的個人中心中顯示的項目名稱。
Description:
在你的個人中心中顯示的項目描述。
Normalized CSS:
如果選擇了這個復選框就會使用網站提供的 normalize.css（用於移除默認樣式）。
Body Tag:
為body添加屬性,比如：<body class="dark_ui">
DTD：
選擇標志符的語法規則，默認為html5
Framework <script> attribute:
可以為Script標簽添加屬性。比如<script type="text/javascript"src="/js/lib/someframework.js" {attributes}></script>
2.3.3 External Resources
添加外部資源。
3. 分享代碼
3.1 分享代碼的URL格式：
http://{url of the fiddle}/embedded/[{tabs}/{style}]]/
tabs:的默認展示順序：js,resources,html,css,result
注：resource表示外部資源，如果沒有引用外部資源則這一項不顯示。
Skin:選擇展示時所使用的皮膚。
3.2 獲取代碼
可以通過點擊share按鈕得到分銷的三種方式
3.3 案例
現在使用一個在線小案例（http://jsfiddle.net/pgg2ymm/ZdVX8/）進行演示
默認樣式
<iframe src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>
改變展示順序
<iframe src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>
移除部分展示項
<iframe src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/js,result/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>
更換皮膚
<iframe src="http://jsfiddle.net/pgg2ymm/ZdVX8/embedded/js,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0" style="width:100%;height:300px;"></iframe>
4. 結束語
如果你想了解更多關於JSFidle的知識請參看官方說明文檔http://doc.jsfiddle.net/index.html。