柔性和js之间的通信以及它们之间的互调安排(2)

之前写过一篇关于flex和js之间的交流的文章，但是我还记得一开始是怎么研究这两种语言之间的交互的，很快我的任务就差不多完成了。公司的realspace产品开通了js API，但是现在使用flex产品的人多了，需要开通flex 3D 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语言通过as和js之间的通信来调用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端动态创建的唯一方法。这样的话，as和js之间的沟通永远只会通过这两种方法进行交互，不会出现之前的很多问题。但是你一定想问怎么知道我这次调用的函数和我下次调用的函数有什么区别。那就是篡改参数。说白了，你可以通过参数来判断你的行为。as在我们的flex realspace产品平面中调用js的功能是通过varresult : object=externalinterface . call(' SuperMap . web . util . application manager . initbridgeflextojs '，object)；从这个局，超级地图。web . util . application manager . initbridgeflextojs是js端文件中的一个方法。as访问js(尤其是对象)的唯一通道是键值对，它看起来像：复制代码如下： var REAL argument 3360 array=[strserverul . tostring()' $ string '。var array : object={ action : ' FUNCTION '，key:this。KEY，function name : ' checkPluginUpdate '，isReturn:true，real argument : real argument }；上面的数组就是我所说的对象，其中的action :‘FUNCTION’表示我需要调用一个方法。被调用对象的键是这样的。KEY，方法的名称是checkPluginUpdate，它有一个返回值。该方法的参数是realArgument(一个特殊的数组)。

其实这些和json有点类似，JSON是用来传输数据的，而我定义的一种格式是用来传输行为操作的，你可以自己定义。反正核心是通过参数判断你的行为，方法总是调用同一个。这个理解为我自己设计的问题，但是解析的时候有点麻烦！第二，打包js代码。如果你的代码符合我的逻辑，并且通过两个桥进行通信，那么我们将开始下一步。其实经过这样的设计，已经让我们的产品之间的交互变得非常方便了。当时我花了一个月的时间做这个，几乎什么都做了。上面解释过js代码打不开，每次修改index.template.html文件太麻烦。希望flex的openers根本看不到js的任何东西，需要把js文件打包成swc文件，通过在swc文件中调用js来实现功能。当时我根本不可能听到！但是，经过长时间的学习，我发现这是可以实现的，也有它的优点。首先，我们需要知道如何将js文件打包成swc文件，创建一个新的库项目，并将所有的js文件放入其中，如下所示：。

我构建的项目叫做bridge，它包含了我所有的js文件和许多as文件。我仔细发现有一个.每个js文件旁边的Stream.as文件。这是重点。如何将js文件打包成swc？flex提供了一个流方法，比如上面的ApplicationManager.js文件。我们创建了一个继承自flash.utils.ByteArray的ApplicationManagerStream类，代码如下：复制代码如下： Package SuperMap . js { Import flash . utils . bytearray；/* * *开发js文件和打包方法*/[embed(source=' application manager . js '，mime type=' application/octet-stream ')]公共类ApplicationManagerStream扩展了ByteArray { public function ApplicationManagerStream(){ super()；}}}编写自己对应的js文件，一定要和这个类放在同一个文件夹里，用打包的类型application/octet-stream，每个js文件配置一个对应的as类，这样在。

里面会自动生成好打包好的swc文件现在问题又来了，里面是二进制的东西，我们如何使用啊，不是我们平时写的如同类，写了什么方法引用这个包直接使用就行。所以我们还需要一个如同类。这里我创建包括一个团队，代码如下：复制代码代码如下：打包SuperMap {导入SuperMap .Js。ApplicationManagerStream导入SuperMap .Js。哈希表流导入SuperMap .Js。场景视频流导入SuperMap.lib_Ajax .IServerJava6RStream导入SuperMap.lib_Ajax .JsStream导入SuperMap.lib_Ajax .MicrosoftAjaxStream导入SuperMap.lib_Realspace .RealspaceStream/** *此类主要用于以字符串形式获取二进制形式的射流研究…代码*/公共类包含流{/* * *构造函数*/public函数包含stream(){ }/* * *返回射流研究…文件里面代码的字符串形式*/public function toString(): string { var microsoftajax stream : microsoftajax stream=new microsoftajax stream()；var JsStream : JsStream=new JsStream()；var iserver java6 rstream : iserver java6 rstream=new iserver java6 rstream()；var real spacestream : real spacestream=new real spacestream()；var HashTableStream : HashTableStream=new HashTableStream()；var ApplicationManagerStream : ApplicationManagerStream=new ApplicationManagerStream()；var scenediv stream :s cendv stream=new scenediv stream()；返回MicroSoft TagAsStream。ToString()JSStream。ToString()iserverJava6 rstream。ToString()realSpaceStream。ToString()HashTableStream。ToString()applicationManagerStream。ToString()SceneDivstream。ToString()；} } }有了这个类，我们可以通过实例化一个此对象，然后通过方法toString()获取到字符串形式的射流研究…的所有代码。这又是一个问题，我们还是不能使用，没法调用。不过先这样打包好，引用到你的弯曲项目里面再说。三、调用射流研究…文件首先我们要知道如同调用射流研究…的方法只能调用射流研究…形式的方法，也就是嵌入到了超文本标记语言页面的js，而现在我们只有字符串形式的射流研究…源代码，所以需要想办法将它转化为标准的射流研究…代码，嵌入到超文本标记语言页面里面。在你的弯曲项目启动的最开始的地方恰如如下代码：复制代码代码如下：//初始化一个字符串形式的方法解析字符串，用于将字符串转换为射流研究…语言var str : string=' function parsestringTojs(str){ var Ohead=document。getelementsbytagname(' HEAD ').项目(0);'；str=' var Oscript=document。createElement(\ ' script \ ')；'；str=' Oscript。语言=\ ' JavaScript \'；str=' Oscript。type=\ ' text/JAVAScript \ '；'；str=' oScript.id=\ ' test \str=' oScript.defer=truestr=' oScript.text=strstr=' Ohead。append child(Oscript)；}';//调用window.eval方法ExternalInterface.call('eval '，str)；var包括流：包括流=新包括流()；//获取射流研究…的字符串形式的源代码var stre :字符串=包含流。tostring()；//使用正则表达式修改字符串var char : RegExp=/\ \/g；strey=strey.replace(char，' \ \ \ \ ')；//生成射流研究…的API ExternalinTerface。call(' ParseStringTojs '，strey)；//初始化射流研究…调用如同的入口方法initBridgeJsToFlex，最终饭方法的实现转给方法应用程序管理器。initBridgeJsToFlex externalinterface。add callback(' initBridgeJsToFlex '，应用程序管理器。initBridgeJsToFlex)；注释已经写的很清楚了，不过正则表达式这一步可以不要，我这里是因为我的代码里出现了反斜杠的东西，所以我这样是为了转义一下，这里的思路就是先使用ExternalInterface.call去调用窗户对象的方法评价评价在窗户下创建一个将字符串转化为射流研究…代码的方法解析字符串，然后再调用此方法将我们的字符串的源代码进行转化，这样超文本标记语言中就存在射流研究…的代码了，就不用再去修改index.template.html文件添加引用和添加入口了。

另外，在其他地方，可以通过ExternalInterface.call直接调用js公开的桥，通过application manager . initbridgejstoflex接收js的回调函数，这样我们只需要添加swc包就可以使用js的函数。其实我也不想用eval。eval非常消耗性能。我的源代码大概8万。还好没看到卡片，所以只知道这个方法。别用砖头打我！有其他办法的朋友告诉我！希望能帮助到一些人！