前端路由筆記

前端路由的實現本質：檢測URL變化，獲取url地址，解析url匹配頁面；
檢測URL變化有兩種方式： hash，HTML5 History

1. HTML5 History
   history.pushState 和 history.replaceState這兩個api都分別接收三個參數：狀態對象，標題， url(此url地址不支持跨域，跨域會報錯)
   這兩個API都會操做瀏覽器的歷史記錄，並不引發瀏覽器的刷新，pushState會增長一條新的歷史記錄，replaceState會替換當前的歷史記錄；
   popstate事件，須要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在作出瀏覽器動做時，纔會觸發該事件，如用戶點擊瀏覽器的回退按鈕，或者在Javascript代碼中調用3.back()。
   原理在點擊某個路由時執行pushState，在操做瀏覽器時執行popstate；
2. hash location.hash
   window.location修改hash至不會引發頁面刷新，而是看成新頁面加到歷史記錄中。hash值變化會觸發hashchange事件。

Function Router(){
    this.currentUrl = '';
    this.routes = {};
}

Router.prototype.route = function(url, callback){
    this.routes[url] = callback || function(){}
}

Router.prototype.refresh = function(){
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
}

Router.prototype.init = function(){
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//使用
var $target = $('#target');
var route = new Router();
route.init();
route.route('/', $target.html('this is index page!!') );
route.route('/page1', $target.html('this is page1!!'));