轉：百度有啊前端技術初窺

百度有啊開了，作為淘寶的一名深情前端開發工程師，打開百度有啊的第一件事是F12:

很典型的24列960栅格系統的兩欄布局，很明顯的YUI風格。注意主體的兩欄布局又分成了兩部分，兩部分的結構是一樣的。來看一下​

​base.css​

​:

/*      

Copyright (c) 2008, Baidu Inc. All rights reserved.      

version: alpha 0.0.1      

*/      

...      

#doc1,#doc2,#doc3 {margin:auto;text-align:left;min-width:760px;zoom:1;font-size:100%;}      

#doc1 {margin:auto 10px;}      

#doc2 {width:58.4615em;*width:56.9826em;}      

#doc3 {width:73.0769em;*width:71.2858em;}      

...      

#bd:after,.bb-g:after,.bb-ga:after,.bb-gb:after,.bb-gc:after,      

.bb-gd:after {content:".";display:block;visibility:hidden;height:0;clear:both;}      

layout部分完全照抄YUI的grids. 檔案頭的All rights reserved有點不厚道，至少應該說明下Inspired by YUI. 看最後一行的​

​:after​

​, 這種清除浮動的方式不用添加額外标簽，今天正猶豫能否用于淘寶，百度有啊做了小白鼠，很不錯。

來具體看一個小子產品：

可以看出，dom結構是典型的YUI風格。有啊首頁沒有采用圓角，是以邊框線加頭部背景就搞定了。注意​

​hd​

​部分的​

​<div class="act">​

​, 這裡和Ext的方式類似，act是action的簡稱，裡面放“更多、收縮、删除”等操作按鈕，可擴充性很好。

走馬觀花看完HTML和CSS, 接下來我們來看下有啊的JS:

百度有啊自己建構了一套JavaScript庫，這份魄力相當大氣，很佩服。看下細節​

​core.js​

​：

var BB = {      

__version: 0.1      

};      

BB.VERSION = "0.1.0.1.20080323";      

BB.JSPATH = (function() {      

var A = document.getElementsByTagName("script");      

return A[A.length - 1].src.replace(/"/[^"/]+$/, "/") + "../";      

})();      

Object.asPrototype = function(B) {      

var A = function() {};      

A.prototype = B;      

return A;      

};      

...      

function $(A) {      

if ("string" == typeof(A)) {      

return document.getElementById(A);      

} else {      

return A;      

}      

}      

var G = $;      

var $package = function(H, B) {      

...      

};      

...      

Array.prototype.each = function(E) {      

...      

};      

...      

BB.Console = {      

...      

};      

百度的JS架構名稱縮寫為BB, 采用的風格類似Prototype和MooTools, 有大量侵入式代碼，并且采取的是直接覆寫式侵入，比如​

​Array.prototype.each = ...​

​, 這在一定程度上可以避免浏覽器更新問題，但也造成了在Firefox等現代浏覽器上性能的喪失（原生的​

​forEach​

​總比JS庫的快）。仔細看的話，可以發現還有不少地方考慮欠周。BB目前還隻是一個很不成熟的JS庫。

繼續看細節，tabview.js, 代碼就不看了，直接看效果：

把滑鼠在“人氣寶貝”和“熱點時尚”上快速移動，很容易發現CPU狂飙，百度明顯沒有考慮延遲觸發。當選中人氣寶貝（周圍有虛線）時，直接用鍵盤Tab鍵切換焦點，可以發現焦點切換了但内容沒有切換，這也是考慮不周的地方。這在淘寶上都是沒問題的。

中間的廣告Slide也有類似問題，快速在縮略圖上切換時，也沒有做延遲觸發。不快速移動，自然切換時，也比較耗CPU, 代碼加密了沒耐心去看，估計裡面的效果類處理得不是很妥。

好了，上面快速地過了遍技術細節，下面來簡單看下可通路性。

禁用掉JS, 重新整理，布局沒有被破壞，很不錯（至少比拍拍強）。但依舊有可以改進的地方，比如中間的廣告，點選縮略圖時，可以考慮直接打開對應的大圖。TabView中的“熱點時尚”也可以考慮做成真實連結。不過有啊在禁用JS時的表現已經相當不錯了。

再禁用掉CSS, 可以看出整個頁面的結構是比較清晰的，很不錯。

作為追求完美的技術人士，上面很多地方我可能過于苛刻。從純前端技術上講，百度有啊總體上很不錯，CSS雖有剽竊之嫌，但能用得如此娴熟，技術也是 一流的了。至于JavaScript, 百度有啊的JS架構讓我惴惴不安, 雖然他們自己寫了一個架構，這份氣度非常好，但總體上覺得百度的JS應用還停留在二流水準上。期待着百度JS架構的成熟。