JavaScript の機能を拡張する正しい方法 (翻訳)_JavaScript のヒント

今朝、記事 「JavaScript Weekly Introduction」[第 3 号]を見て、その中に記事 (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 = "やった";
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() }
Thisは明らかに私たちが望む結果ではありませんが、追加したメソッドが出力される理由は、追加したメソッドの enumerable 属性がデフォルトで true に設定されているためです。
列挙プロパティ (enumerable) を false に設定し、defineProperty メソッドを使用して機能を拡張するだけで、この問題を回避できます。

コードをコピー コードは次のとおりです:

if(!String.prototype.capitalize)
{
Object.defineProperty(String.prototype, 'capitalize', {
値: function()
{
return this.slice(0,1).toUpperCase() this.slice(1).toLowerCase();
},
列挙可能: 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]);
} 、
列挙可能: false
});
}


String.isHex()
文字列が「#CCC」や「#CACACA」などの 16 進数で表現されているかどうかを判断します

コードをコピー コードは次のとおりです:

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))
},
列挙可能: false
}; > }

String.reverse()
文字列反転:

コードをコピー コードとして

if(!String.prototype.reverse)
{
Object.defineProperty(String.prototype, 'reverse',
{
value: function( )
{
return this.split( '' ).reverse().join( '' );
},
列挙可能: false
}); >

String.wordCount()
スペースで区切って単語の数をカウントします

コードをコピーコードは次のとおりです: if(!String.prototype.wordCount)

{

Object.defineProperty(String.prototype, 'wordCount',
{
値: function()
{
return this.split(' ').length;
},
列挙可能: false
});
String.htmlEntities()

などの HTML タグは特殊文字としてエンコードされます。 > コードは次のとおりです:

if(!String.prototype.htmlEntities) { Object.defineProperty(String.prototype, 'htmlEntities', { value: function() { return String(this).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); },

列挙可能: 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*$/, ""); },

列挙可能: false

});
}


文字列。 tripNonAlpha()
アルファベット以外の文字を削除します:




コードをコピー

コードは次のとおりです:


if(!String.prototype.stripNonAlpha)

{ Object.defineProperty (String.prototype, 'stripNonAlpha', { value: function() { return this.replace(/[^A-Za-z ] /g, ""); 列挙可能: false

}); > Object.sizeof()

{one: “and”, two: "and"} などのオブジェクトのサイズをカウントします




コードをコピー


コードは次のとおりです。


if(!Object .prototype.sizeof)
{

Object.defineProperty(Object.prototype, 'sizeof' ,
{
value: function()
{

var counter = 0; for(this) counter ; return counter;列挙可能: false }) }

この方法で JS ネイティブ オブジェクトの関数を拡張するのは非常に良いことですが、必要な場合 (プロジェクトで頻繁に使用される場合) を除き、ネイティブ オブジェクトの関数を直接拡張することはお勧めできません。グローバル変数が発生するためです。汚染。
また、記事内の pxToInt() メソッドは必要ありません。JS の parseInt() でこのような関数を直接完了できます: parsetInt("200px")===200
には問題があるようです。 htmlEntities メソッドをもう 1 つ提供します:

コードをコピーします コードは次のとおりです:

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;
},
列挙可能: false
});