原生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="#/">turn white</a></li>
    <li><a href="#/blue">turn blue</a></li>
    <li><a href="#/green">turn green</a></li>
</ul>
var content = document.querySelector(‘body‘);
// change Page anything
function changeBgColor(color) {
    content.style.backgroundColor = color;
}
Router.route(‘/‘, function() {
    changeBgColor(‘white‘);
});
Router.route(‘/blue‘, function() {
    changeBgColor(‘blue‘);
});
Router.route(‘/green‘, function() {
    changeBgColor(‘green‘);
});

时间: 2024-10-07 00:11:23

原生JS实现一个简单的前端路由(原理)的相关文章

原生js做一个简单的进度条

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素. 主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止 效果如下: 一 css如下: *{ margin: 0; padding: 0; } #box{ width: 500px; height: 30px; margin: 50px auto; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 15px;

原生js实现一个简单轮播效果

代码简单,直接上: <!DOCTYPE html> <html> <head> <title>轮播</title> <meta charset="utf-8"> <style type="text/css"> *{ padding:0; margin:0; } .mainCss{ width:100px; height: 200px; position: relative; over

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步:  通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

使用JS完成一个简单的计算器功能

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById("id").value = 1: 取值:var = document.getElementById("id").value: 任务 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElement

原生js实现一个DIV的碰撞反弹运动

 原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back

前端路由原理及vue-router介绍

前端路由原理本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新.目前单页面使用的路由就只有两种实现方式 hash history www.test.com/##/ 就是 Hash URL,当 ## 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面. vue-router hash实现源码(完整源码访问https://github.com/vuejs/vue-router/blob/dev/src