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

百度文库浏览器分析及实现 一、 引子 2003 年开始玩 Flash ，完了两年就戒掉了；长时间不用不完慢慢就生疏了。 最近应客户的需要，希望能在文档系统中实现类似百度文库的效果。考查一番， 咋看起来百度用的是 FlashPaper 技术，也看了看 FlexPaper ，在 GoogleCode 上还 看到了一个超大文件的示例，可惜链接打不开，无法去详细分析他们了。 在能看到的应用中，FlashPaper 、FlexPaper 都不能达到在互联网上动态加载 大文档的用户体验需求；唯独百度文库有这样的用户体验，因此就只能拿百度文 库开刀了，希望李彦宏同志不要见怪。 姑且拿《六十八个经典小故事》作为示例，该文档页数足够多，能够展示 动态加载的效果。 二、 百度文库浏览器原理分析步骤 1. 找到《六十八个经典小故事》对应的链接； 2. 清空 IE 缓存，在 IE 中浏览该页面； 3. 使用导航将文档浏览至最后； 4. 抓取 IE 缓存中的内容； 5. 材料已取好，分析开始。 三、 百度文库浏览器代码分析 一进来，刘姥姥进了大观园了，这个 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); 这个是用于预装载的动作，实现边查看边下载其他片