current position:Home>Five common scenarios and solutions with too deep nesting at the front end
Five common scenarios and solutions with too deep nesting at the front end
2021-08-27 08:59:02 【Front end GOGO】
Code nested too deeply is not readable , Poor maintainability . Make people produce “ Awe ”. such as :
fetchData1(data1 =>
fetchData2(data2 =>
fetchData3(data3 =>
fetchData4(data4 =>
fetchData5(data5 =>
fetchData6(data6 =>
fetchData7(data7 =>
done(data1, data2, data3, dat4, data5, data6, data7)
)
)
)
)
)
)
)
Copy code
In this paper, 5 Scenarios and solutions that are too deeply nested .
scene 1: Back to hell
Use callback function to handle multiple serial asynchronous operations , It will cause deep nesting . Be commonly called “ Back to hell ”. Such as :
fetchData1(data1 =>
fetchData2(data2 =>
fetchData3(data3 =>
done(data1, data2, data3)
)
)
)
Copy code
Solution
programme 1: Promise
use Promise Serial can be asynchronous , Handle as a chained call . use Promise Rewrite the above code as follows :
let data1, data2, data3
fetchData1()
.then(data => {
data1 = data
return fetchData2()
})
.then(data => {
data2 = data
return fetchData3()
})
.then(data => {
data3 = data
done(data1, data2, data3)
})
Copy code
I feel much better after changing my mood ~
Be careful : above fetchData1
,fetchData2
,fetchData3
The return values of must all be Promise object . similar :
function fetchData1 () {
return new Promise(resolve) {
...
// I'm back
resolve(data)
}
}
Copy code
If these asynchronies can operate in parallel , It can be written like this :
Promise.all([
fetchData1(),
fetchData2(),
fetchData3()
]).then(([data1, data2, data3]) => {
done(data1, data2, data3)
})
Copy code
programme 2: async/await
async/await Than using Promise More elegant . use async/await Rewrite the above code as follows :
async function fetch() {
const data1 = await fetchData1()
const data2 = await fetchData2()
const data3 = await fetchData3()
done(data1, data2, data3)
}
Copy code
Be careful : above fetchData1
,fetchData2
,fetchData3
The return values of must also be Promise object . meanwhile , use await Function of , Must precede the function name with async.
scene 2: if nesting
In a conditional statement , If there are many judgment conditions , There will be The nesting is very deep Or judge the situation with long conditions . such as , Judge whether a value is : 1 To 100 Between , Can be 3 and 5 Even number of integral division . That's how it's written :
const isEvenNum = num => Number.isInteger(num) && num % 2 === 0
const isBetween = num => num > 1 && num < 100
const isDivisible = num => num % 3 === 0 && num % 5 === 0
if (isEvenNum(num)) { // It's even
if(isBetween(num)) { // 1 To 100 Between
if(isDivisible(num)) { // Can be 3 and 5 to be divisible by
return true
}
return false
}
return false
}
return false
Copy code
Solution
programme 1: Put the judgment condition results in the array
Put the judgment condition results in the array , Nested conditions can be judged , Change to the judgment of traversing the array value . The code implementation is as follows :
return [isEvenNum(num), isBetween(num), isDivisible(num)]
.every(flag => flag)
Copy code
programme 2: Use a third-party library Akua
Akua You can convert conditional nesting into chained calls . The code implementation is as follows :
const flag = false
new akua()
.inject(isEvenNum(num), 'isEvenNum', () => {
console.log(' It's even ')
})
.inject(isBetween(num), 'isEvenNum->isBetween', () => {
console.log('1 To 100 Between ')
})
.inject(isDivisible(num), 'isBetween->isDivisible', () => {
console.log(' Can be 3 and 5 to be divisible by ')
flag = true
})
.parse()
return flag
Copy code
scene 3: Function call nesting
Execute multiple function calls , The output of each function is the input of the next function , Will cause deep nesting . Such as :
toTable( // Step four : On the table
fry( // The third step : Scrambled eggs
handle( // The second step : Beating eggs
buy(20) // First step : Buy eggs
)
)
)
Copy code
The above code simulates the process of frying eggs : Buy eggs -> Beating eggs -> Scrambled eggs -> On the table .
Solution
programme 1: Write in multiple steps
Write in multiple steps , Receive the call result of the last function with a temporary variable . The implementation code is as follows :
let egg = buy(20)
egg = handle(egg)
egg = fry(egg)
egg = toTable(egg)
console.log(egg)
Copy code
programme 2: Encapsulate as a function
Recursively , Put the execution result of the previous function , Pass to the next function . The code is as follows :
pipe(20, [
buy,
handle,
fry,
toTable
]);
function pipe(prev, fnArr) {
if(fnArr.length > 0) {
const res = fnArr.shift()(prev)
return pipe(res, fnArr)
}
return prev
}
Copy code
scene 4: React High order component nesting
stay React Written applications , There will be a component that is used by many High order component (HOC) The parcel , Cause deep nesting . Such as :
class Comp extends React.Component {...}
Wrapper5(
Wrapper4(
Wrapper3(
Wrapper2(
Wrapper1(Comp)
)
)
)
)
Copy code
Solution
programme 1: Use class decorators
It is written as follows :
@Wrapper5
@Wrapper4
@Wrapper3
@Wrapper2
@Wrapper1
class Comp extends React.Component {...}
Copy code
Be careful : Some dependencies need to be installed in the project to use the decorator . If it is Webpack project , To install @babel/plugin-proposal-decorators. Specific view : stay React Use custom decorators in projects .
programme 2: Change high-level components to custom components Hook
Used in components Customize Hook It's a flat structure , No nesting . Change a class component into a function component , Change high-level components to custom components Hook Can solve the problem of nesting . It is written as follows :
function Comp () {
const tool1 = useWrapper1(...)
const tool2 = useWrapper2(...)
const tool3 = useWrapper3(...)
const tool4 = useWrapper4(...)
const tool5 = useWrapper5(...)
}
Copy code
This scheme makes great changes to the original code , Just for your reference .
scene 5: React Context nesting
stay React Written applications , It can be used Context To manage data sharing between subcomponents . If you share a lot of data , And different types , Easy to cause damage to the top assembly Context The nesting is very deep . Such as :
<PageContext.Provider
value={...}
>
<User.Provider value={...} > <Project.Provider value={...} > <ChildComp /> </Project.Provider> </User.Provider>
</PageContext.Provider>
Copy code
Solution
The above nesting can be solved by writing in multiple steps . Implementation code :
let content = <ChildComp />
content = (
<Project.Provider value={...} > {content} </Project.Provider>
)
content = (
<User.Provider value={...} > {content} </User.Provider>
)
content = (
<PageContext.Provider value={...} > {content} </PageContext.Provider>
)
Copy code
summary
Nesting leads to poor readability and maintainability of the code . To solve the nesting problem , It's essentially transforming nested code into flat code .
copyright notice
author[Front end GOGO],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827085857071x.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich