奥义是平凡中所蕴含的不凡，能有效地用于指导实践Define
First of all, we need to give a definition to the modal box. Wikipedia (this is the famous Wikipedia, and its description will be quoted in many places) calls it modal window or modal dialog. I think modal dialog is more semantically clear and has more features. Semantic, because usually modal boxes require user interaction, just like initiating a conversation. Wikipedia describes it like this:
The modal window is a child window that requires users to interact with it before it can return to operating the parent application, thus preventing the workflow on the application main window.So we can understand it this way: a modal box is an interaction or session that needs to be processed by the user first. Priority processing is interpreted as blocking the thread in JavaScript and waiting for the user to respond (here you need to draw a contradiction to know that there should be other problems Modal box). The point of the definition is to distinguish the things you describe from others, so that we can make it clear that this is a modal box rather than an orange or a water glass. Then the realization of the modal frame must respect its definition, or realize it according to its definition.
In fact, all JavaScript functions are defined and implemented in this way, but we call it a standard. Perhaps you will be more familiar with ECMA-262. If you open your eyes, you will find that people's use of definitions goes far beyond that. The whole world is racking their brains to make good use of them.
The meaning and application of the definition
When we were still struggling with the boring and boring definition, when we were still disgusted, we did not realize that not everyone is qualified to define the definition. Only the first pioneers and discoverers are truly qualified to treat them. The creation and discovery are defined, and the naming is the same. Remember the sentence who discovered who named it? So what you learned in middle school is the most disgusting way to define the explanatory text. In fact, it is the highest honor in itself and only belongs to people who are constantly pioneering. (This position should also draw inferences about the explanatory text and the commonly used description methods, because They can be tied with the definition, there must be something magical).
As an ordinary person, making good use of the definition is manifested in your true understanding of a certain thing, because only when you truly understand it can you correctly define it. Thinking in another way, if you want to know whether you really understand something, the easiest way is to define it. For a simple example, JavaScript arrays have a reduce method, which we can understand as the meaning of induction, because it is very similar to the first half of mathematical induction, so you can know that it is constantly using each value of the array to derive Give a final result, and then you can guess what parameters it should have, plus your experience memory, you can clearly know what parameters it has. This is the associative memory method.
The real associative memory method must be derived. It uses a unified idea, because this is the idea that the computer was originally designed for. It is binary. No matter how powerful it is now, it will eventually It can be classified into 0 and 1. JavaScript also follows this rule, it belongs to everything is an object. In other words, the entire JavaScript can be derived from everything is an object. This was originally the first lesson, but we will analyze it later.
At this time, we may need to review how we continue to derive, understand, and use this method by defining reduce, so I won't repeat it here.
Similarly, react-native has a new method or concept called reducer, this thing is not easy to understand, and it is different from the induction of the array reduce, so far I cannot give a particularly clear definition of it, and This definition can reflect its design philosophy. You can use the methods defined below to learn more deeply and encourage each other.
Refer to native modal box implementation
Closer to home, although ECMA's documents are extremely difficult and obscure, it is a general method to solve the problem. The common feature of the general method is that it is free and undisciplined, so simple that you don't believe it can play a huge value. Use it for abstract design, this is the first step of abstract design-to define what you want to achieve.
So we can understand that in order to achieve priority processing of modal boxes, JavaScript uses a blocking thread implementation method to 100% prevent the code from continuing to execute until the user responds. Now that JavaScript itself has provided the modal box, and we still have to redesign and package it, we have to think about why we did it. The easiest and most effective way to solve the why of this alternative is called swot analysis.
So what is called swot analysis, using what you have learned now, or applying what you have learned, we give him a definition, which is to weigh the pros and cons, and make a decision based on the advantages and disadvantages or the disadvantages. There must be a more or less annoying phrase in your memory: Please analyze what advantages you have? What are the disadvantages? At this time, you may suddenly realize: Damn, isn't this the way you shared cookies with your friends when you were three years old? Yes, but this does not prevent it from becoming the swot analysis method of Megatron, which coincides with the common characteristics of general methods. Many important decisions are made in this way.
So what is wrong with the alert and confirm implemented by JavaScript? The first problem is that it will block threads. As we all know, JavaScript is single-threaded, and thread resources are very precious. If you are familiar with JavaScript, you will know that one of the most classic features of JavaScript is asynchrony. Of course, asynchrony is also caused by this single thread. Once executed, it shows the preciousness of this thread even more, and it doesn’t mean to tolerate any waste. Of course, other than that, ugliness is second, and it is not worth mentioning in comparison (all internal implementations are implemented by swot analysis). You can refer to a simple example, execute some transactions (such as statistical time) after 2s of timing, but pop up the window immediately after setting the timing:
var startTime = Date.now();
function calculateElapsedTime()
{/*{{{*/
var elapsedTime = (Date.now() - startTime)/1000;
console.log('elapsedTime:', elapsedTime);
}/*}}}*/
setTimeout(calculateElapsedTime, 0);
alert('click ok to continue');
console.log('you will say this right after you click ok');
In fact, all console output of this code will be postponed indefinitely until the user finishes processing the pop-up window. Of course, this code does not seem concise enough on the surface, but it actually contains a lot of details. In this era when anonymous functions are abused, block-level scope is missing, and semantics are arbitrary, there are many details worthy of our in-depth study. Discuss later. Including the performance problems of setTimeout, and the problems caused by JavaScript single thread or can be reduced to JavaScript single thread problems.
So far we can see that a basic demand is that JavaScript may need to continue to execute the transaction that it should execute while the pop-up window is displayed. This can lead to a lot of discussions. I believe that many people have encountered the pop-up window and cannot click at the same time. Back button, you have to close the pop-up window to go back, so many modern browsers have a check box that prohibits pop-up again. On some browsers, such as Safari (version 9.1.1), the alert pops up at the same time. The console cannot be used.
The design of modern modal frame
After improving this type (problems and continuous improvement are actually one of the core driving forces of the rapid iteration of the Internet today), we hope a modal box is like this:
-
Looks good-looking (no need to discuss too much in the face age)
-
Do not block the thread, you can continue to perform the task while popping up the window and run to fly
-
Click the back button to go back without pressure, no need to close the existing modal window, especially important in SPA applications
-
The pop-up windows cannot overlap (there is only one set of dom, which does not overlap in fact, here refers to the flexibility of processing when multiple messages overlap)
-
Need to update the displayed message and handling measures without closing the pop-up window
- There should be a unified recycling mechanism
Bypassing thread blocking can give us more room to play, but please remember the classic Linux saying when applying for permissions: the greater the ability, the greater the responsibility. Having the ability to perform tasks while popping up the window means that you have to clearly know which code should be executed before the pop-up window, which should be executed after the pop-up window, and which should continue to be executed during the pop-up window, and Plan their structure.
In order to make the pop-up windows do not overlap, a queue needs to be introduced here. All pop-up windows and corresponding operations are executed in a queue manner. This also explains the unified recovery mechanism, which allows you to empty the queue at any time and recover all the pop-up windows. , This also explains that when there is more than one pop-up window, we can directly update the content and operation without flickering or wait for the user to operate the pop-up window in sequence (the pop-up window here refers to alert and confirm). After reading this, you may suddenly realize that this is a singleton, yes, but at the same time you have to understand that there is nothing special about a singleton, and it cannot replace your real design and implementation, because you have to remember, no matter what How do you design and implement it? In the end, you only apply for one instance, and it becomes a singleton (of course, you have to be clear, don’t add dom nodes repeatedly).
These design and implementation details are nothing more than the design and implementation of the modal box we defined. Of course, it is also the decomposition of the task. We often see the leaders propose goals at work or at meetings, and then the corresponding responsible person does the task decomposition. , Looks and sounds dull, but this is the most important way to do things well. Although our abstract design process is insignificant compared to the goals of the company or enterprise, the principles and methods of doing things are figured out. Because of the same simple truth, you have to have a good understanding of this matter in order to do the task decomposition correctly, and a clear understanding is usually the key to doing this well, whether it is pursuing a huge goal or doing simple abstract design.
postscript
The program is rational, but the person who writes the program is perceptual, and the profound meaning is inherently extraordinary in the ordinary, so this series of articles will be more biased towards theory and philosophy, and are organized with universally connected thoughts. Limited to JavaScript, it is not only applicable to programming, so we assume that everyone who reads this series of articles has a good JavaScript foundation or does not care about the language itself.