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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
js函数般调用正则
Apr 08 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
angular.element方法汇总
2015/01/07 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
vuex实现简易计数器
2016/10/27 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
python解析json实例方法
2013/11/19 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
编辑个人求职信范文
2013/09/21 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
检讨书怎么写?
2019/06/21 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python 多线程处理任务实例
2021/11/07 Python