分享幾個寫 demo 的思路99

時間 2019-11-09

標籤分享幾個 demo 思路简体版

原文原文鏈接

最近發現了一個新的寫 demo 的思路，仔細一想，本身彷彿積累了很多寫 demo 的思路和想法，總結一下，拋磚引玉。css

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

本地 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 頁面。git

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

本地新建 HTML 文件，雙擊啓動或者本地啓 server
使用 gulp-simple（須要簡單調試的頁面）
使用 html editor1 或者 html editor2 在線編輯以及調試

外鏈 demo

你寫了個炫酷的頁面，但願分享給別人，若是把 HTML 文件發給別人，顯然不是一個好的想法，最簡單的方式就是將文件上傳到服務器，發送連接給別人，也正是接下去要說的外鏈 demo。npm

最方便的選擇是選擇第三方服務，相似 codepen 或者 jsfiddle，國內的 runjs 也作的不錯能夠試試。（這些網站均有不少不錯的 demo，能夠看看實現）gulp

由於我的是重度 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 的話路徑會錯誤。服務器

另外，若是有本身的服務器，那麼很顯然部署到本身的服務器就能夠了。markdown

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

codepen / jsfiddle / runjs
GitHub Pages
本身的服務器

文章中帶 demo

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

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

我理想中的狀態是，能夠用 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 樣式，操做的就是實際的樣式，不須要拐彎抹角。

<!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> 這種方式。

總結

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。