Implementierung des MVVM-Frameworks in js (ausführliches Tutorial)

Im Folgenden werde ich Ihnen ein Beispiel eines einfachen MVVM-Frameworks vorstellen, das in js implementiert ist. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Früher habe ich die Artikel im Garten im Stillen gelesen und mochte sie obszön. Heute möchte ich 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 übermittelte den Code an die Code-Cloud: https://gitee.com/zlj_fy/Simple-MVVM

Lassen Sie uns zunächst kurz die Verwendung vorstellen:

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

Definieren Sie zunächst einen Controller, der ein JSON-Objekt oder eine Funktion sein kann. Definieren Sie dann data-context="[Controllername]" im Element der obersten Ebene, um den Controller an alle Elemente unter diesem 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. Wenn die darin enthaltenen Attribute als Funktionen definiert sind, gelten sie als komplexe Attribute. B. desc) , sind komplexe Attribute schreibgeschützt und es wird eine Fehlermeldung ausgegeben, wenn sie neu zugewiesen werden.

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 bei komplexen Unternehmen 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 hat derzeit nur die Form val, attr, text, html und template Tatsächlich kann man sehen, dass die ersten vier einfach die jqeury-Methode kapseln. Wenn Sie weitere Anweisungen benötigen, können Sie diese einfach erweitern Implementieren Sie die anfängliche Lademethode init (empfangen Sie den aktuellen Beobachterparameter) und die 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", Steuerung Ein Die rechte Seite der Controller-Methode enthält optionale Parameter. Derzeit gibt es nur den Bindungstyp on/one, und die Controller-Methode empfängt standardmäßig zwei Parameter. Einer ist der anfängliche Parameter, der für das entsprechende Element festgelegt werden kann Ereignis, und der andere ist der Ereignisereignisparameter;

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

4. Methode

Verwenden Sie diesen Attributnamen direkt, um direkt 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 die prototypische Vererbung auch selbst implementieren.

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

6. Erweiterung

Ich glaube, dass jeder bei der Durchführung von Projekten auf jeden Fall eine Reihe gemeinsamer Komponenten haben wird, die dann wie folgt erweitert werden können, und die entsprechenden Komponenten sind standardmäßig gemountet Gehen Sie zu allen Controller-Beispielen und rufen Sie sie direkt unter der entsprechenden Methode auf: this.http.post(); Callback-Methode an den Controller, sodass es während der Entwicklung nicht immer zu Bereichsproblemen kommt.

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

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

Der gesamte js-Code umfasst nur mehr als 300 Zeilen, daher ist die Implementierung relativ einfach und es gibt viele Aspekte, die ich nicht berücksichtigt habe. Es gibt auch einige Funktionen, die ich implementieren möchte, aber derzeit nicht unterstützt werde.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Verwendung von Axios zur Lösung von HTTP-Anforderungsproblemen in vue2 (ausführliches Tutorial)

In vue Behandeln Sie die Problem der Übergabe von Parametern in Post-Anfragen über Axios (ausführliches Tutorial)

Fügen Sie Axios-Komponenten über Vue hinzu, um das Problem der Nullparameter in Post zu lösen (ausführliches Tutorial)

Beim Senden einer Post-Anfrage über Axios wurde festgestellt, dass SpringMVC keine Parameter empfangen konnte (ausführliches Tutorial)

Verwenden der xe-utils-Funktionsbibliothek in Vue (ausführliches Tutorial)

JQuery+koa2-Beispiel für die Implementierung einer einfachen Ajax-Anfrage

Das obige ist der detaillierte Inhalt vonImplementierung des MVVM-Frameworks in js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!