<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="result"></div>
</body>
</html>
<script type="text/javascript">
function Router() {
// 路由储存
this.routes = {};
// 当前路由
this.currentUrl = '';
}
Router.prototype = {
// 路由处理
route: function (path, callback) {
this.routes[path] = callback || function(){};
},
// 页面刷新
refresh: function () {
// 当前的hash值
this.currentUrl = location.hash.slice(1) || '/';
// 执行hash值改变后相对应的回调函数
this.routes[this.currentUrl]();
},
// 页面初始化
init: function () {
// 页面加载事件
window.addEventListener('load', this.refresh.bind(this), false);
// hash 值改变事件
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
}
// 全局挂载
window.Router = new Router();
// 初始化
window.Router.init();
let obj = document.querySelector('.result');
function changeConent (cnt) {
obj.innerHTML = cnt
}
// 匹配路由做相应的操作
Router.route('/', function(){
changeConent("首页");
})
Router.route('/item', function(){
changeConent('item页面');
})
Router.route('/list', function(){
changeConent('list页面')
})
</script>
补充： 模拟mvvm的双向数据绑定