如果你是一名前端博主，你希望通過代碼+演示來透徹的講解一些技巧，并且無縫嵌入你的博客，那么jsfiddle是一個很好的選擇。
本文將比較博客園前端dev們各種演示方式，大家可以挑選自己喜歡的方式。
jsFiddle的官方網(wǎng)站：http://jsfiddle.net/
它包括了頂端的控制按鈕，如下圖：
分別代表：運行、保存、重置、代碼格式化，代碼語法錯誤檢查
下面的4個windows你可以分別調(diào)試HTML，CSS，Javascript，右下角顯示代碼的運行結(jié)果。
在左邊的操作區(qū)，你可以選擇相關(guān)的js類庫，支持的還是相當全的。當然，也支持自定義的類庫，這個很不錯。
這個工具可以有效的幫助web前端開發(fā)人員來有效分享和演示前端效果，大家可以在blog和論壇里用jsFiddle解答或者提問。
a.Milo Yip方式 ，如下圖：
首先要在頁面引入相關(guān)的js庫，然后在textarea 里面放入要執(zhí)行的代碼，然后eval(document.getElementById('interactiveEmitCode').value)代碼如下：
1 | |
1 2 3 4 | <textarea id="interactiveEmitCode" rows="20" cols="100">var ps = new ParticleSystem();ps.effectors.push(new ChamberBox(0, 0, 400, 400));var dt = 0.01; |
1 | ···· |
1 | ···· |
1 | ···· |
1 | ···· |
1 2 3 4 5 6 7 8 9 10 | ····elsenewMousePosition = new Vector2(e.offsetX, e.offsetY);};</textarea><br /><button onclick="eval(document.getElementById('interactiveEmitCode').value)" type="button">Run</button><button onclick="stop();" type="button">Stop</button><br /><canvas id="interactiveEmitCanvas" width="400" height="400"></canvas> |
優(yōu)點：可以在本頁面編輯代碼，并且看到實時效果，
缺點：頁面需要引用相關(guān)js庫，和本頁代碼邏輯混在一起。代碼顏色黑白顯示，用戶體驗差
把代碼放到一個iframe中，然后再新開頁面執(zhí)行該頁面的代碼。相關(guān)代碼如下：
1 2 3 4 5 6 7 8 9 | <script type="text/javascript">function runCode(id) {obj = document.getElementById(id);var TestWin=open(''); //打開一個窗口并賦給變量TestWin。TestWin.opener = null // 防止代碼對論談頁面修改TestWin.document.write(obj.value); //向這個打開的窗口中寫入代碼code，這樣就實現(xiàn)了運行代碼功能。TestWin.document.close();}</script> |
優(yōu)點：邏輯分離，可以編輯運行。
缺點：需要新開頁，代碼黑白顯示，用戶體驗差
C.外鏈方式
優(yōu)點：不與本頁html,css,js出現(xiàn)沖突，只要給出外鏈，不能編輯代碼。
缺點：需要想SAE上傳相關(guān)的js、img、css和html
D.jsFiddle方式,我直接拿岑安方式的代碼作為例子：效果如下
這里有個小技巧：上面看到的iframe指定的src為http:?/?/?jsfiddle.net/?zhanglei/?QZJGZ/?embedded/?result,js,html,css"
最后的result,js,html,css為iframe中tab的顯示的順序，或者你不想顯示html,css,你就可以直接寫成
http://jsfiddle.net/zhanglei/LHWmv/embedded/result,js
效果如下：
也可以顯示result js和html，效果如下：
比較這四種方式，我最喜歡最后一種，我相信喜歡最后一種的多一些，因為不僅演示的代碼和博客的代碼分離，html和CSS和js和最終效果也分離開了·
本文已同步更新至：
