分享
 
 
 

利用Yahoo! UI库开发跨浏览器Web程序

王朝other·作者佚名  2006-11-23
窄屏简体版  字體: |||超大  

一、 简介

最近发行的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是这个框架比较出色的地方之一。这种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连接库的相当简单的方面。

var handlers = {

success: success,

failure: failure }

function success(t)

{ alert('Yea, success'); }

function failure(t)

{ alert('Awww.'); }

YAHOO.util.Connect.asyncRequest('GET',

'http://mysite.com/Remote.aspx?GetPage=1',

handlers,null);

尽管这个连接库是YUI的最重要的最成功的实现之一,但是我还要推荐使用任何专门为你的服务器端语言设计的AJAX库。原因很简单:数据类型处理的一致性将有助于尽快实现开发目标。然而,如果你在一种多语言或多平台环境下工作,那么该YUI连接库是更好的选择。

七、 小结

坦诚地说,我在初稿之后又费了很大劲重新改写了本文。总体来看,YUI语法冗长且未对一些古怪参数选项加以归档。就个人来说,作为一名.NET程序员,我总是坚持编写良好的xbrowser DOM-通过使用事件规范化的DynAPI和我的AJAX需要的ATLAS库来实现。

总之,YUI库试图提供一种完整的跨浏览器DHTML和AJAX API。尽管这个库的一些实现比较"坚固"且性能良好,但是在某些方面却还不令人满意,而且语法冗长也是一种失败。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有