在单页面应用程序(SPA)中,前端通过url的改变来渲染不同的页面, 但希望能将url的页面记录下来。这样可以使用浏览器的后退前进键来返回上一页。
要实现这一点,首先要实现前端路由。根据路由的不同,渲染不同页面,执行不同方法。
简单的前端路由有两种实现方式:
1. hash
2.history API
//------------------------------------------------------------------------------------------------
下面介绍第一种hash的方式。
这一方式,主要是通过监听onhashchange事件来实现的,但是有浏览器兼容性问题。下面是浏览器支持的情况(截图来源:http://www.runoob.com/jsref/event-onhashchange.html)。
在不支持此事件的浏览器中,可以通过轮询hash是否变化来实现。
下面是实现了简单前端路由功能的一个小demo。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ position:absolute; left: 0px; top:0px; display: none; } </style> </head> <body> <div id="index-page" class="content"> <ul> <li><a href="#/index">index</a></li> <li><a href="#/text">text</a></li> <li><a href="#/news">news</a></li> <li><a href="#/about">about</a></li> <li><a href="http://www.baidu.com">baidu</a></li> </ul> </div> <div id="text-page" class="content"> <h1> this is text page</h1> <a href="#/index">back</a> </div> <div id="news-page" class="content"> <h1>this is new page</h1> <a href="#/index">back</a> </div> <div id="about-page" class="content"> <h1>this is about page</h1> <a href="#/index">back</a> </div> <script> //构造函数 function Router(){ this.routes={}; this.currentURL=''; } //定义路由回调函数 Router.prototype.route = function(path,callback){ this.routes[path] = callback || function(){}; } //定义路由更新时的调用函数 Router.prototype.refresh = function(){ this.currentURL = location.hash.slice(1) || '/index'; try { //抛出路由不正确的路由 this.routes[this.currentURL](); } catch(err) { alert("请输入合法路由"); } } //路由初始化函数,添加监听事件 Router.prototype.init = function () { var that = this; if (window.addEventListener) { window.addEventListener("load",function(){that.refresh();},false); if ( "onhashchange" in window.document.body ) { window.addEventListener("hashchange",function(){that.refresh();},false) }else{ onhashchange_compatibility(that); } } else if (window.attachEvent) { //ie低版本兼容 window.attachEvent("onload",function(){that.refresh();},false); window.attachEvent("onhashchange",function(){that.refresh();},false) onhashchange_compatibility(that); } //bind()函数IE8以下不支持 // window.addEventListener('load',this.refresh.bind(this),false); // window.addEventListener('hashchange',this.refresh.bind(this),false); } //轮询url的变化 function onhashchange_compatibility(that){ var location = window.location, oldURL = location.href, oldHash = location.hash; // 每隔100ms检查hash是否发生变化 setInterval(function() { var newHash = location.hash; if ( newHash != oldHash) { that.refresh(); oldURL = location.href; oldHash = newHash; } }, 100); } //自定义路由更新时的回调函数 function display_page(id){ var el = document.getElementsByClassName("content"); for(var i = 0; i < el.length; i++){ el[i].style.display = "none"; } el[id].style.display = "block"; } window.Router = new Router(); //将合法路由以及执行的回调函数写入routes Router.route('/index',function(){ display_page(0); }) Router.route('/text',function(){ display_page(1); }) Router.route('/news',function(){ display_page(2); }) Router.route('/about',function(){ display_page(3); }) //初始化 window.Router.init(); </script> </body> </html>
//叨叨-----------------------------------------------------------------------------------
这是我的学习笔记,参考网上的博文写的代码,网址找不到了,所以没贴出来。
每挖一个坑,会发现里面超级深,初入门,请多指教。