lanbos'blog

前端代码演示神器jsbin

之前在blog中嵌入代码都是使用markdown格式的代码嵌入功能,这样虽然很方便但是今天在技术blog上发现一种更利于展示前端代码demo的方式,就是类似于jsbin的在线编辑器。
打开jsbin官网,界面类似于


界面可以直观的看到html,js,css,控制台和输出视图。可以选择各板块是否显示。

插入js,css库

推荐手动找到相应库的cdn直接用标签在html板块中引入。点Add library直接添加不敢保证相关库的加载速度。

接口测试

可以用jsonp技术调用在线的接口来获取接口数据进行展示,当然只能是get请求,并且接口支持jsonp。

分享

编辑完代码后可以用快捷键cmd+s保存,然后点左上角的share弹出如下弹窗

即可以选择用链接分享给别人,或者用html代码嵌入到自己的网页中(其实就是iframe)展示。

和jsfiddle对比

jsfiddle也是很多人使用的在线编辑器。

  1. 和jsfiddle对比jsbin有自带的控制台,jsfiddle需要引https://getfirebug.com/firebug-lite.js库来模拟一个firebug控制台。
  2. jsbin分享没有暗色皮肤,可能在嵌入网站时会影响网站整体风格。
  3. jsbin代码片段的管理不如jsfiddle直观。
  4. 两者服务器应该都是在国外,但是jsbin加载速度更快一些,jsfiddle有时会被墙,jsbin有可可靠的cmd+s保存快捷键,防止代码编辑到一半丢失。
    总之jsfiddle在颜值上率胜一筹,jsbin更加实用一些。

    国内替代品

    国内的runjs算是比较著名,但是界面丑陋功能难用,唯一的优点就是加载速度快,而且感觉是很久没有更新维护过了,不推荐使用。
    ps: 还搜到了名字挺山寨的jsrun。。。