class HashRouter {
constructor(){
//hash --- > callback
this.routes={};
// this.routes = {
// '/home':fn1,
// '/news':fn2
// };
this.currentHash=''; //保存当前的hash
// var _this = this; //第一种方式
// window.addEventListener('hashchange',function(){
// console.log('kkkk');
// _this.hashChangeUrl();
// },false);
//第二种方式：
// window.addEventListener('hashchange',this.hashChangeUrl.bind(this),false);
//第三种方式箭头函数
window.addEventListener('hashchange',()=>{
this.hashChangeUrl();
},false);
// false :冒泡
//页面加载的事件
window.addEventListener('load',()=>{
this.hashChangeUrl();
},false)
}
//path路径和callback函数对应起来
route(path,callback) {
this.routes[path] = callback;
}
hashChangeUrl(){
//获取当前hash
// location.hash 获取的值为："#/a, 因此 location.hash.slice(1) = '/a' 这样的
this.currentHash = location.hash.slice(1);
//当前hash所对应的回调函数
this.routes[this.currentHash](this.currentHash);
}
}
var router = new HashRouter();
const body = document.querySelector('body');
function changeColor(color,html,data){
body.style.backgroundColor=color;
var activedM = mainMenu.querySelector('a.active');
activedM && activedM.classList.remove('active');
mainMenu.querySelector(`a[href="#${data}"]`).classList.add('active');
content.innerHTML = html;
}
router.route('/',function(data){
changeColor('red',`<div>我是首页 <p>测试</p></div>`,data);
})
router.route('/home',function(data){
changeColor('red',`<div>我是首页 <p>测试</p></div>`,data);
})
router.route('/news',function(data){
changeColor('green',`<div>我是新闻页 <p>测试2</p></div>`,data);
})
router.route('/product',function(data){
changeColor('blue',`<div>我是产品页 <p>测试3</p></div>`,data);
})