1.3 HTML5在移动开发中的应用

本节将分别介绍PC终端的Web开发技术、移动终端的开发技术，以及HTML5在移动终端开发中的优势和今后的发展前景。

1.3.1 Web前端开发技术简介

Java Web是用Java技术来解决相关Web互联网问题的技术总和。Web包括Web服务器和Web客户端两部分。Java在客户端的应用有Java Applet，不过使用得很少；Java在服务器端的应用非常丰富，如Servlet、JSP和第三方框架等。Java技术对Web领域的发展注入了强大的动力。

Java的Web框架虽然各不相同，但基本都遵循特定的思路：使用Servlet或者Filter拦截请求，采用MVC的思想设计架构，按约定或者利用XML、Annotation实现配置，运用Java面向对象的特点实现请求和响应的流程，以及支持JSP、Freemarker和Velocity等视图。Web开发的PC端主要技术有以下几个。

1. JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，例如，响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。

JavaScript语言与Java语言在语法上比较相似，但随着对JavaScript的深入了解，将会发现，它们其实是两种不同语言。

2. jQuery

jQuery是一个兼容多浏览器的JavaScript框架，核心理念是“Write Less,Do More”(写得更少,做得更多)。

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者的操作更加便捷，例如，操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或动态网页。

3. MySQL

MySQL是一个开放源码的小型关联式数据库管理系统，开发者为瑞典MySQL AB公司。

MySQL被广泛应用在Internet的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，使许多中小型网站选择MySQL作为网站数据库。

自从Oracle公司收购了MySQL，就发行了MySQL的企业版（不再免费）。

4. MVC

MVC即模型—视图—控制器，是Xerox PARC在20世纪80年代为编程语言Smalltalk-80发明的一种软件设计模式，已被广泛使用。还被推荐为Sun公司J2EE平台的设计模式，并且受到越来越多的使用ColdFusion和PHP的开发者的欢迎。

MVC是一种设计模式，它强制性地使应用程序的输入、处理和输出分开。MVC应用程序被分成3个核心部件：模型、视图、控制器，三者各自处理自己的任务。

（1）模型

模型表示企业数据和业务规则。在MVC的3个部件中，模型拥有最多的处理任务。例如，它可以用像EJBs和ColdFusion Components这样的构件对象来处理数据库。

被模型返回的数据是中立的，也就是说模型与数据格式无关，这样一个模型就能为多个视图提供数据。由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。

（2）视图

视图是用户看到并与之交互的界面。对老的Web应用程序来说，视图就是由HTML元素组成的界面，在新的Web应用程序中，HTML依旧在视图中扮演着重要角色，但一些新的技术层出不穷，包括Macromedia Flash，以及像XHTML、XML/XSL和WML等一些标识语言和Web Services。如何处理应用程序的界面变得越来越有挑战性。MVC一个大的好处是能为应用程序处理很多不同的视图，在视图中没有真正的处理发生，不管这些数据是联机存储的还是一个雇员列表。视图只是一种输出数据并允许用户操纵的方式。

（3）控制器

控制器接收用户的输入并调用模型和视图去完成用户的需求。所以当单击Web页面中的超链接和发送HTML表单时，控制器本身不输出任何信息和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后确定用哪个视图来显示模型处理返回的数据。

综上所述，MVC的处理过程是首先由控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回的数据，并通过表示层呈现给用户。

5. JDBC

JDBC（Java DataBase Connectivity,Java数据库连接）是一种用于执行SQL语句的Java API，可以为多种关系数据库提供统一访问，由一组用Java语言编写的类和接口组成。

JDBC为工具/数据库开发人员提供了一个标准的API，据此可以构建更高级的工具和接口，使数据库开发人员能够用纯Java API编写数据库应用程序，同时，JDBC也是一个商标名。

有了JDBC，向各种关系数据发送SQL语句就成为一件很容易的事了。换而言之，有了JDBC API，就不必为访问Sybase数据库专门写一个程序，为访问Oracle数据库又专门写一个程序，或为访问Informix数据库再编写另一个程序等，程序员只需用JDBC API写一个程序即可，它可向相应数据库发送SQL调用。同时，将Java语言和JDBC结合起来，可以使程序员不必为不同的平台编写不同的应用程序，只需写一遍程序就可以让它在任何平台上运行，这也是Java语言“编写一次，处处运行”的优势。

6. DBUtils

CommonDbutils是操作数据库的组件，对传统操作数据库的类进行二次封装，可以把结果集转化成List。传统操作数据库的类是指JDBC。DBUtils是Java编程中的数据库操作实用工具，小巧且简单实用，其特点如下。

1）对于数据表的读操作，它可以把结果转换成List、Array或Set等Java集合，便于程序员操作。

2）对于数据表的写操作，也变得很简单（只需写SQL语句）。

3）可以使用数据源，使用JNDI、数据库连接池等技术来优化性能——重用已经构建好的数据库连接对象，而不像PHP、ASP那样，费时费力地不断重复构建和重构这样的对象。

1.3.2 移动Web应用发展

移动设备的用户越来越多，所以面向移动终端的Web应用技术也越来越多。随着Web应用的逐渐发展，移动终端的开发技术主要有HTML、JavaScript和CSS等。

1. HTML

超文本标记语言是标准通用标记语言下的一个应用，也是一种规范、标准，通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理、画面如何安排和图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

2014年10月28日，W3C推荐标准HTML5。

2. JavaScript

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，是广泛用于客户端的脚本语言。JavaScript最早在HTML网页上使用以增加网页的动态功能。

1995年，JavaScript由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出了ScriptEase，与JavaScript一样均可在浏览器上运行。为了统一，且JavaScript兼容于ECMA标准，因此也称为ECMAScript。

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更加流畅、美观的浏览效果。通常，JavaScript脚本是通过嵌入在HTML中来实现自身功能的。它的特点主要体现在以下4个方面。

1）它是一种解释性脚本语言（代码不进行预编译）。

2）主要用来向HTML页面添加交互行为。

3）可以直接嵌入HTML页面，但写成单独的JS文件这样有利于结构和行为的分离。

4）跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android和iOS等）。

JavaScript脚本语言同其他语言一样，有其自身的基本数据类型、表达式、算术运算符及程序的基本程序框架。JavaScript提供了4种基本的数据类型和两种特殊数据类型来处理数据和文字；变量提供了存放信息的地方，表达式则可以完成较复杂的信息处理。

3. CSS

层叠样式表（Cascading Style Sheets，CSS）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，几乎支持所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现只需修改一个小的样式，便能更新与之相关的所有页面元素。总体来说，CSS具有以下几个特点。

（1）丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，设置元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式及其他页面效果。

（2）易于使用和修改

CSS可以将样式定义在HTML元素的<style>属性中，也可以将其定义在HTML文档的<header>部分，还可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，还可以将一个CSS样式指定到某个页面元素中。如果要修改样式，只需在样式列表中找到相应的样式声明进行修改即可。

（3）多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以引用。这样就可以实现多个页面风格的统一。

（4）层叠

简单地说，层叠就是对一个元素多次设置同一个样式，并使用最后一次设置的属性值。例如，对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后一次设置的样式效果。

（5）页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大地减小页面的体积，这样也会大大提高页面加载的速度。另外，CSS样式表的复用更大程度地缩减了页面的体积，减少了下载的时间。

1.3.3 HTML5移动端开发前景和优势

随着HTML5的广泛应用，在移动端也得到了较为广泛的应用。在很多场合下，使用HTML5可以代替APP的功能。尤其是在二维码、手机网站及微信公众号的开发中，HTML5技术应用越来越多。HTML5在移动端开发的优势主要体现在以下5个方面。

1）开发成本较低，这里体现在两方面。首先HTML5入门较为容易，而且有很多的JavaScript框架可以调用，开发量不太大，就可以做出很多复杂的界面效果；其次，熟悉Web开发的人员都可以进行使用，人力成本比较低。所以使用HTML5来开发，其成本低、开发周期短。

2）屏幕适配好，能够以一套代码和资源适配多种手机屏幕。

3）编写一次，处处运行。统一的代码能够运行在不同系统的设备上。

4）对屏幕旋转处理比较好，不用对屏幕旋转进行太多处理。

5)可接入微信等其他公众平台，打开方便。

HTML5的发展前景是非常好的。HTML5对Android和iOS系统都支持。它的主要开发方向是使用高端浏览器的高端移动设备，所以可以用来开发Android系统的App。同时，HTML5可以用来开发离线应用，离线应用就是把需要的资源先缓存到本地，下次再查看时无须连网。

HTML5开发App能提供更快、更简便的服务，代码可高度重用，服务发布方便。在动画和游戏应用方面、地理定位方面的App应用正在崛起，而HTML5的技术优势正是在这些方面。因此，未来采用HTML5开发App，将会大量减少代码量，应用软件也会具有更高的用户体验。