學習記錄----簡單的原生js路由
在以前的web程式中，路由字眼只出現在後臺中。但是隨著SPA單頁面程式的發展，便出現了前端路由一說。單頁面顧名思義就是一個網站只有一個html頁面，但是點選不同的導航顯示不同的內容，對應的url也會發生變化，這就是前端路由做的事。也就是通過JS實時檢測url的變化，從而改變顯示的內容。
目前很多前端框架都有介面去實現路由，比如vuejs的vue-route等。我們可以利用原生的hashchange事件來模擬一個簡單的路由。
路由：
根據不同的url 顯示 不同的內容
方法:
hash(錨鏈接)實現路由
history物件
1.首先要了解什麼是hash，在這裡你可以認為hash就是網址後面加上的 #/xxx
如下當點選
<a href="#/html">html</a>
<a href="#/css">css</a> 內容時
<html>
<head runat="server" >
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
window.onload = function () {
//當hash發生變化的時候， 會產生一個事件 onhashchange
window.onhashchange = function () {
alert("你的Hash改變了");
alert(location);
console.log( location );
}
}
</script>
<title>JS路由</title>
</head>
<body>
<a href="#/html">html</a>
<a href="#/css">css</a>
</body>
</html>
2.實現一個簡單的路由
location物件是 javascript內建的(自帶的)
location 物件包含有關當前 URL 的資訊。（也就是網址）
實現的功能：點選時從1-33裡隨機出現五個數，並按照這五個隨機數改變hash，在按鈕下方顯示五個隨機數
<html>
<head runat="server" >
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
window.onload = function () {
var OBtn = document.querySelector("input"); //獲取第一個按鈕
var OBtndiv = document.querySelector("div");//獲取第一個輸出隨機數div盒子
OBtn.onclick = function () {
alert("1");
var num = BuildNum(33, 5);
location.hash = num;//點選時吧網址的hash改變成陣列
}
window.onhashchange = function () {
OBtndiv.innerHTML = location.hash.substring(1);
}
function BuildNum(max, num) {
var arr = [];
for (var n = 0; n < max; n++) {
arr.push(n+1); //增加元素
}
var target = [];
for (var n = 0; n < num; n++) {
target.push(arr.splice(Math.floor(Math.random() * arr.length), 1));
// splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。
// floor 向下取整
}//從1-33這33個數字中 隨機選出5個數放入target陣列
return target;
}
}
</script>
<title>JS路由</title>
</head>
<body>
<input type="button" value="33選5"/>
<div></div>
</body>
</html>
3.簡單路由的運用 (簡單框架雛形的運用) （簡單的html5標籤的運用）
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<style>
header,
footer {
height: 100px;
background: #ccc;
}
section {
width: 60%;
height: 400px;
background: #eee;
float: left;
}
sidebar {
width: 40%;
height: 400px;
background: #999;
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<header>
頭部
</header>
<section>
<ul>
<li><a href="#/">啥都沒有</a></li>
<li><a href="#/html">html</a></li>
<li><a href="#/css">css</a></li>
<li><a href="#/javascript">javascript</a></li>
</ul>
</section>
<sidebar>
右邊
</sidebar>
<div class="clear"></div>
<footer>
底部
</footer>
<script>
//框架雛形：1.用一個立即表示式把框架包起來，避免程式碼汙染（定義的變數..等重複使用）
// 2.在立即表示式裡定義一個建構函式（這裡指var Router）；
// 3.最後加上語句window.objec = functionName;把函式暴露出來，
// 附加到window物件上面這樣(這裡指window.oRou )；
// 4.在建構函式的原型物件上新增函式（init，reloadPage...）
// 5.用第3步附在window的建構函式構建一個新物件，//var oRouter2 = new oRou();
// 這個物件(oRouter2)就可以使用剛剛第4步新增的函數了；
(function () { //立即表示式：(function(){程式碼內容})();
var Router = function () { //建構函式
/*
this.routes['/'] = function(){}
this.routes['/html'] = function(){}
*/
this.routes = {};//用來儲存路由
this.curUrl = ''; //獲取當前的hash
}
Router.prototype.init = function () { //監聽路由變化 當hash變化時呼叫reloadPage函式
//call,apply
// alert("新增hashchange呼叫的物件");
window.addEventListener('hashchange', this.reloadPage1.bind(this));
//第一個this指向window，bind裡面的this指向呼叫這個函式的物件（這裡是oRouter2）
}
Router.prototype.reloadPage1 = function () {
alert(location.hash.substring(1));
alert(location.hash);
this.curUrl = location.hash.substring(1) || '/';//獲取當前hash的值（去掉#）
this.routes[this.curUrl](); //運行當前hsah值對應的函式
}
Router.prototype.map = function (key, callback) { //儲存路由對應的函式：
alert(key +":" +callback)
this.routes[key] = callback; //key表示hash的值（去掉#），callback表示當前hash對應的函式
// console.log( this.routes );
}
window.oRou = Router;
})();
var oRouter2 = new oRou();
oRouter2.init();
oRouter2.map('/', function () {
alert("Zero")
var oSidebar = document.querySelector("sidebar");
oSidebar.innerHTML = '你點，你再點，你點點點';
});
oRouter2.map('/html', function () {
var oSidebar = document.querySelector("sidebar");
oSidebar.innerHTML = '狂拽 酷炫 吊炸天 的html';
});
oRouter2.map('/css', function () {
var oSidebar = document.querySelector("sidebar");
oSidebar.innerHTML = '狂 拽 酷 炫 吊 炸 天 的css';
});
oRouter2.map('/javascript', function () {
var oSidebar = document.querySelector("sidebar");
oSidebar.innerHTML = '狂拽酷炫吊炸天的javascript';
});
</script>
</body>
</html>