Da JavaScript-Programme immer komplexer werden, ist häufig die Zusammenarbeit und Entwicklung eines Teams erforderlich. Zu diesem Zeitpunkt werden die Modularisierungs- und Organisationsspezifikationen des Codes äußerst wichtig. Das MVC-Muster ist das klassische Muster der Code-Organisation.
(…Einführung in MVC.)
（1）Modell
Das Modell stellt die Datenschicht dar, bei der es sich um die vom Programm benötigte Datenquelle handelt, die normalerweise im JSON-Format ausgedrückt wird.
（2）Ansicht
Ansicht stellt die Präsentationsebene dar, die die Benutzeroberfläche darstellt. Bei Webseiten handelt es sich um den HTML-Code der Webseite, den der Benutzer sieht.
(3)Controller
Controller stellt die Kontrollschicht dar, mit der die Originaldaten (Modell) verarbeitet und an die Ansicht übertragen werden.
Da sich die Web-Programmierung von der Client-Programmierung unterscheidet und auf MVC basiert, hat die JavaScript-Community verschiedene Varianten-Frameworks wie MVP (Model-View-Presenter), MVVM (Model-View-ViewModel) usw. erstellt. Einige Leute haben alle unterschiedlich Modi dieser Art von Framework werden zusammenfassend als MV* bezeichnet.
Der Vorteil des Frameworks besteht darin, dass es den Code sinnvoll organisiert, Teamarbeit und zukünftige Wartung erleichtert, der Nachteil besteht jedoch darin, dass es einen gewissen Lernaufwand verursacht und Sie auf die Schreibmethode beschränkt.
Backbone-Belastung
Backbone.View
Grundlegende Verwendung
Die Backbone.View-Methode wird zum Definieren der Ansichtsklasse verwendet.
var AppView = Backbone.View.extend({
render: function(){
$('main').append('
Titel der ersten Ebene
');
}
});
Der obige Code definiert eine Ansichtsklasse AppView über die Extend-Methode von Backbone.View. In dieser Klasse gibt es eine Rendermethode, mit der die Ansicht auf der Webseite platziert wird.
Wenn Sie es verwenden, müssen Sie zuerst eine neue Instanz der Ansichtsklasse erstellen und dann die Render-Methode über die Instanz aufrufen, um die Ansicht auf der Webseite anzuzeigen.
var appView = new AppView();
appView.render();
Der obige Code erstellt eine neue Instanz appView der Ansichtsklasse AppView und ruft dann appView.render auf. Der angegebene Inhalt wird auf der Webseite angezeigt.
Beim Erstellen einer neuen Ansichtsinstanz müssen Sie normalerweise ein Modell angeben.
var document = neues Dokument({
Modell: doc
});
Methode initialisieren
Ansichten können auch eine Initialisierungsmethode definieren. Wenn eine Instanz generiert wird, wird diese Methode automatisch aufgerufen, um die Instanz zu initialisieren.
var AppView = Backbone.View.extend({
initialisieren: function(){
This.render();
},
render: function(){
$('main').append('
Titel der ersten Ebene
');
}
});
var appView = new AppView();
Nachdem die Initialisierungsmethode im obigen Code definiert wurde, entfällt der Schritt des manuellen Aufrufs von appView.render() nach dem Generieren der Instanz.
el-Attribut, $el-Attribut
Zusätzlich zur direkten Angabe des an die „Ansicht“ gebundenen Webseitenelements in der Rendermethode können Sie das Webseitenelement auch über das el-Attribut der Ansicht angeben.
var AppView = Backbone.View.extend({
el: $('main'),
render: function(){
This.$el.append('
Titel der ersten Ebene
');
}
});
Der obige Code bindet Webseitenelemente direkt an die Rendermethode und der Effekt ist genau der gleiche. Im obigen Code gibt es zusätzlich zum el-Attribut auch das $el-Attribut. Ersteres repräsentiert das angegebene DOM-Element und letzteres 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 tagName-Attribut und das className-Attribut angegeben werden.
var Document = Backbone.View.extend({
tagName: „li“,
Klassenname: „Dokument“,
render: function() {
// ...
}
});
Vorlagenmethode
Das Vorlagenattribut der Ansicht wird verwendet, um die Webseitenvorlage anzugeben.
var AppView = Backbone.View.extend({
Vorlage: _.template("
Hallo <%= who %>"),
});
Im obigen Code akzeptiert die Vorlagenfunktion der Unterstrich-Funktionsbibliothek eine Vorlagenzeichenfolge als Parameter und gibt die entsprechende Vorlagenfunktion zurück. Mit dieser Vorlagenfunktion kann Webseitencode generiert werden, sofern bestimmte Werte bereitgestellt werden.
var AppView = Backbone.View.extend({
el: $('#container'),
Vorlage: _.template("
Hallo <%= who %>"),
initialisieren: function(){
This.render();
},
render: function(){
This.$el.html(this.template({who: 'world!'}));
}
});
Beim Rendern des obigen Codes wird die Vorlagenmethode aufgerufen, um einen bestimmten Webseitencode zu generieren.
In tatsächlichen Anwendungen wird die Vorlage im Allgemeinen im Skript-Tag platziert. Um zu verhindern, dass der Browser gemäß dem JavaScript-Code analysiert, wird das Typattribut auf text/template gesetzt.
Die Vorlage kann mit dem folgenden Code kompiliert werden.
window.templates = {};
var $sources = $('script[type="text/template"]');
$sources.each(function(index, el) {
var $el = $(el);
Templates[$el.data('name')] = _.template($el.html());
});
Ereignisattribut
Das Ereignisattribut wird verwendet, um die Ereignisse der Ansicht und ihre entsprechenden Verarbeitungsfunktionen anzugeben.
var Document = Backbone.View.extend({
Ereignisse: {
„click .icon“: „open“,
„click .button.edit“: „openEditDialog“,
„click .button.delete“: „zerstören“
}
});
Im obigen Code gibt ein Klickereignis drei CSS-Selektoren und die entsprechenden drei Handler an.
Listento-Methode
Die Listento-Methode wird verwendet, um eine Rückruffunktion für ein bestimmtes Ereignis anzugeben.
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 Remove-Methode wird verwendet, um eine Ansicht zu entfernen.
updateView: function() {
view.remove();
view.render();
};
Unteransicht
Unteransichten können in übergeordneten Ansichten aufgerufen werden. Hier ist eine Möglichkeit, es zu schreiben.
rendern: Funktion (){
This.$el.html(this.template());
This.child = new Child();
This.child.appendTo($.('.container-placeholder').render();
}
Backbone.Router
Router ist ein von Backbone bereitgestelltes Routing-Objekt, das für die Eins-zu-eins-Korrespondenz zwischen der vom Benutzer angeforderten URL und der Back-End-Verarbeitungsfunktion verwendet wird.
Definieren Sie zunächst eine neue Router-Klasse.
Router = Backbone.Router.extend({
Routen: {
}
});
Routenattribut
Im Backbone.Router-Objekt ist das Routenattribut das Wichtigste. Es wird verwendet, um die Pfadverarbeitungsmethode festzulegen.
Das Routenattribut ist ein Objekt und jedes Mitglied 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, stellt er den Stammpfad dar.
Routen: {
'': 'phonesIndex',
},
phoneIndex: Funktion () {
new PhonesIndexView({ el: 'section#main' });
}
Das Sternchen stellt einen beliebigen Pfad dar und Pfadparameter können so eingestellt werden, dass bestimmte Pfadwerte erfasst werden.
var AppRouter = Backbone.Router.extend({
Routen: {
„*actions“: „defaultRoute“
}
});
var app_router = neuer AppRouter;
app_router.on('route:defaultRoute', function(actions) {
console.log(actions);
})
Im obigen Code werden die Parameter nach dem Stammpfad erfasst und an die Rückruffunktion übergeben.
So schreiben Sie Pfadregeln.
var myrouter = Backbone.Router.extend({
Routen: {
„help“: „help“, „help“,
„search/:query“: „search“
},
Hilfe: function() {
...
},
Suche: Funktion(Abfrage) {
...
}
});
Routen: {
"help/:page": "help",
„download/*path“: „download“,
"folder/:name": "openFolder",
„folder/:name-:mode“: „openFolder“
}
router.on("route:help", function(page) {
...
});
Backbone.history
Nachdem Sie den Router eingerichtet haben, können Sie die Anwendung starten. Das Backbone.history-Objekt wird zur Überwachung von URL-Änderungen verwendet.
App = neuer Router();
$(document).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.
Backbone.history.start({pushState: true, root: "/public/search/"})
Backbone.Model
Das Modell stellt eine einzelne Objektentität dar.
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 von Model zu generieren. Das Standardattribut wird zum Festlegen von Standardattributen verwendet. Der obige Code zeigt an, dass das Benutzerobjekt standardmäßig über zwei Attribute verfügt, nämlich Name und E-Mail, und dass ihre Werte leeren Zeichenfolgen entsprechen.
Beim Generieren einer Instanz können Sie für jedes Attribut spezifische Werte angeben.
var user = neuer Benutzer ({
ID: 1,
Name: 'Name',
E-Mail: 'name@email.com'
});
Der obige Code stellt beim Generieren einer Instanz die spezifischen Werte jedes Attributs bereit.
idAttribute-Attribut
Modellinstanzen müssen über ein Attribut verfügen, das als Primärschlüssel zur Unterscheidung anderer Instanzen dient. Der Name dieses Attributs wird durch das idAttribute-Attribut festgelegt, normalerweise auf id.
var Music = Backbone.Model.extend({
idAttribute: 'id'
});
Methode abrufen
Die get-Methode wird verwendet, um den Wert eines bestimmten Attributs der Modellinstanz zurückzugeben.
var user = neuer Benutzer({ name: "name", age: 24});
var age = user.get("age"); // 24
var name = user.get("name"); // "name"
Methode festlegen
Die Set-Methode wird verwendet, um den Wert eines bestimmten Attributs der Modellinstanz festzulegen.
var User = Backbone.Model.extend({
Kaufen: function(newCarsName){
This.set({car: newCarsName });
}
});
var user = neuer Benutzer({name: 'BMW',model:'i8',type:'car'});
user.buy('Porsche');
var car = user.get("car"); // 'Porsche'
zur Methode
Die on-Methode wird verwendet, um Änderungen an Objekten zu überwachen.
var user = neuer Benutzer({name: 'BMW',model:'i8'});
user.on("change:name", function(model){
var name = model.get("name"); // "Porsche"
console.log("Der Name meines Autos wurde in "Name" geändert);
});
user.set({name: 'Porsche'});
// Habe den Namen meines Autos in Porsche geändert
Die on-Methode im obigen Code wird verwendet, um auf Ereignisse zu warten. „change:name“ zeigt an, dass sich das Namensattribut geändert hat.
URLroot-Attribut
Dieses Attribut wird verwendet, um den Pfad zum Betrieb des Modells auf der Serverseite anzugeben.
var User = Backbone.Model.extend({
urlRoot: '/user'
});
Der obige Code gibt an, dass der Pfad des dem Modell entsprechenden Servers /user ist.
Ereignis abrufen
Das Fetch-Ereignis wird verwendet, um das Modell vom Server abzurufen.
var user = neuer Benutzer ({id: 1});
user.fetch({
Erfolg: Funktion (Benutzer){
console.log(user.toJSON());
}
})
Im obigen Code enthält die Benutzerinstanz das ID-Attribut (Wert ist 1) und die Abrufmethode verwendet das HTTP-Verb GET, um eine Anfrage an die URL „/user/1“ zu stellen, um die Instanz vom Server abzurufen.
Speichermethode
Die Speichermethode wird verwendet, um den Server zu benachrichtigen, ein Modell zu erstellen oder zu aktualisieren.
Wenn eine Modellinstanz kein ID-Attribut enthält, verwendet die Speichermethode die POST-Methode, um eine neue Instanz zu erstellen.
var User = Backbone.Model.extend({
urlRoot: '/user'
});
var user = neuer Benutzer ();
var userDetails = {
Name: 'Name',
E-Mail: 'name@email.com'
};
user.save(userDetails, {
Erfolg: Funktion (Benutzer) {
console.log(user.toJSON());
}
})
Der obige Code gibt zunächst an, dass die dem Modell entsprechende URL in der Klasse /user lautet, erstellt dann eine neue Instanz und ruft schließlich die Speichermethode auf. Es verfügt über zwei Parameter: Der erste ist das spezifische Attribut des Instanzobjekts und der zweite Parameter ist ein Rückruffunktionsobjekt, das die Rückruffunktion für das Erfolgsereignis festlegt (erfolgreich speichern). Konkret stellt die Speichermethode eine POST-Anfrage an /user und stellt {name: ‚name‘, email: ‚name@email.com‘} als Daten bereit.
Wenn eine Modellinstanz ein ID-Attribut enthält, verwendet die Speichermethode die PUT-Methode, um die Instanz zu aktualisieren.
var user = neuer Benutzer ({
ID: 1,
Name: '张三',
E-Mail: 'name@email.com'
});
user.save({name: '李思'}, {
Erfolg: Funktion (Modell) {
console.log(user.toJSON());
}
});
Im obigen Code enthält die Objektinstanz das id-Attribut (der Wert ist 1), und save verwendet die PUT-Methode, um eine Anfrage an die URL „/user/1“ zu stellen, um die Instanz zu aktualisieren.
Zerstörungsmethode
Die Methode destroy wird verwendet, um die Instanz auf dem Server zu löschen.
var user = neuer Benutzer ({
ID: 1,
Name: 'Name',
E-Mail: 'name@email.com'
});
user.destroy({
Erfolg: Funktion () {
console.log('Zerstört');
}
});
Die Destroy-Methode des obigen Codes verwendet das HTTP-Verb DELETE, um eine Anfrage an die URL „/user/1“ zu stellen, um die entsprechende Modellinstanz zu löschen.
Backbone.Collection
Collection ist eine Sammlung von Models desselben Typs. Model ist beispielsweise ein Tier und Collection ist ein Zoo; Model ist eine einzelne Person und Collection ist ein Unternehmen.
var Song = Backbone.Model.extend({});
var Album = Backbone.Collection.extend({
Modell: Lied
});
Im obigen Code ist Song ein Modell, Album ist eine Sammlung und Album hat ein Modellattribut gleich Song, was angibt, dass Album eine Sammlung von Songs ist.
Methode hinzufügen, Methode entfernen
Modellinstanzen können direkt in Sammlungsinstanzen platziert oder mit der Add-Methode hinzugefügt werden.
var song1 = new Song({ id: 1 ,name: „歌名1“, artist: „张三“ });
var song2 = neue Musik ({id: 2,name: „歌名2“, Künstler: „李思“ });
var myAlbum = neues Album([Lied1, Lied2]);
var song3 = new Music({ id: 3, name: „ Song name 3“, artist: „Zhao Wu“ });
myAlbum.add(song3);
Die Remove-Methode wird verwendet, um eine Model-Instanz aus einer Collection-Instanz zu entfernen.
myAlbum.remove(1);
Der obige Code zeigt, dass der Parameter der Remove-Methode das ID-Attribut der Modellinstanz ist.
Methode abrufen, Methode festlegen
Die get-Methode wird verwendet, um die Modellinstanz mit der angegebenen ID aus der Sammlung abzurufen.
myAlbum.get(2))
Abrufmethode
Die Abrufmethode wird verwendet, um Sammlungsdaten vom Server abzurufen.
var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();
Backbone.events
var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
$('#display').text(msg);
});
obj.trigger("show-message", "Hello World");
