효율적인 자바스크립트 글쓰기 스킬 모음_javascript 스킬

최근에 JavaScript 프레임워크를 작성하다가 많은 세부 사항이 충분히 고려되지 않은 것을 발견했습니다. 장기간 누적되면 프레임워크가 실제로 적용될 때 심각한 효율성 문제가 발생할까 걱정됩니다. 그래서 저는 JavaScript 효율성을 향상시키기 위한 몇 가지 기술에 관심을 갖기 시작했고, 여기에서 이를 여러분과 공유하겠습니다.

1. JavaScript는 더 작은 코드 크기가 필요한 유일한 언어이므로 JSMin, Packer, YUICompressor 등과 같은 일부 도구를 사용하여 JavaScript 코드를 간소화할 수 있습니다. 이러한 도구는 지역 변수 이름을 짧은 변수 이름으로 바꿉니다(예: parseFloat()를 a()로 대체). 따라서 JavaScript 코드를 작성할 때 각 전역 변수를 varparseFloat = parseFloat

와 같은 로컬 변수에 매핑해야 합니다. JSLint를 사용하여 작성한 JavaScript를 감지하면 숨겨진 많은 것을 찾을 수 있습니다. 그 질문에. JSLint는 JavaScript 소스 코드를 스캔하여 문제를 찾을 수 있는 JavaScript 확인 ​​도구(오픈 소스 아님)입니다. JSLint가 문제를 발견하면 JSLint는 문제를 설명하고 소스 코드에서 오류의 대략적인 위치를 나타내는 메시지를 표시합니다.

3. JavaScript를 작성할 때 배열을 순회해야 하는 경우가 많습니다.

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

for (var i=0;i//do Something
}

JavaScript 변수의 구성원은 런타임에 결정되므로 루프를 통해 매번 배열 길이 속성을 조회해야 하므로 배열 크기를 저장하는 변수를 추가할 수 있습니다.

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

var l = array.length
for (var i=0;i< ;l;i ){
//뭔가를 하세요
}

이것은 좋은 최적화처럼 보이지만 실제로는 더 잘할 수 있습니다:

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

var i=array.length
while(i--){
//do Something
}

이 두 줄의 코드를 어셈블리로 변환하면 while 문에 필요한 명령어가 더 적어지기 때문입니다. 관심이 있으면 어셈블리를 공부할 수 있습니다.

4. JavaScript에서는 누구나 Object.prototype의 속성을 수정하거나 추가할 수 있으므로 객체의 속성을 순회할 때 먼저 hasOwnProperty를 사용하여 전체 프로토타입 체인을 순회하여 효율성에 영향을 미치지 않도록 판단해야 합니다. . 예:

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

for (var key in obj ) {
if (obj.hasOwnProperty(key)) {
//do Something
}
}

5. undefine을 사용할 때는 먼저 지역 변수를 정의합니다. 정의되지 않음

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

var checkVal = function(val) {
var undefine;
return val !== undefine;

위 코드에서 로컬 변수가 미리 정의되지 않은 경우 전역 변수는 undefine입니다. 제 3자가 다른 곳에 있는 경우 전역 변수 undefine=3을 정의하면 잘못된 결과가 발생합니다.

6. 문자열이 아닌 변수를 문자열 유형으로 변환할 때는

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

var str = (i "").replace(...)

String(i )을 많이 사용합니다.

7. 배열을 정의할 때 배열 클래스 정렬이나 기타 방법을 사용할 필요가 없고 일반적인 할당과 접근만 할 경우에는 직접 작성해야 합니다

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

var array = {};

대신

코드 복사 코드는 다음과 같습니다. var array = new Array()

그렇지 않으면 숫자 변수를 정의할 때 var i = new Number(1)를 쓰는 것만큼 의미가 없습니다

8. jQuery를 사용할 때 동일한 코드 줄에서 동일한 개체에 대해 여러 함수를 실행해 보세요. , 예:

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

$("p. neat") .addClass("ohmy").show("slow");

대신

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

$("p.neat").addClass("ohmy")
$("p.neat").show( "slow");

기타 팁에는 DocumentFragment를 사용하여 여러 추가를 최적화하고, childNodes 대신 firstChild 및 nextSibling을 사용하여 dom 요소를 순회하는 방법 등이 포함됩니다.
자세한 내용은 다음 블로그를 참조하세요: http://www.nowamagic.net/librarys/veda/detail/363
이 기사는 다음 기사도 참조합니다: http://www.cnblogs.com /justinw /archive/2009/12/07/1618500.html