40行原生js代码实现前端简易路由

2024-12-02 13:38:31

前言

在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由

路由到底是一个什么东西?

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。路由发生在OSI网络参考模型中的第三层即网络层

通俗点来讲,路由就是把一个url 发送到后端服务器上,然后获取对应的后端资源

实现一个 hashRouter

// html部分
<body>
  <a href="#1" rel="external nofollow" >go to 1</a>
  <a href="#2" rel="external nofollow" >go to 2</a>
  <a href="#3" rel="external nofollow" >go to 3</a>
  <a href="#4" rel="external nofollow" >go to 4</a>

  <div id="app"></div>

  <div id="div404" style="display: none;">你要找的内容被狗吃了</div>

  <script src="index.js"></script>
</body>

// js
const app = document.getElementById('app')
const div1 = document.createElement('div')
div1.innerHTML = '1.components'
const div2 = document.createElement('div')
div2.innerHTML = '2.components'
const div3 = document.createElement('div')
div3.innerHTML = '3.components'
const div4 = document.createElement('div')
div4.innerHTML = '4.components'

const routerMap = {
  "1": div1,
  "2": div2,
  "3": div3,
  "4": div4
}

function route(container) {
  // 获取路由hash 值
  let hashName = window.location.hash.substr(1)
  console.log(hashName)
  hashName = hashName || '1'
  // 获取路由对应的组件
  const components = routerMap[hashName]
  if(!components) {
    // 404
    components = document.querySelector("#div404");
  }
  components.style.display = 'block'
  console.log(components)

  // 展示界面
  container.innerHTML = "";
  container.appendChild(components);
}
route(app)

window.addEventListener('hashchange', () => {
  route(app);
})

到这里以已经完成了一个js 版的简易路由,在不考虑嵌套的情况下,路由的基本功能已经完成,主要核心的思路其实就是使用 HTML5 中的 hash 提供的一个 api hashchange, 使用这个来监听hash 的变化, 然后去渲染不同的组件

historyRouter

const app = document.getElementById('app')
const div1 = document.createElement('div')
div1.innerHTML = '1.components'
const div2 = document.createElement('div')
div2.innerHTML = '2.components'
const div3 = document.createElement('div')
div3.innerHTML = '3.components'
const div4 = document.createElement('div')
div4.innerHTML = '4.components'

const routerMap = {
  "/1": div1,
  "/2": div2,
  "/3": div3,
  "/4": div4
};

function route(container) {
  // 获取路由hash 值
  let hashName = window.location.pathname;
  if (hashName === "/") {
    hashName = "/1";
  }

  // 获取路由对应的组件
  let components = routerMap[hashName]
  if(!components) {
    // 404
    components = document.querySelector("#div404");
  }
  components.style.display = 'block'

  // 展示界面
  container.innerHTML = "";
  container.appendChild(components);
}

const allA = document.querySelectorAll("a.link");
for(let a of allA) {
  a.addEventListener('click', ()=> {
    e.preventDefault();
    const href = a.getAttribute("href");
    window.history.pushState(null, `page ${href}`, href);
    // 路由变化更新
    onStateChange(href);
  })
}

route(app)

function onStateChange() {
  route(app);
}

这里其实html部分是一样的,相比于hashRouter, 变化点在于 Hsitory 模式无法去监听路由的变化需要在变化的时候手动去更新组件, 还有就是使用的api 变成了 window.history.pushState

memoryRouter

memoryRouter 其实对于前端来说接触的不多,因为这个路由模式更多的是出现在App上,他不适合出现在h5或者pc 上, 这种路由适合看不见的地方

const app = document.getElementById('app')
const div1 = document.createElement('div')
div1.innerHTML = '1.components'
const div2 = document.createElement('div')
div2.innerHTML = '2.components'
const div3 = document.createElement('div')
div3.innerHTML = '3.components'
const div4 = document.createElement('div')
div4.innerHTML = '4.components'

const routerMap = {
  "/1": div1,
  "/2": div2,
  "/3": div3,
  "/4": div4
};

function route(container) {
  // 获取路由hash 值
  let number = window.localStorage.getItem("pathName");
  if (hashName === "/") {
    hashName = "/1";
  }

  // 获取路由对应的组件
  let components = routerMap[hashName]
  if(!components) {
    // 404
    components = document.querySelector("#div404");
  }
  components.style.display = 'block'

  // 展示界面
  container.innerHTML = "";
  container.appendChild(components);
}

const allA = document.querySelectorAll("a.link");
for(let a of allA) {
  a.addEventListener('click', ()=> {
    e.preventDefault();
    const href = a.getAttribute("href");
    window.localStorage.setItem("pathName", href);
    // 路由变化更新
    onStateChange(href);
  })
}

route(app)

function onStateChange() {
  route(app);
}

上面已经实现了 memoryRouter, 其实就把路由藏起来了,在某个地方去获取

最后做个总结

hashRouter 典型的就是路由中会出现#, 在页面中会出现锚点跳转, 还有一个重要需要注意的点就是, 使用 hashRouter 在 # 后面拼接的东西会被浏览器屏蔽掉, 谷歌推出了一个方法, 就是在前面加上一个!但是也不能根治
historyRouter 在路由中没有 #, 虽然变好看了, 但是需要后端配合前端来实现, 因为在路由发生变化的时候, 用户会刷新页面, 所以需要后端把所有的url 都返回一个页面, 404 页面除外
memoryRouter 用的比较少, 了解一下就可以了,它相当于一个看不见的路由, 出现在app 中

最后附上github 链接

到此这篇关于40行原生js代码实现前端简易路由的文章就介绍到这了,更多相关原生js实现前端路由内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS实现前端路由功能示例【原生路由】

本文实例讲述了JS实现前端路由功能.分享给大家供大家参考,具体如下: 路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大.后来ajax异步刷新的出现使得前端也可以对url进行管理,此时,前端路由就出现了. 单页面就是有前端路由来实现的,也就是说网站只有一个页面,点击导航会显示不同的内容,对应的url也在发生改变.在这个过程中,js会实时检测url的变化,从而改变显示的内容. 路由实现的原理:wi
Javascript实现前端简单的路由实例

前言前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等.前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由. HTML 页面中有一个导航菜单ul,和一个div#result用来显示结果,当点击导航菜单时,#result中会显示不同的结果内容. <ul> <li><a href="#/">首页<
40行原生js代码实现前端简易路由

目录前言路由到底是一个什么东西? 实现一个 hashRouter historyRouter memoryRouter 最后做个总结前言在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由路由到底是一个什么东西? 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动.路由发生在OSI网络参考模型中的第三层即网
10行原生JS实现文字无缝滚动(超简单)

废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
8 行 Node.js 代码实现代理服务器

接触 Node.js 已有多年,一直喜欢它的单线程模型和异步IO特性,以及 JavaScript 语言本身的灵活性.同时,JavaScript 前后端通吃,在全栈开发领域具有独特的优势.今天就来看看作为服务端语言的 JavaScript,完成一个简单的代理服务器功能是多么容易. 简单地说,代理服务器就是代理用户访问目标站点的中介服务器.作为前端开发人员,代理的常见用途是跨域访问后台 API.当然,还可以用来科学上网.今天要分享的代码,就是跟科学上网有关. 话不多说,先上 code: var ex
键盘上下键移动选择table表格行的js代码

//这是要操作的表格: 这是第一行这是第二行这是第三行这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = "#FF0000" function document.onkeydown() { //事件的标识代码 if (event.keyCode == 38) { for(var k=0;k [Ctrl+A 全选注:如需引入外部Js需刷新才能执
原生js代码实现图片放大境效果

今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE
在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

1 插入行 var num = 1; function addRow() { num ++; InsertRow(tableList," "+num+"新行 "); } function InsertRow(table,rowHtml) { var o=document.createElement("div"),ol; o.innerHTML=" "+rowHtml+" " ol=o.childNodes[
原生js结合html5制作简易的双色子游戏

想转html5游戏开,这是学习练手的东西,最开始是用面向过程的方式实现,后面用面向对象的方式实现(被坑了)-- 演示地址:http://runjs.cn/detail/ss8pkzrc html代码 <html> <head> <meta charset="utf-8"/> <title>掷色子的游戏</title> </head> <body> <table> <tr> <
原生js代码能实现call和bind吗

js手动实现call和bind都是谎言网上有很多关于说自己实现call和bind的原理的文章,然而call和bind的原理真如他们所说的那样吗?今天就让我来推翻这些所谓的"原理",揭开谎言下的真相. 首先看看网上对call的实现: // 手写 call Function.prototype.mycall = function (context) { context = context || window; context.fn = this; const args = [...arg
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改全选/全不选选框的状态, 即列
原生JS实现手动轮播图效果实例代码

手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st