预览加载中,请您耐心等待几秒...
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10
亲,该文档总共55页,到这已经超出免费预览范围,如果喜欢就直接下载吧~
如果您无法下载资料,请参考说明:
1、部分资料下载需要金币,请确保您的账户上有足够的金币
2、已购买过的文档,再次下载不重复扣费
3、资料包下载后请先用软件解压,在使用对应软件打开
浏览器分析及实现(完整版)实用资料(可以直接使用,可编辑完整版实用资料,欢迎下载)百度文库浏览器分析及实现引子2003年开始玩Flash,完了两年就戒掉了;长时间不用不完慢慢就生疏了。最近应客户的需要,希望能在文档系统中实现类似百度文库的效果。考查一番,咋看起来百度用的是FlashPaper技术,也看了看FlexPaper,在GoogleCode上还看到了一个超大文件的示例,可惜链接打不开,无法去详细分析他们了。在能看到的应用中,FlashPaper、FlexPaper都不能达到在互联网上动态加载大文档的用户体验需求;唯独百度文库有这样的用户体验,因此就只能拿百度文库开刀了,希望李彦宏同志不要见怪。姑且拿《六十八个经典小故事》作为示例,该文档页数足够多,能够展示动态加载的效果。百度文库浏览器原理分析步骤找到《六十八个经典小故事》对应的链接;清空IE缓存,在IE中浏览该页面;使用导航将文档浏览至最后;抓取IE缓存中的内容;材料已取好,分析开始。百度文库浏览器代码分析一进来,刘姥姥进了大观园了,这个JavaScript脚本看得人脑袋那个大啊,这条路走起来挺艰难,换个思路吧;找个Flash反编译工具,反编译一下,取出来ActionScript,这个好歹还有个分行短句啊,总算还是个代码。整理整理代码的层次结构,按照包组织一下,大致能确认应该在baidu这个文件夹吧;再看看,lib大致是用于json处理的;ui是用于用户自定义控件;iknow就应该是程序入口吧,按照一般程序要的思路先找一找main吧,果然还真有一个main类,有意思。下面这几句代码大概就是与外部进行参数交换的吧:var_loc_3:*=_loc_1["docid"]||"c881e53a580216fc700afd05";var_loc_4:*=int(_loc_1["fpn"])||2;var_loc_5:*=int(_loc_1["npn"])||5;如此以来就可以查找docurl、docid、fpn、npn这几个参数了,在JavaScript或者json中应该有体现的。在看一看Reader类,再看看DocViewer类大致就知道了百度的FlashPaper的Reader的原理了。if(this._firstPagesNum==-1){tmpURL=this._docURL+"pn="+(this._pagesLoaded+1)+"&rn="+this._normalPageNum;}else{tmpURL=this._docURL+"pn=1&rn="+this._firstPagesNum;this._firstPagesNum=-1;}varbinaryRequest:*=newURLRequest(tmpURL);binaryLoader.load(binaryRequest);这就是Reader获取FlashPaper资源文件了;binaryLoader.addEventListener(ProgressEvent.PROGRESS,this.binaryLoading);binaryLoader.addEventListener(EventPLETE,this.binaryLoadComplete);binaryLoader.addEventListener(IOErrorEvent.IO_ERROR,this.binaryLoadError);这个就是定义的装载进度、装载完成、装载失败的几个事件响应了;this._delayPreLoadID=setInterval(this.preLoad,1000,_loc_3);这个是用于预装载的动作,实现边查看边下载其他片段的。百度文库浏览器参数分析根据以上代码片段就可以知道百度FlashPaperReader的工作原理了,在初始化时根据JavaScript的参数装载FlashPaper片段,使用docurl指定路径(可以是相对路径,可以是绝对路径),使用docid指定文档的GUID,fpn指定文档起始序号,rn指定文档片段的页数;根据百度文档内部的定义应该是将文档以5页或者10页进行组织,所以fpn=5*X+1;rn=5||10。百度文库浏览器外部调用分析回过头在看客户端调用的JavaScript代码就有针对性了,不用头大了;先看一看html页的代码吧,打开“9daa5522aaea998fcc220e73.html”页面,看一看里面的代码,看看有不有对应的参数,您别说还真就有,不管咋说吧,代码有点阅读困难,好在只定位于使用这段代码,咱改改参数用用,其他的就不深入研究了。functionReader(){fun