Qu'est-ce que knockout.js?
Knockout est une excellente bibliothèque JavaScript qui vous aide à créer un texte riche en interface utilisateur avec de bonnes fonctions d'affichage et d'édition en utilisant juste un modèle de données sous-jacent propre et bien rangé. À tout moment, votre contenu d'interface utilisateur local doit être automatiquement mis à jour (par exemple, en fonction des modifications du comportement des utilisateurs ou des modifications des sources de données externes), KO peut être facilement implémenté pour vous et est très facile à entretenir.
1. Diagramme de la relation de catégorie principale
Ii Responsabilités de classe
2.1. Observable (classe d'objets de surveillance normale)
La mise en œuvre interne de l'observable (l'autre est une fonction):
1. Déclarer d'abord un FN nommé observable (cela peut être considéré comme une classe)
2. Ajoutez une propriété KO DertierValue unique pour stocker la valeur transmise par le paramètre
3. Si l'attribut __proto__ natif est pris en charge, utilisez HasownProperty pour déterminer si l'attribut existe à l'héritage et jugez le code __proto__ (dans la classe Utils)
var canetSetPrototype = ({__proto__: []} instance de tableau);
4. La méthode init de l'attribut FN de KO.SubscribeBable initialise l'observable (ajoute principalement l'abonnement et publie des attributs connexes)
5. Observable hérite alors des attributs et des méthodes liés à l'observable (ObservableFN contient les stratégies d'exécution avant la variation de la valeur et après les changements de valeur)
// Définir le prototype pour observablesvar observablefn = {'equalityComparer': valeursaReprimitiveAnd, peek: function () {return this [observablelatestvalue]; }, valuehasmutated: function () {this ['notifySubscribers'] (this [observableLateStValue]); }, valuewillmutate: function () {this ['notifySubscribers'] (this [observableLatestValue], 'beforechange'); }};6. Renvoie la mise en œuvre de la méthode observable (si les paramètres entrants sont définis, et s'il n'y a pas de paramètre, il obtient)
7. Cette classe fournit également Hasprotype (pour déterminer si l'instance spécifiée a cette propriété), ISOBServable (pour déterminer si l'instance spécifiée est un objet de surveillance), ISWRIBLEABLE OBSERVABLE (pour déterminer s'il s'agit d'un objet de surveillance écrite).
2.2. ObservableArray (classe de surveillance des objets)
1. Exécutez d'abord la méthode KO.Observable pour faire de son objet une classe surveillable (résultat nommé);
2. Ensuite, développez l'objet FN dans KO.ObservableArray (KO.ObservableArray réécrit les méthodes de fonctionnement liées au tableau, telles que Supprimer, push, etc.)
3. Étendre une méthode à travers les étendues (trackArrayChanages, voir 2.5 pour plus de détails)
4. Renvoie l'objet de résultat étendu.
ko.oBServableArray = fonction (initialValues) {initialValues = initialValues || []; if (typeof initialValues! = 'Object' ||! ('Longueur' dans initialValues)) lancer une nouvelle erreur ("L'argument passé lors de l'initialisation d'un tableau observable doit être un tableau, ou null, ou non défini."); var result = ko.observable (initialValues); ko.utils.setprotypeoforextend (résultat, ko.observababs result.Extend ({'trackArayChanges': true});};2.3. Abonnez-vous (abonnez la classe d'objets)
1. Les modules fonctionnels pour l'abonnement et la publication sont des classes de base essentielles pour observable et observableArray.
2. Il existe une méthode subscrit ici, qui est utilisée pour s'abonner à la surveillance des modifications d'objets. Pour le développement, vous pouvez utiliser ce point d'héritage pour entrer.
abonnez-vous: fonction (rappel, callbackTarget, événement) {var self = this; event = event || defaultEvent; var boundcallback = callbacktarget? callback.bind (callbackTarget): callback; var abonnement = new ko.subscription (self, boundcallback, function () {ko.utils.arrayremoveitem (self._subscriptions [événement], abonnement); if (self.aftersubscriptionRemove) self.aftenscriptionRemove (event);}); (self.beforeSubscriptionAdd) self.BeForesuScriptionAdd (événement); if (! self._subscriptions [event]) self._subscriptions [event] = []; self._subscriptions [event] .push (abonnement); return abonnement;};3.Extend: cette méthode est utilisée pour ajouter la classe d'extension ajoutée par la méthode des allonges (comme la classe d'extension observableArray.changetracking)
4. La méthode de l'extension de l'extension sera exécutée immédiatement après l'enregistrement de l'objet de surveillance. Les paramètres passés sont cibles (objet actuel) et les options (paramètres passés lorsque l'extension est appelée)
5.Extend est la méthode pour installer l'extension et il exécutera immédiatement le code dans l'extension.
2.4. s'étend (classe d'objets de surveillance étendue)
1. Collection d'extension par défaut de KO
2. Fournissez une méthode d'application pour installer l'extension
Fonction ApplyExtenders (DequedeDextenders) {var Target = this; if (requestEdExtenders) {ko.utils.objectForEach (requededextenders, function (key, valeur) {var extenderHandler = ko.Extenders [key]; if (typeof extenderHandler == 'function') {cible = extenderhandler (cible, valeur) || Target;}});2.5. ObservableArray.changetracking (une implémentation spécifique de l'objet de surveillance étendu)
1. Cette extension met principalement en œuvre la surveillance des modifications du tableau, puis calcule les différences dans le tableau et déclenche des événements d'abonnement liés
2.CachediffforknownOpration: Opérations de cache sur les tableaux pour la comparaison des différences
3. BeforeSubscriptionAdd et AfterSubscriptionRemove Abonnements liés (pas encore entièrement compris).
Ce qui précède est une analyse approfondie de l'analyse de code source à élimination directe qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!