Cet article explore les différences dans la mise en œuvre d'AngularJS et de contrôle traditionnel de contrôle JavaScript en mettant en œuvre deux exigences commerciales simples, et essaie de comprendre les idées de programmation de cadres comme MVW dans le développement du Web frontal populaire.
Cette exigence est très courante. Par exemple, un menu à deux niveaux, lorsque l'élément de menu de premier niveau est cliqué, l'élément sous-menu correspondant doit être affiché ou masqué.
Implémentation JQuery:
La copie de code est la suivante:
<! - HTML ->
<ul>
<li>
Article 1
<ul>
<li> Article Enfant 1 </li>
</ul>
</li>
</ul>
// javascript
$ ('li.parent_item'). cliquez sur (function () {
$ (this) .children ('ul.child'). toggle ();
})
Implémentation AngularJS:
La copie de code est la suivante:
<! - HTML ->
<ul>
<li ng-click = "hide_child =! hide_child">
Article 1
<ul ng-hide = "hide_child">
<li> Article Enfant 1 </li>
</ul>
</li>
</ul>
Le mode traditionnel d'exploitation DOM ne sera pas décrit en détail. L'implémentation d'AngularJS nécessite beaucoup de raffinement du code, seule la version HTML est suffisante. Le code ci-dessus utilise ces points de connaissance d'AngularJS:
1.directifs
2. Expressions
Ng-Click et Ng-Hide sont les deux directives (instructions) fournies avec le cadre. Le premier équivaut à fournir un gestionnaire d'événements à l'étiquette Li. Lorsque l'élément HTML (LI) est cliqué, l'expression hide_child =! Hide_child sera exécutée. Examinons d'abord la directive NG-Hide, qui contrôlera si l'élément HTML doit être affiché (implémenté via CSS) en fonction du résultat d'expression de l'affectation (valeur boléenne). C'est-à-dire que si la variable Hide_child est vraie, alors UL sera cachée, sinon le résultat sera le contraire.
Ici hide_child est en fait une variable sur $ scope. Les modifications de sa valeur peuvent également être implémentées à l'aide du contrôleur de contrôleur pour envelopper une méthode, mais l'instruction actuelle est relativement simple et est directement écrite dans l'affectation d'instructions.
Grâce à l'analyse de code simple ci-dessus, nous pouvons voir deux caractéristiques plus évidentes d'AngularJS:
1. Les opérations DOM sont bloquées par des instructions et des expressions, et le code JavaScript supplémentaire est enregistré en utilisant simplement le code simple.
2. L'application des directives et des expressions n'est directement imbriquée en HTML, ce qui est quelque peu contraire au style de code de JavaScript discret que jQuery pousse.
Examinons d'abord une autre exigence, puis expliquons en détail la conclusion ci-dessus.
Exigence 2: En cliquant sur le div, déclenchant la sélection d'un bouton radio dans le formulaire
L'élément de formulaire HTML traditionnel n'est pas très convivial pour fonctionner sur les appareils mobiles d'aujourd'hui. Par exemple, la boîte radio à bouton radio nécessite un positionnement précis sur l'écran tactile pour contrôler ce composant, mais la position manuelle désignée est très rugueuse. Une pratique courante consiste à ajouter un contrôle d'étiquette correspondant, mais le rapport occupant à l'écran du texte lui-même n'est pas idéal, et il n'a pas d'effet de communication d'informations clair. Par conséquent, une étiquette Div ou Li avec une zone plus grande est généralement opérée indirectement.
Implémentation JQuery:
La copie de code est la suivante:
<! - HTML ->
<ul>
<li>
<entrée type = "radio"
id = "option1" />
<étiquette pour = "option1"> Option 1 </bable>
</li>
</ul>
// javascript
$ ('li.selection'). Cliquez sur (fonction () {
$ (this) .children ('input [type = "radio"]'). cliquez sur ();
})
Implémentation AngularJS:
La copie de code est la suivante:
<! - HTML ->
<ul>
<li ng-repeat = "Option in Options"
ng-Click = "modèle.option = option.value"
ng-class = "{active: modèle.option == option.value}">
<entrée type = "radio"
ng-model = "modèle.option"
value = "{{option.value}}"
id = "option1" />
<étiquette pour = "option1"> Option 1 </bable>
</li>
</ul>
Dans cette solution, nous n'avons pas non plus impliqué de code JavaScript supplémentaire et utilisé plusieurs instructions supplémentaires. À titre de comparaison et de référence, nous ne nous soucions que des expressions des deux instructions NG-CLICK et NG-Model.
Examinons d'abord la directive NG-Model de l'élément d'entrée. L'attribution ici signifie que nous assocons l'entrée sur le modèle avec l'attribut d'option de l'objet $ scope.model. Pour une compréhension plus approfondie de la liaison des données, vous pouvez vous référer à la liaison des données. Cette association spécifiée fait que le contrôle du modèle se lie directement au modèle de données, et cette liaison est bidirectionnelle. Cela signifie qu'une fois que l'utilisateur modifie la valeur dans le contrôle (vérification de la radio), l'objet modèle correspondant sera réaffecté (modèle.option); Dans le même temps, si la valeur de l'objet modèle change, le contrôle d'entrée dans le modèle reflétera également les modifications en conséquence. Et cela n'est en fait pas réalisé dans la mise en œuvre susmentionnée de jQuery.
Par conséquent, via la liaison des données AngularJS, cliquer sur l'élément Li pour compléter indirectement le processus de déclenchement de l'entrée est le suivant:
1. Cliquez sur la balise Li pour attribuer une valeur à Model.option;
2. Modifier l'objet modèle et localiser le contrôle d'entrée correspondant (la valeur de la valeur est modèle.option);
3. Activez la propriété vérifiée du contrôle d'entrée
À travers les deux cas ci-dessus, nous avons une nouvelle compréhension du fonctionnement du Web frontal.
Tout d'abord, en termes de mise en œuvre technique, en introduisant de nouveaux concepts tels que les instructions, les expressions, la liaison des données, etc., nous pouvons faire fonctionner DOM d'une manière complètement nouvelle, plutôt que la simple implémentation du code JavaScript qui est interopérable avec les utilisateurs et les composants HTML. Ce genre de changement dans la pensée est énorme.
Depuis le début de ce siècle, la montée en puissance de la programmation Web dynamique, la technologie de programmation côté serveur s'améliore. Dès le début, CGI / PHP / ASP a produit .NET contre Java à partir de la langue et de la plate-forme. L'efficacité de développement et les processus logiciels ont favorisé MVC Framework / ORM / AOP, etc., et les performances et les mégadonnées ont apporté NodeJS / Nosql / Hadoop, etc., tandis que les exigences techniques de la frontale du navigateur ne semblaient pas si radicales. D'une part, à travers le côté serveur et la base de données, la plupart des besoins commerciaux du modèle B / S peuvent être satisfaits; D'un autre côté, le navigateur lui-même a des différences entre les différentes plates-formes, l'incompatibilité avec les normes de langage de script et de technologie de rendu, ainsi que le manque de puissance de calcul et les considérations de sécurité.
Dans ce cas, la plupart du temps, le navigateur n'a besoin que d'envisager de rendre des pages et une interaction simple utilisateur. HTML / DOM Plus Javasript / CSS accomplit ainsi le travail principal de la frontale. Donc, il n'y avait pas de travailleurs frontaux dans le passé, seuls des concepteurs de sites Web étaient nécessaires. Progressivement, les exigences en matière de frontale ont augmenté et JQuery est devenue la bibliothèque de packages la plus utilisée pour JavaScript Operating Dom. À ce stade, la tâche principale de JQuery / JavaScript n'est toujours qu'un outil pour présenter et interagir avec le terminal du navigateur de l'utilisateur.
Après avoir compris l'origine de JQuery, il n'est pas difficile de constater que certaines des règles poursuivies dans le passé, telles que JavaScript discrète, étaient limitées aux moyens et méthodes de mise en œuvre à l'époque. Afin de séparer la logique de code DOM et JavaScript, nous avons préféré la méthode avec une maintenance plus élevée. Après que la demande frontale de JavaScript ait augmenté, de nombreux cadres frontaux de MVC / MVP ont émergé, ainsi que le soi-disant MVW (modèle-visualise-whathever) des AngularJS, et l'approche unique de JavaScript et DOM ont changé. À l'origine, nous avons considéré le fonctionnement direct de l'affichage de l'interface et de l'interaction utilisateur, mais nous avons maintenant la liaison des données du client, les instructions riches et l'injection de dépendance. Ce qui nous attend sera un tout nouveau modèle de programmation et une façon de penser.