分享幾個寫 demo 的思路

Fish發表於2019-02-16

好久沒有動筆，最近發現了一個新的寫 demo 的思路，非常有意思。仔細一想，自己彷彿積累了不少寫 demo 的思路和想法，總結一下，拋磚引玉。

本文所說 demo 主要分以下三種：

  • 本地 demo
  • 外鏈 demo
  • 文章中帶 demo

本地 demo

樓主在工作和學習中是比較喜歡寫 demo 的，丟擲問題非常直觀。

本地寫 demo，愛咋整就可以咋整，簡單到可以只有一個 HTML 檔案，複雜到引入 React / Vue 等框架類庫，視情況而定。對於樓主來說，多數情況下是一個 HTML 檔案就可以搞定的。最方便的情況下，直接新建個 HTML 檔案，然後起一個本地 server 即可，本地 server 可以用 Python、PHP 等起，對於前端來說，http-server 是個不錯的選擇，然後再配置個 alias，比如我在 .zshrc 中配置 alias s="http-server"，可以秒啟。如果是稍微複雜的情況，需要些許除錯，那麼修改後自動重新整理是必須的，我寫了一個簡單的腳手架 gulp-simple 可以滿足這個需求。但是我比較懶，覺得這樣還不太方便，畢竟需要編輯器和瀏覽器兩邊切換檢視效果（單屏的情況下），有時只是檢視一個簡單的 css 特性，這樣搞就顯得麻煩了，我又給自己開發了兩個簡單的線上編輯器，分別是 html editor1 以及 html editor2，方便除錯簡單的 html 頁面。

本地 demo 大概三個方式，總結下：

  • 本地新建 HTML 檔案，雙擊啟動或者本地啟 server
  • 使用 gulp-simple（需要簡單除錯的頁面）
  • 使用 html editor1 或者 html editor2 線上編輯以及除錯

外鏈 demo

你寫了個炫酷的頁面，希望分享給別人，如果把 HTML 檔案發給別人，顯然不是一個好的想法，最簡單的方式就是將檔案上傳到伺服器，傳送連結給別人，也正是接下去要說的外鏈 demo。

最方便的選擇是選擇第三方服務，類似 codepen 或者 jsfiddle，國內的 runjs 也做的不錯可以試試。（這些網站均有很多不錯的 demo，可以看看實現）

因為個人是重度 GitHub 使用者，自從知道 GitHub Pages 這玩意後，一般的外鏈 demo 都放在那了，所以 GitHub Pages 也不失為一個好的選擇。（點這裡 看我的全部 demo）

說到 GitHub Pages，其實 GitHub 中的 repo 中的靜態 HTML 頁面也是可以檢視效果的（歸根結底還是 GitHub Pages），通常用來生成專案主頁等。具體設定在具體 repo 的 Settings -> Options -> GitHub Pages 中，選擇分支（一般是 master branch 即可），點選 save 即可，比如我在 codedog 專案中生成的 demo。還有另一個方法，進入 GitHub & BitBucket HTML Preview 這個網站，生成靜態頁面連結，但是隻適用於只有一個 HTML 頁面的場景，如果有引用 css 的話路徑會錯誤。

另外，如果有自己的伺服器，那麼很顯然部署到自己的伺服器就可以了。

外鏈 demo 同樣大概三個方式，總結下：

文章中帶 demo

重點重點，這才是本文的重點！

有的時候寫文章，需要配個簡單的 demo，怎麼破？外鏈當然可以，但是沒有直接顯示在文章中顯得直觀。

首先， codepen / jsfiddle / runjs 應該都是支援 iframe 插入頁面的，但是我一般不這麼做，首先 iframe 載入可能會太慢影響體驗，其次依賴於第三方總覺得不安全，而且很多的第三方服務並不一定支援 iframe 的插入。

然後以前用新頁面開啟來檢視頁面效果，可以看下很久前寫的 這篇文章，核心和 html editor1 以及 html editor2 兩個線上編輯器的新頁面預覽的實現一致，即新建個視窗：

function runCode() {
  let code = editor.getValue()
  let handler = window.open('')
  handler.opener = null
  handler.document.write(code)
  handler.document.close()
}
複製程式碼

但是驚訝地發現在部落格園該方式已經失效！我猜測 window.open('') 被部落格園給過濾掉了，所以這個方案基本已經完蛋。以前在部落格園看到過頁面中直接顯示 css 效果的，我猜測實現應該是一樣，直接混入了 html 程式碼，自從接觸 markdown 後，我便完全拋棄了富文字編輯器，所以總覺得這樣的實現有點 "髒"，但是一直苦於沒有一個好的實現。

我理想中的狀態是，可以用 markdown 寫文章，但是文章中有些程式碼可以檢視 HTML 效果。最後，我開發了 codedog 這個工具，用 markdown 寫文章，自動生成 html 檔案，比如我前段時間在看 《CSS 揭祕》這本書，我用 markdown 做筆記，用 codedog 生成的 HTML 可以方便檢視 CSS 效果，而且支援線上編輯，簡直是爽，具體實現效果可以 點選這裡 檢視。

但是 codedog 這個工具是為了這個需求量身定做的，有一定的侷限性，有時候要實現文章中帶 demo 的效果，不得不在 markdown 和 HTML 中取捨，比如我之前為了學習 flex 寫的 這個 demo，是純 HTML 寫的，且存在一定的特殊性（不可複用）

最後就要說到文章開頭說的 “發現了一個新的寫 demo 的思路”，做到首尾呼應，是什麼呢？

通過設定 style 標籤的 display:block 樣式可以讓頁面的 style 標籤顯示出來，並且加上 contentEditable 屬性後可以讓樣式成為可編輯狀態，更改後的樣式效果也是實時更新呈現，這就給互動創造了新的可能。

之前的實現如果頁面有樣式，並且修改樣式直接預覽（類似 html editor1 或者 html editor2 ），其實實現是獲取 value 然後再插入 HTML 文件流中，而通過設定 style 標籤的 display:block 樣式，操作的就是實際的樣式，不需要拐彎抹角。

分享幾個寫 demo 的思路

<!DOCTYPE html>
<html>
 <body>
    <style style="display:block" contentEditable>
      body { color: blue }
    </style>
 </body>
</html>
複製程式碼

寫了個簡單的 demo 可以看下，確實是另一種思路。

所以說，"文章中帶 demo" 所說的 "文章" 實現，可能是 HTML 的，也可能是 markdown 的，具體如何，需要視情況而定了。

總結下：

  • 如果是 markdown 寫的文章（如果需要涉及 inline 的 demo），最後肯定是要編譯成 HTML 預覽，思路類似 codedog
  • 如果直接用 HTML 寫文章，類似 這個，那麼我覺得複用性其實不是很高，畢竟互動方式是不一樣的（也可以沒有互動），這個時候（如果有互動），可以試試 <style style="display:block" contentEditable> 這種方式。

總結

總結就不總結了，都在上面了，如果有補充，熱烈歡迎 ?

相關文章