flex 客户端缓存 module swf(转)

flex 客户端缓存 module swf(转)
2010年11月11日
　　flex或者flash客户端的缓存，并不是指浏览器的缓存，浏览器的缓存在一定时间后会过期，先作此声明。
　　使用flex或者flash开发出来的网站最大的问题就是swf文件过大，国内网速有限，导致加载时间过长，这样会丢失很多潜在的客户。
　　flex使用RSL技术，可以解决框架的缓存与共享，很大程度的解决了加载问题。但是如果项目过大，还是会导致加载时间很长这个问题。我使用了SharedObject进行客户端的SWF与Module的缓存，并进行版本控制。在服务器端做一个配置文件，客户端若有缓存过数据，则进行版本控制，达到客户端数据与服务器端数据保持一样。
　　例子:
　　假设现在有个Application的项目，生成的Application.swf文件是2028K，客户端的下载速度是100k/s，则差不多需要使用20秒的时间。现在将Application中的部分源码抽出来，使用Module机制，变成Application.swf 428K，Module1.swf 1000K，Module2.swf 600K。不使用缓存的话，完整的加载完Application还是需要差不多20秒时间，若使用缓存，将Module1.swf与Module2.swf缓存在客户端，则只需要加载Application.swf的428K，差不多4秒时间，加上Moduel的读取2秒时间，最多也就6-7秒时间。效率很明显。而且还可以缓存其他的乱七八糟的东西，例如皮肤.swf，图片资源.swf等等.如果有跳转页面的话，还可以将Application.swf也进行缓存。
　　问题：
　　如果遇到客户端不允许缓存，则跳过缓存，无碍程序的加载和运行。
　　如果一个用户，多次的打开本网站，说明对本网站有了一定的兴趣，在多次被询问是否允许缓存后，点击允许的可能性也加 大。
　　当用户能够清楚的了解到缓存的好处时，允许缓存，一.可以加速用户体验，二.可以降低服务器压力，三.可以降低服务器带宽的使用。
　　文章最后有一个Demo供下载测试使用，源代码暂时打包成SWC，未开放出来。
　　下面将解释一下如何使用WarmC.swc：
　　配置文件’Cache_config.xml’
　　
　　*当然，配置文件的路径，和名字可以由你任取，但需要在版本控制时指定路径，下面将介绍如何启动版本控制
　　*id属性，标记这个缓存的名字，将会在全局使用，包括缓存的SharedObject名称，以及版本控制,下面读取缓存时将会使用到这个id
　　*version版本控制，随你起名称。但是为了确保不会与以前的版本混淆，推荐最好还是使用递增的版本名称
　　首先必须在缓存的使用之前先启动版本控制，需要导入以下包：
　　import WarmC.Cache.LocationDataProxy;
　　然后启动版本控制：
　　LocationDataProxy.getInstance().CacheReBuild(0.5);
　　CacheReBuild(size:int,configUrl:String)方法使用说明:
　　* size参数,指定缓存的总大小，单位为兆（M），不填则默认为1M即运行到这个地方时，就会判断客户端的SharedObject 允许缓存大小，再提示用户修改缓存最大值设置如果你需要缓存的数据较大，则可对应取下面的值
　　size
　　
　　 ，虽然是有点烦人，但嫌麻烦，多数人不会在意那几M的空间，而点了允许）
　　* false，不管用户是否拒绝，每次需要增大缓存区大小时，都会提示用户
　　* 不使用该方法，默认为true。所以这个方法很少用到。
　　确保版本控制启动成功后，可以进行module加载，先导入以下包：
　　import WarmC.Cache.ModuleCacheProxy;
　　加载module
　　ModuleCacheProxy.getInstance().load("moduleOne","ModuleOne.swf",onProgress,onReady);function onProgress(bytesLoaded:uint,bytesTotal:uint):void{ trace(">加载ModuleOne:"+bytesLoaded+"/"+bytesTotal);}function onReady(data:Object):void{ trace(">ModuleOne 加载完成!"); Application.application.addChild(data as UIComponent);}
　　* load(name:String,url:String,onProgress:Function,onReady:Function)说明:
　　* name,指的是Module在配置文件Cache_config文件中的ID，此处必须与配置文件一致。用于版本控制，以及
　　客户端的缓存文件名，通过name获取SharedObject
　　* url,指的是Module的Swf文件路径，Demo的Module文件均在根目录，所以直接指定名称
　　* onProgress,指加载Module时的进度回调方法，传回两个参数，bytesLoaded与bytesTotal，若需要显示进度条，则这个方法是必备的。如果缓存不存在，则bytesLoaded与bytesTotal会是从服务器端加载数据的值；
　　如果缓存已经存在，则该方法只调用一次，而且两个回传参数均是100
　　* onReady,指加载完成后的回调方法，传回一个UIComponent类型的参数data
　　* 代理器使用了饿汉单例模式，检测module是否已经缓存在客户端。
　　* 如果已经缓存在客户端，则直接读取
　　* 否则，从服务器端加载，显示，再缓存到客户端，打上版本。
　　加载SWF（非module），需导入以下包：
　　import WarmC.Cache.SwfCacheProxy;
　　加载SWF:
　　SwfCacheProxy.getInstance().load("mySwf","test.swf",onProgress,onReady);function onProgress(bytesLoaded:uint,bytesTotal:uint):void{ trace(">加载SWF:"+bytesLoaded+"/"+bytesTotal);}function onReady(data:Object):void{ trace(">SWF 加载完成!"); var load:Loader = new Loader() load.loadBytes( data as ByteArray ); var uic:UIComponent=new UIComponent(); uic.addChild(load); Application.application.addChild(uic);}
　　* load(name:String,url:String,onProgress:Function,onReady:Function)说明:
　　*属性作用与ModuleCacheProxy一样
　　*唯一不同点，onReady方法的回传参数为一个ByteArray，需要自己进行包装目前使用起来就是这样。你可以使用SwfCacheProxy来缓存皮肤Style.swf，游戏插件，图片资源等等Swf数据。
　　在例子中，有个“加载Module 2”:
　　private function loadModule2():void{ ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady); ModuleCacheProxy.getInstance().load("moduleTwo","ModuleTwo.swf",onProgress,onReady); function onProgress(bytesLoaded:uint,bytesTotal:uint):void{ trace(">加载ModuleTwo:"+bytesLoaded+"/"+bytesTotal); } function onReady(data:Object):void{ trace(">ModuleTwo 加载完成!");        Application.application.addChild(data as UIComponent); }}
　　细心点，你就会发现，moduleTwo.swf使用ModuleCacheProxy加载了两次。嗯，这是为了演示一下，如果在一个swf还未加载完毕，再将他加载一遍，就会被拒绝。如果你想一次性将一个SWF加载多次（也可以说Copy多个Swf），将会遭到拒绝，你可以一个一个慢慢加载，在onReady方法里面加载。或者根本可以不用使用加载，直接使用复制，如何复制，自己去google啦。
　　这样可以避免一点，加载缓存时很卡。 
　　
　　
　　另外，做人得厚道点。别什么东西都往人家C盘上面塞。 
　　
　　
　　罗嗦了这么多，看Demo吧。flex 客户端缓存 module swf 如果发现什么Bug的话，欢迎留言…
　　转载请注明: 出自 FlexHome
　　原文链接:http://flex.desizen.com/flex-client-cache/