https://jsplayground.taobao.org/
什么是 JSPlayground
JSPlayground 是一个面向技术项目和个人开发者的代码演示服务。 您可以使用 github 账号进行登录,管理您的片段。 当前版本的 JSPlayground 已经很好的支持了 Weex。如果您在开发 Weex 项目,这里将会为您提供很多参考示例与便捷的调试环境。 目前已有多个开源项目在使用 JSPlayground 作为其文档示例的展示服务。如果您想让自己的静态文档有更丰富的效果,JSPlayground 也会为您带来惊喜。
我们目前支持 React Rax Vue 和通用原生 JS 片段
如何使用
1、创建片段
- 创建 React 片段 https://jsplayground.taobao.org/reactplayground
- 创建 Rax 片段 https://jsplayground.taobao.org/raxplayground
- 创建 Vue 片段 https://jsplayground.taobao.org/vueplayground
- 创建通用 JS 片段 https://jsplayground.taobao.org/jsplayground
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 学习的整套配套学习示例
- Rax 组件学习 demo https://jsplayground.taobao.org/album?name=RaxComponent
- Rax 全局 API 学习 demo https://jsplayground.taobao.org/album?name=RaxFrameworkApi
当然也可以托管您的一些创意和想法,比如我想写个好玩的给别人看
- 一个简单的小游戏示例 https://jsplayground.taobao.org/raxplayground/89200504-2320-40f2-ba20-f306edae95f2
- 一个很酷的头盔 https://jsplayground.taobao.org/vueplayground/ddfe181a-1d89-4af0-8690-36df5f2ba804
面向一个技术产品
下面这个例子是一个 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