The Way Life's Meant to Be

今天下午是生平头一次当面试官,面试三个外包的实习生,第一个我开场,古西风接手,后面的就是他主要提问, 我补充问题顺便记录了。来面试的同学,专业对口,但能力一般,走上前端工程师这条路, 投名状都是一次为期三月培训,一年不到的工作经验,把 PSD 转成 HTML 占了绝大部分,而这种工作, 已经有很不少的网站和公司在将它自动化了。

外包的同学,基础比较差,不应该期望太高,古西风告诉我,更应该看重的是他的学习能力和是否有此意愿。 深以为然,然而看到诸多迈入前端大门的弟弟妹妹们茫然不知所以,在前端知识层面已如此丰富, 技术日新月异的今时今日,反而打不好基础,让我很困扰。

追求

所以我啰嗦几句,讲讲我的看法。本文的标题是《The Way Life’s Meant to Be》,没错, 我在讨论绳命的意义,但不弄玄虚,这个大题目对我来说有个简单的答案,就是电影《当幸福来敲门》, 它的英文名字叫做《The Pursuit of Happiness》,出处是美帝国主义的《独立宣言》。 所以我的看法很简单,人应该去追求幸福,而程序员的幸福,群体上是被认同,自我实现上说,是搞定牛逼的产品。

追求

而于前端工程师而言,这两方面其实都不难达成。我们的代码最容易交流,它们天生就在网络上流窜, 你的代码清楚、简洁,像 jQuery 般挠到了别人的痒处,你便功成名就,jQuery 的作者 John Resig, 早已不在 jQuery 项目中担任十分核心的角色,但这个项目成长了起来,甚至形成了自己的基金会, 与 Qunit、TestSwarm 一起成为一系列的前端解决方案:

  • jQuery
  • jQuery UI
  • jQuery Mobile
  • Sizzle
  • QUnit
  • TestSwarm
  • plugins.jquery.com

它是同僚认同与自我实现的完美结合。

日省吾身

但这跟我有什么关系?我只要把它用好就行了哇,而且,严格说,我只要把 KISSY 用好就行了, 毕竟我要做的只是网页,它们只是一堆视觉元素与交互的结合而已,可能我需要学习一些奇技淫巧来完成我的日常工作, 但它们终归是有穷尽的,对吧?

假如你希望自己成为前端工程师,而非切图的,则上述态度即大缪。不过我不想啰嗦什么知其然知其所以然之类的话, 我想说的是本着追求幸福的目的,不管我们从事的是什么工作,都该要求自己多一些些,是的我切图切得很好, 我完美地实现了视觉设计师的要求,position: absolute 定位得无比顺溜,KISSY.io 请求发得天衣无缝,甚至我的 HTML 都是语义化的,我的 CSS 还用到了面向对象的思想,但我仍然要提醒自己, 哎呀我的代码还没进版本控制系统,我的交互组件代码写得七零八落每次都得从一个地方拷到另一个地方再删删改改, 我的 CSS 里选择器写得好像不太好,为什么页面重绘时会这么卡?

这才是我认为的前端工程师的追求,我们实现需求,我们也实现自我价值,而我们对自己的要求, 永远都该超过老板对你自己的期望,如此才能让你的老板发现,士别三日当刮目相看。

别误会,这不是一篇劝你做牛做马当篇好员工的文章,只是希望既已搞技术的你,能有正确的做事态度,能有进步。

书单

然后是书单,列一些我看过的没看过的前端技术书籍,希望大家可以少在二手信息里绕圈子。

HTML 与 CSS,可以看 HTML Dog

对 HTML,别管 HTML5 是什么东西,先问自己三个问题:

  1. 这些标签的意思
  2. 它们分别适合用来标记什么内容
  3. 它们的英文全名叫什么(这对帮助你记忆很重要)

然后,把 HTML 提到 Web 层面,补充知识:

  1. 如何不用 JavaScript 往后台提交数据?
  2. URL 具体是什么意思,它有几个组成部分,参数该如何传递?
  3. 从你在浏览器中输入 http://etao.com,到一淘网页展示,这个过程发生了什么?

CSS,需要知道如下知识点:

  1. 盒子模型(box model),padding、border、margin 在此模型里的先后顺序。
  2. 绝对定位
  3. 浮动定位,为什么以及如何 清除浮动
  4. 了解上边俩,就容易理解固定与流动式布局,以及什么是 栅格
  5. 选择器,理解选择器优先级。

接着是 JavaScript,今天面试的时候,有个小伙子说他学习前端知识都是通过 w3cfuns.com,刚好那儿有张图片,我借过来用一下,算是奉劝不想认真学 JavaScript 的诸位,或许你们该重新考虑一下职业规划:

不会 JavaScript 能混前端么?

学习 JavaScript,如下几本非常值得推荐:

  1. JavaScript 语言精粹
  2. DOM Scripting
  3. 基于 MVC 的 JavaScript Web 富应用开发
  4. Professional JavaScript for Web Developers
  5. JavaScript 设计模式

刚上路的同学,看掉前两本就可以了,想进阶的同学,把剩下的看掉吧。还有本很有名而且超级厚的书, 叫做犀牛书,《JavaScript 权威指南》, 非常厚脸皮地说,我没有看过,自行判断吧。

技术爱好者

学无止境的,搞定了 JavaScript,用熟了 jQuery、KISSY 之流,我们可能仍然发现做一些事情力不从心。 模块化到底是什么意思?大牛们扯的 AMD、CMD 又是什么,不会跟美帝国主义的导弹防御系统(TMD)有啥联系吧? 听说后端有个东西叫做 NodeJS,什么无阻塞、事件化的 IO,好像很厉害诶?

怎么突然有人说分号 不需要用了? 那个看起来很离经叛道的 CoffeeScript 到底是干啥用的? 哇,原来还有 SASSLess 这种东西, 终于不用重复写 .products-bd .product .title span 了。

然后突然又有人说,回调写起来好讨厌,类似 jQuery 里的 $.get$.ajax,每个 API 的参数还不一样, 它们得统一起来

Brick.prototype.strike = function() {} 这么写面向对象好像也很有些累啊, 既然 JavaScript 原生的这么挫,我们应该有个自己的解决办法

突然又有人说,我们的网页早就不仅仅是几次异步请求,和黄黄的消息提示框就能摆平的了,看看 gmail 和 Google Calendar 之流吧,它们更像是软件而非网页,要有 MVC! 于是,我们又有了 Backbone, 有了 Magix

等等,这个时候你该会有个问题了,为什么大牛们总能够搞出各种五花八门,让前端世界日新月异呢

因为创造出这些满目玲琅,决定了整个前端生态的人们,他们都是真正的技术爱好者,他们的眼界, 不仅仅是 HTML、CSS、JavaScript 这一亩三分地,他们知道除了我们已经有的这些之外,还有更好的。 于是,任何对这三项技术的补完,基于这三项技术的抽象,只要它们提高了前端开发的效率,就完成了一次创新。 而绝大多数时候,这些创新都不是从头开始的,我们可以在许许多多领域找到它们的影子。

所以,因为眼界

而拓宽眼界的最好办法,就是成为一个真正的技术爱好者,喜欢探索、发现,了解计算机的技术演化历史。 熟悉本职工作之外的语言;接触过除了 Windows 之外的操作系统;了解 GBK、UTF-8 这些编码是怎么回事, 什么是 Unicode,它们是要解决什么问题;知道什么是命令行,正则表达式从何而来;甚至了解什么叫语法树, 有限状态机又是什么货色,等等。

学习它们,对你的年终评审可能没有半毛钱用处,但是它们能够拓宽你的眼界,直到有一天, 突然有个合适的问题出现在你眼前,你拿出自己的工具箱,干干脆脆地结果它。

如此,方成大牛。

最后给大家推荐一部电影,它以 Linux 的演化史为主线,串出多位计算机史上影响深远的任务, 假如你在学习、进步的路上需要技术大拿作为偶像,不妨从中挑选。这部电影叫做 《操作系统革命》。

烂尾

心灵鸡汤型的文章,我写得很差,大家凑合一看,有错漏的地方,请务必告诉我,贻笑大方不妨, 遗臭万年可就压力大了。