[Javascript] zepto 소스 코드 콜백 분석

콜백 모듈은 콜백 함수를 관리하는 데 사용되며 지연 지연 객체의 기본 부분이기도 합니다. 이제 소스 코드를 살펴보겠습니다.
선택 매개변수:

  Options:
    once: 是否最多执行一次，
    memory: 是否记住最近的上下文和参数
    stopOnFalse: 当某个回调函数返回false时中断执行
    unique: 相同得回调只被添加一次

이것은 선택적 매개변수입니다. 아래에서 테스트할 수 있습니다.

var a = function (value) {
  console.log('a:' + value);
};
var b = function (value) {
  console.log('b:' + value);
};
var callbacks = $.Callbacks();
callbacks.add(a);
callbacks.fire(['hello']);
callbacks.add(b);
callbacks.fire('中');

다음은 출력 결과입니다.

a: hello,
a:中,
b:中

두 번째로 실행하면 a 함수도 다음과 같이 표시됩니다. 실행.
실험용 매개변수를 추가할 때 먼저 메모리를 추가하세요

var callbacks = $.Callbacks({
  memory: true
});
callbacks.add(a);
callbacks.fire('hello');
callbacks.add(b);
输出：
a:hello,
b:hello

메모리 매개변수를 추가하세요. 메모리는 마지막으로 콜백 함수가 실행된 시간을 기록합니다. 이후 추가된 모든 기능은 이 매개변수를 사용하여 즉시 실행됩니다. Once

var callbacks = $.Callbacks({
  once: true
});
callbacks.add(a);
callbacks.fire('hello');
callbacks.fire('中');
输出：
a:hello

의 사용법을 살펴보면, fire 메소드가 두 번 실행되어도 결과는 한 번만 출력되는 것을 알 수 있습니다. 다른 두 매개변수는 이해하기 쉬우므로 세부 사항을 직접 시도해 볼 수 있습니다.

$.Callbacks = function(options) {
  options = $.extend({}, options)
  var memory, 
    fired, 
    firing,
    firingStart,
    firingLength,
    firingIndex,
    list = [],
    stack = !options.once && []
}

각 매개변수의 의미를 살펴보겠습니다. 메모리는 메모리 모드에서 마지막 트리거의 컨텍스트와 매개변수를 기억합니다. 발사는 콜백이 트리거되고 있음을 의미합니다. 작업은 위치를 시작하고 FireingLength 콜백 작업의 길이, FireIndex의 현재 콜백 인덱스 및 목록은 실제 콜백 대기열을 나타냅니다. 한 번 트리거되지 않으면 작업 매개 변수를 캐시하는 데 사용됩니다. 트리거링 프로세스 중에는 실행되지 않습니다.

fire = function(data) {
  memory = options.memory && data
  fired = true
  firingIndex = firingStart || 0
  firingStart = 0
  firingLength = list.length
  firing = true
  for ( ; list && firingIndex < firingLength ; ++firingIndex ) {
    if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse) {
      memory = false
      break
    }
  }
  firing = false
  if (list) {
    if (stack) stack.length && fire(stack.shift())
    else if (memory) list.length = 0
    else Callbacks.disable()
  }
}

fire 함수는 유일한 내장 함수입니다. 해당 함수는 목록의 콜백 실행을 트리거하는 것입니다. 먼저 전달된 매개변수를 살펴보세요. 이것은 우리가 $라고 부르는 fire와 동일하지 않습니다. 외부 콜백. 여기서 데이터는 배열이고, data[0]은 컨텍스트를 나타내고, data[1]은 메서드 호출의 매개 변수입니다. 그런 다음 각 매개변수의 초기화가 있습니다. 즉, options.memory가 true이면 데이터가 저장되고, FireingStart가 0이면 FireingIndex는 0이고 FireStart는 0으로 설정되고 Fireing 콜백 표시가 발생합니다. 발사는 사실이다.
그런 다음 콜백 목록을 탐색하고 콜백을 하나씩 실행합니다. 내부의 if 판단은 콜백 함수가 false를 반환하고 options.stopOnFalse가 false인 경우 메모리 캐시가 지워진다는 것을 의미합니다. 순회가 완료된 후 실행 상태를 false로 변경합니다. 목록이 존재하고 스택도 존재하는 경우 작업 매개변수를 꺼내고 fire 함수를 호출하여 실행합니다. 메모리가 있으면 목록을 지우고 그렇지 않으면 콜백이 실행됩니다. 마지막으로 이 파일은 콜백을 반환합니다. 구체적인 구현을 살펴보겠습니다.

Callbacks = {
  add: function () {
    if (list) {
      var start = list.length,
        add = function (args) {
          $.each(args, funciton(_, arg) {
            if (typeof arg === 'function') {
              if (!options.unique || !Callbacks.has(arg)) list.push(arg);
            } else if (arg && arg.length && typeof arg !== 'string') add(arg);
          })
        }
      add(arguments)
      if (firing) firingLength = list.length;
      else if (memory) {
        firingStart = start;
        fire(memory)
      }
    }
    return this;
  }
}

이 함수의 주요 기능은 목록에 콜백을 푸시하는 것입니다. 먼저 목록이 존재하는지 확인하고, 목록이 있으면 start에 목록 길이를 할당하고, 내부 add 메서드는 주로 우리가 전달하는 매개변수인 경우 목록에 콜백을 추가합니다. 배열이 생성되면 add 메소드가 다시 호출됩니다. 그런 다음 add 메소드를 호출하고 인수를 전달하십시오. 콜백이 진행 중인 경우 콜백 작업의 길이인fireingLength는 이후에 추가되는 콜백 함수가 실행될 수 있도록 현재 작업 목록의 길이입니다. 메모리가 있으면 새로 추가된 목록의 첫 번째 위치로 시작을 설정한 다음 fire를 호출합니다.

fireWith가 어떻게 작동하는지 살펴보겠습니다.

fireWith: function(context, args) {
  if (list && (!fired || stack)) {
    args = args || [];
    args = [context, args.slice ? args.slice() : args];
    if (firing) stack.push(args);
    else fire(args);
  }
  return this;
}

전달된 매개변수에는 컨텍스트와 매개변수 목록이 포함됩니다. 함수 실행 조건은 리스트가 존재하고 콜백이 실행되지 않거나 스택이 존재하고 스택이 비어 있을 수 있다는 것입니다. 먼저 args를 재할당합니다. args[0]은 컨텍스트이고 args[1]은 복사된 목록입니다. 콜백이 진행 중이라면 스택에 args를 추가하거나 그냥 args를 실행하세요.

관련 기사:

Zepto 소스 코드의 Gesture 모듈 소개

Javascript의 콜백 메소드에 대한 간략한 분석

위 내용은 [Javascript] zepto 소스 코드 콜백 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!