코드의 본질은 특히 JavaScript에서 시퀀스와 순서의 개념을 강조합니다. 결국 JavaScript는 단일 스레드 엔진입니다.
Javascript는 함수형 프로그래밍의 특성을 가지며 JavaScript 단일 스레드 엔진으로 인해 함수는 항상 순서대로 실행되어야 합니다. 우수한 코드는 종종 함수를 자체 모듈로 잘라낸 다음 특정 조건에서 실행합니다. 이러한 함수는 순서대로 실행되므로 이러한 함수를 관리하는 데 도움이 되는 통합 관리 개체를 작성하는 것이 좋습니다. )가 태어났습니다.
콜백이란
Javascript는 함수형 프로그래밍으로 가득 차 있습니다. 예를 들어 가장 간단한 window.onload는 원하는 함수가 여러 개 있는 경우 window.onload가 하나의 함수만 받을 수 있다는 것입니다. onload에서 실행한 후 다음 코드를 작성해야 합니다.
콜백 함수의 원래 의도는 이러한 기능을 더 이상 분산시키지 않고 통합된 방식으로 구성하는 것입니다. 보시다시피, 우리는 window.onload의 요소에 대해 두 가지 작업을 수행하려고 합니다. 먼저 html 구조를 변경한 다음 html의 스타일을 변경합니다. 두 함수는 Element에도 동작하며, 이 두 함수의 최종 실행은 순서대로 수행됩니다. 그렇다면 이러한 기능을 관리하기 위해 이와 같은 객체를 작성하는 것은 어떨까요? 물론 이것은 콜백 함수의 가장 기본적인 의미일 뿐입니다. 우리에게는 단순한 콜백 함수 객체 이상이 필요하며, 더 강력한 콜백 함수가 필요합니다. 글쎄, 이것은 단순한 사용 사례일 뿐이므로 함수를 하나씩 실행하는 것 외에 이 콜백 함수가 무엇을 할 수 있는지 알려드릴 수 있습니다.
콜백의 핵심은 함수의 순서적인 실행을 제어하는 것입니다. Javascript는 단일 스레드 엔진입니다. 즉, Ajax 및 setTimeout을 포함하여 JavaScript에서 단 하나의 코드만 동시에 실행됩니다. 이 두 기능은 비동기적인 것처럼 보이지만 사실은 아닙니다. 브라우저가 javascript 코드를 실행할 때 이 코드는 순서대로 대기열에 푸시됩니다. Ajax를 실행하면 브라우저는 코드 대기열로 푸시합니다. 브라우저는 JavaScript 코드(이 단일 스레드 엔진에 맞는 콜백)를 처리할 때 코드 대기열에서 하나씩 코드를 가져옵니다.
물론 우리가 원하는 것은 단순한 도구 개체 그 이상입니다. jQuery 소스 코드에서 콜백은 일련의 기능에 대한 기본 관리를 제공하고 Deferred(비동기 대기열)의 기반을 제공하며 대기열도 제공합니다. (동기화 대기열). Deferred는 피라미드 프로그래밍(요청 반환 코드를 기반으로 실행해야 하는 Ajax의 코드와 같은 다수의 중첩된 콜백 함수)을 매끄럽게/평평하게 만드는 데 사용되며 Queue는 jQuery.animate(애니메이션 엔진)를 구동합니다.
그럼 콜백을 작성해 보겠습니다.
콜백 모델
배열:
콜백은 일련의 함수를 허용하기를 원하므로 컨테이너가 있어야 합니다. 배열을 사용하고 각 함수를 실행해야 할 경우 실행할 배열 항목을 반복할 수 있습니다.
현재 모델:
이 콜백은 매우 강력해야 합니다. 이 콜백은 함수를 푸시하고 실행하는 것만큼 간단하지 않아야 합니다.
한 번: 현재 Callbacks 객체의 모든 함수는 한 번만 실행되고 실행 후에는 해제됩니다. Callbacks 객체를 사용하는 사용자에게 함수가 한 번만 실행되고 더 이상 실행되지 않도록 하는 안정적이고 효과적인 솔루션을 제공할 수 있습니다. 다시 실행하면 이러한 기능의 스레드가 안정화됩니다.
auto: 자동 실행 모델입니다. 일부 함수는 이전 레이어 함수에 의존합니다. 예를 들어 함수 b의 실행은 함수 a에 따라 다릅니다. 그런 다음 이 콜백을 처음 실행한 후 추가될 때마다 함수가 콜백에 도달하면 이전에 추가된 함수를 자동으로 실행하고 이전 함수에 제공된 마지막 매개변수 데이터를 전달합니다. 이렇게 하면 콜백에서 이러한 종속 함수 간에 반복적인 트리거가 필요하지 않습니다. 흥미로운 모델이군요.
Once&auto: 더욱 강력하게 만들고 Once 및 Auto 모델을 동시에 사용할 수 있습니다. 즉, 콜백에 함수가 추가될 때마다 이전 함수가 실행되고 이전 함수가 해제됩니다. 그리고 다음번에도 계속해서 기능이 추가될 예정입니다. 그때는 과거의 기능들이 한 번 모델에서 출시되었기 때문에 더 이상 실행되지 않을 것입니다.
API:
add(function) - 콜백 객체에 하나 이상의 함수를 추가합니다. 물론, 함수를 추가하지 않고 단지 콜백을 살펴보고 싶은 경우에만 계속해서 재미있게 즐길 수 있도록 하겠습니다. - 우리는 그것이 우리가 잘하는 일이 아니기 때문에 예외를 던지지 않을 것입니다.
제거(함수) - 콜백에서 함수 제거: 이제 함수를 추가했으므로 이를 후회할 계획도 제공해야 합니다.
has(function) - 콜백에 함수가 포함되어 있는지 확인합니다. 오? 이 기능을 포함할지 여부는 확실하지 않지만 처음에는 포함시켰습니다! 왜 그렇게 부주의합니까? 하지만 귀하가 저에게 물으셨기 때문에 콜백에 이 기능이 포함되어 있는지 알려드리겠습니다. 귀하가 매우 바쁘고 모든 것을 기억하고 결정할 수 없다는 것을 알고 있습니다.
empty() - 빈 콜백: 이 함수가 의미를 잃었나요? 무엇? 실행된 후에는 더 이상 원하지 않나요? 그럼 그걸 지울 수 있었으면 좋겠어? 글쎄요, 기억을 위해 나는 여전히 당신의 요구를 용인합니다.
비활성화() - 콜백 비활성화: 다른 사람의 코드와 안정적인 존재를 유지하기 위해 자기희생을 선택했습니다. 예, 이 방법은 콜백을 비활성화할 수 있으며, 마치 이전에 존재하지 않았던 것처럼 완전히 비활성화할 수 있습니다.
비활성화() - 콜백이 비활성화되었는지 확인합니다. 콜백이 실제로 자기 희생적인지 여부를 여전히 믿을 수 없다면 이 방법을 사용하면 마음의 평화를 얻을 수 있습니다.
lock(boolean) - 이 콜백 객체를 잠급니다. 불안정할까봐 걱정되지만 이를 포기하고 싶지는 않습니다. Lock은 객체를 잠가야 하는지 여부를 나타내는 부울 매개변수를 받습니다. 물론 매개변수가 없습니다. 콜백이 잠겨 있는지 확인할 수 있습니다.
fire(data) - 이 콜백에서 함수를 실행합니다. 우리가 하는 모든 일은 지금 이 순간 실행의 운명을 위한 것이 아닌가요? 매개변수는 실행해야 하는 이러한 기능의 매개변수가 됩니다.
fireWith(context,data) - 콜백에서 함수를 실행하고 컨텍스트를 지정합니다. fire()에서 모든 함수의 컨텍스트는 Callbacks 객체이며, fireWidth()를 사용하면 실행될 이러한 함수의 컨텍스트를 재정의할 수 있습니다. 얼마나 자유로운 프로그래밍인지, Callbacks는 모든 것을 고려합니다.
Fired() - 이 콜백이 과거에 실행되었는지 확인합니다. 대부분의 경우 과거에 수행한 작업을 알지 못하지만 이 콜백 개체를 실행한 경우 수행한 모든 작업을 기록합니다. 과거에 이 콜백을 실행했는지 여부를 알고 있으므로 이를 거부할 수 없습니다.
기본 모듈 구현
간단한 구현:
먼저 간단히 콜백을 구현해 보겠습니다.
브라우저 콘솔을 열면 실행 결과가 정상인 것을 확인할 수 있습니다.
1회 및 자동(메모리) 구현
한 번:
Once는 이 콜백의 함수를 한 번 실행한 다음 다시 실행하지 않도록 합니다. 원리는 매우 간단합니다. 위의 코드를 보면 함수 목록을 대신하는 변수 목록이 있다는 것을 알 수 있으므로, 과거에 실행했던 코드만 삭제하면 됩니다. 전역 변수를 사용하여 현재 실행 모델을 저장합니다. 일회성 모델인 경우 fireWith()에서 목록을 무효화합니다.
자동:
auto(메모리) 모델은 jQuery에서 memory의 이름을 따서 명명되었습니다. 처음에는 이 이름 때문에 사용법을 주의 깊게 살펴본 후 auto로 변경하기로 결정했습니다. 해당 기능은 "after the first fire()"입니다. , 후속 "add() 함수 자동 실행"은 다음 상황에서 사용할 수 있습니다. 콜백에 함수 세트를 추가한 후 일시적으로 함수를 추가해야 하는 경우 새로 추가된 함수를 즉시 실행해야 합니다. 사용상의 편리성, 이 패턴은 이해하기가 조금 어려워집니다. 구현은 add() 중에 자동 모델인지 확인하는 것입니다. 자동 모델인 경우 이 함수를 실행합니다. 그러나 첫 번째 fire() 이후에 자동으로 실행해야 합니다. 실행되지 않은 콜백은 자동으로 실행되어서는 안 됩니다. 또한 각 자동 실행 후에 마지막으로 사용된 매개변수가 이 자동 실행 함수에 전달되어야 합니다.
아마도 다음 코드가 생각날 것입니다.
그러나 jQuery에서는 더 멋진 사용법이 채택되었습니다. jQuery 작성자도 이 사용법을 자랑스러워서 이 모델에 메모리라는 이름을 붙였습니다. 즉, 위 변수 auto는 현재 자동 실행 모드를 나타낼 뿐만 아니라 자동과 메모리를 모두 나타내는 매개변수의 마지막 컨테이너로 사용됩니다. (다음 코드는 jQuery가 아니며 소스 코드가 아닌 jQuery 코드 아이디어를 기반으로 작성되었습니다):
add() 중에 jQuery는 auto(memory) 변수에 값을 할당하지 않았지만 coreFire()에서 auto(memory)에 값을 할당하도록 선택하여 첫 번째 변수가 나올 때까지 켜지지 않도록 했습니다. fire()가 자동으로 실행됩니다.
위에서 언급한 것처럼 coreFire()가 전달하는 매개변수는 실제로는 배열이고, 첫 번째 매개변수는 컨텍스트이고, 두 번째 매개변수는 외부에서 전달되는 매개변수입니다. 동시에 이 배열을 auto(메모리)에 할당하여 변수 auto(모드를 자동으로 실행할지 여부)의 정의가 메모리(전달된 마지막 매개변수의 메모리)가 되도록 합니다.
once&auto의 경우, 이 두 코드를 결합하기만 하면 됩니다. coreFire()에서 자동 모드인지 확인한 다음 목록을 새 배열로 재설정하고, 그렇지 않으면 직접 정의되지 않음으로 설정하면 됩니다.
이 코드는 jQuery에 맞춰 제가 직접 작성한 코드입니다. 일부 jQuery 공용 함수가 들어있습니다. 코드 조각이 아니므로 직접 참조하고 실행할 수 있습니다.
//도구 기능
var isIndexOf = Array.prototype.indexOf, //Es6
toString = Object.prototype.toString, //캐시 toString 메소드
TosLice = Array.prototype.slice, // 캐시 슬라이스 메소드
>
"개체" 반환 === document.getElementById 유형 ?
isFunction = 함수(fn) {
//IE에서 DOM, BOM 인식에 문제가 있습니다
시도해 보세요 {
Return /^s*bfunctionb/.test("" fn);
} 잡기 (x) {
거짓 반환
}
} :
isFunction = function (fn) { return toString.call(fn) === '[객체 함수]' };
})(),
>
//첫 번째 매개변수는 루프할 배열을 나타내고, 두 번째 매개변수는 루프를 통과할 때마다 실행되는 함수
If (arguments.length < 2 || !isFunction(arguments[1])) return;
//조각이 유효하지 않은 이유는 무엇입니까? ?
var list = toSlice.call(arguments[0]),
fn = 인수[1],
항목;
while ((item = list.shift())) {//길이를 직접 결정하지 않음, 속도 향상
// 여기서 호출을 사용하는데 Apply가 안 되는 이유는 무엇입니까?
// 완료 - Apply의 두 번째 매개변수는 배열 객체여야 합니다(배열과 유사한 것이 가능한지 여부는 확인되지 않으며 호출에는 이 요구 사항이 없습니다)
|
fn.call(창, 항목);
}
},
inArray = function () { //배열에 항목이 포함되어 있는지 감지하고 항목의 인덱스를 반환합니다
> // 사전 컴파일
isIndexOf 반환 ? 함수(배열, 요소, i) {
If(배열)
return isIndexOf.call(array, elem, i);
-1을 반환합니다.
} : 함수(요소, 배열, i) {
var len;
if (배열) {
len = 배열.길이;
나 = 나 ? 나는 < 0? Math.max(0, len i) : i : 0;
for (; i < len; i ) {
if (i in array && array[i] === elem) {
돌려주세요;
}
}
}
반환 -1;
}
}();
var 콜백 = 함수(옵션) {
옵션 = toString.call(option) === '[객체 개체]' ? 옵션: {};
//새 콜백마다 고유한 상태가 있으므로 클로저를 사용하세요
var 목록 = [], var 목록 = [], var 목록 =
_list = [], // 이 콜백 객체가 잠겨 있으면 목록을 지우고 원본 목록을 _list에 넣으세요
~ >
FireStart, //현재 콜백 함수 목록에서 실행되는 함수 인덱스(시작점)
FireLength, // 콜백 함수의 배열 길이
~ ~
// 이 변수의 사용법은 매우 이상하고 날카롭습니다. 실행 지정 여부에 대한 플래그를 포함할 뿐만 아니라 데이터를 기록하기도 합니다
//이 자동은 한 번 사용하면 정말 이상합니다. [처음으로] 실행한 후 자동으로 실행됩니다. 한 번 실행하면 나중에 코드가 추가되거나 실행되지 않으므로 안정성이 보장됩니다. 콜백 데이터 세트의 안정성
stack = !option.once && [], //콜백 배열이 현재 실행 중이고 실행 중에 새 콜백 함수가 추가되면 새 콜백 함수가 콜백 배열에 푸시됩니다. >
실행 = false, //콜백 작동/실행 여부
//콜백 함수 트리거
불 = 함수(데이터) {
//이 데이터는 배열입니다. 자동 모드가 구성된 경우 auto는 배열이므로 auto는 결코 false가 되지 않습니다.
auto = option.auto && data; //여기서 구성에서 마지막 매개변수를 기억해야 하는 경우 이 매개변수를 기억하세요(매우 정확한 사용법, 데이터 직접 가져오기)
해고됨 = true;
FireIndex = 발사 시작 ||
FireStart = 0;//fireStart 지우기(지우지 않으면 다음 실행에 문제가 발생합니다)
Fireringlength = list.length; // 캐시 목록 길이, 외부 세계에서 접근 가능
실행 = true // 콜백 함수 실행
for (; FireIndex < FireLength; FireIndex ) {
If (list[firingIndex].apply(data[0], data[1]) === false) {
// 참고로 option.auto(자동 실행)가 구성되어 있고 스택(스택)에 함수가 있으면 add() 코드에 자동 판단을 위해 이 메서드를 직접 실행할 코드 섹션이 있습니다.
//해당 코드를 차단하고 싶으므로 자동을 false로 설정하세요
자동 = false;
휴식;
}//함수가 false를 반환하면 후속 대기열의 실행을 종료합니다
}
실행 = false; // 플래그 상태가 실행되었습니다. 콜백 함수 [스택(스택)에 있는 함수가 아직 실행되지 않았습니다.]
//이 스택이 한 번 구성되지 않으면 []이어야 하므로
가 있어야 합니다.
//여기서 주요 기능은 한 번 구성되지 않은 경우 다음 코드를 가로채는 것입니다. 한 번 구성된 경우 코드 실행 후 데이터가 지워집니다.
if (스택) {
If (stack.length) // 먼저 아래 목록 상태의 코드를 가로채서 스택이 있는지 확인합니다
Fire (stack.shift ()); // 스택 헤드에서 꺼내 FIRE() 메서드를 반복합니다
}
Else if (auto) // 코드가 여기에 오면 Option.once(한 번만 실행)가 구성되었음을 증명하므로 목록이 명확해집니다.
목록 = [];
Else // 구성 AUTO가 없음을 증명하지만 ONCE가 구성되어 있으므로 희생은 궁극적인 Dafa이며 콜백 개체는 직접 폐지됩니다
self.disable();
};
var self = {
add: function () {//콜백 함수 추가
if (목록) {
var start = list.length;
(함수 addCallback(args) {
각각(인수, 함수(항목) {
If (isFunction(item)) {//함수인 경우 콜백 목록을 푸시합니다
>
//typeof와 Object.prototype.toString은 서로 다릅니다
} else if (toString.call(item) === '[object Array]') {//배열인 경우 콜백 목록에 재귀적으로 푸시하면 이 판단은 배열과 유사한 것을 포기합니다
~ addCallback(item);
|
});
})(인수);
}
(실행)//콜백 함수가 현재 실행 중인 경우 현재 콜백 함수 목록의 길이를 업데이트해야 합니다. 그렇지 않으면 새로 푸시된 콜백 함수가 전달됩니다.
FireLength = list.length;
else if (auto) {//현재 콜백 함수가 실행되지 않고 자동 실행이 필요한 경우
~ | 위 코드의 실행 라인에는 영향을 미치지 않습니다
FireStart = 시작;
//새로 추가된 파트너 실행
불(자동);
}
이것을 돌려주세요;
},
fire: function () {//트리거 콜백 함수
self.fireWith(this, 인수);
이것을 돌려주세요;
},
fireWith: function (context, args) {//콜백 함수를 트리거하고 컨텍스트를 지정합니다
//한 번 구성되면 스택이 정의되지 않고 한 번만 실행되도록 보장해야 하므로 한 번 실행되면 여기의 코드는 다시 실행되지 않습니다
If (목록 && (!fired || 스택)) {
//수정 매개변수
//여기서 컨텍스트 인덱스는 0입니다
//파라미터 목록 인덱스는 2
// 배열 접근으로 변환하는 것은 객체 표현이 더 많은 리소스를 소모하기 때문입니다. 최상위 fire() 코드에 auto [메모리 매개변수, 자동 실행] 기능이 있기 때문에 객체를 사용하면 더 많은 메모리가 소모됩니다
args = [컨텍스트,
>
args.slice && args.slice()
~
];
화재(args);
}
이것을 돌려주세요;
},
제거: 함수 () {//콜백 함수 제거
if (목록) {
각각(인수, 함수(항목) {
var index;
// 항목이 여러 개 있을 수 있으며, 색인은 루프의 검색 범위를 나타낼 수 있으며 이전에 검색한 항목은 다시 검색할 필요가 없습니다.
While ((index = inArray(item, list, index)) > -1) {
list.splice(index, 1);
If (발사) {
//위의 Fire에서 실행되는 함수 목록이 올바르게 실행될 수 있는지 확인하세요. 이러한 전역 변수는 비동기식으로 제거될 수 있도록 Fire에서 설정됩니다.
If (index <= FireLength)//수정 길이
발사 길이--;
If (index <= FireLength)//수정 인덱스
FireIndex--;
|
|
});
}
이것을 돌려주세요;
},
있음: 함수(fn) {//콜백 함수 포함 여부
fn을 반환 ? ray(fn, list) > -1 : 목록 && list.length;
},
비어 있음: 함수 () {//이 콜백 객체 비우기
목록 = [];
발사 길이 = 0;
이것을 돌려주세요;
},
비활성화: 함수 () {//이 콜백 객체를 삭제하면 후속 콜백 함수 목록이 더 이상 실행되지 않습니다.
목록 = 스택 = 자동 = 정의되지 않음;
이것을 돌려주세요;
},
비활성화됨: 기능() {//비활성화 여부
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
