前端路由实现原理

场景

分别点击顶部的”推荐”、”书城”、”书架”进而在顶部下面展示不同的页面。点击其中1个隐藏其他页面。

实现原理

点击a标签对应的”推荐”、”书城”、”书架”，改变hash值后，监听onpopstate事件，进而进行不同的操作。

代码实现

1. 利用H5router实现整个路由系统。

function H5router() {    this.routers = {};    this.init();}

2. 应用场景

let h5route = new H5router();h5route.route('/recommend', () => {    h5route.hideOther();});h5route.route('/bookcity', () => {    h5route.hideOther();});h5route.route('/bookshelves', () => {    h5route.hideOther();});

3. 将路由和对应的回调关联

h5route.route方法就是将回调函数和路径添加到H5router构造函数内部的this.routers中。如下：

 h5route.rototype.route = function (url, cb) {        let newurl = url || '';        this.routers[newurl] = cb || function () {}; }

4. 监听popstate事件

h5route.rototype.init作用就是监听popstate事件，进而执行h5route原型上的refresh方法。这里监听onhashchange也可以。

 h5route.rototype.init = function () {        window.addEventListener('popstate', this.refresh.bind(this));    },

5. 执行路由对应的回调

这里的回调指的是2中() => { h5route.hideOther(); }

h5route.rototype.refresh = function () {        let hash = location.hash.substr(1) || '/';        this.routers[hash]();    },

所有代码

function H5router() {    this.routers = {        '/': function () {}    };    this.init();}H5router.prototype = {    route: function (url, cb) {        let newurl = url || '';        this.routers[newurl] = cb || function () {};    },    init: function () {        window.addEventListener('popstate', this.refresh.bind(this));    },    refresh: function () {        let hash = location.hash.substr(1) || '/';        this.routers[hash]();    },    hideOther: function () {        let head = document.getElementsByClassName('head')[0];        let content = document.getElementsByClassName('content')[0];        let className = location.hash.substr(2) || '/';        Array.from(content.children).forEach(function (ele) {            if (ele.className.indexOf(className) === -1) {                ele.style.display = 'none';            } else {                ele.style.display = 'block';            }        });    }};let h5route = new H5router();h5route.route('/recommend', () => {    h5route.hideOther();});h5route.route('/bookcity', () => {    h5route.hideOther();});h5route.route('/bookshelves', () => {    h5route.hideOther();});

HTML部分：

 <ul class="head">        <li class="head-list"><a id="list-recommend" class="head-list-go" href="#/recommend">推荐</a></li>        <li class="head-list"><a id="list-bookcity" class="head-list-go " href="#/bookcity">书城</a></li>        <li class="head-list"><a id="list-bookshelves" class="head-list-go " href="#/bookshelves">书架</a></li>    </ul>

总结

H5的新API history.pushState()和history.changeState()方法相当于改变history历史记录中的信息，在点击回退或者前进按钮时添加或者替换之前缓存的页面，因此这两个API不能触发onpopstate事件，即从浏览器的历史记录中将某条记录弹出的事件，只有前进和后退按钮可以，这两个API为前进和后退按钮提供了更加灵活的应用。
只要hash值改变就会触发onpopstate和onhashchange事件。