单页应用有很多的优点,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);
以此练习