前台开发技术那些事儿

边抽烟边写文章的时候感觉自己像个作家而不是一个软件工程师，很多人问我前台技术怎么才能学好，也有很多人不屑于前台展现技术认为那些低技术含量的。5年前也许是这样，10年前我也不知道是什么样子，因为我自己也才出道2、3年，毕业1年多而已！但是我越来越觉得前台展现技术的革新将给前台开发者的地位带来一些影响和变化，前提是他们真的不断的在与时俱进。

 

HTML真的那么简单么？CSS只是美工的专利么？面试过的人99%告诉我Js就是用来验证输入框数据用的。可能3年前的人这么回答，3年后还有人会这么去回答。其实很明显它们还不懂得什么是真正的Web开发，哪怕是一些大的外包公司在中国给一些大的国营企业做项目的时候，使用的前台技术也仍然是10年前的水平。记得在径点给实习生做培训的时候就说过，有一定审美水平的人才能做得来前台开发，如果他们想兼顾后台，自学一下非常简单。而审美古怪的人不管如何努力，也不能胜任前台开发，永远只能在后台的Action，Dao，BO，Socket，Entity，Factory之间徘徊。

 

懂得一些前台技术的人就明白，真正的Js/CSS技术入门容易，精通就难了，对于任何一门语言道理都是相通的。如今在Ajax技术非常成熟，前台用户体验要求越来越高的背景下，Js的无所不能就日趋明显。像Prototype、JQuery、ExtJS、DWR这样的框架也就越来越受欢迎。可怜的是很多工程师连Js语言都不了解就开始频繁使用这些框架，连CSS是什么都不知道就跟人说我做了很多漂亮的页面。

 

HTML5的推出已经提到日程上了，Flash虽然占据了很大一块市场，但运行速度和AVM的依赖也让它无法垄断前台展现技术，所以JS+CSS仍然是备受重视的技术。如何学好前台开发技术，也许这个问题更值得我们关注，也恰恰是目前的高校课程所覆盖不到的区域。

 

先说说CSS，学好它之前必须充分理解HTML这门语言，HTML/CSS的精髓就是盒模型。主流的页面元素DIV/SPAN/P/TABLE/LABEL等，都具有内边距padding、外边距margin、边框border，内边距在内部隔离内容和外框间的距离，而外边距对外隔离整个框和其他框的距离。由此来达到对齐、布局的目的。各个距离都清晰的情况下，整个盒模型的尺寸也就是这个元素的width和height也就能够算出来的。不幸的是每个浏览器的计算方式不统一，有的把border算进width之内，有的不算。这样导致整个元素占据的空间就有细微的区别。这种细微的2像素有时候甚至会影响到页面布局的错乱，前阵子听说连Facebook都不再support IE6浏览器了，建议开发者在不熟悉W3C规范的情况下在页面代码的起始位置加上<DOCTYPE!...声明，目的是引入W3C的CSS解析规范，屏蔽浏览器自己的解析规则，这样能大量减少奇怪的CSS现象。当然，如果不知道DOCTYPE是什么玩意，请恶补一下XML基础知识先！

 

再说说Javasript，关于JS的技术文章之前我也写过很多了，这里主要是腔调一下它跟CSS配合上的多样性，在开发中用好JS的精髓在于理解DOM模型，包括事件传递的冒泡和捕获两种方式等。当今Web开发为了增强用户体验，我们很频繁的需要用Js来操作页面元素也即DOM元素的CSS属性，常见的就比如修改display/vibisility/overflow/text-decoration等，更细微的体验比如修改透明度来实现淡入淡出，修改scrollLeft来实现滑动飞入飞出等等。试想一下这些Js代码首先不会是由鼓弄PS的美工去完成吧？那么由工程师去完成的话你如果认为CSS就是美工才需要的玩意，连里面的属性名都不知道，在各个浏览器好不好使也不知道，如何能够写出优雅高质量的JS代码从而实现优雅的用户体验呢？我想这方面的技术和功夫经验的积累跟创建一个DB连接执行一条SQL语句比起来，还是要复杂得多吧！

 

正由于主流的浏览器厂商之间还未达到完全统一，前台的兼容性开发和用户体验技巧才显得越发重要，越发需要规范和高质量的代码。我这么说并非说明我是一个偏重前台开发的工程师，只是想强调前台技术跟后台同样重要，优秀前台工程师也非常值得尊重。无数次面对那些来应聘的用过几次SSH框架就说自己精通Java开发的人，我只用几个Java语言本身的基础的问题就得到了我的答案：Object类有哪些方法？Java的int有几位？JVM是如何工作的？

 

在我看到编程语言本身没有难易之分，当你习惯了几种语言并且开发使用它们来开发软件给客户和人们提供服务的时候，应该随时都保持清醒的回到这门语言的底层本质去锻炼和摸索，这样才能真正熟练掌握它！