자바스크립트 고급 기술 공유_자바스크립트 기술

저번에 Ajax 부분을 정리했습니다. 이번주에는 고급 스킬 부분을 읽어본 후 정리하겠습니다.

1. 유형 감지
Object.prototype.toString.call(obj)을 사용하세요.
typeof나 instanceof 모두 변수 유형을 정확하게 결정할 수 없기 때문입니다.

2. 안전한 생성자
보통 생성자를 정의할 때

코드 복사와 같은 것을 사용합니다. 코드는 다음과 같습니다.

function Person(name){
　this.name = name;
}

단 , 그렇지 않은 경우 var person = new Person("cnblogs")으로 이동하지 않은 후.
대신 var person = Person("cnblogs")입니다. 그러면 이는 다른 곳을 가리키게 되어 다른 물체를 오염시킬 수 있습니다.
해결책은 this.property를 설정할 때
이 Person 인스턴스
를 결정하는 것입니다. 그렇지 않은 경우 new Person(x,x,x);

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

function Person(name){
if(this instanceof Person){
this.name = name;
} else {
Return New Person (name);
}
}

x) 이런 식으로 상속이 구현되는 경우.
해당 함수의 프로토타입은 인스턴스화되기 전에 Person을 가리킨다는 점에 유의해야 합니다.

3. 지연 로딩 기능
함수 호출 시 브라우저 기능을 판단해야 하는 상황이 종종 발생합니다.
예를 들어

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

function createSomething() {
if(supportH5){
                                                                                       기능은 항상 지원되어야 하므로, 코드를 실행할 때마다 판단할 필요는 없습니다. 한번 판단하면 충분하기 때문입니다.
그래서

코드를 복사하세요.


코드는 다음과 같습니다.

function createSomething(){ if(supportH5){ createSomething = function(){ //createSomething 함수를 다시 작성함                                                 } }

이렇게 하면 처음 호출할 때 판단이 이루어지게 되는데, 나중에 이 함수를 다시 작성하게 되면 당연히 판단이 되지 않게 됩니다.


4. 함수 바인딩
JS에서 가장 혼란스러운 것은 아마도 이것이 누구를 가리키는지일 것입니다.
사실 제가 JS를 오랫동안 공부하면서 내린 결론은
함수에 있는 this는 최종적으로 함수를 호출하는 객체를 가리킨다는 것입니다. 이것은 해당 객체를 가리킬 것입니다.
이 사실을 파악한 후에는 함수 바인딩이 더 이상 문제가 되지 않습니다.
함수에서 이 지점을 변경하는 방법은 호출과 적용이 있는데 두 방법 모두 함수를 실행하게 됩니다.
함수를 실행하고 싶지 않고 함수에 매개변수로 함수를 전달하고 이를 변경하고 싶다면 최신 바인드를 사용하세요.


5. 타이머
setTimeou, setInterval 또는 Ajax는 멀티스레딩과 마찬가지로 비동기식이지만 js는 단일 스레드입니다.
사실 이 방법은 스레드를 추가하지 않습니다.
setTimeout(fn,300)은 300밀리초 후에 fn을 js 실행 대기열에 넣는 것을 의미합니다.
큐에 실행할 트랜잭션이 없으면(즉, js 인터프리터가 유휴 상태인 경우) 즉시 실행됩니다. 그렇지 않으면 이 함수를 실행하기 전에 대기열의 트랜잭션이 처리될 때까지 기다립니다.
따라서 setTimeout이나 setInterval을 사용하는 것은 정확한 시간 제어가 아닙니다.
또 한 가지 주목해야 할 점은 setInterval을 시뮬레이션하기 위해 setTimeout을 사용하면 최소 실행 시간 간격을 정확하게 제어할 수 있다는 것입니다.


6. 타이머를 사용하여 시간 실행 방법을 수정합니다.
메서드를 실행하는 데 오랜 시간이 걸리고 브라우저가 짧은 시간 동안 응답하지 않을 수 있는 경우 타이머를 사용하여 고정된 시간에 일부를 실행할 수 있습니다. 이렇게 하면 js가 항상 바쁜 것을 방지하고(브라우저가 응답하지 않음) 다른 작업을 처리할 수 있는 자유 시간을 제공합니다. 예를 들어, 길이가 1000인 배열 루프가 있는 경우 매번 100번 실행될 수 있으므로 js는 간격을 두고 다른 작업을 자유롭게 수행할 수 있습니다.


7. 기능 조절.
기능 조절은 성능을 향상시키는 좋은 방법으로, 경우에 따라 효율성을 몇 배로 높일 수 있습니다.
예를 들어 드래그를 수행하거나 onresize 이벤트에서 발생하는 일부 작업을 수행하는 경우입니다.
작업을 수행할 때마다 실제로 여러 번 수행한 적이 있습니다. 예:

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

var i = 0;
window.onresize = function(){
console.log(i );
}

브라우저를 확장하려고 하면 콘솔의 i가 즉시 100을 초과하는 것을 확인할 수 있습니다.
글을 바꾸세요. 예:

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

var i = 0, j = 1;
window.onresize = function(){
if(j % ​​​​2 == 0){
console.log(i );
}
j ;
}

j가 짝수일 때마다 실행되도록 변수 j를 만듭니다. 즉, 실행 횟수가 절반으로 줄어듭니다.
이와 같이 처리하면 실행 횟수를 50% 정도 줄일 수 있지만 사용자는 차이를 느끼지 못할 것입니다.

타이머를 이용하여 구현한 조절 기능도 있습니다.
핵심 코드는 다음과 같습니다.

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

function throttle(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}

여기에는 실행 함수와 함수의 실행 환경(즉, 실행 함수에서 이것이 가리키는 객체)이 전달되고, 그런 다음 액션 큐가 먼저 지워진 다음 액션이 실행됩니다.
이 양식을 사용하면 작업 빈도를 더 효과적으로 제어할 수 있습니다.
브라우저 스트레칭 작업이라고 가정하면, 충분히 빠르게 스트레칭하고 각 트리거 사이의 시간 간격이 100ms 이내이면 마지막 결과만 실행됩니다.


8. 맞춤 이벤트
는 기본적으로 관찰자 모드입니다. 기본 모드에는 3가지 기능이 필요합니다.
하나는 이벤트를 바인딩하는 함수, 하나는 이벤트를 트리거하는 함수, 하나는 바인딩을 제거하는 함수입니다.
이 모드는 코드 결합을 크게 줄일 수 있습니다.