Detaillierte Erläuterung der Javascript-MVC-Framework-Backbone.js_javascript-Fähigkeiten

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

Code kopieren Der Code lautet wie folgt:

Backbone.View

Grundlegende Verwendung

Die Backbone.View-Methode wird zum Definieren der Ansichtsklasse verwendet.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

var Document = Backbone.View.extend({
tagName: „li“,
Klassenname: „Dokument“,
render: function() {
// ...
}
});

Vorlagenmethode

Das Vorlagenattribut der Ansicht wird verwendet, um die Webseitenvorlage anzugeben.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

Die Vorlage kann mit dem folgenden Code kompiliert werden.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code 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 Remove-Methode wird verwendet, um eine Ansicht zu entfernen.

Code kopieren Der Code lautet wie folgt:

updateView: function() {
view.remove();
view.render();
};

Unteransicht

Unteransichten können in übergeordneten Ansichten aufgerufen werden. Hier ist eine Möglichkeit, es zu schreiben.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

Backbone.history.start({pushState: true, root: "/public/search/"})
Backbone.Model

Das Modell stellt eine einzelne Objektentität dar.

Code kopieren Der Code 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 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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

var Music = Backbone.Model.extend({
idAttribute: 'id'
});

Methode abrufen

Die get-Methode wird verwendet, um den Wert eines bestimmten Attributs der Modellinstanz zurückzugeben.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

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.

Code kopieren Der Code lautet wie folgt:

myAlbum.get(2))

Abrufmethode

Die Abrufmethode wird verwendet, um Sammlungsdaten vom Server abzurufen.

Code kopieren Der Code lautet wie folgt:

var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();

Backbone.events

Code kopieren Der Code lautet wie folgt:

var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
$('#display').text(msg);
});
obj.trigger("show-message", "Hello World");