script.aculo.us代码分析(一)

String.prototype.parseColor()
string=rgb(12,34,56)、#444(只有三位数)，把string转化成#xxxxxx。之所以这么表达，是要表达清这个函数是实例函数还是静态函数。很多资料上讲来讲去，我们还是不清楚这个是个什么类型的函数。这样一写不就清楚了吗。

Element.collectTextNodes = function(element)
把element的所有文本内容全部收集起来。

Element.collectTextNodesIgnoreClass = function(element, className)
收集element中类名不是className的节点中的所有文本，并连成一片。与element.innerText差不多。

Element.setContentZoom = function(element, percent)
通过设置fontsize=x%em来达到缩放内容的目的。

Element.getInlineOpacity = function(element)
设置透明度，不兼容ie。可能是故意不兼容的。用的是：element.style.opacity。

Element.forceRerendering = function(element)
强制刷新element的内容。原理就是加一个空格文本节点再删除这个文本节点。

1. //创建一个全局变量。
2. var Effect = {
4. 　//定义一个错误提示文本
5.   _elementDoesNotExistError: {
6.     name: 'ElementDoesNotExistError',
7.     message: 'The specified DOM element does not exist, but is required for this effect to operate'
8.   },
10. 　//顾名思意：Transitions是转换的意思，它定义一些转换函数。
11.   Transitions: {
12.     linear: Prototype.K,
13.     sinoidal: function(pos) {
14.       return (-Math.cos(pos*Math.PI)/2) + 0.5;
15.     },
16.     reverse: function(pos) {
17.       return 1-pos;
18.     },
19.     flicker: function(pos) {
20.       var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
21.       return pos > 1 ? 1 : pos;
22.     },
23.     wobble: function(pos) {
24.       return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
25.     },
26.     pulse: function(pos, pulses) { 
27.       pulses = pulses || 5; 
28.       return (
29.         ((pos % (1/pulses)) * pulses).round() == 0 ? 
30.               ((pos * pulses * 2) - (pos * pulses * 2).floor()) : 
31.           1 - ((pos * pulses * 2) - (pos * pulses * 2).floor())
32.         );
33.     },
34.     spring: function(pos) { 
35.       return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); 
36.     },
37.     none: function(pos) {
38.       return 0;
39.     },
40.     full: function(pos) {
41.       return 1;
42.     }
43.   },
45.   DefaultOptions: {
46.     duration:   1.0,   //以秒为单位
47.     fps:        100,   //每秒的桢数，最小只能是66kps。为什么是这样，这是因为队列中触发间隔时15ms。
48.     sync:       false, //为true则为异步动画。
49.     from:       0.0,　 //这个玩意起始百分数
50.     to:         1.0,　 //终点百分数
51.     delay:      0.0,　 //动画在起动后延迟的时间。
52.     queue:      'parallel'　　//要加入的动画队列。
53.   },
54. 　
55. 　//为element中的每一个字符都加上标记，用span括起来。
56.   tagifyText: function(element) {
57.     var tagifyStyle = 'position:relative';
58.     if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
59.     
60.     element = $(element);
61. 　　//用element.childNodes的方法取得所有节点，正是方便啊。
62.     $A(element.childNodes).each( function(child) {
63. 　　　//nodeType=1是元素节点，3为文本节点。2是属性节点。一般都只用到1，2。
64.       if (child.nodeType==3) {
65.         child.nodeValue.toArray().each( function(character) {
66.           element.insertBefore(
67.             new Element('span', {style: tagifyStyle}).update(
68.               character == ' ' ? String.fromCharCode(160) : character), 
69.               child);
70.         });
71.         Element.remove(child);
72.       }
73.     });
74.   },
75. 　
76. 　//element可以是一个元素数组，也可是一个元素节点，如果是单个元素，则会自动获取此元素下面的所有子节点，针对子节点施加特效。
77.   multiple: function(element, effect) {
78.     var elements;
79.     if (((typeof element == 'object') || 
80.         Object.isFunction(element)) && 
81.        (element.length))
82.       elements = element;
83.     else
84.       elements = $(element).childNodes;
85.     
86. 　　//此函数还允计有第三个参数，用于传入options。
87.     var options = Object.extend({
88.       speed: 0.1,
89.       delay: 0.0
90.     }, arguments[2] || { });
91.     var masterDelay = options.delay;
92. 　　
93. 　　//为数组中的每个元素都创建动画，并且，依次设定delay。delay按index成线性增长。
94.     $A(elements).each(function(element, index) {
95.       new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
96.     });
97.   },
99. 　//这个JSON为下面的toggle函数准备的。
100.   PAIRS: {
101.     'slide':  ['SlideDown','SlideUp'],
102.     'blind':  ['BlindDown','BlindUp'],
103.     'appear': ['Appear','Fade']
104.   },
106. 　//用于反转特效，能反转三类特效，这三类特效都有一个特点，要么让元素可见，要么让元素隐藏。用法如下：
107. 　//Effect.toggle(element)当元素可见时则调用fade，如果不可见则调用appear。就这么容易。
108.   //可以传入第三个参数options。
109.   toggle: function(element, effect) {
110.     element = $(element);
111.     effect = (effect || 'appear').toLowerCase();
112.     var options = Object.extend({
113. 　　　//关于特效所加入队列的设置：position是加上位置，scope是队列名，limit是特效在队列中的极限位置。
114.       queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
115.     }, arguments[2] || { });
116.     Effect[element.visible() ? 
117.       Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
118.   }
119. };
121. //设置默认转换函数。
122. Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
124. //特效队列
125. Effect.ScopedQueue = Class.create(Enumerable, {
127.   //构造函数
128.   initialize: function() {
129. 　　//用于放特效对象的数组
130.     this.effects  = [];
131. 　　//定时器的句柄
132.     this.interval = null;    
133.   },
135. 　//要从Enumerable继承就非得要实现这个_each函数
136.   _each: function(iterator) {
137.     this.effects._each(iterator);
138.   },
140. 　//将特效对象加入到this.effects中
141.   add: function(effect) {
143. 　　//返回自70/1/1 0:0:0至今的毫秒数
144.     var timestamp = new Date().getTime();
145.     
146. 　　
147.     var position = Object.isString(effect.options.queue) ? 
148.       effect.options.queue : effect.options.queue.position;
149.     
150.     switch(position) {
151.       case 'front':
152.         // 让那些没有开始的特效在这个特效之后发生。
153.         this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
154.             e.startOn  += effect.finishOn;
155.             e.finishOn += effect.finishOn;
156.           });
157.         break;
158.       case 'with-last':
159. 　　　　//让特效与队列中最后一个特效同时发生。
160.         timestamp = this.effects.pluck('startOn').max() || timestamp;
161.         break;
162.       case 'end':
163.         // 在队列最后一个特效之后发生，这个pluck函数好用啦。
164.         timestamp = this.effects.pluck('finishOn').max() || timestamp;
165.         break;
166.     }
167.     
168. 　　//设特效的起始时间
169.     effect.startOn  += timestamp;
170.     effect.finishOn += timestamp;
172. 　　//如果没有极限位置设置或者数组大小没有超过极限位置，则在队列中加入此特效
173.     if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
174.       this.effects.push(effect);
175.     
176. 　　//如果没有启动定时器，则启动定时器，并把句柄返回给this.interval属性。
177.     if (!this.interval)
178.       this.interval = setInterval(this.loop.bind(this), 15);
179.   },
181. 　//移除特效
182.   remove: function(effect) {
184. 　　//reject的作用是把条件函数返回假时的成员的数组
185.     this.effects = this.effects.reject(function(e) { return e==effect });
186.     if (this.effects.length == 0) {
187.       clearInterval(this.interval);
188.       this.interval = null;
189.     }
190.   },
192. 　//定时器每次被触发，都执行的玩意，每触发一次就给特效数组循环一次，哪个的特效的时间到了，就让它工作去了。
193.   loop: function() {
194.     var timePos = new Date().getTime();
195.     for(var i=0, len=this.effects.length;i<len;i++) 
196.       this.effects[i] && this.effects[i].loop(timePos);
197.   }
198. });
201. //特效队列的容器，因为一个页面中，可能为了管理许多的特效，而将一些特效放在一个特定的队列中。也方便管理嘛。
202. Effect.Queues = {
203.   instances: $H(),
204.   get: function(queueName) {
205.     if (!Object.isString(queueName)) return queueName;
206.     
207.     return this.instances.get(queueName) ||
208.       this.instances.set(queueName, new Effect.ScopedQueue());
209.   }
210. };
212. //页面的全局队列，默认情况下，如果一个特效没有定义其所属队列的名称，则把它们放到Effect.Queue中。
213. Effect.Queue = Effect.Queues.get('global');
216. //传说中的特效类的基类，所有特效都是从它继承过去的。这个东西是关键所在了。
217. Effect.Base = Class.create({
219. 　//position的取值、意义前面有讲到了，可取值为：front、with-last、end。
220.   position: null,
222. 　//这个函数是关键的关键，只要去后面的代码中看一看，一个特效的关键代码在它的initialize中，initialize的思路无非就是先设一下options，然后再setup一下，setup说到底就是设一些某些特效特有的属性，以供update函数中使用。
223.   start: function(options) {
225. 　　//产生字符串形式的事件触发代码
226.     function codeForEvent(options,eventName){
227.       return (
228.         (options[eventName+'Internal'] ? 'this.options.'+eventName+'Internal(this);' : '') +
229.         (options[eventName] ? 'this.options.'+eventName+'(this);' : '')
230.       );
231.     }
233.     //如果传入options为false，则设其pos求取函数为线性函数
234.     if (options && options.transition === false) options.transition = Effect.Transitions.linear;
235.     this.options      = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { });
236.     this.currentFrame = 0;　　//当前桢
237.     this.state        = 'idle';　　　//当前状态，有三种状态：idle、running、finished
238.     this.startOn      = this.options.delay*1000;        //开始时间
239.     this.finishOn     = this.startOn+(this.options.duration*1000);　　　//结束时间
240.     this.fromToDelta  = this.options.to-this.options.from;　　　　　　　//变化的差值：from-to
241.     this.totalTime    = this.finishOn-this.startOn;　　　　　　　　　　 //总共运行的时间，以毫秒为单位，不同于duration是以秒为单位。
242.     this.totalFrames  = this.options.fps*this.options.duration;　　　　 //总共的桢数
243.     
244. 　　//创建render成员函数，一切的关键都在这儿了，用它来更新视图、界面。它做了哪些事呢？
245.     //如果状态是：idle,则执行beforeSetup、setUp、afterSetup，如果是running的话，就通过transition来求pos，然后是beforeUpdate、update、afterUpdate。
246. 　　//如果状态为finished，自然是啥都不执行。canel的实质就是把状态变量变成finished而己。这样做确实存在很多问题。因为中途退出跟正常结束的标志是一样的。事实上，这是两个不同的状态。框架没有对此进行细分。因此，大伙在网上查到的那个教程，里面提到canel后还执行那个afterstart的事件这个bug。这其实还只是一般分后果，所以啊，不研究代码，你就不晓得这个后果有哪些，说也说不清楚，网上也没有这个资料，这年头，还得靠自己。
247.     eval('this.render = function(pos){ '+
248.       'if (this.state=="idle"){this.state="running";'+
249.       codeForEvent(this.options,'beforeSetup')+
250.       (this.setup ? 'this.setup();':'')+ 
251.       codeForEvent(this.options,'afterSetup')+
252.       '};if (this.state=="running"){'+
253.       'pos=this.options.transition(pos)*'+this.fromToDelta+'+'+this.options.from+';'+
254.       'this.position=pos;'+
255.       codeForEvent(this.options,'beforeUpdate')+
256.       (this.update ? 'this.update(pos);':'')+
257.       codeForEvent(this.options,'afterUpdate')+
258.       '}}');
259.     
260.     this.event('beforeStart');
261.     if (!this.options.sync)
262.       Effect.Queues.get(Object.isString(this.options.queue) ? 
263.         'global' : this.options.queue.scope).add(this);
264.   },
268.   loop: function(timePos) {
270.    //如果是最后一桢
271.     if (timePos >= this.startOn) {
272.       if (timePos >= this.finishOn) {
273.         this.render(1.0);
274.         this.cancel();
275.         this.event('beforeFinish');
276.         if (this.finish) this.finish(); 
277.         this.event('afterFinish');
278.         return;  
279.       }
280.       var pos   = (timePos - this.startOn) / this.totalTime,
281.           frame = (pos * this.totalFrames).round();
282.       if (frame > this.currentFrame) {
283. 　　　　//呈现当前视图
284.         this.render(pos);
286. 　　　　//这个当前桢数是摆看的，没有真正用于计算，真正用于计算的只有pos。
287.         this.currentFrame = frame;
288.       }
289.     }
290.   },
292. 　//取消特效
293.   cancel: function() {
294.     if (!this.options.sync)
295.       Effect.Queues.get(Object.isString(this.options.queue) ? 
296.         'global' : this.options.queue.scope).remove(this);
297.     this.state = 'finished';
298.   },
300. 　
301. 　//触发事件处理函数
302.   event: function(eventName) {
303.     if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
304.     if (this.options[eventName]) this.options[eventName](this);
305.   },
307. 　//相当于tostring。
308.   inspect: function() {
309.     var data = $H();
310.     for(property in this)
311.       if (!Object.isFunction(this[property])) data.set(property, this[property]);
312.     return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
313.   }
314. });