http://blog.csdn.net/chinull/archive/2010/03/17/5390830.aspx

百度文庫瀏覽器分析及實(shí)現(xiàn)

一、        引子

2003年開始玩Flash，完了兩年就戒掉了；長 時(shí)間不用不完慢慢就生疏了。最近應(yīng)客戶的需要，希望能在文檔系統(tǒng)中實(shí)現(xiàn)類似百度文庫的效果。考查一番，咋看起來百度用的是FlashPaper技術(shù)，也看了看FlexPaper，在GoogleCode上還看到了一個(gè)超大文件 的示例，可惜鏈接打不開，無法去詳細(xì)分析他們了。

在能看到的應(yīng)用中，FlashPaper、FlexPaper都不能達(dá)到在互聯(lián)網(wǎng)上動(dòng)態(tài)加載大文檔的用戶體驗(yàn)需求；唯獨(dú)百度文庫有這樣的用戶 體驗(yàn)，因此就只能拿百度文庫開刀了，希望李彥宏同志不要見怪。

姑且拿《六十八個(gè)經(jīng)典小故事》作為示例，該文檔頁數(shù)足夠多，能夠展示動(dòng)態(tài)加載的效果。

二、        百度文庫瀏覽器原理分析步驟

1.      找到《六十八個(gè)經(jīng)典小 故事》對(duì)應(yīng)的鏈接；

2.      清空IE緩存，在IE中瀏覽該頁面；

3.      使用導(dǎo)航將文檔瀏覽至 最后；

4.      抓取IE緩存中的內(nèi)容；

5.      材料已取好，分析開 始。

三、        百度文庫瀏覽器代碼分析

一進(jìn)來，劉姥姥進(jìn)了大觀園了，這個(gè)JavaScript腳本看得人腦袋那個(gè)大啊，這條路走起來挺艱難，換個(gè)思路吧；找個(gè)Flash反編譯工具，反編譯一 下，取出來ActionScript，這個(gè)好歹還有個(gè)分行 短句啊，總算還是個(gè)代碼。

整理整理代碼的層次結(jié)構(gòu)，按照包組織一下，大致能確認(rèn)應(yīng)該在baidu這個(gè)文件夾吧；再看看，lib大致是用于json處理的；ui是用于用戶自定義控件；iknow就應(yīng)該是程序入口吧，按 照一般程序要的思路先找一找main吧，果然還真有一個(gè)main類，有意思。

下面這幾句代碼大概就是與外部進(jìn)行參數(shù)交換的吧：

 

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這幾個(gè)參數(shù)了，在JavaScript或者json中應(yīng)該有體現(xiàn)的。

在看一看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);

這個(gè)就是定義的裝載進(jìn) 度、裝載完成、裝載失敗的幾個(gè)事件響應(yīng)了；

this._delayPreLoadID = setInterval(this.preLoad, 1000, _loc_3);

這個(gè)是用于預(yù)裝載的動(dòng) 作，實(shí)現(xiàn)邊查看邊下載其他片段的。

四、        百度文庫瀏覽器參數(shù)分析

根據(jù)以上代碼片段就可以知道百度FlashPaper Reader的工作原理了，在初始化時(shí)根據(jù)JavaScript的參數(shù)裝載FlashPaper片段，使用docurl指定路徑（可以是相對(duì)路 徑，可以是絕對(duì)路徑），使用docid指定文檔的GUID，fpn指定文檔起始序號(hào)，rn指定文檔片段的頁數(shù)；根 據(jù)百度文檔內(nèi)部的定義應(yīng)該是將文檔以5頁或者10頁進(jìn)行組織，所以fpn=5*X+1；rn=5||10。

五、        百度文庫瀏覽器外部調(diào)用分析

回過頭在看客戶端調(diào)用的JavaScript代碼就有針對(duì)性了，不用頭大了；先看一看html頁的代碼吧，打開“9daa5522aaea998fcc220e73.html”頁面，看一看里面的 代碼，看看有不有對(duì)應(yīng)的參數(shù)，您別說還真就有，不管咋說吧，代碼有點(diǎn)閱讀困難，好在只定位于使用這段代碼，咱改改參數(shù)用用，其他的就不深入研究了。

function Reader(){

function B(){

if(baidu.swf.getVersion()){

return true

}else{

_id.innerHTML='<p class="ml">文檔預(yù)覽需要最新版本的Flash Player支持。</p><p class="ml">您尚未安裝或版本過 低，建議您：</p><a target="_blank"><img src="http://box.zhangmen.baidu.com/images/setupflash.gif" height="39" width="273" /></a>';

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){

window.open("http://cang.baidu.com/do/add?it="+encodeURIComponent(document.title)+"&iu="+encodeURIComponent(location.href)+"&tn=文庫&fr=wk#nw=1","_s","scrollbars=no,width=600,height=450,right=75,top=20,status=no,resizable=yes");

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=""};

六、        百度文庫現(xiàn)場取材實(shí)現(xiàn)

既然分析清楚了，下一步將百度文庫的文件結(jié)構(gòu)整清楚，然后放入對(duì)應(yīng)的內(nèi)容，稍微對(duì)靜態(tài)代碼進(jìn)行一些調(diào)整；部署到根目 錄即可使用；

這里面有百度對(duì)FlashPaper文檔swf的改造，暫且不說了，其實(shí)就是追加了一個(gè)json的文件頭數(shù)據(jù)塊，對(duì)咱們 當(dāng)前要就地取材實(shí)現(xiàn)而言沒有任何障礙。

文檔結(jié)構(gòu)整理如下：

 

將文件都?xì)w到對(duì)應(yīng)的文件夾下，既然百度對(duì)FlashPaper/FlexPaper對(duì)應(yīng)的swf做了改造，那好就將swf文件改名為swfx吧。值得注意的是需要在IIS部署時(shí)增加MIME類型swfx為application/swfx;只是遺憾的是由于swfx當(dāng)前還不能接受參數(shù)，所以不能進(jìn)行動(dòng)態(tài)加載緩存頁面，不過沒有關(guān)系，等下次使用URL ReWrite整個(gè)處理一下，一個(gè)真實(shí)的百度FlashReader就完成了。

我們的口號(hào)是，不求讀懂百度文庫里面的每一句代碼，但求利用已有材料。

七、        百度文庫DotNet模擬

敬請期待吧…

八、        制作自己的百度FlashPaper—swfx

未完 待續(xù)…

從這里下載靜態(tài)版本（未實(shí)現(xiàn)動(dòng)態(tài)預(yù)裝載）http://download.csdn.net/source/2137831