利用Yahoo! UI库开发跨浏览器Web程序
2008-04-09 04:03:26来源:互联网 阅读 ()
最近发行的Yahoo! UI库提供了跨浏览器DHTML和AJAX能力(你可以在良好的BSD许可下使用)。遗憾的是,其参考文档极少,语法冗长,且其提供的功能不够完整。
自从4.0浏览器发布以来,跨浏览器动态HTML库由于实践需要而得到增强。任何想使用最新和最伟大的HTML/Javascript功能而同时还想实现跨浏览器兼容性的开发者都有可能开发一种类似于库这样的软件来规范化各种争斗激烈且充满错误的各浏览器所提供的API。
总体来看,Yahoo为开发者提供了一套体面的库以解决通用的跨浏览器问题;但遗憾的是,其作出的努力在某些方面还不如其它一些可用的开源API(例如DynAPI)所达到的效果。你可以下载免费的Yahoo! UI(YUI)库进行试验。
二、 快速导航
在下载完YUI并解压相应的.zip文件后,你会发现解压后的文件创建了八个文件夹,每一个文件夹都有相似的结构。每个文件夹包含若干子文件夹,但是最值得我们感兴趣的有:
· build文件夹,其下的文件提供包含你需要使用的功能。
· example文件夹,它提供了这些功能的实际使用。
我不想再细及source目录-这些目录下包含一些.js文件,而且这些文件也以组合版本(combined versions)存在于build文件夹下。毫无疑问,这些文件是通过一个没有包含在该包中的工具创建的。
总体来看,YUI基本上是一个功能库-你可以通过一组匿名方法和类似于命名空间的语法进行存取。例如,如果你想设置页面中一个元素的X/Y位置,那么不是建立类似于SetLayerLoc('MyID',10,10)这样的代码,你只需要作如下的库调用即可:
YAHOO.util.Dom.setXY('MyID',new Array(10,10));
尽管YUI实现了这一目的,但是语法却相当冗长。
其文档中包含一些类似于Javadoc API参考的信息-它是从一些自动化工具自动生成的,其中没有进行细致的"清理"工作,而且在生成的类中也没有提供详细的帮助性说明。然而,YUI的确提供了一组完整的示例-其中牵涉到大多数常用函数-以一种合理的直接的方式,但是没有链接到生成文档的其它部分。
三、 DOM和事件库
YUI提供的与核心DOM和事件处理相关的能力出人意料地"坚固"并实现了既定功能,并且涉及到大范围的功能。最令人惊讶的是,这种API使得你能够实现简单的跨浏览器透明控制。大多数开发者甚至还不知道-YUI还)支持(经由DirectX调用在IE中实现半透明技术,尽管效果上尚不及其基于Mozilla的等价物,但是YUI已经支持存取绝大多数(如果不是全部)CSS属性。下面是一个例子:
YAHOO.util.Dom.setStyle('MyDivID','opacity',.5);
这么多精彩的功能居然在文档中提及很少。文档中暗示,你可以使用它们的JavaScript等价名字来设置所有元素的CSS风格属性,例如,通过编写backgroundColor而不是使用其CSS对应物background-color,但缺点是,它缺乏支持属性的一个完整列表。
当你注意到YUI提供了一种令人惊异的跨浏览器功能以支持透明功能之时,你可能想:或许该库也实现了跨浏览器支持以免用户不得不记忆每一种相应于非标准的CSS属性的CSS增强功能。但遗憾的是,情况并非如此。一旦进一步分析代码,你将会发现透明技术是YUI支持的唯一的CSS增强-所有其它的setStyle调用都被直接原封未动地"传递"到浏览器的DOM。
幸运的是,YUI提供的事件API比DOM API更为深入些并且包括了一些函数来实现大量的跨浏览器事件。它把API进一步规范化为基于更标准的addListener/removeListener函数。
总体来看,DOM和Event库已经实现了既定目标但是语法冗长;而相比之下,其它库仅用一半时间就可以完成类似功能。
动画API是这个框架比较出色的地方之一。这种API的思想是定义一系列的from和to键状态,以及动画从开发到结束所需要的持续时间。
在这些属性中,你可能实现的动画包括:颜色转变,位置,大小和不透明。你可以使用很少的努力以一种类似于Dreamweaver JavaScript的方式创建迷人的显示效果。然而,这些API能力只有你精确了解你的动画在设计时刻的运动路径时才是真正有用的,因为期间所用的声明性语法使得很难在运行时刻更改动画路径。
五、 拖动
拖动支持一直是各种浏览器实现的差距之一。YUI为此做出了杰出的努力,它不仅消除了这种差距而且还增加了其它一些功能。
拖动API提供了大量的在其它免费的JavaScript库中很少的高级功能。使用YUI拖动元素进行终端用户体验是很灵活的。你可以指定哪些项可拖动以及哪些项是放置目标-以一种相对简单的但是有些冗长的方式。
我非常希望看到,在把拖动源与可能的放置目标相关联方面YUI能够提供类似于其它一些免费可用库提供的功能。在YUI中,你必须编写代码(文档中提供了一个例子)来指定放置目标(而在Script.aculo.us中你只需要简单地把组标签添加到你的目标上即可实现类似功能)。
六、 连接API
远程脚本已经出现多年了,但是只是当Google创建其Google maps时,它才使用AJAX技术操作互联网。这种技术当然是具有良好基础的,因为AJAX能够提供一种戏剧般的用户体验方面的改进。这种技术的结果导致了大量的库的产生-它们实现了到底层浏览器技术的一种"规范化"接口,这些接口支持你向服务器请求更多的数据而不需要刷新浏览器。
YUI提供了一组相当完整的远程脚本API。这包括提供一些能够进行远程调用以及进行成功或失败处理的API。如果你正在使用一种服务器端语言-它还没有提供一种客户端API来进行远程脚本编程,那么YUI将会是你的良好选择。
下面的示例代码展示了YUI连接库的相当简单的方面。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:交互设计7日通(三)
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash