Heim Web-Frontend js-Tutorial js implementiert eine einfache Beispielfreigabe für ein MVVM-Framework

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

Jan 16, 2018 pm 01:12 PM
javascript mvvm 框架

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>
Nach dem Login kopieren

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)
  }
 })
Nach dem Login kopieren

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>
Nach dem Login kopieren

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
   },
Nach dem Login kopieren

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
  })
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So bewerten Sie die Kosteneffizienz der kommerziellen Unterstützung für Java-Frameworks So bewerten Sie die Kosteneffizienz der kommerziellen Unterstützung für Java-Frameworks Jun 05, 2024 pm 05:25 PM

Die Bewertung des Kosten-/Leistungsverhältnisses des kommerziellen Supports für ein Java-Framework umfasst die folgenden Schritte: Bestimmen Sie das erforderliche Maß an Sicherheit und Service-Level-Agreement-Garantien (SLA). Die Erfahrung und das Fachwissen des Forschungsunterstützungsteams. Erwägen Sie zusätzliche Services wie Upgrades, Fehlerbehebung und Leistungsoptimierung. Wägen Sie die Kosten für die Geschäftsunterstützung gegen Risikominderung und Effizienzsteigerung ab.

Wie wirken sich die Lightweight-Optionen von PHP-Frameworks auf die Anwendungsleistung aus? Wie wirken sich die Lightweight-Optionen von PHP-Frameworks auf die Anwendungsleistung aus? Jun 06, 2024 am 10:53 AM

Das leichte PHP-Framework verbessert die Anwendungsleistung durch geringe Größe und geringen Ressourcenverbrauch. Zu seinen Merkmalen gehören: geringe Größe, schneller Start, geringer Speicherverbrauch, verbesserte Reaktionsgeschwindigkeit und Durchsatz sowie reduzierter Ressourcenverbrauch. Praktischer Fall: SlimFramework erstellt eine REST-API, nur 500 KB, hohe Reaktionsfähigkeit und hoher Durchsatz

Wie ist die Lernkurve von PHP-Frameworks im Vergleich zu anderen Sprach-Frameworks? Wie ist die Lernkurve von PHP-Frameworks im Vergleich zu anderen Sprach-Frameworks? Jun 06, 2024 pm 12:41 PM

Die Lernkurve eines PHP-Frameworks hängt von Sprachkenntnissen, Framework-Komplexität, Dokumentationsqualität und Community-Unterstützung ab. Die Lernkurve von PHP-Frameworks ist im Vergleich zu Python-Frameworks höher und im Vergleich zu Ruby-Frameworks niedriger. Im Vergleich zu Java-Frameworks haben PHP-Frameworks eine moderate Lernkurve, aber eine kürzere Einstiegszeit.

Best Practices für die Dokumentation des Golang-Frameworks Best Practices für die Dokumentation des Golang-Frameworks Jun 04, 2024 pm 05:00 PM

Das Verfassen einer klaren und umfassenden Dokumentation ist für das Golang-Framework von entscheidender Bedeutung. Zu den Best Practices gehört die Befolgung eines etablierten Dokumentationsstils, beispielsweise des Go Coding Style Guide von Google. Verwenden Sie eine klare Organisationsstruktur, einschließlich Überschriften, Unterüberschriften und Listen, und sorgen Sie für eine Navigation. Bietet umfassende und genaue Informationen, einschließlich Leitfäden für den Einstieg, API-Referenzen und Konzepte. Verwenden Sie Codebeispiele, um Konzepte und Verwendung zu veranschaulichen. Halten Sie die Dokumentation auf dem neuesten Stand, verfolgen Sie Änderungen und dokumentieren Sie neue Funktionen. Stellen Sie Support und Community-Ressourcen wie GitHub-Probleme und Foren bereit. Erstellen Sie praktische Beispiele, beispielsweise eine API-Dokumentation.

Leistungsvergleich von Java-Frameworks Leistungsvergleich von Java-Frameworks Jun 04, 2024 pm 03:56 PM

Laut Benchmarks sind Quarkus (schneller Start, geringer Speicher) oder Micronaut (TechEmpower ausgezeichnet) für kleine, leistungsstarke Anwendungen die ideale Wahl. SpringBoot eignet sich für große Full-Stack-Anwendungen, weist jedoch etwas langsamere Startzeiten und Speichernutzung auf.

So wählen Sie das beste Golang-Framework für verschiedene Anwendungsszenarien aus So wählen Sie das beste Golang-Framework für verschiedene Anwendungsszenarien aus Jun 05, 2024 pm 04:05 PM

Wählen Sie das beste Go-Framework basierend auf Anwendungsszenarien aus: Berücksichtigen Sie Anwendungstyp, Sprachfunktionen, Leistungsanforderungen und Ökosystem. Gängige Go-Frameworks: Gin (Webanwendung), Echo (Webdienst), Fiber (hoher Durchsatz), gorm (ORM), fasthttp (Geschwindigkeit). Praktischer Fall: Erstellen einer REST-API (Fiber) und Interaktion mit der Datenbank (gorm). Wählen Sie ein Framework: Wählen Sie fasthttp für die Schlüsselleistung, Gin/Echo für flexible Webanwendungen und gorm für die Datenbankinteraktion.

Detaillierte praktische Erklärung der Golang-Framework-Entwicklung: Fragen und Antworten Detaillierte praktische Erklärung der Golang-Framework-Entwicklung: Fragen und Antworten Jun 06, 2024 am 10:57 AM

Bei der Go-Framework-Entwicklung treten häufige Herausforderungen und deren Lösungen auf: Fehlerbehandlung: Verwenden Sie das Fehlerpaket für die Verwaltung und Middleware zur zentralen Fehlerbehandlung. Authentifizierung und Autorisierung: Integrieren Sie Bibliotheken von Drittanbietern und erstellen Sie benutzerdefinierte Middleware zur Überprüfung von Anmeldeinformationen. Parallelitätsverarbeitung: Verwenden Sie Goroutinen, Mutexe und Kanäle, um den Ressourcenzugriff zu steuern. Unit-Tests: Verwenden Sie Gotest-Pakete, Mocks und Stubs zur Isolierung sowie Code-Coverage-Tools, um die Angemessenheit sicherzustellen. Bereitstellung und Überwachung: Verwenden Sie Docker-Container, um Bereitstellungen zu verpacken, Datensicherungen einzurichten und Leistung und Fehler mit Protokollierungs- und Überwachungstools zu verfolgen.

Leistungsvergleich des Golang-Frameworks: Metriken für kluge Entscheidungen Leistungsvergleich des Golang-Frameworks: Metriken für kluge Entscheidungen Jun 05, 2024 pm 10:02 PM

Zu den wichtigsten Leistungsindikatoren (KPIs) bei der Auswahl eines Go-Frameworks gehören: Antwortzeit, Durchsatz, Parallelität und Ressourcennutzung. Durch Benchmarking und Vergleich der KPIs der Frameworks können Entwickler fundierte Entscheidungen auf der Grundlage der Anwendungsanforderungen treffen und dabei die erwartete Auslastung, leistungskritische Abschnitte und Ressourcenbeschränkungen berücksichtigen.

See all articles