码良之笔——神奇的脚本

时间 2019-11-15

标签神奇脚本繁體版

原文原文链接

码良之笔——神奇的脚本

本文为“码良系统的使用及设计实现”系列文章的第四篇。可先看前面几篇介绍html

star 破千

上个礼拜上海再次迎来了进口博览会，咱们“被迫”调休加放假三天，假期归来，惊喜地发现码良star 数已经破1000大关，可喜可贺。vue

上周咱们赶在放假前将码良全部项目开源，包括 gods-pen-server 码良服务端、gods-pen-admin 码良管理后台以及于7月份就已经开源的 gods-pen 码良编辑器，至此，码良宣告彻底开源。git

同时咱们推出了相应的工具 gods-pen-cli 来辅助您完成整个码良项目的运行和部署，具体细节请参考源码部署文档。github

下面进入本篇文章的正文，码良脚本。api

脚本是什么

市面上H5编辑器大多着力于给用户提供可视化的编辑体验，经过提供丰富的模板和海量的组件来知足用户多样化的功能需求，这确实是一个不错的方向，码良平台也具有相似的机制（虽然目前组件还不够多，模板也不够精美）。并发

可是，码良并不知足于此。编辑器

考虑以下场景，咱们向某页面添加了10个按钮，点击这些按钮时须要分别记录点击时间、组件 id 并发送到服务端（即记录点击日志并提交）。将需求拆分一下：工具

因为按钮组件自己不具有点击日志记录和发送功能，须要扩展此功能；
须要为这一组按钮都添加这个一样的功能。

在有脚本功能以前，咱们须要新开发一个具有上述能力的按钮组件。先不考虑开发组件的成本和所需的权限（码良平台任何用户均可以开发本身的组件，其余平台但是未必支持哦），这种方案能知足上述需求。可是，需求稍一变化，不止按钮，其余组件也须要这个功能呢，还得开发，实在麻烦。this

码良的脚本机制即是为了解决此类问题提出的。设计

码良脚本具有如下几个基本特性：

脚本能够扩展组件功能。
脚本能够被复用。
脚本几乎具有彻底的组件控制能力

在这样的能力加持下，其余H5编辑器平台很差实现的富交互、重逻辑页面，通通能够搞定。

不够直观？有图为证

编写脚本，点击组件 alert 出当前时间和组件 id

上传脚本，给其余组件添加此脚本

脚本开发

return {
  mounted: function () {
    console.log('hello world')
  }
}

以上几行代码就实现了一个超级简单的脚本！使用了此脚本的组件会在其 mounted 生命周期打印出 hello world。

因此，如上所示，脚本就是一个 Vue 配置对象(option object)。是的，就是这么简单！

除原生 Vue 配置属性外，你能够为组件添加自定义属性、自定义方法。

自定义属性

首先，咱们先以 vue 语法为组件添加一个属性 who ，在该组件mounted 生命周期内会 alert “hello xxx”。

return {
  props: {
    who: String,
  }, 
  mounted: function () {
    window.alert('hello ' + this.who)
  }
}

编辑器如何识别这个属性并提供合适的输入控件呢，继续修改上面的脚本

return {
  props: {
    who: {
      type: String,
      default: 'world', // 默认值
      editor: {
        type: 'input', // 需提供一个文本输入框
        label: '谁啊', // 在编辑器中该字段实际展现的名字
        desc: '就是谁啊', // 字段描述信息，帮助理解字段的意义，hover 展现
      }
    }
  }, 
  mounted: function () {
    window.alert('hello ' + this.who)
  }
}

将以上脚本添加给某组件，属性配置面版多处一个 who 属性配置

能够看到，咱们在 vue 属性配置对象上添加了 editor 字段，editor.label 和 editor.desc 使 who 属性在编辑器中更友好的展现，editor.type 指定了编辑器应该为该属性提供何种输入控件，更多的editor.type输入类型请参考文档。

自定义方法

自定义方法经常使用于处理回调，响应事件等。

好比组件有一个属性为 successCall，表明某个操做成功的回调方法，其 editor.type 为 function。

为组件添加自定义方法后，就能够在组件 successCall 属性配置面板里选取这个方法。

return {
  editorMethods: {                 // 配置 自定义方法 在组件配置面板如何展现
    workLate: {                    // 方法名，对应于 `methods` 内的某方法
      label: '打卡下班',            // 自定义方法显示名
      params: [                    // 参数列表，能够在编辑器输入  
        {                
          label: '打卡时间',        // 参数1的名称
          desc: '按时下班，请勿逗留', // 参数1的描述，可选
          type: 'string',          // 参数1的类型，支持`string|number|boolean|array|object`
          default: '02:00'         // 参数1默认值
        },
        // 参数2 参数3 ...
      ]
    }
  },
  methods:{
    workLate (ts){
      // do something
    }
  }
}

将以上脚本添加给某组件，并将 workLate 方法传给点击操做

与普通 vue 组件相比，也只是添加了editorMethods 配置而已。

获取组件实例

this.$parent.getComponent(anotherComponentId)

设置组件显示隐藏

var $com = this.$parent.getComponent(id)
$com.visible = true // false

更多的组件实例的通用方法和属性请参考文档

一个简单的复杂例子

再次搬出以前作过的简陋版智障聊天机器人（对话 api 来自https://www.ownthink.com/robot.html）

使用按钮、列表、文本等组件绘制出页面结构

为发送按钮添加脚本，编写处理逻辑

点击观看视频教程

总之

脚本的核心实际就是一个普通的 Vue 配置对象（option object），再加上对属性（props）和方法（methods）的描述，辅以一些码良组件的基本通用方法和属性。只要你拥有一些 vue 开发基础，你就能够尽情发挥想象力与创造力，制做开发出富交互、重逻辑的页面。

码良之笔，值得拥有！

例行求体验，例行求 star。