flex与js通信与彼此之间的互调整理(二)

之前写了一篇flex和js之间的通信，还记得最开始研究这两门语言如何交互，一晃我的任务也快做完了，公司的realspace产品之开了js的API，但是现在使用flex产品的人也比较多，要求开设flex的三维API，已经过去几个月了，产品也上线了，有兴趣的可以在https://github.com/SuperMap/Flex-Realspace下载，这是一个利用as与js交互放在了一个完整的产品里。

网上也有很多关于flex和js通信的文章，不过不知道大家有没有注意到好像都需要把js文件放在固定的文件下（flex调用js），并且需要在index.template.html文件里面动手脚，而且你把源代码考给团队的其他人，发现flash builder导进去后重新生成了index.template.html，又得自己修改一下，不是很麻烦吗？如果你是需要此技术做自己的产品的话我建议你一定要看一下我想出的办法，也许会帮了不少人哦！

一个大项目或者产品，在js代码里面估计都会有很多用原型建的类，在flex端估计也有很多功能。我们的假设场景是你正在使用flex制作项目，不过有一些功能只能通过js来实现，所以你将部分功能使用js封装成了一些js的文件，希望通过as与js之间的通信来使用as语言调用js里面的功能。js文件基本已经写好了，但是因为需要在不少地方懂手脚团队协作起来不方便，我这篇文章就是用来解决这个问题的。

一、设计好代码

首先我们需要明白的是：js文件在启动之后被加载到html页面里面，我们可以通过ExternalInterface.call("js的方法",参数);在flex端调用js端的方法，我们可以通过ExternalInterface.addCallback("对外公开的方法名",具体实现的方法);来解决在js端调用flex端的方法。

现在我们需要思考：js里面有很多功能，我们每次调用js功能都得去调用相关的方法吗？那样as和js之间的耦合不是太高了，不符合设计模式，并且很麻烦。同样js这边需要回调（常用在事件回调上）flex的方法时，方法很多，我们是不是也要在flex端动态注册那么多个方法名称呢？那样不怕名称冲突吗？所以这样的实现都是不可取的。

为了达到低耦合，我将as和js之间的通信设定为只有两座桥，as调用js功能永远只会通过调用js里面的固定方法，js回调flex的功能也只能调用在程序初始化flex端动态创建的唯一的一个方法。这样as和js之间的通信永远只通过这两个方法来交互，就不会出现之前的很多问题。但是大家肯定想问如何知道我这一次调用的功能和我下一次调用的有什么区别怎么办？那就是在参数上面做手脚了。说白了就是通过参数来判断你的行为。

在我们flex realspace产品面as调用js的功能都是通过var result:Object=ExternalInterface.call("SuperMap.Web.Util.ApplicationManager.initBridgeFlexToJs",object);这一局来的，SuperMap.Web.Util.ApplicationManager.initBridgeFlexToJs是在js端的一个文件里面的方法，唯一的as访问js的通道，特殊的是object，这是一个键值对，形如：

复制代码 代码如下:

var realArgument:Array=[strServerUrl.toString()+"$String"];
var array:Object={
action:"FUNCTION",
key:this.KEY,
functionName:"checkPluginUpdate",
isReturn:true,
realArgument:realArgument
};

其实这些有点类似json，用来传递数据的，而我自定义的一个格式是用来传递行为操作的，这个你们可以自己定义，反正核心就是通过参数来判断你的行为，方法永远调用同一个，这点明白了就是自己设计上的事情，不过在解析的时候有点麻烦哈！

二、打包js代码

如果你的代码符合我这样的逻辑，交互通过两座桥来通信，那么我们就开始下一步，其实这样设计后已经可以使得自己的产品交互起来很方便了，我当时花了一个月就是这么做的，都做的差不多了，上面交代说js代码不能开放出来，而且每次都需要修改index.template.html文件，太麻烦，希望flex端的开放人员完全看不到js的任何东西，要求需要把js文件打包成为swc文件，通过去调用swc文件里面的js来实现功能，我当时一听这简直就是不可能的嘛！不过后来研究了好久，发现这样可以实现，并且还有它的优势。

首先我们需要知道如何把js文件打包成为swc文件，新建一个库项目，将你的js文件都放进去，如下图：

我建的项目叫bridge，里面有我所有的js文件，还有不少as文件，细心的发现每一个js文件旁边都有一个...Stream.as文件，这里就是重点了，我们如何才能把js文件打包到swc里面呢，flex提供了一种流的方式，例如上面的ApplicationManager.js文件，我们创建一个类ApplicationManagerStream继承于flash.utils.ByteArray，代码如下：

复制代码 代码如下:

package SuperMap.Js
{
import flash.utils.ByteArray;
/**
* 制定js文件以及打包方式
*/
[Embed(source="ApplicationManager.js", mimeType="application/octet-stream")]
public class ApplicationManagerStream extends ByteArray
{
public function ApplicationManagerStream()
{
super();
}
}
}

里面会自动生成好打包好的swc文件

现在问题又来了，里面是二进制的东西，我们如何使用啊，不是我们平时写的as类，写了什么方法引用这个包直接使用就行。

所以我们还需要一个as类。这里我创建IncludeStream.as，代码如下：

复制代码 代码如下:

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!