是时候了，前端架构师

最近对Web前端有很多想法，刚好看到这篇文章，跟我想法不谋而合，所以翻译出来与大家分享。许久没翻译了，里面多少还是有些我没能完全理解，意译过来，如果错误，请务必指出和修改，谢谢。
原文The Time is Now for Front-End Architects， 来自：Garrett Dimon，感谢作者的许可。
去年，我在YTS发表了前端架构师的想法，之后花更多时间来思考，现在更坚信这是一个不可或缺的角色。
当后端技术伴随.Net, Rails和Java之类的框架发展得越来越抽象和强大，前端技术的潜在发展也日益复杂。在束缚前端技术潜在好处的差劲实现之前， Web需要更多的前端架构师。
多亏了诸如跨浏览器支持的先进技术的发展，用户体验、更多有意义的主题比如无障碍都拨云见日，这个世界再也不仅仅就HTML和CSS如此简单，因此，绝大部分的团队都需要一个真正理解和实践涉及到前端的一切的人。
角色
这并不是一个扼要和简单的清单，对于下面的主题／技术，前端架构师也不能仅仅满足于了解一下里里外外而已，而是需要足够的深入研究，并有自己出色的见解。

• XHTML
• CSS(1, 2, 3)
• 跨浏览器和跨平台
• DOM脚本编程
• AJAX
• Flash
• 渐进增强和适度降级
• 无障碍
• 可用性
• 信息架构
• 界面设计
• 视觉设计
• 表现层逻辑（ASPX, Rails视图等）
• 商业规则和逻辑

作为一个前端架构师，必须拥有这些领域的绝对执行力。例如，前端架构师能够决定某个特性是使用AJAX还是传统的页面刷新。哪个更便于使用？对无障碍的影响如何？改用Flash有意义吗？
拨乱反正
表现，结构，行为和商业逻辑的混杂，导致不必要的复杂，导致难以维护的怪胎解决方案。就如后端需要正确地划分为数据层，商业逻辑，表现逻辑等，前端开发复杂到是时候调整其架构了。
编写良好结构或者说避免使用表格布局是远远不够的。这是第一步，前端架构的哆咧咪而已。现在是时候关注DOM脚本编程，AJAX, 无障碍等，该升级了。
非编程不可
我主张前端架构师必须懂得真正的编程知识，而这正是很多自封为前端架构师的人所缺乏的。我的意思不是能够剪切粘贴改进代码就行了，而是能够跟老练的工程师商讨如何能够最好地结合前端。
这就是说，前端架构师需要真正理解结构遭遇商业逻辑的问题。如果工程师说某些东西使用ASP.Net DataGrid是不可能实现的，前端架构师必须能够解释如何与为何要使用DataList或Repeater取代，解释为何DataGrid在该情景下是个错误的选择……
这只是个例子，问题还在于仅知道客户端编程也是不够的。能够使用与工程师相同的术语，能够讨论（前后端）关键集成的最佳解决方案，这是绝对必须的。
断线的风筝
我们今天正处在一个不妙的处境中，原因在于几乎没有人能够为前后端的沟壑搭桥。一般工程师不会有兴趣或实践标记，CSS, 或DOM脚本编程，大部分客户端开发者也没有与后端技术协作的经验。几周入门PHP不会成为程序员，几周入门XHTML也不会成为真正的客户端开发者。
罪魁祸首
我首先想到的十足例子是，ASP.Net完全漠视Web标准，同样地，web氛围（我们指表格和占位gif）让Web标准郁闷。企业项目的大多数框架输出的标记，即使使用1999年的标准来衡量，都是糟糕无比的。
如此巨大和“专业”的产品怎么能才够不忽视，按理说是整个项目最简单的方面？只有静态代码。理由是，基于技术的立场衡量产品，结构，CSS和其他客户端技术都是“事后诸葛亮”。表现逻辑，结构和行为混杂，压根无助于无障碍，Web标准，或者前端技术干净的分离。抬起你的头来，就在2006，这些都成受欢迎的惯例了。
总结
如果这个世界上姿态最鲜明的产品和项目都如此低劣的方式来处理事情，其他的还有什么好说？毫无疑问，我们需要前端架构师，而且就在昨天。
归结于归结，我们有一堆相互关联的技术，很少人能够埋头钻研它们之间的关系，这很不幸。正确做事的真正价值在于容易的维护和长期的适应性。虽然在关键时刻，有些方式更容易选择其他的方法和拼凑起另外的东西。对某些人来说，这可能是可接受的做事方式。但是，对我们大部分人来说，这是拙劣的抉择，也非常不专业。
我交给你去想了。我假设你把车交给技工修理，修好了时候，瞧瞧引擎罩内大量的输送管，我不知道你对技工作何感想？

2008年阿里巴巴前端开发工程师面试题解

阿里巴巴面试题出自：http://job.aliued.com/race/chooseRace/wd.html

BI上也有很多解法：http://bbs.blueidea.com/thread-2824105-1-1.html

前段时间在一位朋友的引荐下去应聘前端开发工程师，给我了面试题；

下面我把我的解法放出来：

1.用CSS实现布局

让我们一起来做一个页面

首先，我们需要一个布局。

请使用CSS控制3个div，实现如下图的布局。

这题不难，在平时项目开发过程中也经常会碰到：

主要考虑几个问题：1.IE6的3像素BUG；2.清楚浮动；

CSS代码

1. div{background:#CCCCCC;}
   
2. #first{float:left;width:100px; height:150px}
   
3. #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}
   
4. #third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}
   

XML/HTML代码

1. <div id=“first”></div>
   
2. <div id=“second”></div>
   
3. <div id=“third”></div>

2.用javascript优化布局

由于我们的用户群喜欢放大看页面

于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25%，

并且其他的区块仍然固定不动。



提示：

也许，我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码，包括曾经你自己写的。

关键字：

javascript、封装、复用

惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；

所以样式改成了这样

CSS代码

1. body{ margin:0; padding:0}
   
2. div{background:#CCCCCC; position:absolute}
   
3. #first{width:100px; height:150px}
   
4. #second{top:160px;width:100px;height:150px}
   
5. #third{ width:200px; height:310px; left:110px}

javascript要考考虑封装、复用

JavaScript代码

1. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
   
2. var obj=document.getElementById(id); // 获取元素对象值
   
3. var dW=obj.clientWidth; // 获取元素宽度
   
4. var dH=obj.clientHeight; // 获取元素高度
   
5. //var oTop=obj.offsetTop;
   
6. //var oLeft=obj.offsetLeft;
   
7. 
   
8. obj.onmouseover=function(){ // 鼠标移入
   
9. this.style.width=dW*x+“px”; // 横向缩放
   
10. this.style.height=dH*y+“px”; // 纵向缩放
    
11. this.style.backgroundColor=“#f00″; // 设置调试背景
    
12. this.style.zIndex=1; // 设置z轴优先
    
13. }
    
14. obj.onmouseout=function(){ // 鼠标移出，设回默认值
    
15. this.style.width=“”;
    
16. this.style.height=“”;
    
17. this.style.padding=“”;
    
18. this.style.backgroundColor=“”;
    
19. this.style.zIndex=“”;
    
20. }
    
21. }
    
22. zoom(“first”,1.25,1.25);
    
23. zoom(“second”,1.25,1.25);
    
24. zoom(“third”,1.25,1.25);
    

页面中css调试和问题解决的一些经验总结

在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题，css继承，css叠加等等，我们经常因为这些而需要调试页面中css。
以下只是我个人的一些经验总结，如果有不合适请留言斧正，欢迎补充。

一、为什么页面会出现种种的bug

1.浏览器的本身对CSS支持BUG：
IE6有一堆BUG，具体可以参考一下《IE6 BUG大全》；
FF需要注意清除浮动；
还有浏览器对css2各个属性的支持问题，大家需要了解浏览器对css2各个属性的支持情况；

2.直接书写错误，由于自己在写css时候的粗心造成的BUG

比如将 .ask-lable{width: 934px;height:94px; padding-top:43px; margin:0 auto;}
中的“{}”写成了中文状态的“{}”,或者溜掉了结束的“}”；margin:0 auto;中的冒号和封号，也会经常被写成中文的，还有0（零）经常会被写成o（英文字母o）；width: 934px;中的px经常会被忘掉，还有以下缩写的格式等等；

3.在页面编码不统一的情况下，经常会碰到，样式写着写着，在ie6下页面就乱掉了，这是IE6的bug；

4.没搞清楚html的块状元素和内联元素，css的某些属性对内联元素不起作用，

可以参阅：html中的块元素(block element)和内联元素(inline element)

比如：<span style=”text-align:right;margin:30px; padding:30px; border:#F00 2px solid”>span是内联元素</span>；

比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。

5.css继承，css叠加也可能造成一些bug，这里要特别注意一下重置样式（css reset）中和公用样式（public）的继承。

二、开始调试

1.找一个合适的调试工具，比如FireFox Web Developer, DOM Inspector,遨游的PageView， Internet Explorer

Developer Toolbar, 还有Firebug等等，现在FireFox 的Firebug调试比较流行，他会把你所选择的DOM（标签）的相关样式都显示在右边，当然然其他工具也有这个这些功能。

2.确认问题所在的样式，主要可以看看第一部分说的为什么页面会出现种种的bug，修改并测试。
3.排出以上问题，如果还是找不到那里错了，那就用“平分法”删除样式；平分法就是一半一半的删除样式，直到页面达到你预想的那样位置，一半1分钟呢可以找到问题所在的那一行或者几行代码，这个方法要确保你的编辑器能任意的撤销，还原。

三、解决问题
1.学会用google，百度。ie6的大多数bug，firefox的清除浮动，都可以在网上找到，同时要靠自己积累经验。
2.问问题，到群里，论坛里问问题要注意方式方法；首先要表达清楚你的问题所在，能表达问题的做好方法是用简单的demo，告诉人家什么浏览器，什么样情况下会出错，做好把demo直接放到论坛，或者代码盒子，让人家最直接的看到你的问题，群里不要贴10行以上的代码，大家每天再看这些东西，你贴一堆，如果不是他空的无聊，我保证没人会看你的代码。不要只要答案！人家可能不会给你答案，只给你一些建议，一些提醒，或几个关键字，根据建议，提醒，关键字去google，百度搜索一下。比如：人家说这可能是清除浮动的问题，可能你从来没听说过清除浮动这个词，那就别问了，马上去google，百度搜索清除浮动。看看是不是这个问题，如果不是，告诉人家不是这个问题。不管有没有解决问题，跟人家说声谢谢，至少要心存感激。
3.回避问题，不是任何问题你都可以找到答案的，但是却可以找到解决方法。不是任何问题你都可以找到解决方法，但是却可以避免这些问题，比如，上下容器margin-bottom和margin-top重叠问题，其实这些问题可以回避，你把下一个浏览器的margin-top改成padding-top试试等等。

地球一小时的意义

在大力宣传下, 这个 07 年才开始的公益活动到明天将有超过 1000 个城市参与. 但是去年地球一小时活动的时候我就在想, 这个活动的意义究竟在于什么? 让人们意识到我们应该保护环境? 成为一项时尚的活动? 还是一件拿出来炫耀的东西?

据说地球一小时源于悉尼, 那么悉尼做的如何呢? 总所周知, 悉尼 CBD 高楼林立, 每天天黑以后, 大楼灯火通明, 给人感觉大家个个干劲儿十足, 实际上 5 点都准时闪了. 下了班, 拍拍屁股走人, 但办公室的灯要开着不能关. 没错, 至少我在悉尼的这两年多时间一直如此. 不信? 告诉你一个最好的角度, 天黑以后背对着悉尼歌剧院, 抬头看 CBD…… 还不信?? 那看看这里吧: flickr 搜索关键字 circular quay cbd night.

你说悉尼到处的宣传我们要爱护地球啊, 要节约能源啊, 要关灯一小时啊, 结果自己一年 364 天用电比谁都欢. 那这样地球一小时的意义是什么呢? 当然, 我不知道明天一小时全球能节省多少的电, 也不知道这些电对保护环境能起到多大作用. 是不是说, 只要全球一年关灯一小时, 本年度节约用电, 保护环境的任务就算是完成了……

有人肯定会说, 地球一小时的意义是在于让更多的人意识到我们应该努力的为地球的明天做贡献, 熄灯一小时只是一个开始, 而不是最终目的. 但实际的情况呢? 办公室需要提前一天留下字条提醒大家关灯, 麦当劳要在员工休息室贴上大字报, 以确保到时候广告灯箱关了. 这都两年间的第三次了, 对不起, 悉尼人还没培养出这样的意识. 恐怕要实现远大的宏伟目标, 需要几代人付出艰苦卓绝的努力……

其实我一直有这样的疑问? 为啥下了班等还要开着? 证明南半球的确有文明存在? 是说这样的开销能避掉税? (这条是胡诌的)…… 真不知道这样一年一年忽悠着全世界去环保的作用大呢, 还是干脆自己来个全年下班后熄灯的贡献大……

最后, 我按着按着突然明白了. 地球一小时恐怕是最廉价的环保了, 门槛非常的低, 什么都不需要, 一年关一次灯, done! 然后转天你就可以自豪的说, 昨儿晚上我地球一小时了, 你没有吧, 鄙视你, 一点都不环保…… 所以这样的廉价环保, 参与又有什么意义? 我宁可天天冲厕所时用半桶水, 天黑了再开灯, 少拎几个塑料袋……

[20090328周六活动] 木瓜小道登梅沙尖,俯瞰东部华侨城

【线路简介】：
梅沙尖坐落于盐田街道，背海观天，最高峰海拔753米，为深圳高峰之探花（第三）。其山脉连绵，所属山头包括有海拔619米的鹅公髻、海拔599米的园山、海拔553米的大王顶......远望如巨大尖锥从群山中拔起，因此而得名。梅沙尖山峰尖突，山水相间。登上山顶，大小梅沙美景、三洲田、东部华侨城美景一览无遗。感受郁郁葱葱、山海一体的景色，傍晚时可欣赏深圳最美丽的云海晚霞。

登梅沙尖有几条线路，木瓜小道是其中最好的一条。由于登山路开始的一段两旁长有很多木瓜，山友们就称之为木瓜小道。走过木瓜小道，穿越大片的竹林，再途经大王坳、小三洲塘水库和高山兰园，然后就到达山顶。一路绿树掩映，景色怡人，心清气爽，城市生活所带来的紧张和躁动，也随之而消失远去。

【活动时间】2009年03月28日周六

【活动主题】木瓜小道登梅沙尖,俯瞰东部华侨城

【活动线路】盐田检查站--木瓜小屋--小三洲田--梅沙尖--山海大观--东部华侨城（如果幸运的话）

【活动级别】标准-

【集合时间】上午9:30集合,10点准时出发，迟到不等。

【集合地点】盐田检查站,可以选乘85、358、380等到达。公交查询：http://shenzhen.8684.cn/

【活动费用】无，如晚上FB，则AA！

【活动召集】Mike Chen

【个人装备】必备装备：登山鞋（防滑运动鞋）、背包、手套、垃圾袋、雨具、遮阳帽、备用衣服、手机、电池。穿高跟鞋或者短裙的一律劝退。强烈建议MM、GG穿长袖衣裤。有手电筒的尽量带上！

【注意事项】
1、请自行购买保险
2、听从领队的安排，遵守团队纪律，集体行动，团结友爱，互相照顾，不要擅自离开团队路线，违反纪律者，后果自负；
3、注意安全，不要做无保护的攀爬、冒险，请勿丢弃不能自然降解的垃圾、尽量不破坏植被、严禁猎杀野生动物!
4、因天气情况或不可抗拒因素，召集人有权利对行程进行适当的调整；
5、尽量不携带金属、塑料等不易溶解包装的食品，活动产生的垃圾一律带离，不采摘林中植物，做到"留下的只是你的脚印，带走的只是你的留影"。