나는 지난번에 Ajax 부분을 정리했고, 이번 주에 고급 기술 부분을 읽은 후에도 그것을 정리할 것입니다.
1. 유형 감지
Object.prototype.tostring.call (OBJ)을 사용하십시오.
유형이나 인스턴스는 가변 유형을 정확하게 판단 할 수 없기 때문입니다.
2. 안전한 생성자
일반적으로 생성자를 정의 할 때와 같은 것을 사용합니다.
코드 사본은 다음과 같습니다.
기능인 (이름) {
this.name = 이름;
}
그러나 var person = new person ( "cnblogs")에 가지 않으면.
대신, var person = person ( "cnblogs"). 그러면 이것은 다른 곳을 가리켜 나머지 물체의 오염을 일으 킵니다.
해결책은 이것을 설정할 때 판단하는 것입니다.
이 사람의 사례
그렇지 않다면, 새로운 사람 (x, x, x);
코드 사본은 다음과 같습니다.
기능인 (이름) {
if (이 사례) {
this.name = 이름;
}또 다른{
새로운 사람 (이름)을 반환합니다.
}
}
그러나 한 가지 주목할 점은 다른 생성자가 person.call (this, x) 방법을 통해 상속을 구현하려고한다는 것입니다.
인스턴스화 전에 해당 기능의 프로토 타입을 사람에게 가리키십시오.
3. 게으른 하중 기능
함수를 호출 할 때 종종 함수가 브라우저 기능을 판단 해야하는 상황이 있습니다.
예를 들어
코드 사본은 다음과 같습니다.
함수 생성 () {
if (subporth5) {
// 무언가를합니다
}또 다른{
// 다른 일을합니다
}
}
그러나 브라우저가 함수를 지원하는 경우 항상 지원되어야하므로 코드를 실행할 때마다 판단을 내릴 필요가 없습니다.
따라서 다시 작성할 수 있습니다
코드 사본은 다음과 같습니다.
함수 생성 () {
if (subporth5) {
CreateSomething = function () {// CreateSomething 함수를 다시 작성하십시오
// 무언가를합니다
}
}또 다른{
// 위와 동일합니다
}
}
이런 식으로, 당신은 처음이라고 부를 때 판단을 내릴 수 있으며, 그 기능을 다시 작성하면 자연스럽게 판단하지 않을 것입니다.
4. 기능 바인딩
JS에서 가장 혼란스러운 것은 이것이 누구의 지적인지에 대한 질문이어야합니다.
사실, JS를 오랫동안 공부 한 후에는 결론을 찾았습니다.
이 기능에서는 마지막으로 기능을 부르는 객체를 가리 킵니다.
이것을 알아 내면 기능 바인딩은 문제가되지 않습니다.
함수 에서이 포인팅을 변경하는 방법은 호출 및 적용되지만이 두 가지 방법을 사용하여 기능이 실행됩니다.
함수를 실행하지 않지만 함수를 매개 변수로 전달하고이를 변경하려면 최신 바인드를 사용하십시오.
5. 타이머
Settimeou, SetInterval 또는 Ajax는 멀티 스레딩과 같이 비동기식이지만 JS는 단일 스레드입니다.
실제로 이러한 방법은 스레드를 추가하지 않습니다.
Settimeout (FN, 300)은 300 밀리 초 후 FN을 JS의 실행 큐에 넣는 것을 의미합니다.
큐에 실행될 트랜잭션이없는 경우 (즉, JS 통역사가 유휴 상태입니다) 즉시 실행됩니다. 그렇지 않으면 큐 트랜잭션이 처리 된 후 기능이 실행됩니다.
따라서 Settimeout 또는 SetInterval을 사용하는 것은 정확한 제어 시간이 아닙니다.
또 다른 점은 Settimeout을 사용하여 SetInterval을 시뮬레이션하면 최소 실행 시간 간격을 정확하게 제어 할 수 있다는 것입니다.
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%감소 될 수 있지만 사용자의 경우 차이를 느낄 수 없습니다.
타이머를 사용하여 구현 된 기능 스로틀도 있습니다.
핵심 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 스로틀 (메소드, 컨텍스트) {
클리어 타임 아웃 (method.tid);
method.tid = settimeout (function () {
메소드 (컨텍스트);
}, 100);
}
여기서 실행 함수 및 함수의 실행 환경 (즉, 실행 함수에서 이것의 포인팅 객체)을 먼저 확인한 다음 작업을 실행합니다.
이 형태는 동작의 빈도를 더 잘 제어 할 수 있습니다.
브라우저 스트레칭 동작이라고 가정하면, 빠르게 스트레칭되고 각 트리거의 시간 간격이 100ms 이내에있는 한 마지막 결과는 실행됩니다.
8. 맞춤형 이벤트
본질은 관찰자 패턴입니다. 기본 패턴에는 3 가지 기능이 필요합니다.
한 기능은 바인딩 이벤트이고, 한 기능은 트리거 이벤트이고, 다른 기능은 바인딩을 제거하는 것입니다.
이 패턴은 코드 커플 링을 크게 줄일 수 있습니다.