-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathrouter_hash.html
141 lines (136 loc) · 5 KB
/
router_hash.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>router</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #666;
}
#main{
width: 800px;
margin: 50px auto;
}
ul{
display: flex;
}
ul li{
flex: 1;
height: 40px;
line-height: 40px;
text-align: center;
color: #666;
list-style: none;
background: #ADD8E6;
border-radius: 10px 10px 0 0;
border-right: 1px solid #999;
}
ul li a{
display: inline-block;
width: 100%;
height: 100%;
}
ul li:last-child{
border-right: none;
}
ul li:hover{
background: #87CEEB;
}
ul li.active{
background: #4682B4;
color: white;
}
ul li.active a{
color: white;
}
#content{
border: 1px solid #ADD8E6;
border-top: none;
color: #333;
padding: 10px;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li><a href="#tab0">tab0</a></li>
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
<li><a href="#tab4">tab4</a></li>
</ul>
<div class="content" id="content">
</div>
</div>
</body>
<script type="text/javascript">
window.addEventListener('hashchange',function(){
console.log('hashchange to:'+location.hash);
});
function Router() {
this.routes = {};
this.currentUrl = '';
this.anchor = 0;
}
//注册hash
Router.prototype.route = function(path, callback) {
this.routes[path] = callback || function(){};
};
//刷新时，执行回调函数
Router.prototype.refresh = function() {
this.currentUrl = location.hash.slice(1) || '';
this.routes[this.currentUrl]();
};
//监听
Router.prototype.init = function() {
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();
var content = document.getElementById('content');
var tabs = document.querySelectorAll('ul li');
Router.route('', function() {
tabs[Router.anchor].classList.remove('active');
Router.anchor = 0;
tabs[Router.anchor].classList.add('active');
content.innerHTML = '<p>状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。</p>';
});
Router.route('tab0', function() {
tabs[Router.anchor].classList.remove('active');
Router.anchor = 0;
tabs[Router.anchor].classList.add('active');
content.innerHTML = '<p>状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。</p>';
});
Router.route('tab1', function() {
tabs[Router.anchor].classList.remove('active');
Router.anchor = 1;
tabs[Router.anchor].classList.add('active');
content.innerHTML = '我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash，大型框架的路由系统大多都是哈希实现的。';
});
Router.route('tab2', function() {
tabs[Router.anchor].classList.remove('active');
Router.anchor = 2;
tabs[Router.anchor].classList.add('active');
content.innerHTML = '我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。';
});
Router.route('tab3', function() {
tabs[Router.anchor].classList.remove('active');
Router.anchor = 3;
tabs[Router.anchor].classList.add('active');
content.innerHTML = '<p>地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。</p>';
});
Router.route('tab4', function() {
tabs[Router.anchor].classList.remove('active');
Router.anchor = 4;
tabs[Router.anchor].classList.add('active');
content.innerHTML = '<p>标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。</p>';
});
</script>
</html>