前端路由的简单实现

前言

前端路由，相信使用过angular，backbone，react等框架的你一定很熟悉这个名称，但这路由是如何实现的？我们来看一下吧！

hash形式实现

原理: 以hash形式，当url的hash发生变化时，触发hashchange注册的回调函数，回调中进行不同的啊偶哦，进行不同内容的展示。

简易前端路由实现

(function () {
	function Router() {
	    this.routes = {};
	    this.currentUrl = '';
	}
	Router.prototype.route = function(path, callback) {
	    this.routes[path] = 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);
	}
	window.Router = new Router();
	window.Router.init();
}())

上面路由系统 Router 对象实现，主要提供三个方法

init 监听浏览器 url hash 更新事件
route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
refresh 执行当前url对应的回调函数，更新页面

demo例子：
通过点击各个链接，hash变化，调用hashchange回调函数，改变背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>routerDemo</title>
</head>
<body>
	<ul>
		<li><a href="#/">turn white</a></li> 
	    <li><a href="#/blue">turn blue</a></li> 
	    <li><a href="#/green">turn green</a></li> 
	</ul>
</body>
<script>
(function () {
	function Router() {
	    this.routes = {};
	    this.currentUrl = '';
	}
	Router.prototype.route = function(path, callback) {
	    this.routes[path] = 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);
	}
	window.Router = new Router();
	window.Router.init();
}())	
</script>
<script>
    var content = document.querySelector('body');
    // change Page anything
    function changeBgColor(color) {
        content.style.backgroundColor = color;
    }
    Router.route('/', function() {
        changeBgColor('white');
    });
    Router.route('/blue', function() {
        changeBgColor('blue');
    });
    Router.route('/green', function() {
        changeBgColor('green');
    });	
</script>
</html>

history操作，无刷新改变当前url

认识window.history
window.history表示window对象的历史记录，是由用户主动产生，并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退。
history详细讲解：https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
路由实现

(function () {
	function Router() {
	    this.routes = {};
	    this.currentUrl = '';
	}
	Router.prototype.route = function(path, callback , dom) {
	    this.routes[path] = callback || function(){};
	    dom.onclick = function(){
	    	history.pushState (null,"", this.getAttribute("href") );
	    }
	};
	Router.prototype.refresh = function() {
		
	    this.currentUrl = location.hash.slice(1) || '/';
	    console.log(this.currentUrl)
	    this.routes[this.currentUrl]();
	};
	Router.prototype.init = function() {
	    window.addEventListener('load', this.refresh.bind(this), false);
	    window.addEventListener('popstate', this.refresh.bind(this), false);
	}
	window.Router = new Router();
	window.Router.init();
}())

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>routerHistoryDemo.html</title>
</head>
<body>
	<ul>
		<li><a href="#/" id="main">turn white</a></li> 
	    <li><a href="#/blue" id="blue">turn blue</a></li> 
	    <li><a href="#/green" id="green">turn green</a></li> 
	</ul>
</body>
<script>
(function () {
	function Router() {
	    this.routes = {};
	    this.currentUrl = '';
	}
	Router.prototype.route = function(path, callback , dom) {
	    this.routes[path] = callback || function(){};
	    dom.onclick = function(){
	    	history.pushState (null,"", this.getAttribute("href") );
	    }
	};
	Router.prototype.refresh = function() {
		
	    this.currentUrl = location.hash.slice(1) || '/';
	    console.log(this.currentUrl)
	    this.routes[this.currentUrl]();
	};
	Router.prototype.init = function() {
	    window.addEventListener('load', this.refresh.bind(this), false);
	    window.addEventListener('popstate', this.refresh.bind(this), false);
	}
	window.Router = new Router();
	window.Router.init();
}())
	
</script>
<script>
    var content = document.querySelector('body');
    // change Page anything
    function changeBgColor(color) {
        content.style.backgroundColor = color;
    }
    Router.route('/', function() {
        changeBgColor('white');
    },document.getElementById('main') );
    Router.route('/blue', function() {
        changeBgColor('blue');
    },document.getElementById('blue') );
    Router.route('/green', function() {
        changeBgColor('green');
    },document.getElementById('green'));	
    </script>
</html>

比较

hash：兼容性好

history：简单，还可以用pjax加快渲染（同构直出），有利seo。但是HTML5属性，兼容性较差。

reference

前端路由实现与 react-router 源码分析