js路由实现基础

直接附上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>前端路由实现</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        a{
            list-style: none;
            text-decoration: none;
            color: #fff;
        }
        ul{
            width: 500px;
            margin: 100px auto;
        }
        li{
            padding:5px;
            display: inline-block;
            background-color: #000;
        }
    </style>
</head>
<body>


<ul>
    <li><a href="#/">turn white</a></li>
    <li><a href="#/red">turn red</a></li>
    <li><a href="#/yellow">turn yellow</a></li>
</ul>
<div class="hk">
真的么

</div>
<script type="teXt/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    // JavaScript Document
//构造函数
function Router() {
    this.routes = {};
    this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
};
Router.prototype.refresh = function() {
    console.log(location.hash.slice(1));//获取到相应的hash值
    this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值则获取到,否则设置hash值为/
    // console.log(this.currentUrl);
    this.routes[this.currentUrl]();//根据当前的hash值来调用相对应的回调函数
};
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//给window对象挂载属性
window.Router = new Router();
window.Router.init();
</script>
<script type="text/javascript">

var content = document.querySelector('body');
function changeBgColor(color) {
    content.style.backgroundColor = color;
}
$(function(){
	window.history.pushState(null, null,'#/red');
Router.route('/', function() {
    changeBgColor('white');
		$(".hk").show();
});
Router.route('/red', function() {
    changeBgColor('red');
	$(".hk").hide();
});
Router.route('/yellow', function() {
    changeBgColor('yellow');
});
})
</script>
</body>
</html>


写的好!

微信扫一扫赏大洋