router.js
//构造函数 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();
html:
<div class="index"> <a href="#/upload">上传图片</a> </div> <div class="upload_page" style="display:none"> <h2>上传图片</h2> </div>
//前端路由 Router.route(‘/‘, function() { $(‘.upload_page‘).hide(); $(‘.index‘).show(); }); Router.route(‘/upload‘, function() { $(‘.index‘).hide(); $(‘.upload_page‘).show(); });
时间: 2024-10-12 10:05:00