image.png

    1. class EventBus{
    2.     events = {}
    3.     on(event, cb){
    4.         let cbs = this.events[event] || [];
    5.         this.events[event] = [...cbs, cb]
    6.     }
    7.     off(event, cb){
    8.         let cbs = this.events[event] || [];
    9.         let index = cbs.indexOf(cb);
    10.         if (index !== -1){
    11.             this.events[event].splice(index, 1);
    12.         }
    13.     }
    14.     emit(event){
    15.         let cbs = this.events[event] || [];
    16.         cbs.forEach(cb=>cb())
    17.     }
    18. }
    20. --------------------------------------------------------------------------
    21. <!DOCTYPE html>
    22. <html lang="en">
    23. <head>
    24.     <meta charset="UTF-8">
    25.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    26.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    27.     <title>SPA的原生实现</title>
    28. </head>
    29. <body>
    30.     <!-- 导航区域 -->
    31.     <div class="router_box">
    32.         <a href="/home" class="router" replace="true">主页</a>
    33.         <a href="/news" class="router">新闻</a>
    34.         <a href="/team" class="router">团队</a>
    35.         <a href="/about100" class="router">关于</a>
    36.     </div>
    37.     <!-- 路由区域 -->
    38.     <div id="router-view"></div>
    39.     <script src='./EventBus.js'></script>
    41.     <script>
    42.         let event = new EventBus();
    43.         function Router(options){
    44.             this.mode = options.mode || 'hash';
    45.             this.routes = options.routes || [];            
    47.             this.init = function(){
    48.                 var eles = document.querySelectorAll('.router');
    49.                 var that = this;
    50.                 [...eles].forEach(item=>{
    51.                     item.addEventListener('click', function(e){
    52.                         e.stopPropagation();
    53.                         e.preventDefault();
    55.                         var path = e.target.getAttribute('href');
    56.                         var isReplace = e.target.getAttribute('replace');
    57.                         console.log('path...', path, isReplace);
    58.                         if (that.mode == 'hash'){
    59.                             if (isReplace){
    60.                                 let index = window.location.href.indexOf('#');
    61.                                 window.location.replace(`${window.location.href.slice(0, index)}#${path}`);
    62.                             }else{
    63.                                 window.location.hash = `#${path}`;
    64.                             }
    65.                         }else{
    66.                             if (isReplace){
    67.                                 window.history.replaceState('', '', path);
    68.                             }else{
    69.                                 window.history.pushState('', '', path);
    70.                             }
    71.                             event.emit('popstate');
    72.                         }
    73.                     })
    74.                 })
    76.                 // 监听相关事件
    77.                 if (this.mode === 'hash'){
    78.                     window.addEventListener('hashchange', this.routeChange.bind(this))
    79.                 }else{
    80.                     window.addEventListener('popstate', this.routeChange.bind(this))
    81.                     event.on('popstate', this.routeChange.bind(this));
    82.                 }
    84.                 // 初始化routeChange
    85.                 this.routeChange();
    86.             }
    88.             // 响应路由变化
    89.             this.routeChange = function(){
    90.                 let routerView = document.querySelector('#router-view');
    91.                 console.log('routeChange...');
    92.                 if (this.mode === 'hash'){
    93.                     let path = window.location.hash.slice(1);
    94.                     let index = this.routes.findIndex(item=>item.path === path);
    96.                     if (index !== -1){
    97.                         routerView.innerHTML = this.routes[index].component;
    98.                     }else{
    99.                         let matchAllIndex = this.routes.findIndex(item=>item.path === '*')
    100.                         if (matchAllIndex !== -1){
    101.                             let index = window.location.href.indexOf('#');
    102.                             window.location.replace(`${window.location.href.slice(0, index)}#${this.routes[matchAllIndex].redirect}`);
    103.                         }
    104.                     }
    105.                 }else{
    106.                     let path = window.location.pathname;
    107.                     let index = this.routes.findIndex(item=>item.path === path);
    109.                     if (index !== -1){
    110.                         routerView.innerHTML = this.routes[index].component;
    111.                     }else{
    112.                         let matchAllIndex = this.routes.findIndex(item=>item.path === '*')
    113.                         if (matchAllIndex !== -1){
    114.                             let index = window.location.href.indexOf('#');
    115.                             window.history.replaceState('', '', this.routes[matchAllIndex].redirect);
    116.                         }
    117.                     }
    118.                 }
    119.             }
    122.             this.init();
    123.         }
    125.         new Router({
    126.             mode: 'hash',
    127.             routes:[
    128.                 { path: '/home', component: '<h1>主页</h1><h4>新一代前端工程师：我们啥都会</h4>' },
    129.                 { path: '/news', component: '<h1>新闻</h1><h4>今天2018-11-5，上课还得穿工装</h4>' },
    130.                 { path: '/team', component: '<h1>团队</h1><h4>WEB前端工程师</h4>' },
    131.                 { path: '/about', component: '<h1>关于</h1><h4>一面而高薪就业</h4>' },
    132.                 { path:'*', redirect:'/home'}
    133.             ]
    134.         })
    135.     </script>
    136. </body>
    137. </html>