js implementiert benutzerdefiniertes Routing-js-Tutorial-php.cn

js implementiert benutzerdefiniertes Routing

高洛峰

Freigeben： 2017-02-06 11:11:11

Original

1059 Leute haben es durchsucht

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(&#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();
}

Nach dem Login kopieren

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({
 &#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;;}
})

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!