标签：des   blog   http   io   os   ar   使用   java   strong   

工具用途

你可以利用 JS Bin 提供的線上環境，直接線上編輯網頁，對各式「前端技術」進行分享、測試與偵錯，甚至於可以用來當成教學或提問工具，總之只要跟前端有關的議題 ( HTML5, CSS3, JavaScript )，都很適合先放到這裡，然後透過一個唯一的 JS Bin 網址分享出去。

快速上手使用

剛登入後，預設會看到如下畫面，網址列就是 jsbin.com 而已，底下則出現 HTML 與 JavaScript 的編輯器窗格，可以讓你輸入內容：

只要你輸入任意字元在任意編輯器窗格裡，你會立刻發現「網址列」發生了變化，如下圖所示，編號 1 的地方就是你的 Bin ID，編號 2 的地方則是這個 Bin 的版本編號 ( 預設會從 1 開始 )，編號 3 的地方則是目前的顯示模式，edit 則代表「編輯」模式。預設的情況下，你輸入的 HTML / CSS / JavaScript 都會立刻反映到最右邊的 Output 窗格。

註: 在 JS Bin 裡面，每一個前端網頁組合 ( HTML + CSS + JavaScript ) 都被稱為一個 Bin ！

當然，只要你把這個 Bin 設定完成後，便可直接把你當下的 JS Bin 網址分享出去，非常方便！

導覽列介紹

如下圖是 JS Bin 進入後的主要版面，非常簡潔，最上方就是個導覽列而已，接下來會依圖編號解說：

導覽列 1. JS Bin 主選單

你可以在任意時刻重新建立一個 Bin，點擊 New 選項即可。

如果你有註冊會員的話，就會看到 Open 功能，因為只要是你編輯過的 Bin 全部都會自動被儲存起來，隨時可以重新開啟曾經寫過的 Bins。如下圖示，如果你不想再看到特定 Bins，還可以設定封存，預設就不會在這邊被看到，且日後還是可以重新找出來。

如下圖示，點選 Archive view 即可救回曾經封存的 Bins

主選單的 Add description 功能，只是幫你在 HTML 中新增 description 這個 meta tag 而已

主選單的 Create milestone 功能，只是告訴 JS Bin 說：「我已經完成了一個 Bin 的里程碑，請幫我把目前這個版本固定下來。」因此，點擊這個功能後，JS Bin 網址上的「版本編號」就會自動+1

主選單的 Save as template 功能，則是將你目前的 Bin 儲存成一個範本，讓你日後新增 Bin 時，預設的 HTML / CSS / JavaScript 就會有你目前設定的 Bin 內容。

主選單的 Clone 功能，跟剛剛的 Create milestone 功能只有一點小差異，那就是，他並不是換一個版本編號，而是換一個全新的 Bin ID，如下圖示：

主選單的 Download 功能則是把 Bin 下載，他會把 HTML / CSS / JavaScript 合併成一個 HTML 檔案。

導覽列 2. Add library 插入函式庫

這個按鈕可以方便地替你的 HTML 插入一些常用的外部資源，例如 jQuery、jQuery UI、jQuery Mobile、Bootstrap、YUI、AngularJS、Kendo UI、Backbone、Modernizr、……等等，算是個方便的小工具。

導覽列 3. 各式編輯器、主控台與即時預覽窗格 (Panel)

HTML 編輯器窗格

這個編輯器窗格對語法有高量顯示，比較可惜的是還沒有 Intellisense 或自動完成功能，不過卻有支援 Emmet (Zen Coding) 編寫方法，非常厲害！不知道 Zen Coding 的人，可以參考我之前錄製的一則教學影片【活用 VS2012 擴充套件 - 使用 ZenCoding 快速產生 HTML 語法 (Web Essentials 2012)】，上面有示範如何利用特殊的 Zen Coding 語法快速撰寫 HTML 內容！

除此之外，你還可以切換不同的撰寫語法，最後點選 Convert to HTML 即可自動轉換成 HTML 格式。

CSS 編輯器窗格

這跟 HTML 編輯器很像，也支援 Zen Coding 語法喔！你也可以用更高效的 LESS 或 Stylus 語法撰寫 CSS 樣式，最後一樣點選 Convert to CSS 即可自動轉換成標準的 CSS 格式。

註：你甚至可以直接拿 JS Bin 當成 LESS 或 Stylus 的學習工具！

JavaScript 編輯器窗格

這跟 HTML / CSS 編輯器也很像，也支援多種協助高效撰寫 JavaScript 的語法，還支援 TypeScript 喔！

Console 主控台窗格

這窗格與各瀏覽器開發人員工具裡的 Console 窗格是一樣的，我不知道為什麼他們還要多弄一個網頁版，我覺得沒有比瀏覽器內建的好用，所以大多沒用他。

Output 輸出窗格