实现简单路由
Sunny-117 opened this issue · comments
实现简单路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a onclick="location.href='#/'">11111</a></li>
<li><a href="#/admin">22222222</a></li>
<li><a onclick="location.href='#/server'">333333333</a></li>
</ul>
<div id="div">展示</div>
<script type="text/javascript">
function Router(){
this.routes={}
this.curUrl=''
//添加回调函数
this.route=function(path,callback){
this.routes[path]=callback||function(){}
}
//执行回调函数
this.refresh=function(){
//获取url
this.curUrl=location.hash.slice(1)||'/'
this.routes[this.curUrl]()
}
//监听load和hashchange
this.init=function(){
window.addEventListener('load',this.refresh.bind(this),false)
window.addEventListener('hashchange',this.refresh.bind(this),false)
}
}
let res=document.getElementById('div')
let R=new Router()
//触发监听
R.init()
R.route('/',function(){
res.style.backgroundColor='pink'
res.innerHTML='11111'
})
R.route('/admin',function(){
res.style.backgroundColor='blue'
res.innerHTML='22222'
})
R.route('/server',function(){
res.style.backgroundColor='pink'
res.innerHTML='333333'
})
</script>
</body>
</html>
hash版本
<title>Document</title> b a <script> location.replace; class Router { constructor(routes = {}) { this.routes = routes; this.curUrl = "/"; } addRoute(path, fn) { this.routes[path] = fn; } hashchange() { this.curUrl = location.hash.slice(1) || "/"; this.routes[this.curUrl]?.(); } init() { window.addEventListener( "hashchange", this.hashchange.bind(this) ); window.addEventListener("load", this.hashchange.bind(this)); } } const router = new Router({ "/": function () { console.log("谁懂"); }, "/a": function () { console.log("我是A"); }, "/b": function () { console.log("我是B"); }, }); router.init(); </script><title>Document</title>
b
a
<script>
// class Router {
// constructor(routes = {}) {
// this.routes = routes;
// this.curUrl = "/";
// }
// addRoute(path, fn) {
// this.routes[path] = fn;
// }
// hashchange() {
// this.curUrl = location.hash.slice(1) || "/";
// this.routes[this.curUrl]?.();
// }
// init() {
// window.addEventListener(
// "hashchange",
// this.hashchange.bind(this)
// );
// window.addEventListener("load", this.hashchange.bind(this));
// }
// }
class Router {
constructor(routes = {}) {
this.routes = routes;
this.curUrl = "/";
}
addRoute(path, fn) {
this.routes[path] = fn;
}
urlchange() {
console.log("?");
this.curUrl = location.pathname || "/";
this.routes[this.curUrl]?.();
}
init() {
window.addEventListener(
"popstate",
this.urlchange.bind(this)
);
window.addEventListener("load", this.urlchange.bind(this));
}
}
const router = new Router({
"/": function () {
console.log("谁懂");
},
"/a": function () {
console.log("我是A");
},
"/b": function () {
console.log("我是B");
},
});
router.init();
</script>
要最后init
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a onclick="location.href='#/'">11111</a></li>
<li><a href="#/admin">22222222</a></li>
<li><a onclick="location.href='#/server'">333333333</a></li>
</ul>
<div id="div">展示</div>
<script type="text/javascript">
let res=document.getElementById("div")
const Router=function(){
this.route={}
this.curUrl=''
this.addRoute=(path,cb)=>{
this.route[path]=cb||function(){}
console.log(this.route);
}
this.refresh=()=>{
this.curUrl=location.hash.split('#')[1]||'/'
console.log(this.route);
this.route[this.curUrl]()
}
let res=document.getElementById('div')
this.init=()=>{
console.log(123);
window.addEventListener("load",this.refresh(),false)
window.addEventListener("hashchange",this.refresh(),false)
}
}
const router=new Router()
router.addRoute("/",()=>{
res.style.backgroundColor='pink'
res.innerHTML='11111'
})
router.addRoute("/admin",()=>{
res.style.backgroundColor='black'
res.innerHTML='11111'
})
router.init()
</script>
</body>
</html>