了解CasperJS中的评估函数 [英] Understanding the evaluate function in CasperJS

问题描述

我想了解在哪种情况下我应该或必须使用evaluate函数.

I want to understand in which case I should or have to use the evaluate function.

我已经阅读了有关CasperJS evaluate函数的API文档，但是不确定在哪种情况下应该使用此函数. DOM上下文是什么意思?有人可以举个例子吗?

I have read the API doc about the evaluate function of CasperJS, but I'm unsure in which case I should use this function. And what does DOM context mean? Can somebody provide an example?

推荐答案

CasperJS文档很好地描述了 casper.evaluate() 的作用.

The CasperJS documentation has a pretty good description of what casper.evaluate() does.

概述:您传递了一个将在DOM上下文中执行的函数(也可以将其称为页面上下文).您可以将一些原语作为参数传递给此函数，然后返回一个原语.请记住，传递给evaluate的此函数必须是自包含的.它不能使用此函数之外定义的变量或函数.

To recap: You pass a function that will be executed in the DOM context (you can also call it the page context). You can pass some primitives as arguments to this function and return one primitive back. Keep in mind that this function that you pass to evaluate must be self contained. It cannot use variables or functions that are defined outside of this function.

CasperJS为日常任务提供了许多良好的功能，但是当您需要自定义功能来执行某些操作时，您可能会遇到这种情况. evaluate基本上可以做

CasperJS provides many good functions for everyday tasks, but you may run into a situation when you need a custom function to do something. evaluate is basically there to do

1. 从页面中获取一些值，以便在脚本中基于该值执行操作
2. 除了单击或填写表格外，还可以通过其他方式操作页面
3. 第1点和第2点的组合.

---

示例

您可能需要通用函数才能从复选框获取checked属性. CasperJS当前仅提供getElementAttribute函数，在这种情况下将无法使用.

---

Examples

You may need a generic function to get the checked property from a checkbox. CasperJS currently only provides getElementAttribute function which will not work in this case.

function getChecked(cssSelector){
    return document.querySelector(cssSelector).checked;
}

if (casper.evaluate(getChecked, selector)){
    // do something
} else {
    // do something else
}

在大多数情况下，它只是您要使用的内容的首选项.如果您有一个在每个li元素上均带有data-uid的用户列表，则至少有两种方法可以检索uid.

In most of the cases it is just preference of what you want to use. If you have a list of users with data-uid on each li element then you have at least 2 possibilities to retrieve the uids.

仅限Casper:

var uids = casper.getElementsAttribute('ul#user-list > li', 'data-uid');

Casper评估:

var uids = casper.evaluate(function(){
    return Array.prototype.map.call(document.querySelectorAll('ul#user-list > li'), function(li){ return li["data-uid"]});
});

关于操作，一切皆有可能，但要取决于您要执行的操作.假设您要截取网页的屏幕截图，但是有些元素您不想出现在屏幕上.或者，您可以将自己的CSS添加到文档中.

Regarding manipulation everything is possible but depends on what you want to do. Let's say you want to take screenshots of web pages, but there are some elements that you don't want to be there. Or you could add your own CSS to the document.

删除元素:

function removeSelector(cssSelector){
    var elements = document.querySelectorAll(cssSelector);
    Array.prototype.forEach.call(elements, function(el){
        el.parent.removeChild(el);
    });
}
casper.evaluate(removeSelector, '.ad'); // if it would be that easy :)

通过CSS更改网站外观:

function applyCSS(yourCss){
    var style = document.createElement("style");
    style.innerHTML = yourCss;
    document.head.appendChild(style);
}
casper.evaluate(applyCSS, 'body { background-color: black; }'); // non-sense

---

根

CasperJS建立在PhantomJS之上，因此继承了它的一些怪癖. page.evaluate() 的PhantomJS文档说:

---

Roots

CasperJS is built on top of PhantomJS and as such inherits some of its quirks. The PhantomJS documentation for page.evaluate() says this:

注意:evaluate函数的参数和返回值必须是一个简单的原始对象.经验法则:如果可以通过JSON序列化，那就很好.

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

封闭，功能，DOM节点等将不起作用！

Closures, functions, DOM nodes, etc. will not work!

这篇关于了解CasperJS中的评估函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！