javascript - 如何将变量从一个 javascript 文件传递​​到另一个 helpers.js 文件

Question

我正在尝试将 css 选择器从一个 javascript 文件传递​​到另一个 helpers.js 文件，特别是在 casper.js 脚本中。

我的 script.js 文件是...

var titleSelector = {
    value: '[itemprop="title"]'
};


var processPage = function () {

    this.wait(2000, function () {

    titles = this.evaluate(helpers.getTitles);
    utils.dump(titles);

我的 helpers.js 文件是

var helpers = {
    getTitles: function () {
        var tt = document.querySelectorAll(titleSelector.value);
        return [].map.call(tt, function (t) {
            return t.innerText;
        });

    }
}

如果我在 helpers.js 文件中对“[itemprop="title"]”进行硬编码以代替 titleSelector.value，则该函数有效，但我不知道如何从 script.js 传递它。

任何人都可以建议我如何实现这一目标。任何帮助表示赞赏。提前谢谢你。

Answer 1

给getTitles 添加一个参数，这样你就可以传入选择器，然后是bind变量 (titleSelector) 作为函数的第一个参数。这是更老式的解决方案。

// in script.js
titles = this.evaluate(helpers.getTitles.bind(null, titleSelector));

// in helper.js
var helpers = {
    getTitles: function (titleSelector) {
        var tt = document.querySelectorAll(titleSelector.value);
        return [].map.call(tt, function (t) {
            return t.innerText;
        });
    }
}

另一种方法是 curry getTitles 函数，因此它获取一个参数并返回一个函数来完成实际工作。在上面的示例中，Function.prototype.bind() 本质上是在为我们做这件事。

// in script.js
titles = this.evaluate(helpers.getTitles(titleSelector));

// in helper.js
var helpers = {
    getTitles: function (titleSelector) { return function() {
        var tt = document.querySelectorAll(titleSelector.value);
        return [].map.call(tt, function (t) {
            return t.innerText;
        });
    }}
}

这是一个使用柯里化(Currying)的略微修改的工作示例:

<div itemprop="title">MY TITLE</div>
<div itemprop="title">ANOTHER TITLE</div>


<script>
  var helpers = {
    getTitles: ts => () => {
      var tt = document.querySelectorAll(ts.value);
      return [].map.call(tt, function(t) {
        return t.innerText;
      });

    }
  }
</script>

<script>
  var titleSelector = {
    value: '[itemprop="title"]'
  };

  // Mocking utils
  const utils = {
    dump: x => console.log("DUMP", x)
  }


  const container = {
    wait: (_, cb) => cb(), // Pretend to sleep
    evaluate: cb => cb(), // Evaluates the cb
    processPage: function() {
      this.wait(2000, () => {
        titles = this.evaluate(helpers.getTitles(titleSelector));
        utils.dump(titles);
      })
    }
  }

  container.processPage()
</script>