零基础的 PhotoShop CEP 6 开发教程 「 6 」调用 JSX 并传递信息

《零基础的 PhotoShop CEP 6 开发教程》系列目录

「 0 」目录
「 1 」配置开发环境
「 2 」CEP 文件结构
「 3 」CEP 的运行机制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」调用 JSX 并传递信息
「 7 」UI - HTML 开发的一些细节
「 8 」API - 文件读写与二进制数据
「 9 」签名打包与 ZXPSignCmd
「 X 」CEP 更新到 6.1版了

---

前面在 「 3 」CEP 的运行机制 那一篇中说过了 CEP 扩展运行的 JavaScript 与宿主的 JSX （ExtendScript ）并不在一个虚拟机中，而对宿主应用（Photoshop）进行操作和获得信息大都需要使用 JSX （ExtendScript ），所以这里介绍的是如何在 CEP 的 JavaScript 中调用 JSX 并传递信息 。

执行 JSX （ExtendScript ）代码

在 CEP 的 JavaScript 中用 CSInterface 的 evalScript()方法就可以执行 JSX 代码：

var cs = new CSInterface();
cs.evalScript("app.documents.add();")

evalScript(script, callback)方法接受 2 个参数，第一个是要执行的 JSX 代码，第二个是接受执行返回值的回调函数。

值得注意的是执行 JSX 后的返回值只能通过回调函数获取，而这是一个异步过程，所以像下面这样的代码得到的结果可能和你想象的不同：

var cs = new CSInterface();
var layerName = "还不知道"
cs.evalScript("app.documents[0].layers[0].name;", function(result)
{
  layerName = result; // 设置 layerName 为第一个图层的图层名；
})
alert(layerName ); // 返回： "还不知道"

由于回调函数是异步的，运行到 cs.evalScript()这行时并不会等待执行完 JSX 代码，而是继续运行下面的代码（也就是 alert(layerName );），所以这时 layerName依旧是 "还不知道"而不是一般预想的执行 JSX 得到的图层名。真正执行回调函数得等到所有代码运行完毕之后了。不清楚 JavaScript 的异步机制的可以搜索相关内容，以后也会有专门的篇目说明异步函数。

执行 JSX 文件中的代码并传递信息

前面说过在 manifest.xml 文件中的 中定义了一个 JSX 文件：

./jsx/Source1.jsx

我们通常把 JSX 代码都写到这个文件中，再在 CEP JavaScript 中调用：

Source1.jsx

var dodo = function (info)
{
    alert("dodo:" + info);
}

test.js

    var cs = new CSInterface();
    var message= "来自 CEP 插件 ：" + cs.getExtensionID();
    cs.evalScript("dodo('"+message +"');")// 调用 Source1.jsx  中的 dodo() 函数

结果

这样我们就能从 CEP JavaScript 向 JSX 中传递信息了。

动态载入 JSX 文件

除了在 manifest.xml 指定的 JSX 文件，我们还可以动态的载入 JSX 文件：
**注意这是在 CEP JavaScript 中而非 JSX 中 **

    function loadJSX(fileName)
    {
        var extensionRoot = cs.getSystemPath(SystemPath.EXTENSION) + "/jsx/";// 这里是指插件目录下的 jsx 文件夹，可自行设为任意目录
        cs.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
    }

    loadJSX("oo.jsx");// 载入插件目录下 jsx\oo.jsx 文件

通过 JSON 传递对象

从 JSX 向 CEP JavaScript 传递对象除了使用上一篇说的事件，也可以使用 evalScript() 的回调还实现，同样也是先在 JSX 中把对象转换成 JSON 字符串，在返回字符串，最后在 CEP JavaScript 中把字符串还原成对象。
不过要注意的是 JSX 并不预置 JSON 对象，需要手动加载，你需要下载 json2.js 并放在你的你的插件目录中，并用上面动态载入 JSX 文件的方法载入它。

Source1.jsx

function getFontsJson()
{
    var fontlist = new Object(); // 创建一个要传递的对象

    //----这个例子是获得 PhotoShop 的可用字体列表
    fontlist.length = app.fonts.length; 
    fontlist.list = [{}];
    for (var i=0; i < app.fonts.length; i++)
    {
        fontlist.list[fontlist.list.length]=
        {
            name:app.fonts[i].name,
            style:app.fonts[i].style,
            typename:fonts[i].typename,
            postScriptName:fonts[i].postScriptName,
            family:fonts[i].family
        }
    }
   //---------
    return JSON.stringify(fontlist); // 把对象转化成 JSON 字符串并返回
}

test.js

 var cs = new CSInterface();

    function loadJSX(fileName)
    {
        var extensionRoot = cs.getSystemPath(SystemPath.EXTENSION) + "/jsx/";
        cs.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
    }

    loadJSX("json2.js"); //为 JAX 载入 JSON 库

    cs.evalScript('getFontsJson()',
        function (result)
        {
            var o = JSON.parse(result); //把 JSON 字符串转换为对象
            alert(o.list[0].name);  // 可以操作得到的对象了
        })

---