Javascript实现前端简单路由

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="javascript" />
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
.text-right li{padding: 10px}
#result{height: 200px; line-height: 200px; font-size: 2rem; text-align: center; color:#fff;}
</style>
</head>
<body>
<div class="container">
    <header>
        <div class="row">
            <div class="col-md-3 col-xs-12"><h1 class="logo"><a href="#" title="返回helloweba首页">helloweba</a></h1></div>
            <div class="col-md-9 text-right"></div>
        </div>
    </header>
    <div class="row main" style="min-height:500px">
        <div class="col-md-12">
        
            
            <div class="row" style="margin-top:30px">
                <div class="col-md-3">
                    <ul class="text-right"> 
                        <li><a href="#/">首页</a></li> 
                        <li><a href="#/product">产品</a></li> 
                        <li><a href="#/server">服务</a></li> 
                    </ul>
                </div>
                <div class="col-md-7">
                    <div id="result"></div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        
    </footer>
</div>
<script type="text/javascript">
function Router(){
    this.routes = {};
    this.curUrl = '';

    this.route = function(path, callback){
        this.routes[path] = callback || function(){};
    };

    this.refresh = function(){
        this.curUrl = location.hash.slice(1) || '/';
        this.routes[this.curUrl]();
    };

    this.init = function(){
        window.addEventListener('load', this.refresh.bind(this), false);
        window.addEventListener('hashchange', this.refresh.bind(this), false);
    }

}

var R = new Router();
R.init();
var res = document.getElementById('result');

 R.route('/', function() {
     res.style.background = 'blue';
     res.innerHTML = '这是首页';
 });
 R.route('/product', function() {
    res.style.background = 'orange';
     res.innerHTML = '这是产品页';
 });
 R.route('/server', function() {
    res.style.background = 'black';
     res.innerHTML = '这是服务页';
 });
</script>
</body>
</html>

 

posted @ 2017-02-15 01:58  每天进步一点点！  阅读(400)  评论(0)  编辑  收藏  举报