script.aculo.us概述

冷越泽
2023-12-01
prototype只有底层没有UI,不像dojo、ExtJs一样自身就以创建UI为目标,再加上prototype对Element的加强还没有到至善至美的地步,所以呢,用prototype创建widgets有时还是会有一些麻烦,例如我上次从ExtJs去请了个alignTo,那个getScroll这么重要,但是在prototype就是没有。说这么多废话就是要表明:

UI很重要,但是prototype本身没有这方面的做多大努力。

MIT的大侠为此写了script.aculo.us,里面其他东西我不大看重,唯读对Effects这个部分很有兴趣,但是,还是感叹它体积大了一点。不过,基于prototype的特效库估计也就只有它了,Effects中封装了所有的特效,像什么组合动画、异步动画,我当初在学asp.net ajax时还在感叹微软真是厉害,事实上,我敢保证,绝对是从script.aculo.us中学过去的。

script.aculo.us的代码也才1123行,在看惯了几千行的js代码后,这点量我也不大在乎了。要好好研究一下,主要是有鉴于平常用到的特效事实上并不多,我想像Fly.Window一样,把一些平常最常用的特效抽出来。最好整个几K的小扩展那是最好的了。

在网上找了一下关于script.aculo.us的资料,发现,中文的太少了,反反覆覆就是某人的几篇文章在那里转,多是讲的一些简单用法,但是,对于源代码、里面的原理都没有涉及,感叹:真正的大侠都鼓足了劲挣钱去了,不肯写这种吃力不讨好的教程啊。

有人问,通篇讲这些没用的事,不讲点怎么用script.aculo.us的东西,用script.aculo.us,两个字,简单,有两种用法,一般人只晓得一种,我提一下:

就好比这个HighLight这个特效,它的作用是让目标元素的颜色由一个颜色渐变到另一颜色,如果没有在options中定义restoreColor的话,那么,它在渐变到目标颜色后又会渐变化原来的颜色,你瞧这话说得,通俗讲就是:高亮显示或高亮一下又变回来。这个非要用或看代码才清楚。代码如下:

var h1=new Effect.HighLight('div1');

var h2=$('div1').highlight();

一般人只晓得第一种用法吧,网上的资料也大多讲第一种,连官方网站好像也只提第一种,事实上,第二种用法才是更让人舒坦的用法。这个我也是从源代码中看出来的,所以啊,不看代码,高深的东西就不会出来。更多其它用法,官方网站多的是,哪用我啰嗦啊。

下一篇中正式来分析一下它的源代码、基本原理。
 类似资料: