百度文库浏览器分析及实现
一、 引子
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"] || "http://jx-iknow-test15.jx.baidu.com: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=1&rn=" + 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代码就有针对性了，不用头大了；先看一看html页的代码吧，打开“9daa5522aaea998fcc220e73.html”页面，看一看里面的代码，看看有不有对应的参数，您别说还真就有，不管咋说吧，代码有点阅读困难，好在只定位于使用这段代码，咱改改参数用用，其他的就不深入研究了。
function Reader(){
function B(){
if(baidu.swf.getVersion()){
return true
}else{
_id.innerHTML='<p class="ml">文档预览需要最新版本的Flash Player支持。</p><p class="ml">您尚未安装或版本过低，建议您：</p><a href="http://www.baidu.com/s?ie=gb2312&bs=flash+%CF%C2%D4%D8&sr=&z=&cl=3&f=8&wd=Flash+Player+%CF%C2%D4%D8&ct=0" target="_blank"><img src="http://box.zhangmen.baidu.com/images/setupflash.gif" height="39" width="273" /></a>';
![http://box.zhangmen.baidu.com/images/setupflash.gif"](http://box.zhangmen.baidu.com/images/setupflash.gif"){kind=link}
return false
}
}
this.create=function(D,C){
baidu.swf.create({
id:"reader",
width:"717",
height:"700",
ver:"9.0.0",
errorMessage:"Please 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(F<0){
E=3
}
baidu.swf.getMovie("reader").NS_IK_doMouseWheel(E);
baidu.preventDefault(D)
});
if(window.addEventListener){
baidu.G(C).addEventListener("DOMMouseScroll",function(D){
var F=D.detail;
var E=-3;
if(F>0){
E=3
}
baidu.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","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){
pop.show("提示",{
url:"/static/html/empty.html",
width:420,
height:250
});
document.AddToStore.submit();
baidu.preventDefault(A)
});
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=""};
六、 百度文库现场取材实现
既然分析清楚了，下一步将百度文库的文件结构整清楚，然后放入对应的内容，稍微对静态代码进行一些调整；部署到根目录即可使用；
这里面有百度对FlashPaper文档swf的改造，暂且不说了，其实就是追加了一个json的文件头数据块，对咱们当前要就地取材实现而言没有任何障碍。
文档结构整理如下：
将文件都归到对应的文件夹下，既然百度对FlashPaper/FlexPaper对应的swf做了改造，那好就将swf文件改名为swfx吧。值得注意的是需要在IIS部署时增加MIME类型swfx为application/swfx;只是遗憾的是由于swfx当前还不能接受参数，所以不能进行动态加载缓存页面，不过没有关系，等下次使用URL ReWrite整个处理一下，一个真实的百度FlashReader就完成了。
我们的口号是，不求读懂百度文库里面的每一句代码，但求利用已有材料。
七、 百度文库DotNet模拟
敬请期待吧…
八、 制作自己的百度FlashPaper—swfx
未完待续…
从这里下载静态版本（未实现动态预装载）http://download.csdn.net/source/2137831
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/chinull/archive/2010/03/17/5390830.aspx