js implémente un routage personnalisé-js tutoriel-php.cn

js implémente un routage personnalisé

高洛峰

Libérer： 2017-02-06 11:11:11

original

1034 Les gens l'ont consulté

Cet article implémente un routage personnalisé, principalement en utilisant le hachage d'événement, puis l'encapsule en fonction de nos besoins commerciaux.

Implémentez d’abord une classe de routeur et instanciez-la.

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

Copier après la connexion

La seule chose qui doit être notée ci-dessus est que lorsque vous utilisez addEventListener, vous devez faire attention à l'utilisation de la fonction bind, car j'ai marché sur un piège et j'ai ensuite réalisé $.proxy( ).

Vous pouvez utiliser deux méthodes pour vous inscrire lorsque vous l'utilisez ci-dessus, mais la seconde dépend de la première.

Première méthode :

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;;}
})

Copier après la connexion

Méthode deux :

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

Code complet :

<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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra être utile aux études ou au travail de chacun, et j'espère aussi. pour supporter davantage le site Web chinois !

Pour plus d'articles liés à l'implémentation js du routage personnalisé, veuillez faire attention au site Web PHP chinois !