百度有啊前端技术初窥

时间:2021-12-10 13:23:18

转自 http://lifesinger.org/blog/?p=600

 

百度有啊开了,作为淘宝的一名深情前端开发工程师,打开百度有啊的第一件事是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框架的成熟。

拍砖完毕,睡觉去。希望梦里不会出现有啊还是没啊的争吵