js实现简单前端路由--hash方式

在单页面应用程序（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>

//叨叨-----------------------------------------------------------------------------------

这是我的学习笔记，参考网上的博文写的代码，网址找不到了，所以没贴出来。

每挖一个坑，会发现里面超级深，初入门，请多指教。

js实现简单前端路由--hash方式

猜你喜欢