1、百度文库浏览器分析及实现一、 引子2003 年开始玩 Flash，完了两年就戒掉了；长时间不用不完慢慢就生疏了。最近应客户的需要，希望能在文档系统中实现类似百度文库的效果。考查一番，咋看起来百度用的是 FlashPaper 技术，也看了看 FlexPaper，在 GoogleCode 上还看到了一个超大文件的示例，可惜链接打不开，无法去详细分析他们了。在能看到的应用中，FlashPaper、FlexPaper 都不能达到在互联网上动态加载大文档的用户体验需求；唯独百度文库有这样的用户体验，因此就只能拿百度文库开刀了，希望李彦宏同志不要见怪。姑且拿六十八个经典小故事作为示例，该文档页数足够多，能
2、够展示动态加载的效果。二、 百度文库浏览器原理分析步骤1. 找到六十八个经典小故事对应的链接；2. 清空 IE 缓存，在 IE 中浏览该页面；3. 使用导航将文档浏览至最后；4. 抓取 IE 缓存中的内容；5. 材料已取好，分析开始。三、 百度文库浏览器代码分析一进来，刘姥姥进了大观园了，这个 JavaScript 脚本看得人脑袋那个大啊，这条路走起来挺艰难，换个思路吧；找个 Flash 反编译工具，反编译一下，取出来 ActionScript，这个好歹还有个分行短句啊，总算还是个代码。整理整理代码的层次结构，按照包组织一下，大致能确认应该在 baidu 这个文件夹吧；再看看，lib 大致是用
3、于 json 处理的；ui 是用于用户自定义控件；iknow 就应该是程序入口吧，按照一般程序要的思路先找一找 main 吧，果然还真有一个 main 类，有意思。下面这几句代码大概就是与外部进行参数交换的吧：var _loc_2:* = _loc_1“docurl“ | “http:/jx-iknow-: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.
4、_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 +
5、“pn=“ + (this._pagesLoaded + 1) + “elsetmpURL = this._docURL + “pn=1this._firstPagesNum = -1;var binaryRequest:* = new URLRequest(tmpURL);binaryLoader.load(binaryRequest);这就是 Reader 获取 FlashPaper 资源文件了；binaryLoader.addEventListener(ProgressEvent.PROGRESS, this.binaryLoading);binaryLoader.addEventLis
6、tener(Event.COMPLETE, this.binaryLoadComplete);binaryLoader.addEventListener(IOErrorEvent.IO_ERROR, this.binaryLoadError);这个就是定义的装载进度、装载完成、装载失败的几个事件响应了；this._delayPreLoadID = setInterval(this.preLoad, 1000, _loc_3);这个是用于预装载的动作，实现边查看边下载其他片段的。四、 百度文库浏览器参数分析根据以上代码片段就可以知道百度 FlashPaper Reader 的工作原理了，在初始化
7、时根据 JavaScript 的参数装载 FlashPaper 片段，使用 docurl 指定路径（可以是相对路径，可以是绝对路径） ，使用 docid 指定文档的 GUID，fpn 指定文档起始序号，rn 指定文档片段的页数；根据百度文档内部的定义应该是将文档以5 页或者 10 页进行组织，所以 fpn=5*X+1；rn=5|10。五、 百度文库浏览器外部调用分析回过头在看客户端调用的 JavaScript 代码就有针对性了，不用头大了；先看一看 html 页的代码吧，打开“9daa5522aaea998fcc220e73.html”页面，看一看里面的代码，看看有不有对应的参数，您别说还真就
8、有，不管咋说吧，代码有点阅读困难，好在只定位于使用这段代码，咱改改参数用用，其他的就不深入研究了。function Reader()function B()if(baidu.swf.getVersion()return trueelse_id.innerHTML=文档预览需要最新版本的 Flash Player 支持。您尚未安装或版本过低，建议您：;return falsethis.create=function(D,C)baidu.swf.create(id:“reader“,width:“717“,height:“700“,ver:“9.0.0“,errorMessage:“Please
9、download the newest flash player.“,url:“/static/flash/reader.swf“,bgColor:“#FFFFFF“,wmode:“window“,allowfullscreen:“true“,vars:docurl:“/play“,docid:“9daa5522aaea998fcc220e73 “,/貌似这就是 id 了fpn:“5“,npn:“5“,D);A(D);function A(C)baidu.on(C,“mousewheel“,function(D)var F=D.wheelDelta;var E=-3;if(F0)E=3baid
10、u.swf.getMovie(“reader“).NS_IK_doMouseWheel(E);baidu.preventDefault(D),false)var DOC_INFO=doc_id:“9daa5522aaea998fcc220e73“,cid:“134“,price:“0“,value_average:“7“;var _reader=new Reader();_reader.create(“readerContainer“,“9daa5522aaea998fcc220e73“);baidu.each(“selfChangeCategory“,“adminChangeCategory
11、“,“selfChangePrice“,function(B,A)baidu.on(B,“click“,function(C)login.check(baidu.proxy(view.changeDocInfo,B);baidu.preventDefault(C);baidu.on(“addToStore“,“click“,function(A)window.open(“http:/ “,url:“/static/html/empty.html“,width:420,height:250);document.AddToStore.submit();baidu.preventDefault(A)
12、;baidu.each(“downloadTop“,“downloadButton“,function(A)baidu.on(A,“click“,function(B)log.send(“down“,“download“,fr:“down“);login.check(view.download);baidu.preventDefault(B);var rate=new Rate(“rateContainer“);rate.create(“7“);if(G(“kw“)G(“kw“).value=“;六、 百度文库现场取材实现既然分析清楚了，下一步将百度文库的文件结构整清楚，然后放入对应的内容，稍
13、微对静态代码进行一些调整；部署到根目录即可使用；这里面有百度对 FlashPaper 文档 swf 的改造，暂且不说了，其实就是追加了一个 json 的文件头数据块，对咱们当前要就地取材实现而言没有任何障碍。文档结构整理如下：将文件都归到对应的文件夹下，既然百度对 FlashPaper/FlexPaper 对应的 swf 做了改造，那好就将 swf 文件改名为 swfx 吧。值得注意的是需要在 IIS 部署时增加 MIME 类型 swfx为 application/swfx;只是遗憾的是由于 swfx 当前还不能接受参数，所以不能进行动态加载缓存页面，不过没有关系，等下次使用 URL ReWrite 整个处理一下，一个真实的百度FlashReader 就完成了。我们的口号是，不求读懂百度文库里面的每一句代码，但求利用已有材料。七、 百度文库 DotNet 模拟敬请期待吧八、 制作自己的百度 FlashPaperswfx未完待续
