js implementiert eine einfache Beispielfreigabe für ein MVVM-Framework

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel eines einfachen MVVM-Frameworks, das in js implementiert ist. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Früher habe ich die Artikel im Garten im Stillen gelesen und mochte sie obszön. Heute werde ich auch ein einfaches MVVM-Framework teilen, das ich mit js implementiert habe.

Anfangs habe ich nur automatische Bindungsereignisse durchgeführt. Später habe ich etwas über Vue-, Knockout- und Argus-Implementierungsmethoden gelernt, und in Kombination mit meiner eigenen Erfahrung bei der Erstellung von WPF habe ich es ein wenig geklärt Einige Funktionen und den Code an die Code-Cloud übermittelt: https://gitee.com/zlj_fy/Simple-MVVM

Stellen Sie zunächst kurz die Verwendung vor:

<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>

Definieren Sie zunächst ein Steuerelement Der Controller kann ein JSON-Objekt oder eine Funktion sein und dann data-context="[Controllername]" auf dem Element der obersten Ebene definieren, um den Controller an alle Elemente unter dem Knoten zu binden. Wenn in den Nachkommen des Elements ein verschachtelter Controller vorhanden ist, verweist der Bereich der untergeordneten Elemente unterhalb des Elements, in dem es sich befindet, auf den untergeordneten Controller.

1. Überwachungsattribute und komplexe Attribute

Alle Attribute müssen unter dem Datenknoten definiert werden, sie gelten als komplexe Attribute Attribute sind schreibgeschützt. Ja, es wird ein Fehler angezeigt, wenn der Wert neu zugewiesen wird.

Das an das HTML-Element gebundene Format: „{attribute name, fomat=[controller method]}“, der Attributname unterstützt verschachtelte Attribute wie (a.b); der Attributname unterstützt keine Ausdrücke Wenn Sie der Meinung sind, dass dies nicht erforderlich ist, können Sie stattdessen komplexe Attribute verwenden. Der aktuelle Nachteil besteht darin, dass auf der rechten Seite des Attributnamens möglicherweise eine große Anzahl komplexer Attribute generiert wird. Es gibt nur das Format, das die Konvertierungsmethode für Attribute ist, die in HTML angezeigt werden sollen.

2. Anweisung

Die Syntax der Bindungsanweisung ist derzeit nur val, attr, text, html und template Es ist ersichtlich, dass die ersten vier einfach die jqeury-Methode kapseln. Die Vorlage wird mit dem jquery-tmpl-Plugin implementiert. Wenn Sie weitere Anweisungen benötigen, müssen Sie sie nur selbst implementieren (Empfang der aktuellen Beobachterparameter) und Aktualisierungsmethode (Parameterbeschreibung: entsprechendes JQuery-Element, aktueller Wert, aktuelle Controller-Instanz); wenn Sie eine vorhandene Anweisung erweitern, wird die ursprüngliche Anweisung standardmäßig überschrieben. Wie folgt:

$.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. Ereignis

Bindungsereignissyntax: on-{event}="{controller method}, type=on/one", die rechte Seite des Controllers Methode ist optionaler Parameter, derzeit nur Bindungstyp ein/eins, der Standardwert ist ein; die Controller-Methode empfängt zwei Parameter, einer ist der Anfangsparameter, der für das dem Ereignis entsprechende Element festgelegt werden kann, und der andere ist der Ereignisereignisparameter ;

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

4. Verwenden Sie diesen Attributnamen direkt, um auf die Attribute unter dem entsprechenden Datenknoten zuzugreifen.

5. Hooks

Init wird nach der Überwachung aller Attribute und vor dem Kompilieren von Dom-Elementen erstellt.

Der Controller implementiert standardmäßig die erweiterte Vererbungsmethode, die einen anderen Controller erben kann und in der Init-Methode verwendet werden muss. Derzeit können Sie auch die prototypische Vererbung nutzen, um es selbst zu implementieren.

6. Erweiterung

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

Ich glaube, dass jeder bei der Durchführung von Projekten über eine Reihe gemeinsamer Komponenten verfügen wird, sodass diese standardmäßig wie folgt erweitert werden können alle Steuerelemente Unterhalb des Controller-Beispiels können Sie es direkt unter der entsprechenden Methode aufrufen: this.http.post();

Es gibt jedoch einen Vorschlag, der darin besteht, den Umfang der Rückrufmethode anzugeben so weit wie möglich an den Controller zu übertragen, so dass es bei der Entwicklung nicht immer zu Scope-Problemen kommt.

7. Prinzip und Code-Analyse (wird fortgesetzt...)

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

Der gesamte js-Code umfasst nur mehr als 300 Zeilen, daher ist die Implementierung relativ einfach und viele Aspekte werden nicht berücksichtigt Ja, es gibt noch einige Funktionen, die ich implementieren möchte, aber noch nicht durchgeführt habe. Derzeit werden die Erkennung von Array-Änderungen und die lokale Aktualisierung des zugehörigen DOM nicht unterstützt.

Verwandte Empfehlungen:

Stellen Sie vor, was MVC, MVP und MVVM sind

Was ist MVVM-Architektur und Datenbindung?

Hinweise zu Vue.js und MVVM

Das obige ist der detaillierte Inhalt vonjs implementiert eine einfache Beispielfreigabe für ein MVVM-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!