路由切换:监听hashchange事件实现

感谢这两位大佬的分享:

原生js中的bind()

哈希路由实现&原理

暑期实习还是没有着落...HR们是不是都觉得,这位同学就实习两个月,东西学完了就跑了?

呜呜呜不是啊我会好好工作的

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Router By Hashtitle>
head>
<body>
    <ul>
        <li><a href="#01">1a>li>
        <li><a href="#02">2a>li>
        <li><a href="#03">3a>li>
        <li><a href="#04">4a>li>
    ul>
    <div>

    div>
body>
<script>
    window.onload = function(){
    (//将路由函数包裹在IIFE内防止污染全局作用域
        function(){
        var Router = function(){
            this.routes = {};
            this.curUrl = '/';
        };
         
        Router.prototype.init= function(){
            // 对路由的hash值进行监听,如果发生改变,则调用reloadPage()函数
            // 这里的两个this 是不一样的,需要注意
            window.addEventListener('hashchange',this.reloadPage.bind(this));
            //bind()方法创建一个新的函数(称为绑定函数), 当被调用时,将其this关键字设置为提供的值,
       //在这里,当触发hashchange事件,会调用Router.prototype.reloadPage方法,如果直接this.reloadPage(),这个this会指向全局对象
        //因此这样将其绑定
}; // 调用reloadPage函数,实际上时执行routes[]()函数 Router.prototype.reloadPage = function(){ //location.hash为#01,则this.curUrl为01,如果没找到,就为'/' this.curUrl = location.hash.substring(1)||'/'; this.routes[this.curUrl]();//this.router[01]()方法,在原型对象的map方法中创建 }; // 路由配置的规则 Router.prototype.map = function(key,callback){ this.routes[key] = callback; //this.router[01] = callback } //将其暴露出去 window.Router = Router; })(); var ORouter = new Router(); //初始化,当路由改变,执行以当前实例为调用对象的reloadPage方法 ORouter.init(); // 以下为路由配置的设置,形象的当做一个路由与调用函数的映射表也可以 ORouter.map('/',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "0"; }); ORouter.map('01',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "1"; }); ORouter.map('02',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "2"; }); ORouter.map('03',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "3"; }); ORouter.map('04',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "4"; }); ORouter.map('05',function(){ var Osect = document.querySelector('div'); Osect.innerHTML = "5"; }); } script> html>

 

 

转载于:https://www.cnblogs.com/linbudu/p/11097627.html

你可能感兴趣的:(路由切换:监听hashchange事件实现)