摘要：最近發(fā)現(xiàn)了一個(gè)新的寫的思路，仔細(xì)一想，自己仿佛積累了不少寫的思路和想法，總結(jié)一下，拋磚引玉。本文所說(shuō)主要分以下三種本地外鏈文章中帶本地樓主在工作和學(xué)習(xí)中是比較喜歡寫的，拋出問(wèn)題非常直觀。對(duì)于樓主來(lái)說(shuō)，多數(shù)情況下是一個(gè)文件就可以搞定的。

最近發(fā)現(xiàn)了一個(gè)新的寫 demo 的思路，仔細(xì)一想，自己仿佛積累了不少寫 demo 的思路和想法，總結(jié)一下，拋磚引玉。

本文所說(shuō) demo 主要分以下三種：

本地 demo

外鏈 demo

文章中帶 demo

樓主在工作和學(xué)習(xí)中是比較喜歡寫 demo 的，拋出問(wèn)題非常直觀。

本地寫 demo，愛(ài)咋整就可以咋整，簡(jiǎn)單到可以只有一個(gè) HTML 文件，復(fù)雜到引入 React / Vue 等框架類庫(kù)，視情況而定。對(duì)于樓主來(lái)說(shuō)，多數(shù)情況下是一個(gè) HTML 文件就可以搞定的。最方便的情況下，直接新建個(gè) HTML 文件，然后起一個(gè)本地 server 即可，本地 server 可以用 Python、PHP 等起，對(duì)于前端來(lái)說(shuō)，http-server 是個(gè)不錯(cuò)的選擇，然后再配置個(gè) alias，比如我在 .zshrc 中配置 alias s="http-server"，可以秒啟。如果是稍微復(fù)雜的情況，需要些許調(diào)試，那么修改后自動(dòng)刷新是必須的，我寫了一個(gè)簡(jiǎn)單的腳手架 gulp-simple 可以滿足這個(gè)需求。但是我比較懶，覺(jué)得這樣還不太方便，畢竟需要編輯器和瀏覽器兩邊切換查看效果（單屏的情況下），有時(shí)只是查看一個(gè)簡(jiǎn)單的 css 特性，這樣搞就顯得麻煩了，我又給自己開(kāi)發(fā)了兩個(gè)簡(jiǎn)單的在線編輯器，分別是 html editor1 以及 html editor2，方便調(diào)試簡(jiǎn)單的 html 頁(yè)面。

本地 demo 大概三個(gè)方式，總結(jié)下：

本地新建 HTML 文件，雙擊啟動(dòng)或者本地啟 server

使用 gulp-simple（需要簡(jiǎn)單調(diào)試的頁(yè)面）

使用 html editor1 或者 html editor2 在線編輯以及調(diào)試

你寫了個(gè)炫酷的頁(yè)面，希望分享給別人，如果把 HTML 文件發(fā)給別人，顯然不是一個(gè)好的想法，最簡(jiǎn)單的方式就是將文件上傳到服務(wù)器，發(fā)送鏈接給別人，也正是接下去要說(shuō)的外鏈 demo。

最方便的選擇是選擇第三方服務(wù)，類似 codepen 或者 jsfiddle，國(guó)內(nèi)的 runjs 也做的不錯(cuò)可以試試。（這些網(wǎng)站均有很多不錯(cuò)的 demo，可以看看實(shí)現(xiàn)）

因?yàn)閭€(gè)人是重度 GitHub 用戶，自從知道 GitHub Pages 這玩意后，一般的外鏈 demo 都放在那了，所以 GitHub Pages 也不失為一個(gè)好的選擇。（點(diǎn)這里 看我的全部 demo）

說(shuō)到 GitHub Pages，其實(shí) GitHub 中的 repo 中的靜態(tài) HTML 頁(yè)面也是可以查看效果的（歸根結(jié)底還是 GitHub Pages），通常用來(lái)生成項(xiàng)目主頁(yè)等。具體設(shè)置在具體 repo 的 Settings -> Options -> GitHub Pages 中，選擇分支（一般是 master branch 即可），點(diǎn)擊 save 即可，比如我在 codedog 項(xiàng)目中生成的 demo。還有另一個(gè)方法，進(jìn)入 GitHub & BitBucket HTML Preview 這個(gè)網(wǎng)站，生成靜態(tài)頁(yè)面鏈接，但是只適用于只有一個(gè) HTML 頁(yè)面的場(chǎng)景，如果有引用 css 的話路徑會(huì)錯(cuò)誤。

另外，如果有自己的服務(wù)器，那么很顯然部署到自己的服務(wù)器就可以了。

外鏈 demo 同樣大概三個(gè)方式，總結(jié)下：

codepen / jsfiddle / runjs

GitHub Pages

自己的服務(wù)器

重點(diǎn)重點(diǎn)，這才是本文的重點(diǎn)！

有的時(shí)候?qū)懳恼拢枰鋫€(gè)簡(jiǎn)單的 demo，怎么破？外鏈當(dāng)然可以，但是沒(méi)有直接顯示在文章中顯得直觀。

我理想中的狀態(tài)是，可以用 markdown 寫文章，但是文章中有些代碼可以方便查看 HTML 效果。最后，我開(kāi)發(fā)了 codedog 這個(gè)工具，用 markdown 寫文章，自動(dòng)生成 html 文件，比如我前段時(shí)間在看 《CSS 揭秘》這本書，我用 markdown 做筆記，用 codedog 生成的 HTML 可以方便查看 CSS 效果，而且支持在線編輯，簡(jiǎn)直是爽，具體實(shí)現(xiàn)效果可以 點(diǎn)擊這里 查看。

但是 codedog 這個(gè)工具是為了這個(gè)需求量身定做的，有一定的局限性，有時(shí)候要實(shí)現(xiàn)文章中帶 demo 的效果，不得不在 markdown 和 HTML 中取舍，比如我之前為了學(xué)習(xí) flex 寫的 這個(gè) demo，是純 HTML 寫的，且存在一定的特殊性（不可復(fù)用）

最后就要說(shuō)到文章開(kāi)頭說(shuō)的 “發(fā)現(xiàn)了一個(gè)新的寫 demo 的思路”，做到首尾呼應(yīng)，是什么呢？

通過(guò)設(shè)置 style 標(biāo)簽的 display:block 樣式可以讓頁(yè)面的 style 標(biāo)簽顯示出來(lái)，并且加上 contentEditable 屬性后可以讓樣式成為可編輯狀態(tài)，更改后的樣式效果也是實(shí)時(shí)更新呈現(xiàn)，這就給交互創(chuàng)造了新的可能。

之前的實(shí)現(xiàn)如果頁(yè)面有樣式，并且修改樣式直接預(yù)覽（類似 html editor1 或者 html editor2 ），其實(shí)實(shí)現(xiàn)是獲取 value 然后再插入 HTML 文檔流中，而通過(guò)設(shè)置 style 標(biāo)簽的 display:block 樣式，操作的就是實(shí)際的樣式，不需要拐彎抹角。

寫了個(gè)簡(jiǎn)單的 demo 可以看下，確實(shí)是另一種思路。

所以說(shuō)，"文章中帶 demo" 所說(shuō)的文章實(shí)現(xiàn)，可能是 HTML 的，也可能是 markdown 的，具體如何，需要視情況而定了。

總結(jié)下：

如果是 markdown 寫的文章（如果需要涉及 inline 的 demo），最后肯定是要編譯成 HTML 預(yù)覽，思路類似 codedog

如果直接用 HTML 寫文章，類似 這個(gè))，那么我覺(jué)得復(fù)用性其實(shí)不是很高，畢竟交互方式是不一樣的（也可以沒(méi)有交互），這個(gè)時(shí)候（如果有交互），可以試試