JSPlayground 一款支持 Weex Rax 与 React 的在线代码编辑服务

#1

https://jsplayground.taobao.org/

什么是 JSPlayground

JSPlayground 是一个面向技术项目和个人开发者的代码演示服务。 您可以使用 github 账号进行登录,管理您的片段。 当前版本的 JSPlayground 已经很好的支持了 Weex。如果您在开发 Weex 项目,这里将会为您提供很多参考示例与便捷的调试环境。 目前已有多个开源项目在使用 JSPlayground 作为其文档示例的展示服务。如果您想让自己的静态文档有更丰富的效果,JSPlayground 也会为您带来惊喜。

我们目前支持 React Rax Vue 和通用原生 JS 片段

如何使用

1、创建片段

2、预览片段

创建好的片段如下图,您可以分享给你项目的其他成员,演示代码,或者用于重现

示例 https://jsplayground.taobao.org/raxplayground/cd74b5c5-629d-4fd8-832d-2505788fb5f3

创建好的片段地址加参数 style=mini ,您可以看到更加精简的片段界面(精简的界面更能方便您嵌入自己的技术文档,让文档与代码示例相结合,同时也支持样式的自定义)

示例 https://jsplayground.taobao.org/raxplayground/45beb641-7180-45c8-830c-b901f483b71b?style=mini

应用场景

面向个人开发者

如果您是个人开发者,jsplayground 会为您提供一些案例参考

例如 Rax 学习的整套配套学习示例

当然也可以托管您的一些创意和想法,比如我想写个好玩的给别人看

面向一个技术产品

下面这个例子是一个 Weex 上层的体验相关开源项目,该项目的官网示例采用 JSPlayground 提供 demo 服务。如果您也在搭建自己的项目站点,JSPlayground 可以帮您省掉演示 demo 能力的工作 :)

地址 https://alibaba.github.io/bindingx/playground

接下来的例子是 Rax 的官网文档,将例子直接嵌入文档,是不是很酷。

地址 https://alibaba.github.io/rax/component/text

JSPlayground 还提供了聚合您的片段的能力,您写的某一类 demo 放在一起,让你更方便的查看和梳理

示例 https://jsplayground.taobao.org/album?name=Vue

小结

以上介绍的这些是这个项目 1.0 的部分能力,JSPlayground 是一个 Rax 体系衍生出来的工具,希望能给看官老爷面们提供一些便利。如果您有一些建议和诉求,欢迎在这里联系我们 https://github.com/taobaofed/jsplayground/issues

1 Like