Some useful tricks

This orange is not very sweet QAQ 2021-09-15 10:57:21

Sorted out some useful tips

take Vue Variable to hold the ( Export for other files ), At the same time, you can determine whether to register the plug-in repeatedly

export const Vue
export function install (_Vue) {
if (Vue && _Vue === Vue) {
if (__DEV__) {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
Vue = _Vue
applyMixin(Vue)
}
 Copy code 

reduce() Function usage scenarios

I knew before reduce() Usage of , But often theory and practice are divorced , In the reading Vuex In the process of source code , Found out reduce() The magic effect of ( Pretty good )

// Here's the interception vuex A small part of the source code
// vuex In order to ensure the reusability of global state , Created module Module collection and namespace concept of tree structure
/**
params:path (Array) path The array holds the path of the current module from parent to child key
return module (Object) Functions in accordance with the path Find the path to the last level in turn module modular
**/
get (path) {
return path.reduce((module, key) => {
return module.getChild(key)
}, this.root)
}
/**
params: path (Array) path The array holds the path of the current module from parent to child key
return namespaceKey (String) Functions in accordance with the path The paths are sequentially spliced into the command space key
**/
getNamespace (path) {
let module = this.root
return path.reduce((namespace, key) => {
module = module.getChild(key)
return namespace + (module.namespaced ? key + '/' : '')
}, '')
}
 Copy code 

Asynchronous function queue execution

During route switching, a series of navigation hooks will be executed , stay vue-router There is a detailed execution sequence on the official website ,runQueue() Used to maintain the execution of navigation hooks

/**
params: queue (Array) Navigation hook collection , Each navigation hook is similar to the incoming to,from,next Function of
params: fn (Function) Execute each navigation hook function
params: cb (Function) After the execution of the passed in navigation hook ,complete Callback
This method makes us execute asynchronous functions like synchronous execution , Only the current one navigationGuard Execution completed , call next(), To execute the next navigationGuard, We can decide to call next() The timing of
**/
export function runQueue (queue: Array<?NavigationGuard>, fn: Function, cb: Function) {
const step = index => {
if (index >= queue.length) {
cb()
} else {
if (queue[index]) {
fn(queue[index], () => {
step(index + 1)
})
} else {
step(index + 1)
}
}
}
step(0)
}
 Copy code 

Use closures , take fn Keep returns a... That provides a delete operation api Callback

Closure is not just a concept that stays in the interview process , It should be a good tool that appears in the code

function registerHook (list: Array<any>, fn: Function): Function {
list.push(fn)
return () => {
const i = list.indexOf(fn)
if (i > -1) list.splice(i, 1)
}
}
 Copy code 

Low code , Encapsulating utility functions - Traversing an object

export function forEachValue (obj, fn) {
Object.keys(obj).forEach(key => fn(obj[key], key))
}
forEachMutation (fn) {
if (this._rawModule.mutations) {
forEachValue(this._rawModule.mutations, fn)
}
}
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
 Copy code 

The above are also some tips to sort out in the process of reading the source code , Easy to read later ~~

Day by day

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15