[关闭]
@babydragon 2016-07-26T05:31:34.000000Z 字数 8298 阅读 1148

knysa:异步等待风格PhantomJS脚本编程

未分类


要点

  • knysa允许异步等待风格的PhantomJS异步编程;
  • knysa减少对柯里化(curry)的需求;
  • knysa支持try/catch/finally流程块;
  • knysa对浏览器的AJAX调用有更好的支持;
  • knysa试程序流程更加自然;

PhantomJS是提供JavaScript API的可编程无头浏览器(无图形界面)。它非常适合页面自动化和测试。其JavaScript API非常优秀,提供了许多高级功能,但同时也陷入了JavaScript常常遇到的“回调地狱(callback hell)”,既深度嵌套的回调。

目前,已经有很多库和框架致力于解决这个问题。对于PhantomJS来说,CasperJS是其中一个流行的解决方案,但是它仅仅减轻了问题,并没有解决问题。knysa从另一方面优雅的解决了这个问题。与类似CasperJS,knysa允许开发者有顺序的编写步骤。不同于CasperJS,knysa不会添加大量的样板代码(如casper.then()等)。

更重要的是,knysa允许开发者使用诸如if/else/while/break/try/catch/finally等代码结构,更加自然的控制程序流程。

让我们使用一个示例来演示嵌套问题和knysa的理念。以下示例是一段CasperJS脚本,其流程是在Google上搜索关键字“CasperJS”,然后检查搜索结果页面上的每个链接到的页面是否包含关键字“CasperJS”:

上面的描述非常简单直接,但是CasperJS的嵌套语法使得代码看上去比较复杂。

  1. 1 var links = [];
  2. 2 var casper = require('casper').create();
  3. 3 function getLinks() {
  4. 4 var links = document.querySelectorAll('h3.r a');
  5. 5 return Array.prototype.map.call(links, function(e) {
  6. 6 return e.getAttribute('href');
  7. 7 });
  8. 8 }
  9. 9 casper.start('http://google.com/', function() {
  10. 10 // 通过google表单搜索“CasperJS”关键字
  11. 11 this.fill('form[action="/search"]', { q: 'CasperJS' }, true);
  12. 12 });
  13. 13 casper.then(function() {
  14. 14 // 聚合“CasperJS”关键字搜索结果
  15. 15 links = this.evaluate(getLinks);
  16. 16 for (var i = 0; i < links.length; i++) {
  17. 17 casper.thenOpen(links[i]);
  18. 18 casper.then(function() {
  19. 19 var isFound = this.evaluate(function() {
  20. 20 return document.querySelector('html').textContent.indexOf('CasperJS') >= 0;
  21. 21 });
  22. 22 console.log('CasperJS is found on ' + links[i] + ':' + isFound);
  23. 23 });
  24. 24 }
  25. 25 });
  26. 26 casper.run();

我们可以看到,第18行的casper.then()嵌套在13行的另外一个casper.then()函数中。这样的嵌套模糊了程序逻辑,使得程序流程混乱。脚本执行过程中,执行流程不是仅仅向前的,程序流程有3个混杂的阶段:

  1. 阶段1(第9、13、26行):通过使用casper.start()(第9行)和casper.then()(第13行)创建执行步骤(匿名函数)。这些步骤最后通过执行capser.run()(第26行)开始执行。
  2. 阶段2(第11、15、16、17、18行):随着步骤的执行,步骤中的代码(匿名行数)被执行。
  3. 阶段3(第19、20、21、22行):在原步骤列表中增加更多步骤,并且执行。

于是每个嵌套级别增加了一个执行阶段。

由于这些混杂的阶段,脚本中的每行代码和脚本执行顺序不再匹配。例如,13行在第11行前执行。这对于程序来说难以阅读和定位问题。另一个问题是难以增加“if/else”的判断逻辑或者处理任何异常。第三个问题是:第22行的links[i]总是会打印“undefined”!

这是为什么呢?

因为在阶段3的第22行之前时,变量“i”已经在阶段2中被修改成了links.length。为了修复这个问题,我们必须采取柯里化方式(10a/18b和22a行)。这里我们使用变量“link”来保存links[i]的值(第18a行),然后执行一个匿名函数来返回另一个匿名函数(第18b行):

  1. 18 casper.then(function() {
  2. 18a var link = links[i];
  3. 18b return function() {
  4. 19 var isFound = this.evaluate(function() {
  5. 20 return document.querySelector('html').textContent.indexOf('CasperJS') >= 0;
  6. 21 });
  7. 22 console.log('CasperJS is found on ' + link + ':' + isFound);
  8. 22a }
  9. 23 }());

我们可以看见,通过柯里化,“link”现在有了正确的值,但是柯里化增加了更多的嵌套代码。这太糟糕了,我们能够做的更好吗?

答案是肯定的。

事实上,通过knysa,我们可以做的更好:我们可以完全去除代码中的嵌套和柯里化,脚本将会更加干净和可读,同时程序执行流程也会更加自然。

以下是实现相同功能的knysa脚本(注意我们引入了隐式变量“kflow”和“kflow”上的函数,同时还有一些“knysa_”开头的函数,我们将在后面进行介绍):

嵌套代码和柯里化都消失了!现在,代码的执行顺序和脚本中的代码行想对应了。这个顺序也和上面描述的流程相同。整个代码流程中只有一个阶段,代码变得可读,问题定位也更方便。

  1. 1 var links = [];
  2. 2 var i, num, isFound;
  3. 3 function getLinks() {
  4. 4 var links = document.querySelectorAll('h3.r a');
  5. 5 return Array.prototype.map.call(links, function(e) {
  6. 6 return e.getAttribute('href');
  7. 7 });
  8. 8 }
  9. 9 kflow.knysa_open('http://google.com/');
  10. 10 kflow.knysa_fill('form[action="/search"]', { q: 'CasperJS' });
  11. 11 links = kflow.evaluate(getLinks);
  12. 12 i = -1;
  13. 13 while (++i < links.length) {
  14. 14 kflow.knysa_open(links[i]);
  15. 15 isFound = kflow.evaluate(function() {
  16. 16 return document.querySelector('html').textContent.indexOf('CasperJS') >= 0;
  17. 17 });
  18. 18 console.log('CasperJS is found on ' + links[i] + ':' + isFound);
  19. 19 }
  20. 20 phantom.exit();

这是什么魔法?魔法位于每个以“knysa_”为前缀的函数(位于第9、10和14行),这些函数都是异步(async)执行,knysa等待(await)当前异步调用结束,再继续执行下一行。

knysa将每个脚本作为流程,并且在执行时赋予其一个ID。流程对象可以通过隐式变量“kflow”暴露出来。流程ID可以通过kflow.getId()获取。

kflow提供了一些异步等待风格的浏览器导航行数,如knysa_open、knysa_fill、knysa_click和knysa_evaluate。对于新的网页,knysa_open、knysa_fill和knysa_click行数会等待他们加载结束:

  1. knysa_open(url):打开一个网页;
  2. knysa_click(selector):触发点击操作;
  3. knysa_fill(formSelector, values):填充和提交表单

knysa_evaluate(func, kflowId[, arg0, arg1, ...]):和PhantomJS的page.evaluate()函数相同,可以在浏览器端(沙盒中)执行包括AJAX调用在内的任意JavaScript。相比于PhantomJS的page.evaluate()函数,knysa_evaluate提升了对AJAX的支持。它挂起脚本执行。为了恢复执行,“回调函数”内部的代码(通常是AJAX调用的成功/失败回调)必须调用“window.callPhantom(data)”,其中“data.kflowId”需设置成“kflowId”。这里有一个来自opl.kns的示例:AJAX请求用于续借图书,脚本执行会在续借响应请求收到后恢复:

  1. oneRenewResult = kflow.knysa_evaluate(renew, kflow.getId(), ...);

其中沙盒中的函数“renew”有以下几行:

  1. 1 $.ajax({
  2. 2 dataType: 'json',
  3. 3 inline_messaging: 1,
  4. 4 url: form.attr("action"),
  5. 5 data: form.serialize(),
  6. 6 success: function(e) {
  7. 7 console.log("success: " + JSON.stringify(e));
  8. 8 window.callPhantom({kflowId : kflowId, status: 'success', data: e});
  9. 9 },
  10. 10 failure: function(e) {
  11. 11 console.log("failure: " + JSON.stringify(e));
  12. 12 window.callPhantom({kflowId : kflowId, status: 'failure', data: e});
  13. 13 }
  14. 14 });

脚本会再AJAX调用结束之后恢复。根据AJAX调用的结果,oneRenewResult将被设置为不同的值:

注意:传入window.callPhantom()函数的所有数据都将作为knysa_evaluate()的返回值。

kflow.sleep(milliseconds)是另一个异步等待函数,但是它被knysa特殊处理。

kflow同时也提供一些常规(非异步等待)函数。这些函数直接来自CasperJS API:

实现自己的异步等待风格函数

为了实现这个目的,只需要将函数名字加上“knysa_”前缀。这将告知knysa这是一个异步等待风格函数。当这样的函数调用时,脚本执行将会挂起。但是自己实现的异步等待风格函数需要通过调用kflow.resume(data)函数自行恢复脚本执行。当执行恢复时,传给kflow.resume函数的“data”参数将会变成异步等待函数的返回值。这里是一个来自resume.kns的示例:它首先休眠1秒,然后将输入值“num”乘以100并返回:

  1. 1 function knysa_f1(kflow, num) {
  2. 2 setTimeout(function() {
  3. 3 kflow.resume(num * 100);
  4. 4 }, 1000);
  5. 5 // return num + 10;
  6. 6 }

该函数的返回值是传递给kflow.resume()函数的参数,例如num * 100。

重要提示1:在类似异步等待函数中,常规返回值将被忽略。例如,即使第5行没有注释,“return num + 10”语句的结果也会被简单的丢弃。

重要提示2:异步等待风格函数的调用必须是一个单独的语句。可以是:

  1. knysa_my_func(...);
  2. 或者
  3. ret = knysa_my_func(...);

也可以作为对象函数使用:

  1. myObj.knysa_my_func(...);
  2. 或者
  3. ret = myObj.knysa_my_func(...);

下面的调用方式无法支持:

  1. if (knysa_my_func(...)) ...
  2. 可以改成这样:
  3. val = knysa_my_func(...);
  4. if (val) ...
  5. var1 = abc * knysa_my_func(...)
  6. 可以改成这样:
  7. val = knysa_my_func(...);
  8. var1 = abc * val;

这里是调用前面定义的knysa_f1函数的示例,其返回值会被赋值到一个变量:

  1. ret = knysa_f1(5);

当这行代码执行时,ret将在1秒延迟后被设置为500。

异常处理

knysa的异常处理机制出奇的简单:老式的try/catch/finally结构。这样的基础设施在CasperJS中是缺失的。示例:try.kns

catch”示例:以下代码在发生任何异常时渲染一张调试图片。

  1. var err; // 变量必须在开头定义
  2. ...
  3. try {
  4. ...
  5. } catch (err) {
  6. kflow.render(image_path);
  7. console.log(err.stack);
  8. }

“finally”示例:以下代码确保在发生异常时登出:

  1. // 填充并提交表单,登录网站
  2. kflow.knysa_fill(...);
  3. try {
  4. ...
  5. } finally {
  6. // 打开登出链接以登出
  7. kflow.knysa_open(logout_link);
  8. }

注意事项:

  1. “else if”语法不支持,请使用嵌套的“if/else”语句替代;
  2. “for”循环体不能有异步等待函数调用或者“break”语句,请使用“while”循环替代;
  3. 所有变量必须在开头定义,包括catch(err)语句中的“err”变量;
  4. 隐式变量“kflow”不能用于变量定义;

内部工作原理:

knysa脚本在执行前首先会被转换成JavaScript。转换后的脚本是很多步骤的流程,每个步骤一个函数。每个函数的名字被编码上流程控制信息:

下面是之前示例中去Google搜索的knysa脚本转换后的JavaScript脚本:

  1. var knysa = require("./knysa.js");
  2. function knycon_search_casperjs_10001() {
  3. var links = [];
  4. var i, num, isFound;
  5. function getLinks() {
  6. var links = document.querySelectorAll("h3.r a");
  7. return Array.prototype.map.call(links, function(e) {
  8. return e.getAttribute("href");
  9. });
  10. }
  11. this.n50002_async = function(kflow) {
  12. kflow.knysa_open("http://google.com/");
  13. }
  14. this.n50003_async = function(kflow) {
  15. kflow.knysa_fill('form[action="/search"]', {
  16. q: "CasperJS"
  17. });
  18. }
  19. this.n50004 = function(kflow) {
  20. links = kflow.evaluate(getLinks);
  21. i = -1;
  22. }
  23. this.n50005_while = function(kflow) {
  24. return ++i < links.length;
  25. };
  26. this.n50006_async = function(kflow) {
  27. kflow.knysa_open(links[i]);
  28. }
  29. this.n50007 = function(kflow) {
  30. isFound = kflow.evaluate(function() {
  31. return document.querySelector("html").textContent.indexOf("CasperJS") >= 0;
  32. });
  33. console.log("CasperJS is found on " + links[i] + ":" + isFound);
  34. }
  35. this.n50008_endwhile_n50005_while = function() {};
  36. this.n50009 = function(kflow) {
  37. phantom.exit();
  38. }
  39. }
  40. knysa.knysa_exec(new knycon_search_CasperJS_10001);

注意1:以上转换后的JavaScript只是为了展示当前的实现细节。knysa的实现可能改变。例如,将来的版本可能会使用Promises。当然,当PhantomJS完全支持ES6的generators或者ES7中的async/await,knysa可能就不再需要。

注意2:虽然knysa减少了通过使用回调来控制脚本执行顺序,knysa本身使用了PhantomJS的回调机制,例如page.onCallback()和page.onLoadFinished()。

实践时间

现在我们已经看见通过kynsa来操作PhantomJS是多么容易和自然,为什么不自己尝试呢?knysa托管在github。我们可以从示例开始。我(作者)也期待听到大家的反馈。由于knysa是新项目,还有很多提升空间,欢迎大家能够对项目做出贡献。贡献的方式有多种:

  1. 处理ticket
  2. 提供更多的示例脚本,不论大小;
  3. 或者更好的是,共享可以帮助处理日常零活的knysa脚本,这样可以帮助其他人节省时间,提高工作效率;

致谢

  1. uglifyjs1用于解析knysa脚本并生成响应javascript;
  2. 许多“kflow”函数直接从CasperJS提取;

关于作者

此处输入图片的描述
Bo Zou是一个经验丰富的软件开发者。他对于许多web自动化工具都有经验,包括Perl、HttpUnit、HtmlUnit、Watij等。最近他一直专注于PhantomJS和Android。

查看英文原文:https://www.infoq.com/articles/knysa-phantomjs-async-await

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注