前端小白之每天学习记录----简单的原生js路由
路由：
根据不同的url 显示 不同的内容
方法:
hash(锚链接)实现路由
history对象
1.首先要了解什么是hash，在这里你可以认为hash就是网址后面加上的 #/xxx
当<a>标签被点击时
<a href="#/html">ches</a>
会在原网址后面加上<a>里面herf的内容，当该内容改变时，会产生一个事件 onhashchange
话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
//当hash发生变化的时候， 会产生一个事件 onhashchange
window.onhashchange = function(){
alert( '你的hash改变了' );
//location对象是 javascript内置的(自带的)
console.log( location );
}
}
</script>
</head>
<body>
<a href="#/html">html</a>
<a href="#/css">css</a>
</body>
</html>
2.实现一个简单的路由
location对象：
location对象是 javascript内置的(自带的)
location 对象包含有关当前 URL 的信息。（也就是网址）
以下代码可以让网页跳转到百度：
window.location="https://www.baidu.com/"；
一个简单的路由
实现的功能：点击时从1-33里随机出现五个数，并按照这五个随机数改变hash，在按钮下方显示五个随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.querySelector("input");//获取按钮
var oDiv = document.querySelector("div");//获取随机数的输出div盒子
//33->max 5->num
function buildNum( max, num ){ //这个函数返回 1到33选出的5个随机数结合的数组
var arr = [];
for( var i = 0; i < max; i++ ){
arr.push( i + 1 );
} //1-33数字集合的数组
var target = [];
for( var i = 0; i < num; i++ ){
target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) );
} //从1-33这33个数字中 随机选出5个数放入target数组
return target;
}
oBtn.onclick = function(){
var num = buildNum( 33, 5 );
// oDiv.innerHTML = num;
location.hash = num; //点击时吧网址的hash改变成数组 eg：#20,14,6,22,30
}
window.onhashchange = function(){
oDiv.innerHTML = location.hash.substring(1);//在div里面输出5个随机数 eg：20,14,6,22,30
}
}
</script>
</head>
<body>
<input type="button" value="33选5">
<div></div>
</body>
</html>
3.简单路由的运用 (简单框架雏形的运用) （简单的html5标签的运用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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
window.addEventListener('hashchange', this.reloadPage.bind(this));
//第一个this指向window，bind里面的this指向调用这个函数的对象（这里是oRouter2）
}
Router.prototype.reloadPage = function () {
this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
this.routes[this.curUrl](); //运行当前hsah值对应的函数
}
Router.prototype.map = function (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 () {
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>
实现效果：点击时，右边的部分会根据点击的不同而改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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
window.addEventListener( 'hashchange', this.reloadPage.bind(this) );
//第一个this指向window，bind里面的this指向调用这个函数的对象（这里是oRouter2）
}
Router.prototype.reloadPage = function(){
this.curUrl = location.hash.substring(1) || '/';//获取当前hash的值（去掉#）
this.routes[this.curUrl](); //运行当前hsah值对应的函数
}
Router.prototype.map = function( 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(){
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>
浙公网安备 33010602011771号