之前寫了一篇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，代碼如下：

復制代碼 代碼如下:

（編輯：武林網）