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 相关文章推荐
基于jquery的滑动样例代码
Nov 20 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
简单实现js浮动框
Dec 13 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
Vue formData实现图片上传
Aug 20 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
layui原生表单验证的实例
2019/09/09 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python迭代用法实例教程
2014/09/08 Python
跟老齐学Python之类的细节
2014/10/13 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
pandas的qcut()方法详解
2019/07/06 Python
Python 实现数组相减示例
2019/12/27 Python
Django更新models数据库结构步骤
2020/04/01 Python
幼儿园秋游活动方案
2014/01/21 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
村委会换届选举方案
2014/05/03 职场文书
文明寝室标语
2014/06/13 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
简历自我评价范文
2019/04/24 职场文书