高效Web前端开发之路——YUI 3.15(txt+pdf+epub+mobi电子书下载)

作者：钱伟,刘艳春

出版社：清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

高效Web前端开发之路——YUI 3.15试读：

前言

JavaScript是一种基于原型继承的、面向对象的动态Web脚本语言，其被广泛应用于多种Web平台，是目前最流行的Web前端编程语言，也是Web标准化的三驾马车——结构标准化（XHTML 1.0）、表现标准化（CSS 2.1）以及行为标准化（ECMAScript）中ECMAScript的具体化形式。使用JavaScript，开发者可以编写功能强大的脚本。在当下以用户体验为核心的开发大环境下，JavaScript具有重要的作用。但是作为一种弱类型、无具体对象操作功能的脚本语言，JavaScript也具有先天的不足，其必须借助其他的对象模型（例如XHTML DOM、HTML DOM或XML DOM）来操作各种Web元素，因此在使用JavaScript时，必须考虑各种Web浏览器对JavaScript本身的解析，以及对DOM的表现方式。这也是JavaScript难于使用的根本原因。

基于以上原因，众多具有开拓创新精神的JavaScript开发者们编写了各种各样的第三方JavaScript框架。这些框架的共同点就是通过插件的方式，为普通开发者提供简化的语法以及具有良好封装的接口，供普通开发者快速调用预置的模块，提高开发效率，降低兼容性BUG产生的几率。

目前，常见的JavaScript第三方框架包括大名鼎鼎的JQuery、Prototype、Ext JS、Dojo和YUI等。这些第三方框架各有各的侧重点：JQuery注重简洁和高效，但在功能上相比一些老的框架尚有不足；Prototype注重代码的优雅，基于底层，易学易用，体积精简，但功能较弱；Ext JS的特点是高性能，具有可定制的Web UI控件库、丰富的文档和可扩展的组件模型，但学习难度较大；Dojo是目前功能最强大的JavaScript框架，具有强大的界面和特效封装，但使用较难，语法增强方面较弱。

相比而言，YUI以DOM脚本来简化Web开发，并提供大量高交互性的可视化元素，同时学习难度较Ext JS和Dojo等较小。总体而言，YUI是一种极其优秀的第三方框架。由于其有Yahoo的开发团队维护，因此在版本更新维护方面也比较稳定，不断地推出新版本，由此产生了诸多的拥趸。

本书将以YUI 3.15版本的框架为基础，通过通俗易懂的语言和大量丰富的实例，帮助读者解决实际生产环境中的各种问题，提高Web前端的开发效率。

1．目标读者

本书作为一款YUI框架的入门图书，主要面向具有较强学习能力或一定编程基础的初学者，初学者可以按照篇目顺序依次阅读和学习，逐渐掌握前端开发的基础技术和YUI框架的实用开发技术。

当然，在阅读本书之前，读者如果能对XHTML/HTML或XML等标记语言和CSS样式表具有一定的了解，具备一定的JavaScript基础知识和一些面向对象程序设计理论知识，则在理解本书讲述的各种程序开发思路时，会更得心应手。

如果读者已经具有相当水准的Web开发基础或已经熟练掌握一般前端开发技术，则可以直接跳过第一篇，从第二篇中的后半部分开始学习，或者直接学习第三篇的YUI框架内容。相信通过第三篇正文中的大量具体实例，读者可以非常容易地了解YUI框架的特点以及开发方式。

2．主要内容

第一篇作为全书的开篇，简要介绍了Web开发的各种理论基础，以及采用的相关静态技术，包括HTML、CSS等，帮助开发者了解前端界面的显示方法。

第二篇通篇承上启下，介绍了Web前端交互的相关背景，以及Javascript脚本语言的语法、基本开发方式、面向对象的程序设计以及Web开发中采用的其他交互技术，如浏览器对象、HTML DOM以及前端事件的处理等，为开发者们学习YUI框架打下基础。

第三篇以较大的篇幅详细介绍了YUI框架的基本知识，加载和使用YUI的模块，自定义模块和YUI辅助工具，以及使用YUI框架处理DOM元素和节点、处理增强事件、操作样式表等前端交互的方式。最后，还重点介绍了使用YUI框架来实现前后端异步数据交互的方法。通过这些内容，开发者可以与后端程序员配合开发出完整的Web项目。

全书以阶梯的方式逐级介绍各种相关知识，由浅入深，由易至难，但又结构清晰。用户可以根据实际的需要，选择性地阅读相关篇章即时补充知识，满足生产环境的需求。

3．学习准备工作

在学习本书所讲解的内容时，读者需要有一台可以联接互联网的计算机，并安装Windows或Mac OS操作系统。除此之外，读者还应在操作系统中安装以下几款软件，包括至少一款主流的Web浏览器（例如Internet Explorer 8.0、Firefox 3、Opera 10或它们的更新版本）、一款文本编辑器（Notepad++）或其他有效的开发平台工具（Dreamweaver、Zend Studio、Eclipse或WebStorm等）。本书所有实例均采用WebStorm开发。如果读者需要使用Ajax前后端交互功能，则需要安装服务器端软件（例如Apache、IIS）、PHP编译器以及数据库软件（MySQL、SQL Server）等，并正确地配置服务器环境。

在学习YUI框架时，读者可能会频繁使用浏览器调试工具（例如Internet Explorer自带的IE开发人员工具、Firefox的Firebug插件或Opera的DragonFly工具）。在选择了对应的Web浏览器后，需要确认这些浏览器调试工具可以正常工作。

4．示例源代码

示例源代码本身仅仅是向开发者介绍某种需求的应对方法。基于篇幅的限制，在本书的正文中，可能不会提供全部的示例代码，而仅仅提供其中最重要的部分，而对于这些纯数据性的内容，开发者可以根据代码的结构自行补充或将其忽略。

5．勘误声明

尽管本书作者已竭尽所能地勘察校验，但是错误总是难以避免。如果读者在本书中找到了错误，例如文法错误或代码错误，请告知本书作者，以便作者能够尽快改正错误，在此致以由衷的感谢。

除了封面署名人员之外，参与本书编写的人员还有李海庆、王咏梅、王黎、汤莉、倪宝童、赵俊昌、康显丽、方宁、郭晓俊、杨宁宁、王健、连彩霞、丁国庆、牛红惠、石磊、王慧、李卫平、张丽莉、王丹花、王超英、王新伟等。在编写过程中难免会有漏洞，欢迎读者通过清华大学出版社网站www.tup.tsinghua.edu.cn与我们联系，帮助我们改正提高。编者

第1篇 筑基篇

第1章 Web开发基础

Web开发与其他软件工程的开发一样，是一个庞大的系统工程，其与其他类型的软件工程又有极大的区别。在开发其他软件工程时，开发者仅需要了解项目所使用的一种编程语言以及数据库的操作语言即可，而Web开发涵盖了极其广阔的技术，需要开发者熟练掌握多种开发语言，并能够使用各种工具。

Web开发项目比传统软件工程项目更加复杂和多样，对开发者的要求也更高。那么Web开发者需要了解哪些技术呢？这就是本章需要介绍的内容。

1.1 什么是Web

从字面上理解，Web即“网”，是对全球无数错综复杂的终端设备上的各种数据资源的具象化命名。在软件开发领域，Web等同于万维网，又被称作WWW（World Wide Web， W3）等。Web并不等同于互联网（Internet），其仅仅是依托互联网的一项服务，也可以被称作互联网业务的一个子集。使用Web，就是通过指定的协议从互联网中发布或获取数据。1.1.1 WWW的产生

自从人类第一台计算机ABC（Atanasoff–Berry Computer，阿塔纳索夫-贝瑞计算机）诞生以来，学者们认为不同的计算机之间需要进行通信和数据的传输，以提高科学数据的分享范围和计算机系统的使用效率。

以上理由直接促使美国国防部于20世纪60年代研发和组建了人类历史上第一个计算机网络——APPA网络，并在1973年将该网络扩展成为一个跨国际的通信网络——互联网（Internet），实现由美国到英国和挪威的远程计算机联接，并逐渐延伸到全世界范围。

早期的互联网仅用于学术以及军事用途，且仅支持传递普通的文本数据和富文本数据。虽然相比基于模拟技术的电话和电报，互联网已是极大的技术进步，但是其仍然具有一定的局限性。

1990年，麻省理工学院教授蒂姆·伯纳斯-李爵士（Sir Tim Berners-Lee）首次将超文本系统、传输控制协议以及域名系统结合在一起，架设了世界上第一个Web站点，并开发了世界上第一个Web浏览器和Web开发工具WWW（World Wide Web）。WWW浏览器在NeXTSTEP操作系统的工作站和欧洲原子能研究组织的互联网节点内运行。

WWW以及第一个站点的建立，正式标志着万维网的诞生。但是早期的万维网仍然仅应用于学术用途，并不向普通人开放。直至1993年4月30日，欧洲原子能研究组织才正式将万维网向普通公众免费开放，至此，真正意义的万维网才为普通大众所用，从根本上改变了人类的生活方式。1.1.2 万维网的发展

在欧洲原子能研究组织宣布免费向公众提供万维网服务之后，万维网经历了三次较大的发展过程，包括“.com”时代、“Web 2.0”时代以及正在进行的“Web 3.0”时代等。

1．“.com”时代“.com”时代历经1998～2001年，是万维网发展和普及的时代。在此之前，电子数据交换已经被一些企业作为一种商务手段，但应用范围比较有限。在此之后，随着个人计算机的普及，万维网由学术界和军方为主要用户群体的历史被终结，万维网真正走向了普通公众，大量基于HTML技术的网站被建立起来，包括门户网站、企业网站、电子商务网站和个人主页等。“.com”时代的Web站点最主要的特点是信息发布。在这一时代，各种类型的信息生产发布平台成为了人们获取信息的主流渠道，同时，电子商务被作为一种全新的商务模式建立起来，越来越多的用户开始通过万维网来购买商品，采购各种生产生活资料。

2．“Web 2.0”时代

在“.com”时代，最主要的万维网服务是新闻服务，其特点是以广播的形式向终端用户发布信息，本质上仍然是传统媒体的延伸和发展。“Web 2.0”这一概念是一种全新的互联网服务方式，相比传统的互联网服务，“Web 2.0”时代更注重促进网络上人与人之间的信息交换和协同合作，模式更加以用户为中心。

在“Web 2.0”时代，互联网服务的主体从门户网站转变为网络社区、Web应用程序、社交网站、博客以及互动百科程序等。这些服务的特点就是交互传播，即终端用户不仅仅是信息的接受者，同时也是信息的生产者和发布者。“Web 2.0”从根本上改变了人类互相交流的方式，将人类从传统的面对面交流，利用电话、短信、传真和电报等电子通信工具交流改变为通过各种自媒体平台进行交流。

3．“Web 3.0”时代“Web 3.0”时代是对“Web 2.0”时代的继承和发展。在这一时代，万维网本身已经被转化成一个巨大的数据库，数据被真正地视为重要的资源宝库。同时，万维网的终端也逐渐由传统的PC被转移到了更加丰富的智能化平台上，例如各种手持计算机设备（PDA、平板电脑、智能手机等）或智能家电设备。“Web 3.0”时代还延伸出了更多的定义，例如“无处不联网”的物联网、云计算、分布式数据库、开放技术等。1.1.3 Web终端的多样化与Web项目开发

早期的万维网是基于各种专业化的计算机服务器系统和工作站系统的。随着个人计算机（PC）技术的逐渐发展，越来越多的个人计算机被投入到家庭生活中，逐渐成为人们生活不可或缺的部分。万维网的终端载体也逐渐由企业级的服务器和工作站发展为各式各样的品牌个人计算机、兼容计算机、苹果计算机等。

在20世纪90年代初期，全世界绝大多数国家和地区都已经发展出了以个人计算机为终端的互联网络。当时，绝大多数的Web站点都是为这些个人计算机用户服务的。Web项目的开发者依托个人计算机终端的各种浏览器作为开发的目标，仅需要针对这些浏览器进行项目调试和测试。

然而，随着计算机小型化技术的发展和智能化芯片技术的广泛应用，1992年，一种全新的手持终端设备被研发出来，这种设备就是PDA（Personal Digital Assistant，个人数码助理）。第一款PDA设备是苹果电脑的“牛顿”。

相对于传统计算机，PDA的特点是轻便、小巧、可移动性强，同时又不失功能的强大。其采用存储卡为外存介质，通过红外或蓝牙接口等无线传输来保障数据通信。“牛顿”这一产品本身在商业上并未取得成功，但是其他公司借鉴此思路，推出了一代又一代PDA产品， PDA的功能也日趋完善起来，最重要的是，PDA开始支持与PC一样的万维网浏览功能，通过移动网络与互联网的其他终端联接。

PDA产品的发展也带动了其他一些智能设备的发展，包括智能手机、平板电脑等设备逐渐地发展起来。另外，传统的大家电也有智能化的趋势，例如电视、机顶盒等视听家电逐渐也在采用各种移动操作系统，支持从万维网获取媒体资源展示给用户。

各种Web终端的多样化直接导致了Web开发工作的复杂性。传统的Web站点开发，开发者需要测试的平台仅包括各种版本类型的Web浏览器，例如Internet Explorer、Apple Safari、Mozilla Firefox等。随着Web终端的多样化，各种分辨率和色彩模式的设备层出不穷，各种人机交互方式的不断革新（由传统的鼠标、键盘逐渐演化为触摸屏设备、体感设备等），开发者需要面对的调试和测试平台也越来越多。

现代的Web开发者往往需要了解更多的设备类型和设备特点，需要掌握更多的开发语言和交互开发技术等，这些全新的技术为Web开发者带来了更大的挑战。

1.2 Web前端开发技术基础

Web项目前端开发是指面向终端用户的Web项目开发工作，其涵盖了万维网技术、计算机软件开发技术、人机交互技术等领域，是复杂的系统工程。在开发Web项目时，需要与多种计算机软件开发技术相结合。1.2.1 Web站点的构成

Web站点本身是一种基于浏览器的软件系统。和绝大多数软件类似，该系统分为两个主要的部分，即面向终端用户的前端部分，以及面向服务器和底层数据的后端部分。

1．Web前端

Web前端即面向Web前台终端用户的软件功能模块的集合。Web前端需要解决的问题主要包括三点，即显示内容、显示效果以及捕获交互。显示内容

Web站点建设的目的即向终端用户展示信息内容，包括各种文本、图像、音频、视频和动画等。除此之外，还包括基于超文本技术的链接等，以实现信息内容之间的承接关系。显示效果

在提供显示内容时，Web站点还应支持为这些显示内容进行美化，提供各种样式效果，例如文本的尺寸、字体、前景色、背景色，图像的阴影、边框等。使用这些效果的目的是突出局部显示内容，或将显示内容以更加美观的方式展示给终端用户。捕获交互

Web站点与传统媒体相比，本身具有更强大的互动功能。这些互动功能是通过捕获用户的操作并提供相关的反馈来实现的。现代的Web站点支持捕获用户的鼠标操作、键盘操作、触屏操作甚至体感操作，通过这些丰富的交互操作帮助终端用户获得更佳的操作体验，以及更加便捷的信息获取方式等。

2．Web后端

Web后端是指Web站点中面向后台数据库、服务器端，用于存储数据和为前端提供显示的基础数据的功能模块。Web后端主要负责管理和维护，以及为前端功能模块提供Web站点的各种准确数据。Web后端通常包含以下几个模块。账户及权限管理

Web后端的使用和维护通常由Web站点的管理员以及其他分工的工作人员完成，因此为保障整个系统的安全运行，需要通过设置口令的方式为站点的各种操作角色加密，保障所有对Web站点的操作都是在符合管理规范的情况下进行的，防止越权和非法提权操作。站点内容管理

Web后端的主要工作即维护为Web前端提供各种信息的数据，例如站点的新闻、产品、各种分类信息以及公告等。这些内容的管理模块即站点内容管理模块。数据库管理

数据库是一种用来存储、操作和管理数据的工具软件。绝大多数Web站点都需要采用数据库来管理各种数据信息，以便动态更新站点的内容。Web后端用来操作数据库的模块即数据库管理模块。1.2.2 Web开发标准

Web前端开发从根本上讲就是为了实现Web前端需要解决的显示内容、显示效果和捕获交互的问题，即Web的结构、表现和行为。最初，各种Web浏览器以及其采用的技术五花八门，各种Web浏览器都通过自定义的技术来描述Web页面的各种元素，同时，这些Web浏览器也都采用各自发明的脚本语言来丰富页面元素的交互。

这种各自为战的混乱局面直接导致Web开发者无所适从，开发的Web应用在不同的Web浏览器中往往面目全非。由于这些Web浏览器的拥趸都数量巨大，开发者们甚至会在自己建立的Web站点上标注“本站点仅限XX浏览器用户浏览”（第一次浏览器大战时期确实有很多开发者这么做）。

在这种情况下，业内对统一Web标准的呼声也就越来越高，基于此，W3C（World Wide Web Consortium，国际万维网协会，一个非政府的万维网标准制订和推广组织）和ECMA国际（欧洲计算机制造商协会发展而来的一个国际化信息与电信企业协会）发展了多种为Web开发制订的标准，分别应用于Web的结构、表现和行为，这就是XHTML结构语言、CSS层叠样式表和ECMAScript脚本语言。

1．XHTML结构语言

XHTML（Extensible HyperText Markup Language，可扩展的超文本标记语言）是基于传统的HTML发展而来，并以XML（Extensible Markup Language，可扩展的标记语言）的严格规范重新订制的结构语言。

在2000年1月26日，XHTML语言正式被W3C发布和提交给ISO（International Organization for Standardization，国际标准化组织），成为网页设计的国际标准化开发语言，替代了早期的HTML 3.2和HTML 4.0。

XHTML语言的特点是严谨和具有严格的结构与书写格式，因此被各种设备和软件解析时更加高效和便捷。同时，XHTML还具有较强的扩展性，可以为各种不同类型的终端设备所支持。同时，XHTML在绝大多数语法和标记的使用上都能够兼容传统的HTML，因此一经推出立即为业界所接受，并被迅速大范围应用。

如今，XHTML是被当前各种Web浏览器完全支持的主流版本。未来新的Web结构语言为由XHTML衍生和发展而来的HTML 5.0，但HTML 5.0尚未订制完毕，因此只有一些Web浏览器支持其部分功能。本书开发所使用的Web结构语言仍然是XHTML1.0。

2．CSS层叠样式表

早期的Web应用是通过HTML不完善的表现描述功能实现Web元素的样式变换的。由于HTML功能的局限性，一些Web浏览器的开发者发明了各种样式表现语言来对Web元素进行增强描述，使得样式描述语言越来越混乱。

1994年，在欧洲原子能研究组织工作的哈康·列（Hakon Wium Lie）、蒂姆·伯纳斯-李爵士（Sir Tim Berners-Lee）以及罗伯特·卡里奥（Robert Cailliau）结合之前已经被使用的各种样式语言，共同研究和发明了一种全新的样式描述语言CSS（Cascading Style Sheets，层叠样式表），通过选择器-样式代码的键值对方式来描述Web页面的各种元素。

1995年，哈康·列对外正式发布了CSS样式表语言，并和W3C进行了讨论，对CSS样式表语言进行了修订，使其更加符合Web语言的特性。

1996年，CSS样式表语言的第一版正式完成，并于当年12月发布，被称作CSS 1.0。该语言被推出后，并未被广泛采用。世界上第一款完全支持CSS 1.0的Web浏览器是2000年微软公司开发的运行于Macintosh系统的Internet Explorer 5.0。随后，随着Internet Explorer版本的升级和市场份额的逐渐扩大，CSS 1.0才得以广泛使用。

W3C在1998年5月发布了更新的CSS 2.1规范，修改了CSS 1.0的一些错误和不被支持的内容，并增加了一些已经被多种Web浏览器添加的扩展内容，但是时至今日，尚未有任何一款Web浏览器完全支持所有CSS 2.1的内容，即使CSS2.1是当前的事实标准。

CSS的更新版本CSS 3.0于1999年开始制订，但由于其发展方向不断被修改和订正，直到2011年6月，其才为W3C的CSS发展小组发布，成为公开的Web开发标准。目前，只有最新的Web浏览器才支持其部分功能，也尚未有任何Web浏览器能够支持其全部功能。

CSS 4.0版本已经开始制订，但何时发布，何时能被所有主流Web浏览器采用仍然遥遥无期。基于此，本书仍然以CSS 2.1为基础，在之后部分章节中采用一些CSS 3.0的技术。

3．ECMAScript脚本语言

早期的Web应用通过HTML的表单元素来实现与用户的交互和简单的行为。随着用户交互的日趋复杂，各种Web浏览器都采用了基于自身而设计的脚本语言来实现更加复杂的Web行为，例如Netscape Navigator浏览器采用的是Netscape公司和Sun公司开发的Javascript，而Internet Explorer则采用的是微软公司开发的VBScript脚本语言。

这些不同的脚本语言的采用，直接导致了Web应用的兼容性灾难，采用不同脚本的Web应用仅能获得某一种Web浏览器的支持，在另一种Web浏览器中则完全无法使用。基于此，开发者们必须只选择一种脚本，或花费大量时间和精力学习和使用多种脚本才能实现完全兼容。

1996年8月，为了使Web浏览器获得更强的兼容性，微软公司为其Internet Explorer浏览器引入了JScript脚本语言。这种脚本语言在语法和解析方面实际上与Netscape公司和Sun公司开发的Javascript语言基本一致，可以看作是Javascript脚本语言的微软版本。JScript脚本语言的诞生，真正使IE浏览器能够同时兼容多种脚本，这一举措获得了极大的成功，同时也推动了标准化的Web脚本语言的诞生。

1996年11月，Netscape公司正式将Javascript脚本语言提交给当时的ECMA国际，希望将该脚本语言正式申请为国际化标准。ECMA国际于1997年6月正式采纳该脚本语言，并制订基于ECMA-262的国际标准，从此，Javascript正式取代了其他脚本语言，成为Web开发的标准化语言。几乎所有Web浏览器厂商都围绕ECMA-262标准开发了基于自身软件的Javascript子集，以便与ECMA官方标准接轨。ECMA-262标准迄今为止发展出了6个主要的版本，其特点如表1-1所示。表1-1 ECMA-262发展而来的版本

除以上5个ECMA版本外，第6版和第7版正在紧张制订中。未来的ECMAScript脚本将增加更多新的概念及语言特性。

ECMAScript本身是一个开发语言标准。实际上绝大多数Web开发者使用的是基于ECMAScipt标准而制订的各种ECMAScript子集。这些子集大多由Web浏览器和Web排版引擎平台的开发商编写和实现。目前，基于ECMAScript脚本语言的子集主要有以下几种，如表1-2所示。表1-2 ECMAScript脚本语言的平台和子集

早期的Web浏览器往往使用各自开发的排版引擎，每一种排版引擎对应一个品牌的Web浏览器，这些Web浏览器才是最终为终端用户解析Web项目代码的平台。随着Web浏览器的发展，如今绝大多数Web浏览器更愿意采用开源的通用排版引擎，以使自身更符合Web标准化的需求。各种排版引擎与Web浏览器的对应关系如表1-3所示。表1-3 Web排版引擎与Web浏览器

目前，绝大多数主流Web浏览器都已经开始采用WebKit排版引擎，以追求更符合Web标准化的代码解析方式，为开发者和终端用户提供更完善的体验。未来的Web浏览器在Web排版和脚本解析方面更加趋于统一和融合，为开发者提供兼容性更强的展示平台。1.2.3 Web前端技术的松耦合

Web前端的开发是和终端用户进行交流的过程。早期的Web前端基本上是通过HTML语言来解决所有问题，包括使用HTML显示文档内容，描述显示效果，并通过HTML的表单控件来实现简单的交互捕捉。

随着计算机技术的发展和普及，越来越多的终端用户开始追求表现更加美观，交互更加便捷的Web应用。传统的HTML语言弊端逐渐开始展现，其已经很难再满足终端用户和开发者在美观和交互便捷方面的需求，这迫使Web前端开发者不断使用更新的技术，为终端用户呈现更加丰富的显示效果和交互。

同时，由于使用的标准化技术日趋复杂，基于维护的需要，越来越多的开发者将前端代码根据结构、表现和行为划分为三个彼此隔离且相互作用的层。其中，XHTML结构语言用来定义页面的数据和语义，CSS样式表用来为页面元素添加样式和各种视觉效果， Javascript脚本语言用来为页面元素添加行为和交互，其层次关系如图1-1所示。图1-1 Web前端代码的分层

XHTML在Web页面中的地位更加底层，其决定了Web页面能够显示什么内容。CSS样式表和Javascript脚本语言代码并不一定相互依赖，其本身都是基于XHTML结构语言并用来操作和描述XHTML元素。

Web前端的结构、表现和行为本身具有一定的相关性，共同组成一个整体，也就是具有耦合关系。但是如果结构、表现和行为耦合过紧，则如果修改其中一部分内容，对应的其他两部分内容也都需要做出相应的修改，而修改过于频繁，则会增大Web应用的维护成本。基于此种理由，Web前端技术的松耦合成为目前最流行的开发方式。

开发松耦合的Web项目，最重要的就是将结构、表现和行为强行地隔离开：结构即结构，表现即表现，行为即行为。应用到实际项目中，即拒绝使用XHTML的描述性标记和属性，完全采用CSS样式表来定义Web元素的样式和视觉效果。同时，也应当尽量避免使用Javascript脚本语言来定义和修改CSS样式。如果需要动态地修改某些元素的样式，可以先在CSS样式表中将这些样式以CSS类的方式预置，然后通过Javascript脚本语言动态地为元素添加类，实现动态修改样式效果。

松耦合式的前端开发可以解决多个不同方向的前端开发者（结构开发、样式开发以及脚本开发）之间相互协作时产生的各种接口冲突问题，切实提高前端开发的效率，同时降低项目维护的成本。因此，在前端开发时应尽量采用松耦合的方式进行开发。

1.3 Web开发工具

Adobe Dreamweaver系列开发工具是由Adobe公司结合Golive、原Macromedia Dreamweaver整合而成的一套适合个人开发者独力完成整个Web项目的综合性开发平台。Dreamweaver相比其他的开发工具具有体积小、速度快、功能丰富的特点。它不仅支持前端项目的开发，还支持站点的管理，PHP、JSP、ASP以及ASP.NET等多种后端程序的开发，是一种用途广泛的开发工具。

Dreamweaver目前最新的版本为Dreamweaver CS6的云端化版本Dreamweaver CC。相比之前的Dreamweaver CS6，Dreamweaver CC更加强调了云端功能，支持用户将各种配置信息甚至站点数据存储到云端，实现脱离主机的移动化开发。除此之外，Dreamweaver CC还增强了可视化的CSS面板工具，并强化了对JQuery等现代脚本框架的支持，提高了开发效率。其主要界面如图1-2所示。图1-2 Dreamweaver CC的主体界面

虽然Dreamweaver具有强大的功能适应性和代码提示补完功能，但是其在代码格式的自定义方面并不太完善，仅支持极少数的自定义项目，因此往往无法适应团队统一的代码书写格式要求。另外，虽然Dreamweaver具有团队协作的功能（支持SVN、VSS等团队协作版本控制工具），但是其功能并不强大，只能满足一般团队协作要求，因此Dreamweaver更适合个人开发中小型项目，不适合大型项目的开发。Dreamweaver还是一款商业软件，开发者需要购买才能使用。1.3.2 EcIipse系列及其衍生品

Eclipse是一种开源的综合性开发平台，其本身开发的目的是为解决Sun公司的闭源开发工具NetBean昂贵而缺乏扩展性等问题。随着大量开发者贡献代码，今天的Eclipse已经成为一款具备强大功能和扩展性，几乎支持所有常见的编程语言的可扩展开发平台。Eclipse除了适合程序开发者外，还适用于项目设计、项目测试等多种开发用途。

Eclipse目前最新的版本为Eclipse 4.3 Kepler。新版本更新了整个扩展平台，优化了程序执行效率，对Git团队协作工具有了更好的支持。Eclipse 4.3 Kepler的主体界面如图1-3所示。图1-3 Eclipse 4.3 Kepler的主体界面

Eclipse本身是一个免费的基础平台，具备强大的扩展性，因此全世界的开发者为其开发了大量的插件工具，包括对编程语言的支持插件、代码格式插件、视觉插件、团队协作插件等。正因为这些插件的存在，Eclipse才拥有强大的生命力。

除了支持大量插件外，由于Eclipse本身是一个开源的开发项目，因此很多第三方的软件开发商以Eclipse项目为基础，专门针对前端开发对Eclipse进行改写和优化，开发出了各种Eclipse的衍生产品，进一步丰富了Eclipse本身的功能和体验。目前常见的Eclipse衍生产品主要包括两种，即Zend Studio系列开发平台和Aptana Studio系列开发平台。

1．Zend Studio系列开发平台

Zend Studio是基于Eclipse平台开发的最著名的综合性开发平台，其本身是为解决PHP语言开发网站后台程序而设计，但是随着前端开发技术的复杂化以及在Web项目开发中占据的比重逐渐增大，Zend Studio的前端开发功能也不断地完善，最终形成了前后端并重的功能。Zend Studio平台由于采用了Eclipse平台作为基础，因此支持绝大多数Eclipse平台的插件，Zend公司本身也为Eclipse平台贡献了大量的代码和工具。

今天，绝大多数基于PHP项目的Web开发工作都是采用Zend Studio平台完成的。ZendStudio平台目前最新的版本是Zend 10.1，基于Eclipse 3.4 Juno创建。Zend Studio 10.1的主体界面如图1-4所示。图1-4 Zend Studio 10.1的主体界面

Zend Studio开发平台最大的特点就是前后端并重，既支持PHP项目的开发，提供大量PHP Zend框架的支持，同时也对前端XHTML、CSS样式表和Javascript具有良好的支持。因此，在开发基于PHP项目的Web前端应用时，开发团队完全可以全部使用Zend Studio这一种开发工具，以获得无缝的团队协作效果。

由于Zend Studio开发平台对Eclipse平台的插件支持较好，因此，如果在开发工作中需要采用其他的Eclipse工具，完全可以直接从Eclipse各种工具下载站点获取和安装，通过第三方的工具来拓展Zend Studio的功能。Zend Studio是一款商业开发工具，开发者需要购买才能使用。

2．Aptana Studio系列开发平台

与Zend Studio类似，Aptana Studio开发平台也是一款基于Eclipse平台开发的综合开发工具。相比Zend Studio的前后端并重的功能设计而言，Aptana Studio更加强调前端开发。其针对前端开发需求而专门设计，因此在前端开发方向上具有更加强大的功能，例如支持更多类型的前端代码编写。其代码提示和补完功能也比Zend Studio更加人性化，支持多种富客户端的开发方式。

Aptana Studio平台同样支持PHP开发（相较Zend Studio功能弱一些），另外还支持Ruby项目和Rails项目，允许开发者通过多种编程语言开发Web项目。此外，Aptana Studio还支持强大的宏功能，提供了大量针对多种开发语言的可视化快速代码生成工具。目前Aptana Studio最新版本为3.4.1，基于Eclipse 3.7 Indigo创建。Aptana Studio 3.4.1的主体界面如图1-5所示。图1-5 Aptana Studio 3.4.1的主体界面

与Zend Studio相比，Aptana Studio在对PHP开发方面支持较弱，但是对其他一些轻量化开发技术支持较好，且同样支持通过Eclipse插件拓展团队协作功能。在对前端代码的提示和补完方面，Aptana Studio更胜一筹，因此如果开发Python、Ruby&Rails项目或纯前端项目，Aptana Studio可以获得更佳的效率。开发PHP项目也可以使用Aptana Studio。早期的Aptana是一款商业软件，近年来开发商以免费的方式提供授权，允许在非商业用途的开发中免费使用。1.3.3 WebStorm系列

除了Dreamweaver系列和Eclipse系列之外，近年来又出现了一款新的基于前端开发的综合性开发平台，即JetBrains公司出品的WebStorm系列开发平台。该平台是一款全新的立足于前端开发设计的开发工具，是近年来最受欢迎的前端开发工具之一。

WebStorm开发平台专门为Javascript脚本开发而设计，为开发者提供了众多强大的Javascript开发功能，例如支持编码导航和快速对象查询，支持快速代码重构和修复，提供了强大的单元测试与调试工具。除此之外，WebStorm还支持批量代码分析和混合代码检查与提示，对未来的CSS3、LESS、正则表达式、HTML5也提供了强大的支持。相比Dreamweaver系列和Eclipse系列，WebStorm开发平台的速度快，是一款高效的轻量化开发工具。

WebStorm的代码格式化功能也同样强大。它可针对各种不同类型的代码，支持几百种代码格式自定义工具。WebStorm是一款商业软件，因此并未提供扩展和插件的开发功能，但是JetBrains官方已经预先为WebStorm开发了基于Git、SVN、CVS等多种团队协作开发功能的支持。WebStorm最新版本为6.0，主体界面如图1-6所示。图1-6 WebStorm 6.0的主体界面

WebStorm是一款新兴的Web开发工具，其界面和使用方式与传统的Eclipse系列开发工具具有较大差别，因此目前支持的插件也比较少。另外由于官方并未发布中文版本，因此在学习和使用方面具有诸多问题，并不适合初学者和英文基础较差的用户。WebStorm也是一款商业软件，开发者需要购买授权才能使用。

1.4 着手开发Web项目

在了解Web开发项目使用的技术和工具后，有必要了解一些Web项目的开发常识和团队协作的良好工作习惯，这些经验和技巧可以帮助开发者快速融入开发团队，或使项目的设计和实现具有更佳的维护性和可持续发展性。1.4.1 Web项目开发模式

早期的Web开发者往往只需要掌握一种后端开发语言，对数据库具有一定的了解，会使用HTML语言，即可开发出一个简单的Web站点。而今天的Web项目越来越大，一两种开发语言和技术已经远远不能满足Web项目的需要，仅以前端开发为例，现代的Web开发需要采用的技术已经越来越多，越来越多的开发者开始引入大量第三方框架以及更多先进的技术来提高开发效率，降低开发成本。

目前主流的Web项目开发模式主要有三种，即流线式开发、分布式开发以及更极端的MVC开发。

1．流线式开发

流线式开发是最早基于个人项目开发延伸而来的开发模式。在这种模式下，一个开发工作被划分为多个步骤，包括应用逻辑开发、界面元素开发、结构代码开发、项目测试等。通常情况下，这些步骤按照从抽象到具体化的方式依次进行，如图1-7所示。图1-7 流线式开发的流程

流线式开发更适合中小型的开发项目（例如中小企业站点、博客等较为简易的Web项目），适用于外包中小型开发项目的企业采用。在这种开发模式中，项目团队可以按照并行的方式进行多线程开发，每个方向的开发者（Javascript框架开发、界面元素开发和结构代码开发等）分别为不同的项目进行开发工作，以实现最大限度提高开发效率。

在这种开发模式下，前端脚本框架更多地选择一些快速的轻量级DOM操作框架，例如jQuery等，以提高开发效率。在界面元素设计方面，既可以自行开发界面元素，也可以采用一些成熟的界面元素框架，例如Bootstrap、jQuery UI、jQuery EazyUI等。

2．分布式开发

分布式开发更加强调开发过程的模块化和并行化，也更加重视业务逻辑代码的开发。分布式开发将业务逻辑代码划分为多个子模块进行开发，并采用一些成熟的UI框架来实现界面元素的效果。以一个内容管理系统（CMS）为例，其具体的开发流程如图1-8所示。

分布式开发适合较为复杂的开发项目（例如门户网站、搜索引擎、论坛、内容管理系统、OA在线办公系统等），适合专业的项目团队长期维护某一个大中型Web项目（目前绝大多数的大型Web企业也都采取这种形式），快速根据不断变化的业务需求开发新的业务模块，扩张Web项目的功能。在这种开发模式下，更加强调项目的多个子系统以统一的标准进行并行开发，通过大型应用框架来实现项目代码的管理，增强项目的扩展性。图1-8 分布式开发CMS系统的流程

在这种模式下，轻量级的脚本框架（jQuery等）往往无法对上万行的业务逻辑代码进行有效的管理，绝大多数开发团队更趋向于采用一体化的大型Web框架（例如ExtJS、YUI等多功能全方位的大型开发框架），通过这些大型框架有效的业务逻辑管理功能和界面元素设计功能实现复杂的功能。

3．MVC方式开发

MVC是一种由大型应用程序开发引入前端开发的一种全新设计模式和开发模式，其由三个要素组成，即模型（Model）、视图（View）和控制（Controller）。

MVC开发比分布式开发更加强调模块化开发，更加强调业务逻辑的分划、模型和模块的设计，通过强制的分层将业务逻辑、显示层信息以及之间的关系分离出来，通过统一的模块通信机制相互作用，形成一个整体。其分层的作用如下。模型层（Model）

模型层用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“模型”有对数据直接访问的权力，例如对数据库的访问。“模型”不依赖“视图”和“控制器”，也就是说，模型不关心它会被如何显示或是操作。但是模型中数据的变化一般会通过一种刷新机制被公布。为了实现这种机制，那些用于监视此模型的视图必须事先在此模型上注册，从而视图可以了解在数据模型上发生的改变。

在前端开发方向，模型层主要负责与后端数据处理程序的交互，通过各种数据操作指令控制后端的数据处理程序获取数据，以及如何对数据库进行写入。视图层（View）

视图层能够实现数据有目的的显示。在视图中一般没有程序上的逻辑。为了实现视图上的刷新功能，视图需要访问它监视的数据模型（Model），因此应该事先在被它监视的数据那里注册。

在前端开发方向，视图层主要负责决定哪些数据在页面中显示。当用户交互操作提出需求后，视图层通过控制器向模型层发送数据请求，实现快速的用户交互。控制器（Controller）

控制器起到不同层面间的组织作用，用于控制应用程序的流程，处理事件并作出响应。“事件”包括用户的行为和数据模型上的改变。

在前端开发方向，控制器的作用就是做视图层和模型层的连接工具，为各种页面的交互行为传递数据需求。

以上三个分层强制将所有前端代码分割开来，通过指定的通信方式相互传递数据。基于MVC的前端开发方式，其开发的程序与后端程序的关系如图1-9所示。图1-9 MVC开发模式的前后端分层结构关系

基于MVC模式的前端开发将传统的后端处理业务逻辑、前端处理显示逻辑的关系修改为后端仅根据前端指令提供数据，所有业务逻辑都放到前端来处理，实现富客户端的程序架构。这种方式的好处在于业务逻辑和运算都由终端用户的计算机来负责，降低了服务器的负载，节省了项目运维的成本。

除此之外，由于其将大量业务逻辑用前端开发，因此后端的压力逐渐降低，后端重构的成本也会相应降低。在前端开发语言不变的情况下，可以方便地移植后端代码（例如将PHP后端移植为JSP等），降低了后端程序移植的风险。

另外，这种模式也可以促使后端开发团队将精力更多地投入到如何提高系统项目的运维效率，提高数据库效率的方向上来。

前端MVC开发模式是近年来新兴的开发模式，目前尚处于前沿研究。基于风险控制的原因，目前并未有大型的Web项目采用这种开发方式，应用这种开发模式的仅为实验性质的中小型Web项目。

在这种模式下，开发者更热衷于采用一种现有的MVC框架，然后将多种前端框架结合使用以实现各分层的功能。例如，以jQuery框架为基础，采用Ember.js或Angular.js全面管理MVC结构，然后再使用jQuery EazyUI、Bootstrap、jQuery UI等UI框架实现视图层的显示。1.4.2 项目分工与协作

早期的Web项目多是中小型项目，由于采用的技术并不复杂，也对用户体验、程序执行效率、维护性等要求较低，因此多为一个程序员包打天下，采用各种“ha-ck”式的方式解决问题（即一切以项目实现为目的，不考虑技术可扩展性和维护性）。

随着Web技术的发展，竞争日趋激烈，现在Web项目往往对用户体验的要求较高，需要一个团队不断地更新和维护项目，增加新的功能，提升用户体验，改进项目代码，因此，需要采用更多更复杂的技术实现项目开发。就以前端开发而言，各种框架、工具越来越专业化，一个程序员实现整个项目开发的模式就技术上而言越来越困难。此时，越来越多的企业开始从后端开发的经验着手，引入前端团队开发，通过开发团队的分工协作提高项目开发的效率。

以分布式开发为例，Web前端开发团队通常由5～7人组成，分别担任不同的角色，如图1-10所示。图1-10 典型的前端Web开发团队结构

前端Web开发团队通常包括四种角色，即项目组长（PM）、界面设计（UID）、程序开发（PD）和交互开发（ID）。角色作用如下。项目组长（PM）

项目组长是整个项目团队的首脑，其责任是审核项目需求，与后端开发团队交流，制订统一的开发接口，协调整体项目的工作，并分配开发任务，制订开发周期。界面设计（UID）

界面设计主要负责项目产品的外观、显示效果等，其通常需要使用各种平面设计软件（例如Adobe Photoshop、Adobe Fireworks等）制作Web项目整体的效果图、各种界面元素的样式，除此之外，可能还会负责部分CSS样式表的编写，辅助交互开发设计各种交互效果。程序开发（PD）

程序开发在分布式开发模式下，主要负责项目的底层框架开发、业务逻辑开发，负责对后端团队提供的数据进行运算、筛选，以高效的数据为整个项目开发团队服务。在MVC模式开发下负责模型层和控制器的编写，制订前端数据传输的标准等。交互开发（ID）

交互开发在分布式开发模式下，主要负责项目的结构代码编写、各种显示效果的开发，根据程序开发者提供的数据编写前端显示代码和交互特效。在MVC模式开发下负责视图层部分的编写，与界面设计合作将最佳的显示效果和交互体验提供给用户。1.4.3 项目代码规范

程序的代码是规范和格式化的语言，相比自然语言而言，代码往往比较难以判读。尤其前端开发所使用的Javascript脚本语言本身就由于语法的灵活和形式的多样，被称作“最容易被误解的编程语言”。

在一个项目团队中，如果每个成员都以自我的形式编写代码，那么其开发的代码往往只有该成员自己能够阅读和维护，当成员变动或其他成员需要维护该成员的代码时，这些个性化的代码往往会影响整个项目维护的效率。

因此，项目团队的协作开发需要梳理整个项目团队的代码书写风格和开发规范，从而保持代码的一致性，使得项目开发团队所有成员都能够判读和维护其他成员的代码。此时，就需要制订一个统一的代码书写格式规范，所有项目团队成员都应该以这一规范来书写代码，并按照指定的要求编写注释。

1．基本书写格式

基本书写格式是指进行整体代码开发时需要遵循的规约，它定义了各种语素级别的代码书写方式。代码缩进

代码缩进的作用是使多行不同结构的代码更加清晰和直观。常用的代码缩进包括空格缩进和Tab缩进两种。由于Tab符号在不同的开发工具中显示长度可能有所区别，因此建议采用空格缩进的缩进方式，以防止不同开发工具浏览代码时产生代码字符形变的问题。

代码缩进的数量也应在整个开发团队中统一，例如Yahoo的前端开发团队就统一使用4个空格作为代码缩进的标准。行长

行长是指每行代码包含的字符数量。通常情况下开发工具的窗口能够显示的字符数量是有限的，过长的行会导致开发工具窗口出现横向的滚动条，导致开发者浏览代码和代码对比时必须随时横向滚动窗口，降低浏览的效率。

通常情况下，绝大多数的开发团队都会根据自身硬件设备支持的屏幕分辨率制订一个统一的行长标准，提高代码浏览的效率。在此推荐每行代码长度不超过80个字符，在绝大多数宽屏显示器下可以同时展示两个文档窗口而不出现横向滚动条。空行

空行在代码结构中的作用是分隔不同语义的代码块，将不同类型的代码块有效地分隔开来。在此强烈建议在语句块（包括类、函数、命名空间、分支语句和迭代语句等）之前都应保留一个空行，在这些语句块内部的首行也应保持为空。除此之外，在注释之前也应保留一个空行。

2．命名法则

命名法则是指在创建类、对象、命名空间、函数、方法、属性和变量等实体时，定义这些实体名称的法则。命名法则可以规范整个项目开发时所有实体的命名，提高开发团队书写代码的一致性。使用统一的命名法则，可以提高团队沟通的效率，帮助团队成员快速阅读代码。

常用的命名法则分为三种，即大驼峰命名法、小驼峰命名法和匈牙利命名法。大驼峰命名法

大驼峰命名法是指将多个单词拼接在一起，每个单词的首字母大写，其他字母小写的命名法则。例如，定义用户名的变量，如采用大驼峰命名法，则可以将其命名为UserName等。大驼峰命名法则通常用于构造函数、全局类等。小驼峰命名法

小驼峰命名法与大驼峰命名法的区别在于，在多个单词拼接时，第一个单词的首字母小写，其他单词的首字母大写。例如，定义用户密码，如采用小驼峰命名法，可以将其命名为userPassword等。小驼峰命名法通常用于定义命名空间、局部类、对象、对象的属性和方法等。匈牙利命名法

匈牙利命名法同样基于若干单词的拼接，每个单词首字母必须大写（类似大驼峰命名法），但是需要以小写的数据类型作为整个命名的前缀。以Javascript为例，其各种变量的前缀如表1-4所示。表1-4 Javascript的匈牙利命名法前缀

例如，定义一个用户的各种信息，如使用匈牙利命名法，则可以用strName定义用户姓名，intAge定义年龄等。

匈牙利命名法是一种饱受争议的命名法则，一些开发者认为此种命名法则没有必要，而另一些开发者则坚持认为声明变量时采用匈牙利命名法可以提高代码的可读性，尤其在装箱和拆箱（数据类型相互转换）时，使用匈牙利命名法可以防止转换错误。作为折衷的办法，可以在为局部变量命名时使用此命名法则。

除了以上三种命名法则外，在处理全局常量或一些特殊的定义值时，应该使用另外一种命名法则将其与普通的命名空间、类、对象、属性和方法区分开来，这种命名法则即常量命名法则（或宏命名法则）。常量命名法则并非成文的约定，而是一些开发者的特殊习惯，这种习惯对项目代码命名极有帮助，可以对命名的元素进行强调，突出其与其他实体的区别。

常量命名法则的书写方式为将名称的所有单词大写，单词和单词之间以下划线隔开，例如，定义一个服务器URL地址，可以将其命名为SEVER_URL等。

团队统一使用规定好的命名法则可以提升代码的统一规范性，有效地避免各种五花八门的实体名称影响团队成员对代码的判读。除了遵守命名法则外，在命名方法或函数时，建议采用动宾词组来明确地表示这些方法或函数的语义，在此列出了一些常用的方法和函数前缀，如表1-5所示。表1-5 常用的方法或函数的前缀及其语义

3．变量

程序的任务就是对各种数据进行判断和处理，这些数据通常都是占据在内存中指定地址的值，即变量。使用变量时同样需要遵循制订的规范，防止代码被误读的同时，也防止程序出现逻辑错误。变量的默认值

在创建一个变量时，应该为变量添加一个默认值，以防止之后引用该变量时由于该变量没有实际的值而导致的错误。同时，由于Javascript是一种弱类型编程语言（没有强制变量的数据类型），因此为变量赋予一个默认值，可以有效地标定该变量的数据类型，防止不可控的装箱拆箱操作。常见的各种数据类型的变量默认值如表1-6所示。表1-6 各数据类型的变量默认值单语句单变量

在创建变量时，请尽量为每一个变量书写一个独立的var语句。虽然一个var语句创建多个变量显得更有效率，但是基于创建每个变量都应该有独立的注释（帮助其他开发者了解该变量的作用）的原则，显然只有每个变量都独占一个var语句更好一些。原始包装类型的创建

原始包装类型即Javascript最基本的三种数据类型：字符串（String）、布尔值（Boolean）、整数和浮点数（Number）。在创建这些类型的数据时，由于这三种包装类型的类并不存在静态方法和静态属性，因此在以new运算符调用其构造函数时很容易产生BUG，如下所示。

以上的代码在Javascript语法规范中是完全正确的，但是从开发和避免逻辑BUG的角度而言是应尽量避免的。在创建此类对象时直接赋予默认值或自定义值即可，如下所示。

4．注释

注释的作用是为代码提供自然语言的解释。在开发工作中，为代码添加注释是一项重要的工作。使用注释可以帮助项目团队的其他成员快速阅读各种语义繁杂、难以理解的代码。开发团队的注释风格也应该统一，以便所有团队成员快速阅读代码，同时统一而有效的注释可以帮助一些项目代码文档生成工具快速生成代码文档。

Javascript的注释分为两种，一种为单行注释，一种为多行注释。

单行注释多用于注释语句块中某一条语句。通常情况下，对于各种流程语句（分支流程、迭代流程等）的注释可采用单行注释，将注释书写在语句的上方。例如，判断一个数组arrTest的长度是否等于0，代码和注释如下所示。

而多行注释则主要用于注释语句块、文档等，为项目完成后的文档生成工具提供内容。大多数大型项目的多行注释都采用了Google的JSDoc标准，以支持Google开发的JS文档生成工具。在定义各种实体时，其注释格式如下所示。文档注释

文档注释的作用是声明整个Javascript脚本代码文档的作用等信息，其书写于Javascript脚本文档的头部，格式如下所示。

其中，fileOverview关键字定义文档的描述信息，version关键字定义文档的版本。类的注释

Javascript本身并不存在类的概念，但是支持通过函数的封装模拟其他编程语言的类，因此在很多项目中，都会通过函数来创建所谓的“自定义类”，实现其他编程语言中类的功能。类的注释用于为自定义类（包括全局类、局部类和子类）提供描述信息，其格式如下所示。

其中，class关键字定义类的名称，constructs关键字声明以下代码是一个构造函数， param关键字定义类的构造函数参数，augments定义类的继承关系，exports关键字定义类的派生关系。命名空间注释

Javascript不存在命名空间的概念，但是在一些大型Web项目的开发中，需要对类和对象进行划分，防止出现命名污染，此时即可通过为类定义自定义方法，返回一个特殊对象的方式实现类似命名空间的功能。例如，为一个名为TestClass的类定义命名空间，代码如下。

在完成以上方法的编写后，即可通过该类的namespace方法声明命名空间，并编写注释，代码如下。

其中，namespace关键字声明以下代码是一个命名空间，description关键字定义该命名空间的描述。常量注释

Javascript并不存在常量这一概念，该概念是由其他编程语言引入的。Javascript的常量其实是一种伪常量，其仍然可以被修改。通常情况下，这些常量会被用于系统某些固定的配置信息，或一些常数（例如PI等）。定义常量时同样需要编写注释以帮助团队其他成员了解该常量的作用，代码如下所示。

其中，field关键字定义该值是一个直接量（非函数），constrant表示该值是一个常量， type关键字定义该值的数据类型，description定义该值的描述。静态方法注释

静态方法是类中的一种特殊方法，其特点是不需要对类进行实例化，直接由类名来调用。静态方法只能调用静态属性。定义一个静态方法代码如下所示。

其中，static关键字定义该方法是一个静态方法，param关键字定义该方法的参数数据类型和名称以及参数的中文描述，return关键字定义该方法的返回值，description关键字定义该方法的描述及作用，example关键字定义该方法的使用示例。实例方法注释

实例方法与静态方法相反，其指必须从属于某一个类，当且仅当该类被实例化为一个具体的对象后才能调用的方法。定义一个实例方法代码如下所示。

实例方法通常具有不同的访问级别，如果不限制其他类和对象访问，可使用public关键字进行定义，如果禁止其他类和对象访问，则可使用private关键字进行定义。事件注释

事件用于为某些对象绑定一个交互处理的过程，其通常是由一个方法实现的。与普通静态方法不同的是，事件需要通过name关键字定义事件的名称，再通过event关键字标识其是一个事件。事件其他方面与普通的实例方法并无区别，在此不再赘述。忽略注释

对于一些不需要文档生成工具生成文档的代码，开发者可以通过ignore关键字将其忽略，代码如下所示。

5．函数或方法

书写函数或方法时，除了需要注意在函数或方法之前添加空行、内部首行留空外，还需要注意函数的参数书写以及大括号的位置。一些初学者往往习惯将函数或方法的大括号独占一行，并在使用return返回对象时也将对象的大括号独占一行，代码如下所示。

在上面的代码中，getData()函数的起始大括号独占一行，且return语句的返回值大括号也独占一行，在这种情况下，一些Web浏览器往往会自作主张强制为函数语句末尾和return语句末尾添加一个行结尾符号“;”，从而造成代码语法错误，如下所示。

因此，在实际开发中应尽量避免以上这种写法，而应采用更加安全的书写方式：将函数以及return语句返回的对象等语句块的大括号紧跟函数主体和return语句来书写，代码如下所示。

如果函数或方法在声明时需要加入大量的参数，且整个函数的语句超过了行长80的限制时，就需要对函数的参数进行拆分书写。在拆分函数参数时需要注意换行应在函数参数的逗号“,”之后进行，且换行后的行要比函数function语句所在的行多缩进一次。

通常拆分的方式有两种，即C风格和Java风格。其中，C风格的特点是强制对函数的所有参数都换行，无论函数行长是否超过80，每个参数都必须独占一行；Java风格则是仅当行长超过80后才进行换行，否则不换行。在换行时每行应尽量在行长80的限度内书写更多的参数。

例如，在下面的代码中，就分别采用了C风格和Java风格对一个相同的函数=参数进行了换行，如下所示。

以上两种书写方式各有各的优点。C风格的书写更方便对每一个函数参数进行注释，但是在Javascript这种行解析的脚本语言中可能会造成解析效率低下；Java风格虽然注释稍微麻烦，但是加载效率更高。因此在实际开发中，开发团队可以自由选择一种注释方式。笔者更推荐使用Java风格的方式。调用函数时为函数添加参数的书写方式与创建函数类似，在此不再赘述。

6．语句

语句是代码执行的主体，语句的书写格式应该清晰明了，划分明确，才能帮助后续的代码维护者更快更高效地理解语句。在此简要介绍4种常用的语句书写格式和注意事项。if系列语句

if系列语句包含if...语句、if...else...语句和if...else if...else语句三种主要的形式。在书写if系列语句时，应在条件的括号两侧添加空格，同时为了防止Web浏览器自动在语句末尾添加分号“;”，应将语句的大括号紧跟语句末尾书写，代码如下所示。

if...else...语句和if...else if...else语句的书写方式与if语句类似。建议将else、else if等关键字也独行处理，使得代码结构更松散便于阅读，代码如下所示。

在语句体内首行空行是一个良好的习惯。无论是在书写函数、方法、类、对象，还是各种语句时，都应该将首行空出来。空出来的一行并不会影响文件的下载，也不会影响代码执行的效率，只会使后续的维护者更方便地阅读代码。

在书写if系列语句的条件时，如果条件的表达式长度超过了行长80的限制，开发者可以根据条件表达式中的逻辑运算符进行分割，在逻辑运算符之后强制换行，并对新行的条件表达式增加一次缩进。具体的缩进方式与函数参数类似，在此不再赘述。switch语句

switch语句的作用是判断一个变量可能出现的多种值，根据不同的值来决定执行哪一段代码，其书写格式在不同的开发框架和编程规范中区别较大，尤其break语句的缩进方式，常见的就有Java风格（case和default语句缩进一次，break语句缩进两次）和Dojo风格（仅break语句缩进一次）。具体选择哪一种风格或自定义风格完全可以由项目组决定，但是强烈建议每一个break语句之后要空一行，这样代码看起来更加整洁和清晰，如下所示。

在书写switch语句时，无论如何请勿省略default，否则一旦所有case语句的条件都不符合时，该语句就会被跳过。在异常处理中（绝大多数switch语句都被用于异常处理）意味着有些未知的异常不会被暴露出来。考虑所有分支可能出现的情况，封闭所有可能遗漏的分支是一种良好而严谨的开发习惯。

在语法上，case语句可以不经break、return或throw等语句结束而连续执行，但是在实际开发中，建议所有的case语句（除非必须连续执行，但是必须以详细的注释注明）都以break、return或throw等语句结束，否则，当其他开发者维护此段代码时，很容易会认为这段代码漏掉了结束语句，而额外错误地添加一个结束语句，导致程序逻辑被改变。with语句

在ECMAScript脚本规范中，with语句用于为多个从属于相同类或对象的属性、方法省略其相同的父集（例如这些属性、方法共同从属的命名空间、类和对象），使代码更加精简。但是在实际开发中，由于Javascript本身就是一种最容易被误解的脚本语言，因此强烈建议禁止使用with语句。for...语句

for...语句是一种迭代语句（或称循环语句），其作用是根据一个依照指定规律变化的值（被称作循环节）重复执行一段代码若干次。在使用for...语句时，应该尽量避免使用continue或break语句跳出循环，随意地跳出虽然可以提高代码效率，但是会极大地影响代码的判读。

7．数组

在书写普通的短数组时，需要注意数组的元素与逗号分隔符“,”之间要有空格，例如一个简单数组的书写方式如下。

如果数组元素的总长度超过了行长80的限制，则应对数组进行拆分书写，并保证每行行末以逗号分隔符“,”为数组内的行结尾，代码如下所示。

需要注意的是由于数组和函数、语句等语句块不同，其末尾的右中括号之前没有分号“;”，因此为防止Web浏览器自动为其最后一个数组元素添加分号“;”强制结尾换行，应将右中括号“]”贴近最后一个元素书写。

8．对象

对象的结构与数组类似，其都由若干子结构组成，但是由于对象的结构组成非常复杂，子结构可能是普通变量构成的属性值，也可能是子对象、数组，以及对象的方法，因此书写对象时应尽量保证对象的每一个成员都独占一行，对象成员的子成员也应该至少独占一行。在下面的代码中，就书写了一个包含嵌套子对象结构的对象。

9．长字符串

在编写Javascript脚本时经常会需要创建一些长字符串，并对长字符串进行处理。此时，如果字符串的长度超过了行长，则应对字符串进行拆分，将其拆分为若干段短字符串，然后使用连接符“+”将其连接。

在书写这类字符串时同样需要注意应将连接符“+”作为行末的结尾，以防止代码解析错误。

1.5 项目代码的管理

在团队协作开发时，需要保障项目团队每个成员代码的一致性、避免代码冗余及保障代码的安全性，同时，面对多个成员同时进行的操作，需要不断地将成员编写的代码整合到一起。这些问题依靠手工来解决是十分困难的，因此，有必要使用一些自动化工具来对代码进行有效的管理，实现版本控制。1.5.1 版本控制工具

版本控制是一个复杂的管理体系，其通过规范的版本控制开发流程，使用稳定高效的版本控制工具进行工作，可以说绝大多数项目团队的开发都离不开版本控制。在进行版本控制管理时，需要首先了解版本控制工具的功能和操作。

1．版本控制工具的功能

版本控制工具是一个软件体系，其主要可以实现以下几种功能。保持代码一致性

软件开发是一个团队协作进行的工作，需要每个团队成员并行工作，也就是同时分布进行不同的开发工作，每个团队成员都需要获取最新版本的代码并基于这些代码实现开发。因此，需要版本控制软件维护当前项目开发的代码，将每个成员提交的代码组织起来，保障每个成员随时都能从服务器获取最新版本的代码。避免冗余备份

在开发项目时，有时需要将旧的代码版本备份起来以供未来参考。同时，备份旧的代码也有助于防止在开发出现问题后无法恢复旧有版本。因此，版本控制软件需要存储每一个代码文件的变更历史记录，以便开发团队的成员可以进行快速代码追溯和回滚。创建分支项目

有时开发的一个软件项目可能被划分为多个不同的软件项目。在现有的项目代码基础上经过几个不同方向的修改，软件项目转变为多个功能和需求类似的分支项目。如果以手工的方式实现此类功能，很可能需要阅读大量的代码和文档，以确定每一个文件的功能，然后再进行人工删减。使用版本控制软件可以方便地建立多个分支，然后以母版本为参照，实现插件式的开发，快速将母版本扩展为多个分支项目版本。协调并行开发

版本控制软件应允许某一个团队成员在修改某个文件时对其进行锁定，禁止其他团队成员修改，避免版本冲突。版本控制软件也应该具备合并版本的功能，在发生版本冲突后通过特殊的标记标明该文件哪些内容属于哪个开发者编写的，为实现什么目的编写的，辅助开发者将更新的内容合并为一个文件。保护代码安全

版本控制工具的作用就是维护软件代码的版本，将最新的代码分享给团队所有成员。但是在大型项目中，版本控制工具可能掌握几十万行代码，由分处世界各地的团队开发，不应允许任意一个团队成员修改所有代码，否则一旦发生管理问题或其他不可知的误操作，很可能造成极大的损失。因此，版本控制工具应该能限定局部某些代码的修改和查看权限，保护代码不被未授权的团队或成员修改，提高代码的安全。整合全局代码

在软件开发工作完成后，版本控制工具还应提供代码的打包和生成工具，将包含各种版本控制信息的代码数据清理导出为正式的软件代码，供编译器编译或提交Web站点发布。开发文档管理

版本控制工具除了管理代码外，还可以管理开发项目的各种文档，例如功能需求书、功能设计书、数据库设计书、接口说明书、代码流程图、数据流程图等。通过对这些文档的管理，为开发团队提供可靠的开发说明，辅助开发团队更好地维护代码。

2．版本控制工具的系统结构

版本控制工具通常需要依托一台服务器来存储代码、代码的更新记录，以及一个完整的账户角色权限控制系统。同时，还需要在每个项目团队成员的开发工作站上安装对应的客户端，实现代码操作工作，其系统结构如图1-11所示。图1-11 版本控制工具的系统结构图

3．版本控制操作流程

基于版本控制工具的开发工作需要一个规范的流程，每个团队成员都应该根据这一流程进行版本操作，才能使版本控制工具有效地工作。版本控制流程中，项目团队分为两种角色，即版本管理员和普通开发者，其工作流程如图1-12所示。图1-12 版本控制操作流程

其中，版本控制管理员的工作是创建版本项目，规划项目代码文件的结构，然后根据代码文件的结构以及团队中成员的任务来分配每个成员对局部代码的操作权限。在团队成员开发过程中如果出现了版本冲突，则处理冲突，合并版本。最终，当项目开发完毕后，将版本控制工具内的最终代码导出，交付使用。

普通开发团队成员的工作则是根据管理员分配的权限编写指定位置的代码，将其保存并提交到服务器中。如果出现了版本冲突，则提交给管理员合并，否则更新出新的代码，进入到下一个编码环节，循环操作直至项目开发完成。1.5.2 常用版本控制工具

作为辅助开发的重要工具，版本控制工具有很多种，其功能也各异。开发一个项目，除了规划项目的功能、需求之外，最重要的还是应该根据项目的类型以及团队的操作习惯选择一款合适的版本控制工具。常用的版本控制工具包括Microsoft Visual SourceSafe （VSS）、Concurrent Versions System（CVS）、Subversion（SVN）、Git等。

1．Microsoft VisuaI SourceSafe（VSS）

Microsoft Visual SourceSafe（简称VSS）是微软公司开发的一款用于Visual Studio开发平台的版本控制工具。与其他微软公司开发的软件类似，VSS具有良好的可视化操作界面，和Windows、.NET平台以及Office软件等有极其优越的兼容性，可以完全独立出来作为Windows服务器的一个插件安装。

VSS除了可以管理基于Visual Studio开发平台的代码之外，还可以有效地管理文本、视频、声音、可执行程序、图像以及Office系列文档。尤其针对Office系列文档，VSS甚至可以像管理代码一样管理Office文档的版本，合并冲突等。由于VSS众多的优点，很多中小企业甚至使用它作为内部文档管理系统。

VSS的缺点在于，它仅支持Windows操作系统的服务器和客户端，由于其管理文档时需要检索更复杂的文档内容（例如编译过的Office文档），因此和其他版本控制工具相比速度较慢。另外，VSS还有一个显著的缺点就是对远程支持较差，当项目开发团队分处不同的地点时，使用VSS管理项目代码几乎是一个灾难。另外，VSS仅能和Visual Studio系列开发平台对接，其他Web开发工具基本上无法获得VSS的客户端支持，因此，通常只有开发.NET项目和基于.NET的前端项目时才会选择使用VSS。

2．Concurrent Versions System（CVS）

Concurrent Versions System（CVS）是开发源代码的并发版本系统，其可用于各种平台，包括Linux、Unix和Windows NT等。相比VSS的封闭性，CVS更加开放，具有更强的平台适应性。

CVS几乎拥有现代版本控制工具的所有功能，支持代码集中配置、灵活的无限制检出模式、替代管理、自动测试和同步开发，甚至支持通过互联网来管理分处异地的并行开发项目。基于CVS的强大功能，许多开源软件项目都使用该软件进行管理。

当然，CVS也有一些缺陷，例如它和VSS一样采用文件的方式存储和管理数据（并非数据库软件），因此其速度和VSS几乎一样慢，且不支持文件元数据，只能存储文件本身的信息。另外CVS是针对文本的代码文件而设计的，因此对一些复杂类型的文件管理支持并不好（例如图片、Office文档等编译过的二进制文件），对用户和权限的管理也并不如其他版本控制软件那么明确。另外，所有CVS的服务端操作几乎都是以命令行的方式实现的，对一些开发者而言比较困难。

CVS适合管理大型开源项目，支持分处异地的多个项目开发团队或成员并行开发操作，通过互联网提交和更新代码，支持以Web页面的形式建立项目。CVS典型的应用就是Sourceforge.net，一个免费的公开项目管理站点，任何人都可以在该站点注册并创建开源项目，发布代码。由于CVS的部署和维护比较复杂，对于中小型开源项目而言，完全可以直接使用类似Sourceforge.net之类的在线CVS项目维护工具进行代码维护。对于中小型闭源项目而言，则不建议使用这一工具。

3．Subversion（SVN）

Subversion（SVN）是一款较“年轻”的版本控制工具，其针对CVS的一些项目缺陷而设计和开发，目的是最终取代CVS。与CVS相同，SVN也支持几乎所有操作系统平台，且由于其具备了强大的图形化服务端和客户端，能够方便地与其他各种操作系统、软件开发平台挂载，因此一经推出立即得到广泛应用。

SVN作为未来CVS的替代品，其在设计上普遍吸取了CVS的特性，完善地继承了CVS的各种功能，例如代码集中配置、灵活的无限制检出模式、替代管理等，也支持通过互联网来管理分处异地的并行开发项目。目前，SVN已经具有取代CVS的态势。

SVN与CVS最大的区别在于，SVN具有两种工作模式，一种是基于BDB（一种事务安全型表类型的数据库），另一种则是基于FSFS（一种不需要数据库的存储系统）。通常绝大多数开发团队都会选择第一种，基于强大的本地数据库引擎来管理数据，获得比VSS和CVS更高的存储效率。

SVN也采用集中管理的工作模式，因此其管理较为方便，能够显著地增强代码的安全性，保持整个项目代码的一致性。另外，集中管理的原则具有更加明确的权限管理机制，可以方便地进行分层配置管理，实现不同权限开发者对项目代码的操作。

但是SVN的集中管理数据也存在一些问题：首先，大量开发者对服务器进行频繁的检出、提交操作会对服务器造成很大的负担；另外，在开发过程中必须随时保持与服务器的联接，一旦联接中断则将很可能无法工作。

SVN适合管理中小型项目，尤其适合本地局域网，或者随时能够保障广域网连接的远程项目的管理操作，其同样支持以Web页面的形式建立和管理项目，并且提供了各种方便的可视化管理工具来配置服务器的信息，支持挂载在Apache服务器上直接运行，维护和部署都十分简单便捷。基于以上理由，在进行中小型项目时，如果项目组同处一个局域网络或具有VPN，或者项目组随时可以保障互联网联接，则完全可以选择SVN作为版本控制工具。1.5.3 版本操作规范

在使用版本控制工具来管理项目后，每一个项目组成员都必须遵守一定的版本操作规范，才能保障代码的安全，实现高效的开发管理。

1．项目管理规范

项目管理规范是指项目管理者制定的，针对整个项目源代码的建立和操作的规范。其需要遵守以下守则。项目建立规范

在前端开发过程中，在项目立项之后，项目管理者需要在版本控制工具中建立项目，规划项目的代码目录结构，合理地安排项目的代码存放方式。账户分配规范

在建立项目后，项目管理者即可为每个项目组成员分配一个版本操作账户，做到专人专账户，要求每个成员都设定唯一的密码。权限分配规范

在建立项目后，项目管理者需要根据项目组每个成员的职责和任务，分别为项目代码的目录建立权限控制，然后为这些目录分配具有写入权限的操作员。权限的合理分配可以保障项目代码的安全，防止项目组成员越权进行代码的提交。代码合并规范

当代码的版本冲突时，项目管理者有义务对代码内容进行分析，然后将冲突的两个或多个文档合并在一起，产生新的版本号。除此之外，在合并版本时还应该编写合并版本的操作原因等信息。分支管理规范

在项目开发过程中，可能会根据项目临时的需求或者项目的衍生版本进行调整，此时就需要项目管理者为项目建立分支版本。每一个分支版本都必须具备完整的功能说明和建立的理由，以备项目维护所用。

2．开发操作规范

项目版本管理的开发操作规范是针对每一个项目开发者制定的。其目的是尽量规范版本管理的操作，避免版本冲突，提高版本管理的效率。其规定了项目组成员在编写代码和获取整体代码时的做法。检出代码规范

检出操作是指从服务器中下载整个项目的代码文档，将其部署到本地开发工作站的操作。在项目开始开发之前，每个参与的开发者都必须进行一次检出操作以获取项目的文件结构，并了解所允许编辑的代码部分。新增文件规范

在为项目新增一个代码或其他文档文件时，需要首先在本地工作站目录下创建代码文件或文档文件，待编辑完成后将其提交到服务器上。同时，必须书写完整的新增文件日志，日志的格式可以按照项目开发组内部的习惯制订，但是必须包含该文件的名称、相对于整个项目的目录位置、作用、初版作者以及创建时间等。编辑、提交代码规范

在编辑任何一个项目代码或文档文件之前，首先应该进行数据更新工作，确保得到的代码或文档是最新版本，然后将其锁定，再进行修改操作。在修改完成后，及时编写日志记录信息（包括新增的内容、修改的内容以及删除的内容），进行提交操作，然后对文件解锁。删除文件规范

如果因故需要对代码文件或文档文件进行删除，可以直接编写删除日志记录信息（包括删除文件的名称、作用以及删除的理由等），然后再提交整个目录。

1.6 项目代码的调试

项目代码是Web开发团队最终生产的产品。在开发代码时，使用一些有效的调试工具可以快速测试代码的有效性，追踪代码执行的过程，测试代码的BUG。Web项目的代码是基于Web浏览器运行的，因此绝大多数代码调试工具都需要依托Web浏览器。常用的前端代码调试工具主要有Firefox浏览器的Firebug和IE浏览器的F12开发人员工具等。除此之外，一些在线工具和基于其他开发平台的工具也可以辅助开发者调试代码，测试代码的逻辑性和书写严谨性，例如JSLint和JSHint等。1.6.1 Firebug

Firebug是一款第三方开发的基于Firefox的插件工具，是最著名的Web开发调试工具之一。Firebug根据Firefox浏览器的更新而不断改进，已逐渐拓展到其他Web浏览器平台，包括Opera和Safari等。同时，Google等Web浏览器开发商也采用了许多Firebug的技术，开发出基于自身Web浏览器的类似工具。

FireBug是基于Web浏览器的插件，因此它只能依附于Web浏览器运行。以Firefox的Firebug插件为例，在打开Firefox浏览器后，执行【Firefox】|【附加组件】命令，即可打开【附加组件管理器】窗口，如图1-13所示。图1-13 Firefox的【附加组件管理器】窗口

在【附加组件管理器】右上角的搜索框中输入Firebug，即可在更新的附加组件列表中找到Firebug的最新版本。单击右侧的【安装】按钮，即可安装，如图1-14所示。图1-14 安装Firebug

在安装完成后，重新启动Firefox浏览器，即可单击导航工具栏右侧的Firebug按钮启动Firebug插件，如图1-15所示。在默认状态下，Firebug插件会显示于Web浏览器窗口的下方。图1-15 启动Firebug插件

Firebug插件的窗口分为三个部分，即【标签】工具栏、【内容】窗格和【命令行】窗格。其中，【标签】工具栏和【内容】窗格都是默认显示，而【命令行】窗格则默认处于隐藏状态。【标签】工具栏【标签】工具栏是Firebug的导航工具，其包含6个工具按钮、7个选项卡按钮、搜索栏以及3个窗口按钮等，其作用如表1-7所示。表1-7 Firebug【标签】工具栏【内容】窗格【内容】窗格的作用是根据选择的面板按钮显示对应的数据信息，包括控制台、HTML、CSS、脚本、DOM、网络以及Cookies等。根据选择的面板不同，【内容】窗格可能会划分出若干窗格显示。【命令行】窗格

在默认状态下，【命令行】窗格处于隐藏状态，当且仅当开发者单击【标签】工具栏的【显示命令行】按钮后，该窗格才会显示。【命令行】窗格显示的内容与【控制台】的【内容】窗格大体类似，因此当选择【控制台】面板时，此窗格将和【内容】窗格合并，其内容在此不再赘述。1.6.2 F12开发人员工具

F12开发人员工具是微软的Internet Explorer浏览器专用的项目代码测试工具。其自IE 7.0版本开始被加入到IE的发行版中，并随着IE浏览器的不断发展而改进，每个主要的IE版本都会有对应版本的F12开发人员工具。

目前F12开发人员工具最新的稳定版本基于IE 10.0，它可以模拟IE 5.0到IE 10.0之间所有IE版本的代码解析，是目前调试IE浏览器下脚本的最强大的工具（截止本书编写时，微软的IE 11.0和对应版本的F12开发人员工具仍处于测试版状态，并不稳定，因此不推荐使用）。

F12开发人员工具与Firebug的不同在于其属于微软官方开发的工具软件，因此其性能和稳定性都比较强，且与Web浏览器结合得也更加紧密，执行效率高，速度快。尤其人性化的是，早期的Firebug并无中文版本，但是微软的F12开发人员工具则支持多种语言，包括中文。

另外，F12开发人员工具的页面元素追踪功能也远胜Firebug，可以支持模拟多个IE浏览器的功能也十分实用。但是由于其推出较晚，且界面上与Firebug有较大区别，因此并未被开发者普遍采用。

F12开发人员工具是IE浏览器自带的工具，因此开发者无需下载，只需要拥有7.0版本以上的IE浏览器即可直接使用。

打开IE浏览器（IE 7.0以上版本），按下F12键，或者直接按下组合键Alt+T，在弹出的菜单中执行【F12开发人员工具】命令，均可打开F12开发人员工具的窗体，如图1-16所示。图1-16 基于IE 10.0的F12开发人员工具

F12开发人员工具的主体界面与其他Windows程序类似，分为【菜单】栏、【选项卡】面板和【内容】窗格三个部分。【菜单】栏【菜单】栏提供了10种菜单栏命令以及【最小化】按钮、【新窗口】按钮和【关闭】按钮等工具。其命令及作用如表1-8所示。表1-8 F12开发人员工具的【菜单】栏命令【选项卡】面板

F12开发人员工具的【选项卡】面板与Firebug的【面板】按钮类似，都是用于定义【内容】窗格显示的内容，其包括6种选项卡，如表1-9所示。表1-9 F12开发人员工具的【选项卡】面板【内容】窗格

用于根据【选项卡】面板选择的工具，显示对应的内容结果。1.6.3 JSLint及JSHint

JSLint是一款使用Javascript编写的闭源验证工具，其可以扫描Javascript脚本代码，追踪和查找这些脚本代码的问题，并提供出现问题的代码位置（行和字符位）。JSLint可以显示出代码书写风格的错误、不合理的约定以及代码结构等问题，帮助开发者发现错误。

JSLint提供了两种使用方式，一种是直接通过其官方网站（http://www.jslint.com）的在线检测工具，将代码粘贴到网站，选择指定的检查内容，即可在站点生成检测报告，如图1-17所示。图1-17 JSLint在线检测工具

除此之外，也可以通过Mozilla提供的Java实现的开源Javascript引擎——Rhino工具追加插件，然后通过命令行的方式使用修改版本的JSLint功能。

JSHint是JSLint的一个分支项目。JSLint本身是基于其开发者编码习惯而开发的，限制较多，而JSHint的目标是提供更加个性化的Javascript代码质量和编程风格检查工具。相比JSLint，JSHint提供了更多的自定义检查项目，其使用较为复杂，但是可以针对不同项目开发团队自身的习惯进行定制。JSHint同样提供在线检测工具和Rhino工具，其在线检测工具地址为http://www.jshint.com，如图1-18所示。图1-18 JSHint在线检测工具

JSLint和JSHint并不能百分之百地检测出代码中的逻辑错误，但是在语法检测、编码风格检测上具有不可替代的功能。使用这两款工具，可以帮助开发者和开发团队维持良好的编码习惯，防止混乱的编码风格导致不可预知的错误。

1.7 小结

Web前端项目开发是一个复杂而严谨的系统工程，其涵盖了多种应用技术，包括XHTML结构语言、CSS样式表和Javascript脚本语言等。因此，作为全书的开篇，本章简要介绍了Web的产生、发展以及未来终端的多样化，并介绍了Web站点的构成、开发所使用的技术标准、开发工具等。

除了Web开发的各种基础技术和知识外，由于当代Web项目的开发往往需要项目开发团队的多个成员共同努力协作实现，因此在本章的末尾还介绍了Web团队开发的一些协作经验和知识，包括Web项目的开发模式、分工协作以及前端Web开发的脚本代码规范等。除此之外，还针对现代Web的代码管理方向，介绍了版本控制工具的概念、常用的版本控制工具以及使用版本控制工具的一些规范。

最后，针对前端脚本开发的调试工作，介绍了三种常用的调试工具，为开发者编写程序和测试代码提供技术支持。

第2章 Web元素的结构

Web结构语言（即XHTML结构语言）是整个Web开发体系中的基石，其结构和内容奠定了Web应用向终端用户展示的基础，因此在开发Web应用之前，首先需要了解的就是XHTML结构语言的语法和规范，以及各种Web结构元素、Web结构组件的使用方法。

通常情况下，XHTML结构语言可以为Web应用提供三种类型的显示元素，即语义元素、表格元素和交互元素，除此之外，还将定义整个文档的结构并对其进行布局，正是这些显示元素构成了Web应用。本章将简单介绍XHTML语言的基础语法、结构元素以及各种显示元素的代码，为Web应用开发夯实基础。

2.1 XHTML结构语言基础

XHTML作为一种国际化的通用标准，被广泛应用于现代Web应用的开发中，以存储Web显示层面的数据。目前，绝大多数的现代Web站点和Web应用都使用XHTML结构语言开发。使用合理而规范的XHTML结构代码可以提高Web站点或应用的兼容性，同时提高Web代码解析程序的解析效率。

XHTML是更加严谨和规范化的HTML，其设计思路为沿用HTML的绝大多数标记，同时对HTML的语法进行整合，使其符合XML的规范。在绝大多数情况下，XHTML完全符合HTML的语法，并以此做到向下兼容。

XHTML是一种基于标记、属性、属性值和内联数据的结构化语言，其由文档类型声明（Doctype Declaration，简称DTD）和根标记组成。根标记下再包含各种内容标记。2.1.1 文档类型声明

文档类型声明，是由XML继承而来的特性，其作用是为读取和识别XHTML文档的软件提供当前文档的类型、语法规范来源等信息。文档类型声明必须被书写在Web页文档的头部，以告知各种读取文档的软件采用何种规范来获取文档内的数据并显示出来。

XHTML的文档类型声明主要包括三种，即严格型（Strict Mode）、过渡型（Transitional Mode）和框架型（Frameset Mode）。

1．严格型声明（Strict Mode）

严格型声明是W3C推荐采纳和使用的一种类型声明。在此声明模式下，禁止使用一些表现样式和视觉效果的标记，同时规范了绝大多数标记的书写和使用方法。严格型声明的书写方式是唯一的，如下所示。

2．过渡型声明（TransitionaI Mode）

过渡型声明是为尚未完全适应Web结构化、语义化开发的Web开发者提供的一种向下（HTML 4.01及以下版本）兼容的XHTML方案。在该方案下，开发者可以使用一些表现视觉效果的旧有HTML标记，从而实现一些显示功能。如非特别需要，在此不建议使用这一类型声明。过渡型声明的书写方式如下所示。

3．框架型声明（Frameset Mode）

框架是指完全、完整地引入另一个Web文档的内容，将其嵌入到当前的Web文档中的一种文档类型，在这类Web文档中，当前的文档就是框架文档，而被引入的文档则被称作嵌入文档或者嵌入帧。

框架类型的Web文档通常被应用到一些特殊需求的页面，通过嵌入外部文档来实现文档内容的复用性。框架型声明的书写方式如下所示。2.1.2 标记

标记是XHTML的基本构成部分。所有XHTML文档内部都将根标记、内容标记等以树的结构构建。其中，根标记在XHTML文档中是唯一的，而内容标记则按照指定的规则嵌套。

XHTML的标记的书写方式必须严格遵循XML标准，即所有的标记都通过尖括号“＜＞”标识，且标记的名称必须小写。

1．根标记

根标记（HTML）是XHTML文档中最重要的标记，其在XHTML文档中是唯一的，且只能位于DTD标记之后。根标记不是任何标记的子集，它只包含头部标记、主体标记和框架集标记三种子标记（如有必要，注释标记也可以作为根标记的子集）。典型的根标记应用代码如下所示。

所有主流Web浏览器都支持根标记。根标记具有唯一的实例属性，即xmlns属性，其用于标记当前文档的命名空间。在XHTML结构语言中，xmlns属性的值必须是“http://www.w3.org/1999/xhtml”。除了实例属性外，根标记还支持dir、lang和xml:lang等标准属性。

2．标记的分类

XHTML标记可以根据其书写方式分为两种，即闭合标记和非闭合标记。这两种标记都包含属性、属性值，闭合标记还包含内联的字符串数据。闭合标记

闭合标记是指成对出现的标记，这类标记包含开始标记和结束标记，通过内联的字符串或嵌套的子标记来表现Web内容。典型的闭合标记有根标记（HTML）、文档头标记（HEAD）、文档主体标记（BODY）等。闭合标记的书写方式如下所示。

其中，“＜html＞”标记为起始标记，“＜/html＞”标记为结束标记。绝大多数XHTML标记都是闭合标记，其内容必须被包含在起始标记和结束标记内部。非闭合标记

非闭合标记是指无需通过内嵌的字符串或子标记来表现内容的一些特殊标记，这些标记已经表示了一个独立的内容块，因此无需再进行闭合。但是在XHTML语法中，非闭合标记需要通过“/＞”结束，表示此标记已经闭合，方便各种识别程序查找标记的结束部分。

典型的非闭合标记有图像标记（IMG）、横线标记（HR）、换行标记（BR）等。非闭合标记的书写方式如下所示。

需要注意的是，非闭合标记结束的斜杠和标记名称之间必须空一格。

3．标记的嵌套

XHTML的标记是以树的结构组织构建的，通常闭合标记都能够嵌套其他标记或字符串内容。例如，XHTML的根标记（HTML）就能够嵌套文档头标记（HEAD）和主文档体标记（BODY），如下所示。

非闭合标记虽然不能嵌套其他标记，但可以作为子标记被嵌套在闭合标记中。

相比传统的HTML，XHTML的嵌套规则更为严格。在HTML中，允许将两个标记交叉嵌套。例如，下面的节和段落就属于典型的交叉嵌套。

以上写法在HTML中是完全合法的，但是在XHTML中，这种方式被严格禁止。XHTML的标记必须完全按照指定的内外层级嵌套，标记的起始标签和结束标签必须一一对应，如下所示。2.1.3 属性

属性是标记的描述信息，用于描述标记的呈现方式、关联内容等信息。绝大多数XHTML标记都支持各种各样的属性。根据XHTML属性的作用，可以将其分为实例属性、核心属性、语言属性、键盘属性和事件属性。

1．实例属性

实例属性是每个XHTML标记的特殊属性，其往往与标记自身的功能结合得十分紧密，绝大多数XHTML标记都会具有一个或多个实例属性。

2．核心属性

核心属性是绝大多数XHTML标记都支持的共同属性，其用于定义XHTML标记与各种程序的接口，或其工具的提示信息。XHTML的核心属性包括以下4种，如表2-1所示。表2-1 XHTML核心属性

绝大多数的XHTML标记都支持XHTML核心属性，除了基准路径标记（BASE）、头部标记（HEAD）、根元素标记（HTML）、元数据标记（META）、对象参数标记（PARAM）、脚本标记（SCRIPT）、内联样式标记（STYLE）以及文档标题标记（TITLE）等标记以外。

3．语言属性

语言属性用于定义标记内文本的流向和所属语言的语言代码。除基准路径标记（BASE）、换行标记（BR）、框架标记（FRAME）、框架集标记（FRAMESET）、水平线标记（HR）、内联框架标记（IFRAME）、对象参数标记（PARAM）和脚本标记（SCRIPT）以外，所有的XHTML标记都支持语言属性。XHTML的语言属性包括三种，如表2-2所示。表2-2 XHTML语言属性

4．键盘属性

键盘属性用于定义使用键盘快速访问标记的方式。通常情况下，只有可交互的Web元素标记才支持键盘属性，例如超链接、嵌入的对象以及表单控件等。XHTML的键盘属性包括两种，如表2-3所示。表2-3 XHTML键盘属性

5．事件属性

事件属性的作用是为XHTML标记绑定对应的事件。事件是指用户对XHTML标记进行的操作触发的交互行为。这种交互可以是执行一段Javascript脚本，可以是调用DOM内置的方法实现的交互行为，也可以是改变XHTML的样式或调用HTTP协议的POST方法或GET方法。XHTML的事件分为隐式事件和显式事件两种。隐式事件

隐式事件是指由Web浏览器等XHTML文档识别软件根据XHTML默认的标记和属性，自动触发和执行的事件。

这类事件并非基于用户自行定义，而是由软件自行识别和触发。典型的隐式事件指超链接标记A、按钮标记BUTTON、输入控件标记INPUT等交互标记被鼠标单击，以及绝大多数可视标记被鼠标滑过、单击时自动执行的行为。除此之外，还有元数据标记META也可以触发一些特殊的隐式事件（例如自动跳转到其他页面等）。

隐式事件是由Web浏览器自动触发，因此除非开发者对这些交互标记重新定义行为，否则必然会触发这些隐式事件。例如，当按钮标记BUTTON的type属性值为“submit”时，该按钮被鼠标单击，将自动触发按钮所属表单的提交事件，根据其所属表单标记FORM的method属性值，触发HTTP协议的POST或GET方法，如下所示。

隐式事件是无需开发者干涉的事件，因此无需专门为这类事件编写相关的代码。显式事件

显式事件是指由开发者通过XHTML标记的一些特殊属性编写的自定义事件，这一组属性被称作事件属性。事件属性的书写方式与普通XHTML属性类似，属性名都需要以小写的方式书写，属性值也必须被引号“""”包裹。例如，为一个按钮添加鼠标单击事件，执行一个名为TestFunc的Javascript函数，代码如下。

显式事件的语法与普通属性的语法类似，可以触发的行为类型包括窗体事件、表单事件、图像事件、键盘事件以及鼠标事件等。

关于事件属性的具体使用方法，请参考之后相关的章节。2.1.4 属性和属性值的写法

XHTML的属性和属性值的书写方式与XML一致，都必须书写在标记名称之后空一格的位置。需要注意XHTML与HTML 4.01、HTML 5有所不同的是，其强制规定所有的属性必须有属性值，且属性值必须被双引号“""”包裹。

1．闭合标记的属性

如果标记为闭合标记，则属性应书写在闭合标记的起始标记内，不能书写在闭合标记的结束标记内。

例如HTML标记通常需要定义整个页面文档的命名空间，因此需要添加xmlns属性，且其属性值是唯一的，如下所示。

2．非闭合标记的属性

如果标记为非闭合标记，则标记的属性和标记的结束标识符斜杠“/”之间必须空格，例如页面基准URL标记BASE的属性，必须采用如下写法。

3．标记的多个属性

一个标记可以同时支持多种属性，但多个属性之间必须以空格隔开。例如，定义一个超链接的URL和工具提示信息，其代码如下所示。

4．属性的多个属性值

一些特殊的属性往往允许定义多个属性值，例如class属性（用于为标记添加类），就允许同时为标记定义多个类。此时，需要以空格隔开多个属性值。例如，定义一个段落，采用了红色的前景色和段首缩进两个字符，如下所示。2.1.5 注释

注释是所有编程语言共有的一种特殊语法构件。注释的作用是标记一段代码，禁止语法解析程序解析这些被标注的代码。在开发过程中，注释通常有两个作用。第一个作用，即在调试时禁止某段代码被解析和执行，从而判断程序出现问题的位置。另一个作用则是作为代码的描述和解释，告知后续维护的开发者此段代码的作用、意义以及其他相关信息。

XHTML的注释其实也是一种特殊的标记，区别在于其起始标记不需要以右尖括号“＞”结束，其结束标记也不需要以左尖括号起始。XHTML的注释起始标记为“＜!--”，结束标记为“--＞”。在注释标记内，可以嵌套任意非注释标记和双下划线以外的文本或标记，例如，一段文本注释如下所示。

注释标记内也可以嵌套其他HTML代码，例如，嵌套一个段落标记，注释段落标记内的内容，如下所示。

2.2 文档结构标记

文档结构标记是文档根元素HTML下最重要的标记，其作用是规划整个文档的基本结构，描述文档的性质并存放文档的显示内容。XHTML具有三种文档结构标记，即文档头标记、文档主体标记和框架集标记。2.2.1 文档头标记

文档头标记即HEAD标记，其作用是定义文档的标题、预加载的外部脚本、样式等文件，并定义文档的元数据以及内嵌的样式和脚本等信息。文档头标记位于根标记（HTML）内，作为其第一个子集存在。文档头标记仅能与框架集标记（FRAMESET）或主体标记位于同一级别，且只能位于这两种标记之前，如下所示。

文档头标记具有一个唯一的实例属性profile，其属性值为一个或多个以空格隔开的URL地址，用于链接外部的元数据信息。文档头标记具有多种类型的子集，分别作用于文档的基准路径、外链文件、元数据、脚本、内联样式以及文档的标题等。

1．基准路径

文档的基准路径由基准路径标记（BASE）来定义，其作用是在Web文档中声明一个作为所有当前Web文档内链接、内嵌对象路径的基准参考值和所有链接、路径的默认值。

基准路径标记可作用于超链接标记（A）、图像标记（IMG）、外链文档标记（LINK）、表单标记（FORM）以及对象标记（OBJECT）等，为这些标记内嵌的相对URL路径提供路径基准，组成完整的URL。

在上面的代码中，图像标记（IMG）引用了一个外部图像的名称，在基准路径标记有效的情况下，Web浏览器将以基准路径为默认URL解析，其解析的图像URL应为“http://www.microsoft.com/eg_smile.gif”。

2．外链文件

外链文件由外链标记（LINK）定义，其本身在XHTML规范中被赋予了强大的功能，允许将各种类型的外部文档加载和导入到当前文档中。但是在实际的应用中，Web浏览器只支持从外部导入CSS样式表文档的功能。外链标记仅能出现在头部标记（HEAD）中，但不限制出现的次数。使用外链标记的方法如下所示。

在上面的代码中，外链标记为文档导入了一个名为theme.css的CSS样式表，将样式表的代码应用到Web文档中。

3．元数据

文档的元数据由元数据标记（META）定义，其作用是为Web浏览器提供当前XHTML文档的元数据信息，例如当前文档的字符集、更新日期、关键字等，从而为客户端Web浏览器提供报头，以及为搜索引擎爬虫程序提供检索的依据。合理使用元数据标记，可以帮助开发者更快、更高效地推广网站，提高网站SEO效率。

元数据标记必须存放于头部标记（HEAD）内，最好放在头部标记（HEAD）的开头，以便外部的搜索引擎程序高效地抓取数据。一个页面可以有多个元数据标记，根据元数据标记的属性用于不同的用途。

元数据标记的content属性是必选选项，但是http-equiv属性和name属性仅能有一个存在，其使用方法如下所示。

上面的代码分别定义了Web页文档的编码字符集和缓存过期时间。

4．脚本

脚本由脚本标记（SCRIPT）定义，其作用是为Web文档导入一段外部的脚本，或直接执行一段内联的脚本。脚本标记允许开发者插入和使用Javascript、VBScript、XHTML DOM等多种类型的脚本语言编写行为代码，提高Web页的交互性。在下面的代码中，就调用了一段XHTML的DOM脚本，实现窗口关闭。

在此需要注意的是，所有主流的Web浏览器都支持脚本标记，但是仅有IE系列Web浏览器支持使用VBScript脚本语言，其他Web浏览器仅支持使用Javascript脚本语言。XHTML的DOM脚本通常被作为Javascript类型处理，其type属性与Javascript脚本一样，为“text/javascript”。

5．内联样式

内联样式需要使用内联样式标记（STYLE）定义，其作用是为Web文档嵌入一段内联的CSS样式表代码，定义Web文档内各种XHTML标记的样式，并规定这些CSS样式表代码在何种媒介类型下有效。

内联样式标记与外链标记都能为Web文档添加CSS样式表，其区别在于，外链标记导入的是外部的CSS样式表文件，以提高外部的CSS样式表标记的复用性；而使用内联样式标记，则这些内嵌的CSS样式表代码只能为当前Web文档使用，没有任何复用性可言。

如果仅需要编写单独的XHTML文档，可以使用内联样式标记，而如果是为整个站点的所有Web页面编写样式，推荐采用外链标记。使用内联样式标记添加CSS样式表的方法如下所示。

6．文档标题

文档标题通过文档标题标记（TITLE）来定义，其作用是定义整个Web文档的标题。通常情况下，Web浏览器会读取该标记的内容，并显示于浏览器窗口的标题栏或状态栏上。文档标题标记在整个Web文档中是唯一的，且必须作为文档头部标记（HEAD）的子集存在。使用文档标题标记定义Web文档的标题，代码如下所示。2.2.2 文档主体标记

文档主体标记（BODY）的作用是存储所有Web页中的显示元素，为这些显示元素提供一个基本的容器。文档主体标记是XHTML中最重要的标记，是XHTML文档根标记的组成部分之一，与头标记并列，存在于头标记之后。使用文档主体标记定义文档内容，代码如下所示。

绝大多数XHTML标记都可以作为文档主体标记的子集，文档主体标记在XHTML文档中是唯一的。除框架集页以外，所有在XHTML文档中显示的内容都应从属于文档主体标记。2.2.3 框架集标记

框架集标记（FRAMESET）是一种特殊标记，其作用是为Web文档嵌入一个或多个框架标记（FRAME），通过框架标记将外部的XHTML文档显示到当前页面中。

1．使用框架集标记

框架集标记（FRAMESET）仅能作用于框架类型声明文档的标记。在框架类型声明的XHTML文档中，框架集标记将作为根标记（HTML）的唯一子集存在。在这种文档中，根标记（HTML）不包含文档头标记（HEAD），也不包含文档主体标记（BODY），其使用方法如下所示。

在上面的代码中，定义了一个上中下三行结构的框架集，分别链接外部的header.html、main.html以及foooter.html Web页。框架集标记通过两种实例属性和若干属性值来定义其内嵌的框架标记（FRAME）之间的位置关系，如表2-4所示。表2-4 框架集标记的实例属性

例如，需要将框架集标记中的框架以列的方式排列，可以定义其cols属性，而如果需要将框架集标记中的框架以行的方式排列，则可以使用rows属性。这两个属性是互斥的，也就是说，使用了其中一个，就不能再使用另一个。

2．定义框架

框架标记（FRAME）是框架集标记（FRAMESET）的子集，用于定义从外部引用的Web页。框架标记是一种特殊的容器标记，其本身不包含任何内容，通过指定的属性来引入外部文档内容。例如，从外部引入一个名为nav.html的文档，可以直接调用框架标记的src属性，如下所示。

除了src属性外，框架标记还包含多种实例属性，可以定义框架的边框、边距、描述、是否允许调节尺寸等信息，如表2-5所示。表2-5 框架标记的实例属性

2.3 文档的布局

布局是指对文档中的各种显示元素进行分隔、排列、定位的操作，使之更加结构化和美观。XHTML文档支持采用多种类型的标记来布局，例如使用文档节标记（DIV）、无序列表标记（UL）、定义列表标记（DL）等，来规划不同格式和类型的显示内容。2.3.1 文档节布局

文档节布局是指采用文档节标记（DIV）作为显示内容的容器的布局方式。文档节标记（DIV）是XHTML最重要的标记之一，其作用是将一个XHTML文档划分为多个部分，然后再通过CSS样式表定义这些部分的样式。可以说，文档节标记具有布局的功能，可以灵活地为各种内容布局。

例如，在下面的代码中，就使用了文档节标记将页面划分为五个区块，包括页头、导航、内容、侧栏和页脚等，如下所示。

除了直接布局和划分区块外，文档节标记还可以自由地相互嵌套，从而实现更加灵活的布局。例如，定义一个图片新闻显示元素，可以通过将若干文档节标记组合而实现。

文档节布局是目前Web开发中最常用的布局，通常用于整页内容的大模块分区布局操作，或对一些内容较为灵活、由多个复杂的部分构成的模块进行布局。

由于文档节布局所使用的是单一的文档节标记，因此滥用文档节标记布局很可能降低页面结构代码的可读性。因此，在实际开发过程中，建议将文档节布局和其他几种布局混合使用，使用多种布局和多种标记提高代码的可读性和维护性。2.3.2 定义列表布局

定义列表布局是指采用定义列表标记（DL）作为显示内容的容器的布局方式。定义列表标记的特点是可以存储依照标题和内容成对出现的定义词条和定义描述，因此对于标题和内容成对显示的数据，使用定义列表布局可以使内容更加符合语义化的标准，也更富有结构性。

定义列表标记包含两种子集，即定义词条标记（DT）和定义描述标记（DD），这两种子集必须以“词条+描述”的方式成对存在，且不能调换顺序。

其中，定义词条标记必须与定义描述标记成对使用且必须位于定义描述标记之前；定义描述标记用于为定义列表标记中的定义词条标记提供解释信息或描述信息。

通常情况下，定义描述标记与定义词条标记成对出现，且必须位于定义词条标记之后。一个定义列表标记可以包含多对定义词条和定义描述。

典型的定义列表布局通常用于内容管理系统（CMS）的新闻模块。例如，一个新闻分类下包含的若干新闻词条，其中新闻分类名称可以用定义词条标记（DT）存储，新闻词条则可以用定义描述标记（DD）存储，代码如下。

在上面的代码中，展示了一个由若干新闻分类组成的新闻列表模块，其中，每一个子模块都是由一个定义词条标记和一个定义描述标记组成。2.3.3 无序列表布局

无序列表布局是指采用无序列表标记进行布局的一种布局方式。无序列表是一种由无序列表标记（UL）和列表项目标记（LI）组成的父子结构模块，以呈现出若干列表项目并列显示的效果。

其中，无序列表标记（UL）定义列表显示的区块，为列表项目提供显示容器，而列表项目标记（LI）则用于承载并列关系的各项内容。

无序列表布局通常应用于Web页的导航部分，或者需要呈现若干同一级别的整齐数据（如新闻列表、用户名列表等）。在处理单列的数据时，无序列表完全可以替代表格，使Web页的结构更加简单。下面的代码就是采用无序列表制作的一个页面导航条，代码如下。

2.4 语义元素

XHTML语言的前身HTML语言是基于学术文档的超文本显示而设计，因此包含了很多用于学术文档的专用标记，来表现某些特殊文本的语义，这些标记所表现的内容就是语义元素，而这些标记则被称作语义化标记。

XHTML完整地继承了HTML的语义化标记和各种语义化的特色，通过语义元素和语义化标记表现其内容与文档之间的关系。常用的XHTML语义元素可以分为块语义元素和内联语义元素等两种。2.4.1 块语义元素

块语义元素是指独立成块，是Web文档中一个独立的内容区域的语义元素，其包括标题元素、段落元素、插图元素、块引用元素等。块语义元素又被称作块状元素、块元素等。

1．标题元素

标题是位于文章、章节开始的，用于标明文章、作品等内容的简短语句。标题通常以简洁的方式阐述下文的中心含义。在Web页中，标题元素具有特殊的意义，通常情况下，搜索引擎的检索功能会优先处理页面的关键字以及页内的标题元素。因此，合理地使用标题元素，可以使Web文档的结构更加语义化，更容易被搜索引擎检索。

XHTML提供了6种标题标记，分别为H1、H2、H3、H4、H5和H6，用于表示文档中的一级标题到六级标题，基本可以满足一般Web文档的排版和语义化需求。下面的代码就分别定义了这六种标题，如下所示。

所有的主流Web浏览器都支持采用上文的方式为文档编目，定义标题。通常情况下， Web浏览器会将标题部分加粗显示，并根据标题的级别决定显示标题文本的字体尺寸。例如，在IE 11.0浏览器下，以上的代码显示效果如图2-1所示。图2-1 各级标题的显示效果

2．段落元素

段落是一种文章内的内容单位，其通常为若干语句组成的句群，并且这些语句具有一个共同的意义。在Web页中，段落元素通常用于表现正文中的内容。XHTML提供了段落标记（P）将文本或其他数据以正文段落的方式进行语义化显示。

段落标记是一种基本的语义化标记，在绝大多数Web文档中有重要的语义意义。在默认状态下，Web浏览器会为段落标记前后创建一些补白并定义默认的行高。以下就是一个以段落标记定义的典型段落，代码如下。

依照英文的行文习惯，段落往往顶格书写。但是针对中文书写习惯，如果需要对段落进行特殊订制（例如段首缩进2个字符），可使用CSS样式表单独定义段落的样式。

3．插图元素

XHTML和HTML都被称作超文本标记语言，所谓超文本，就是可以存储和展示超出文本内容的丰富媒体元素的内容，例如图像、声音、视频和动画等。在很多文章中，插图都是重要的正文内容，有一些文档甚至完全以插图为主。

XHTML通过图像标记（IMG）为Web页添加插图元素，将外部的图像插入到当前Web页中。图像标记的作用是在Web页面区域的指定位置链接一个外链图像，以嵌入的方式显示。图像标记并不会把外部的图像保存到当前的外部网络中，只会通过外部的链接读取这一图像。一旦外部图像源失效，则图像标记链接的图像也将随之无法显示。

图像标记还有一种用法，即作为未来插入图像的预先占位，被称作图像占位符。根据XHTML的规范，所有的图像标记都必须包含图像的描述文本。在下面的代码中，就使用了图像标记来为Web页添加了一幅插图，代码如下。

在Web浏览器中，即可查看到加载此图像的Web页面，如图2-2所示。图2-2 插图元素的页面

所有主流Web浏览器都支持图像标记，但是对图像标记链接的图像格式有所区别。几乎所有的Web浏览器都支持JPEG、GIF、PNG以及BMP四种格式的图像，但是在IE 6.0及以下版本的IE浏览器中，对PNG仅仅是有限支持，即仅支持不包含Alpha通道的16位色PNG图像，或包含Alpha通道的8位色PNG图像，不支持包含Alpha通道的16位色及以上色位的PNG图像。

在IE 7.0浏览器中，虽然支持了包含Alpha通道的16位色及以上色位的PNG图像，但是使用这些图像会导致页面加载效率急剧下降。直至IE 8.0浏览器，才真正解决了PNG图像的显示问题。

另外，在页面中采用BMP图像会极大地降低页面打开的效率，导致用户需要下载大量数据才能显示。图像标记支持多种类型的实例属性，用于定义图像的各种参考信息、路径等，如表2-6所示。表2-6 图像标记的实例属性

4．块引用元素

引用是学术文档中的一种重要内容，其标识了在文章中这一段内容并非作者原创，而是引自外部，并且通常会标注内容的来源信息。块引用元素是通过块引用标记实现的，其将定义一个块状的引用区域，为区域内的文本提供来源信息，并将这些文本内容从正文中分离出来，独立地显示。使用块引用标记的示例如下所示。

块引用标记通过其cite实例属性来定义引用内容的来源。在此需要注意的是，所有主流Web浏览器都支持块引用标记，但尚无任何一款Web浏览器支持对块引用标记的cite属性进行解析，只有一些脚本框架通过第三方的方式实现了类似功能。2.4.2 内联语义元素

内联语义元素的作用与块语义元素类似，都可以标识某些Web页内容的语义和作用，但是其通常存在于Web文档的块内容以内，以行内的方式显示。典型的内联语义元素包括超链接元素、缩写元素、短引用元素等。内联语义元素又被称作内联元素。

1．超链接元素

超链接元素通过超链接标记（A）、图像映射标记（MAP）和热区标记（AREA）在Web页中创建一个热点，然后捕获用户的鼠标单击操作，根据以上这三种标记定义的URL地址决定链接跳转的位置，实现超链接功能。超链接标记

超链接标记（A）的作用是为文本或其他整体的显示元素定义一个由URL和锚记组成的路径，并为用户提供跳转到此路径的接口，当用户单击此标记时，即执行默认的跳转交互行为。在默认状态下，跳转的目标文档将直接显示在当前的窗口中。如果希望弹出新的窗口或跳转到指定的框架内，则可以通过超链接标记的target属性进行自定义。

在下面的代码中，将使用超链接标记定义一个基于文本的超链接，代码如下。图像映射标记和热区标记

超链接标记只能为文本或一个整体的显示元素定义链接，如果需要将一个显示元素拆分成若干个局部单元，再为其分别添加链接，则需要使用图像映射标记（MAP）和热区标记（AREA）。图像映射标记和热区标记结合起来，可以为某一个单独显示元素的局部单元添加链接。

例如，在下面的代码中，添加了一个图像显示对象，并通过图像映射标记添加了三个局部单元的超链接，代码如下。

2．缩写元素

缩写元素通常用于为某个单词或短语添加一个工具提示，显示其完整的内容或书写方法。XHTML提供了两种内联的缩写元素，分别对应截断缩写和首字母缩写两种方式。截断缩写

截断缩写是指将某个单词的局部提取出来，作为整个单词的缩写，例如etcetera可以缩写为“etc.”等。截断缩写需要使用截断缩写标记（ABBR），如下所示。首字母缩写

首字母缩写是指将英文短语中的每一个单词第一个字母提取出来，作为整个短语的缩写，例如World Wide Web，可以缩写为WWW等。首字母缩写多用于英文短语，其需要使用首字母缩写标记（ACRONYM），如下所示。

使用缩写元素，可以为语句块中的缩写内容提供完整的注释，帮助阅读者了解缩写内容的含义，防止出现歧义。

3．短引用元素

短引用是相对于块引用的一种引用形式，其相比块引用，多用于内联的正文，引用外部某一个语句或某一个词组，将其插入到普通正文中。短引用元素需要使用短引用标记（Q）实现，代码如下所示。

2.5 表格元素

表格是Web页中一种特殊的数据显示形式，其通常由标题、表头、正文和脚注组成，可以显示分行和分列的大量数据单元。在XHTML中，表格是由表格标记及其多种复杂的子集标记组成，每个标记都承载着不同的功能。2.5.1 表格标记

表格标记（TABLE）是XHTML中结构最复杂的标记之一，其支持多种类型的子元素标记，例如表格标题标记（CAPTION）、表头标记（THEAD）、脚注标记（T-FOOT）、表格主体标记（TBODY）、表格列组标记（COLGROUP）以及表格行标记（TR）等。

表格标记支持多种复杂的实例属性，用于定义表格的外观、边框、补白、间距等，以使表格适应各种类型的数据，如表2-7所示。表2-7 表格标记的实例属性

严格模式的XHTML禁止使用表格的align属性、bgcolor属性定义表格内容的对齐方式和背景色。frame属性和rules属性是XHTML专有的新属性，因此目前仅有部分较新的Web浏览器支持。

早期的Web页面往往是用表格标记来实现布局，实际上这是一种错误的方法，表格标记本身的作用仅仅应该是显示各种数据，而非为页面中的元素布局和定位。2.5.2 简单表格

表格具有两种模式，即简单模式和完整模式。简单模式的表格通常直接存储分行和分列的各种数据，因此其表格标记只包含表格行标记（TR），每个表格行标记（TR）再包含若干表格单元格标记（TD）和表头单元格标记（TH）。

1．表格行

行是表格中横向单元格的排列集合。在表格的行中，若干单元格会按照指定的高度位置横向排列。行以表格行标记（TR）表示。在表格中，包含单元格最多的表格行标记决定表格的列数。表格行必须包含至少一个表格的单元格才有意义。不包含单元格的表格行在Web浏览器中将被隐藏。

严格模式的XHTML允许开发者通过align属性和valign属性分别定义该行内单元格的水平对齐方式和垂直对齐方式。但通常情况下，绝大多数开发者都会使用CSS样式表来操作这些显示方式。

在下面的代码中，定义了一个包含4个单元格的表格行，代码如下。

2．单元格

单元格是表格中最基本的显示单位，其存储了表格中每一条具体的数据。XHTML的表格支持两种类型的单元格，即表头单元格和表格单元格。

表头单元格由表头单元格标记（TH）表示，用于定义标题类型的单元格。在Web浏览器中，表头单元格内的文本往往以粗体显示，一些Web浏览器还会将其水平居中对齐处理。表格单元格由表格单元格标记（TD）表示，用于定义存储普通数据的表格单元格。

在下面的代码中，简单定义了一个横向带表头单元格的数据行，代码如下。

3．单元格的跨行

在一些复杂的表格中，很可能会出现一个单元格需要纵跨多行内容，此时就需要设置单元格的纵跨行数，使其能够纵跨多个表格行。表头单元格标记（TH）和表格单元格标记（TD）都支持纵跨属性rowspan，该属性的属性值为大于1的整数，表示单元格纵跨的行数。

在下面的代码中，就定义了两个表格行，这两个表格行共用一个表头单元格标记，代码如下。

需要注意的是，在上面的代码中，第一行的第一个单元格纵跨了两行，因此第二行只需要包含两个单元格即可。

4．单元格的跨列

XHTML不仅允许单元格的跨行，还允许单元格跨列显示，以定义各种复杂的数据内容。表头单元格标记（TH）和表格单元格标记（TD）都支持横跨属性colspan，该属性的属性值为大于1的整数，表示单元格横跨的列数。

在下面的代码中，就定义了三个表格行，其中第一行的数据横跨两列，作为第二行和第三行数据共同的标题，代码如下。2.5.3 完整表格

完整的表格通常应包含标题、表头、脚注、主体等四个部分，其中表头、脚注和主体还可以包含若干列组、表格行，每个表格行内可以包含若干表格单元格和标题单元格等。一些简单的表格也可以直接包含若干表格行，每个表格行内再包含一定数量的单元格等。

在下面的代码中，展示了一个完整的表格及其包含的所有子集标记，代码如下所示。

在Web浏览器中，将自动地把表格中的各种标记按照指定的规范进行排列，然后显示出来，如图2-3所示。图2-3 完整表格的显示效果

1.表格的标题

表格标题的作用是表明整个表格的含义，以及表格的编号排序等信息。在定义表格标题时，需要使用表格标题标记（CAPTION）。

表格标题标记是一种闭合标记，其在表格的子集标记中只能出现一次。在使用表格标题标记时需要注意的是，当表格包含表格列组标记（COLGROUP）时，表格标题标记将位于表格列组标记（COLGROUP）之后，否则，表格标题标记必须位于表格内其他子集标记之前。绝大多数表格往往会省略表格标题标记。例如，定义一个表格的标题为“表1-1表格的属性”，代码如下所示。

2.表头、脚注和主体

表头、脚注和主体分别用于定义表格各列数据的名称、汇总信息和具体数据。其中，表头定义各列数据的名称，脚注定义各列数据的汇总，表格主体存储具体的各列数据。

在XHTML中，表头的数据必须存储于表头标记（THEAD）中；脚注的数据必须存储于脚注标记（TFOOT）中；表格主体的数据必须存储于表格主体标记（TBODY）中。在编写表格数据的代码时，以上这三种XHTML标记必须一起使用，且必须按照表头标记、脚注标记和表格主体标记的顺序使用。这三种标记内都可以包含若干表格行和表格单元格。

2.6 交互元素

在XHTML中，允许开发者通过一些特殊的标记元素捕获用户的交互操作，根据指定的行为将操作的结果传递到服务器中。这些特殊的标记元素即交互元素。2.6.1 表单

表单是所有交互元素的基本容器，其作用是将若干交互控件组合到一个特殊的容器中，并在触发一些特殊事件时将这些控件内的用户数据提交给服务器端的程序，实现前后端的数据交换。

表单标记（FORM）本身在Web浏览器中并不显示，也不承担交互数据的获取和显示功能，所有交互数据的获取和显示功能往往依赖于表单标记内包含的各种交互控件。在下面的代码中，定义了一个简单的登录表单标记，如下所示。

表单标记具有多种实例属性，用于定义提交数据的URL、数据类型、提交方式等信息，如表2-8所示。表2-8 表单标记的实例属性

在严格模式的XHTML规范下，表单标记至少应包含一个action属性，定义交互数据的URL目标。通常情况下，还应该为表单标记添加method属性，定义提交表单的具体方式，例如HTTP GET方式或HTTP POST方式等。2.6.2 标签与数据集合组件

在使用各种交互组件时，经常会需要对交互组件进行描述，或对交互组件进行分组，此时就需要使用一些辅助性的组件，例如标签组件和数据集合组件。

1．标签组件

标签组件的作用是为各种交互组件提供描述性的文本信息，例如组件的名称等。除此之外，标签组件还可以将一些交互组件包裹起来，扩大交互组件的焦点区域，当用户单击标签组件时，标签组件可以将焦点自动转移到其包含的交互组件上。

标签组件通过标签标记（LABEL）存储这些名称内容，在下面的代码中，就使用标签组件包裹了两个单选按钮类型的输入组件，定义了输入组件的名称，代码如下。

标签组件是最简单的交互组件，其除了可以包裹其他交互组件（例如输入组件、列表菜单组件和文本域组件等）之外，还可以在非包裹的状态下与这些交互组件关联，同样实现捕获用户鼠标焦点的功能，此时需要使用标签标记的for属性。

标签标记的for属性的属性值通常为标签组件关联的其他交互组件的id属性值，例如，当一个文本域类型的输入组件id为account，那么可以通过此id属性与标签组件建立关联，代码如下。

除了Safari 2及之前版本的Safari浏览器之外，所有的主流Web浏览器都支持标签组件。在Web开发中，灵活使用标签组件可以提高各种交互页面的操作便捷性。

2．数据集合组件

数据集合组件的作用是为各种交互组件分组、分列，对交互组件进行归纳整理。在一些复选框类型的输入组件集合中，使用数据集合组件可以更清楚地反映复选框组的范围，使交互组件更加富有条理。

数据集合组件由数据集合标记（FIELDSET）和数据集合标题标记（LEGEND）组成，其关系类似表格标记（TABLE）和表格标题标记（CAPTION），但是相比之下，数据集合标题标记（LEGEND）在数据集合标记（FIELDSET）中是必须存在的，不可或缺。

下面的代码定义了一个简单的数据集合组件，通过数据集合标题标记（LEGEND）显示数据集合的名称，如下所示。

在Web浏览器中，数据集合往往会显示出一个边框，将其包裹的内容环绕起来。在IE浏览器下，以上代码显示效果如图2-4所示。图2-4 数据集合名称显示效果2.6.3 输入组件

输入组件是最复杂的交互组件，可以多种形式显示，捕获输入的文本内容、选择的指定元素、上传的文件等。除此之外，输入组件还提供了表单操作功能，可以提交或重置表单标记（FORM）内所有组件的数据。

输入组件通过输入标记（INPUT）定义，该标记包含多种实例属性，用于定义输入组件的特性，如表2-9所示。表2-9 输入标记的实例属性

在以上实例属性中，最重要的实例属性是type属性，该属性决定了输入标记的基本性状。输入标记可分成10种功能状态，如下所示。文本域

默认显示为带有边框的矩形元素，获取焦点后，允许输入各种明文文本并显示出来。密码域

外观与文本域几乎一致，区别是其内容以密文的方式显示（由特殊的符号替代，在不同的操作系统和Web浏览器中样式有所区别）。单选域

通常成组使用，显示为空心圆形标志，被单击选择后变为实心。如果多个单选域的name属性相同的话，则当其中一个单选域被选中后，其他单选域的选择状态将被清除。复选域

显示为空心矩形标志，被单击选择后变为实心。与单选域有所区别，同一name属性的复选域允许被同时选中。文件域

又被称作上传域，显示为一个无法输入内容的文本域以及一个紧贴的浏览按钮。单击按钮后可以调用浏览器的打开文件窗口，选择所需的文件，将其路径插入到文本域中，帮助表单获取文件的路径，从而在提交表单时将文件上传到服务器中。隐藏域

隐藏域是一种不可见的交互控件，主要用于根据脚本获取用户操作的隐含信息进行提交操作，或在表单中提交一些不需要用户手动修改的数据。图像域

图像域可以将外链的图像文件显示为输入控件，获取用户单击、双击或右击等操作，实现交互行为。在默认情况下，单击图像域会直接提交表单。按钮域

按钮域与按钮标记（BUTTON）类似，都在页面中显示一个按钮，捕获用户的鼠标操作，并根据脚本执行对应的行为。提交域

提交域与按钮域类似，都显示为一个按钮，其作用是捕获用户的鼠标操作，将表单内容提交到服务器。重置域

重置域与按钮域、提交域类似，都显示为一个按钮，其作用是将当前所处表单内所有已经修改的内容恢复原状。

通过变化输入标记的type属性来定义一个包含多种输入内容类型的表单集合，代码如下。

不同类型的输入组件显示样式截然不同，在Web浏览器中打开此Web页，即可查看这些类型的输入组件显示的效果，如图2-5所示。图2-5 不同类型输入组件的显示效果2.6.4 列表菜单组件

列表菜单组件是一种特殊的选择性交互组件，其可以为用户提供一个纵列的弹出菜单或内嵌列表，捕获用户选择的一个或多个菜单项目，将其对应的数据提交到服务器中。

列表菜单组件通过列表菜单标记（SELECT）、菜单项目标记（OPTION）和菜单项目组标记（OPTGROUP）定义，其结构为一个列表菜单标记包含若干菜单项目组标记和菜单项目标记，每个菜单项目组标记下再包含若干菜单项目标记。

1．列表菜单标记

列表菜单标记（SELECT）通过size属性定义其显示效果。当size属性被省略或其属性值为1时，列表菜单被Web浏览器显示为弹出式的下拉菜单；size属性值为大于1的整数时，列表菜单被显示为多行的内嵌列表，通过滚动条上下拖曳显示菜单的完整内容。在下面的代码中，就对两个内容一致的列表菜单定义了不同的size属性值，使其显示效果截然不同。

在Web浏览器中执行以上代码，即可查看两种类型的列表菜单效果，如图2-6所示。图2-6 两种类型的列表菜单效果

其中，第一种列表菜单为内嵌的通过滚动条控制的列表菜单，第二种则是弹出式的下拉菜单，单击其右侧的箭头即可显示弹出效果。

当列表菜单被设置为内嵌的菜单时，开发者可以通过列表菜单标记（SELECT）的multiple属性定义是否允许用户同时选择菜单中的多项内容。multiple属性的属性值只有一种，即字符串multiple，当该属性被省略时，默认定义列表菜单只允许单选，否则列表菜单将为多选状态。

2．菜单项的分组

菜单项目组标记（OPTGROUP）的作用是对菜单项进行分组，使菜单项的显示更加富有条理。除此之外，还可以对菜单项进行批量的禁用或提供描述。菜单项组标记仅能作为选择菜单标记（SELECT）的子集，以及菜单项目标记（OPTION）的父集存在。

在下面的代码中，就通过菜单项目组标记（OPTGROUP）定义了一个分组显示的列表菜单。

通常情况下，Web浏览器会对菜单项目分组的标题加粗顶格显示，并对被分组的菜单项目缩进显示。在IE浏览器下，以上代码执行的效果如图2-7所示。图2-7 分组的菜单项目效果2.6.5 文本字段组件

文本字段组件的作用是获取用户输入的大量文本内容，并提交到服务器中，其通过文本字段标记来实现效果。文本字段标记的实例属性如表2-10所示。表2-10 文本字段标记的实例属性

在默认情况下，文本字段标记不限制输入的文本数量，也不会限制输入的行数。开发者可以通过其cols属性和rows属性定义文本字段标记能够直接显示的列数和行数，或通过CSS样式表定义文本字段标记精确的宽度和高度。在下面的代码中，就简单定义了一个包含默认值的文本字段标记。

需要注意的是，由于文本字段标记是通过其起始标记和结束标记之间的内联文本作为其提交服务器的数据内容，因此在将其数据提交服务器时，应随时注意去除数据两侧的多余空格。

2.7 小结

XHTML结构语言由HTML衍生而来，针对HTML的宽松语法导致的设备读取过程中的种种问题而设计，采纳了完全标准化的XML风格，是XML的一个典型子集。相比HTML而言，XHTML的语法更加严谨和严格，更易被各种软件读取。可以说，XHTML是更加规范的符合XML标准的HTML。

在Web开发中，XHTML占据重要的地位，实际上，所谓的Web前端开发就是通过各种脚本来操控XHTML代码实现的，因此熟练掌握XHTML语言对Web前端开发尤为重要。

承接本书开篇，本章简单介绍了XHTML结构语言的文档类型、标记、属性、属性值和注释等实体，并分解了XHTML文档的结构，将各种常用的XHTML标记的用法展示给读者，帮助读者了解Web页内各种显示元素是如何编写而成的。只有深入了解XHTML，才能编写出结构严谨的Web应用。

第3章 Web元素的显示

XHTML代码结构只是构成了Web元素本身的内容部分，并非是呈现给Web终端用户的最终效果。在Web应用中，所有的Web元素都需要采用各种方式重新布局定位，并且用多种手法进行美化和修整，才能组合成为符合终端用户审美观和使用习惯的用户界面。

在标准化的Web开发中，为Web元素布局定位、美化修整都需要使用到CSS样式表技术，此技术决定了Web应用的显示效果，以便为终端用户提供直观而方便的操作界面。本章将以实用的角度介绍CSS样式表技术在现代Web站点开发过程中的应用，帮助开发者更快地了解CSS样式表技术的原理和应用的方式。

3.1 结构和样式的松耦合

传统的Web站点和Web应用往往采用旧的HTML内置标记来实现页面的排版，再通过对表格单元格的拆分、合并、修改单元格的宽度和高度实现布局。

这种简陋而粗糙的手法可以做出十分美观的网站，在20世纪90年代，这种手法颇为流行，很多图像设计软件（例如Adobe Photoshop、Adobe Fireworks等）甚至直接提供切片工具来辅助传统的网站美工、艺术工作者生成这类网页。此时，Web开发的分工并不明确，很多中小型Web站点或Web应用往往由学习美术、艺术专业的Web设计师设计和制作。

随着现代Web技术的发展，美观已经不再是衡量一个Web站点或Web应用的唯一标准，一个成功的现代Web站点或Web应用应该且必须符合以下要求。

•可维护性、可扩展性和前瞻性

•交互的便捷性

•能够被搜索引擎快速抓取内容

以上三点要求中，可维护性、可扩展性和前瞻性决定了Web站点和Web应用是否具有快速更新、修复、改版，不断适应用户新需求和期望的能力；交互的便捷性决定了用户的操作体验；被搜索引擎快速抓取内容决定了是否能招揽更多的终端用户。

这三方面的需求决定了传统的Web开发模式、HTML表格包打天

试读结束[说明：试读内容隐藏了图片]

下载完整电子书