前言
若干年前，很少有人会想到一家生产电脑的公司会凭借一款功能设计上存在着不少缺陷的手机在市场上取得巨大的成功。也很少有人会想到一家曾经 占据着智能手机大部分市场份额的厂商会落入今天这样举步维艰的局面。人们不禁惊讶的发现，精美的界面、方便的操作对于消费者的吸引力要大于完善的功能及稳 定的系统。用户体验的优劣在一定的程度上决定了一个面向终端用户的产品能否在市场上生存。移动设备的设计如此，互联网应用的设计亦如此。现在，互联网上充 斥着各种精美的 CSS 式样、JavaScript 特效、Flash 动画等等，来吸引大众的眼球以获得更多的用户关注和经济收益。这其中存在着两种流行的设计趋势。一种是以高级的 JavaScript 技术和 CSS 技术为基础的 DHTML，以此来实现美观和交互性强的用户界面。这种技术的优势是浏览器能够提供天然的支持而不依赖于任何插件而且能够很灵活的访问页面上的内容，但是 这种技术的不足是浏览器自身的局限使得一些功能实现起来很困难。比如若要实现网页上的矢量绘图，虽然有 VML、SVG 等技术，但是它们不是广泛支持的标准，需要在不同的浏览器上做不同的处理。另一种是在浏览器上面安装某种包含运行环境的插件来运行某些 RIA 的应用，如 Flash、Silverlight、JavaFX 等，这些技术都是基于矢量绘图，能够呈现绚丽的用户界面和灵活多变的用户交互。但它们的缺点就是需要在浏览器上再安装插件，而且运行效率往往也会存在着一 定的问题。新一代的 Web 页面标准 HTML5 则可以帮助我们很好的解决这一问题，它不但提供了很多诸如 Web 套接字、Web 存储等技术，而且提供了 Canvas 以便在 Web 页面上直接进行矢量绘图。作为 HTML5 标准的一部分，Canvas 将天然地被各种浏览器支持，而且便于与 JavaScript 进行交互。从某种意义上说可以作为当前流行的 Flash 技术的替代品。所以，HTML5 与 Flash 技术孰优孰劣的争论这两年就一直不断。
现在 Web 前端开发领域流行着不少 JavaScript 类库，如 YUI Library、Ext JS、Dojo Toolkit 等，其中一些封装了各种前端控件。这些控件的实现是基于 HTML4 的标准和复杂的 JavaScript 及 CSS 技术。但随着 HTML5 技术的发展，它的各种强大特性为这些控件的结构和功能提供新的设计和实现方式。因此，如何将 HTML5 的特性灵活的运用到前端控件开发就是本文的关注点。由于 HTML5 的特性很多，而流行性的 JavaScript 库中的前端控件也五花八门，本文只能举例说明。读者可以根据自身的需求结合 HTML5 中的特性开发出各种强大的前端页面控件。
新一代 Web 标准—— HTML5
HTML5 是新一代的 HTML 标准，它里面包含了很多 HTML4 中没有的新标签和应用程序接口，如 audio 标签、video 标签、矢量绘图、Web 套接字、离线数据存储等。这些新特性可以使 Web 页面具有更丰富的功能和更好的用户体验，其中的很多都可以用在网页控件设计上，从而使得网页上的内容更加丰富。在 HTML5 众多的功能中，有一个功能非常重要，它不仅是一项被众多网页设计人员期待已久的功能，而且为网页的功能和外观设计留下了巨大的空间，它就是 HTML5 中的矢量绘图。现在，不仅不少的业内人士将 HTML5 的矢量绘图视作 Flash 的挑战者，甚至连 Flash 的支持厂商 Adobe 都推出了基于 HTML5 矢量绘图的动画制作工具。本文后面将会介绍借助 HTML5 的矢量绘图技术实现 Dojo Widget。在此之前，为了帮助读者能够更好的理解本文的内容，这里先对 HTML 中的矢量绘图做一些简要的说明。HTML5 的矢量绘图的功能由 Canvas 标签和各种绘图 API 构成。在 JavaScript 的脚本中，通过 Canvas 节点可以获得绘图上下文，通过它调用 API 就可以绘制各种矢量图，如下所示。
清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
|
图 1. HTML5 的 Canvas 绘制的矩形和三角形
在上面的例子中，我们在一个 HTML 的文档中加入了一个 Canvas 标签，利用基于 JavaScript 的 API 来获得绘图上下文（Context），并在上面绘制了我们所要的图形。除了绘制 2D 图形，HTML5 还支持 3D 矢量绘图，它与 2D 的使用方式类似，此处不再详述。
值得注意的是，HTML5 还是一个发展的标准，至今并没有被所有主流浏览器全面支持。但是，即使是曾经是对 HTML5 支持较少的 IE 浏览器也会在新版本 IE9 中支持 Canvas 绘图等 HTML5 关键标签技术。所以相信在不久的将来，HTML5 的普及就会实现。
Dojo Widget
近些年，页面设计的易用性、功能性和交互性已经成为了业界的主流趋势。网页的功能越来越丰富，用户体验也越来越舒适。这一切都离不开前端以 JavaScript 和 CSS 为基础的 DHTML 技术的迅猛发展。但是，前端大规模的 JavaScript 和 CSS 开发的复杂度比较高，而且还要支持不同的浏览器平台，于是诞生了很多 JavaScript 库用来帮助前端开发者完成较为复杂的页面逻辑同时屏蔽浏览器的差异，如 jQuery、YUI Library、Ext JS 等。另外，越来越多的互联网公司也将自己的 JavaScript 库发布出来，如淘宝的 KISSY、豆瓣的 Do 等等。每种库都支持封装前端复杂的控件，如 jQurey UI、Dojo Widget 等，但方式却不相同。本文选取 Dojo Toolkit 作为控件实现的基础来介绍基于 HTML5 的控件的设计思想，当然，这种设计并不是只能在 Dojo Toolkit 上得到实现，其它的类库也可以作为实现基础。Dojo Toolkit 是当前页面前端开发领域流行的 DHTML 库，它不但包括丰富的页面基础功能，如 CSS 选择器、DOM 节点操作、动画效果等，还包括良好的面向对象的封装结构和以此为基础的 Dojo 控件技术 Dojo Widget（简称 Dijit）。Dojo Widget 中包含了对网页控件的生命周期管理，包括初始化渲染、属性映射、事件绑定、控件销毁等。清单 2 中给出了一个简单的 Dojo Widget 的实现。
清单 2. 一个简单的 Dojo Widget
dojo.declare("com.shy.widget.MyWidget", [dijit._Widget, dijit._Templated] ,{
templateString : "",
text : "",
onClick : function() {alert('onClick');}
}); |
清单 2 定义的 Dojo Widget 会在页面上生成一个 DIV 标签并将属性 text 的值作为 DIV 中的内容。同时，一个 onclick 事件响应被绑定到这个 DIV 上。
Dojo Widget 的使用有两种方法：一种是通过 HTML 标记的方式将 Dojo Widget 添加到页面上；另一种是通过类型实例化的方式来初始化一个实例。清单 3 和清单 4 分别给出了这两种方法各自的例子。
清单 3. 通过 HTML 标记的方式使用 Dojo Widget
在一般的基于 Dojo 的工程项目中，除了 Dojo 自身提供的各式 Widget，开发人员会根据实际项目需要扩展 Dojo 提供的 Widget 或是重新开发新的 Widget。我们在后面的内容里将会在 Dojo Widget 框架的基础上，利用 HTML5 的非凡特性来实现新的 Widget。 基于 HTML5 的 Dojo Widget 的设计 如前文所述，HTML5 中包含了很多强大的特性，它们的普及和发展会给前端页面的控件技术带来巨大的变化。本文不去描绘这种改变将会是什么样子，而是举一个具体的例子来为读者掀 开未来的一角并由读者亲身品位。HTML5 中的很多特性都可以用于页面控件功能的实现，如前文提到的 Web 套接字、离线存储、拖 您可能想查找下面的文章:文章分类最近更新的内容
|