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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
JS实现滑动插件
Jan 15 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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微信支付之APP支付方法
2015/03/04 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
Node.js实现文件上传
2016/07/05 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
python打开windows应用程序的实例
2019/06/28 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python处理session的方法整理
2019/08/29 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python 动态绘制爱心的示例
2020/09/27 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
高中数学教学反思
2014/01/30 职场文书
敬老模范事迹
2014/05/21 职场文书
期末个人总结范文
2015/02/13 职场文书
送达通知书
2015/04/25 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL