javascript - 使用 casper.evaluate 函数时的差异

Question

我正在使用 PhantomJS v2.0 和 CasperJS 1.1.0-beta3。我想查询页面 DOM 内的特定部分。

这里的代码不起作用:

function myfunc()
{
    return document.querySelector('span[style="color:#50aa50;"]').innerText;    
}
var del=this.evaluate(myfunc());

this.echo("value: " + del);

这里的代码确实有效:

var del=this.evaluate(function() 
{
   return document.querySelector('span[style="color:#50aa50;"]').innerText; 
});

this.echo("value: " + del);

看起来是一样的，但作用不同，我不明白。

这里的代码也确实有效:

function myfunc()
{
    return document.querySelector('span[style="color:#50aa50;"]').innerText;    
}
var del=this.evaluate(myfunc);

this.echo("value: " + del);

这里的区别是，我调用 myfunc 时不带“()”。

谁能解释一下原因吗？

Answer 1

问题是这样的:

var text = this.evaluate(myfunc());

JavaScript 中的函数是一等公民。您可以将它们传递给其他函数。但这不是你在这里所做的。您调用该函数并将结果传递给评估，但结果不是函数。

还有casper.evaluate()是页面上下文，只有页面上下文才能访问文档。当您调用该函数时(使用 () )基本上在执行 casper.evaluate() 之前，您错误地尝试访问该文档，但实际上这是不可能的。

与casper.evaluate(function(){...});的区别是定义匿名函数并将其传递到 evaluate()功能。

在某些情况下，应该调用函数而不是传递函数。例如，当柯里化(Currying)完成时，但这不适用于 casper.evaluate() ，因为它是沙盒的，并且最终在 casper.evaluate() 中运行的函数不能使用外部变量。它必须是独立的。所以下面的代码也将不起作用:

function myFunc2(a){
    return function(){
        // a is from outer scope so it will be inaccessible in `evaluate`
        return a;
    };
}
casper.echo(casper.evaluate(myFunc2("asd"))); // null

你应该使用

var text = this.evaluate(myfunc);

传递先前定义的函数以在页面上下文中运行。

使用 del 等保留关键字也不是一个好主意作为变量名称。