Web前端开发最佳实践(小样).pdf

第一部分 Part 1 高效 Web 前端 开发综述 ■ 第1章　Web前端开发概述 ■ 第2章　高效Web前端开发 Chapter 1 第 1 章 Web 前端开发概述 本章首先会简单介绍Web 前端开发的历史由来，以及前端开发的概念及其范 畴，让读者对前端开发有个整体的认识，同时还会对前端开发的一些错误认识进 行更正。其次会介绍一下Web 前端的现状，包括互联网整体环境、浏览器的发 展、网站的设计和开发现状等，让读者认识到前端开发的现状和趋势，以便更好 地提高自身的前端开发技能。 1.1　Web 前端开发的范畴 1.1.1　什么是 Web 前端开发 什么是Web 前端开发？也许有人会说Web 前端开发就是网页设计，就是美 工，也有人会说Web 前端的工作就是使用工具拖曳生成各种界面，然后导出为网 页。其实这些都是对Web 前端的误解，或者说还是停留在过去对前端开发的认 识上。记得某个求职节目中，某互联网公司负责人对前来求职的前端工程师说他 们理解的Web 前端是需要用Java 的，是需要用这种语言编写的。一个互联网公 司的负责人竟然对自己公司使用的核心技术概念知之甚少，这实在是让人匪夷所 思，更是闹了不小的笑话。此事件也激起了业内针对Web 前端概念的大讨论，不 过也从侧面说明Web 前端这一概念还没有深入人心。的确，Web 前端兴起的时间 还很短，这也就导致了很大一部分人不太了解这个新型的职业，所以我在这里再 次解释一下Web 前端这个词语的来龙去脉。 第1章　Web前端开发概述 3 对于Web 前端，业内公认的说法是从2005 年开始兴起的。2005 年以前，因 为Web 网页主要以展示为主，内容基本都是静态的，所以客户端开发工作的目的 就是让页面展现得更加整齐和漂亮，没有太多花哨的内容。网站的用户也只是以 浏览为主，并不会有复杂的交互。正因为如此，一般的美工仅依靠Photoshop 和 Dreamweaver 等工具就可以制作出外观漂亮的静态网页。2005 年之后，互联网进 入Web 2.0 时代。Web 2.0 更注重用户的交互作用，用户不再只是读者，同时也 是作者。用户不再是仅仅阅读静态的网页，同时也为网站贡献内容。随着这一概 念的发展，人们开始重新审视网站的设计，制作的网页慢慢变得生动起来，页面 也有了大量的交互，不再是简单地展示静态的文字和图片。Google Gmail 的发布， 使得AJAX 技术大红大紫，这也把对Web 2.0 的概念的认识推上了一个新的高 度。AJAX 无刷新技术极大地增强了网页的用户体验，使得用户操作页面更流畅， 操作体验更接近于本地应用。此外，搜索引擎的普及使得网站的搜索引擎优化受 到了重视。搜索引擎对网站的外观并不感兴趣，只识别网站的HTML 代码，这就 要求网站的设计者和开发者不仅要重视网站外在的用户体验，还要重视网站内在 的代码质量。 随着网站功能的丰富、设计风格的发展以及网站代码质量的要求，网页端的 开发也变得复杂起来，其代码量和逻辑复杂度都增加不少，同时还需要考虑网站 的性能、浏览器兼容及网站安全性方面的问题。传统的网站开发者仅仅会使用网 页制作工具已经不能够满足目前的需求了，此时的网站开发更接近于后端开发， 需要有专门的软件开发工程师来做网站开发相关的工作，于是原来的网页制作这 一职业就演变成了Web 前端开发。从职责上讲，Web 前端开发要涉及网站开发 的方方面面，从前端UI 到和后端的数据交互都属于前端开发的范畴。因此，Web 前端开发是兼具艺术气息和逻辑思维的综合体，既要考虑页面的美感和操作体 验，又要关注前端代码的质量。 1.1.2　Web 前端开发需要具备的技能 由于Web 前端技术兴起的时间不长，因此它还没有明确的界限定义，不同的 Web 项目中可能要求的Web 前端开发技术会有所不同。例如，某些项目可能需要 前端开发人员了解一些后端技术，这样前端开发人员才可以更好地与后端开发人 员配合，如在页面上留下一些后端需要调用的“钩子”等，而某些项目可能需要 前端开发人员懂一些UI 设计、Photoshop 工具的使用方法等，以便于和UI 设计 师沟通和配合。虽然Web 前端开发的范畴广泛，并且界限模糊，但是以下7 点是 Web 前端开发必备的技能。 4 第一部分　高效Web前端开发综述 1. 页面标记（HTML ） 由于页面HTML 代码结构基本固定，HTML