jquery.Callbacks의 상세한 구현

머리말

jQuery.Callbacks는 버전 1.7 이후 jquery에 추가되었습니다. 버전 1.6의 _Deferred 개체에서 추출되었으며 주로 함수 대기열 및 기타 항목을 추가, 제거, 실행 및 잠그는 데 사용됩니다. 작업을 수행하며 메모리, 고유 및 일부 특수 제어를 위한 stopOnFalse라는 네 가지 옵션을 제공합니다.

기능 소개

jq의 Callbacks 모듈은 주로 다른 모듈에 대한 서비스를 제공합니다. 마치 뒤에서 조용히 돈을 지불하는 온순한 작은 여자와 같습니다. Deferred는 거인과 같아서 jq에서 매우 유명하지만 내부적으로는 콜백의 서비스를 받습니다.

콜백의 여러 상태:

한 번 — 콜백 함수는 한 번만 실행됩니다.

고유 — 함수는 콜백 목록에 반복적으로 추가할 수 없습니다.

memory - Deferred에서 주로 사용되는 State 메모리

stopOnFalse - return false가 발생하면 콜백 목록을 종료하고 계속 실행

구현했습니다. self 콜백의 몇 가지 간단한 메소드

add — 해당 콜백 함수 목록에 함수 추가

fire — 콜백을 트리거하고 콜백 함수 목록이 함수를 순차적으로 실행합니다

has - 콜백 함수 목록에 들어오는 함수가 있는지 여부

clear - 콜백 함수 목록 지우기

전체 구조

먼저 원하는 콜백 모듈을 얻으려면 다음을 수행해야 합니다.

var cb = Callback('memory once') // 得到一个拥有记忆功能并只执行一次的回调模块

특정 항목을 기반으로 다른 인스턴스를 가져와야 하기 때문입니다. state, we 상태를 저장할 객체가 필요한 것은 확실합니다

var callbackState = {}

Callback 함수에 'memory Once'를 전달했습니다. 이 두 가지 상태를 기록해 볼까요? 자 여기서는 다음과 같이 jq로 작성된 함수로 구현됩니다.

var createCallbackState = function (options) {
 var states = options.split(' ')
 var obj = {}
 for (var i = 0; i < states.length; i++) {
  obj[states[i]] = true
 }
 return obj
 }

위 코드는 '메모리를 한 번' 바꿉니다. ' into { memory: true, Once: true} 상태 캐시 객체에 이 객체가 있으면 직접 반환합니다. 그렇지 않으면 먼저 생성된 후 반환됩니다.

다음은 콜백 함수 전체 코드입니다.

var Callback = function (options) {
 
 var state = callbackState[options] //获取状态模式
 if (!state) {
  callbackState[options] = state = createCallbackState(options)
 }
 var list = [], // 回调函数列表
  memory,  // 存储是否为 记忆状态
  has = function (fn) {
  for (var i = 0; i < list.length; i++) {
   if (list[i] === fn) {
   return true
   }
  }
  return false
  },
  add = function () {
  var i = 0,
   args = arguments,
   len = args.length
  for (; i < len; i++) {
   if (state.unique && has(args[i])) { // 如果是unique状态下并回调列表已经拥有该函数，则不添加
   continue
   }
   list.push(args[i])
  }
  },
  fire = function (context, args) {
  var i = 0,
   len = list.length,
   item
  for (; i < len; i++) {
   item = list[i]
   if (item.apply(context,args) === false && state.stopOnFalse) { //如果函数运行返回false，并且是stopOnFalse状态，终止循环
   break;
   }
  }
  }
 
 return {
  add: function () {
  add.apply(null,arguments)
  // 如果memory模式并且已经拥有了memory信息，接着出发函数
  if (state.memory && memory) {
   fire(memory[0], memory[1])
   list = []
  }
  },
  fire: function (context, args) {
  // 如果memory模式，并且list是空，代表触发在添加前，保存memory信息
  if (state.memory && !list.length) {
   memory = [context, args]
   return
  }
  fire(context,args)
  if (state.once) {
   this.clear()
  }
  },
  has: function (fn) {
  return has(fn)
  },
  clear: function () {
  list = []
  }
 }
 
 }

콜백 함수가 실행된 후, 객체가 반환됩니다. 그러면 객체에는 몇 가지 간단한 함수가 포함됩니다.

이 부분의 구현을 소개하겠습니다.

먼저 jq와 마찬가지로 내부 add, fire, has 메소드도 정의했는데, 주된 이유는 객체를 반환하는 메소드에 Once와 메모리 상태 제어가 구현되어 있기 때문입니다. 내부 추가 및 실행 방법은 순수한 추가 및 트리거 기능입니다.

먼저 cb.add 메소드를 살펴보겠습니다. add 메소드는 여러 함수를 받을 수 있으므로

add.apply(null,arguments)

은 내부 add를 사용합니다. 함수 추가

함수의 다음 부분은 콜백 모듈이 메모리 상태에 있는지 확인하는 것입니다. Deferred 모듈을 이해하는 학생들은 이 모듈이 Promise 모드에 있으며 성공의 콜백 함수를 구독하고 있다는 것을 알아야 합니다. 또는 실패 상태를 호출한 후 특정 순간에 트리거되면 이 모드는 메모리 상태의 콜백을 참조합니다. 이 모드에는 먼저 게시에 성공했지만 콜백 목록이 비어 있는 경우, 그러면 프로그램은 게시에 실패하지 않고 성공적인 콜백 함수를 기다립니다. 콜백 함수가 추가되면 즉시 실행됩니다.

은 다음 코드입니다

// 如果memory模式并且已经拥有了memory信息，立刻触发函数
 if (state.memory && memory) {
 fire(memory[0], memory[1])
 list = []
 }

팁: '먼저 게시에 성공했지만 콜백 목록이 비어 있는 경우 프로그램은 게시 실패는 아니지만 성공적인 콜백 함수가 추가될 때까지 기다립니다. 콜백 함수가 추가되면 즉시 실행됩니다.

var cb = Callback('memory') // 得到记忆功能的回调模块
 
cb.fire() // 触发回调队列
 
cb.add(fn) //添加回调函数，自动执行了！
 
function fn () {
 console.log('fn')
}

비메모리 상태인 경우 위 코드는 유효하지 않습니다. 실행하려면 다시 실행해야 합니다.

위의 내용을 보면 Fire 함수는 함수 컨텍스트와 함수 매개변수 배열이라는 두 가지 매개변수를 받을 수 있다는 점을 이해하기 쉽습니다.

은 add의 메모리 상태 코드와 연결됩니다. 다음 코드는 화재 발생 시 메모리 상태에서의 작업입니다. 메모리 상태인 경우 콜백 목록이 비어 있으면 함수 실행 컨텍스트와 매개변수 배열이 저장되어 추가 시 즉시 실행됩니다.

// 如果memory模式，并且list是空，代表触发在添加前，保存memory信息
  if (state.memory && !list.length) {
   memory = [context, args]
   return
  }

위에 덧붙여 코드는 매우 간단하고 이해하기 쉽습니다. 콜백 함수는 여기서 끝납니다. 유일하게 이해하기 어려운 것은 메모리 상태입니다.