JavaScript 기능을 확장하는 올바른 방법(번역)

JavaScript 기능을 확장하는 올바른 방법(번역)_javascript 팁

WBOY

풀어 주다： 2016-05-16 17:54:35

원래의

1120명이 탐색했습니다.

오늘 아침에 "JavaScript Weekly Introduction" [Issue 3] 기사를 봤는데 그 기사에서 (JavaScript 확장 – 올바른 방법)이라는 기사를 발견했습니다. 꽤 좋습니다. 와서 모든 사람과 공유하세요. 이 기사는 한 단어씩 번역되지 않았습니다. 가능한 한 이해하기 쉽게 만들려고 노력합니다.

원본 주소: JavaScript 확장 – 올바른 방법

다음은 번역입니다

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() }
　This; 분명히 우리가 원하는 결과는 아니지만, 우리가 추가한 메서드가 출력인 이유는 우리가 추가한 메서드의 열거 가능 속성이 기본값이 true이기 때문입니다.
열거 속성(열거 가능)을 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)

{
객체 .defineProperty(String.prototype, 'pxToInt',
{
value: function()
{
return parsInt(this.split('px')[0]);
} ,
열거 가능: false
})

String.isHex()
문자열이 "#CCC" 또는 "#CACACA"와 같이 16진수로 표현되는지 확인

코드 복사 코드는 다음과 같습니다.

 
if(!String.prototype.isHex) 
{ 
Object.defineProperty(String.prototype, 'isHex', 
{ 
값: 함수() 
{ 
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', 
{ 
값: 함수( ) 
{ 
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', 
{ 
값: 함수() 
{ 
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, ''); 
} , 
열거 가능: false 
}) 
} 

 
 String.trim() 
 후행 공백: 

코드 복사 코드는 다음과 같습니다. if(!String.prototype .trim)

{

Object.defineProperty(String.prototype, 'trim', 
{ 
value: function() 
{ 
return this.replace(/^s* /, "").replace(/s*$/, ""); 
}, 
열거 가능: false 
}) 
} 

 
 문자열. StripNonAlpha() 
 알파벳이 아닌 문자 제거: 

코드 복사 코드는 다음과 같습니다. if(!String.prototype.stripNonAlpha)

{

Object.defineProperty (String.prototype, 'stripNonAlpha', 
{ 
값: function() 
{ 
 return this.replace(/[^A-Za-z ] /g, ""); 
}, 
열거 가능: false 
}) 

 
　Object.sizeof() 
　 {one: “and”, two: "and"}와 같은 개체의 크기를 계산합니다. 

코드 복사

코드는 다음과 같습니다. if(!Object .prototype.sizeof) {

Object.defineProperty(Object.prototype, 'sizeof' ,

{
값: function()
{
var counter = 0;
for(index in this) counter
return counter; 열거 가능: 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; 
}, 
열거 가능: false 
}) 