色五月五月丁香亚洲综合网,亚洲国产欧美日韩精品一区二区三区,亚洲国产精品成人午夜在线观看

prototype學習資料(一)

關鍵字: ? prototype學習資料????

js 代碼

prototype?1.3.1?版本和之前的?1.2.0?版本有了不少改進,并增加了新的功能：? ??
1.?增加了事件注冊管理? ??
2.?增加了空間定位的常用函數(shù)? ??
3.?改善了?xmlhttp?的封裝? ??
4.?移除了?Effect.js，交給?Rico?或者?script.aculo.us?這些擴展庫類實現(xiàn)。? ??
5.?bug?修復? ??
代碼:? ??
/**? ?
*?定義一個全局對象,?屬性?Version?在發(fā)布的時候會替換為當前版本號? ?
*/ ? ??
var ?Prototype?=?{? ??
Version:?'1.3.1',? ??
//?一個空方法，其后的代碼常會用到，先前的版本該方法被定義于?Ajax?類中。? ??
emptyFunction:? function ()?{}? ??
}? ??
/**? ?
*?創(chuàng)建一種類型，注意其屬性?create?是一個方法，返回一個構造函數(shù)。? ?
*?一般使用如下? ?
*?var?X?=?Class.create();?返回一個類型，類似于?java?的一個Class實例。? ?
*?要使用?X?類型，需繼續(xù)用?new?X()來獲取一個實例，如同?java?的?Class.newInstance()方法。? ?
*? ?
*?返回的構造函數(shù)會執(zhí)行名為?initialize?的方法，?initialize?是?Ruby?對象的構造器方法名字。? ?
*?此時initialize方法還沒有定義，其后的代碼中創(chuàng)建新類型時會建立相應的同名方法。? ?
*? ?
*/ ? ??
var ?Class?=?{? ??
create:? function ()?{? ??
return ? function ()?{? ??
this .initialize.apply( this ,?arguments);? ??
}? ??
}? ??
}? ??
/**? ?
*?創(chuàng)建一個對象，從變量名來思考，本意也許是定義一個抽象類，以后創(chuàng)建新對象都?extend?它。? ?
*?但從其后代碼的應用來看，?Abstract?更多是為了保持命名空間清晰的考慮。? ?
*?也就是說，我們可以給?Abstract?這個對象實例添加新的對象定義。? ?
*/ ? ??
var ?Abstract?=? new ?Object();? ??
Object.extend?=? function (destination,?source)?{? ??
for ?(property? in ?source)?{? ??
destination[property]?=?source[property];? ??
}? ??
return ?destination;? ??
}? ??
/**? ?
*?獲取參數(shù)對象的所有屬性和方法，有點象多重繼承。但是這種繼承是動態(tài)獲得的。? ?
*?如：? ?
*?var?a?=?new?ObjectA(),?b?=?new?ObjectB();? ?
*?var?c?=?a.extend(b);? ?
*?此時?c?對象同時擁有?a?和?b?對象的屬性和方法。但是與多重繼承不同的是，c?instanceof?ObjectB?將返回false。? ?
*? ?
*?舊版本的該方法定義如下：? ?
*?Object.prototype.extend?=?function(object)?{? ?
*?for?(property?in?object)?{? ?
*?this[property]?=?object[property];? ?
*?}? ?
*?return?this;? ?
*?}? ?
*? ?
*?新的形式新定義了一個靜態(tài)方法?Object.extend，這樣做的目的大概是為了使代碼更為清晰? ?
*/ ? ??
Object.prototype.extend?=? function (object)?{? ??
return ?Object.extend.apply( this ,?[ this ,?object]);? ??
}? ??
/**? ?
*?這個方法很有趣，它封裝一個javascript函數(shù)對象，返回一個新函數(shù)對象，新函數(shù)對象的主體和原對象相同，但是bind()方法參數(shù)將被用作當前對象的對象。? ?
*?也就是說新函數(shù)中的?this?引用被改變?yōu)閰?shù)提供的對象。? ?
*?比如：? ?
*?? ?
*?? ?
*?.................? ?
*?<script>? ?
*?var?aaa?=?document.getElementById("aaa");? ?
*?var?bbb?=?document.getElementById("bbb");? ?
*?aaa.showValue?=?function()?{alert(this.value);}? ?
*?aaa.showValue2?=?aaa.showValue.bind(bbb);? ?
*?</script>? ?
*?那么，調用aaa.showValue?將返回"aaa",?但調用aaa.showValue2?將返回"bbb"。? ?
*? ?
*?apply?是ie5.5后才出現(xiàn)的新方法(Netscape好像很早就支持了)。? ?
*?該方法更多的資料參考MSDN?http://msdn.microsoft.com/library/e...6jsmthApply.asp? ?
*?閱讀其后的代碼就會發(fā)現(xiàn)，bind?被應用的很廣泛，該方法和?Object.prototype.extend?一樣是?Prototype?的核心。? ?
*?還有一個?call?方法，應用起來和?apply?類似。可以一起研究下。? ?
*/ ? ??
Function.prototype.bind?=? function (object)?{? ??
var ?__method?=? this ;? ??
return ? function ()?{? ??
__method.apply(object,?arguments);? ??
}? ??
}? ??
/**? ?
*?和bind一樣，不過這個方法一般用做html控件對象的事件處理。所以要傳遞event對象? ?
*?注意這時候，用到了?Function.call。它與?Function.apply?的不同好像僅僅是對參數(shù)形式的定義。? ?
*/ ? ??
Function.prototype.bindAsEventListener?=? function (object)?{? ??
var ?__method?=? this ;? ??
return ? function (event)?{? ??
__method.call(object,?event?||?window.event);? ??
}? ??
}? ??
/**? ?
*?將整數(shù)形式RGB顏色值轉換為HEX形式? ?
*/ ? ??
Number.prototype.toColorPart?=? function ()?{? ??
var ?digits?=? this .toString(16);? ??
if ?( this ?<?16)? return ?'0'?+?digits;? ??
return ?digits;? ??
}? ??
/**? ?
*?典型?Ruby?風格的函數(shù)，將參數(shù)中的方法逐個調用，返回第一個成功執(zhí)行的方法的返回值? ?
*/ ? ??
var ?Try?=?{? ??
these:? function ()?{? ??
var ?returnValue;? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
var ?lambda?=?arguments;? ??
try ?{? ??
returnValue?=?lambda();? ??
break ;? ??
}? catch ?(e)?{}? ??
}? ??
return ?returnValue;? ??
}? ??
}? ??
/*--------------------------------------------------------------------------*/ ? ??
/**? ?
*?一個設計精巧的定時執(zhí)行器? ?
*?首先由?Class.create()?創(chuàng)建一個?PeriodicalExecuter?類型，? ?
*?然后用對象直接量的語法形式設置原型。? ?
*? ?
*?需要特別說明的是?rgisterCallback?方法，它調用上面定義的函數(shù)原型方法bind,?并傳遞自己為參數(shù)。? ?
*?之所以這樣做，是因為?setTimeout?默認總以?window?對象為當前對象，也就是說，如果?registerCallback?方法定義如下的話：? ?
*?registerCallback:?function()?{? ?
*?setTimeout(this.onTimerEvent,?this.frequency?*?1000);? ?
*?}? ?
*?那么，this.onTimeoutEvent?方法執(zhí)行失敗，因為它無法訪問?this.currentlyExecuting?屬性。? ?
*?而使用了bind以后，該方法才能正確的找到this，也就是PeriodicalExecuter的當前實例。? ?
*/ ? ??
var ?PeriodicalExecuter?=?Class.create();? ??
PeriodicalExecuter.prototype?=?{? ??
initialize:? function (callback,?frequency)?{? ??
this .callback?=?callback;? ??
this .frequency?=?frequency;? ??
this .currentlyExecuting?=? false ;? ??
this .registerCallback();? ??
},? ??
registerCallback:? function ()?{? ??
setInterval( this .onTimerEvent.bind( this ),? this .frequency?*?1000);? ??
},? ??
onTimerEvent:? function ()?{? ??
if ?(! this .currentlyExecuting)?{? ??
try ?{? ??
this .currentlyExecuting?=? true ;? ??
this .callback();? ??
}? finally ?{? ??
this .currentlyExecuting?=? false ;? ??
}? ??
}? ??
}? ??
}? ??
/*--------------------------------------------------------------------------*/ ? ??
/**? ?
*?這個函數(shù)就?Ruby?了。我覺得它的作用主要有兩個? ?
*?1.?大概是?document.getElementById(id)?的最簡化調用。? ?
*?比如：$("aaa")?將返回?aaa?對象? ?
*?2.?得到對象數(shù)組? ?
*?比如:?$("aaa","bbb")?返回一個包括id為"aaa"和"bbb"兩個input控件對象的數(shù)組。? ?
*/ ? ??
function ?$()?{? ??
var ?elements?=? new ?Array();? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)?{? ??
var ?element?=?arguments;? ??
if ?( typeof ?element?==?'string')? ??
element?=?document.getElementById(element);? ??
if ?(arguments.length?==?1)? ??
return ?element;? ??
elements.push(element);? ??
}? ??
return ?elements;? ??
}? ??
/**? ?
*?為兼容舊版本的瀏覽器增加?Array?的?push?方法。? ?
*/ ? ??
if ?(!Array.prototype.push)?{? ??
Array.prototype.push?=? function ()?{? ??
var ?startLength?=? this .length;? ??
for ?( var ?i?=?0;?i?<?arguments.length;?i++)? ??
this [startLength?+?i]?=?arguments;? ??
return ? this .length;? ??
}? ??
}? ??
/**? ?
*?為兼容舊版本的瀏覽器增加?Function?的?apply?方法。? ?
*/ ? ??
if ?(!Function.prototype.apply)?{? ??
//?Based?on?code?from?http://www.youngpup.net/? ??
Function.prototype.apply?=? function (object,?parameters)?{? ??
var ?parameterStrings?=? new ?Array();? ??
if ?(!object)?object?=?window;? ??
if ?(!parameters)?parameters?=? new ?Array();? ??
??
for ?( var ?i?=?0;?i?<?parameters.length;?i++)? ??
parameterStrings?=?'parameters['?+?i?+?']';? ??
??
object.__apply__?=? this ;? ??
var ?result?=?eval('object.__apply__('?+? ??
parameterStrings.join(',?')?+?')');? ??
object.__apply__?=? null ;? ??
??
return ?result;? ??
}? ??
}? ??
/**? ?
*?擴展?javascript?內置的?String?對象? ?
*/ ? ??
String.prototype.extend({? ??
/**? ?
*?去掉字符串中的標簽? ?
*/ ? ??
stripTags:? function ()?{? ??
return ? this .replace(/</?[^>]+>/gi,? '' );? ??
},? ??
/**? ?
*?這個方法很常見，通常的實現(xiàn)都是用正則表達式替換特殊字符為html規(guī)范定義的命名實體或者十進制編碼，比如：? ?
*?string.replace(/&/g,?"&").replace(//g,?">");? ?
*?而這里的實現(xiàn)借用瀏覽器自身的內部替換，確實巧妙。? ?
*/ ? ??
escapeHTML:? function ()?{? ??
var ?div?=?document.createElement('div');? ??
var ?text?=?document.createTextNode( this );? ??
div.appendChild(text);? ??
return ?div.innerHTML;? ??
},? ??
/**? ?
*?同上? ?
*/ ? ??
unescapeHTML:? function ()?{? ??
var ?div?=?document.createElement('div');? ??
div.innerHTML?=? this .stripTags();? ??
return ?div.childNodes[0].nodeValue;? ??
}? ??
});? ??
/**? ?
*?定義?Ajax?對象,?靜態(tài)方法?getTransport?方法返回一個?XMLHttp?對象? ?
*/ ? ??
var ?Ajax?=?{? ??
getTransport:? function ()?{? ??
return ?Try.these(? ??
function ()?{ return ? new ?ActiveXObject('Msxml2.XMLHTTP')},? ??
function ()?{ return ? new ?ActiveXObject('Microsoft.XMLHTTP')},? ??
function ()?{ return ? new ?XMLHttpRequest()}? ??
)?||? false ;? ??
}? ??
}? ??
/**? ?
*?我以為此時的Ajax對象起到命名空間的作用。? ?
*?Ajax.Base?聲明為一個基礎對象類型? ?
*?注意?Ajax.Base?并沒有使用?Class.create()?的方式來創(chuàng)建，我想是因為作者并不希望?Ajax.Base?被庫使用者實例化。? ?
*?作者在其他對象類型的聲明中，將會繼承于它。? ?
*?就好像?java?中的私有抽象類? ?
*/ ? ??
Ajax.Base?=? function ()?{};? ??
Ajax.Base.prototype?=?{? ??
/**? ?
*?extend?(見上)?的用法真是讓人耳目一新? ?
*?options?首先設置默認屬性，然后再?extend?參數(shù)對象，那么參數(shù)對象中也有同名的屬性，那么就覆蓋默認屬性值。? ?
*?想想如果我寫這樣的實現(xiàn)，應該類似如下：? ?
setOptions:?function(options)?{? ?
this.options.methed?=?options.methed??options.methed?:?'post';? ?
..........? ?
}? ?
我想很多時候，java?限制了?js?的創(chuàng)意。? ?
*/ ? ??
setOptions:? function (options)?{? ??
this .options?=?{? ??
method:?'post',? ??
asynchronous:? true ,? ??
parameters:? '' ? ??
}.extend(options?||?{});? ??
},? ??
/**? ?
*?如果　xmlhttp?調用返回正確的HTTP狀態(tài)值，函數(shù)返回ture,　反之false。? ?
*?xmlhttp　的?readyState?屬性不足以準確判斷?xmlhttp　遠程調用成功，該方法是readyState判斷的一個前提條件? ?
*/ ? ??
responseIsSuccess:? function ()?{? ??
return ? this .transport.status?==?undefined? ??
||? this .transport.status?==?0? ??
||?( this .transport.status?>=?200?&&? this .transport.status?<?300);? ??
},? ??
/**? ?
*?如果　xmlhttp?調用返回錯誤的HTTP狀態(tài)值，函數(shù)返回ture,　反之false。? ?
*/ ? ??
responseIsFailure:? function ()?{? ??
return ?! this .responseIsSuccess();? ??
}? ??
}? ??
/**? ?
*?Ajax.Request?封裝?XmlHttp? ?
*/ ? ??
Ajax.Request?=?Class.create();? ??
/**? ?
*?定義四種事件(狀態(tài))，?參考http://msdn.microsoft.com/workshop/...eadystate_1.asp? ?
*/ ? ??
Ajax.Request.Events?=? ??
['Uninitialized',?'Loading',?'Loaded',?'Interactive',?'Complete'];? ??
/**? ?
*　相比先前的版本，對于　xmlhttp?的調用和返回值處理分離得更為清晰? ?
*/ ? ??
Ajax.Request.prototype?=?( new ?Ajax.Base()).extend({? ??
initialize:? function (url,?options)?{? ??
this .transport?=?Ajax.getTransport();? ??
this .setOptions(options);? ??
this .request(url);? ??
},? ??
　 /**? ?
*?新增加?request?方法封裝?xmlhttp　的調用過程。? ?
*/ ? ??
request:? function (url)?{? ??
var ?parameters?=? this .options.parameters?||? '' ;? ??
if ?(parameters.length?>?0)?parameters?+=?'&_=';? ??
try ?{? ??
if ?( this .options.method?==?'get')? ??
url?+=?'?'?+?parameters;? ??
this .transport.open( this .options.method,?url,? ??
this .options.asynchronous);? ??
if ?( this .options.asynchronous)?{? ??
this .transport.onreadystatechange?=? this .onStateChange.bind( this );? ??
setTimeout(( function ()?{ this .respondToReadyState(1)}).bind( this ),?10);? ??
}? ??
this .setRequestHeaders();? ??
var ?body?=? this .options.postBody??? this .options.postBody?:?parameters;? ??
this .transport.send( this .options.method?==?'post'???body?:? null );? ??
}? catch ?(e)?{? ??
}? ??
},? ??
/**? ?
*?新增加的?setRequestHeaders?方法允許添加自定義的http?header? ?
*/ ? ??
setRequestHeaders:? function ()?{? ??
var ?requestHeaders?=? ??
['X-Requested-With',?'XMLHttpRequest',? ??
'X-Prototype-Version',?Prototype.Version];? ??
if ?( this .options.method?==?'post')?{? ??
requestHeaders.push('Content-type',? ??
'application/x-www-form-urlencoded');? ??
/*?Force?"Connection:?close"?for?Mozilla?browsers?to?work?around? ?
*?a?bug?where?XMLHttpReqeuest?sends?an?incorrect?Content-length? ?
*?header.?See?Mozilla?Bugzilla?#246651.? ?
*/ ? ??
if ?( this .transport.overrideMimeType)? ??
requestHeaders.push('Connection',?'close');? ??
}? ??
/**? ?
*?其后的?apply?方法的調用有些奇技淫巧的意味? ?
*?從上下文中我們可以分析出?this.options.requestHeaders?是調用者自定義的http?header數(shù)組。? ?
*?requestHeaders?也是一個數(shù)組，將一個數(shù)組中的元素逐個添加到另一個元素中，直接調用? ?
*?requestHeaders.push(this.options.requestHeaders)? ?
*?是不行的，因為該調用導致?this.options.requestHeaders?整個數(shù)組作為一個元素添加到?requestHeaders中。? ?
*?javascript的Array對象還提供一個concat?的方法表面上滿足要求，但是concat實際上是創(chuàng)建一個新數(shù)組，將兩個數(shù)組的元素添加到新數(shù)組中。? ?
*?所以，下面的代碼也可以替換為? ?
*?requestHeaders?=?requestHeaders.concat(this.options.requestHeaders);? ?
*?很顯然，作者不喜歡這樣的代碼方式? ?
*?而?apply?方法的語法?apply([thisObj[,argArray]])?本身就要求第二個參數(shù)是一個數(shù)組或者arguments對象。? ?
*?所以巧妙的實現(xiàn)了?concat?函數(shù)的作用。? ?
*?令人拍案叫絕啊!? ?
*/ ? ??
if ?( this .options.requestHeaders)? ??
requestHeaders.push.apply(requestHeaders,? this .options.requestHeaders);? ??
for ?( var ?i?=?0;?i?<?requestHeaders.length;?i?+=?2)? ??
this .transport.setRequestHeader(requestHeaders,?requestHeaders[i+1]);? ??
},? ??
onStateChange:? function ()?{? ??
var ?readyState?=? this .transport.readyState;? ??
/**? ?
*?如果不是?Loading?狀態(tài)，就調用回調函數(shù)? ?
*/ ? ??
if ?(readyState?!=?1)? ??
this .respondToReadyState( this .transport.readyState);? ??
},? ??
/**? ?
*?回調函數(shù)定義在?this.options?屬性中，比如:? ?
var?option?=?{? ?
onLoaded?:?function(req)?{...};? ?
......? ?
}? ?
new?Ajax.Request(url,?option);? ?
*/ ? ??
respondToReadyState:? function (readyState)?{? ??
var ?event?=?Ajax.Request.Events[readyState];? ??
/**? ?
*?新增的回調函數(shù)處理，調用者還可以在options中定義?on200,?onSuccess?這樣的回調函數(shù)? ?
*?在?readyState?為完成狀態(tài)的時候調用? ?
*/ ? ??
if ?(event?==?'Complete')? ??
( this .options['on'?+? this .transport.status]? ??
||? this .options['on'?+?( this .responseIsSuccess()???'Success'?:?'Failure')]? ??
||?Prototype.emptyFunction)( this .transport);? ??
( this .options['on'?+?event]?||?Prototype.emptyFunction)( this .transport);? ??
/*?Avoid?memory?leak?in?MSIE:?clean?up?the?oncomplete?event?handler?*/ ? ??
if ?(event?==?'Complete')? ??
this .transport.onreadystatechange?=?Prototype.emptyFunction;? ??
}? ??
});? ??
/**? ?
*?Ajax.Updater?用于綁定一個html元素與?XmlHttp調用的返回值。類似與?buffalo?的?bind。? ?
*?如果?options?中有?insertion(見后)?對象的話,?insertion?能提供更多的插入控制。? ?
*/ ? ??
Ajax.Updater?=?Class.create();? ??
Ajax.Updater.ScriptFragment?=?'(?:<script>)((n|.)*?)(?:</script>)';? ??
Ajax.Updater.prototype.extend(Ajax.Request.prototype).extend({? ??
initialize:? function (container,?url,?options)?{? ??
/**? ?
*?containers?就是被綁定的?html?對象，xmlhttp的返回值被賦給該對象的?innerHTML?屬性。? ?
*?相比新版本，containers?根據(jù)container參數(shù)定義?success?和?failure?引用，如果它們被定義的話，根據(jù)xmlhttp調用是否成功來選擇? ?
*?更新對象，假想調用可能如下：? ?
*?var?c?=?{success:?$("successDiv"),?failure:?$("failureDiv")};? ?
*?new?Ajax.Updater(c,?url,?options);? ?
*?那么調用成功則?successDiv?顯示成功信息或者數(shù)據(jù)，反之?failureDiv?顯示錯誤信息? ?
*/ ? ??
this .containers?=?{? ??
success:?container.success???$(container.success)?:?$(container),? ??
failure:?container.failure???$(container.failure)?:? ??
(container.success??? null ?:?$(container))? ??
}? ??
this .transport?=?Ajax.getTransport();? ??
this .setOptions(options);? ??
var ?onComplete?=? this .options.onComplete?||?Prototype.emptyFunction;? ??
this .options.onComplete?=?( function ()?{? ??
this .updateContent();? ??
onComplete( this .transport);? ??
}).bind( this );? ??
this .request(url);? ??
},? ??
updateContent:? function ()?{? ??
var ?receiver?=? this .responseIsSuccess()??? ??
this .containers.success?:? this .containers.failure;? ??
var ?match?=? new ?RegExp(Ajax.Updater.ScriptFragment,?'img');? ??
var ?response?=? this .transport.responseText.replace(match,? '' );? ??
var ?scripts?=? this .transport.responseText.match(match);? ??
if ?(receiver)?{? ??
if ?( this .options.insertion)?{? ??
new ? this .options.insertion(receiver,?response);? ??
}? else ?{? ??
receiver.innerHTML?=?response;? ??
}? ??
}? ??
if ?( this .responseIsSuccess())?{? ??
if ?( this .onComplete)? ??
setTimeout(( function ()?{ this .onComplete(? ??
this .transport)}).bind( this ),?10);? ??
}???

posted on 2007-09-20 19:36 李云澤閱讀(342) 評論(0) 編輯收藏所屬分類: Prototype(Ajax)


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: prototype.js開發(fā)筆記 (轉) prototype對ajax的支持 prototype學習資料(三) prototype學習資料(二) prototype學習資料(一)

我思故我強

導航

統(tǒng)計

公告

公告

常用鏈接

留言簿(1)

文章分類(196)

文章檔案(164)

相冊

我收藏的網(wǎng)址

搜索

積分與排名

最新評論

prototype學習資料(一)

prototype學習資料(一)