DDR爱好者之家

JS实现前端路由功能示例【原生路由】
站长资源 2024/11/24 佚名
30 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了JS实现前端路由功能。分享给大家供大家参考，具体如下：

路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。

单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。

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

路由实现的原理：window绑定了监听函数，当url的hash值发生变化的时候会触发hashchange回调，在回调中进行不同的操作，马上刷新页面，从而显示不同的页面。

下面是一个前端路由的简单实现：通过路由实现url的切换、页面内容的改变。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>前端路由测试</title>
  <script src="/UploadFiles/2021-04-02/jquery-3.3.1.js">


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);
  if(this.currentUrl&&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();







test.js





Router.route('/one', function () {
  $(".content").html("<p>路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。</p>");
});
Router.route('/two', function () {
  $(".content").html("<h3>单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。</h3>");
});
Router.route('/three', function () {
  $(".content").html("<img src='https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png");
});







注意：router.js要在test.js之前进行调用，不然会先加载test.js从而找不到，出现router.js未被定义。


上面router对象实现主要提供了三个方法


1.init监听浏览器url的hash值更新事件。


2.route存储路由更新时的回调到回调数组routes中，回掉函数将负责对页面进行更新。


3.refresh执行当前url的回调函数，更新页面。


感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。


更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》


希望本文所述对大家JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米