大话 SPA router

好吧，俺认可好像要当一把标题党了，这篇文章目的是记录一下对于 spa 的核心 —— 路由的学习，并无什么超人类的东西，好了，咱们开始吧。

SPA 是个啥？

相信仍是有很多的萌新是不知道 SPA 是个啥？是否是想问一句，你是谁？你是否是搞美容的那个 SPA。其实并非，SPA 在前端领域可不是美容的，它是单页应用的意思，那么啥是单页应用呢？在这个时代若是不知道这个名词的多半是萌新了,咱们也简单的聊一聊这个东西。

之前咱们开发应用的时候，会写多个页面，好比说首页、详情等等，咱们经过点击页面的 a 标签，而后去获取另外一个页面，从新加载，或者跳转。而单页应用只提供一个 HTML 文件，在页面初始化的时候加载 js、css 等等，而后经过 js 去动态更新视图，从而实现交互，这避免了页面的刷新，跳转等等。

So，单页应用的优势是啥呢？

• 先后端分离，提高开发效率
• 减轻服务器压力，前端完成很大一部分逻辑
• 提高用户体验，如丝般润滑啊

技术核心

其实谈到 SPA，咱们实现的方法大概就有 hash 和 H5 的 History 两种，咱们来了解下。

History API

在 HTML5 中，咱们能够发现 History 多出了几个 API，咱们来一块儿走一遍：

1. history.pushState( data, title[, url] ): 顾名思义，往历史记录栈栈顶添加一条数据，data 会做为触发 popstate 事件的时候的参数，titile 为标题，url 为页面地址。
2. history.replaceState( data, title[, url] ): 这个方法是用来更换历史记录的。
3. history.state: 获取当前历史栈栈顶数据。
4. event -> popstate: 当用户点击浏览器回退或者前进按钮就会触发 popstate 事件。

咱们来搞一个简单的例子，就知道 history 是怎么作的了。

<div id="app">
  <a class="route" path="a.html">首页</a>
  <a class="route" path="b.html">详情页</a>
</div>

这是 html 文件，下面就是 js 文件了：

const routes = document.querySelectorAll('.route');
routes.forEach(route => {
    route.addEventListener('click', e => {
        e.preventDefault();
        // 在这里面，咱们也是能够经过参数的不一样，而后渲染不一样的页面。
        const path = route.getAttribute('path');
        window.history.pushState({ public: 'data' }, null, path);
    }, false);
});

window.addEventListener('popstate', e => {
    // 好比说在这里面能够经过路径的不一样，而后去渲染不一样的页面。
}, false);

咱们首先是经过点击，而后将 data、url 等参数 push 到栈里面，而后渲染页面，若是说咱们经过浏览器的回退或者前进，就会触发 popstate，而后经过不一样路径进行页面渲染，其实 history 就是这么一个基本原理。

Hash

这种方案就是去监听 hash 的变化，而后去作相应的操做，其实很是简单，咱们须要用到 location.hash 和 hashchange 这个事件就行了，很简单，和上面的操做差很少这里就不说了。

若是各位看官看的还行，能够到 GitHub 里给我一颗小小的 star 支持一下，谢谢。