Archive for the ‘Web Developer’ Category

2005年前端工程师的职位开始在中国出现,2007年第一届D2前端技术论坛在杭州举行,从此D2伴随着中国的前端一起成长,从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。

在D2上我们曾交流过某项具体的前端技术,也曾探讨过团队协作的方式,那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想,现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候,我们自己也在悄然发生质变,而推动这些变化的人和事正是D2想告诉你的。

最近随着狂风计划的席卷,我也终于开始橱窗产品位列表展示的编码工作,这只是一个改进项目,因此有原代码可供参考。但是当我打开原代码模板的时候便愣住了,一个4 × n的矩阵为了执行div + CSS的标准而放弃使用非常牛B的table布局,这本无可厚非,可是由于“某原因”(后文会陈述)却让本来很有优势的div布局失去了原有的优势,在我反复思考这个问题的时候怎样都觉得table布局能比现在的这个更加合适。那么这个非常霹雳的布局是怎么样的呢?请见下图:

产品列表结构图(png太牛B了只有18K)

产品列表结构图(png太牛B了只有18K)

我想绝大多数UEDer都不会使用如上布局来实现这个模块,首先想到的当然是使用DIV[productItem]做4 × n次的循环,然而这个布局却使用程序控制每四个DIV[productItem]给它们套一个DIV[productListRow]。可能很多人都已经发现了,这个布局有一个先天性的不足,也就是前文提到的“某原因”,那就是由于产品简介的长度不同导致每个DIV[productItem]的高度不同,因此需要在每行列表后面都清除浮动以让浏览器可以做出正确排列。那么解决办法也就出来了,很简单,有如下几个:

1、最方便、最有效、性价比最高的方法就是我们当然可以知道最长长度的产品名称和产品简介,因此我们分别取这两个值排满的最高高度来作为DIV[productItem]即可,但是这个方法却有致命的缺点导致所有UEDer都不会这么做得,那就是当出现有人不填写产品简介或者产品简介填写得非常少的时候便会出现大段的空白严重影响观看阅读。

2、那就这样把,咱把“产品简介”给拿掉吧,然后使用方法1便可以完美解决问题了。这个想法非常牛B,可是它太牛B了,我绝对不敢这样操刀直接把这么重要的内容给砍掉(也许有人觉得这些内容并不重要,但是这不是这篇文章所要讨论的东西)。我对曾经抱有次想法表示遗憾和羞愧。

3、为什么不使用table布局呢?天哪我觉得这简直就是最完美的办法了,table一出八马难追的。能够自适应高度的table在这个应用上拥有绝对的优势啊,如果前端开发工程师们可以放下一点架子在html上使用它原本应该使用的结构该是多么美好的事情,我直到在写这篇博客的时候依然觉得使用table解决问题又快又省力还很有快感哦~(其实原代码中的div布局就是抄袭了table的“思想理念”了)

但是作为一个在非常牛B的UED团队的还是菜鸟的我为了要做出非常牛B的事情也为了团队的面子,怎样也不能使用上面三种投机取巧的办法来敷衍这个现实的问题吧,因此就有了这篇博客最重要的内容。

第一次尝试:

首先我们还是来考虑考虑到底使用什么标签来写这个列表吧,所谓back 2 base嘛。重新分析列表中最重要的元素有且仅有:标题、图片、简介。显然标题是最重要的,作为一个product的title存在,而图片和简介都是用来描述标题的内容,因此第一个想到的标签就是dl,这样便有了以下布局(抱歉还没有时间整一个代码输入):

<dl>
<dt>[name]</dt>
<dd><div>[photo]</div><div>[intro]</div></dd>
</dl>

对dt和dd都做float:left,dt做一个margin-top:100px来定位到图片和简介中间,dd做一个margin-left:-25%来定位到和dt相同的x坐标(由于无法输入代码就不贴css了)这样的html是我认为最贴切的,根据现在流行的html语义化定义这样的布局太合适不过了。当然css中还是存在非常多的困难,而前面所说的“某原因”也并没有得到解决,反而更甚了,因为把标题和简介流拆开后,标题过长便会和简介的文字叠加根本无法阅读!然而经过几秒钟的思考后认为这玩意儿的解决已经超出了我的范围了。当然,有人可能会说把标题和图片换一个不就可以了么?是的,没错,但是如果这样的话使用dl标签还有什么意义呢?可能有意义吧,就是标题和简介都是为了说明这张图片而存在的,但是真的可以这么想吗?还有待实验去证明,这里就不讨论了。

第二次尝试:

如上所述,dl的存在就没意义了,那就算了吧,退而求其次使用ul(请在砸我鸡蛋前念着我还死了那么多脑细胞在这个上面的份上轻点儿吧),无序列表虽然不如定义列表来得语义那么强烈,但至少它还是和列表吧,至少不是一个division吧。ul的布局相比较就简单多了,看上去也只是把div标签换成了li而已,那么html结构如下:

<ul>
<li><div>[photo]</div>
<div>[name]</div>
<div>[intro]</div>
</li>
</ul>

到这个时候终于要直面本文第四次提到的“某原因”了,如何解决li浮动后高度不同导致的矩阵错位问题?最先进入脑子的想法就是记得很久很久以前看到过一篇关于div自适应高度的文章,于是就在google翻找,当时没有收藏真是太失误了。在google搜索自适应高度那是相当多呀,但是有一篇文章是不得不借鉴的,但是这篇文章并不是适应于我们的案例,很显然它更适用于两栏或者三栏布局,而我们至少有四栏甚至五栏。自此还有什么办法可以让多列布局自适应高度呢?(请不要跟我提关于巨大的padding与负margin这件事)伪装的自适应对于需要货真价实产品的我们是没有用的……至此思维告一段落,我需要回到源头来,最开始的出发点在哪里?如果只是为了清除浮动的话?使用最简单的方法?

带着上面的问题,便渐渐有了解决方案,不可避免的,我可能需要借助后台工程师的力量了,我在每4个li之后的那个li上加上clear:left属性,以清除左边的浮动来防止它因为前面li的高度不够而导致的错位,从它之后的li就应该会乖乖地跟在它的后面了。这个想法很美好,但是很天真,可能我确实在FF等标准浏览器下面获得了预想中的效果(没有想到实现起来那么简单,正在开心中),突然发现又是那该死的IE!!!那个加了clear属性的li确实正常显示了,但是在它之后的那些继续原来它应该范的错误,没有起到清除整行浮动的作用。我懊恼了~通过漫长的研究至今已经找到了一个语义和样式都比较平衡的点却无法在IE中得以实现,怎么办?

第一个想法就是使用hack技术(虽然UEDer们都不推崇,但是为了维护之前的成果,老子发飙了),问题就是如何做hack。先看这样的例子,如果我每4个li后面都插一个<li style=”clear:both;float:none;”></li>的话,不管在IE下还是在FF下都可以完美地完成任务,但是这个方案有一个致命的缺陷,就是对原有html语义的破坏,凭什么好好的列表突然就多出一个空li来?那么能不能在不影响原来语义的情况下,在FF依然使用它应该使用的clear:left方式的情况下来针对IE进行hack呢?非常幸运的是IE给我们提供了条件注释工具<!–[if IE]><![endif]–>(我想一旦开始使用这个东西之后一定会非常依赖它的),因此html结构就变成了这样:

<li>[productItem]</li>
<!–[if IE]><li class=”clearForIE”></li><![endif]–>
<li class=”clearForFF”>[productItem]</li>

希望这样能够看得懂。至此为了尽力表述完整语义的目的就达到了,因为所有的浏览器、搜索引擎和用户都会把那段IE的hack作为一个普通的注释来看待(这里也包括IE自己,这是一段条件注释,那还是注释),因此产品列表的li就没有被中途无故打断,更不会像最早的div版本每四个是一个division。到这里研究工作就算完成了(关于这个IE特有的hack的可能的严重后果木有给予考虑。。。),不过还有一些额外的思考。

其实使用division也不完全是不好,如果division这样做:

<div class=”top20″>
<div class=”top15″>
<div class=”top10″>
<div class=”top5″>
DIV[productItem]{1-5}
</div>
DIV[productItem]{6-10}
</div>
DIV[productItem]{11-15}
</div>
DIV[productItem]{16-20}
</div>

D2结束已经两个礼拜了,现在才开始写这篇博客足以见得D2的影响之“深远”,当然希望它的影响力真的可以深远到在下次再看到D2的时候已经能够足够媲美高级行业峰会的姿态了。

作为业界的晚辈,我当然很期待能够参加这样的聚会,因此在收到圆心同学发来的邀请函时切实感受到的荣幸倍至直到现在依然还在自己小宇宙的某处荡漾着(好似我废话很多,这其实是想引证一下在周五晚上下班后坐上“幸福班车”油然而生的兴奋充斥了头皮)从不到一年前刚刚踩进前端这个行业到能够在第二天进入到国内前端技术行业领先的大型学习交流会简直有如做梦般不可思议,就好像看到精心培育的风信子终于开出了艳丽的花朵一样。

D2贴纸

D2贴纸

第二天清早我们一行9个人8点就起来打点行装前去会场锦江国际酒店,本以为已经算是比较早到的一批与会人员了,不料taobao和中文站的同学早已来到会场。会场早已布置好了两块大屏幕分别显示演讲者的演示稿和叽歪网线上直播,据说这次D2的报名者达到了600人之多,大大超出了主办方的预料因此不得不临时更换主办场所,而与此同时也不得不委屈近50%的前端技术爱好者仅发了300人的邀请,为此特意开辟了叽歪网的D2forum来为没有能够到达现场的同行们同步传达会场的内容,这里要特别感谢主办方土豆网的细心设置。

来自Adobe的7yue同学分享Flash10相关内容

来自Adobe的7yue同学分享Flash10相关内容

这次D2论坛的主题是“前沿技术与前端协作”,在上午的两场讲演中,来自Adobe的7yue同学为我们带来了新鲜出炉的Flash10技术分享,Flash10诸多的新特性和十分牛X的方方面面都在早上1个小时的分享当中展示出来,其中的Pixel Bender工具真是令与会同学们大开眼界,至少在他牛X的Apple Air上轻松地运行这些动态视频像素级渲染看起来是多么的美好,可以看得出7yue同学为此做了充分的准备,它作为演讲嘉宾为这次的D2带来了绚丽的开场。我们都能认识到作为新生的行业,前端技术是一个飞速发展的技术,掌握前沿技术的重要性毋须质疑。

来自Microsoft的超群同学分享IE8与Silver Light相关内容

来自Microsoft的超群同学分享IE8与Silver Light相关内容

同样属于前沿技术分享的来自微软的超群同学给大家带来的IE8Silver Light的新特性分享是一场非常有趣的分享,不管现在的IE产品有多么的令人诟病,但是看起来即将到来的IE8被寄予了大群博士、博士后开发团队非常大的期望,而超群也为我们展示了足以令人对IE有所改观的新特性和功能。而Silver Light在高清视频流媒体上的NB程度简直令我乍舌了,源生支持H.263和mpeg4编码的Silver Light的运行速度其实有点令人担忧,但是超群同学的演示似乎并没有那么困难,只是电脑硬件条件符合了要求是没有用的,祖国的网络硬件条件啥时候才能满足在线观看720P的高清视频呢?

来自Alibaba的Justin同学分享

来自Alibaba的Justin同学分享

另外的四场分享都针对着“前端协作”这个主题,开发协作其实一直是所有技术开发人员共同的问题,前端必然需要直面这个严肃的话题。来自土豆网、淘宝网Alibaba的同学分别分享了各自团队的协作经验。也许很多人觉得团队协作是主管们要考虑的事情,而自己只要做好技术的本职工作就好,因此当天在会场上听到了许多表示希望可以听到更多技术分享的话题,这个希望下一届的主办方可以多参考民众的需求吧,充分发挥UCD的理念。同时晚辈也觉得四位老大们分享的前段协作似乎稍微不够浅显了,也难怪会有异样的声音。

D2合影(请注意某人右手的包)

D2合影(请注意某人右手的包)

因为不可抗拒的原因,论坛比预计的时间提早了1个半小时结束,直接导致我们无敌男人小组的不知所措,车票已然定好,剩下的时间就只能在候车室打法了。终于能够把握这次机会坐上一趟和谐号了,可惜乌漆抹黑的晚上根本无法享受170KM/H的快感,只能在睡梦中消化白天的学识了。

最后,所有D2的资料都可以在http://www.d2forum.org/2008/12/04/look-back-upon-the-third-d2-forum/这里找到。下一届的D2会回到杭州,期待能有更多的技术交流了。

PS:期待IE系列贴纸

当你加入到一个项目,相关的CSS文件可能会看得你头昏眼花。时间一长,修改了哪些内容,增加了哪些内容,也都弄不清,维护成本相当的高。正好我们国际站正在进行代码的规范工作。下面的这段代码注释的思路值得借鉴。

通常写法:

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999;
margin: 3px 0 3px 0;
padding: 3px;
}

注释的代码段:

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
margin: 3px 0 3px 0;
padding: 3px; /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}

上面的代码中,注释了增加代码的时间,修改代码的时间以及修改前的属性值。如果是多人协作,我建议还加上修改者的名称。当然,这样一直写下将带来过多的垃圾代码。需要定期的整理归档,保持文档的时效性。