0%

JS 手写简单的路由

手写实现简单的 hash 路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function Router() {
// 切换到某路由执行回调
this.routerList = {};
// 当前页面
this.currentUrl = '';
}

Router.prototype.change = function () {
console.log('this :>> ', this);
let hash = location.hash.slice(1);
// 如果hash一致不进行操作,hash不同执行回调
if (hash && hash != this.currentUrl) {
this.currentUrl = hash;
if (hash in this.routerList) {
this.routerList[hash]();
}
}
};

Router.prototype.add = function (path, callback) {
// 注册一个页面对应的事件
this.routerList[path] = callback;
};

Router.prototype.init = function () {
// 监听页面hash变化执行回调
window.addEventListener('load', this.change.bind(this), false);
window.addEventListener('hashchange', this.change.bind(this), false);
};

测试

1
2
3
4
5
6
7
8
let test = new Router();
test.init();
test.add('123', () => {
console.log('123');
});
test.add('456', () => {
console.log('456');
});