suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert benutzerdefiniertes Routing

js implementiert benutzerdefiniertes Routing

高洛峰
高洛峰Original
2017-02-06 11:11:111027Durchsuche

Dieser Artikel implementiert benutzerdefiniertes Routing, hauptsächlich die Verwendung von Ereignis-Hashchange, und kapselt es dann entsprechend unseren Geschäftsanforderungen.

Implementieren Sie zunächst eine Router-Klasse und instanziieren Sie sie. 

function _router(config){
 this.config = config ? config : {}; 
} 
_router.prototype = {
 event:function(str,callback){
  var events = str.split(' ');
  for (var i in events) window.addEventListener(events[i],callback,false);
 },
init: function() {
 this.event('load hashchange',this.refresh.bind(this));
 return this;
},
refresh: function() {
 this.currentUrl = location.hash.slice(1) || '/';
 this.config[this.currentUrl]();
},
route: function(path,callback){
 this.config[path] = callback || function(){};
}
}
function router (config){
 return new _router(config).init();
}

Das Einzige, was oben beachtet werden muss, ist, dass Sie bei der Verwendung von addEventListener auf die Verwendung der Bindefunktion achten müssen, da ich in eine Falle getreten bin und dann $.proxy( ).

Sie können bei der Verwendung oben zwei Methoden zur Registrierung verwenden, die zweite hängt jedoch von der ersten ab.

Methode eins: 

var Router = router({
 '/' : function(){content.style.backgroundColor = 'white';},
 '/1': function(){content.style.backgroundColor = 'blue';},
 '/2': function(){content.style.backgroundColor = 'green';}
})

Methode zwei:

Router.route('/3',function(){ content.style.backgroundColor = 'yellow'; })

Vollständiger Code: 

<html>
 <head>
  <title></title>
 </head>
 <body>
  <ul>
   <li><a href="#/1">/1: blue</a></li>
   <li><a href="#/2">/2: green</a></li>
   <li><a href="#/3">/3: yellow</a></li>
  </ul>
  <script>
  var content = document.querySelector(&#39;body&#39;);
  function _router(config){
   this.config = config ? config : {}; 
  } 
  _router.prototype = {
   event:function(str,callback){
    var events = str.split(&#39; &#39;);
    for (var i in events) window.addEventListener(events[i],callback,false);
   },
   init: function() {
    this.event(&#39;load hashchange&#39;,this.refresh.bind(this));
    return this;
   },
   refresh: function() {
    this.currentUrl = location.hash.slice(1) || &#39;/&#39;;
    this.config[this.currentUrl]();
   },
   route: function(path,callback){
    this.config[path] = callback || function(){};
   }
  }
  function router (config){
   return new _router(config).init();
  }
  var Router = router({
   &#39;/&#39; : function(){content.style.backgroundColor = &#39;white&#39;;},
   &#39;/1&#39;: function(){content.style.backgroundColor = &#39;blue&#39;;},
   &#39;/2&#39;: function(){content.style.backgroundColor = &#39;green&#39;;}
  })
  Router.route(&#39;/3&#39;,function(){
   content.style.backgroundColor = &#39;yellow&#39;;
  })
  </script>
 </body>
</html>
<script> 
</script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels für das Studium oder die Arbeit aller hilfreich sein kann, und ich hoffe auch um PHP mehr zu unterstützen!

Weitere Artikel zur js-Implementierung von benutzerdefiniertem Routing finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
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
Vorheriger Artikel：JavaScript implementiert die automatische TextausgabeNächster Artikel：JavaScript implementiert die automatische Textausgabe

In Verbindung stehende Artikel

Mehr sehen