好久没有动笔，最近发现了一个新的写 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 样式，操作的就是实际的样式，不需要拐弯抹角。

<!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> 这种方式。

总结

总结就不总结了，都在上面了，如果有补充，热烈欢迎

【干货】分享几个写 demo 的思路的更多相关文章

  1. 分享几个写 demo 的思路

    好久没有动笔,最近发现了一个新的写 demo 的思路,非常有意思.仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外 ...

  2. 【腾讯Bugly干货分享】那些年，我们一起写过的“单例模式”

    题记 度娘上对设计模式(Design pattern)的定义是:"一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结."它由著名的"四人帮",又称 ...

  3. 干货分享：MySQL之化险为夷的【钻石】抢购风暴【转载】

    转自: 干货分享:MySQL之化险为夷的[钻石]抢购风暴 - Vanos_韩尛哲 - 博客园http://www.cnblogs.com/Vanos-lcp/p/5642097.html 抢购钻石不稀 ...

  4. 逆向实用干货分享,Hook技术第一讲,之Hook Windows API

    逆向实用干货分享,Hook技术第一讲,之Hook Windows API 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) ...

  5. 纯干货分享！2020阿里java岗笔试面试题总结（附答案）

    前言 2020金九银十马上结束,现为大家整理了这次金九银十面试阿里的面试题总结,都是我从朋友那拿到的面试真题,话不多说,满满的干货分享给大家! int a=10是原子操作吗? 是的.  注意点: i+ ...

  6. 干货分享：SQLSERVER使用裸设备

    干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...

  7. 【干货分享】Node.js 中文资料导航

    这篇文章与大家分享一批高质量的的 Node.js 中文资料.Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用 Node ...

  8. 分享一个c#写的开源分布式消息队列equeue

    分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...

  9. 32位汇编第四讲,干货分享,汇编注入的实现,以及快速定位调用API的数量(OD查看)

    32位汇编第四讲,干货分享,汇编注入的实现,以及快速定位调用API的数量(OD查看) 昨天,大家可能都看了代码了,不知道昨天有没有在汇编代码的基础上,实现注入计算器. 如果没有,今天则会讲解,不过建议 ...

随机推荐

  1. 两款主流项目管理软件PK，哪个更好用？

    两款主流项目管理软件PK,哪个更好用? 一.产品介绍 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领 ...

  2. JavaSe: String的编译期优化

    Java的编译期优化 因为工作的原因,经常会在没有源码的情况下,对一些产品的代码进行阅读.有时在解决Bug时,在运行环境下会直接去看class文件的字节码,来确定运行中版本是否正确的. 在看字节码时, ...

  3. MyBatis 批量操作、集合遍历-foreach

    在使用mybatis操作数据库时,经常会使用到批量插入.IN条件查询的情况,这时就难免要使用到foreach元素.下面一段话摘自mybatis官网: foreach 元素的功能是非常强大的,它允许你指 ...

  4. 阿里云服务器（windows server2008）下安装SVN----杜恩德

    我想说的是如何在阿里云上建立SVN版本,供外网访问,上传代码 在阿里云服务器上安装svn与在本地安装是一样的, ----参考 http://blog.csdn.net/m0_37027631/arti ...

  5. Fragment多重嵌套实现电影，影院展示页

    转载请标明出处: http://www.cnblogs.com/dingxiansen/p/8135888.html 本文出自:丁先森-博客园 公司以前的app是用H5封的,由于一个模块效果用H5实现 ...

  6. 高性能管线式HTTP请求（实践·原理·实现）

      该篇实际是介绍pipe管线的原理,下面主要通过其高性能的测试实践,解析背后数据流量及原理.最后附带一个简单的实现     实践 先直接看对比测试方法 对于单一客户端对服务器进行http请求,一般我 ...

  7. python 动态加载类对象

    第一步 加载模块 module  =__import__("modulename",fromlist=['']) 第二部 加载类对象 cls = getattr(module, & ...

  8. bzoj 4819: [Sdoi2017]新生舞会

    Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会 买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间 ...

  9. bzoj 4196: [Noi2015]软件包管理器

    Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...

  10. bzoj 1196: [HNOI2006]公路修建问题

    Description OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发不久,所以那里的交通情况还是很糟糕.所以,OIER Association组织 ...