利用HASH写的一个简单路由

最新推荐文章于 2024-05-20 16:24:35 发布

大笨儿钟

最新推荐文章于 2024-05-20 16:24:35 发布

阅读量3.1k

点赞数 3

分类专栏：我和JavaScript那点事文章标签： javascript hash api

本文链接：https://blog.csdn.net/u014298440/article/details/55509800

版权

我和JavaScript那点事专栏收录该内容

21 篇文章 0 订阅

订阅专栏

单页应用有很多的优点，ng的路由功能就是一个典型例子，现在自己模拟一个简单的路由功能。

1.可以通过监听hashchange来实现。

2.通过window.history的API来实现。

这里尝试先用hash来。

html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="myRouter.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
    头部
</header>

<div id="container">
    <div id="leftSide">
            <ul>
                <li><a href="#/">默认 </a></li>
                <li><a href="#/blue"> 蓝</a></li>
                <li><a href="#/black">黑 </a></li>
                <li><a href="#/green"> 绿</a></li>
            </ul>
    </div>
    <div id="rightSide">
          <div id="myCtrl">

          </div>
    </div>
</div>
<footer>
    尾部
</footer>
</body>
<script type="text/javascript" src="myRouter.js"></script>
</html>

javascript：

/**
 * Created by Administrator on 2017/2/17 0017.
 */
(function(window,undefined){
   var Router= function () {
       this.routes={};
       this.currentUrl="";
   }
    Router.prototype.init=function(){
        //window.addEventListener("load",this.refresh);
        window.addEventListener("hashchange",this.refresh.bind(this));
    }
    Router.prototype.refresh=function(){
      this.currentUrl=location.hash.slice(1)||"/";
        this.routes[this.currentUrl]();
    }
    Router.prototype.route=function(path,callback){
        var result_HandlerResult=callback||function(){};
        this.routes[path]=callback;
    }
    var router=new Router();
    router.init();
    router.route("/", function () {
        var str="<h1>这是一个默认的页面</h1>";
       document.getElementById("myCtrl").innerHTML=str;
    })
    router.route("/blue", function () {
        var str="<h1>这是蓝色的页面</h1>";
        document.getElementById("myCtrl").innerHTML=str;
    })
    router.route("/green", function () {
        var str="<h1>这是绿色的页面</h1>";
        document.getElementById("myCtrl").innerHTML=str;
    })
    router.route("/black", function () {
        var str="<h1>这是黑色的页面</h1>";
        document.getElementById("myCtrl").innerHTML=str;
    })
})(window);

以此练习

大笨儿钟

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用HASH写的一个简单路由

单页应用有很多的优点，ng的路由功能就是一个典型例子，现在自己模拟一个简单的路由功能。1.可以通过监听hashchange来实现。2.通过window.history的API来实现。这里尝试先用hash来。html：html>lang="en"> charset="UTF-8"> href="myRouter.css" rel="s
复制链接

扫一扫