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 - 콜백 함수 목록 지우기

전체 구조

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

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

특정 상태에 따라 다양한 인스턴스를 가져와야 하므로 저장할 객체가 필요하다고 판단할 수 있습니다. 상태

var callbackState = {}

'memory Once'를 Callback 함수에 전달했습니다. 이 두 상태를 어떻게 기록합니까? 여기서는 다음과 같이 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  
}

위 코드는 'memory Once'를 {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 및 메모리 상태 제어는 객체를 반환하는 메소드에서 구현됩니다. 내부 add 및 fire 메소드는 순전히 추가 및 트리거 기능입니다.

먼저 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에 메모리 상태 코드를 연결하면 다음 코드는 Fire 발생 시 메모리 상태에서의 연산입니다.

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

메모리 상태이고 콜백 목록이 비어 있는 경우 함수 실행 컨텍스트 및 매개변수 배열을 저장하고 추가 대기 시 즉시 실행됩니다.

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

요약

이상은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다.