前端工程师新手必读

《前端工程师新手必读》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、前端工程师新手必读作者: 黄锦诚  发布时间:2012-08-0911:31  阅读:1620次  原文链接   全屏阅读　 [收藏]  　　公司招了几个刚毕业的学生，作为重构的新手让我来带。　　首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会，对我工作的肯定和认可，让我带这样的一个重构团队，同时我也明白任务的艰巨，但我一定会将工作做好，不负公司对我的期望。（哈哈，好像从小到大，老师都是教育我们要这样先说的。）　　在网站的发展史上，初期的网站建设根本不需要网页重构这个职位，Web1.0时代的

2、网页，只需要程序员，一堆堆的表格嵌套就完成，或者美工进行配合完成，先由美工负责设计好，再用一些自动化的软件拉伸几下，直接将设计好的图就可以通过软件输出表格的布局了，根本不需要重构这个多余的职位。随着Web2.0的到来和W3C的规范得到世人的认可，内容和样式的分离更方便进行开发和维护，传统的表格布局和内容混排的方式逐渐地被淘汰，美工已不能完全一手包办越来越复杂的效果和高要求的页面布局了。此因催生了一个新的职位——前端工程师。　　鄙人刚好作为一名Web2.0成长起来的前端工程师，虽然说做的项目不多，但

3、乐于与人分享。虽然分享的也许只是一些很表面甚至有些过时的东西，但也只希望为大家提个醒，最好能起到抛砖引玉的作用。　　一、前端工程师的职能和作用。　　什么是前端工程师？有人这样来表述：我们是工程师中的设计师，是设计师中的工程师。上班不干别的，就是玩，弄点效果，攒两页面，搞点创新。我们就是前端攻城狮（工程师）。当然这个表述有点轻巧、调侃的味道，工作绝对不是玩那么简单的，有时候会为一些效果的实现或优化，弄得加班加点一起开发，但其实有两一句表述是非常中肯的，那就是：我们是工程师中的设计师，是设计师中的工程

4、师。这句话将前端工程师的角色的定位说得很准确。　　前端工程师，在网站开发的初期，以工程师的身份来指导网页的设计，前端工程师明白程序输出的方法，指导设计师在设计的过程中避免一些不能输出的数据排版，指出哪一些阴影、透明、圆角不能大范围的使用等等；在进行页面重构的过程中，又将以一个设计师的身份将设计页面转化为静态页面，需要用代码对设计页面进行最初的还原，实现好相应的前台效果，排列好相应让后台开发的工程师输出数据的地方，以适应后台数据的输出并保持页面的不变形、不走位，在有数据输出正常的情况下，配合程序去修

5、改样式，以尽量达到和设计的效果基本一致。所以在这个页面设计和到程序的实现过程中，需要前端工程师起到一个桥梁的作用。　　前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术的角度来思考界面的实现，规避技术的死角，又要从用户的角度来思考，怎样才能更好地接受技术呈现的枯燥的数据，更好的呈现信息。简单地说，它的主要职能就将网站的数据和用户的接受更好地结合在一起，为用户呈现一个友好的数据界面。　　二、前端工程师的发展前景如何　

6、　前端工程师是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛，网页由Web1.0到Web2.0，再到新生的HTML5、CSS3，到现在手机、3G网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于前端技术实现的应用、交互和富媒体的呈现，更多的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天可覆地的变化。　　网站的开发对前端的需要越来越重要，高质量的前端开发工程师将会是后五年内一个非常热门的职业，发展的前景

7、非常可观。　　三、前端工程师需要掌握的技能　　作为一个前端工程师，需要掌握的技能还真的不少。　　最基本的三个技能：HTML、CSS、JavaScript。　　这是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。　　HTML：　　指的是超文本标记语

8、言(Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了XHTML，XHTML指可扩展超文本标签语言（EXtensibleHyperTextMarkupLanguage），XHTML于2000年的1月26日成为W3C标准，是更严格更纯净的HTML代码，XHTML的目标是取代HTML。XHTML与HTML4.01几乎是相同的，XHTML是作为一种X