prototype 1.5 & scriptaculous 1.6.1 學(xué)習(xí)筆記
更新時(shí)間:2006年09月07日 00:00:00 作者:
最近做otalk,開(kāi)始是基于prototype1.4的,后來(lái)因?yàn)槲壹由狭藄criptaculous 1.6.1,她要求prototype的版本是1.5的,所以就升級(jí)到了1.5,看著demo學(xué)習(xí)起了scriptaculous的用法.
用法稍后整理,因?yàn)樵谑褂眠^(guò)程中很多次效果都不讓自己滿意,想看代碼又看不明白,經(jīng)過(guò)一次折磨,我下定決心,一定要把scriptaculous和prototype的代碼看明白!
這里作為我的學(xué)習(xí)筆記,可能沒(méi)有什么順序了邏輯,等到學(xué)習(xí)完,最后整理
首先是定義類(lèi) 看著笑笑老師的一些介紹,自己看是試驗(yàn)起來(lái),往往很多東西看了覺(jué)著明白,其實(shí)還是差很多的
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
定義了一個(gè)class函數(shù)作為創(chuàng)建類(lèi)的模版或者說(shuō)是原型
使用方法
var llinzzi= Class.create();
llinzzi.prototype = {
initialize:function(){
document.write('實(shí)例被創(chuàng)建');
},
fun1:function(){document.write('方法被實(shí)例調(diào)用');}
}
var linChild = new llinzzi();
運(yùn)行,輸出'實(shí)例被創(chuàng)建'說(shuō)明initialize是創(chuàng)建實(shí)例的時(shí)候被調(diào)用的
回顧 Class代碼中
return function() {
this.initialize.apply(this, arguments);
}
看出,當(dāng)執(zhí)行create方法時(shí),就開(kāi)始調(diào)用.
linChild.fun1();
輸出'方法被實(shí)例調(diào)用',fun1方法被成功調(diào)用
就是當(dāng)采用了prototype的Class.create();方法創(chuàng)建對(duì)象的時(shí)候,initialize作為特殊的方法,在創(chuàng)建實(shí)例的時(shí)候被執(zhí)行,用以初始化.
續(xù)承
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
用法
Object.extend(目標(biāo),源);
讓我產(chǎn)生奇怪的是scriptaculous中的一段代碼
var options = Object.extend({
greedy: true,
hoverclass: null,
tree: false
}, arguments[1] || {});
既然是定義一個(gè)options為什么還要用Object.extend方法
直接
var options ={
greedy: true,
hoverclass: null,
tree: false
}
不就行了么?等等,出現(xiàn)問(wèn)題了.后面還有arguments[1] || {},這應(yīng)該是目標(biāo),目標(biāo)是函數(shù)的參數(shù),分析下,獲取參數(shù),如果沒(méi)有這個(gè)參數(shù)的時(shí)候則為{}就是恐,如果有的話,相比也是{hoverclass:'xx'}的格式,哦,原來(lái)定義options也不是這么簡(jiǎn)單的,先看有沒(méi)有參數(shù),無(wú)論有沒(méi)有,利用Object.extend方法,把參數(shù)中的對(duì)象追加或覆蓋到前面的{ greedy: true, hoverclass: null, tree: false}中,如果參數(shù)是無(wú),則相當(dāng)簡(jiǎn)單的上面的 var options = {};了但,如果參數(shù)中有{hoverclass:'abc'}呢?這時(shí)候覆蓋了原來(lái)的hoverclass的值null,然后看Object.extend方法返回值就是第一個(gè)參數(shù)被覆蓋后的全部的值
不得不佩服,一段一句進(jìn)行定義,同時(shí)有設(shè)置了默認(rèn)值.
越看越有意思,繼續(xù)看下去
用法稍后整理,因?yàn)樵谑褂眠^(guò)程中很多次效果都不讓自己滿意,想看代碼又看不明白,經(jīng)過(guò)一次折磨,我下定決心,一定要把scriptaculous和prototype的代碼看明白!
這里作為我的學(xué)習(xí)筆記,可能沒(méi)有什么順序了邏輯,等到學(xué)習(xí)完,最后整理
首先是定義類(lèi) 看著笑笑老師的一些介紹,自己看是試驗(yàn)起來(lái),往往很多東西看了覺(jué)著明白,其實(shí)還是差很多的
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
定義了一個(gè)class函數(shù)作為創(chuàng)建類(lèi)的模版或者說(shuō)是原型
使用方法
var llinzzi= Class.create();
llinzzi.prototype = {
initialize:function(){
document.write('實(shí)例被創(chuàng)建');
},
fun1:function(){document.write('方法被實(shí)例調(diào)用');}
}
var linChild = new llinzzi();
運(yùn)行,輸出'實(shí)例被創(chuàng)建'說(shuō)明initialize是創(chuàng)建實(shí)例的時(shí)候被調(diào)用的
回顧 Class代碼中
return function() {
this.initialize.apply(this, arguments);
}
看出,當(dāng)執(zhí)行create方法時(shí),就開(kāi)始調(diào)用.
linChild.fun1();
輸出'方法被實(shí)例調(diào)用',fun1方法被成功調(diào)用
就是當(dāng)采用了prototype的Class.create();方法創(chuàng)建對(duì)象的時(shí)候,initialize作為特殊的方法,在創(chuàng)建實(shí)例的時(shí)候被執(zhí)行,用以初始化.
續(xù)承
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
用法
Object.extend(目標(biāo),源);
讓我產(chǎn)生奇怪的是scriptaculous中的一段代碼
var options = Object.extend({
greedy: true,
hoverclass: null,
tree: false
}, arguments[1] || {});
既然是定義一個(gè)options為什么還要用Object.extend方法
直接
var options ={
greedy: true,
hoverclass: null,
tree: false
}
不就行了么?等等,出現(xiàn)問(wèn)題了.后面還有arguments[1] || {},這應(yīng)該是目標(biāo),目標(biāo)是函數(shù)的參數(shù),分析下,獲取參數(shù),如果沒(méi)有這個(gè)參數(shù)的時(shí)候則為{}就是恐,如果有的話,相比也是{hoverclass:'xx'}的格式,哦,原來(lái)定義options也不是這么簡(jiǎn)單的,先看有沒(méi)有參數(shù),無(wú)論有沒(méi)有,利用Object.extend方法,把參數(shù)中的對(duì)象追加或覆蓋到前面的{ greedy: true, hoverclass: null, tree: false}中,如果參數(shù)是無(wú),則相當(dāng)簡(jiǎn)單的上面的 var options = {};了但,如果參數(shù)中有{hoverclass:'abc'}呢?這時(shí)候覆蓋了原來(lái)的hoverclass的值null,然后看Object.extend方法返回值就是第一個(gè)參數(shù)被覆蓋后的全部的值
不得不佩服,一段一句進(jìn)行定義,同時(shí)有設(shè)置了默認(rèn)值.
越看越有意思,繼續(xù)看下去
相關(guān)文章
Prototype源碼淺析 String部分(四)之補(bǔ)充
Prototype源碼淺析 String部分(四)之補(bǔ)充,需要的朋友可以參考下。2012-01-01
Prototype Array對(duì)象 學(xué)習(xí)
這個(gè)對(duì)象擴(kuò)展了JS原生的Array對(duì)象,提供了一些基本的工具函數(shù),有些方法非常簡(jiǎn)單,源碼里就不在注釋了。2009-07-07
Prototype 學(xué)習(xí) 工具函數(shù)學(xué)習(xí)($w,$F方法)
Prototype $w $F使用方法2009-07-07
prototype Element學(xué)習(xí)筆記(篇二)
這一篇主要是要總論Element的所有函數(shù)。2008-10-10
Prototype Selector對(duì)象學(xué)習(xí)
這個(gè)對(duì)象在幫助文檔上并沒(méi)有,但是這個(gè)對(duì)象確是整個(gè)DOM操作的核心類(lèi),工具函數(shù)$$,其實(shí)就是調(diào)用這個(gè)類(lèi)的方法2009-07-07
動(dòng)態(tài)表格Table類(lèi)的實(shí)現(xiàn)
文件名:Table.js本文件依賴于 prototype.js,prototype_ext.js,Lib.js,DataBinder.js這些文件請(qǐng)參看我的其它文章2009-08-08
初學(xué)prototype,發(fā)個(gè)JS接受URL參數(shù)的代碼
初學(xué)prototype,發(fā)個(gè)JS接受URL參數(shù)的代碼...2006-09-09

