Wenn JavaScript -Programme immer komplexer werden, benötigen sie häufig ein Team, um sich in Zusammenarbeit zu entwickeln, und die Modularisierung des Code- und Organisationsspezifikationen wird äußerst wichtig. Das MVC -Muster ist ein klassisches Modell der Codeorganisation.
(… Einführung in MVC.)
(1) Modell
Das Modell repräsentiert die Datenschicht, dh die vom Programm erforderliche Datenquelle und wird normalerweise im JSON -Format dargestellt.
(2) Ansicht
Die Ansicht repräsentiert die Präsentationsebene, die die Benutzeroberfläche ist. Für Webseiten ist es der HTML -Code der von Benutzern angezeigten Webseite.
(3) Controller
Controller repräsentiert die Steuerungsschicht, die zum Verarbeiten der Originaldaten (Modell) verwendet und in die Ansicht übertragen wird.
Da sich die Webprogrammierung von der Client-Programmierung unterscheidet, basierend auf MVC, hat die JavaScript-Community verschiedene Varianten-Frameworks MVP (Modell-View-Presenter), MVVM (Modell-View-ViewModel) usw. erstellt. Einige Personen rufen gemeinsam alle verschiedenen Modi dieser Art von Framework MV*an.
Der Vorteil eines Frameworks besteht darin, dass der Code vernünftigerweise organisiert, Teamarbeit und zukünftige Wartung erleichtert, und der Nachteil ist, dass er bestimmte Lernkosten hat und Sie zum Schreiben einschränkt.
Backbone -Laden
Die Codekopie lautet wie folgt:
<script src = "/javascripts/lib/jquery.js"> </script>
<script src = "/javaScripts/lib/unterschrei.js"> </script>
<script src = "/javascripts/lib/backbone.js"> </script>
<script src = "/javascripts/jst.js"> </script>
<script src = "/javascripts/router.js"> </script>
<script src = "/javascripts/init.js"> </script>
Backbone.View
Grundnutzung
Mit der Methode Backbone.View wird eine Ansichtsklasse definiert.
Die Codekopie lautet wie folgt:
var AppView = Backbone.view.extend ({{
rendern: function () {
$ ('main'). append ('<h1> Titel in der ersten Ebene </h1>');
}
});
Der obige Code definiert eine Ansichtsklassen -Appview über die Erweiterungsmethode von Backbone.view. In dieser Klasse gibt es eine Render -Methode, um die Ansicht auf der Webseite zu platzieren.
Bei der Verwendung müssen Sie eine neue Instanz der Ansichtsklasse erstellen und dann die Render -Methode über die Instanz aufrufen, damit die Ansicht auf der Webseite angezeigt werden kann.
Die Codekopie lautet wie folgt:
var AppView = new AppView ();
AppView.render ();
Der obige Code erstellt eine neue Instanz -AppView für die Klassenklassen -AppView und rufe dann AppView.render auf, und der angegebene Inhalt wird auf der Webseite angezeigt.
Beim Erstellen einer neuen Ansichtsinstanz müssen Sie normalerweise ein Modell angeben.
Die Codekopie lautet wie folgt:
var document = neues dokument ({{{
Modell: Doc
});
Methode initialisieren
Die Ansicht kann auch die Initialisierungsmethode definieren. Bei der Generierung einer Instanz wird die Methode automatisch aufgerufen, um die Instanz zu initialisieren.
Die Codekopie lautet wie folgt:
var AppView = Backbone.view.extend ({{
initialisieren: function () {
this.render ();
},
rendern: function () {
$ ('main'). append ('<h1> Titel in der ersten Ebene </h1>');
}
});
var AppView = new AppView ();
Nachdem der obige Code die Initialisierungsmethode definiert hat, wird der Schritt des manuellen Aufrufs von AppView.render () nach dem Generieren der Instanz beseitigt.
EL Attribut, $ El Attribut
Zusätzlich zur Angabe des Webseitenelements, das direkt in der Render -Methode an "anzeigen" ist, können Sie das Webseitenelement auch mit dem El -Attribut der Ansicht angeben.
Die Codekopie lautet wie folgt:
var AppView = Backbone.view.extend ({{
EL: $ ('Main'),
rendern: function () {
Dies.
}
});
Der obige Code bindet die Webseitenelemente direkt mit der Render -Methode, und der Effekt ist genau der gleiche. Im obigen Code ist es zusätzlich zum EL -Attribut auch das $ EL -Attribut. Ersteres repräsentiert das angegebene DOM -Element und das letztere repräsentiert das JQuery -Objekt, das dem DOM -Element entspricht.
Tagname -Attribut, ClassName -Attribut
Wenn das EL -Attribut nicht angegeben ist, kann es auch über das Attribut von Tagname und das ClassName -Attribut angegeben werden.
Die Codekopie lautet wie folgt:
var document = backbone.view.extend ({{
Tagname: "li",
Klassenname: "Dokument",
rendern: function () {
// ...
}
});
Vorlagenmethode
Die Vorlageneigenschaft der Ansicht wird verwendet, um die Webseitenvorlage anzugeben.
Die Codekopie lautet wie folgt:
var AppView = Backbone.view.extend ({{
Vorlage: _.Template ("<h3> Hallo < %= wer %> <h3>"),
});
Im obigen Code akzeptiert die Vorlagenfunktion der Unterstrichfunktionsbibliothek eine Vorlagenzeichenfolge als Parameter und gibt die entsprechende Vorlagenfunktion zurück. Mit dieser Vorlagenfunktion kann der Webseitencode generiert werden, solange der spezifische Wert bereitgestellt wird.
Die Codekopie lautet wie folgt:
var AppView = Backbone.view.extend ({{
EL: $ ('#Container'),
Vorlage: _.Template ("<h3> Hallo < %= wer %> <h3>"),
initialisieren: function () {
this.render ();
},
rendern: function () {
this. $ el.html (this.template ({wer: 'welt!'}));
}
});
Das Rendern des obigen Codes ruft die Vorlagenmethode auf, um einen bestimmten Webseitencode zu generieren.
In praktischen Anwendungen werden Vorlagen im Allgemeinen in Skript -Tags platziert. Um zu verhindern, dass Browser nach dem JavaScript -Code analysiert werden, wird das Typ -Attribut auf Text/Vorlage festgelegt.
Die Codekopie lautet wie folgt:
<script type = "text/template" data-name = "templateName">
<!-Vorlageninhalte gehen hier->
</script>
Sie können den folgenden Code verwenden, um die Vorlage zu kompilieren.
Die Codekopie lautet wie folgt:
window.templates = {};
var $ sources = $ ('script [type = "text/template"]');
$ Quellen.each (Funktion (Index, el) {
var $ el = $ (el);
templates [$ el.data ('name')] = _.template ($ el.html ());
});
Ereignisattribut
Das Ereignisattribut wird verwendet, um den Ereignis der Ansicht und deren entsprechenden Handhabungsfunktionen anzugeben.
Die Codekopie lautet wie folgt:
var document = backbone.view.extend ({{
Ereignisse: {
"Klicken Sie auf .icon": "Öffnen",
"Klick .button.edit": "OpeneditDialog",
"Klicken Sie auf .button.delete": "zerstören"
}
});
Einer der oben genannten Code gibt das Klickereignis von drei CSS -Selektoren und den entsprechenden drei Handhabungsfunktionen an.
Listento -Methode
Die Listento -Methode wird verwendet, um eine Rückruffunktion für ein bestimmtes Ereignis anzugeben.
Die Codekopie lautet wie folgt:
var document = backbone.view.extend ({{
initialisieren: function () {
this.listento (this.model, "change", this.render);
}
});
Der obige Code ist das Änderungsereignis des Modells, und die Rückruffunktion wird als Render angegeben.
Methode entfernen
Die Entfernenmethode wird verwendet, um eine Ansicht zu entfernen.
Die Codekopie lautet wie folgt:
updateView: function () {
view.remove ();
view.render ();
};
Unteransicht
Die Kinderansicht kann in der übergeordneten Ansicht aufgerufen werden. Das Folgende ist eine Art zu schreiben.
Die Codekopie lautet wie folgt:
rendern: function () {
this. $ el.html (this.template ());
this.child = New Child ();
this.child.appendto ($. ('. Container-Place-Helder'). Render ();
}
Backbone.router
Router ist ein von Backbone bereitgestellter Routing -Objekt, mit dem die vom Benutzer angeforderte URL mit der Backend -Verarbeitungsfunktion eins nach dem anderen entspricht.
Erstens wird eine neue Router -Klasse definiert.
Die Codekopie lautet wie folgt:
Router = Backbone.router.extend ({{{
Routen: {
}
});
Routenattribut
Das Wichtigste im Backbone.router -Objekt ist die Eigenschaft Routes. Es wird verwendet, um die Pfadverarbeitungsmethode festzulegen.
Das Routes -Attribut ist ein Objekt, und jedes Mitglied davon stellt eine Pfadverarbeitungsregel dar. Der Schlüsselname ist die Pfadregel und der Schlüsselwert ist die Verarbeitungsmethode.
Wenn der Schlüsselname eine leere Zeichenfolge ist, repräsentiert er den Stammpfad.
Die Codekopie lautet wie folgt:
Routen: {
'': 'PhonesIndex',
},
TelefonesIndex: function () {
New PhonesIndexView ({el: 'Abschnitt#main'});
}
Ein Sternchen repräsentiert jeden Pfad, und Sie können die Pfadparameter einstellen, um die spezifischen Pfadwerte zu erfassen.
Die Codekopie lautet wie folgt:
var appouter = backbone.router.extend ({{{
Routen: {
"*Aktionen": "Defaultroute"
}
});
var app_router = neuer Zustimmung;
app_router.on ('Route: Defaultroute', Funktion (Aktionen) {
console.log (Aktionen);
})
Im obigen Code werden die Parameter hinter dem Stammpfad erfasst und die Rückruffunktion übergeben.
Wie man Pfadregeln schreibt.
Die Codekopie lautet wie folgt:
var myrouter = backbone.router.extend ({{{
Routen: {
"Hilfe": "Hilfe",
"Suche/: Abfrage": "Suche"
},
Hilfe: function () {
...
},
Suche: Funktion (Abfrage) {
...
}
});
Routen: {
"Hilfe/: Seite": "Hilfe",
"Download/*Pfad": "Download",
"Ordner/: Name": "OpenFolder",
"Ordner/: Name-: Modus": "OpenFolder"
}
Router.on ("Route: Hilfe", Funktion (Seite) {
...
});
Backbone.History
Nach dem Einrichten des Routers können Sie die Anwendung starten. Das Backbone.History -Objekt wird verwendet, um Änderungen in URLs zu überwachen.
Die Codekopie lautet wie folgt:
App = new Router ();
$ (Dokument) .Ready (function () {
Backbone.history.start ({pushstate: true});
});
Öffnen Sie die Pushstate -Methode. Wenn sich die Anwendung nicht im Stammverzeichnis befindet, müssen Sie das Stammverzeichnis angeben.
Die Codekopie lautet wie folgt:
Backbone.history.start ({pushstate: true, root: "/public/search/"})
Backbone.model
Modell repräsentiert eine einzelne Objektentität.
Die Codekopie lautet wie folgt:
var user = backbone.model.extend ({{
Standardeinstellungen: {
Name: '',
E -Mail: ''
}
});
var user = new user ();
Der obige Code verwendet die Erweiterungsmethode, um eine Benutzerklasse zu generieren, die die Vorlage des Modells darstellt. Verwenden Sie dann den neuen Befehl, um eine Instanz des Modells zu generieren. Das Standardattribut wird verwendet, um das Standardattribut festzulegen. Der obige Code gibt an, dass das Benutzerobjekt standardmäßig zwei Attribute Name und E -Mail enthält und deren Werte einer leeren Zeichenfolge gleich sind.
Wenn Sie eine Instanz generieren, können Sie für jedes Attribut bestimmte Werte bereitstellen.
Die Codekopie lautet wie folgt:
var user = neuer Benutzer ({{
ID: 1,
Name: 'Name',
E -Mail: '[email protected]' '
});
Der obige Code liefert die spezifischen Werte jedes Attributs beim Generieren einer Instanz.
Idattribute -Attribut
Modellinstanzen müssen über eine Eigenschaft verfügen, die als Hauptschlüssel dient, um andere Instanzen zu unterscheiden. Der Name dieses Attributs wird durch das Idattribute -Attribut festgelegt und im Allgemeinen auf ID eingestellt.
Die Codekopie lautet wie folgt:
var music = backbone.model.extend ({{
idattribute: 'id'
});
Methode erhalten
Die GET -Methode wird verwendet, um den Wert einer bestimmten Eigenschaft der Modellinstanz zurückzugeben.
Die Codekopie lautet wie folgt:
var user = neuer user ({name: "name", Alter: 24});
var age = user.get ("Alter"); // 24
var name = user.get ("name"); // "Name"
Methode festlegen
Die eingestellte Methode wird verwendet, um den Wert einer bestimmten Eigenschaft der Modellinstanz festzulegen.
Die Codekopie lautet wie folgt:
var user = backbone.model.extend ({{
kaufen: function (newcarsname) {
this.set ({car: newcarsname});
}
});
var user = new user ({name: 'bmw', modell: 'i8', type: 'car'});
user.buy ('porsche');
var car = user.get ("Car"); // 'Porsche' '
auf Methode
Die On -Methode wird verwendet, um Änderungen in Objekten zu hören.
Die Codekopie lautet wie folgt:
var user = neuer user ({name: 'bmw', modell: 'i8'});
user.on ("Änderung: Name", Funktion (Modell) {
var name = model.get ("name"); // "Porsche"
console.log ("den Namen meines Autos in" + Name geändert);
});
user.set ({name: 'porsche'});
// änderte den Namen meines Autos in Porsche
Die Ein -Methode im obigen Code wird verwendet, um auf Ereignisse zu hören, und "Änderung: Name" bedeutet, dass sich das Namensattribut geändert hat.
Urlrootattribute
Diese Eigenschaft wird verwendet, um den Pfad anzugeben, um auf der Serverseite auf dem Modell zu arbeiten.
Die Codekopie lautet wie folgt:
var user = backbone.model.extend ({{
URLROOT: '/Benutzer'
});
Der obige Code gibt an, dass der Pfad zum Server, der dem Modell entspricht, /Benutzer ist.
Ereignis holen
Mit dem Abrufereignis wird das Modell vom Server abgerufen.
Die Codekopie lautet wie folgt:
var user = new user ({id: 1});
user.fetch ({{
Erfolg: Funktion (Benutzer) {
console.log (user.tojson ());
}
})
Im obigen Code enthält die Benutzerinstanz das ID -Attribut (Wert ist 1). Die Fetch -Methode verwendet das HTTP -Verb, um eine Anforderung an die URL "/user/1" zu geben und die Instanz vom Server abzurufen.
Methode speichern
Die Speichermethode wird verwendet, um den Server zum Erstellen oder Aktualisieren des Modells zu benachrichtigen.
Wenn eine Modellinstanz kein ID -Attribut enthält, erstellt die Speichermethode die Instanz mithilfe der Post -Methode.
Die Codekopie lautet wie folgt:
var user = backbone.model.extend ({{
URLROOT: '/Benutzer'
});
var user = new user ();
var userdetails = {
Name: 'Name',
E -Mail: '[email protected]' '
};
user.save (userdetails, {
Erfolg: Funktion (Benutzer) {
console.log (user.tojson ());
}
})
Der obige Code gibt zunächst an, dass die entsprechende URL des Modells /Benutzer in der Klasse ist, dann eine neue Instanz erstellen und schließlich die Speichernmethode aufrufen. Es hat zwei Parameter. Das erste ist das spezifische Attribut des Instanzobjekts, und das zweite ist ein Rückruffunktionsobjekt, das die Rückruffunktion für das Erfolgsereignis festlegt (erfolgreich speichern). Insbesondere gibt die Speichernmethode eine Postanforderung an /Benutzer aus und gibt {Name: 'Name', E -Mail: '[email protected]'} als Daten.
Wenn eine Modellinstanz ein ID -Attribut enthält, aktualisiert die Speichermethode die Instanz mithilfe der Put -Methode.
Die Codekopie lautet wie folgt:
var user = neuer Benutzer ({{
ID: 1,
Name: 'Zhang San',
E -Mail: '[email protected]' '
});
user.save ({name: 'li si'}, {{
Erfolg: Funktion (Modell) {
console.log (user.tojson ());
}
});
Im obigen Code enthält die Objektinstanz ein ID -Attribut (Wert ist 1). Save verwendet die Put -Methode, um eine Anforderung an die URL zu stellen "/user/1", um die Instanz zu aktualisieren.
Methode zerstören
Die Zerstörungsmethode wird verwendet, um die Instanz auf dem Server zu löschen.
Die Codekopie lautet wie folgt:
var user = neuer Benutzer ({{
ID: 1,
Name: 'Name',
E -Mail: '[email protected]' '
});
user.destroy ({{
Erfolg: function () {
console.log ('zerstört');
}
});
Mit der Zerstörungsmethode im obigen Code wird das HTTP -Verb delete verwendet, um eine Anforderung an die URL "/user/1" auszustellen und die entsprechende Modellinstanz zu löschen.
Backbone.Collection
Die Sammlung ist eine Sammlung der gleichen Modelle. Zum Beispiel ist das Modell ein Tier, eine Sammlung ist ein Zoo; Modell ist eine einzelne Person, Sammlung ist ein Unternehmen.
Die Codekopie lautet wie folgt:
var Song = backbone.model.extend ({});
var Album = backbone.collection.extend ({{
Modell: Lied
});
Im obigen Code ist Song Is Model, Album Is Collection und Album ein Modellattribut, das Song entspricht. Es bedeutet also, dass Album eine Sammlung von Songs ist.
Methode hinzufügen, Methode entfernen
Die Modellinstanz kann direkt in die Sammlungsinstanz eingebaut oder mit der Methode hinzufügen hinzugefügt werden.
Die Codekopie lautet wie folgt:
var Song1 = neuer Lied ({ID: 1, Name: "Song Title 1", Künstler: "Zhang San"});
var Song2 = New Music ({ID: 2, Name: "Song Titel 2", Künstler: "Li si"});
var myalbum = neues Album ([Song1, Song2]);
var Song3 = New Music ({ID: 3, Name: "Song Title 3", Künstler: "Zhao Wu"});
myalbum.add (Song3);
Die Entfernenmethode wird verwendet, um eine Modellinstanz aus der Sammlungsinstanz zu entfernen.
Die Codekopie lautet wie folgt:
myalbum.remove (1);
Der obige Code zeigt, dass der Parameter der Entfernenmethode das ID -Attribut der Modellinstanz ist.
Methodenset -Methode abrufen
Die GET -Methode wird verwendet, um die Modellinstanz der angegebenen ID aus der Sammlung zu erhalten.
Die Codekopie lautet wie folgt:
myalbum.get (2))
Fetch -Methode
Die Abrufmethode wird verwendet, um Sammlungsdaten vom Server abzurufen.
Die Codekopie lautet wie folgt:
var Songs = neues Backbone.Collection;
Songs.Url = '/Songs';
Songs.fetch ();
Backbone.Events
Die Codekopie lautet wie folgt:
var obj = {};
_.extend (obj, backbone.events);
obj.on ("show-message", function (msg) {
$ ('#display'). text (msg);
});
obj.trigger ("show-message", "Hallo Welt");