W3C上面的运行代码按钮
文章内容的主要结构如下
- 我和W3C
- 代码的实时预览
- 实现原理
- 挑战编辑
- 总结
我和W3C
对于开发者尤其是急性子的开发者,有时候想要查找并验证某个前端属性的效果 必须要先自己写一个html,然后copy一堆七七八八的东西进去 才可以打开浏览器愉快的进行调试(当然现在有很多网站有实时预览的效果)。
7月份刚来公司 开始接触前端的时候 每天疯狂百度各种css,当然最常去的就是W3C,它给我影响最深的也就是按个可以实时运行的按钮,思广议的说,然后就想自己也搞一个可以类似的东西出来玩。偶尔在知乎上看到,这东西也可以自己DIY。而且这需求在前端也是非常 常见的。
代码的实时预览
在某些博客或者功能网站上面,都有‘运行’按钮,点击之后就会显示代码的效果,有些是开发者封装了大部分代码,然后暴露一些核心代码或者配置属性供游客DIY,我么这里只讨论js、css、html实现的简单前端效果预览。
网上流传的传统做法是,用iframe或者新建一个窗口出来做‘功能组件’ 接收并显示传如的代码,其中可能还会设计到H5的新特性postMessage。如果我们想实现一个简单的,只是显示固定的代码效果,不让用户进行编辑,就可以不用新建新窗口,可以直接在当前页面构建一个文档上下文,简单快捷。
实现原理
核心步