最近做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方法返回值就是第一個參數被覆蓋后的全部的值
不得不佩服,一段一句進行定義,同時有設置了默認值.
越看越有意思,繼續看下去
