IT虾米网

前端路由详解

admin 2018年05月27日 编程语言 150 0

前端路由的两种实现方式:

1. location.hash + hashchange

function Router(){ this.curUrl = ''; this.routes  = {}; 
} 
Router.prototype = { 
    route(path, callback){ this.routes[path] = callback || function(){} 
    }, 
    refresh(){ this.curUrl = location.hash.slice(1) || ''; this.routes[this.curUrl](); 
    }, 
    init(){ 
        window.addEventListener('load', this.refresh.bind(this), false); 
        window.addEventListener('hashchange', this.refresh.bind(this), false); 
    } 
} 
 
// 实例 var r = new Router(); 
r.init(); 
function changecolor(color){ 
  var body = document.getElementsByTagName('body')[0]; 
  body.style['background'] = color; 
} 
r.route('/',changecolor.bind(null,'#aaa'));

2. history API

    pushState(state, title, url)添加记录,replaceState修改记录,popState(只有在前进后退时触发)

(function(){ var a = document.getElementById('a'); var b = document.getElementById('b'); var c1 = 0; var c2 = 0; 
    history.replaceState({c1:c1,c2:c2},null,''); 
    a.addEventListener('click',function(){ 
        c1++;         
        history.pushState({c1:c1,c2:c2},null,'#/a'+c1); 
        a.innerHTML = 'a'+c1; 
    }) 
    b.addEventListener('click',function(){ 
        c2++; 
        history.pushState({c1:c1,c2:c2},null,'#/b'+c2); 
        b.innerHTML = 'b'+c2; 
    }) 
    window.addEventListener('popstate',function(e){ 
        console.log(e.state); 
        a.innerHTML = 'a'+e.state.c1; 
        b.innerHTML = 'b'+e.state.c2; 
    }) 
}())

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

js基础查漏补缺(更新)详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。