百度文库浏览器分析及实现.docVIP

百度文库浏览器分析及实现 引子 2003年开始玩Flash，完了两年就戒掉了；长时间不用不完慢慢就生疏了。最近应客户的需要，希望能在文档系统中实现类似百度文库的效果。考查一番，咋看起来百度用的是FlashPaper技术，也看了看FlexPaper，在GoogleCode上还看到了一个超大文件的示例，可惜链接打不开，无法去详细分析他们了。 在能看到的应用中，FlashPaper、FlexPaper都不能达到在互联网上动态加载大文档的用户体验需求；唯独百度文库有这样的用户体验，因此就只能拿百度文库开刀了，希望李彦宏同志不要见怪。 姑且拿《六十八个经典小故事》作为示例，该文档页数足够多，能够展示动态加载的效果。 百度文库浏览器原理分析步骤 找到《六十八个经典小故事》对应的链接； 清空IE缓存，在IE中浏览该页面； 使用导航将文档浏览至最后； 抓取IE缓存中的内容； 材料已取好，分析开始。 百度文库浏览器代码分析 一进来，刘姥姥进了大观园了，这个JavaScript脚本看得人脑袋那个大啊，这条路走起来挺艰难，换个思路吧；找个Flash反编译工具，反编译一下，取出来ActionScript，这个好歹还有个分行短句啊，总算还是个代码。 整理整理代码的层次结构，按照包组织一下，大致能确认应该在baidu这个文件夹吧；再看看，lib大致是用于json处理的；ui是用于用户自定义控件；iknow就应该是程序入口吧，按照一般程序要的思路先找一找main吧，果然还真有一个main类，有意思。 下面这几句代码大概就是与外部进行参数交换的吧： var _loc_2:* = _loc_1[docurl] || :8960/play; var _loc_3:* = _loc_1[docid] || c881e53a580216fc700afd05; var _loc_4:* = int(_loc_1[fpn]) || 2; var _loc_5:* = int(_loc_1[npn]) || 5; this._reader.fpn = _loc_4; this._reader.npn = _loc_5; this._reader.docURL = _loc_2.replace(/(\/)+$/, ) + / + _loc_3 + ?; 如此以来就可以查找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=1rn= + this._firstPagesNum; this._firstPagesNum = -1; } var binaryRequest:* = new URLRequest(tmpURL); binaryLoader.load(binaryRequest); 这就是Reader获取FlashPaper资源文件了； binaryLoader.addEventListener(ProgressEvent.PROGRESS, this.binaryLoading); binaryLoader.addEventListener(Event.COMPLETE, this.binaryLoadComplete); binaryLoader.addEventListener(IOErrorEvent.IO_ERROR, this.binaryLoadError); 这个就是定义的装载进度、装载完成、装载失败的几个事件响应了； this._delayPreLoadID = setInterval(this.preLoad, 1000, _loc_3); 这个是用于预装载的动作，实现边查看边下载其他片段的。 百度文库浏览器参数分析 根据以上代码片段就可以知道百度FlashPaper Reader的工作原理了，在初始化时根据JavaScript的参数装载FlashPaper片段，使用docurl指定路径（可以是相对路径，可以是绝对路径），使用docid指定文档的GUID，fpn指定文档起始序号，rn指定文档片段的页数；根据百度文档内部的定义应该是将文档以5页或者10页进行组织，所以fpn=5*X+1；rn=5||10。 百度文库浏览器外部调用分析 回过头在看客户端调用的JavaScript代码就有针对