JShare 2.0 使用文档

修订时间:2016-08-28

JShare 是一个在线代码测试、托管、分享的工具,方便与别人一起调试、分享代码,具有代码高亮、一键代码格式化、贴心的快捷键等功能。

一、用户注册、登录

在未登录之前,您是无法进行代码保存、管理等操作的,您可以通过 登录 链接或者任意页面的右上角的 “登录 / 注册” 按钮来进行登录。

如果您还没有我们的账户,请通过 注册 链接注册用户(一处注册,简数科技旗下网站通用)。

如果您忘记了您的密码,可以通过访问 我们的网站 并点击 找回密码 按钮进行找回密码操作。

二、编辑器功能

您可以通过页面上方的导航 “创建新代码” 、直接访问 创建代码 页面或访问任意已经存在代码编辑页面进入编辑器页面。

编辑器共有三个大的功能分组:代码编辑区、代码信息及设置区、导航区

编辑器总览 图1 - 编辑器功能分区总览

  • 代码编辑区:包含 JavaScript、HTML、CSS 及运行结果窗口,用户编辑代码及查看运行效果,这些窗口是可以自由拖动大小及排列组合显示的;
  • 代码信息及设置区:包括设置代码的基本信息、所属分组、添加外部资源等设置功能,另外还有快捷键说明及相关信息;
  • 导航区:常用功能导航栏。最右侧是用户登录及用户管理中心,左侧的导航包含代码的一些常用操作,包括运行代码、保持代码、使用文档。对于已经保存的代码,还有创建分支、分享功能,如下图所示

创建分支及分享功能 图2 - 创建分支及分享功能

下面用具体的实例来说明编辑器是怎么使用的

三、创建并保存代码

3.1、编辑相关的代码

在不同的编辑器窗口里编写需要的代码,实例如下:

创建代码 图2 - 创建代码

3.2、选择或添加需要的外部资源(可选)

由于我创建的代码依赖外部资源(vuejs),所以我需要添加外部资源。

选择外部资源操作步骤 图3 - 选择外部资源操作步骤

操作步骤:点击“外部资源” => 点击“添加常用资源” => 选择需要的资源 => 确定

选择外部资源后可以看文件列表 图4 - 选择外部资源后可以看文件列表

3.3、运行

选择外部资源后,就可以运行查看效果了。

运行 图5 - 运行及运行结果

3.4、保存

代码运行正常后,我们可以将我们的代码保存到系统中。保存代码操作也很简单,请确保你已经完成了一下操作

  • 设置代码名字
  • 选择代码保存的分组(如果您还没有分组,请创建一个)

保存代码 图6 - 保存代码

如果您还没有创建分组,那么系统会提示您先创建分组再进行操作。

点击 “创建分组” => 填写必须的资料 => “确定”

创建分组操作 图7 - 保存代码

注意事项:
  • 分组名的最大长度是 20 个字符,可以重复;
  • 个性域名为 5 ~ 20 个字符,可以包含字母、数字、特殊字符 “.”、“-”、“_”,不能一特殊字符为开头;
  • 个性域名全局唯一,不可重复;
  • 普通用户最多可以创建 10 个分组。

至此,我们已经完成了代码创建、保存操作。操作完毕后,系统会生成代码唯一的编码及链接。

四、快捷键

为了方便用户操作,我们提供了一些常用的操作的快捷键功能。快捷键分为全局快捷和编辑器快捷键,全局快捷键是在全局下有效(非编辑状态),编辑器快捷键针对编辑器有效。

4.1、全局快捷键

  • Ctrl + Enter:运行当前代码
  • Ctrl + ←/→ :折叠左侧菜单栏

4.2、编辑器快捷键

  • Ctrl + Enter:运行当前代码
  • Tab:快捷生成 HTML、CSS 代码,详见 Emmet
  • Ctrl + L:选择当前行
  • F11:最大化当前编辑器窗口

除了上述常用快捷键以外,我们的编辑器其他快捷键同 Sublime 编辑器风格,支持的快捷键列表见 Codemirror Sublime bindings ;另外针对 HTML 及 CSS 代码,我们还支持 Emmet 特性快捷生成代码

4.3、Emmet

Emmet 是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发。

关于 Emmet 的具体使用详见 介绍官方文档

五、外部资源

外部资源指的是外部的 JavaScript、Css 库文件,在 JShare 中,有三种方式添加外部资源。

5.1、直接选择我们提供的常见的资源

对于 Highcharts 及其他常用的库,我们直接提供勾选的方式添加相关的库文件,这些文件都可以在我们的 CDN 服务 上找到。

所有常用外部资源 图8 - 所有常用外部资源

如果您还有其他资源的需求,可以告诉我们,我们会不定期添加。

5.2、输入链接添加

通过链接添加资源 图9 - 通过链接添加资源

5.3、写在 HTML 代码里

通过 HTML 标签添加外部资源 图10 - 通过 HTML 标签添加外部资源

通过 图8 和 图9 的方式添加的资源可以很方便的进行管理,包括调整顺序、删除操作等,如下图所示

资源管理 图11 - 资源管理

六、代码管理

代码管理包括代码创建、更新、创建分支、分享、锁定、删除等操作,这些操作有的只能在前台操作,有的则需要到后台管理页面操作。

6.1、前台管理(编辑器页面)

前台管理包括创建代码、更新、创建分支、分享操作,创建代码上面已经介绍过了,这里重点说明一下创建分支和分享功能。

6.1.1 创建分支

创建分支操作是将当前的代码保存成新的一份代码,作为当前代码的一个分支,方便记录代码的更新历史。

注意事项:

  • 创建分支只能对自己拥有权限的代码进行操作,否则就是普通的更新操作;
  • 对于锁定的代码,更新操作等同创建分支操作。
6.1.2 分享功能

分享功能可以方便的将托管在 JShare 的代码通过链接将编辑页面、结果页面分享给朋友、社区,或者将结果嵌入到您的页面中。下面是嵌入页面的一个例子

对应的代码是:

 <iframe width="100%" height="420" src="https://jshare.com.cn/highcharts/rKJPUg/share/" 
allowfullscreen="allowfullscreen" frameborder="0"></iframe>

可以通过我们的分享按钮来获得

资源管理 图12 - 分享功能

我们可以通过在链接中指定需要显示的代码窗口,规则是:

https://jshare.com.cn/{{group}}/{{code}}/[{{version}}]share/[{{tables}}]

{{tables}} 为可选参数,可以是由 “result”、“js”、“html”、“css” 中的一个或多个自由组和成字符串,多个之间用逗号分隔,默认是:“result”。实例:

  • https://jshare.com.cn/demos/hhhhx1/share/
  • https://jshare.com.cn/demos/hhhhx1/share/result,js,html,css
  • https://jshare.com.cn/demos/hhhhx1/share/js,html,css
  • https://jshare.com.cn/demos/hhhhx1/share/html,css,js,result
  • ......

6.1.2.1 纯净分享

通过 https://jshare.com.cn/{{group}}/{{code}}/[{{version}}]/share/pure 可以创建纯净的分享结果,即最终的运行结果不包含 ifram 的形式,该功能主要是针对代码调试时防止 iframe 对兼容性等的影响

实例:https://jshare.com.cn/highcharts/rKJPUg/share/pure

6.2、后台管理(管理页面)

后台管理可以查看您所有的创建的、管理的、参与的代码,同时可以对创建的或管理的代码进行锁定、修改基本信息、删除操作。

后台代码管理功能预览 图13 - 后台代码管理功能预览

6.2.1 锁定功能

代码被锁定后将无法在前台进行更新操作,更新操作将被执行创建分支操作。

七、分组管理

分组是用来存放不同的代码的,同时分组可以拥有多个成员,可以让朋友来一起管理、贡献代码。

7.1、分组管理

分组管理包括创建、修改、删除、默认分组等对分组进行基本的操作。

7.1.1 创建分组

创建分组可以在编辑器左侧的“创建分组”按钮来操作,也可以在后台进行添加创建分组操作。

7.1.2 默认分组

默认是默认的代码保存分组,每个用户只能设置一个默认分组。

7.2、组员管理

组员指的是添加朋友来一起管理或贡献代码,目前有两个可以添加的角色:管理员和组员。管理员可以协助管理分组,成员可以贡献代码。

分组组员管理 图14 - 分组组员管理

八、代码模板

为了方便用户更快捷的创建通用代码,我们提供了模板功能,将某一类代码的通用代码、资源提取出来,建立模板,方便后续的代码创建。

8.1 模板维护(创建、更新、删除等)

模板的创建可以通过 https://jshare.com.cn/template/new 页面来创建,支持添加 HTML,JavaScript、CSS代码,支持添加外部资源,同时支持将当前编辑器布局保存下来。另外通过后台你可以查看、维护你创建的模板

8.2 模板使用

模板可以在创建代码时使用,使用方式目前有两种:

1)、通过点击设置模板 里对应的模板即可

模板使用方法1 图15 - 模板使用方法1

2)、通过连接 https://jshare.com.cn/new/{template-name}

其中template-name 为模板名字,例如 highcharts,对应的链接是:https://jshare.com.cn/new/highcharts

九、POST API

Post API 是指通过 POST 方法提交 HTML、CSS、JS 等代码或参数来动态的创建代码,可以很方便的将现有代码进行动态预览,Post API 的使用方法如下:

1、引入必须的文件

<script src="https://jscdn.com.cn/hcode/jshare.js"></script>

2、调用goJShare 方法,例如

goJShare({
  js: 'console.log("I am from post api")'
})

3、参数说明

goJShare 函数接受一个对象作为参考,改对象里可以包含的数据有:

  • js:JS 代码
  • html:HTML 代码
  • css: CSS 代码
  • libs: 库文件,多个用逗号分开
  • template:模板名称
  • layout:布局id,0 ~ 8,分别对应编辑器布局中的下标
  • name:代码的名字
  • description:代码的描述信息

4、示例说明

1)指定 JS、HTML、CSS

goJShare({
    js: 'var container = document.getElementById("container"); container.innerHTML = "<p>I am from Post API !</p>"',
    html: '<div id="container"></div>',
    css: '#container {width: 500px;height: 400px;border: 1px solid #ccc;}'
})

2)指定模板

goJShare({
    js: `var app = new Vue({
        el: '#app',
        data: {
                products: [] // 产品列表
        },
        computed: {
                // 计算产品的总数
                totalProducts() {
                        return this.products.reduce((sum, product) => {
                                return sum + product.quantity;
                        }, 0);
                }   
        },
        created () {
                // 请求数据
                fetch('https://api.myjson.com/bins/74l63')
                        .then(response => response.json())
                        .then(json => {
                        this.products = json.products;
                });
        }
    });`,
    html: `<div id="app">
        <ul>
                <li v-for="p in products">
                        <input type="number" v-model.number="p.quantity"> {{p.name}}
                        <span v-if="p.quantity === 0"> - 无库存</span>
                        <button @click="p.quantity++">Add</button>
                </li>
        </ul>
        <p>Total: {{totalProducts}}</p>
    </div>`,
    css: `li {
        list-style: none;
        line-height: 2;
    }`,
    template: 'vue'
})