Javascript实现前端简单的路由实例


Posted in Javascript onSeptember 11, 2016

前言

前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由。

HTML

页面中有一个导航菜单ul,和一个div#result用来显示结果,当点击导航菜单时,#result中会显示不同的结果内容。

<ul> 
 <li><a href="#/">首页</a></li> 
 <li><a href="#/product">产品</a></li> 
 <li><a href="#/server">服务</a></li> 
</ul>
<div id="result"></div>

JAVASCRIPT

说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。

function Router(){
 this.routes = {};
 this.curUrl = '';

 this.route = function(path, callback){
  this.routes[path] = callback || function(){};
 };

 this.refresh = function(){
  this.curUrl = location.hash.slice(1) || '/';
  this.routes[this.curUrl]();
 };

 this.init = function(){
  window.addEventListener('load', this.refresh.bind(this), false);
  window.addEventListener('hashchange', this.refresh.bind(this), false);
 }
}

上面代码中路由系统Router对象实现,主要提供三个方法:

     init监听浏览器 url hash 更新事件。

     route存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新。

     refresh执行当前url对应的回调函数,更新页面。

Router调用方式如下:

点击触发 url 的 hash 改变,并对应地更新内容,运行后你会发现每次点击菜单时,#result中会变换背景色和内容。

var R = new Router();
R.init();
var res = document.getElementById('result');

 R.route('/', function() {
 res.style.background = 'blue';
 res.innerHTML = '这是首页';
 });
 R.route('/product', function() {
  res.style.background = 'orange';
 res.innerHTML = '这是产品页';
 });
 R.route('/server', function() {
  res.style.background = 'black';
 res.innerHTML = '这是服务页';
 });

总结

以上为一个前端路由的简单实现,实际应用中,应该对hash进行正则匹配处理,以满足大量url的应用,同时增加ajax异步请求页面内容等功能。虽然这个实例非常简单,但实际上很多路由系统的根基都立于此,其他路由系统主要是对自身使用的框架机制进行配套及优化。好了,本文的内容到这就结束了,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
完善的jquery处理机制
Feb 21 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
vue element table 表格请求后台排序的方法
Sep 28 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 #Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 #Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 #Javascript
简单分析javascript中的函数
Sep 10 #Javascript
javascript数组常用方法汇总
Sep 10 #Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 #Javascript
Three.js快速入门教程
Sep 09 #Javascript
You might like
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
详解django2中关于时间处理策略
2019/03/06 Python
python实现银行管理系统
2019/10/25 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
九年级化学教学反思
2014/01/28 职场文书
劲霸男装广告词
2014/03/21 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
庆七一主持词
2015/06/29 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers