A small need











[JavaScript]

Plain text view
Copy the code

?
1
2
3
<div class=
"custom-modal"
@keydown.27=
"handlePressEscape"
>

.
</div>


[JavaScript]

Plain text view
Copy the code

?
1
2
3
4
5
.
handlePressEscape () {

console.log(
'press escape! '
);
},
.






The keyDown event, not tied to any tag, will work



A train of thought
























To find the source











[JavaScript]

Plain text view
Copy the code

?
1
2
3
4
5
6
.
closeOnPressEscape: {

type: Boolean,

default
:
true
},
.








[JavaScript]

Plain text view
Copy the code

?
1
2
3
4
import Popup from
'element-ui/src/utils/popup'
;
import Migrating from
'element-ui/src/mixins/migrating'
;
import emitter from
'element-ui/src/mixins/emitter'
;
.








[JavaScript]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
// handle `esc` key when the popup is shown
window.addEventListener(
'keydown'
.
function
(event) {

if
(event.keyCode === 27) {

const topPopup = getTopPopup();

if
(topPopup && topPopup.closeOnPressEscape) {

topPopup.handleClose

? topPopup.handleClose()

: (topPopup.handleAction

? topPopup.handleAction(
'cancel'
)

: topPopup.close());

}

}
});






Imitate the source


[JavaScript]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.
props: {

.

closeOnPressEscape: {

type: Boolean,

default
:
true

}
},
.
mounted () {

window.addEventListener(
'keydown'
.
this
.handlePressEscape);
},
destroyed () {

window.removeEventListener(
'keydown'
.
this
.handlePressEscape);
},
methods: {

.

handlePressEscape (event) {

if
(
this
.closeOnPressEscape && event.keyCode === 27) {

this
.handleClose();

}

}
}





  • In Mounted, after adding event listeners to window, remove them from destroyed.
  • On the business side, this is a generic popup layer component that we customized, so we defined a closeOnPressEscape property in props to enable it to be set to False in certain business scenarios where we don’t need to press ESC to exit the function.



Is the source code really that terrible?









For the fear of source code, let us gradually thinking solidified, tell yourself not to touch the source code, a long time to forget there is such a way to go.



Application in interview


Just now you mentioned that you have used the XXX framework for some time, and the XX API attribute, and you know what it achieves.


Now, if you need to achieve a similar effect without the XXX framework and XX API attributes,


How would you do that? Any other ideas?










Think a little






What have we learned from using these frameworks?



Without the framework and its API, what is left in mind?



So, when a new, better framework comes along, can we use what we’ve learned to help us get started faster?



Know what it is and why