码良之笔——神奇的脚本
码良之笔——神奇的脚本
本文为“码良系统的使用及设计实现”系列文章的第四篇。可先看前面几篇介绍
star 破千
上个礼拜上海再次迎来了进口博览会,我们“被迫”调休加放假三天,假期归来,惊喜地发现码良star 数已经破1000大关,可喜可贺。
github代码:
上周我们赶在放假前将码良所有项目开源,包括 gods-pen-server
码良服务端、gods-pen-admin
码良管理后台以及于7月份就已经开源的 gods-pen
国内gitee镜像:
https://gitee.com/ymm-tech/gods-pen-admin 码良管理后台
https://gitee.com/ymm-tech/gods-pen-server 码良服务端代码
https://gitee.com/ymm-tech/gods-pen 码良核心编辑器和预览解析器
码良编辑器,至此,码良宣告完全开源。
同时我们推出了相应的工具 gods-pen-cli
来辅助您完成整个码良项目的运行和部署,具体细节请参考源码部署文档。
下面进入本篇文章的正文,码良脚本。
脚本是什么
市面上H5编辑器大多着力于给用户提供可视化的编辑体验,通过提供丰富的模板和海量的组件来满足用户多样化的功能需求,这确实是一个不错的方向,码良平台也具备类似的机制(虽然目前组件还不够多,模板也不够精美)。
但是,码良并不满足于此。
考虑如下场景,我们向某页面添加了10个按钮,点击这些按钮时需要分别记录点击时间、组件 id 并发送到服务端(即记录点击日志并提交)。将需求拆分一下:
- 由于按钮组件本身不具备点击日志记录和发送功能,需要扩展此功能;
- 需要为这一组按钮都添加这个同样的功能。
在有脚本功能之前,我们需要新开发一个具备上述能力的按钮组件。先不考虑开发组件的成本和所需的权限(码良平台任何用户都可以开发自己的组件,其他平台可是未必支持哦),这种方案能满足上述需求。但是,需求稍一变化,不止按钮,其他组件也需要这个功能呢,还得开发,实在麻烦。
码良的脚本机制便是为了解决此类问题提出的。
码良脚本具备以下几个基本特性:
- 脚本可以扩展组件功能。
- 脚本可以被复用。
- 脚本几乎具备完全的组件控制能力
在这样的能力加持下,其他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 开发基础,你就可以尽情发挥想象力与创造力,制作开发出富交互、重逻辑的页面。
码良之笔,值得拥有!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Firefox 15 周年
2004 年 11 月 9 日,Firefox 发布了首个版本,向垄断了整个浏览器市场的 IE 发起了挑战。从某种意义上它成功了,在 Firefox 诞生之初,IE 占据了九成以上的份额,到了 2009 年 Firefox 成功占据了三分之一的市场份额。 但随后由于 Google Chrome 的出现 Firefox 的份额开始萎缩,原因之一是 Chrome 确实性能更为出色,其它原因还有搜索巨头的实力要比非盈利的 Mozilla 强大得多,有足够的预算进行推广。 2016 年 Mozilla 宣布了 Quantum 计划,以致力于大幅改进浏览器性能。2017 年它发布了首个基于 Quantum 的版本,大受好评。 Firefox 源于 Netscape,1998 年 Netscape 宣布将在 Mozilla 名义下开源其代码,1999 年 AOL 收购了 Netscape。 Mozilla Firefox 最早的名字叫 Phoenix,意思就是从 Netscape 灰烬中涅槃而生。但 BIOS 开发商 Phoenix Technologies 当时有个运行在 BIOS 上的浏览器叫...
- 下一篇
做开源应知道的三个法律要点
权利:作者 詹毅,中国·上海 执业律师,华东政法大学兼职教授,微信ZhanyiAttorney,邮箱zy@koforder.com。 声明:传播本文时,请于文首呈现以上权利信息。 开源,以源代码开放的理念,具有显著的产业生态效应。例如,Google公司当年收购Android,以开源软件Linux为内核研发了智能手机操作系统,在Apache许可证项下发布该源代码,以开源方式运行至今,获得了巨大的商业成功。 开源的共享特质,以及市场成功案例,吸引了越来越多的企业参与到开源事业上来。由于开源是在独特的法律架构(即开源许可证)上运行的,涉及版权、专利等知识产权问题,并与合同法、社区协议交织,因而做开源碰到的法律问题,往往比较复杂、专业。为此,本文分析总结了三个常见的法律点,供企业做开源时参考。 1 代码“贡献”后仍然有版权 “贡献”(“Contribution”)是开源软件领域特有的法律概念。例如,我国首张开源许可证Mulan PSL v1第0条规定:“贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。再如,Apache 2.0[1]、MPL 2.0[2]等开源许可证也规定了...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS8安装Docker,最新的服务器搭配容器使用
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- 设置Eclipse缩进为4个空格,增强代码规范
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能