1.2.2 Web前端开发技术_基于JavaScript的WebGIS开发-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.2.2 Web前端开发技术

Web前端开发技术，即网页开发技术。基于JavaScript的Web开发，其网页开发基础技术包括HTML、CSS、JavaScript、DOM、Ajax等，还有各个基于JavaScript的框架与插件。

1.2.2.1 HTML

HTML（Hypertext Markup Language），即超文本标记语言，是用于描述网页文档的一种标记语言。它通过在用户文档中加入特定的控制字符或命令，使文档能够按照用户期望的格式输出。HTML语言主要用于客户端的页面设计。HTML作为Internet上通行无阻的语言，简单易用且功能强大，支持不同数据格式的文件镶入，具有简易、可扩展、平台无关等特点。

HTML文档是使用HTML语言编写的ASII文本文件，扩展名为．htm或．html，用于定义Web页面的内容与显示格式。HTML文档包含文档（显示）内容与HTML标记（tag）两部分内容，其标记基本上是成对出现的，即由1个开始标记和1个结束标记组成。HTML文档的基本结构一般使用3对HTML标记构成，其格式如下：

        <html>
            <head>
                头部信息
            </head>
            <body>
              文档主体，正文信息
            </body>
        </html>

在<body>…</body>标记中，用于定义文档正文信息，即定义HTML文档在Web浏览器窗口中显示的信息。HTML是一种松散的语言，它对大小写并不敏感。虽然要求双标签成对出现，但是不成对出现一般也不会报错；单标签不闭合也不会报错；属性中使用单引号、双引号或不使用任何引号赋值也不会报错。为了更为规范，一般会严格执行这样的规则：双标签成对出现；单标签必须闭合；标签名、属性名使用小写；代码层次结构分明，要有缩进、换行、空行。

随着Web技术的发展与应用，HTML不断丰富和规范，形成相应的各个版本。HTML5的第一份正式草案已于2008年1月22日公布，目前仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能；其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（RIA），如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5新增元素如表1-1所示。

表1-1 HTML5新增元素

1.2.2.2 XHTML与XML

XHTML（eXtensible Hypertext Markup Language），即可扩展超文本标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的标记语言，而XHTML则基于可扩展标记语言（XML）。XHTML 1.0在2000年1月26日成为W3C的推荐标准。

XML（Extensible Markup Language），即可扩展标记语言，用于标记电子文件，使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。XML是标准通用标记语言（SGML）的子集，非常适合Web传输。XML提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。XML与HTML的设计区别是：XML的核心是数据，其重点是数据的内容；而HTML被设计用来显示数据，其重点是数据的显示。XML的简单使其易于在任何应用程序中读/写数据，这使XML很快成为数据交换的唯一公共语言。

XHTML是一种基于XML的可扩展标记语言，扮演着类似HTML角色的XML，可以理解为一种为适应XML而重新改造的HTML。因此，从本质上说XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。从HTML到XHTML过渡的变化比较小，主要是为了适应XML，其最大的变化在于文档必须是良构的。XHTML比HTML更注重语义，HTML允许一些不规范的写法，但XHTML更为严格，即严格规定：元素必须被正确地嵌入；元素必须被关闭；签名必须用小写字母；空标签也必须被关闭；XHTML文档必须拥有根元素。

有人认为，XHTML是HTML4到HTML5的过渡。随着HTML5的问世，其优秀性能和良好兼容性等优点得到业界普遍认可，备受青睐。而XHTML2.0在XHTML1.1的基础上，根据原定目标——使Web语言逐渐由HTML过渡到XML，做出了巨大改进，但是其与XHTML 1.1出现了断层。HTML5与XHTML2.0都还在发展之中，在以后的竞争中谁将是赢家而成为Web标准，大家拭目以待。

1.2.2.3 CSS

CSS（Cascading Style Sheet），即级联样式表，通常又称为“风格样式表（Style Sheet）”，用来进行网页风格设计，即表现HTML或XML等文件的样式。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后变成红色的且有下划线，这就是一种风格。通过设置级联样式表，可以统一地控制HTML中各标志的显示属性，能够更有效地控制网页外观，具有精确指定网页元素位置、外观以及创建特殊效果的能力。

有三种方法可以在站点网页上使用样式表：

（1）外部样式：将网页链接到外部样式表。当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。通常外部样式表以．css作为文件扩展名。

（2）内页样式：在网页上创建嵌入的样式表。若人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的<head>标记符内。嵌入的样式表中的样式只能在同一网页上使用。

（3）行内样式：应用内嵌样式到各个网页元素。即使用内嵌样式以将级联样式表属性应用到网页元素上，设置当前元素的样式。

以上三种方式，可以根据具体情况使用。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

人们浏览和使用Web的时候，Web的界面能提供那些具有决定作用的瞬间。简洁易用的Web界面，使用户从访问的第一个瞬间起就感到清新、清晰、轻盈自如，不再被纷繁复杂的界面和內容搞得晕头转向而烦恼、迷失甚至恐惧。在设计Web界面时，通常采用CSS+DIV的页面布局。相比于传统的用Table布局的页面，CSS+DIV方式具有以下特点：

■ 精简代码，降低重构难度。网站使用DIV+CSS布局使代码很精简，css文件可以在网站的任意一个页面进行调用。若要修改网站某类元素的样式，只需修改css文件中的一个代码即可，无须手动修改对应的很多界面。

■ 提高网页访问速度。使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

■ SEO优化。采用DIV+CSS布局的网站对于搜索引擎很友好，避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，其简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

■ 浏览器兼容性强。若使用Table布局网页，在使用不同浏览器情况下容易发生错位，而DIV+CSS则在这方面兼容性较强。

CSS目前的最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体、字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。在HTML5中，兼容CSS3使得其应用更加广泛。

1.2.2.4 JavaScript

JavaScript语言的前身为LiveScript。在Netscape与Sun合作之后，引进Java的程序设计概念，将其改名为JavaScript。之所以取名为JavaScript，原因在于JavaScript是一种嵌入HTML文档的、基于对象的脚本设计语言，语法同Java语言很相似，而且JavaScript的设计使它很容易同Java语言一同工作，还可以充分支持Java的applet小应用程序。目前，几乎所有浏览器都支持JavaScript语言。

JavaScript是一种通用的、基于原型的、面向对象的脚本语言，属于解释型语言，它的设计目标是在不占用很多系统和网络资源的情况下提供一种可以嵌入不同应用程序的通用代码。它不需要依赖于特定的机器和操作系统，独立于操作平台。

JavaScript脚本语言主要用于创建具有动态性、交互性的Web页面，有如下几个特点：

■简单性：JavaScript语句可以直接嵌入到HTML文档中，其语句的解析执行由Web浏览器负责，不需要额外的开发环境。

■ 基于对象：JavaScript采用面向对象的编程方法，通过设置属性和调用方法来完成所需要的编程功能。

■ 事件驱动：JavaScript采用事件驱动方式，可以对用户的鼠标点击、移动窗口、菜单选择等事件产生相应的响应。

■ 平台无关性：JavaScript脚本语言的运行依赖于Web浏览器，与操作环境无关。只要客户机能运行支持JavaScript的Web浏览器，就可以运行嵌入JavaScript脚本的Web页面。

■ 安全性：JavaScript脚本语言是通过Web浏览器处理的，不能修改其文件的内容。因此，当用Web浏览器浏览嵌入JavaScript脚本的Web页面时，用户不需要担心JavaScript脚本会被删除或修改。同时，没有服务器端程序的协同，JavaScript脚本不能在服务器上打开文件或存储信息。

JavaScript脚本功能强大，且非常灵活。JavaScript脚本主要适用于交互式用户界面设计、动态更新页面信息、数据校验、通过AJAX异步访问服务器提取数据等。鉴于JavaScript的优良特性，业界很多个人或组织投入其研究与应用，涌现出大量优秀的JavaScript开源框架和插件，让Web开发事半功倍。基于这些开源框架和插件，HTML+CSS+JavaScript的Web应用具有丰富的交互体验效果，可以与Flex、Silverlight等富客户端应用媲美，因此得到更多Web开发人员的青睐。

1.2.2.5 DOM

DOM（Document Object Model），即文档对象模型，是表示文档（如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。DOM是JavaScript与页面交互的一种方式，能够动态修改文档中的节点、元素、属性等。一般的，支持JavaScript的所有浏览器都支持DOM。

DOM实际上是以面向对象方式描述的文档模型，可被JavaScript用来读取和改变HTML、XHTML以及XML文档。它以树形结构表示这些文档，定义了遍历树、检查和修改树节点的方法和属性。

在DOM下，HTML文档各个节点被视为各种类型的Node对象，每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性， DOM定义了nodeType来表示节点的类型。HTML文档中的所有节点组成了一个文档树（或节点树），文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。例如，一个简单的HTML文档用DOM来表示，其文档树如图1-5所示。

图1-5 HTML文档树

常用的查找并访问节点的方法和属性如下：

（1）通过getElementById（）和getElementsByTagName（）这两种方法，可以查找整个HTML文档中的任何HTML元素。

（2）通过使用一个元素节点的parentNode、firstChild以及lastChild属性，可以在文档中进行“短距离的旅行”，即通过一个元素查找其关联的元素。

1.2.2.6 AJAX

AJAX（Asynchronous JavaScript and XML）并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起的，在共同的协作中发挥各自的作用。

AJAX的一个最大的特点是无须刷新页面便可向服务器传输或读/写数据（又称无刷新更新页面），这一特点主要得益于XMLHTTP组件XMLHttpRequest对象。只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作提交给服务器来做，这样既减轻了服务器的负担又加快了响应速度，缩短了用户等候时间。

图1-6给出了AJAX异构交互方式。

图1-6 AJAX异构交互方式

AJAX的主要技术：

■ JavasCript：绑定和处理所有数据。

■ HTML+CSS：页面标准化呈现。

■ DOM：使用JavaScript操作DOM，实现动态显示和交互。

■ XML/XSLT：进行数据交换和其他操作。

■ XMLHttpRequest对象：与Web服务器交互进行异步数据读取。

AJAX的核心是JavaScript对象XMLHttpRequest，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使用户可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过这个对象，JavaScript可在不重载页面的情况下与Web服务器交换数据。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。

1.2.2.7 jQuery

随着JavaScript和相关技术在Web开发中的广泛应用，出现了很多JavaScript开源框架，即JavaScript库。其中，jQuery是目前最流行的JavaScript库。

jQuery是继prototype之后又一个优秀的JavaScript框架，目前由Dave Methvin领导的开发团队进行开发。它是轻量级的js库，兼容CSS3，还兼容各种浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+、Chrome 1.0+等。

jQuery简化了HTML与JavaScript之间的操作，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。它能够使用户的HTML页面保持代码和HTML内容分离，即不用再在HTML里面插入一堆js来调用命令，只需定义id即可。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。jQuery还有一个比较大的优势，即它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。目前有Media Temple、Google、Microsoft等多家公司为jQuery提供CDN服务。例如，将jQuery库（1.5.1版本）下载到本地Web工程的libs目录下，在网页中引用该库的方式如下：

        <script src="libs/jquery-1.5.1.min.js" type="text/javascript"></script>

jQuery还有三个子项目，均源自Interface插件，分别如下：

■ jQuery UI：基于jQuery的用户界面库，包括拖放、缩放、对话框、标签页等多个组件。

■ jQuery Tools：基于jQuery的一个轻量级框架，集合了最流行的UI组件，包括了标签页、窗体验证、鼠标滚轮事件等。

■ jQuery Mobile：基于jQuery的手机网页制作工具，jQuery Mobile的网站上包含了网页的设计工具、主题设计工具。另外，jQuery Mobile的js插件包含了换页、事件等的多项功能。

1.2.2.8 其他框架与插件

除jQuery之外，还有大量优秀的JavaScript框架和插件。在实际应用中选用这些框架与插件，可以大幅提高开发效率，并且强化Web应用，使得Web前端开发人员更加得心应手。例如，以下几个主流框架：

■ Prototype：是一个致力于简化动态Web应用程序的开发，有独特的、易用的工具库和最好的AJAX库。

■ ExtJS：用于创建前端用户界面，与后台技术无关的前端AJAX框架，主要用来开发RIA富客户端的AJAX应用，具有强大的UI，而且性能不错。

■ MooTools：是一个模块化的、面向对象的JavaScript框架，适合中高级JavaScript开发人员。

■ Dojo：其强大的核心使Web开发更加敏捷，它拥有出色的UI工具库，号称Unbeatable JavaScript Tools，更适合企业应用和产品开发，背后有IBM、Sun、BEA等强大支持。

■ YUI：是Yahoo公司推出的开源的JavaScript框架，用于快速开发交互性高、更加稳健的Web应用。

由于有了WebKit和HTML5的支持，很多Web开发的厂商开始转向基于移动设备的Web应用框架组建，推出了一些移动应用的JavaScript框架，如Yahoo的YUI3.2的Touch版、jQuery的jQueryMobile、ExtJS整合JQTouch和Raphael推出的Sencha Touch框架等。

目前，在网络开发方面，JavaScript起了很关键的作用，很多JavaScript框架及其他JavaScript插件让Web开发更加轻松，Web世界更加丰富多彩。