|
最近做otalk,开始是基于prototype1.4的,后来因为我加上了scriptaculous 1.6.1,她要求prototype的版本是1.5的,所以就升级到了1.5,看着demo学习起了scriptaculous的用法. 用法稍后整理,因为在使用过程中很多次效果都不让自己满意,想看代码又看不明白,经过一次折磨,我下定决心,一定要把scriptaculous和prototype的代码看明白!
这里作为我的学习笔记,可能没有什么顺序了逻辑,等到学习完,最后整理
首先是定义类 看着笑笑老师的一些介绍,自己看是试验起来,往往很多东西看了觉着明白,其实还是差很多的
var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } }
定义了一个class函数作为创建类的模版或者说是原型 使用方法 var llinzzi= Class.create(); llinzzi.prototype = { initialize:function(){ document.write('实例被创建'); }, fun1:function(){document.write('方法被实例调用');} }
var linChild = new llinzzi(); 运行,输出'实例被创建'说明initialize是创建实例的时候被调用的 回顾 Class代码中 return function() { this.initialize.apply(this, arguments); } 看出,当执行create方法时,就开始调用. linChild.fun1(); 输出'方法被实例调用',fun1方法被成功调用 就是当采用了prototype的Class.create();方法创建对象的时候,initialize作为特殊的方法,在创建实例的时候被执行,用以初始化.
续承 Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }
用法 Object.extend(目标,源); 让我产生奇怪的是scriptaculous中的一段代码 var options = Object.extend({ greedy: true, hoverclass: null, tree: false }, arguments[1] || {}); 既然是定义一个options为什么还要用Object.extend方法 直接 var options ={ greedy: true, hoverclass: null, tree: false } 不就行了么?等等,出现问题了.后面还有arguments[1] || {},这应该是目标,目标是函数的参数,分析下,获取参数,如果没有这个参数的时候则为{}就是恐,如果有的话,相比也是{hoverclass:'xx'}的格式,哦,原来定义options也不是这么简单的,先看有没有参数,无论有没有,利用Object.extend方法,把参数中的对象追加或覆盖到前面的{ greedy: true, hoverclass: null, tree: false}中,如果参数是无,则相当简单的上面的 var options = {};了但,如果参数中有{hoverclass:'abc'}呢?这时候覆盖了原来的hoverclass的值null,然后看Object.extend方法返回值就是第一个参数被覆盖后的全部的值 不得不佩服,一段一句进行定义,同时有设置了默认值. 越看越有意思,继续看下去 |
|