history辅助下的SPA路由实现

      上篇文章简单介绍了html5的history api,这篇将就进入实战环节。看看在history api的辅助下,目前流行的前端SPA框架路由是怎么实现的。

1.什么是SPA

        首先,什么事spa呢?一句话概括:spa就是单页面应用,即:single page application。通过看源码就可以发现,整个网站就只有一个html文件。

        那么,spa有什么优势呢?为什么前端要采用这种技术选型呢?小编总结了下,觉得有点有一下几点:

        a.减小服务器压力。 如果不用SPA,那么我们每次切换页面的时候,就会向服务器发送一个请求,服务器返回一个html文件;但是如果使用了SPA,在切换时,不需要请求服务器,只要通过本地的js来切换即可。并且服务器端就不需要配置路由,完全做到了前后端分离,这对于分工合作的意义可想而知。

        b.增强用户体验,增加app的使用流畅性。 做过spa的同学都知道,使用spa之后,页面在切换的时候非常流畅,完全没有那种不断刷新的感觉,而是非常快的就有了响应,因为js运行速度很快,所以js在做本地路由的时候,就会非常快。

        然则,牛逼的spa就没有缺点了吗?答案是有的。

        a.SEO问题没有html抓不到什么。。。 
        b.刚开始的时候加载可能慢很多 
        c.用户操作需要写逻辑,前进、后退等; 

        d.页面复杂度提高很多,复杂逻辑难度成倍

        a,b两点可以通过服务端渲染克服。目前流行的前端框架也已经能很好的支持服务端渲染。d却要根据具体业务需求合理的进行页面分割、组件划分。至于c,咱们就结合昨天所讲的history api看看具体如何解决。

2.SPA路由实现有哪些

        目前来说,无论是vue,还是react,spa的路由实现方式无非就是以下两者:

            1.hash方式。 使用location.hash和hashchange事件实现路由。  

            2.history api。使用html5的history api实现,主要就是popState事件等。

        hash用的还是比较多的,但是这种方式的url会比较丑陋,会出现 #; 而history api就可以很好的解决这个问题,但是需要后端配置,并且由于是html5中的api,所以兼容性还不是很好,用的时候需要确定你的用户在做决定。

2.1 HashRouter

        具体实现代码如下:

function HashRouter() {
  this.routes = {};
  this.currentUrl = '';
};

HashRouter.prototype.init = function() {
  window.addEventListener( 'load', this.refresh.bind( this ), false );
  window.addEventListener( 'hashchange', this.refresh.bind( this ), false );
};

HashRouter.prototype.refresh = function () {
  this.currentUrl = location.hash.slice( 1 ) || '/';
  this.routes[ this.currentUrl ]();
};

HashRouter.prototype.route = function( path, callback ) {
  this.routes[ path ] = callback || function(){};
};

1.首先定义一个HashRouter构造函数,currentUrl存放当前地址,routes存放历史地址及其各自对应的回调函数。

2.route方法用于向hashRouter对象注册路由地址和回调函数

3.refresh方法会在路由切换时执行刷新页面

4.在路由注册完成后会执行init方法,以监听地址栏hash值的变化

2.2 BrowserRouter

        上面使用的hash方法实现路由固然不错,但是也是存在一定的问题的,就是太丑~ 如果在微信中使用,看不到url倒也无所谓,但是如果在一般的浏览器中使用就会遇到问题了。所以这里使用 history api。具体代码如下:

<script type="text/javascript">
  function MyBrowserRouter() {
    this.currentRoute = '';
    this.routes = {};
    this.init();
  }

  MyBrowserRouter.prototype.route = function( path, callback ) {
    this.routes[ path ] = function( type ) {
      if ( type === 1 ) {
        history.pushState( { path }, path, path );
      } else if ( type === 2 ) {
        history.replaceState( { path }, path, path );
      }
      callback();
    }
  };

  MyBrowserRouter.prototype.refresh = function( path, type ) {
    this.routes[ path ]( type );
  };

  MyBrowserRouter.prototype.init = function() {
    let links = document.querySelectorAll( '.history-link' );

    window.addEventListener( 'load', () => {
      this.currentRoute = location.href.slice( location.href.indexOf( '/', 8 ) );
      this.refresh( this.currentRoute, 2 );
    } );

    window.addEventListener( 'popstate', () => {
      this.currentRoute = history.state.path;
      this.refresh( this.currentRoute, 2 );
    }, false );

    for ( let i = 0; i < links.length; i++ ) {
      links[ i ].onclick = ( e ) => {
        e.preventDefault();
        this.currentRoute = e.target.getAttribute( 'href' );
        this.refresh( this.currentRoute, 2 );
      }
    }
  };
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值