前端工程师新手必读

公司招了几个刚毕业的学生，作为重构的新手让我来带。

首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会，对我

工作的肯定和认可，让我带这样的一个重构团队，同时我也明白任务的艰巨，但我一

定会将工作做好，不负公司对我的期望。（哈哈，好像从小到大，老师都是教育我们

要这样先说的。）

在网站的发展史上，初期的网站建设根本不需要网页重构这个职位，

WEB1.0 时代的网页，只需要程序员，一堆堆的表格嵌套就完成，或者美工进行配合
完成，先由美工负责设计好，再用一些自动化的软件拉伸几下，直接将设计好的图就

可以通过软件输出表格的布局了，根本不需要重构这个多余的职位。随着

WEB2.0 的

到来和

W3C 的规范得到世人的认可，内容和样式的分离更方便进行开发和维护，传统

的表格布局和内容混排的方式逐渐地被淘汰，美工已不能完全一手包办越来越复杂的

——

效果和高要求的页面布局了。此因催生了一个新的职位

前端工程师。

鄙人刚好作为一名

WEB2.0 成长起来的前端工程师，虽然说做的项

目不多，但乐于与人分享。虽然分享的也许只是一些很表面甚至有些过时的东西，但

也只希望为大家提个醒，最好能起到抛砖引玉的作用。

一、前端工程师的职能和作用。

什么是前端工程师？有人这样来表述：我们是工程师中的设计师，是

设计师中的工程师。上班不干别的，就是玩，弄点效果，攒两页面，搞点创新。我们

就是前端攻城师（工程师）。当然这个表述有点有点轻巧、调侃的味道，工作绝对不

是玩那么简单的，有时候会为一些效果的实现或优化，弄得加班加点一起开发，但其

实有两一句表述是非常中肯的，那就是：我们是工程师中的设计师，是设计师中的工

程师。这句话将前端工程师的角色的定位说得很准确。前端工程师，在网站开发的初

期，以工程师的身份来指导网页的设计，前端工程师明白程序的输出的方法，指导设

计师在设计的过程中避免一些不能输出的数据排版，指出哪一些阴影、透明、圆角的

使用不能大范围的使用等等；在进行页面的重构的过程中，又将以一个设计师的身份

将设置页面转化为静态页面，需要用代码对设计页面进行最初的还原，实现好相应的

前台的效果，排列好相应让后台开发的工程师输出数据的地方，以适应后台数据的输

出并保持页面的不变形、不走位，在有数据输出正常的情况下，配合程序去修改样式，

以尽量达到和设计的效果基本一致。所以在这个页面设计和到程序的现在过程中，需

要前端工程师起到一个桥梁的作用。

前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻

巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术