Implémentation du framework MVVM en js (tutoriel détaillé)

Ci-dessous, je vais partager avec vous un exemple de framework MVVM simple implémenté en js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

J'avais l'habitude de lire les articles dans le jardin en silence et de les aimer de manière obscène. Aujourd'hui, j'aimerais partager un framework mvvm simple que j'ai implémenté en utilisant js.

Au départ, je ne faisais que des événements de liaison automatique. Plus tard, j'ai découvert les méthodes d'implémentation de vue, knockout et argulaire, et en combinaison avec ma propre expérience dans la création de WPF, j'ai ajouté la liaison d'attributs. Aujourd'hui, je l'ai un peu amélioré. quelques fonctions et soumis le code au nuage de codes : https://gitee.com/zlj_fy/Simple-MVVM

Tout d'abord, présentons brièvement l'utilisation :

<form class="form-horizontal" role="form" data-context="TestController">
  <p class="form-group">
   <legend>Form title</legend>
  </p>
  <p class="form-group">
   <p class="col-sm-6 col-sm-offset-2">
    <input type="text" class="form-control" bind-val="age,format=format" style="margin:5px 0" />
    <input type="text" class="form-control" bind-val="desc" style="margin:5px 0" />
    <input type="range" min="10" max="300" bind-val="age" step="10" class="form-control" style="margin:5px 0" />
    <input type="button" class="btn btn-primary" value="更新" style="margin:5px 0" on-click="update" />
   </p>
  </p>
 </form>
 <script>
  var TestController = {
   data: {
    name: &#39;xiaoming&#39;,
    age: 3,
    desc: function() {
　　　　　　　　　　　　return this.name + &#39; likes looking little movie. he should take care of his body&#39; 
    }
   },
   format: function(val) {
    return val + &#39;岁&#39;
   },
   update: function() {
    this.name = &#39;this is a test&#39;
    this.age = 18
   }
  }
  $(&#39;body&#39;).controller()
 </script>

Définissez d'abord un contrôleur, qui peut être un objet json ou une fonction, puis définissez data-context="[nom du contrôleur]" dans l'élément de niveau supérieur pour lier le contrôleur Set à tous éléments sous ce nœud. S'il existe un contrôleur imbriqué dans les descendants de l'élément, la portée des éléments enfants situés sous l'élément dans lequel il se trouve pointe vers le contrôleur enfant.

1. Attributs de surveillance et attributs complexes

Tous les attributs doivent être définis sous le nœud de données. Si les attributs à l'intérieur sont définis comme des fonctions, ils sont considérés comme des attributs complexes ( tels que desc) , les attributs complexes sont en lecture seule et une erreur sera générée s'ils sont réaffectés.

Le format lié à l'élément html : "{nom de l'attribut, fomat=[méthode du contrôleur]}", le nom de l'attribut prend en charge les attributs imbriqués, tels que (a.b) ; le nom de l'attribut ne prend pas en charge les expressions, considérez Si vous estimez que cela n'est pas nécessaire, vous pouvez utiliser des attributs complexes à la place. L'inconvénient actuel est que si l'entreprise est complexe, un grand nombre d'attributs complexes peuvent être générés ; à droite du nom de l'attribut se trouvent actuellement des paramètres facultatifs. il n'existe que le format, qui est la méthode de conversion des attributs à afficher en HTML.

2. Instruction

La syntaxe de l'instruction de liaison se présente sous la forme de bind-{instruction}. Actuellement, seuls val, attr, text, html et template le sont. En fait, on peut voir que les quatre premiers encapsulent simplement la méthode jqeury. Le modèle est implémenté à l'aide du plug-in jquery-tmpl. Si vous avez besoin de plus d'instructions, vous pouvez l'étendre vous-même. implémentez la méthode de chargement initial init (recevez le paramètre d'observateur actuel) et la méthode de mise à jour (description du paramètre : élément jquery correspondant, dernière valeur, instance de contrôleur actuelle) si vous étendez une instruction existante, l'instruction d'origine sera écrasée par défaut ; . Comme suit :

$.controller.addDirective("val", {
  init: function (observer) {
   if (observer.$ele.is('input,select')) {
    //监听onchange事件
    observer.$ele.on('input propertychange', function () {
     var newVal = $(this).val()
     observer.writeValue(newVal)
    })
   }
  },
  update: function ($ele, newVal, controller) {
   $ele.val && $ele.val(newVal)
  }
 })

3. Événement

Syntaxe de l'événement de liaison : on-{event}="{controller method}, type=on/one" , le côté droit de la méthode du contrôleur est un paramètre facultatif, actuellement seul le type de liaison est on/one, la valeur par défaut est on ; la méthode du contrôleur reçoit deux paramètres, l'un est le paramètre initial qui peut être défini sur l'élément correspondant à l'événement ; , et l'autre est le paramètre d'événement event ;

<button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查询</button>

4. Méthode

Utilisez ceci directement pour accéder directement aux attributs sous le nœud de données correspondant. .

5. Hooks

init et créé après avoir surveillé tous les attributs et avant de compiler dom Vous pouvez initialiser les paramètres sur cette méthode créée après la compilation des éléments dom ; .

Le contrôleur implémente par défaut la méthode d'héritage extend, qui peut hériter d'un autre contrôleur et doit être utilisée dans la méthode init. Actuellement, vous pouvez également utiliser l'héritage prototypique pour l'implémenter vous-même.

init: function () {
    this.extend(PageController)
   },
   created: function () {
    //TODO
   },

6. Extension

Je crois que tout le monde aura certainement un ensemble de composants communs lors de la réalisation de projets, ils peuvent ensuite être étendus comme suit, la valeur par défaut composants correspondants Montez-le sur tous les exemples de contrôleurs, et vous pouvez l'appeler directement sous la méthode correspondante : this.http.post();

Cependant, il existe une suggestion qui consiste à essayer d'unifier les fonctions de la méthode de rappel. Le domaine pointe vers le contrôleur, de sorte que le développement n'aura pas toujours de problèmes de portée.

$.controller.extend({
   utils: utils,
   notify: $.notify,
   modal: $.modal,
   http: $.http,
   alert: $.alert
  })

7. Analyse du principe et du code (à suivre...)

L'intégralité du code js ne fait que plus de 300 lignes, donc l'implémentation est relativement simple, de nombreux aspects n'ont pas été pris en compte, et certaines fonctions sont également souhaitées mais n'ont pas été implémentées. Actuellement, la détection des changements de tableau et la mise à jour locale du DOM associé ne sont pas prises en charge.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Explication détaillée de l'utilisation d'axios pour résoudre les problèmes de requête http dans vue2 (tutoriel détaillé)

Dans vue Gérer le problème de transmission de paramètres dans les requêtes de publication via axios (tutoriel détaillé)

Ajouter des composants axios via vue pour résoudre le problème des paramètres nuls dans post (tutoriel détaillé)

L'envoi d'une demande de publication via axios a révélé que springMVC ne pouvait pas recevoir de paramètres (tutoriel détaillé)

Utilisation de la bibliothèque de fonctions xe-utils dans vue (tutoriel détaillé)

Exemple JQuery+koa2 d'implémentation d'une simple requête Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!