Dans ce chapitre, je vais vous expliquer les techniques de liaison de données d'accesseur et de vérification incorrecte et souligner leurs forces et leurs faiblesses.
Une introduction à la liaison de données
La liaison de données est une technique générale qui joint les sources de données fournisseur et consommateur et les synchronise.
Il s'agit d'une définition générale, décrivant les éléments de base communs des techniques de liaison de données.
- Une syntaxe pour définir le fournisseur et le consommateur.
- Une syntaxe pour définir les modifications qui doivent déclencher la synchronisation.
- Une façon d'entendre parler de ces changements chez le fournisseur.
- Une fonction de synchronisation qui s'exécute lorsque ces modifications se produisent. A partir de maintenant, j'appellerai cette fonction hhandler () andler ().
Les étapes ci-dessus sont mises en œuvre de différentes manières en utilisant différentes techniques de liaison de données. Les sections suivantes couvriront deux de ces techniques, à savoir la vérification des erreurs et la méthode d'accès. Les deux ont leurs forces et leurs faiblesses, dont je parlerai brièvement après les avoir présentées.
Contrôle sale
La vérification sale est probablement la méthode de liaison de données la plus populaire. Son concept est simple et ne nécessite pas de fonctionnalités de langage complexes, ce qui en fait un bon candidat pour une utilisation héritée.
Syntaxe
La définition du fournisseur et du consommateur ne nécessite aucune syntaxe particulière, juste de simples objets Javascript.
fournisseur const = {message: 'Hello World'} consommateur const = document.createElement ('p')
La synchronisation est généralement déclenchée par des mutations de propriété dans le fournisseur. Les propriétés à observer pour les modifications doivent être explicitement mappées avec leur gestionnaire ().
observer (fournisseur, 'message', message => {consumer.innerHTML = message})
La fonction J'ai regardé() enregistrez simplement le devoir (fournisseur, propriété) -> gestionnaire pour une utilisation ultérieure.
function observer (fournisseur, prop, gestionnaire) {provider._handlers [prop] = handler}
Avec cela, nous avons une syntaxe pour définir le fournisseur et le consommateur, et un moyen d'enregistrer des fonctions gestionnaire () pour les changements de propriété. L'API publique de notre bibliothèque est prête, vient maintenant l'implémentation interne.
Entendre parler des changements
Le chèque sale est appelé sale pour une raison. Exécutez des vérifications périodiques au lieu d'écouter directement les modifications de propriété. Appelons cela un cycle de digestion à partir de maintenant. Une boucle récapitulative parcourt chaque entrée (fournisseur, propriété) -> gestionnaire ajouté à J'ai regardé() et vérifiez si la valeur de la propriété a changé depuis la dernière itération. S'il a changé, exécutez la fonction gestionnaire (). Une mise en œuvre simple serait vue ci-dessous.
function digest () {provider.forEach (digestProvider)} function digestProvider (provider) {for (let prop in provider._handlers) {if (provider._prevValues [prop]! == provider [prop]) {provider._prevValues [Prop] = gestionnaire de fournisseur [prop] (fournisseur [prop])}}}
La fonction digérer () il doit être exécuté de temps en temps pour garantir un état synchronisé.
La technique accessoire.
La technique d'accès est la tendance actuelle. Il est un peu moins largement pris en charge car il nécessite la fonctionnalité get / set d'ES5, mais cela compense élégamment.
Syntaxe
La définition du fournisseur nécessite une syntaxe spéciale. L'objet fournisseur plat doit être passé à la fonction observateur (), qui le transforme en un objet observable.
const provider = observer ({salutation: 'Bonjour', sujet: 'Monde'}) const consumer = document.createElement ('p')
Ce petit inconvénient est plus que compensé par la simple syntaxe de mappage gestionnaire (). Avec la vérification sale, nous devrons définir chaque propriété observée explicitement comme indiqué ci-dessous.
observer (fournisseur, 'salutation', salutation => {consumer.innerHTML = salutation + '' + fournisseur.subject}) observer (fournisseur, 'sujet', sujet => {consommateur.innerHTML = fournisseur.greeting + '' + sujet })
C'est détaillé et maladroit. La technique d'accès peut détecter automatiquement les propriétés du fournisseur utilisé dans la fonction gestionnaire (), ce qui nous permet de simplifier le code précédent.
observer (() => {consumer.innerHTML = provider.greeting + '' + provider.subject})
L'implémentation de J'ai regardé() c'est différent de la vérification sale. Exécutez simplement la fonction gestionnaire () passé et le marque comme étant actuellement actif pendant son exécution.
laissez la fonction activeHandler observer (gestionnaire) {activeHandler = gestionnaire de gestionnaire () activeHandler = undefined}
Notez que nous exploitons ici la nature à thread unique de JavaScript en utilisant la variable unique activeHandler garder une trace de fonction handler () en cours d’exécution.
Entendre parler des changements
C'est là que le nom de 'technique accessoire'. Le fournisseur est complété par getters / setters, ils font le gros du travail en arrière-plan. L'idée est d'intercepter les opérations de obtention / ajustement à partir des propriétés du fournisseur comme suit.
- obtenir: s'il y a une exécution activeHandler, enregistrer le devoir (fournisseur, propriété) -> activeHandler pour une utilisation ultérieure.
- ensemble: Exécuter toutes les fonctions gestionnaire (), qui sont affectés à la paire (fournir, propriété).
La technique de liaison de données d'accès.
Le code suivant montre une implémentation simple de ceci pour une propriété de fournisseur unique.
function observableProp (provider, prop) {const value = provider [prop] Object.defineProperty (provider, prop, {get () {if (activeHandler) {provider._handlers [prop] = activeHandler} return value}, set (newValue) {value = newValue const handler = obj._handlers [prop] if (handler) {activeHandler = handler handler () activeHandler = undefined}}})}
La fonction observable() mentionné dans la section précédente boucle à travers les propriétés du fournisseur et les rend observables avec la fonction ci-dessus observableProp ().
[/ php]
function observable (fournisseur) {
for (laissez prop dans le fournisseur) {
observableProp (fournisseur, accessoire)
if (typeof provider [prop] === 'object') {
observable (fournisseur [prop])
}
}
}
[/ php]
C'est une implémentation très simple, mais elle suffit pour une comparaison entre les deux techniques.
Comparaison des techniques.
Dans cette section, je décrirai brièvement les forces et les faiblesses de la technique de vérification et d'accès sales.
Syntaxe
La vérification sale ne nécessite pas de syntaxe pour définir le fournisseur et le consommateur, mais attribue la paire (fournisseur, propriété) gestionnaire () il est maladroit et peu flexible.
La technique d'accès nécessite que le fournisseur corresponde au rôle observable(), mais affectation automatique gestionnaire () compense cela. Pour les grands projets avec liaison de données, c'est une fonctionnalité indispensable.
Performance
Le chèque sale est connu pour ses performances médiocres. Vous devez vérifier chaque entrée (fournisseur, propriété) -> gestionnaire éventuellement plusieurs fois au cours de chaque cycle de résumé. En outre, vous devez broyer même lorsque l'application est inactive car elle ne peut pas dire quand les modifications de propriété se produisent.
La méthode d'accès est plus rapide, mais les performances peuvent être inutilement dégradées pour les grands objets observables. Le remplacement de chaque propriété de fournisseur par des accesseurs est généralement excessif. Une solution serait de construire l'arbre getter / setter dynamiquement si nécessaire, plutôt qu'initialement dans un lot. Alternativement, une solution plus simple consiste à envelopper les propriétés inutiles avec une fonction noObserve (), qui raconte observable() laissez cette partie intacte. Cela introduit malheureusement une syntaxe supplémentaire.
La flexibilité
La vérification sale fonctionne naturellement avec les propriétés expando (ajoutées dynamiquement) et les propriétés d'accès.
La technique d'accès a ici un point faible. Les propriétés Expando ne sont pas prises en charge car elles se situent en dehors de l'arborescence get / set initiale. Cela pose des problèmes avec les tableaux, par exemple, mais peut être résolu en exécutant manuellement observableProp () après avoir ajouté une nouvelle propriété. Les propriétés de fonction ne sont pas prises en charge depuis accesseurs ne peut pas être enveloppé par accesseurs de nouveau. Une solution courante pour cela consiste à utiliser une fonction calculé () au lieu d'une getter. Cela introduit une syntaxe encore plus personnalisée.
Alternatives temporelles
Le contrôle sale ne nous donne pas beaucoup de latitude ici, car nous n'avons aucun moyen de savoir quand les changements réels de propriété se produisent. Les fonctions gestionnaire () ne peut être exécuté que de manière asynchrone, en exécutant le cycle de digestion () de temps en temps.
Les déclencheurs / setters ajoutés à l'aide de la technique des accesseurs sont déclenchés de manière synchrone, nous avons donc la liberté de choix. Nous pouvons décider d'exécuter le fichier gestionnaire () immédiatement ou enregistrez-le dans un lot qui s'exécute de manière asynchrone ultérieurement. La première approche nous donne l'avantage de la prévisibilité, tandis que la seconde permet d'améliorer les performances en éliminant les doublons.
