首页 > 代码库 > 原生JS实现一个简单的前端路由(原理)
原生JS实现一个简单的前端路由(原理)
说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,
当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。
直接看代码或许更直观。
1 function Router() { 2 this.routes = {}; 3 this.currentUrl = ‘‘; 4 } 5 Router.prototype.route = function(path, callback) { 6 this.routes[path] = callback || function(){}; 7 }; 8 Router.prototype.refresh = function() { 9 this.currentUrl = location.hash.slice(1) || ‘/‘;10 this.routes[this.currentUrl]();11 };12 Router.prototype.init = function() {13 window.addEventListener(‘load‘, this.refresh.bind(this), false);14 window.addEventListener(‘hashchange‘, this.refresh.bind(this), false);15 }16 window.Router = new Router();17 window.Router.init();
上面路由系统 Router 对象实现,主要提供三个方法
- init 监听浏览器 url hash 更新事件
- route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新
- refresh 执行当前url对应的回调函数,更新页面
Router 调用方式以及呈现效果如下:点击触发 url 的 hash 改变,并对应地更新内容(这里为 body 背景色)
<ul> <li><a href="http://www.mamicode.com/#/">turn white</a></li> <li><a href="http://www.mamicode.com/#/blue">turn blue</a></li> <li><a href="http://www.mamicode.com/#/green">turn green</a></li> </ul> var content = document.querySelector(‘body‘);// change Page anythingfunction changeBgColor(color) { content.style.backgroundColor = color;}Router.route(‘/‘, function() { changeBgColor(‘white‘);});Router.route(‘/blue‘, function() { changeBgColor(‘blue‘);});Router.route(‘/green‘, function() { changeBgColor(‘green‘);});
原生JS实现一个简单的前端路由(原理)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。