javascript - 如何将对象从 Javascript (Adobe CEP) 传递给 Adob​​e ExtendScript？

Question

我正在使用 Adobe CEP (它允许开发人员为 Adob​​e CC 产品创建窗口扩展)。我的大部分代码是现代 JavaScript(该平台使用 Chromium 57、Node.js 7.7.4)。 但是，为了访问 DOM，我需要在 Adob​​e 中编写一些函数 ExtendScript并从普通的 JS 执行它们。唯一的方法是使用他们提供的 csInterface.evalScript(script, callback) 执行脚本。 script 必须是一个字符串，在我的例子中是一个转换为字符串的函数调用。 我希望能够通过 evalScript 将对象传入和传出 ExtendScript，但 evalScript 只接受并返回一个字符串。

目前，我将每个对象属性作为其自己的参数传递。这很笨重，但很管用。

虽然我的第一个是 JSON.stringify()，但不幸的是 ExtendScript 是 ECMAScript 3 的一种方言，这意味着不支持JSON.parse().

我不能只将对象参数连接到脚本函数调用中，因为这样字符串的计算结果为 foo([object Object])。

我见过像 eval()/uneval() 或 Object.toSource() 这样的函数，但那些不是由 Chromium 支持。

这是一个示例，类似于我当前的方法:

functions.js (ES3/ExtendScript)

function drawCircle(x, y, name) {
    // pick a layer
    var layer = app.activeDocument.layers[0];

    var diameter = 10;
    var top = y + diameter / 2;
    var left = x - diameter / 2;

    // draw ellipse in layer
    var circle = layer.pathItems.ellipse(top, left, diameter, diameter);

    circle.name = name;
    circle.filled = true;

    return true;
}

app.js (ES6)

const csInterface = new CSInterface();    // provided by Adobe
async function circle() {
    const dataObject = {x: 10, y: 10, name: 'Hello world!'};

    // the script to call
    // evaluates to drawCircle(10,10,'Hello world!');
    const script = "drawCircle(" + dataObject.x + "," + dataObject.y + ",'" + dataObject.name + "');";

    return new Promise((resolve, reject) => {
        csInterface.evalScript(script, (result) => {
            resolve(result);
        });
    });
}

正如预期的那样，circle() 调用了 drawCircle()，我正在处理的文档中出现了一个椭圆。但是，通过连接执行脚本/调用函数感觉很错误。所以总而言之，

1. 我想要一些(简洁的)方法将 dataObject 转换为字符串并通过 evalScript() 将其传递给 drawCircle()，
2. 我想从 drawCircle() 返回 dataObject 并将其作为对象接收回来。目前，返回一个对象只会导致 [object Object]" 作为返回值。

Answer 1

Javascript -> ExtendScript

将对象从 Javascript 传递到 ExtendScript 的唯一方法是使用 JSON.stringify() 将其作为 JSON 字符串发送。

是的，关于不支持 JSON.parse() 的说法是正确的，但是，您不需要。

您仍然可以发送字符串化对象，并将作为 对象 到达 ExtendScript。

const dataObject = {x: 10, y: 10, name: 'Hello world!'};
const script = "drawCircle(" + JSON.stringify(dataObject) + ")";

然后在 ExtendScript 中，您可以通过执行以下操作来解决问题:

function drawCircle(obj) {
  var layer = app.activeDocument.layers[0];

  var radius = 10;
  var top = obj.y + 5;
  var left = obj.x - 5;

  var circle = layer.pathItems.ellipse(top, left, radius, radius);

  circle.name = obj.name;
  circle.filled = true;

  return true;
}

ExtendScript -> Javascript

您将需要这个 ExtendScript 模块，将其复制到与您的 jsx 相同的文件夹中

Link to Indiscripts ExtendScript JSON module

然后将其包含在 #include 'json.jsx';(或 //@include 'json.jsx' 以避免 linter 错误)在你的顶部jsx。这将添加一个 JSON 全局函数，该函数提供两种方法:JSON.eval() 和 JSON.lave()。

我们需要的方法是 lave()，它允许您将对象字符串化回 Javascript。将其视为更友好的 JSON.stringify() 版本。

function drawCircle(obj) {
  var layer = app.activeDocument.layers[0];

  var radius = 10;
  var top = obj.y + 5;
  var left = obj.x - 5;

  // draw ellipse in layer
  var circle = layer.pathItems.ellipse(top, left, radius, radius);

  circle.name = obj.name;
  circle.filled = true;

  return JSON.lave(circle);
}

然后在 javascript 中你可以再次解析为一个对象:

const dataObject = {x: 10, y: 10, name: 'Hello world!'};
const script = "drawCircle(" + JSON.stringify(dataObject) + ")";

csInterface.evalScript(script, (result) => {
  console.log(JSON.parse(result));
});

我在最新的 CEP 运行时版本 (v9) 中对此进行了测试。