<html>
<head>
<script src="prototype.js"></script> //@7
<script type="text/javascript">
/**********************************
*
* 瀹炵幇娓叉煋涓涓甫鏈?涓婁竴欏?鍜?涓嬩竴欏?鐨勭粍浠?鐐瑰嚮"涓婁竴欏?,褰撳墠欏靛噺1,鐐瑰嚮"涓嬩竴欏?褰撳墠欏靛姞1
*
*/
function PagesSystem(container){
this.currentPage = 10; //褰撳墠欏?br /> this.pageSysDiv = document.getElementById(container); //瀹瑰櫒
this.init = function() { //灝嗙粍浠剁敾鍑烘潵
this.createPrePage();
this.createNextPage();
};
this.changePage = function(evtObj) { //鏍規嵁鐐瑰嚮鍚庝紶榪囨潵鐨勫弬鏁板喅瀹氭槸鍔?鎴栨槸鍑?
if(evtObj == "next") {
this.currentPage += 1;
alert("浣犲凡鎵ц灝嗗綋鍓嶉〉鍔?錛岀幇鍦ㄥ綋鍓嶉〉鏄細" + this.currentPage);
}else if(evtObj == "pre"){
//姝ゅ涓嶄綔if(this.currentPage ==1) return;闄愬埗涓轟簡浣撶幇褰撲紶鍏ョ殑鍙傛暟涓?pre"鏃訛紝涓嬮潰鐨刟lert()涓瀹氫細鎵ц
this.currentPage -= 1;
alert("浣犲凡鎵ц灝嗗綋鍓嶉〉鍑?錛岀幇鍦ㄥ綋鍓嶉〉鏄細" + this.currentPage);
}
};
this.createPrePage = function() {//鍒涘緩涓婁竴欏電粍浠?br /> var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.changePage; //@1 褰撶偣鍑繪錛?涓婁竴欏?錛夐摰閽椂鎵ц
_a.innerText = "涓婁竴欏?;
_span.appendChild(_a);
this.pageSysDiv.appendChild(_span);
};
this.createNextPage = function() {//鍒涘緩涓嬩竴欏電粍浠?br /> var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.changePage; //@2 褰撶偣鍑繪錛?涓嬩竴欏?錛夐摰閽椂鎵ц
_a.innerText = "涓嬩竴欏?;
_span.appendChild(_a);
this.pageSysDiv.appendChild(_span);
};
this.init(); //鎵ц鍒濆鍖?br /> }
function testUse(msg){//@3鍦ㄦ彁鍑洪棶棰樼幆鑺傜敤鍒?br /> alert(msg);
}
window.onload = function() {
var ps = new PagesSystem("pageDiv");
}
</script>
</head>
<body>
<div id="pageDiv"></div>
</body>
</html>
浜屻佸垎鏋愪唬鐮侊紝鎻愬嚭闂錛岃В鍐抽棶棰?br />
1銆佹棤娉曚紶閫掑弬鏁伴棶棰樸?br />
浣犵粏鐪婡1鍜孈2澶?褰撳墠鐨勪唬鐮佸疄鐜版槸鏃犳硶鎶?pre"鍜?next"鍙傛暟浼犻掕繃鍘伙紝浜庢槸錛屽綋浣犺繍琛屼緥瀛愶紝鐐瑰嚮涓婁竴欏墊垨涓嬩竴欏碉紝閮芥槸娌′俊鎭痑lert鍑烘潵鐨勶紒
榪欑鎯呭喌錛屾槸寰堝父瑙佺殑銆傞偅涔堬紝濡備綍瀹炵幇灝嗗弬鏁頒紶榪囧幓銆?br />
灝咢1澶勪唬鐮佷慨鏀瑰涓嬶細
_a.onclick = function(){ //@1 褰撶偣鍑繪錛?涓婁竴欏?錛夐摰閽椂鎵ц
testUse("pre"); //鍙傜湅@3
this.changePage("pre");
}
榪欐牱鍒涘緩涓涓尶鍚嶅嚱鏁拌祴浜坃a.onclick,涔熷氨鏄綋_a瀵硅薄鐨刼nclick浜嬩歡瑙﹀彂鍚庡皢鎵ц姝ゅ尶鍚嶅嚱鏁幫紝鑰屽尶鍚嶅嚱鏁板皢甯繖璋冪敤testUse("pre")鍜宼his.changePage("pre")涓や釜鏂規硶錛?br />
浠庤岃揪鎴愪紶閫掑弬鏁般?br />
淇敼浠ｇ爜錛岃繍琛屼緥瀛愬悗鐐瑰嚮涓婁竴欏靛悗浼氭樉紺哄涓嬩袱涓俊鎭紝涓涓槸testUse涓緭鍑虹殑淇℃伅錛岃瘉鏄庝簡瀹炵幇鍙傛暟浼犻掞紝鍙︿竴涓嵈鏄繍琛岄敊璇彁紺恒?br />
榪欐槸鎵цthis.changePage("pre")鏂規硶鎶涘嚭鏉ョ殑銆傚畠騫舵病鍍忔垜浠鏈熸兂鐨勮繍琛屻?br />
浠庢彁紺鴻幏鍒扮殑淇℃伅鏄紝瀵硅薄涓嶆敮鎸佹灞炴ф垨鏂規硶錛堝鏋滄祻瑙堝櫒鎶ョ殑鏄腑鏂囨彁紺哄氨鍙互鐪嬪埌“瀵硅薄涓嶆敮鎸佹鏂規硶鎴栧睘鎬?#8221;鐨勬彁紺猴級
鍥炲ご鐪媡his.changePage("pre")鏂規硶錛屽緢鏄庢樉this鏄敊璇彁紺轟腑鎵鎸囩殑瀵硅薄錛屽湪鏈簲鐢ㄤ腑鎸嘝agesSystem瀵硅薄鎸囬拡鐨勫紩鐢紝鍦ㄥ簲鐢ㄤ腑紜疄鏄０鏄庝簡this.changePage("pre")鏂規硶錛屼絾涓轟粈涔堣娌℃鏂規硶鍛紵錛燂紵錛?br />
2銆佸湪闂1涓紝鎴戜滑宸叉垚鍔熻В鍐充紶閫掑弬鏁幫紝浣哖agesSystem瀵硅薄鐨刢hangePage鏂規硶琚皝鍋蜂簡錛燂紵錛?br />
鍐嶅皢鍒氭墠鐨勪唬鐮佷慨鏀瑰:
_a.onclick = function(){ //@1 褰撶偣鍑繪錛?涓婁竴欏?錛夐摰閽椂鎵ц
testUse("pre"); //鍙傜湅@3
alert(this.tagName);
this.changePage("pre");
}
鍐嶈繍琛屼緥瀛愶紝浣犱細鍙戠幇杈撳嚭this.tagName鐨勫間負 A, 瀹冨氨鏄痏a瀵硅薄銆傚櫌錛屾垜鐨勫ぉ鍟娿傛庝箞浼氳繖鏍鳳紵錛燂紵
鍝堝搱..._a瀵硅薄灝辨槸<a href=""/></a>榪欎釜html 鍏冪礌瀵硅薄錛岃繖閲屾槸“涓婁竴欏?#8221;閾甸挳瀵硅薄錛屽師鍨嬩腑鍝潵changePage鏂規硶鍟婏紝鎵浠ユ姤閿欙紒錛侊紒
浣犲彲浠ヨ繖鏍風悊瑙ｏ紝鐪嬪涓嬩唬鐮?
function PagesSystem(container){//姝ゅ簲鐢ㄤ腑鐨凱agesSystem瀵硅薄錛宑hangePage鏂規硶鐨勪笂涓嬫枃瀵硅薄,涔熷彲浠ョО涓哄綊灞炶呫?br />
//...鐪佺暐鍏跺畠浠ｇ爜
this.changePage = function(evtObj) { //鏍規嵁鐐瑰嚮鍚庝紶榪囨潵鐨勫弬鏁板喅瀹氭槸鍔?鎴栨槸鍑?
if(evtObj == "next") {
this.currentPage += 1;
alert("浣犲凡鎵ц灝嗗綋鍓嶉〉鍔?錛岀幇鍦ㄥ綋鍓嶉〉鏄細" + this.currentPage);
}else if(evtObj == "pre"){
//姝ゅ涓嶄綔if(this.currentPage ==1) return;闄愬埗涓轟簡浣撶幇褰撲紶鍏ョ殑鍙傛暟涓?pre"鏃訛紝涓嬮潰鐨刟lert()涓瀹氫細鎵ц
this.currentPage -= 1;
alert("浣犲凡鎵ц灝嗗綋鍓嶉〉鍑?錛岀幇鍦ㄥ綋鍓嶉〉鏄細" + this.currentPage);
}
};
//...鐪佺暐鍏跺畠浠ｇ爜
}
榪欐牱鐨勪唬鐮侊紝浣犲緢瀹規槗鐪嬪嚭this鏄寚PagesSystem, 閭ｄ箞鎴戜滑緇х畫寰涓嬬湅
鍋囪 A瀵硅薄鐨勫師鍨嬪涓?
function A() {//@4
//...
this.onclick;
this.doClick = function() { //鐐瑰嚮
this.onclick();//鎵ц
}
//...
}
褰撲綘鍦≒agesSystem鏂規硶涓?br />
_a.onclick = function(){ //@1 褰撶偣鍑繪錛?涓婁竴欏?錛夐摰閽椂鎵ц
testUse("pre"); //鍙傜湅@3
alert(this.tagName);
this.changePage("pre");
}
鍐欎笂榪欐牱鐨勪唬鐮佸悗,浣犲彲浠ョ璋辮涓篅4鐨勪唬鐮佺殑妯℃牱鏄涓嬶細
function A() {//@4
//...
this.onclick = function(){ //@1 褰撶偣鍑繪錛?涓婁竴欏?錛夐摰閽椂鎵ц
testUse("pre"); //鍙傜湅@3
alert(this.tagName); //@5
this.changePage("pre"); //@6
};
this.doClick = function() { //鐐瑰嚮
this.onclick();//鎵ц
}
//...
}
鍛靛懙銆傘傚鏋滆繖鏍風湅鐨勮瘽錛孈5,@6涓殑this褰撶劧鏄寚a瀵硅薄錛屾病寮備箟銆傞偅褰撶劧鏄病changePage鏂規硶銆?br />
3銆侀偅涔堝浣曡В鍐寵繖闂鍛紵錛?br />
寰堝垢榪愶紝prototype.js涓殑bind鏂規硶灝卞彲浠ヨВ鍐寵繖鏍風殑闂錛屽畠榪樿В鍐蟲垜浠笂闈㈡彁鐨勪紶鍙傛暟闂銆?br />
鐪媌ind澶т緺甯呮牱:
bind: function() {
if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}
bind鏂規硶涓殑this灝辨槸bind鏂規硶鐨勬墍灞炶咃紙涓婁笅鏂囷級濡? f.bind(),f鏄竴涓０鏄庝簡鐨勬柟娉?閭ｄ箞bind 鏂規硶閲岀殑this灝辨槸f
鍐嶇粏鐪嬶紝bind鏂規硶鍏跺疄鍋氱殑宸ヤ綔鏄繑鍥炰竴涓尶鍚嶅嚱鏁?姝ゅ尶鍚嶅嚱鏁板府蹇欐墽琛宼his鎵鎸囩殑鏂規硶錛坆ind鏂規硶鐨勬墍灞炶咃級錛屽鏋滀綘鏈夊涓嬩唬鐮?br />
function f(msg) {
this.functionName = "f method";
alert(msg);
alert(this.functionName);
}
button.onclick = f.bind(this, msg); //榪欓噷鐨則his鎸噁, 鍦╞ind鏂規硶涓敤object = args.shift()鑾峰緱錛岃繖鏍風殑璇濓紝褰撶偣鍑籦utton鍚庢墽琛宖鏂規硶, f鏂規硶涓殑this灝變笉浼氭棤鏁呰 button浠ｆ浛銆俕_^涓嶇劧錛屼細鎶ラ敊鐨勫晩錛宐utton鍝潵functionName錛屽懙鍛?..
瀹冩棦瑙ｅ喅灝唌sg鍙傛暟浼犺繃鍘伙紝鍚屾椂灝唂緇戝畾鍒癰utton鐜涓嬶紝bind鏂規硶寰楀悕鍙兘灝辨槸榪欐剰涔夊惂銆傝嚦浜庡浣曞疄鐜板皢f緇戝畾錛岄潬鐨勫氨鏄痑pply鏂規硶銆?br />
apply璋滀漢鑹插僵灝辯敱浣犱滑鑷鍘繪彮寮鍟︼紒
浠嬬粛浜哹ind澶т緺緇欏ぇ瀹訛紝鎴戠殑渚嬪瓙灝遍夯鐑︿綘浠嚜宸辮皟閫氬畠鍟︺傝阿浜嗐傘?br />
嬈㈣繋浜ゆ祦鎸囨銆?br />
澶囨敞錛?nbsp;濡傞渶杞澆鏈枃錛岃娉ㄦ槑鍑哄
]]>