百度有啊前端技術初窺

百度有啊開了,作爲淘寶的一名深情前端開發工程師,打開百度有啊的第一件事是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框架的成熟。

拍磚完畢,睡覺去。希望夢裏不會出現有啊還是沒啊的爭吵。

 

 

 

ps:不得不佩服“歲月如歌”兄臺敏銳的觀察力~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章