再谈多多猫插件开发

13 1月

今天找漫画的时候又想到多多猫了,之前用过一下,当时写插件还是用的记事本在xml中直接编写js,那个体验很差,而且代码测试也很复杂。

今天又需要插件了,自然想换点花样来做,首先考虑的就是使用构建工具来处理大部分问题。这里用的是Gulp。

模板替换和文件生成

我们的目标文件只有一个,那就是index.sited.xml。而这个文件又分了两个部分,首先是xml的声明,包含了一些插件信息,其次是我们的js代码。

首先做的是将这两者分开,分别创建index.xml和index.js文件。

这个文件使用了ejs语法,等会儿我们用ejs模板引擎来生成最终文件

这里面的三个方法名称和xml中的对应。

然后准备一份config.js文件来保存插件信息

然后在gulp配置中添加gulp-ejs

js文件我是压缩了一下再放进去,如果压缩影响了你的代码功能,你可以考虑把压缩取消掉。

这样当我们运行npm build的时候就能生成目标文件了。

开发服务器

当目标文件生成好了,我们就需要把它放到app中测试一下,这里本地搭建一个简单的文件服务器,然后通过扫描二维码直接将文件弄到手机上。

还是在gulp中,我们使用gulp-serve和qrcode-terminal,另外需要internal-ip来获取一个对外可用的IP地址。调试用的手机和电脑要在一个网络中。

为了方便起见,当我们修改了js代码以后,最好能够自动刷新,这里用gulp-watch监控文件变动。

现在运行npm run watch

拿出app扫描二维码就可以快速运行我们的新插件了。

自动化测试

多多猫插件写的时候还有一个问题就是调试很麻烦,有时候错了需要仔细脑补一下,虽然可以看日志,但是有时候日志并不能帮上多大忙。

除了开发中的问题外,还有一个问题就是插件完成后可能会失效(原因各种各样),有时候并不能第一时间知道问题,需要一个有效的机制来控制,尽可能早的知道问题。

这里就需要引入单元测试和集成测试了。

单元测试用在开发中,方便快速获得反馈,避免不停的在app上调试。集成测试会和目标网站实际通讯,以便快速验证插件是否还有效。

先来看看单元测试,首先随便抓几个网页下来,保持在项目中,测试的时候直接用这些数据就行。我这里用的mocha

原则上讲只要这几个测试通过,那么基本功能就没有大问题。测试中的???请替换成自己真实需要的数据。

这里面最关键的就是eval(fs.readFileSync(‘./src/index.js’) + ”);

因为我们的index.js并没有exports出任何东西,只是单纯写了三个方法,所以只有通过eval把方法放到上下文中。

集成测试就是真实请求目标网站,然后判断每个步骤都有返回且不为空。

这个是一层层嵌套的,回调可以用别的库简化一下,但是这里整体比较简单,真的没有必要。

最后配置一下自己的CI服务,我用的bitbucket

运行效果如下

发表评论

电子邮件地址不会被公开。