前端工程师新手必读

《前端工程师新手必读》由会员分享，可在线阅读，更多相关《前端工程师新手必读（16页珍藏版）》请在金锄头文库上搜索。

1、前端工程师新手必读前端工程师新手必读作者: 黄锦诚 发布时间: 2012-08-09 11:31 阅读: 1620 次 原文链接 全屏阅读 收藏 公司招了几个刚毕业的学生，作为重构的新手让我来带。首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会，对我工作的肯定和认可，让我带这样的一个重构团队，同时我也明白任务的艰巨，但我一定会将工作做好，不负公司对我的期望。（哈哈，好像从小到大，老师都是教育我们要这样先说的。）在网站的发展史上，初期的网站建设根本不需要网页重构这个职位，Web 1.0 时代的网页，只需要程序员，一堆堆的表格嵌套就完成，或者美工进行配合完成，先由美工负责设计好，再用一些自动

2、化的软件拉伸几下，直接将设计好的图就可以通过软件输出表格的布局了，根本不需要重构这个多余的职位。随着 Web 2.0 的到来和 W3C 的规范得到世人的认可，内容和样式的分离更方便进行开发和维护，传统的表格布局和内容混排的方式逐渐地被淘汰，美工已不能完全一手包办越来越复杂的效果和高要求的页面布局了。此因催生了一个新的职位 前端工程师。鄙人刚好作为一名 Web 2.0 成长起来的前端工程师，虽然说做的项目不多，但乐于与人分享。虽然分享的也许只是一些很表面甚至有些过时的东西，但也只希望为大家提个醒，最好能起到抛砖引玉的作用。一、前端工程师的职能和作用。一、前端工程师的职能和作用。什么是前端工程师？

3、有人这样来表述：我们是工程师中的设计师，是设计师中的工程师。上班不干别的，就是玩，弄点效果，攒两页面，搞点创新。我们就是前端攻城狮（工程师）。当然这个表述有点轻巧、调侃的味道，工作绝对不是玩那么简单的，有时候会为一些效果的实现或优化，弄得加班加点一起开发，但其实有两一句表述是非常中肯的，那就是：我们是工程师中的设计师，是设计师中的工程师。这句话将前端工程师的角色的定位说得很准确。前端工程师，在网站开发的初期，以工程师的身份来指导网页的设计，前端工程师明白程序输出的方法，指导设计师在设计的过程中避免一些不能输出的数据排版，指出哪一些阴影、透明、圆角不能大范围的使用等等；在进行页面重构的过程中，又

4、将以一个设计师的身份将设计页面转化为静态页面，需要用代码对设计页面进行最初的还原，实现好相应的前台效果，排列好相应让后台开发的工程师输出数据的地方，以适应后台数据的输出并保持页面的不变形、不走位，在有数据输出正常的情况下，配合程序去修改样式，以尽量达到和设计的效果基本一致。所以在这个页面设计和到程序的实现过程中，需要前端工程师起到一个桥梁的作用。前端开发是一项很特殊的工作，前端工程师的工作说得轻松，看似轻巧，但做起来绝对不是那么的简单。在开发过程中涵盖的东西非常宽广，既要从技术的角度来思考界面的实现，规避技术的死角，又要从用户的角度来思考，怎样才能更好地接受技术呈现的枯燥的数据，更好的呈现信息

5、。简单地说，它的主要职能就将网站的数据和用户的接受更好地结合在一起，为用户呈现一个友好的数据界面。二、前端工程师的发展前景如何二、前端工程师的发展前景如何前端工程师是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过 5 年。互联网的发展速度迅猛，网页由 Web 1.0 到 Web 2.0，再到新生的 HTML5、CSS3，到现在手机、3G 网络等新科技的兴起，网页也由最原先的图文为主，到现在各种各样的基于前端技术实现的应用、交互和富媒体的呈现，更多的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天可覆地的变化。网站的开发对前端的需要越来越重要

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

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

8、HTML 定义为最新的 HTML 版本。所有新的浏览器都支持 XHTML。另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是 HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为 HTML 世界注入更多惊喜，尽管 HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，更多的效果和应用也能更方便的实现。前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。其实 H

9、TML 的元素也就不过几十个，常用的元素更少，所以掌握起来的话应该不困难。但就是这些看似简单的元素，很多新手在刚开始的时候就不注意规范，养成一些不好的习惯。1、不要忽略一些细节随便打开一个个网站，随手点到了 163（点击链接可直接查看）的首页，163 算是一个比较规范和专业的门户网站了，已经用上了 HTML5 的一些元素了，具体可以看到源文件。在头部的焦点广告图那里，用小 BUG 右键查看一下元素，看到这样的一个图像标签 img 代码：img 必备和可选的参数都有写了上了，但是必备参数里的一个值 alt 没写（其实一些大型的专业门户网站其实也是有存在一些小问题的，只要我们细心一点就能发现）。虽

10、然这样 alt 不写，在页面中也不会有任何的问题，因为这个 alt 属性也只是在图像丢失、禁用或加载不到的情况下才显示，但是如果一些其他特定的设备访问或一些其他条件下图片不显示的情况下，那这里就是一块大红 XX 和一大块白块，多影响用户体验。虽然只是一个小小的 alt 属性，但是有时候是细节决定决定成败，用与不用，表面上看不出有什么问题，但是在某些特定的条件产生的作用是无法估计的，也就是从这些小小的细节就可以看出一个前端工程师的水平如何。一些前端的新同学甚至什么也不填，放一张无任意命名意义的图上去就算了事，养成这样的习惯是非常不好的。2、规范语义使用标签很多同学说是学习 div+css，其实这

11、个说法是存在误区的，甚至是错误的。一个规范标准的页面是合理地使用标签，使其更加语义化，如果只是靠一堆堆的 div 通过层层的嵌套来布局完成的话，那么，除了 div 和 a 标签这两个标签外，所有的 HTML 元素都没有存在的必要了。上面是一个前来应聘的朋友发给我看的一个页面布局作品（点击进行查看），这个同学还算是工作了一定时间的，据他介绍之前是在游戏公司工作的，但不知是不是当时所在的公司是不是他负责前端这块的，不做评论。这个朋友的页面在浏览器查看没有什么大问题，浏览骂的兼容性还可以说是没有太大问题的，虽然从页面的效果上看起来没有什么问题，用小 bug 一看，可以看到他写的这个代码好像还蛮整齐的

12、，所有的东西都是一层层的 div，包裹得很仔细，类的命名也很有规律，但仔细一看，这个导航做的很有问题。查看一下源文件，发现不仅仅只是导航的问题了，整个页面都有问题，所有的 body下出现过的 HTML 标签加起来总共只有七个，分别是：div、a、strong、font、input、br、img。先不说他写行内样式、align 在 HTML4.01 中已经丢弃的属性这些很低级错误的问题，一个很大的问题就是，语义的使用极不规范，使用层层的 div 来包裹定位。例如这个导航可以用一个无序列表 ul 来就可以完成了，这样简洁明了，不需要这么多 div 和巨量的样式来进行控制，最重要的是语义化也比较清晰

13、了。网页布局就像是一篇文章那样，有标题、有段落、有加强、有突出，HTML 提供了这么多的元素给我们使用，就是要求我们要按照其语义来使用，该用标题的时候用标题（h），该用段落的时候用段落（p），该重点强调的时候用强调（em, strong），而不是都不管三七二十一，千篇一律的先用 div 来包裹再来进行控制。我们使用了这些相应语义的 HTML 元素，同样可以使用 css 来进行控制的，可以达到任何我们想要的布局效果的。css 的魅力就在于此。研究表明， 语义化的标签，越少的嵌套，对浏览器的解析就越快，显示的速度就越快，当然对不同用户群的用户体验也就越好！特别是对于一些特殊群体和阅读设备，如盲人，

14、使用的是阅读HTML 的机器，对于一块块的 div，就不知道哪里是标题哪里是正文了，只能阅读到的是这里有一整块的内容。如果使用的是语义化的标签就不一样了，即使看不到屏幕，但也知道哪里是标题哪里是标题下相应的正文。所以，我们有 css 这个这么神奇的东西帮助我们网页布局的时候，语义化的使用 HTML 标签，用最少的嵌套和代码实现同样的效果，就是我们前端工程师所追求的。再次回到前面 div+css 布局的一些误区，什么是 div?它的英文名是 division，意思是分开、分割、分块的意思。也就是说 div 在网页中是用来进行分块布局或是在没有更适合的 HTML 元素的情况下用来配合分块布局的，如

15、果胡乱的滥用 div，那么就会犯上“div 控”了。刚入门不久的新同学最容易会犯这种思想的。CSS：CSS (Cascading Style Sheets)指的是层叠样式表，现在普遍在用的版本是 CSS 2.1 ，虽然已经发布了 3.0 的版本，且有一些个人的博客和站点已经使用 HTML5+CSS3 了，但受目前国内的主流浏览器 IE6 的影响，更多的人还是在使用 2.1 的版本，在这个的基础上有选择性的使用少量的不影响兼容的 CSS3 的某些功能，CSS3 的普及还需时日。不管如何，CSS3 的出现让我们眼前一亮，增加了很多新的属性，如圆角、阴影、渐变、动画、流媒体等等的效果，让页面实现的效

16、果更加方便和容易。现在要和大家分享的并不是 CSS3 那些激动人心的属性如何使用和实现，因为这些当我们学习到了一定阶段的时候都会去学习到 CSS3 这个将来必将成为王者的使用，现在与大家分享一些与版本无关的东西，让大家在学习的过程中少走一些弯路。1、 Reset关于重置也有太多的东西要说了，YUI、Eric Meyer 等都有各自不同的方法，甚至有些人是不用重置的，不管怎样，只要遵循一个原则：适合自己的就好。所以不对这方面过多的强求，也不作过多的讨论。因为要讨论的话几大篇幅也讨论不完。当然我自己有一个自己用的 reset 的地方，究竟好与不好，大家有空的时候可以研究，最好能把研究的结果与我分享，我也很愿意听。这个是我的 Reset 的文件，大家可以点击下载（aqy106_lab.css）2、 样式书写要注意的事项看过Efficient, maintainable CSS的译文如何书写高效、可维护、组件化的 CSS，里面讲到一些样式的书写要注意的事项。还是看一看这个同样是一个新同学写的样式，看上去很整齐，命名也很有次序，但是仔细一看，问题还是很多的，