Analyse de sens JS Profound: la conception de la boîte modale

奥义是平凡中所蕴含的不凡，能有效地用于指导实践

Définir

Tout d'abord, nous devons donner une définition à la boîte modale. Wikipedia (c'est le célèbre Wikipedia, et sa description sera citée à de nombreux endroits) l'appelle fenêtre modale ou boîte de dialogue modale. Je pense que la boîte de dialogue modale est plus sémantiquement claire et a plus de fonctionnalités. Sémantique, car les boîtes modales nécessitent généralement une interaction de l'utilisateur, tout comme le lancement d'une conversation. Wikipedia le décrit comme ceci:

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.

Nous pouvons donc le comprendre de cette façon: une boîte modale est une interaction ou une session qui doit d'abord être traitée par l'utilisateur. Le traitement prioritaire est interprété comme le blocage du thread en JavaScript et l'attente de la réponse de l'utilisateur (ici, vous devez faire une contradiction pour savoir qu'il devrait y avoir quelque chose qui ne va pas Boîte modale). Le but de la définition est de différencier ce que vous décrivez des autres, afin que nous puissions indiquer clairement qu'il s'agit d'une boîte modale plutôt que d'une orange ou d'un verre à eau. Ensuite, la réalisation du cadre modal doit respecter sa définition, ou la réaliser selon sa définition.

En fait, toutes les fonctions JavaScript sont définies et implémentées de cette manière, mais nous l'appelons un standard.Vous serez peut-être plus familier avec ECMA-262. Si vous ouvrez les yeux, vous constaterez que l'utilisation des définitions par les gens va bien au-delà de cela: le monde entier se creusent la cervelle pour en faire bon usage.

Le sens et l'application de la définition

Alors que nous nous débattions encore avec la définition ennuyeuse et ennuyeuse, quand nous étions encore dégoûtés, nous ne savions pas que tout le monde n'était pas qualifié pour définir la définition. Seuls les premiers pionniers et découvreurs sont vraiment qualifiés pour les traiter. La création et la découverte sont définies, et le nom est le même. Vous vous souvenez de la phrase qui a découvert qui l'a nommé? Donc, ce que vous avez appris au collège est la manière la plus dégoûtante de définir le texte explicatif. En fait, c'est la plus haute distinction en soi et n'appartient qu'aux personnes qui sont constamment pionnières. (Cette position devrait également tirer des inférences sur le texte explicatif et les méthodes de description couramment utilisées, car Ils peuvent être liés à la définition, il doit y avoir quelque chose de magique).

En tant que personne ordinaire, faire bon usage de la définition se manifeste dans votre vraie compréhension de quelque chose, car ce n'est que lorsque vous la comprenez vraiment que vous pouvez la définir correctement. En pensant autrement, si vous voulez savoir si vous comprenez vraiment quelque chose, le plus simple est de le définir. Pour un exemple simple, les tableaux JavaScript ont une méthode de réduction, que nous pouvons comprendre comme la signification de l'induction, car elle est très similaire à la première moitié de l'induction mathématique, vous pouvez donc savoir qu'elle utilise constamment chaque valeur du tableau pour dériver Donnez un résultat final, puis vous pouvez deviner quels paramètres il devrait avoir, ainsi que votre mémoire d'expérience, vous pouvez clairement savoir quels paramètres il a.C'est la méthode de mémoire associative.

La vraie méthode de mémoire associative doit être dérivée. Elle utilise une idée unifiée, car c'est l'idée pour laquelle l'ordinateur a été conçu à l'origine. Elle est binaire. Peu importe sa puissance actuelle, elle finira par Il peut être classé en 0 et 1. JavaScript suit également cette règle, il appartient à tout est un objet. En d'autres termes, tout le JavaScript peut être dérivé de tout est un objet. C'était à l'origine la première leçon, mais nous l'analyserons plus tard.

Pour le moment, nous devrons peut-être revoir comment nous continuons à dériver, comprendre et utiliser cette méthode en définissant réduire, donc je ne le répéterai pas ici.

De même, react-native a une nouvelle méthode ou un nouveau concept appelé réducteur, cette chose n'est pas facile à comprendre, et elle est différente de l'induction du tableau réduire, jusqu'à présent je ne peux pas en donner une définition particulièrement claire, et Cette définition peut refléter sa philosophie de conception. Vous pouvez utiliser les méthodes définies ci-dessous pour en savoir plus et vous encourager mutuellement.

Se référer à l'implémentation native de la boîte modale

Plus près de nous, bien que les documents de l'ECMA soient extrêmement difficiles et obscurs, c'est une méthode générale pour résoudre le problème. La caractéristique commune de la méthode générale est qu'elle est gratuite et indisciplinée, si simple que vous ne pensez pas qu'elle peut avoir une valeur énorme. Utilisez-le pour la conception abstraite, c'est la première étape de la conception abstraite - pour définir ce que vous voulez réaliser.

Nous pouvons donc comprendre que pour réaliser le traitement prioritaire de la boîte modale, JavaScript utilise une méthode d'implémentation de thread bloquant pour empêcher à 100% l'exécution du code jusqu'à ce que l'utilisateur réponde. Maintenant que JavaScript lui-même a fourni des boîtes modales, et que nous devons encore les repenser et les empaqueter, nous devons réfléchir à la raison pour laquelle nous avons fait cela. Le moyen le plus simple et le plus efficace de résoudre le pourquoi de cette alternative s'appelle l'analyse SWOT.

Alors ce qu'on appelle l'analyse SWOT, en utilisant ce que vous avez appris maintenant, ou en appliquant ce que vous avez appris, nous lui donnons une définition, qui consiste à peser le pour et le contre, et à prendre une décision en fonction des avantages et des inconvénients ou des inconvénients. Il doit y avoir une phrase plus ou moins agaçante dans votre mémoire: Veuillez analyser quels avantages vous avez? Quels sont les inconvénients? À ce moment-là, vous pouvez soudainement réaliser: Merde, n'est-ce pas ainsi que vous partagiez des cookies avec vos amis quand vous aviez trois ans? Oui, mais cela ne l'empêche pas de devenir la méthode d'analyse SWOT de Megatron, qui coïncide avec les caractéristiques communes des méthodes générales. De nombreuses décisions importantes sont prises de cette manière.

Alors, quel est le problème avec l'alerte et la confirmation implémentée par JavaScript? Le premier problème est qu'il bloquera les threads. Comme nous le savons tous, JavaScript est monothread et les ressources de thread sont très précieuses. Si vous êtes familier avec JavaScript, vous saurez que l'une des fonctionnalités les plus classiques de JavaScript est l'asynchronie. Bien sûr, l'asynchronie est également causée par ce thread unique. Une fois exécuté, il montre encore plus la préciosité de ce fil et ne signifie pas tolérer le moindre gaspillage. Bien sûr, à part cela, la laideur est la deuxième, et cela ne vaut pas la peine d'être mentionné en comparaison (toutes les implémentations internes sont implémentées par analyse SWOT). Vous pouvez vous référer à un exemple simple, exécuter certaines transactions (telles que le temps statistique) après 2 secondes de synchronisation, mais faire apparaître la fenêtre immédiatement après avoir défini la synchronisation:

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');

En fait, toutes les sorties de console de ce code seront reportées indéfiniment jusqu'à ce que l'utilisateur ait fini de traiter la fenêtre contextuelle. Bien sûr, ce code ne semble pas assez concis en surface, mais il contient en fait beaucoup de détails. À cette époque où les fonctions anonymes sont abusées, la portée au niveau du bloc est manquante et la sémantique est arbitraire, il y a beaucoup de détails qui méritent notre étude approfondie. Discutez plus tard. Y compris les problèmes de performances de setTimeout et les problèmes causés par JavaScript single thread ou peuvent être réduits à des problèmes JavaScript single thread.

Jusqu'à présent, nous pouvons voir qu'une exigence fondamentale est que JavaScript doit continuer à exécuter la transaction qu'il doit exécuter pendant que la fenêtre contextuelle est affichée. Cela peut entraîner de nombreuses discussions. Je pense que de nombreuses personnes ont rencontré la fenêtre contextuelle et ne peuvent pas cliquer en même temps. Bouton Retour, vous devez fermer la fenêtre pop-up pour revenir en arrière, donc de nombreux navigateurs modernes ont une case à cocher qui interdit à nouveau les pop-up. Sur certains navigateurs, tels que Safari (version 9.1.1), l'alerte apparaît en même temps. La console ne peut pas être utilisée.

La conception du cadre modal moderne

Après avoir amélioré ce type (les problèmes et l'amélioration continue sont en fait l'un des principaux moteurs de l'itération rapide d'Internet aujourd'hui), nous espérons qu'une boîte modale ressemble à ceci:

1. Beau (pas besoin de trop discuter à l'âge du visage)

2. Ne bloquez pas le fil, vous pouvez continuer à effectuer la tâche tout en faisant apparaître la fenêtre et courir pour voler

3. Cliquez sur le bouton retour pour revenir en arrière sans pression, pas besoin de fermer la fenêtre modale existante, particulièrement important dans les applications SPA

4. Les fenêtres pop-up ne peuvent pas se chevaucher (il n'y a qu'un seul ensemble de dom, qui ne se chevauche pas en fait, se réfère ici à la flexibilité de traitement lorsque plusieurs messages se chevauchent)

5. Besoin de mettre à jour le message affiché et les mesures de gestion sans fermer la fenêtre contextuelle

6. Il devrait y avoir un mécanisme de recyclage unifié

Contourner le blocage des threads peut nous donner plus d'espace pour jouer, mais rappelez-vous le dicton classique de Linux lors de la demande d'autorisations: plus la capacité est grande, plus la responsabilité est grande. Avoir la possibilité d'effectuer des tâches en même temps que la fenêtre contextuelle signifie que vous devez savoir clairement quel code doit être exécuté avant la fenêtre contextuelle, qui doit être exécutée après la fenêtre contextuelle, et qui doit continuer à être exécuté pendant la fenêtre contextuelle, et Planifiez leur structure.

Afin que les fenêtres contextuelles ne se chevauchent pas, une file d'attente doit être introduite ici. Toutes les fenêtres contextuelles et les opérations correspondantes sont exécutées en file d'attente. Cela explique également le mécanisme de récupération unifié, qui vous permet de vider la file d'attente à tout moment et de récupérer toutes les fenêtres contextuelles. Cela explique également que lorsqu'il y a plus d'une fenêtre contextuelle, nous pouvons directement mettre à jour le contenu et le fonctionnement sans scintillement ou attendre que l'utilisateur actionne la fenêtre contextuelle en séquence (la fenêtre contextuelle fait ici référence à l'alerte et à la confirmation). Après avoir lu ceci, vous pouvez soudainement réaliser qu'il s'agit d'un singleton, oui, mais en même temps, vous devez comprendre qu'il n'y a rien de spécial dans un singleton et qu'il ne peut pas remplacer votre conception et votre implémentation réelles, car vous devez vous souvenir, quoi qu'il arrive Comment le concevez-vous et l'implémentez-vous, à la fin vous ne postulez que pour une seule instance, et cela devient un singleton (bien sûr, vous devez être clair, n'ajoutez pas de nœuds dom à plusieurs reprises).

Ces détails de conception et de mise en œuvre ne sont rien de plus que la conception et la mise en œuvre de la boîte modale que nous avons définie. Bien sûr, c'est aussi la décomposition de la tâche. On voit souvent les dirigeants proposer des objectifs au travail ou en réunion, puis le responsable correspondant effectue la décomposition de la tâche. , A l'air et semble terne, mais c'est la manière la plus importante de bien faire les choses. Bien que notre processus de conception abstraite soit insignifiant par rapport aux objectifs de l'entreprise ou de l'entreprise, les principes et les méthodes pour faire les choses sont définis. En raison de la même vérité simple, vous devez avoir une bonne compréhension de cette question pour effectuer correctement la décomposition des tâches, et une compréhension claire est généralement la clé pour bien le faire, qu'il s'agisse de poursuivre un objectif énorme ou de faire une conception abstraite simple.

post-scriptum

Le programme est rationnel, mais la personne qui écrit le programme est perceptive, et le sens profond est intrinsèquement extraordinaire dans l'ordinaire, de sorte que cette série d'articles sera plus biaisée vers la théorie et la philosophie, et sera organisée avec des pensées universellement connectées. Limité à JavaScript, il n'est pas seulement applicable à la programmation, nous supposons donc que tous ceux qui lisent cette série d'articles ont une bonne base JavaScript ou ne se soucient pas du langage lui-même.