Angular est bon dans le cadre MVVM, mais avec un cadre si grand et complet, il n'est pas faible à apprendre, et il faudra au moins une ou deux semaines pour commencer. knockoutjs se concentre sur la liaison des données et peut être utilisé en un ou deux jours, donc le coût d'apprentissage ne devrait pas être trop bas! À une époque où l'évolution frontale est si rapide, le coût d'apprentissage est également un facteur qui doit être pris en considération. Plusieurs fois, nos projets ne sont pas si compliqués et ils n'ont pas besoin d'un cadre universel. Ils ont besoin d'outils simples et faciles.
Avant les knockoutjs
Supposons que nous construisons un système de commande et devons afficher le prix unitaire du produit, puis nous pouvons calculer le prix total en fonction de la quantité d'entrée et l'afficher. Il est également facile à réaliser avec le code natif, l'effet est:
Le code est le suivant:
<! - HTML Code -> Price: <span id = "prix"> </ span> <br /> Compte: <input type = "text" id = "compte" value = "" placeholder = "s'il vous plaît entrez la quantité" /> <br /> sum: <span id = "sum"> </ span> // js codevode = document.getelementyid ('Price'), le comptenode = document.getElementById ('compte'), sumnode = document.getElementById ('sum'), prix = 100, compte = 11, somme = prix * compte; // initialize. priceNode.InnerText = Price; accountNode.Value = Account; SUMNODE.TextContent = SUM; // Monitor Entrée utilisateur de vue de la couche Comptenode.addeventListener ('Keydown', fonction (e) {Window.SetTimeout (fonction () {compte = sum;}, 10);});Eh bien, c'est assez simple! Oh, au fait, nous affichons 50 articles à la fois, et il existe 10 types d'écrans, ainsi que diverses promotions telles que l'achat de 5 boîtes d'Okamoto et l'obtention d'un bâton de pâte frite ...
Ainsi, vous connaissez le problème de la mise en œuvre native:
• Avec l'augmentation de l'interaction interne et des données, la quantité de code a augmenté rapidement et est difficile à maintenir
• Les noms basés sur les requêtes DOM, ID ou classe sont difficiles à gérer
• Couplage de code élevé, difficile à réutiliser
Introduction aux knockoutjs
Knockoutjs (ci-après dénommé KO) semblait résoudre les problèmes ci-dessus. Il s'agit d'une bibliothèque MVVM légère qui se concentre sur la mise en œuvre de la liaison des données et des vues. Il ne fournit pas de classes d'interface utilisateur et de fonctions de routage, et il est très rapide de commencer. Dans le même temps, depuis que KO est sortie depuis quelques années, il est devenu un cadre relativement mature. Lorsque vous faites des pages qui affichent plus dynamiquement, KO est sans aucun doute un meilleur choix. Je ne dirai pas grand-chose sur MVVM, juste une image à confondre:
KO est basé sur trois fonctionnalités de base (introduction au site officiel):
1. Observables et suivi de la dépendance: utilisez des observables pour configurer une chaîne de relations implicite entre les données du modèle pour la transformation des données et la liaison.
2. LES BESSUATIONS DÉCRARATIVES: Utilisez une syntaxe simple et facile à lire pour lier facilement les données du modèle aux éléments DOM.
3. Templage: moteur de modèle intégré, écrivez rapidement des présentations d'interface utilisateur complexes pour vos données de modèle.
L'utilisation de KO est très simple. Il suffit de le télécharger directement sur le site officiel (http://knockoutjs.com/index.html) et le présenter avec <Script>.
Objets observables
Réécrivez l'exemple ci-dessus en utilisant KO (prix personnalisé, qui était l'un de mes souhaits d'enfance):
Le code ressemble à ceci:
<! - Html Code -> <div id = "One"> Price: <input type = "text" data-bind = "value: prix" placeholder = "s'il vous plaît entrez le prix unitaire" /> <br /> Compte: <input type = "text" data-bind = "value: compte" lindeholder = "s'il vous plaît entrez le nombre" /> <br /> suv: <span data-bind = "Sum"> </ spane> <//js coodvarbind = " = fonction (p, a) {// Définir en tant qu'objet observable et initialiser ce.price = ko.observable (p); this.account = ko.observable (a); // lors de l'appel de la fonction KO, cela sera passé. this.sum = ko.pureComputed (function () {// Parce que l'objet observable est un objet de fonction, vous devez utiliser Price () pour lire la valeur actuelle. // Définir la valeur en utilisant le prix (newValue), et prend en charge l'écriture de la chaîne: this.price (12) .Account (3) RETOUR This.Price () * this.ccount ();}, this);}; var vm = newswel (135;}, this);}; 10); // appliquer cette liaison, et la liaison commence à prendre effet KO.ApplyBindings (VM);1) Regardons d'abord le code HTML:
Vous pouvez voir qu'une paire de valeurs de clé comme Data-Bind = "xx: OO" est ajoutée à chaque balise. Il s'agit de la syntaxe de liaison de KO. Que représente XXOO? (XXOO? L'auteur est toujours un enfant ...) D'après l'exemple, nous pouvons voir que les attributs de xx sont des balises, qui peuvent être des attributs de balises tels que le texte, la valeur, la classe, le vérification, etc., et en fait, ils peuvent également être cliquer, concentrer, charger et d'autres événements DOM. OO ressemble à une variable, mais ce n'est pas une variable, mais un objet de fonction. L'exécution de cette fonction (avec a ()) peut obtenir la valeur liée correspondante. Grâce à xxoo, les attributs ou les événements d'un élément peuvent être liés aux objets de fonction dans JS (si xxoo, vous devez être responsable les uns des autres), il s'agit de la liaison déclarative de KO. La définition de la liaison est en fait un mode observateur, mais il s'agit d'une liaison bidirectionnelle. L'éditeur et l'abonné souscrivent aux messages l'un de l'autre. Il s'agit de la liaison bidirectionnelle de MVVM. Le résultat de la liaison bidirectionnelle KO est qu'une partie peut mettre à jour automatiquement l'autre partie en changeant, c'est-à-dire que la couche de données et de présentation est étroitement liée ensemble via ViewModel. L'effet de liaison est similaire à:
2) Jetons un coup d'œil au code JS:
Vous pouvez voir qu'un objet ViewModel est défini dans JS, et le OO lié dans HTML est opéré dans l'objet. Il y a deux opérations principales ici: ko.observable () et ko.pureComputed ().
• ko.observable (p): voir le nom, il s'agit de la méthode de définition des objets observables. Le paramètre passé P est la valeur initialisée. Les paramètres ici peuvent être le type de données de base ou un objet JSON. Après avoir été défini comme observable, cela signifie que le système observera cette valeur tout le temps. Que le P dans le ViewModel ou le P dans les modifications de l'objet lié entraînera un événement de rafraîchissement, et tous les endroits qui utilisent cette valeur seront mis à jour vers le dernier état. De toute évidence, les objets observables sont relativement consommateurs de performances, donc pour les valeurs qui ne nécessitent pas de changements dynamiques (tels que les prix), ne définissent pas comme des objets observables. Bien sûr, il doit encore être mis dans ViewModel pour l'initialisation centralisée.
• Remarque: l'objet observable renvoyé par KO.Observable (P) est un objet de fonction, vous devez donc utiliser Price () pour lire l'objet observable; De même, la définition de l'objet observable nécessite un prix (newValue) pour utiliser le prix (newValue). Ce qui est plus prévenant, c'est que lors de la définition, il prend en charge l'écriture de la chaîne: ViewModel.Price (100) .Account (10).
• ko.pureComputed () est le suivi dit de dépendance. Voici le prix unitaire * La quantité équivaut au prix total. Notez que vous ne pouvez pas utiliser directement ce.sum = this.price () * this.account (); pour spécifier la somme. Cette méthode d'écriture ne peut pas rafraîchir dynamiquement l'objet lié, mais modifie dynamiquement la variable de somme, mais d'autres opérations sont nécessaires pour actualiser l'objet lié. Par conséquent, les valeurs de liaison liées aux calculs doivent être définies à l'aide de la fonction de calcul de KO. Bien sûr, l'objet de fonction retourné est également un objet de fonction. De plus, KO a également une fonction calculée, qui peut également être définie, mais il est recommandé d'utiliser Pure pour améliorer les performances.
• Faites attention à la méthode d'écriture ici: ko.pureComputed (fn, this), c'est-à-dire lier fn à la portée de la vue, qui est en fait l'appel / s'appliquer en js. Parce qu'il s'agit d'un objet KO lors de l'exécution de fonctions internes KO, afin d'obtenir la portée de l'objet ViewModel, cela doit être transmis dans la méthode d'écriture ci-dessus. Bien sûr, vous pouvez également l'utiliser pour enregistrer l'objet ViewModel en dehors de la fonction KO, puis l'utiliser à l'intérieur de la fonction KO pour appeler l'objet ViewModel. Comme ça:
var that = this; this.sum = ko.pureComputed (function () {return that.price () * that.account ();});Après avoir défini le constructeur ViewModel, un objet ViewModel est instancié, puis la méthode KO.ApplyBindings () est utilisée pour rendre la liaison à prendre effet. Ne manquez pas cette étape.
Mode de page simple en utilisant KO:
<! - Html Code -> <span data-bind = "text: bindText"> </span> // js codevar visuelModel = {bindText: ko.observable ('initValue')}; ko.applybindings (ViewModel);Pour résumer, il est: utilisez data-bind = "xx: oo" pour déclarer la liaison dans HTML, créer un ViewModel dans JS et définir un objet observable et enfin appliquer la liaison.
Tableau d'objets observable
Jetons un coup d'œil à l'utilisation des tableaux d'objets observables. Dans KO, les tableaux et les variables ne peuvent pas être mélangés comme JS. Pour les objets Array, vous devez utiliser KO.ObServableArray ([…,…]) de la même manière. De même, les éléments de tableau peuvent être de types de base ou d'objets JSON. Le tableau d'objets observable dans KO a une série de méthodes de fonctionnement du tableau, telles que Slice (), Sort (), Push (), etc. L'effet est le même que les méthodes de fonctionnement du tableau JS natives. La seule différence entre les modifications apportées par la méthode KO sera informée à l'abonné pour actualiser l'interface, mais la méthode JS ne rafraîchira pas l'interface. Voici un exemple simple:
<! - HTML Code -> <sélectionner Data-Bind = "Options: List"> </lect> // JS Codevar VM = {// List: KO.OBServablearray () List: KO.OBServableArray (["Luffy ',' Zoro ',' Sanji '])}; Ko.ApplyBindings (Vm);Point clé: KO surveille l'état du tableau, pas l'état de l'élément lui-même. C'est-à-dire que lorsque l'état du tableau change (ajoutant des éléments), l'événement KO sera déclenché pour provoquer une actualisation de l'objet lié, mais les modifications des éléments à l'intérieur du tableau (telles que les modifications de valeur) ne seront pas surveillées et ne peuvent pas déclencher l'événement KO. Par exemple:
L'utilisation de méthodes natives pour modifier dynamiquement Luffy en Lucy dans la console ne rafraîchira pas la page d'interface utilisateur, tandis que l'utilisation du tableau de KO pour modifier le tableau actualisera immédiatement la page. Il convient de noter que lorsqu'il est rafraîchissant, les modifications précédentes seront également rafraîchies (Luffy> Lucy). En d'autres termes, les variables de la mémoire JS ont réellement changé, mais il y a toujours un manque d'action pour actualiser le DOM. Comme vous pouvez le voir ici, la méthode de lecture d'un tableau est vm.List () [0], car la liste est également un objet de fonction, et l'exécution de la valeur de retour est le contenu de la liste que nous voulons. De même, vous pouvez réinitialiser le tableau d'objets observable via VM.List (["Girl", "Girl"]) et rafraîchir l'interface utilisateur immédiatement.
Si vous devez réagir dynamiquement les modifications des éléments du tableau à l'interface utilisateur, vous devez définir les éléments du tableau sur des objets observables, puis utiliser la méthode de KO pour modifier la valeur de l'élément de tableau. Notez qu'il s'agit d'utiliser la liste de méthodes de KO () [0] ("Lucy")!
Il existe deux types de méthodes de fonctionnement des tableaux d'objets observables. L'un est le même nom que la méthode du tableau JS natif: pop, push, shift, désastre, inverser, tri, épisser. Cette partie est la même que l'utilisation et les effets de la méthode JS native, donc je ne le répéterai plus.
Certaines autres méthodes ne sont pas disponibles en JS, principalement comme suit:
• Supprimez (Someitem) - Supprimez tous les éléments des éléments avec des valeurs égales à Someitem et renvoyez-les sous forme de tableau. Cela signifie ici que vous ne pouvez pas supprimer directement le premier élément list.remove (0) mais utilisez le formulaire list.remove (list () [0]) pour le supprimer. En bref, le paramètre passé doit être la valeur de l'élément d'élément. Il peut être utilisé sous la forme de List () [0], ou vous pouvez saisir directement la chaîne de valeur (comme "Luffy").
• supprimer (fonction (item) {return item.age <18;}) - supprimer tous les éléments des éléments avec des attributs d'âge inférieurs à 18 et les retourner sous forme de tableau. Cette utilisation n'est pas différente des fonctions d'ordre supérieur du tableau ordinaire. L'élément est passé en tant que paramètre d'une fonction d'ordre supérieur. Lors de l'itération du tableau, l'élément est supprimé lorsque la valeur de retour de la fonction d'ordre supérieur est la vraie valeur, sinon elle passera à l'élément suivant.
• RemoveAll (['tchad', 132, undefined]) - supprimez tous les éléments des éléments avec des valeurs égales à 'tchad' ou 123 ou non définies et renvoyez-les sous forme de tableau.
• RemoveALL () - Supprime tous les articles et revient sous forme de tableau.
Conseils: Lorsque vous traitez des objets observables, s'il y a de nombreux objets et des interactions fréquentes, rafraîchissant immédiatement avec chaque changement consommera les performances. À l'heure actuelle, vous pouvez utiliser l'extension myoBServableArray.Extend ({Ratelimit: 1000}) pour définir un rafraîchissement retardé. Par exemple, lorsque vous insérez en continu des éléments dans le réseau observable, vous pouvez définir un temps de cycle de 1000 ms pour concentrer toutes les opérations à moins de 1000 ms en actualisation pour éviter la détérioration des performances causée par des opérations DOM fréquentes.
Résumer
Cet article présente principalement le concept le plus important dans KnockoutJS: objets observables (tableaux). Un objet observable est essentiellement un objet de fonction. Lors de l'utilisation d'objets observables via la méthode KO, l'interface utilisateur peut être rafraîchie dynamiquement. Ceci est la méthode recommandée. Dans le même temps, vous pouvez également utiliser des objets observables via la méthode JS native, mais la méthode native ne rafraîchira pas l'affichage de l'interface utilisateur, et vous devrez attendre que le prochain événement de rafraîchissement pour être actualisé dans l'interface utilisateur.