js implémente un partage d'exemple de framework MVVM simple

Cet article partage principalement 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. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider 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, je vais également 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

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: 'xiaoming',
    age: 3,
    desc: function() {
　　　　　　　　　　　　return this.name + ' likes looking little movie. he should take care of his body' 
    }
   },
   format: function(val) {
    return val + '岁'
   },
   update: function() {
    this.name = 'this is a test'
    this.age = 18
   }
  }
  $('body').controller()
 </script>

Définissons d'abord un contrôle. le contrôleur peut être un objet json ou une fonction, puis définissez data-context="[nom du contrôleur]" sur l'élément de niveau supérieur pour lier le contrôleur à tous les éléments sous le 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 Complex). les attributs sont en lecture seule. Oui, une erreur sera générée si la valeur est réaffectée.

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) ; 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 sont implémentés. 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. Il vous suffit d'implémenter la méthode de chargement initial init. (réception des paramètres d'observateur actuels) et 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, celle 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 du contrôleur la méthode est des paramètres facultatifs, actuellement uniquement le type de liaison on/one, la valeur par défaut est activée ; 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 d'événement. ;

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

4. Méthode

Utilisez directement ce nom d'attribut pour accéder directement aux attributs sous le nœud de données correspondant.

5. Hooks

init et créé. Init est 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 un ensemble de composants communs lors de la réalisation de projets, ils peuvent donc être étendus comme suit. Par défaut, les composants correspondants sont montés sur. all control Sous l'exemple du contrôleur, vous pouvez l'appeler directement sous la méthode correspondante : this.http.post();

Cependant, il existe une suggestion qui consiste à essayer de pointer la portée de la méthode de rappel. au contrôleur autant que possible, afin que les problèmes de portée ne se produisent pas toujours lors du développement.

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

7. Principe et analyse du code (à suivre...)

L'ensemble du code js ne fait que plus de 300 lignes, la mise en œuvre est donc relativement simple, et de nombreux aspects ne sont pas pris en compte Oui, il y a encore certaines fonctions que je souhaite implémenter mais que je n'ai pas encore faites. Actuellement, la détection des changements de tableau et la mise à jour locale du DOM associé ne sont pas prises en charge.

Recommandations associées :

Présentez ce que sont respectivement MVC, MVP et MVVM

Qu'est-ce que l'architecture MVVM et la liaison de données ?

Notes sur Vue.js et MVVM

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!