没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
14页
简介: 当前的 Web 开发存在着两种趋势,一是基于 HTML、CSS 和 JavaScript 技术,比如以 Dojo 工具包、jQuery 等为基础的 HTML 页面;另一种是基于浏览器端运行时,如基于 Flash、Silverlight 等技术的 RIA 应用。前者占用的资源少,不需在浏览器上安装插件支持,后者界面更为美观,且便于实现一些较为复杂的展现功能。而且,因为 JavaScript 和 Flash 等平台之间的交互功能很受局限,基于这两类技术开发的页面内容很难做深度的集成。HTML5 作为新一代的 HTML 标准,不但对 JavaScript 的支持更加完善,同时还包含了丰富的绘图功能,这等同于兼具上面提到的两类技术的各自的优势。本文主要介绍基于 HTML5 来扩展 Dojo Widget,它不仅具有强大的 JavaScript 逻辑控制,而且具有丰富的页面展现和良好的运行性能。
资源推荐
资源详情
资源评论
基于 HTML5 的 Dojo Widget 开发
简介: 当前的 开发存在着两种趋势,一是基于 、和
技术,比如以 工具包、等为基础的 页面;另
一种是基于浏览器端运行时,如基于 、等技术的 应用。
前者占用的资源少,不需在浏览器上安装插件支持,后者界面更为美观,且便
于实现一些较为复杂的展现功能。而且,因为 和 等平台之
间的交互功能很受局限,基于这两类技术开发的页面内容很难做深度的集成。
!作为新一代的 标准,不但对 的支持更加完善,同
时还包含了丰富的绘图功能,这等同于兼具上面提到的两类技术的各自的优势。
本文主要介绍基于 !来扩展 ",它不仅具有强大的
逻辑控制,而且具有丰富的页面展现和良好的运行性能。
前言
若干年前,很少有人会想到一家生产电脑的公司会凭借一款功能设计上存在着
不少缺陷的手机在市场上取得巨大的成功。也很少有人会想到一家曾经 占据着
智能手机大部分市场份额的厂商会落入今天这样举步维艰的局面。人们不禁惊
讶的发现,精美的界面、方便的操作对于消费者的吸引力要大于完善的功能及
稳 定的系统。用户体验的优劣在一定的程度上决定了一个面向终端用户的产品
能否在市场上生存。移动设备的设计如此,互联网应用的设计亦如此。现在,
互联网上充 斥着各种精美的 式样、特效、动画等等,
来吸引大众的眼球以获得更多的用户关注和经济收益。这其中存在着两种流行
的设计趋势。一种是以高级的 技术和 技术为基础的
,以此来实现美观和交互性强的用户界面。这种技术的优势是浏览器能
够提供天然的支持而不依赖于任何插件而且能够很灵活的访问页面上的内容,
但是 这种技术的不足是浏览器自身的局限使得一些功能实现起来很困难。比如
若要实现网页上的矢量绘图,虽然有 #、#$等技术,但是它们不是广泛
支持的标准,需要在不同的浏览器上做不同的处理。另一种是在浏览器上面安
装某种包含运行环境的插件来运行某些 的应用,如
、、%等,这些技术都是基于矢量绘图,能够呈现绚丽
的用户界面和灵活多变的用户交互。但它们的缺点就是需要在浏览器上再安装
插件,而且运行效率往往也会存在着一 定的问题。新一代的 页面标准
!则可以帮助我们很好的解决这一问题,它不但提供了很多诸如 套
接字、存储等技术,而且提供了 &以便在 页面上直接进行
矢量绘图。作为 !标准的一部分,&将天然地被各种浏览器支持,
而且便于与 进行交互。从某种意义上说可以作为当前流行的
技术的替代品。所以,!与 技术孰优孰劣的争论这两年就一直不
断。
现在 前端开发领域流行着不少 类库,如 '(、)*
、+等,其中一些封装了各种前端控件。这些控件的实现是基于
,的标准和复杂的 及 技术。但随着 !技术的发
展,它的各种强大特性为这些控件的结构和功能提供新的设计和实现方式。因
此,如何将 !的特性灵活的运用到前端控件开发就是本文的关注点。由
于 !的特性很多,而流行性的 库中的前端控件也五花八门,
本文只能举例说明。读者可以根据自身的需求结合 !中的特性开发出各
种强大的前端页面控件。
新一代 Web 标准—— HTML5
!是新一代的 标准,它里面包含了很多 ,中没有的新标签
和应用程序接口,如 "标签、"标签、矢量绘图、套接字、离
线数据存储等。这些新特性可以使 页面具有更丰富的功能和更好的用户
体验,其中的很多都可以用在网页控件设计上,从而使得网页上的内容更加丰
富。在 !众多的功能中,有一个功能非常重要,它不仅是一项被众多网
页设计人员期待已久的功能,而且为网页的功能和外观设计留下了巨大的空间,
它就是 !中的矢量绘图。现在,不仅不少的业内人士将 !的矢量
绘图视作 的挑战者,甚至连 的支持厂商 "都推出了基于
!矢量绘图的动画制作工具。本文后面将会介绍借助 !的矢量绘
图技术实现 "。在此之前,为了帮助读者能够更好的理解本文的内
容,这里先对 中的矢量绘图做一些简要的说明。!的矢量绘图的
功能由 &标签和各种绘图 -构成。在 的脚本中,通过
&节点可以获得绘图上下文,通过它调用 -就可以绘制各种矢量图,
如下所示。
清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
./0
."0
.0
1&"12&"34&&567
&3"/&2)/&8"59&:96;
*3&2&*59<"96;
*2=5<!><!>:??>:??6;
*25,!>,!>@?>@?6;
*2+5!?>!?>!?>!?6;
*2&-56;
*2/5:<!>:<!6;
*2&5<?!>:<!6;
*2&5:<!><?!6;
*2=56;
A
.B0
.B"0
."0
.&"3C&:C3C@??C1"3C@??C0
.B&0
.B"0
.B/0
图 1. HTML5 的 Canvas 绘制的矩形和三角形
在上面的例子中,我们在一个 的文档中加入了一个 &标签,利
用基于 的 -来获得绘图上下文(&*),并在上面绘制了
我们所要的图形。除了绘制 <图形,!还支持 D矢量绘图,它与 <
的使用方式类似,此处不再详述。
值得注意的是,!还是一个发展的标准,至今并没有被所有主流浏览器
全面支持。但是,即使是曾经是对 !支持较少的 )浏览器也会在新版本
)E中支持 &绘图等 !关键标签技术。所以相信在不久的将来,
!的普及就会实现。
"
近些年,页面设计的易用性、功能性和交互性已经成为了业界的主流趋势。网
页的功能越来越丰富,用户体验也越来越舒适。这一切都离不开前端以
和 为基础的 技术的迅猛发展。但是,前端大规模的
和 开发的复杂度比较高,而且还要支持不同的浏览器平台,
于是诞生了很多 库用来帮助前端开发者完成较为复杂的页面逻辑
同时屏蔽浏览器的差异,如 、'(、)*等。另外,越来越
多的互联网公司也将自己的 库发布出来,如淘宝的 F'、豆瓣
的 等等。每种库都支持封装前端复杂的控件,如 (、
"等,但方式却不相同。本文选取 +作为控件实现的基础来
介绍基于 !的控件的设计思想,当然,这种设计并不是只能在
+上得到实现,其它的类库也可以作为实现基础。+是当前
页面前端开发领域流行的 库,它不但包括丰富的页面基础功能,如
选择器、G节点操作、动画效果等,还包括良好的面向对象的封装结
构和以此为基础的 控件技术 "(简称 )。
剩余13页未读,继续阅读
tingtingxj
- 粉丝: 1
- 资源: 55
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页