console 命令行工具 X clear

console

class HashRouter {
    constructor() {
        //用于存储不同hash值对应的回调函数
        this.routers = {};
        window.addEventListener('hashchange', this.load.bind(this), false)
    }
    //用于注册每个视图
    register(hash, callback = function () { }) {
        this.routers[hash] = callback;
    }
    //用于注册首页
    registerIndex(callback = function () { }) {
        this.routers['index'] = callback;
    }
    //用于处理视图未找到的情况
    registerNotFound(callback = function () { }) {
        this.routers['404'] = callback;
    }
    //用于处理异常情况
    registerError(callback = function () { }) {
        this.routers['error'] = callback;
    }
    //用于调用不同视图的回调函数
    load() {
        let hash = location.hash.slice(1),
            handler;
        //没有hash 默认为首页
        if (!hash) {
            handler = this.routers.index;
        }
        //未找到对应hash值
        else if (!this.routers.hasOwnProperty(hash)) {
            handler = this.routers['404'] || function () { };
        }
        else {
            handler = this.routers[hash]
        }
        //执行注册的回调函数
        try {
            handler.apply(this);
        } catch (e) {
            console.error(e);
            (this.routers['error'] || function () { }).call(this, e);
        }
    }
}
let router = new HashRouter();
    let container = document.getElementById('container');

    //注册首页回调函数
    router.registerIndex(() => container.innerHTML = '我是首页');
    //注册其他视图回到函数
    router.register('/page1', () => container.innerHTML = '我是page1');
    router.register('/page2', () => container.innerHTML = '我是page2');
    router.register('/page3', () => container.innerHTML = '我是page3');
    router.register('/page4', () => { throw new Error('抛出一个异常') });

    //加载视图
    router.load();
    //注册未找到对应hash值时的回调
    router.registerNotFound(() => container.innerHTML = '页面未找到');
    //注册出现异常时的回调
    router.registerError((e) => container.innerHTML = '页面异常，错误消息：<br>' + e.message);

<body>
	<div id="nav">
		<a href="#/page1">page1</a>
		<a href="#/page2">page2</a>
		<a href="#/page3">page3</a>
		<a href="#/page4">page4</a>
		<a href="#/page5">page5</a>
	</div>
	<div id="container"></div>
</body>
<script>
	

</script>