資料整理

了解Prototype

1、最簡單的例子，了解 prototype：
(1) Number.add(num)：作用，數(shù)字相加
實現(xiàn)方法：Number.prototype.add = function(num){return(this+num);}
試驗：alert((3).add(15)) -> 顯示 18


(2) Boolean.rev(): 作用，布爾變量取反
實現(xiàn)方法：Boolean.prototype.rev = function(){return(!this);}
試驗：alert((true).rev()) -> 顯示 false

是不是很簡單？這一節(jié)僅僅是告訴讀者又這么一種方法，這種方法是這樣運(yùn)用的。


2、已有方法的實現(xiàn)和增強(qiáng)，初識 prototype：
(1) Array.push(new_element)
　　作用：在數(shù)組末尾加入一個新的元素
　　實現(xiàn)方法：
　　Array.prototype.push = function(new_element){
????????this[this.length]=new_element;
????????return this.length;
????}
　　讓我們進(jìn)一步來增強(qiáng)他，讓他可以一次增加多個元素！
　　實現(xiàn)方法：
　　Array.prototype.pushPro = function() {
????????var currentLength = this.length;
????????for (var i = 0; i < arguments.length; i++) {
????????????this[currentLength + i] = arguments[i];
????????}
????????return this.length;
????}
　　應(yīng)該不難看懂吧？以此類推，你可以考慮一下如何通過增強(qiáng) Array.pop 來實現(xiàn)刪除任意位置，任意多個元素（具體代碼就不再細(xì)說了）

(2) String.length
　　作用：這實際上是 String 類的一個屬性，但是由于 JavaScript 將全角、半角均視為是一個字符，在一些實際運(yùn)用中可能會造成一定的問題，現(xiàn)在我們通過 prototype 來彌補(bǔ)這部不足。
　　實現(xiàn)方法：
　　String.prototype.Tlength = function(){
????????var arr=this.match(/[^\x00-\xff]/ig);
????????return this.length+(arr==null?0:arr.length);
????}
　　試驗：alert("aa啦啦aa".Tlength()) -> 顯示 8
　　這里用到了一些正則表達(dá)式的方法和全角字符的編碼原理，由于屬于另兩個比較大的類別，本文不加說明，請參考相關(guān)材料。


3、新功能的實現(xiàn)，深入 prototype：在實際編程中所用到的肯定不只是已有方法的增強(qiáng)，更多的實行的功能的要求，下面我就舉兩個用 prototype 解決實際問題的例子：
(1) String.left()
　　問題：用過 vb 的應(yīng)該都知道left函數(shù)，從字符串左邊取 n 個字符，但是不足是將全角、半角均視為是一個字符，造成在中英文混排的版面中不能截取等長的字符串
　　作用：從字符串左邊截取 n 個字符，并支持全角半角字符的區(qū)分
　　實現(xiàn)方法：
　　String.prototype.left = function(num,mode){
????????if(!/\d+/.test(num))return(this);
????????var str = this.substr(0,num);
????????if(!mode) return str;
????????var n = str.Tlength() - str.length;
????????num = num - parseInt(n/2);
????????return this.substr(0,num);
????}
　　試驗：alert("aa啦啦aa".left(4)) -> 顯示 aa啦啦
???? alert("aa啦啦aa".left(4,true)) -> 顯示 aa啦
　　本方法用到了上面所提到的String.Tlength()方法，自定義方法之間也能組合出一些不錯的新方法呀！

(2) Date.DayDiff()
　　作用：計算出兩個日期型變量的間隔時間（年、月、日、周）
　　實現(xiàn)方法：
　　Date.prototype.DayDiff = function(cDate,mode){
????????try{
????????????cDate.getYear();
????????}catch(e){
????????????return(0);
????????}
????????var base =60*60*24*1000;
????????var result = Math.abs(this - cDate);
????????switch(mode){
????????????case "y":
????????????????result/=base*365;
????????????????break;
????????????case "m":
????????????????result/=base*365/12;
????????????????break;
????????????case "w":
????????????????result/=base*7;
????????????????break;
????????????default:
????????????????result/=base;
????????????????break;
????????}
????????return(Math.floor(result));
????}
　　試驗：alert((new Date()).DayDiff((new Date(2002,0,1)))) -> 顯示 329
???? alert((new Date()).DayDiff((new Date(2002,0,1)),"m")) -> 顯示 10
　　當(dāng)然，也可以進(jìn)一步擴(kuò)充，得出響應(yīng)的小時、分鐘，甚至是秒。

(3) Number.fact()
　　作用：某一數(shù)字的階乘
　　實現(xiàn)方法：
　　Number.prototype.fact=function(){
????????var num = Math.floor(this);
????????if(num<0)return NaN;
????????if(num==0 || num==1)
????????????return 1;
????????else
????????????return (num*(num-1).fact());
????}
　　試驗：alert((4).fact()) -> 顯示 24
　　這個方法主要是說明了遞歸的方法在 prototype 方法中也是可行的！





擴(kuò)展代碼1:
<script>
/*
?This following code are designed and writen by Windy_sk <seasonx@163.net>
?You can use it freely, but u must held all the copyright items!
*/

//測字符串實際長度
String.prototype.Tlength = function(){var arr=this.match(/[^\x00-\xff]/ig);return this.length+(arr==null?0:arr.length);}

//字符串左取
String.prototype.left = function(num,mode){if(!/\d+/.test(num))return(this);var str = this.substr(0,num);if(!mode) return str;var n = str.Tlength() - str.length;num = num - parseInt(n/2);return this.substr(0,num);}

//字符串右取
String.prototype.right = function(num,mode){if(!/\d+/.test(num))return(this);var str = this.substr(this.length-num);if(!mode) return str;var n = str.Tlength() - str.length;num = num - parseInt(n/2);return this.substr(this.length-num);}

//字符串包含
String.prototype.GetCount = function(str,mode){return eval("this.match(/("+str+")/g"+(mode?"i":"")+").length");}

//字符串去除兩端空字符
String.prototype.Trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");}
String.prototype.Ltrim = function(){return this.replace(/(^\s*)/g, "");}
String.prototype.Rtrim = function(){return this.replace(/(\s*$)/g, "");}

document.write("'aa啦啦aa'.Tlength() = " + "aa啦啦aa".Tlength());
document.write("<br>");
document.write("'aabbcc'.Tlength() = " + "aabbcc".Tlength());
document.write("<br>");
document.write("'aa啦啦aa'.left(4) = " + "aa啦啦aa".left(4));
document.write("<br>");
document.write("'aa啦啦aa'.left(4,true) = " + "aa啦啦aa".left(4,true));
document.write("<br>");
document.write("'aa啦啦aa'.right(4) = " + "aa啦啦aa".right(4));
document.write("<br>");
document.write("'aa啦啦aa'.right(4,true) = " + "aa啦啦aa".right(4,true));
document.write("<br>");
document.write("'abAcae'.GetCount('a') = " + "abAcae".GetCount("a"));
document.write("<br>");
document.write("'abAcae'.GetCount('a',true) = " + "abAcae".GetCount("a",true));
document.write("<br>");
document.write("'? abc? de??? '.Ltrim() = " + "? abc? de??? ".Ltrim());
document.write("<br>");
document.write("'? abc? de??? '.Rtrim() = " + "? abc? de??? ".Rtrim());
document.write("<br>");
document.write("'? abc? de??? '.Trim() = " + "? abc? de??? ".Trim());
</script>




代碼2:
/*Number Object*/
if(!Number.prototype.toFixed) {
?Number.prototype.toFixed = function(n) {
??with(Math) return round(Number(this)*pow(10,n))/pow(10,n)
?}
}
/*Array Object*/
if (!Array.prototype.pop) {
?Array.prototype.pop = function() {
??var lastElement = this[this.length-1];
??this.length = Math.max(this.length-1,0);
??return lastElement;
?}
}
if (!Array.prototype.push) {
?Array.prototype.push = function() {
??for(var i=0;i<arguments.length;i++) {
???this[this.length]=arguments[i];
??}
??return this.length;
?}
}
if (!Array.prototype.shift) {
?Array.prototype.shift = function() {
??var firstElement = this[0];
??this.reverse();
??this.pop();
??this.reverse();
??return firstElement;
?}
}
if (!Array.prototype.splice) {
?Array.prototype.splice = function() {
??var start = arguments[0];
??var deleteCount = start+arguments[1];
??var deleteItem = this.slice(start,deleteCount);
??var beforeItem = this.slice(0,start);
??var afterItem = this.slice(deleteCount);
??this.length=beforeItem.length;
??var i;
??for (i=2;i<arguments.length;this[this.length]=arguments[i++]);
??for (i=0;i<afterItem.length;this[this.length]=afterItem[i++]);
??return deleteItem;
?}
}
if (!Array.prototype.unshift) {
?Array.prototype.unshift = function() {
??var arr = new Array();
??for (var i=0;i<arguments.length;arr[i]=arguments[i++]);
??arr = arr.concat(this);
??this.length = 0;
??for (i=0;i<arr.length;this[i]=arr[i++]);
?}
}



代碼3:
function getCookie(mainKey,subKey) {
?var reg = new RegExp("(^| )"+mainKey+"=([^;]*)(;|$)");
?var arr = document.cookie.match(reg);
?if (arguments.length == 2) {
??if (arr!=null)
???return key(subKey,arr[2]);
??else
???return null;
?} else if (arguments.length == 1) {
??if (arr!=null)
???return unescape(arr[2]);
??else
???return null;
?}

?function key(subKey,findWith) {
??var arr,reg = new RegExp("(^| |&)"+subKey+"=([^&]*)(&|$)");
??var findWith = findWith?findWith:document.cookie;
??if (arr =? findWith.match(reg))
???return unescape(arr[2]);
??else
???return null;
?}
}

function getQuery(name) {
?var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
?var r = location.search.substr(1).match(reg)
?if (r!=null) return unescape(r[2]);
}

function DateAdd(strInterval, NumDay, dtDate) {
?var dtTmp = new Date(dtDate);
?if (isNaN(dtTmp)) dtTmp = new Date();
?switch (strInterval) {
??case "s":return new Date(Date.parse(dtTmp) + (1000 * NumDay));
??case "n":return new Date(Date.parse(dtTmp) + (60000 * NumDay));
??case "h":return new Date(Date.parse(dtTmp) + (3600000 * NumDay));
??case "d":return new Date(Date.parse(dtTmp) + (86400000 * NumDay));
??case "w":return new Date(Date.parse(dtTmp) + ((86400000 * 7) * NumDay));
??case "m":return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + NumDay, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
??case "y":return new Date((dtTmp.getFullYear() + NumDay), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
?}
}
//?DateDiff("m","2002/12/1 00:00:00","2004/12/1 00:00:00")
function DateDiff(strInterval, dtStart, dtEnd) {
?var dtStart = new Date(dtStart);
?if (isNaN(dtStart)) dtStart = new Date();
?var dtEnd = new Date(dtEnd);
?if (isNaN(dtEnd)) dtEnd = new Date();
?switch (strInterval) {
??case "s":return parseInt((dtEnd - dtStart) / 1000);
??case "n":return parseInt((dtEnd - dtStart) / 60000);
??case "h":return parseInt((dtEnd - dtStart) / 3600000);
??case "d":return parseInt((dtEnd - dtStart) / 86400000);
??case "w":return parseInt((dtEnd - dtStart) / (86400000 * 7));
??case "m":return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);
??case "y":return dtEnd.getFullYear() - dtStart.getFullYear();
?}
}
//?b2s("11新浪網(wǎng)!@#程序員_+}{:><")
function b2s(strng) {
?var Matches = strng.match(/[\x21-\x7e]/g);
?for (var i=0;i<Matches.length;i++) {
??strng = strng.replace(Matches[i],String.fromCharCode(Matches[i].charCodeAt?(0)+65248))
?}
?return strng;
}






出處:http://bbs.blueidea.com/viewthread.php?tid=716195&page=

posted on 2006-07-29 10:46 謝瑋 閱讀(251) 評論(0)  編輯  收藏 所屬分類: javascript