Maison > interface Web > js tutoriel > Méthode JS pour implémenter des compétences simples en fonction de routeur_javascript

Méthode JS pour implémenter des compétences simples en fonction de routeur_javascript

WBOY
Libérer: 2016-05-16 15:57:33
original
1417 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter des fonctions de routeur simples dans JS. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

var wawa = {};
wawa.Router = function(){
  function Router(){
  }
  Router.prototype.setup = function(routemap, defaultFunc){
    var that = this, rule, func;
    this.routemap = [];
    this.defaultFunc = defaultFunc;
    for (var rule in routemap) {
      if (!routemap.hasOwnProperty(rule)) continue;
      that.routemap.push({
        rule: new RegExp(rule, 'i'),
        func: routemap[rule]
      });       
    }
  };
  Router.prototype.start = function(){
    console.log(window.location.hash);
    var hash = location.hash, route, matchResult;
    for (var routeIndex in this.routemap){
      route = this.routemap[routeIndex];
      matchResult = hash.match(route.rule);
      if (matchResult){
        route.func.apply(window, matchResult.slice(1));
        return; 
      }
    }
    this.defaultFunc();
  };
  return Router;
}();
var router = new wawa.Router();
router.setup({
  '#/list/(.*)/(.*)': function(cate, id){
      console.log('list', cate, id);
    },
  '#/show/(.*)': function(id){
      console.log('show', id); 
    }
}, function(){
  console.log('default router');
});
router.start();

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal