手写---前端简单路由

本文路由呈现以hash形式，当URL中的hash值发生变化时，监听hashchange，触发回调函数，再在回调函数中进行不同的操作，进行不同内容的展示

    <ul><li><a href="#/">首页</a></li><li><a href="#/second">第二页</a></li><li><a href="#/third">尾页</a></li></ul><div id="rr"></div>

 function Router(){// 存储路由及路由对应的回调函数this.Routers={}//记录当前的hash值this.curUrl=''//存储更新路由时的回调在Routers中,回调函数负责对页面的更新this.route=function(path,callback){this.Routers[path]=callback||function(){}}this.refresh=function(){this.curUrl=location.hash.slice(1)||'/'// console.log(this.curUrl);this.Routers[this.curUrl]()}//监听浏览器url hash更新事件this.init=function(){window.addEventListener('load',this.refresh.bind(this),false)window.addEventListener('hashchange',this.refresh.bind(this),false)}}var r = new Router()let res = document.querySelector('div')r.init()r.route('/',function(){res.style.fontSize='30px',res.innerHTML='首页'console.log('object');})r.route('/second',()=>{res.style.fontSize='30px',res.innerText='第二页'})r.route('/third',()=>{res.style.fontSize='30px',res.innerText='尾页'})

手写---前端简单路由相关推荐

jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
手写实现简单栈（练习题）
一.手写实现简单栈 push(x) -- 将元素 x 推入栈中. pop() -- 删除栈顶的元素. top() -- 获取栈顶元素. getMin() -- 检索栈中的最小元素.示例:输入: [&q ...
手写一个简单的IOC容器
手写一个简单的IOC容器原文 http://localhost:4000/2020/02/25/SSM/spring/%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AA%E5% ...
怎么手写一个简单的List集合
List集合手写一个简单的List集合为自己调用并不是特别难,只需要定义一个集合接口去提供所有方法的定义如下代码 : package com.myself.util; /*** * @author ...
基于bio手写实现简单的rpc
基于bio手写实现简单的rpc 1.bio基础知识 Java BIO:传统的网络通讯模型,就是BIO,同步阻塞IO, 其实就是服务端创建一个ServerSocket, 然后就是客户端用一个Socket ...
小白前端之路:手写一个简单的vue-router这几年，好像过的好快，怀念我的大学生活。 - 连某人大三实习生,之前写过简单MVVM框架、简单的vuex、但是看了vue-router的源码(看了
这几年,好像过的好快,怀念我的大学生活. 连某人大三实习生,之前写过简单MVVM框架.简单的vuex.但是看了vue-router的源码(看了大概)之后就没有写,趁着周末不用工作(大三趁着不开学出来 ...
手写一个简单的HashMap，搞定挑剔面试官
作者:编程十二链接:https://www.jianshu.com/p/1be0e957baf2 前言今天去面试啊,聊得差不多的时候面试官突然问我会手写HashMap吗?这我哪能怂啊,好死不死的面 ...
手写一个简单的线程池MyThreadPool
说明手写的一个简单的线程池,旨在帮助了解线程池的工作原理. 核心内容核心工作线程任务阻塞队列定义一个内部类去实现核心工作线程 /*** 内部类:工作的核心线程*/private final c ...
深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动.所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据.vue.js里面只需要改变数据,Vue ...

手写---前端简单路由

手写---前端简单路由相关推荐

最新文章

热门文章