Vorwort
Lassen Sie mich zunächst erklären, warum ich Backbone schreiben wollte, denn es war das erste Front-End-Framework, das ich hatte Wird seit dem Abschluss beruflich genutzt. Das Unternehmen, für das ich arbeite, ist ein großes Unternehmen und legt mehr Wert auf Stabilität. Darüber hinaus ist das Rückgrat flexibel und leicht und die Codemenge wird geringer sein.
Nun, eigentlich ist das tatsächlich ein Vorteil, aber ich lerne immer noch gerne neue Technologien, deshalb werde ich den Blog, den ich als nächstes aufbaue, mit anderen teilen (die technischen Sticks sind vue2, koa2, mongodb). , redis...).
Wie der Titel schon sagt, erweitert dieser Artikel hauptsächlich die Methode am BackboneRouting. Denken Sie darüber nach, dass Sie beim Wechseln der Route möglicherweise einige Vorgänge ausführen müssen, bevor oder nachdem Sie die der umgeschalteten Route entsprechenden Verarbeitungsmethode ausgeführt haben. Zu diesem Zeitpunkt ist es für Sie peinlich. Freunde, die Vue verwendet haben, müssen wissen, dass der Vue-Router einen Navigations-Hook bietet.
Ich möchte diese Methode hauptsächlich dann erweitern, wenn im Projekt auf das Umschalten einzelner Seiten gestoßen wird:
Zum Beispiel von A Wenn die Seite auf Seite B wechselt, ist es für Seite A sehr zeitaufwändig, das Backend anzufordern. Wenn das Backend zu diesem Zeitpunkt noch nicht geantwortet hat, wechselt es zu Seite B. Wenn die Anfrage nach dem Wechsel zu Seite B fehlschlägt und eine Fehlermeldung angezeigt wird, handelt es sich offensichtlich um einen UX-Fehler.
Einige Freunde denken vielleicht, dass ich die aktuelle URL beurteile und dann entscheide, ob das Popup angezeigt wird, aber ich möchte beurteilen ob die aktuelle Seite vor dem Wechsel ist. Wenn eine Anfrage aussteht, brechen Sie diese einfach ab. Es kommt also zu der oben genannten Nachfrage.
Text
Erstellen wir zunächst eine Schnittstelle mit Backbone-Routing-Funktion. Die Schnittstelle ist einfach, also füge ich den Code ein
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><ahref="#pz">pz</a></li>
<li><ahref="#wx">wx</a></li>
<li><ahref="#sp">sp</a></li>
</ul>
<pid="page"></p>
</body>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/underscore.js/1.6.0/underscore.js"></script>
<scriptsrc="https://cdn.bootcss.com/backbone.js/1.1.0/backbone.js"></script>
<script>
varRouter = Backbone.Router.extend({
initialize:function() {
console.log('initialize');
},
routes: {
'':'pz',
'pz':'pz',
'wx':'wx',
'sp':'sp'
},
pz:function() {
console.log('pz');
document.getElementById('page').innerHTML ='Hello pz';
},
wx:function() {
console.log('wx');
document.getElementById('page').innerHTML ='Hello wx';
},
sp:function() {
console.log('sp');
document.getElementById('page').innerHTML ='Hello sp';
}
});
varrouter = newRouter();
Backbone.history.start();
</script>
</html>Nach dem Login kopieren
Zu diesem Zeitpunkt müssen wir den Backbone-Quellcode überprüfen. Hier ist Amway bootcdn, der bequemste Ort zum Herunterladen des Quellcodes verschiedener JS-Bibliotheken. Genau wie hier verwende ich Version 1.1.0 von Backbone (das ist es, was das Unternehmen verwendet und ich bin zu faul, es zu ändern).
Da wir die Methode before hinzufügen möchten, bevor wir die spezifische Routing-Methode auslösen, ist es offensichtlich, dass wir den Teil dieser Methode in der Quelle analysieren müssen Code
Es ist für uns leicht zu finden
An diesem Punkt können Sie Folgendes erhalten (natürlich kann es gemäß der Initialisierungsmethode geschrieben werden)
Ändern Sie dann unsere index.html
Diesmal ist der Schalter sichtbar
Natürlich ist es nicht freundlich, den Quellcode direkt zu ändern. Wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><ahref="#pz">pz</a></li>
<li><ahref="#wx">wx</a></li>
<li><ahref="#sp">sp</a></li>
</ul>
<p id="page"></p>
</body>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/underscore.js/1.6.0/underscore.js"></script>
<scriptsrc="https://cdn.bootcss.com/backbone.js/1.1.0/backbone.js"></script>
<script>
Backbone.Router.prototype.before =function () { };
Backbone.Router.prototype.after =function () { };
Backbone.Router.prototype.route =function (route,name,callback)
{
if (!_.isRegExp(route))route =this._routeToRegExp(route);
if (_.isFunction(name)) {
callback = name;
name = '';
}
if (!callback)callback =this[name];
var router =this;
Backbone.history.route(route,function (fragment)
{
var args =router._extractParameters(route,fragment);
router.before.apply(router,args);
callback && callback.apply(router,args);
router.after.apply(router,args);
router.trigger.apply(router, ['route:' +name].concat(args));
router.trigger('route',name,args);
Backbone.history.trigger('route',router,name,args);
});
return this;
};
var Router =Backbone.Router.extend({
initialize: function () {
console.log('initialize');
},
before: function () {
console.log('before');
},
after: function () {
console.log('after');
},
routes: {
'': 'pz',
'pz': 'pz',
'wx': 'wx',
'sp': 'sp'
},
pz: function () {
console.log('pz');
document.getElementById('page').innerHTML ='Hello pz';
},
wx: function () {
console.log('wx');
document.getElementById('page').innerHTML ='Hello wx';
},
sp: function () {
console.log('sp');
document.getElementById('page').innerHTML ='Hello sp';
}
});
var router =newRouter();
Backbone.history.start();
</script>
</html>Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonSo fügen Sie Navigations-Hooks ähnlich wie beim Vue-Router im Backbone-Routing hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
