擴展JavaScript功能的正確方法(譯文)_javascript技巧

原文地址：Extending JavaScript – The Right Way

以下是譯文

　　JavaScript已經內置了很多強大的方法，但有時你需要的某個功能在內置的方法中沒有，我們怎么來優雅地擴展JavaScript功能呢。
　　例如我們想增加一個capitalize()方法來實現首字母大寫，通常我們這樣寫：
代碼如下:
if(!String.prototype.capitalize)
{
String.prototype.capitalize = function()
{
return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
}
}

　　上面的代碼可以正常使用，但如果在某個地方有下面的代碼：
代碼如下:
var strings = "yay";
for(i in strings) console.log(i + ":" + strings[i]);

　　我們得到的結果是這樣的：
0: y
1: a
2: y
capitalize: function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }
　　這顯然不是我們想要的結果，輸出了我們增加的方法的原因是我們增加的方法的enumerable屬性默認為true。
　　我們可以通過簡單地把枚舉屬性(enumerable)設置為false避免這個問題，使用defineProperty方法進行功能的擴展：
代碼如下:
if(!String.prototype.capitalize)
{
Object.defineProperty(String.prototype, 'capitalize',
{
value: function()
{
return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
},
enumerable: false
});
}

　　現在我們再運行這段代碼：
代碼如下:
var strings = "yay";
for(i in strings) console.log(i + ":" + strings[i]);

　　我們得到的結果是：
0: y
1: a
2: y
　　要注意的是，用循環沒有輸出的并不代表不存在，我們可以通過下面的代碼查看到定義：
代碼如下:
var strings = "yay";
console.log(strings.capitalize)

　　會輸出：
代碼如下:
function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }

　　用這種方式擴展JavaScript功能比較靈活，我們可以用這種方式來定義我們自己的對象，并設置一些默認值。
　　以下是另外幾個擴展方法，你可以在自己的項目中使用：
　　String.pxToInt()
　　把"200px"這樣的字符串轉換為數字 200 :
代碼如下:
if(!String.prototype.pxToInt)
{
Object.defineProperty(String.prototype, 'pxToInt',
{
value: function()
{
return parseInt(this.split('px')[0]);
},
enumerable: false
});
}

　　String.isHex()
　　判斷一個字符串是否是16進制表示的，如"#CCC" 或 "#CACACA"
代碼如下:
if(!String.prototype.isHex)
{
Object.defineProperty(String.prototype, 'isHex',
{
value: function()
{
return this.substring(0,1) == '#' &&
(this.length == 4 || this.length == 7) &&
/^[0-9a-fA-F]+$/.test(this.slice(1));
},
enumerable: false
});
}

　　String.reverse()
　　字符串反轉：
代碼如下:
if(!String.prototype.reverse)
{
Object.defineProperty(String.prototype, 'reverse',
{
value: function()
{
return this.split( '' ).reverse().join( '' );
},
enumerable: false
});
}

　　String.wordCount()
　　統計單詞數量，用空格分開
代碼如下:
if(!String.prototype.wordCount)
{
Object.defineProperty(String.prototype, 'wordCount',
{
value: function()
{
return this.split(' ').length;
},
enumerable: false
});
}

　　String.htmlEntities()
　　html標簽如<和>編碼為特殊字符
代碼如下:
if(!String.prototype.htmlEntities)
{
Object.defineProperty(String.prototype, 'htmlEntities',
{
value: function()
{
return String(this).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
},
enumerable: false
});
}

　　String.stripTags()
　　去掉HTML標簽：
代碼如下:
if(!String.prototype.stripTags)
{
Object.defineProperty(String.prototype, 'stripTags',
{
value: function()
{
return this.replace(/<\/?[^>]+>/gi, '');
},
enumerable: false
});
}

　　String.trim()
　　去掉首尾空格：
代碼如下:
if(!String.prototype.trim)
{
Object.defineProperty(String.prototype, 'trim',
{
value: function()
{
return this.replace(/^\s*/, "").replace(/\s*$/, "");
},
enumerable: false
});
}

　　String.stripNonAlpha()
　　去掉非字母字符：
代碼如下:
if(!String.prototype.stripNonAlpha)
{
Object.defineProperty(String.prototype, 'stripNonAlpha',
{
value: function()
{
return this.replace(/[^A-Za-z ]+/g, "");
},
enumerable: false
});
}

　　Object.sizeof()
　　統計對象的大小，如{one: “and”, two: “and”}為2
代碼如下:
if(!Object.prototype.sizeof)
{
Object.defineProperty(Object.prototype, 'sizeof',
{
value: function()
{
var counter = 0;
for(index in this) counter++;
return counter;
},
enumerable: false
});
}

　　這種方式擴展JS原生對象的功能還是挺不錯的，但除非必要(項目中用的很多)，不建議直接在原生對象上擴展功能，會造成全局變量污染。
　　另外，文中的pxToInt()方法是沒什么必要的，JS中的parseInt()可以直接完成這樣的功能：parsetInt("200px")===200
　　htmlEntities方法貌似有問題，下面另提供一個：
代碼如下:
if(!String.prototype.htmlEntities)
{
Object.defineProperty(String.prototype, 'htmlEntities',
{
value: function()
{
var div = document.createElement("div");
if(div.textContent){
div.textContent=this;
}
else{
div.innerText=this;
}
return div.innerHTML;
},
enumerable: false
});
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com