在線前端代碼展現分享神器-JSFiddle

時間 2019-11-11

標籤在線前端代碼展現分享神器 jsfiddle 简体版

原文原文鏈接

1. 前言javascript

　　在寫博客時，感受博客園自帶的代碼展現分享能力稍微弱了一點，這個時候忽然發現了jsFiddle這樣一個在線前端代碼展現分享神器。css

2. 簡介html

jsFiddle 主要分爲3個部分：代碼編輯區、菜單和功能區前端

2.1 代碼編輯區html5

2.1.1 Htmljava

在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。