Pour moi qui est un novice pur à l'avant, JavaScript est encore un peu clair à ce sujet. Si vous voulez commencer directement avec Angular JS, il y a vraiment beaucoup de résistance. Mais je crois que tant que vous travaillez dur, même le design anti-humain ne sera pas un gros problème.
D'accord, ne dites pas beaucoup de bêtises. Pour comprendre ce qu'est Angular JS, j'ai commencé avec la portée. Alors, quelle est la portée? Emprunt un passage au document officiel:
La copie de code est la suivante:
«La portée est un objet qui fait référence au modèle d'application. Il s'agit d'un contexte d'exécution pour les expressions. Les portées sont organisées en structure hiérarchique qui imitent la structure DOM de l'application. Les étendues peuvent regarder des expressions et propager des événements.»
Après l'avoir lu, je l'ai comparé à d'autres langages de programmation et j'ai estimé que la portée est comme la portée du modèle de données, fournissant un contexte pour l'exécution des expressions. Comprenons-le de cette façon pour le moment.
Caractéristiques de la portée
Ensuite, voyons les fonctionnalités de la portée?
Scope fournit la méthode de montre $ pour surveiller les modifications du modèle.
Scope fournit une méthode d'application $ pour propager les modifications du modèle.
La portée peut être héritée et isole différents composants d'application et les autorisations d'accès aux attributs.
La portée fournit un contexte pour le calcul des expressions.
Pour ces quatre fonctionnalités, parce que j'ai déjà appris ActionScript, C ++ et Java, il n'est pas difficile de comprendre les premier, troisième et quatrième points, mais le deuxième point semble un peu déroutant. Sur la base du principe de briser la casserole et de demander la fin, j'ai toujours trouvé certaines choses via Google. Pour les anciens combattants expérimentés, veuillez tapoter les briques!
Origine de JavaScript
Tout d'abord, à première vue, Scope.Apply () semble être une méthode ordinaire pour faire des liaisons à jour. Mais pensez un peu plus, pourquoi en avons-nous besoin? Quand l'utilisez-vous habituellement? Pour comprendre ces deux questions, nous devons commencer par JavaScript. Dans le code JavaScript, ils sont exécutés dans un certain ordre. Quand il s'agit du tour d'un extrait de code à exécuter, le navigateur ne fera que l'exécution actuelle et ne fera rien d'autre. Donc, parfois, certaines pages Web qui ne sont pas bien faites seront coincées lors de la cliquetis sur quelque chose. JavaScript travaille l'une des raisons pour lesquelles ce phénomène est causé! Ici, nous avons un morceau de code pour en faire l'expérience:
La copie de code est la suivante:
var bouton = document.getElementById ('clickme');
fonction boutonClicked () {
alert («Le bouton a été cliqué»);
}
Button.AdDeventListener ('click', boutonClicked);
fonction TimerComplete () {
alert («temporisation complète»);
}
setTimeOut (TimerComplete, 5000);
Lors du chargement du code JavaScript, trouvez d'abord un bouton avec un ID appelé "ClickMe", puis ajoutez un écouteur, puis définissez le délai d'attente. Attendez 5 secondes et une boîte de dialogue apparaîtra. Si vous actualisez la page et cliquez immédiatement sur le bouton Clickme, une boîte de dialogue apparaîtra. Si vous ne cliquez pas sur OK, la fonction TimeRery Acomplete n'aura jamais la possibilité de s'exécuter.
Comment mettre à jour les liaisons
D'accord, après avoir parlé de quelque chose qui semble hors de propos, revenons au sujet. Comment Angular JS sait-il lorsque les données changent et les pages doivent être mises à jour? Le code doit savoir quand les données ont été modifiées, mais maintenant il n'y a aucun moyen d'informer directement les données sur un objet qui a changé (bien que Ecmascript 5 essaie de résoudre ce problème, il est toujours à l'étape expérimentale). Actuellement, il existe deux solutions pour les stratégies les plus traditionnelles. L'une consiste à utiliser des objets spéciaux afin que toutes les données ne puissent être définies qu'en appelant la méthode de l'objet, plutôt que de les spécifier directement via la propriété. De cette façon, toutes les modifications peuvent être enregistrées et vous saurez quand la page doit être mise à jour. L'inconvénient de le faire est que nous devons hériter d'un objet spécial. Pour l'attribution, cela ne peut être fait que par object.set ('key', 'value') au lieu de object.key = valeur. Dans les frameworks, c'est ce que font Emberjs et KnockoutJ (bien que je ne l'ai pas touché auparavant). Une autre méthode est la méthode adoptée par Angular JS, qui vérifie s'il y a un changement de données après l'exécution de chaque séquence d'exécution de code JavaScript. Cela ne semble pas être efficace et affecte même sérieusement les performances. Cependant, Angular JS utilise des moyens intelligents pour résoudre ce problème (il n'a pas encore été étudié, et il n'est pas encore clair). L'avantage de le faire est que nous pouvons utiliser n'importe quel objet à volonté, il n'y a pas de limite sur la méthode d'affectation, et nous pouvons également être conscients des modifications de données.
Pour cette solution adoptée par Angular JS, nous nous soucions du moment où les données changent, et c'est là que Scope.Apply () est utile. En vérifiant si les données liées ont changé, elle est en fait effectuée par Scope.digest (), mais nous n'avons presque jamais appelé cette méthode directement, mais plutôt appelée la méthode Scope.Apply () car dans la méthode Scope.Apply (), il appellera la méthode Scope.digest (). La méthode scope.apply () prend une fonction ou une expression, puis l'exécute et appelle enfin la méthode scope.digest () pour mettre à jour les liaisons ou les observateurs.
Quand utiliser $ appliquer ()
La même question est, alors quand devons-nous appeler la méthode applique ()? Il y a très peu de cas. En fait, presque tout notre code est enveloppé dans Scope.Apply (), tel que NG-Click, l'initialisation du contrôleur, les fonctions de rappel HTTP, etc. Dans ces cas, nous n'avons pas besoin de nous appeler, et en fait nous ne pouvons pas nous appeler, sinon appeler la méthode applicable () dans la méthode applicable () lancera une erreur. Si nous devons exécuter le code dans une nouvelle séquence d'exécution, nous devons vraiment l'utiliser, et si et seulement si la nouvelle séquence d'exécution n'est pas créée par la méthode Angular JS Library, nous devons envelopper le code dans Scope.Apply (). Voici un exemple à expliquer:
La copie de code est la suivante:
<div ng: app ng-contrôleur = "ctrl"> {{message}} </div>
La copie de code est la suivante:
functionctrl ($ scope) {
$ scope.sessage = "Waiting 2000ms pour la mise à jour";
setTimeout (function () {
$ scope.message = "Timeout appelé!";
// angularjs ignorant la mise à jour vers $ scope
}, 2000);
}
Une fois le code ci-dessus exécuté, la page s'affiche: en attente de 2000 ms pour la mise à jour. De toute évidence, la mise à jour des données n'a pas été détectée par Angular JS.
Ensuite, nous modifions légèrement le code JavaScript et l'enroulons avec Scope.Apply ().
La copie de code est la suivante:
functionctrl ($ scope) {
$ scope.sessage = "Waiting 2000ms pour la mise à jour";
setTimeout (function () {
$ scope. $ appliquer (function () {
$ scope.message = "Timeout appelé!";
});
}, 2000);
}
La différence cette fois est que la page s'affiche d'abord: en attente de 2000 ms pour la mise à jour. Après avoir attendu 2 secondes, le contenu sera changé en: Timeout appelé! . De toute évidence, la mise à jour des données a été détectée par Angular JS.
Remarque: nous ne devons pas le faire, mais utilisez la méthode de temps mort fournie par Angular JS, afin qu'elle soit automatiquement enveloppée avec la méthode d'application.
La science est une épée à double tranchant
Enfin, jetons un coup d'œil aux méthodes Scope.Apply () et Scope.Apply (fonction)! Bien que Angular JS ait fait beaucoup pour nous, nous avons également perdu quelques opportunités. Vous pouvez voir dans le pseudocode suivant:
La copie de code est la suivante:
fonction $ applique (expr) {
essayer {
retour $ eval (expr);
} catch (e) {
$ exceptionhandler (e);
} enfin {
$ root. $ digest ();
}
}
Il attrapera toutes les exceptions et ne les jettera pas à nouveau, et appellera éventuellement la méthode $ digest ().
Résumons
La méthode $ applique () peut exécuter des expressions JS angulaires en dehors du cadre angulaire, tels que: Dom Events, Settimeout, XHR ou d'autres bibliothèques tierces. Ce n'est que le début, l'eau est encore profonde, bienvenue à Deep Dive ensemble!