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。