nextTick的使用背景

• 在vue項目中，經常會使用到nextTick這個api，一直在猜想其是怎么實現的，今天有幸研讀了下，雖然源碼又些許問題，但仍值得借鑒

核心源碼解析

判斷當前環境使用最合適的API并保存函數

promise

• 判斷是否支持promise，如果支持就使用Promise對象的then方法包裹要執行的 flushCallbacks函數

MutationObserver

• 判斷是否支持MutationObserver，如果支持就創建一個MutationObserver 用于監聽dom改動之后執行 flushCallbacks 函數 并賦值給 observer

setImmediate

• 判斷是否支持setImmediate，如果支持就使用setImmediate包裹 flushCallbacks函數

setTimeout

• 如果以上三種都不支持使用setTimeout包裹 flushCallbacks函數

export let isUsingMicroTask = false//是否使用微任務標志const callbacks = []//任務對列 調用nextTick時傳入的回調函數組成的數組
let pending = false//初始化 是否在進行中狀態  默認是false  function flushCallbacks() {//循環執行 callbacks  任務隊列中的任務pending = falseconst copies = callbacks.slice(0)//callbacks.length = 0for (let i = 0; i < copies.length; i++) {// 依次執行callbacks數組中的函數copies[i]()}
}let timerFuncif (typeof Promise !== 'undefined' && isNative(Promise)) {// 向下兼容操作 如果支持Promise 則使用Promiseconst p = Promise.resolve()//直接返回一個resolved狀態的Promise對象timerFunc = () => {p.then(flushCallbacks)// 在Promise的then方法中執行 flushCallbacks 函數if (isIOS) setTimeout(noop)//ios中在一些異常的webview中，promise結束后任務隊列并沒有刷新，所以強制執行setTimeout(noop)來刷新任務隊列}isUsingMicroTask = true//重置使用微任務標示為true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// MutationObserver 屬性支持，則使用MutationObserver let counter = 1const observer = new MutationObserver(flushCallbacks)// 創建一個MutationObserver 用于監聽dom改動之后執行 flushCallbacks 函數 并賦值給 observerconst textNode = document.createTextNode(String(counter))// 創建一個文本節點observer.observe(textNode, {characterData: true})// 每次執行timeFunc都會讓文本節點的內容在0/1之間切換timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}// 切換之后將新值賦值到那個我們MutationObserver觀測的文本節點上去isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// setImmediate 屬性支持，則使用setImmediatetimerFunc = () => {setImmediate(flushCallbacks)}
} else {
// 以上都不支持，則使用 setTimeouttimerFunc = () => {setTimeout(flushCallbacks, 0)}
}

調用異步函數執行回調對列

入參分析

nextTick(cb?: Function, ctx?: Object) {}

• cb是 傳入的回調函數
• ctx是函數執行的上下文
• 而者都又是可選參數， 但是有問題 下文有解析

函數執行邏輯

• 將調用nextTick是傳入的執行函數添加到 callbacks中
• 可使用call和傳入的ctx修改傳入的執行函數的this指向

export function nextTick(cb?: Function, ctx?: Object) {// cb 是 nextTick 包裹的執行函數// ctx 是函數執行的上下文 // console.log("nextTick000",cb,ctx)let _resolve//偽代碼// 向 callbacks 數組中添加一個函數callbacks.push(() => {if (cb) {try {cb.call(ctx)//修改回調函數的this指向 } catch (e) {//  異常捕獲 如果cb不是函數 拋出異常handleError(e, ctx, 'nextTick')}}  })// console.log("pendingcallbacks",callbacks,pending)if (!pending) {// console.log("pendingcallback0999",callbacks,pending)pending = truetimerFunc()}
}

• 這個代碼有刪減，因為其余代碼不會執行是 偽代碼 下文有解析

偽代碼分析

• nexttick的參數中cb不能為可選參數，如果cb參數不傳將沒有回調函數，nextTick將沒有意義，并且ctx將成為第一個參數，由于是形參，ctx將頂替cb但是ctx不是函數類型，就會拋錯

依次執行nextTick

• 循環執行 callbacks 任務隊列中的任務

function flushCallbacks() {//循環執行 callbacks  任務隊列中的任務pending = falseconst copies = callbacks.slice(0)//callbacks.length = 0for (let i = 0; i < copies.length; i++) {// 依次執行callbacks數組中的函數copies[i]()}
}

源碼

/* @flow */
/* globals MutationObserver */import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'
// isIE 判段運行環境是否在ie瀏覽器
// isIOS 判斷是否是ios
//isNative  判斷函數是否是由JavaScript引擎原生實現的
export let isUsingMicroTask = false//是否使用微任務標志const callbacks = []//任務對列 調用nextTick時傳入的回調函數組成的數組
let pending = false//初始化 是否在進行中狀態  默認是false  function flushCallbacks() {//循環執行 callbacks  任務隊列中的任務pending = falseconst copies = callbacks.slice(0)//callbacks.length = 0for (let i = 0; i < copies.length; i++) {// 依次執行callbacks數組中的函數copies[i]()}
}let timerFuncif (typeof Promise !== 'undefined' && isNative(Promise)) {// 向下兼容操作 如果支持Promise 則使用Promiseconst p = Promise.resolve()//直接返回一個resolved狀態的Promise對象timerFunc = () => {p.then(flushCallbacks)// 在Promise的then方法中執行 flushCallbacks 函數if (isIOS) setTimeout(noop)//ios中在一些異常的webview中，promise結束后任務隊列并沒有刷新，所以強制執行setTimeout(noop)來刷新任務隊列}isUsingMicroTask = true//重置使用微任務標示為true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// MutationObserver 屬性支持，則使用MutationObserver let counter = 1const observer = new MutationObserver(flushCallbacks)// 創建一個MutationObserver 用于監聽dom改動之后執行 flushCallbacks 函數 并賦值給 observerconst textNode = document.createTextNode(String(counter))// 創建一個文本節點observer.observe(textNode, {characterData: true})// 每次執行timeFunc都會讓文本節點的內容在0/1之間切換timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}// 切換之后將新值賦值到那個我們MutationObserver觀測的文本節點上去isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// setImmediate 屬性支持，則使用setImmediatetimerFunc = () => {setImmediate(flushCallbacks)}
} else {
// 以上都不支持，則使用 setTimeouttimerFunc = () => {setTimeout(flushCallbacks, 0)}
}export function nextTick(cb?: Function, ctx?: Object) {// cb 是 nextTick 包裹的執行函數// ctx 是函數執行的上下文 // console.log("nextTick000",cb,ctx)let _resolve//偽代碼// 向 callbacks 數組中添加一個函數callbacks.push(() => {if (cb) {try {cb.call(ctx)//修改回調函數的this指向 } catch (e) {//  異常捕獲 如果cb不是函數 拋出異常handleError(e, ctx, 'nextTick')}} else if (_resolve) {// 偽代碼console.log('ctx')_resolve(ctx)}})// console.log("pendingcallbacks",callbacks,pending)if (!pending) {// console.log("pendingcallback0999",callbacks,pending)pending = truetimerFunc()}// $flow-disable-lineif (!cb && typeof Promise !== 'undefined') {//判斷瀏覽器是否支持 Promise// cb 沒有則拋出異常了不會走到這里// 偽代碼return new Promise(resolve => {_resolve = resolve})}
}

個人困惑

• 本人實在是不太理解下列代碼的意義是什么，感覺是沒用的，但是不太確定，以下是個人分析

分析

• 首先將執行上下文this拋出是沒什么意義的
• 其次promise的resolve 單獨拿出來在此處有什么作用呢

 let _resolve//偽代碼if (!cb && typeof Promise !== 'undefined') {//判斷瀏覽器是否支持 Promise// cb 沒有則拋出異常了不會走到這里// 偽代碼return new Promise(resolve => {_resolve = resolve})}_resolve(ctx)

致謝

• 感謝您百忙之中抽時間閱讀我寫的博客，謝謝你的肯定，也希望對您能有所幫助
• 如果您有更好的見解請在評論區留言或者私聊我，期待與您的交流