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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 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
15种PHP Encoder的比较
2007/03/06 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python向图片里添加文字
2019/11/26 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python 怎样进行内存管理
2020/11/10 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
关于廉洁的广播稿
2014/01/30 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
详解python网络进程
2021/06/15 Python