개인적으로 중요하다고 생각하는 자바스크립트 프로그래밍 스킬 9가지 공유하기

개인적으로 중요하다고 생각하는 자바스크립트 프로그래밍 스킬 9가지 공유하기_javascript 스킬

WBOY

풀어 주다： 2016-05-16 16:02:02

원래의

1266명이 탐색했습니다.

1. 능숙하게 판단하세요:

js에서는 NaN, undefine, Null, 0, bool로 변환하면 ""가 false가 되므로 이렇게 쓸 수 있습니다.

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

if(!obj) {}

은 객체가 false인 경우 수행하는 작업을 나타냅니다. obj가 위 항목 중 하나이면 false이고 !false가 true이므로 if(obj==null || obj == NaN이 필요하지 않기 때문입니다. ....).

2. 연산자를 능숙하게 사용하세요:

타임스탬프를 얻는 아주 고전적인 방법이 있습니다.

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

var dataspan = new Date()*1;

js는 약한 유형의 언어라는 것을 알고 있습니다. Date()는 시간을 나타내는 문자열을 반환합니다. 이 문자열을 사용하여 산술 연산을 수행하면 결과의 타임스탬프인 변환이 발생합니다.

3. 정규식을 능숙하게 사용하세요:

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

/.a/ig.exec('xsas')

//reg 객체를 생성하고 exec 메소드를 호출하는 것과 동일합니다. 물론 test(), match() 등과 같은 다른 메소드도 호출할 수 있습니다. 

4. 배열의 최대값과 최소값을 가져옵니다.

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

var 값 ​​= [1,2,3,40,23] 

var max = Math.Max.apply(Math,values);

Max.apply를 호출하고 객체를 Math로 설정한 다음 Values를 전달하여 최대값을 결정합니다.

5. 메모리 최적화:

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

function p(){this.p='moersing'}; var p1 = 새로운 p() 

p1.xx 

p1.xx

…..

p1=null; //작업을 수행한 후 마지막으로 p1에 대한 참조를 수동으로 해제합니다.

6. 객체를 만드는 가장 일반적인 방법(프로토타입 모드):

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

함수 c(){

This.name ='모어싱';

This.age=18;

This.books=['javascript 개발','C# 개발'];

}

c.prototype={ 

displayBookName:함수 (){ 

foreach(this.books의 var t) 

            {

              document.write(this.books[t]);

}

}

}

프로토타입 구성 패턴의 가장 큰 단점은 참조 유형을 공유한다는 점입니다. 따라서 생성자에서 참조 유형을 정의하고, 이 참조를 사용하여 프로토타입에서 일반 메서드를 정의합니다.

7. 블록 수준 범위 및 개인 변수

JavaScript에는 블록 수준 범위 및 개인 변수 같은 것이 없지만 일부 기능을 사용하면 이러한 효과를 시뮬레이션할 수 있습니다.

7.1 블록 수준 범위:

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

(함수(){ 

//블록 수준 범위

}

)();

저는 이를 "함수 표준화"라고 부릅니다. 즉, 다음과 같이 표준 함수처럼 호출할 수 있습니다.

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

var 이름 =function(){};

(name)();//보통 이런 식으로 쓰지는 않습니다;

이 방법의 장점은 () 외부에서 함수 내의 변수에 접근할 수 없으며 블록 수준 범위가 된다는 점입니다. 이 방법은 일반적으로 플러그인 작성 시 사용되며 전역 변수에 추가 변수를 추가하지 않습니다. .변수이며, 함수가 실행된 후에는 내부에 정의된 변수가 소멸되므로 클로저 기능에는 문제가 없습니다.

7.2 개인 변수:

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

함수 비공개()

{ 

변수 이름 = '모어싱';

This.getName = 함수(){

이 이름을 반환하세요.

}

}

개인 변수는 실제로 함수의 범위를 제한으로 사용하고(외부에서 접근할 수 없음) 해당 변수를 반환하는 메서드를 정의하면 끝입니다.

8.DOM NodeList:

nodeList는 동적 요소입니다. 즉, 문서에 요소를 추가하면 다음과 같이 nodeList가 실시간으로 업데이트됩니다.

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

var alldiv = document.getElementsByTagName('div');

for(var i=0;i
{

      var div = document.createElement('div');

        div.innerHTML= i.toString();

           document.body.appendChild(div);

}

이 코드는 무한 루프를 발생시킵니다. 루프에서 div가 생성된 다음,appendChild 메소드가 이를 본문에 추가하므로 모든 alldiv가 즉시 업데이트되므로 i

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

var alldiv = document.getElementsByTagName('div');

var len,i;

for(i=0,len=alldiv.length;i
{

      var div = document.createElement('div');

        div.innerHTML= i.toString();

           document.body.appendChild(div);

}

다음은 제안 사항입니다. 각 작업이 DOM 트리의 쿼리를 실행하므로 NodeList를 자주 작업하지 않는 것이 가장 좋습니다.

위에서 소개한 방법 외에도 HTML5에 새로 추가된 API(selector API Level1)도 이 문제를 해결할 수 있습니다. 이는 C#의 linq 실시간 쿼리와 유사합니다. 앞으로 블로그에 업데이트할 예정이니 계속 지켜봐주세요.

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

var allDiv= document.querySelectorAll('div');

for(var i=0;i
{

      var div = document.createElement('div');

        div.innerHTML= i.toString();

           document.body.appendChild(div);

}

querySelectorAll에는 jquery의 $()와 유사한 CSS 선택기라는 하나의 매개변수가 필요합니다. 반환되는 NodeList는 시기적절한 비동적 DOM 컬렉션입니다.

HTML5 API에 대한 자세한 내용은

을 참조하세요.

http://www.w3.org/standards/techs/dom#w3c_all

또는

https://developer.mozilla.org/zh-CN/docs/Web/API

또한 HTML5 API에 관한 블로그도 준비 중이니 많은 관심 부탁드립니다.

9.DOM 성능:

그런 멍청한 짓은 하지 마세요(내가 해냈어요...)

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

for(var i=0;i<10;i )

{ 

document.querySelector('ul').innerHTML="" i "
";

}

객체의 innerHTML에 값을 할당하면 내장된 C 파서를 호출하여 문자열을 구문 분석합니다. 속도는 매우 빠르지만 성능이 저하될 수 있으므로 이 작업을 수행하지 않는 것이 가장 좋습니다.

이렇게 하는 것이 좋습니다:

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

var ih=null;

for(var i=0;i {
ih ="

" i "

";
}
document.querySelector('ul').innerHTML=ih;

시간이 되면 다른 성능 최적화 주제도 업데이트될 예정입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.